Rework some code to be prettyerish.

CMakeLists.txt

@@ -13,12 +13,17 @@ find_package(Qt5Concurrent REQUIRED)
 
 find_package(Qt5 CONFIG REQUIRED COMPONENTS Qml Quick Gui Widgets Core X11Extras)
 
+option(QML_DEBUG "enable qml debug" OFF)
+if(QML_DEBUG)
+add_definitions(-DQT_QML_DEBUG)
+endif()
+
 find_package(Qt5QuickCompiler)
-#if(Qt5QuickCompiler_FOUND)
+if(Qt5QuickCompiler_FOUND)
-#qtquick_compiler_add_resources(qml_QRC src/qml/qml.qrc)
+qtquick_compiler_add_resources(qml_QRC src/qml/qml.qrc)
-#else()
+else()
 qt5_add_resources(qml_QRC src/qml/qml.qrc)
-#endif()
+endif()
 
 find_package(PkgConfig)
 pkg_check_modules(MPV REQUIRED mpv)

src/main.cpp

@@ -6,6 +6,9 @@
 #include <qprocess.h>
 #include <qqml.h>
 #include <qqmlapplicationengine.h>
+#ifdef QT_QML_DEBUG
+#include <qqmldebug.h>
+#endif
 #include <qsettings.h>
 #include <qstring.h>
 #include <qstringliteral.h>
@@ -98,9 +101,14 @@ main(int argc, char* argv[])
   QApplication app(argc, argv);
 
   app.setOrganizationName("KittehPlayer");
-  app.setOrganizationDomain("namedkitten.pw");
+  app.setOrganizationDomain("kitteh.pw");
   app.setApplicationName("KittehPlayer");
 
+#ifdef QT_QML_DEBUG
+  // Allows debug.
+  QQmlDebuggingEnabler enabler;
+#endif
+
   QSettings settings;
   Utils::SetDPMS(false);
 

src/qml/ControlsBar.qml

@@ -9,12 +9,13 @@ import player 1.0
 
 Item {
     id: controlsBarItem
-    anchors.bottom: parent.bottom
-    anchors.left: parent.left
-    anchors.right: parent.right
-
     property var combinedHeight: progressBar.height + controlsBackground.height
     property bool controlsShowing: true
+    anchors {
+        bottom: parent.bottom
+        left: parent.left
+        right: parent.right
+    }
 
     Connections {
         target: globalConnections
@@ -26,10 +27,6 @@ Item {
         }
     }
 
-    Component.onCompleted: {
-        setControlsTheme(appearance.themeName)
-    }
-
     Connections {
         target: appearance
         onThemeNameChanged: setControlsTheme(appearance.themeName)
@@ -49,78 +46,21 @@ Item {
         component.createObject(controlsBar, {})
     }
 
-    Item {
+    SubtitlesBar {
-        id: subtitlesBar
-        visible: !appearance.useMpvSubs
-        height: player.height / 8
         anchors.bottom: controlsBackground.top
-        anchors.bottomMargin: 5
-        anchors.right: parent.right
-        anchors.left: parent.left
-
-        RowLayout {
-            id: nativeSubtitles
-            visible: true
-            anchors.left: subtitlesBar.left
-            anchors.right: subtitlesBar.right
-            height: childrenRect.height
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 10
-
-            Item {
-                id: subsContainer
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                Layout.rightMargin: 0
-                Layout.leftMargin: 0
-                Layout.maximumWidth: nativeSubtitles.width
-                height: childrenRect.height
-
-                Label {
-                    id: nativeSubs
-                    objectName: "nativeSubs"
-                    onWidthChanged: {
-
-                        if (width > parent.width - 10)
-                            width = parent.width - 10
-                    }
-                    onTextChanged: if (width <= parent.width - 10)
-                                       width = undefined
-                    color: "white"
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    font.pixelSize: appearance.subtitlesFontSize
-                    font.family: appearance.fontName
-                    horizontalAlignment: Text.AlignHCenter
-                    opacity: 1
-                    background: Rectangle {
-                        id: subsBackground
-                        color: getAppearanceValueForTheme(appearance.themeName,
-                                                          "mainBackground")
-                        width: subsContainer.childrenRect.width
-                        height: subsContainer.childrenRect.height
-                    }
-                    Connections {
-                        target: player
-                        onSubtitlesChanged: function (subtitles) {
-                            nativeSubs.text = subtitles
-                        }
-                    }
-                }
-            }
-        }
     }
 
     VideoProgress {
         id: progressBar
-        visible: controlsBarItem.controlsShowing
+        visible: controlsBarItem.controlsShowing && appearance.themeName != "RoosterTeeth"
-                 && (appearance.themeName == "RoosterTeeth" ? false : true)
-        anchors.bottom: controlsBackground.top
-        anchors.left: controlsBackground.left
-        anchors.right: controlsBackground.right
-        anchors.bottomMargin: 0
         bottomPadding: 0
         z: 20
+        anchors {
+            bottom: controlsBackground.top
+            left: controlsBackground.left
+            right: controlsBackground.right
+            bottomMargin: 0
+        }
     }
 
     Rectangle {
@@ -128,27 +68,35 @@ Item {
         height: controlsBar.visible ? controlsBar.height
                                       + (appearance.themeName
                                          == "RoosterTeeth" ? 0 : progressBar.topPadding) : 0
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
         Layout.fillWidth: true
         Layout.fillHeight: true
         color: getAppearanceValueForTheme(appearance.themeName,
                                           "mainBackground")
         visible: controlsBarItem.controlsShowing
         z: 10
+        anchors {
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
     }
 
     Item {
         id: controlsBar
         height: controlsBar.visible ? mainWindow.virtualHeight / 20 : 0
-        anchors.right: parent.right
-        anchors.rightMargin: parent.width / 128
-        anchors.left: parent.left
-        anchors.leftMargin: parent.width / 128
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
         visible: controlsBarItem.controlsShowing
         z: 30
+        anchors {
+            right: parent.right
+            rightMargin: parent.width / 128
+            left: parent.left
+            leftMargin: parent.width / 128
+            bottom: parent.bottom
+            bottomMargin: 0
+        }
+    }
+
+    Component.onCompleted: {
+        setControlsTheme(appearance.themeName)
     }
 }

src/qml/Items/ChapterMarkerItem.qml

@@ -8,6 +8,15 @@ Rectangle {
     property int time: 0
     color: getAppearanceValueForTheme(appearance.themeName,
                                       "chapterMarkerColor")
+    width: 4
+    height: parent.height
+    x: progressBar.background.width / progressBar.to * time
+    z: 9000
+    anchors {
+        top: parent.top
+        bottom: parent.bottom
+    }
+
     Connections {
         target: player
         enabled: true
@@ -15,11 +24,4 @@ Rectangle {
             chapterMarker.destroy()
         }
     }
-
-    width: 4
-    height: parent.height
-    anchors.top: parent.top
-    anchors.bottom: parent.bottom
-    x: progressBar.background.width / progressBar.to * time
-    z: 9000
 }

src/qml/Items/CustomMenuItem.qml

@@ -8,19 +8,19 @@ MenuItem {
 
     contentItem: Text {
         text: menuItem.text
-
-        font.family: appearance.fontName
-        font.bold: menuItem.highlighted
         opacity: 1
         color: menuItem.highlighted ? "#5a50da" : "white"
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
+        font {
+            family: appearance.fontName
+            bold: menuItem.highlighted
+        }
     }
 
     background: Rectangle {
-        width: parent.width
+        anchors.fill: parent
-        height: parent.height
         opacity: 1
         color: menuItem.highlighted ? "#c0c0f0" : "transparent"
     }

src/qml/MainMenu.qml

@@ -34,11 +34,13 @@ MenuBar {
             var menu = trackMenus[a]
             for (var i = 0, len = menu.count; i < len; i++) {
                 var action = menu.actionAt(i)
+                if (action) {
                     if (action.trackID != "no") {
                         menu.removeAction(action)
                     }
                 }
             }
+        }
 
         for (var i = 0, len = newTracks.length; i < len; i++) {
             var track = newTracks[i]
@@ -128,9 +130,11 @@ MenuBar {
         contentItem: Text {
             id: menuBarItemText
             text: menuBarItem.text
-            font.family: appearance.fontName
+            font {
-            font.pixelSize: menuBar.height / 2
+                family: appearance.fontName
-            font.bold: menuBarItem.highlighted
+                pixelSize: menuBar.height / 2
+                bold: menuBarItem.highlighted
+            }
             opacity: 1
             color: menuBarItem.highlighted ? "#5a50da" : "white"
             horizontalAlignment: Text.AlignLeft

src/qml/NiconicoButtonLayout.qml

@@ -1,10 +1,4 @@
 import QtQuick 2.0
-import QtQuick.Controls 2.3
-import QtQuick.Dialogs 1.3
-import QtQuick.Layouts 1.2
-import QtQuick.Window 2.2
-import Qt.labs.settings 1.0
-import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
 Item {
@@ -14,79 +8,83 @@ Item {
 
     PlayPauseButton {
         id: playPauseButton
-        anchors.left: parent.left
+        anchors {
-        anchors.top: parent.top
+            left: parent.left
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 2
+            bottom: parent.bottom
-        iconWidth: parent.height / 2
+        }
     }
     VolumeButton {
         id: volumeButton
-        anchors.left: playPauseButton.right
+        anchors {
-        anchors.top: parent.top
+            left: playPauseButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 2
+            bottom: parent.bottom
-        iconWidth: parent.height / 2
+        }
     }
     VolumeSlider {
-        anchors.left: volumeButton.right
+        anchors {
-        anchors.top: parent.top
+            left: volumeButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
+            bottom: parent.bottom
+        }
     }
 
     PlaylistPrevButton {
         id: playlistPrevButton
-        anchors.right: backwardButton.left
+        anchors {
-        anchors.top: parent.top
+            right: backwardButton.left
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 2
+            bottom: parent.bottom
-        iconWidth: parent.height / 2
+        }
     }
     BackwardButton {
         id: backwardButton
-        anchors.right: timeLabel.left
+        anchors {
-        anchors.top: parent.top
+            right: timeLabel.left
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 2
+            bottom: parent.bottom
-        iconWidth: parent.height / 2
+        }
     }
     TimeLabel {
         id: timeLabel
-        anchors.centerIn: parent
+        anchors {
-        anchors.top: parent.top
+            centerIn: parent
-        anchors.bottom: parent.bottom
+            top: parent.top
+            bottom: parent.bottom
+        }
     }
     ForwardButton {
         id: forwardButton
-        anchors.left: timeLabel.right
+        anchors {
-        anchors.top: parent.top
+            left: timeLabel.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 2
+            bottom: parent.bottom
-        iconWidth: parent.height / 2
+        }
     }
     PlaylistNextButton {
         id: playlistNextButton
-        anchors.left: forwardButton.right
+        anchors {
-        anchors.top: parent.top
+            left: forwardButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 2
+            bottom: parent.bottom
-        iconWidth: parent.height / 2
+        }
     }
 
     FullscreenButton {
         id: fullscreenButton
-        anchors.right: settingsButton.left
+        anchors {
-        anchors.top: parent.top
+            right: settingsButton.left
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 2
+            bottom: parent.bottom
-        iconWidth: parent.height / 2
+        }
     }
     SettingsButton {
         id: settingsButton
-        anchors.right: parent.right
+        anchors {
-        anchors.top: parent.top
+            right: parent.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 2
+            bottom: parent.bottom
-        iconWidth: parent.height / 2
+        }
     }
 }

src/qml/RoosterTeethButtonLayout.qml

@@ -1,10 +1,4 @@
 import QtQuick 2.0
-import QtQuick.Controls 2.3
-import QtQuick.Dialogs 1.3
-import QtQuick.Layouts 1.2
-import QtQuick.Window 2.2
-import Qt.labs.settings 1.0
-import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
 Item {
@@ -14,17 +8,20 @@ Item {
 
     PlayPauseButton {
         id: playPauseButton
-        anchors.top: parent.top
+        anchors {
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+            left: parent.left
+        }
     }
 
     MouseArea {
         id: mouseAreaVolumeArea
-        anchors.right: volumeSliderArea.right
+        anchors {
-        anchors.bottom: volumeButton.bottom
+            right: volumeSliderArea.right
-        anchors.left: volumeButton.left
+            bottom: volumeButton.bottom
+            left: volumeButton.left
+        }
         height: parent.height + (volumeSliderArea.visible ? volumeSliderArea.height : 0)
         hoverEnabled: true
         z: 500
@@ -33,7 +30,6 @@ Item {
         onEntered: {
             mouseAreaPlayerTimer.stop()
         }
-
         onExited: {
             mouseAreaPlayerTimer.restart()
         }
@@ -41,44 +37,44 @@ Item {
 
     VolumeButton {
         id: volumeButton
-        anchors.left: playPauseButton.right
+        anchors {
-        anchors.top: parent.top
+            left: playPauseButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+        }
         hoverEnabled: true
-        iconColor: hovered
-                   || mouseAreaVolumeArea.containsMouse ? getAppearanceValueForTheme(
-                                                              appearance.themeName,
-                                                              "buttonHoverColor") : getAppearanceValueForTheme(
-                                                              appearance.themeName,
-                                                              "buttonColor")
     }
 
     VerticalVolume {
         id: volumeSliderArea
-        anchors.bottom: volumeButton.top
+        anchors {
-        anchors.left: volumeButton.left
+            bottom: volumeButton.top
-        anchors.right: volumeButton.right
+            left: volumeButton.left
+            right: volumeButton.right
+        }
         width: volumeButton.width
         visible: mouseAreaVolumeArea.containsMouse || volumeButton.hovered
     }
 
     TimeLabel {
         id: timeLabel
-        anchors.left: volumeButton.right
+        anchors {
-        anchors.top: parent.top
+            left: volumeButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
+            bottom: parent.bottom
+        }
     }
 
     VideoProgress {
         id: videoProgressRoosterTeeth
-        anchors.left: timeLabel.right
+        anchors {
-        anchors.right: speedText.left
+            top: parent.top
-        anchors.leftMargin: parent.width / 128
+            bottom: parent.bottom
-        anchors.rightMargin: parent.width / 128
+            left: timeLabel.right
-        anchors.top: parent.top
+            leftMargin: parent.width / 128
-        anchors.bottom: parent.bottom
+            right: speedText.left
+            rightMargin: parent.width / 128
+        }
         height: parent.height
         to: progressBar.to
         value: progressBar.value
@@ -87,25 +83,27 @@ Item {
 
     SpeedText {
         id: speedText
-        anchors.top: parent.top
+        anchors {
-        anchors.bottom: parent.bottom
+            top: parent.top
-        anchors.right: fullscreenButton.left
+            bottom: parent.bottom
+            right: fullscreenButton.left
+        }
     }
 
     FullscreenButton {
         id: fullscreenButton
-        anchors.right: settingsButton.left
+        anchors {
-        anchors.top: parent.top
+            right: settingsButton.left
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+        }
     }
     SettingsButton {
         id: settingsButton
-        anchors.right: parent.right
+        anchors {
-        anchors.top: parent.top
+            right: parent.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+        }
     }
 }

src/qml/SubtitlesBar.qml

@@ -0,0 +1,71 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.3
+import QtQuick.Dialogs 1.3
+import QtQuick.Layouts 1.2
+import QtQuick.Window 2.2
+import Qt.labs.settings 1.0
+import Qt.labs.platform 1.0 as LabsPlatform
+import player 1.0
+
+Item {
+    id: subtitlesBar
+    visible: !appearance.useMpvSubs
+    height: player.height / 8
+    anchors {
+        bottomMargin: 5
+        right: parent.right
+        left: parent.left
+    }
+    RowLayout {
+        id: nativeSubtitles
+        height: childrenRect.height
+        visible: true
+        anchors {
+            left: subtitlesBar.left
+            right: subtitlesBar.right
+            bottom: parent.bottom
+            bottomMargin: 10
+        }
+        Item {
+            id: subsContainer
+            height: childrenRect.height
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.rightMargin: 0
+            Layout.leftMargin: 0
+            Layout.maximumWidth: nativeSubtitles.width
+            Label {
+                id: nativeSubs
+                objectName: "nativeSubs"
+                anchors.horizontalCenter: parent.horizontalCenter
+                color: "white"
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                horizontalAlignment: Text.AlignHCenter
+                opacity: 1
+                font {
+                    pixelSize: appearance.subtitlesFontSize
+                    family: appearance.fontName
+                }
+                background: Rectangle {
+                    id: subsBackground
+                    color: getAppearanceValueForTheme(appearance.themeName,
+                                                      "mainBackground")
+                    width: subsContainer.childrenRect.width
+                    height: subsContainer.childrenRect.height
+                }
+                onWidthChanged: {
+                    if (width > parent.width - 10)
+                        width = parent.width - 10
+                }
+                onTextChanged: if (width <= parent.width - 10)
+                                   width = undefined
+                Connections {
+                    target: player
+                    onSubtitlesChanged: function (subtitles) {
+                        nativeSubs.text = subtitles
+                    }
+                }
+            }
+        }
+    }
+}

src/qml/UIComponents/BackwardButton.qml

@@ -8,14 +8,7 @@ import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
 SmoothButton {
-    id: backwardButton
     iconSource: "icons/" + appearance.themeName + "/backward.svg"
-
-    hoverEnabled: true
-    iconColor: hovered ? getAppearanceValueForTheme(
-                             appearance.themeName,
-                             "buttonHoverColor") : getAppearanceValueForTheme(
-                             appearance.themeName, "buttonColor")
     onClicked: {
         player.playerCommand(Enums.Commands.Seek, "-10")
     }

src/qml/UIComponents/ButtonImage.qml

@@ -1,22 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Window 2.2
-import QtGraphicalEffects 1.0
-
-Image {
-    id: root
-    smooth: true
-
-    property alias color: colorOverlay.color
-    property int iconHeight: 24
-    property int iconWidth: 24
-    fillMode: Image.PreserveAspectFit
-    sourceSize.height: iconHeight
-    sourceSize.width: iconWidth
-
-    ColorOverlay {
-        id: colorOverlay
-        anchors.fill: root
-        source: root
-        color: "#000000"
-    }
-}

src/qml/UIComponents/ForwardButton.qml

@@ -8,13 +8,7 @@ import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
 SmoothButton {
-    id: forwardButton
     iconSource: "icons/" + appearance.themeName + "/forward.svg"
-    hoverEnabled: true
-    iconColor: hovered ? getAppearanceValueForTheme(
-                             appearance.themeName,
-                             "buttonHoverColor") : getAppearanceValueForTheme(
-                             appearance.themeName, "buttonColor")
     onClicked: {
         player.playerCommand(Enums.Commands.Seek, "10")
     }

src/qml/UIComponents/FullscreenButton.qml

@@ -8,15 +8,8 @@ import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
 SmoothButton {
-    id: fullscreenButton
     iconSource: "icons/" + appearance.themeName + "/fullscreen.svg"
-    hoverEnabled: true
-    iconColor: hovered ? getAppearanceValueForTheme(
-                             appearance.themeName,
-                             "buttonHoverColor") : getAppearanceValueForTheme(
-                             appearance.themeName, "buttonColor")
     Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-
     onClicked: {
         toggleFullscreen()
     }

src/qml/UIComponents/MenuTitleBar.qml

@@ -7,10 +7,12 @@ import QtQuick.Window 2.2
 Item {
     id: menuTitleBar
     height: menuBar.height
-    anchors.left: parent.left
-    anchors.right: parent.right
-    anchors.top: parent.top
     visible: true
+    anchors {
+        left: parent.left
+        right: parent.right
+        top: parent.top
+    }
 
     Connections {
         target: globalConnections
@@ -29,13 +31,14 @@ Item {
     }
 
     Rectangle {
-        id: titleBar
         height: menuBar.height
-        anchors.right: parent.right
-        anchors.left: menuBar.right
-        anchors.top: parent.top
         color: getAppearanceValueForTheme(appearance.themeName,
                                           "mainBackground")
+        anchors {
+            right: parent.right
+            left: menuBar.right
+            top: parent.top
+        }
 
         Text {
             id: titleLabel
@@ -44,26 +47,31 @@ Item {
             color: "white"
             width: parent.width
             height: parent.height
-            anchors.left: parent.left
-            anchors.leftMargin: 4
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 4
-            anchors.top: parent.top
-            font.family: appearance.fontName
             fontSizeMode: Text.VerticalFit
-            font.pixelSize: appearance.scaleFactor * (height - anchors.topMargin
-                                                      - anchors.bottomMargin - 2)
-            font.bold: true
             opacity: 1
             visible: menuTitleBar.visible
                      && ((!appearance.titleOnlyOnFullscreen)
                          || (mainWindow.visibility == Window.FullScreen
                              || mainWindow.visibility == Window.Maximized))
+            font {
+                family: appearance.fontName
+                bold: true
+                pixelSize: appearance.scaleFactor * (height - anchors.topMargin
+                                                      - anchors.bottomMargin - 2)
+            }
+            anchors {
+                left: parent.left
+                leftMargin: 4
+                bottom: parent.bottom
+                bottomMargin: 4
+                top: parent.top
+            }
+
             Connections {
                 target: player
                 onTitleChanged: function (title) {
                     titleLabel.text = title
-                    mainWindow.title = title
+                    mainWindow.title = "KittehPlayer - " + title
                 }
             }
         }

src/qml/UIComponents/PlayPauseButton.qml

@@ -8,13 +8,7 @@ import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
 SmoothButton {
-    id: playPauseButton
     iconSource: "icons/" + appearance.themeName + "/pause.svg"
-    hoverEnabled: true
-    iconColor: hovered ? getAppearanceValueForTheme(
-                             appearance.themeName,
-                             "buttonHoverColor") : getAppearanceValueForTheme(
-                             appearance.themeName, "buttonColor")
     onClicked: {
         player.playerCommand(Enums.Commands.TogglePlayPause)
     }

src/qml/UIComponents/PlaylistNextButton.qml

@@ -8,14 +8,7 @@ import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
 SmoothButton {
-    id: playlistNextButton
-    //icon.name: "next"
     iconSource: "icons/" + appearance.themeName + "/next.svg"
-    hoverEnabled: true
-    iconColor: hovered ? getAppearanceValueForTheme(
-                             appearance.themeName,
-                             "buttonHoverColor") : getAppearanceValueForTheme(
-                             appearance.themeName, "buttonColor")
     onClicked: {
         player.playerCommand(Enums.Commands.NextPlaylistItem)
     }

src/qml/UIComponents/PlaylistPrevButton.qml

@@ -9,13 +9,7 @@ import player 1.0
 
 SmoothButton {
     id: playlistPrevButton
-    objectName: "playlistPrevButton"
     iconSource: "icons/" + appearance.themeName + "/prev.svg"
-    hoverEnabled: true
-    iconColor: hovered ? getAppearanceValueForTheme(
-                             appearance.themeName,
-                             "buttonHoverColor") : getAppearanceValueForTheme(
-                             appearance.themeName, "buttonColor")
     visible: appearance.themeName == "Youtube" ? false : true
     onClicked: {
         player.playerCommand(Enums.Commands.PreviousPlaylistItem)

src/qml/UIComponents/SettingsButton.qml

@@ -10,11 +10,6 @@ import player 1.0
 SmoothButton {
     id: settingsButton
     iconSource: "icons/" + appearance.themeName + "/settings.svg"
-    hoverEnabled: true
-    iconColor: hovered ? getAppearanceValueForTheme(
-                             appearance.themeName,
-                             "buttonHoverColor") : getAppearanceValueForTheme(
-                             appearance.themeName, "buttonColor")
     Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
     onClicked: {
         var aptn = appearance.themeName

src/qml/UIComponents/SmoothButton.qml

@@ -4,32 +4,41 @@ import QtQuick.Dialogs 1.3
 import QtQuick.Layouts 1.2
 import QtQuick.Window 2.2
 import Qt.labs.settings 1.0
+import QtGraphicalEffects 1.0
 
 import QtQuick 2.0
 
 Control {
     id: root
-    property alias iconSource: icon.source
+    hoverEnabled: true
-    property alias iconColor: icon.color
+    property alias iconSource: buttonImage.source
-    property alias iconHeight: icon.iconHeight
-    property alias iconWidth: icon.iconWidth
-
     property alias containsMouse: mouseArea.containsMouse
 
-    background: Item {}
+    background: null
-    property bool iconRight: false
 
     focusPolicy: Qt.NoFocus
 
     signal clicked
-    leftPadding: appearance.themeName
+    leftPadding: root.height / (appearance.themeName == "Niconico" ?  2.5 : 12)
-                 == "YouTube" ? iconWidth / 12 : appearance.themeName
-                                == "RoosterTeeth" ? iconWidth / 12 : iconWidth / 2.5
     rightPadding: root.leftPadding
 
-    contentItem: ButtonImage {
+    contentItem: Image {
-        id: icon
+        id: buttonImage
+        smooth: true
+        fillMode: Image.PreserveAspectFit
+        sourceSize.height: Math.floor(root.parent.height / (appearance.themeName == "Niconico" ? 2 : 1.25))
+        sourceSize.width: Math.floor(root.parent.height / (appearance.themeName == "Niconico" ? 2 : 1.25))
+        ColorOverlay {
+            id: colorOverlay
+            anchors.fill: parent
+            source: parent
+            color: root.hovered ? getAppearanceValueForTheme(
+                             appearance.themeName,
+                             "buttonHoverColor") : getAppearanceValueForTheme(
+                             appearance.themeName, "buttonColor")
         }
+    }
+
 
     MouseArea {
         id: mouseArea

src/qml/UIComponents/SpeedText.qml

@@ -10,18 +10,20 @@ import player 1.0
 Text {
     id: speedText
     text: "1x"
-    font.family: appearance.fontName
+    verticalAlignment: Text.AlignVCenter
-    font.pixelSize: layout.height / 2.5
     color: speedStatusMouseArea.containsMouse ? getAppearanceValueForTheme(
                                                     appearance.themeName,
                                                     "buttonHoverColor") : getAppearanceValueForTheme(
                                                     appearance.themeName,
                                                     "buttonColor")
-    verticalAlignment: Text.AlignVCenter
+    font {
+        family: appearance.fontName
+        pixelSize: layout.height / 2.5
+    }
     Connections {
         target: player
         onSpeedChanged: function (speed) {
-            speedText.text = String(speed) + "x"
+            text = String(speed) + "x"
         }
     }
     MouseArea {
@@ -29,7 +31,7 @@ Text {
         anchors.fill: parent
         height: parent.height
         hoverEnabled: true
-        propagateComposedEvents: false
+        propagateComposedEvents: true
         acceptedButtons: Qt.NoButton
     }
 }

src/qml/UIComponents/VolumeButton.qml

@@ -9,17 +9,13 @@ import player 1.0
 
 SmoothButton {
     id: volumeButton
-    objectName: "volumeButton"
     iconSource: "icons/" + appearance.themeName + "/volume-up.svg"
-    hoverEnabled: true
-    iconColor: hovered ? getAppearanceValueForTheme(
-                             appearance.themeName,
-                             "buttonHoverColor") : getAppearanceValueForTheme(
-                             appearance.themeName, "buttonColor")
     onClicked: {
         player.playerCommand(Enums.Commands.ToggleMute)
     }
-    function updateStatus(status) {
+    Connections {
+        target: player
+        onVolumeStatusChanged: function(status) {
             if (status == Enums.VolumeStatus.Muted) {
                 volumeButton.iconSource = "qrc:/icons/" + appearance.themeName + "/volume-mute.svg"
             } else if (status == Enums.VolumeStatus.Low) {
@@ -28,9 +24,5 @@ SmoothButton {
                 volumeButton.iconSource = "qrc:/icons/" + appearance.themeName + "/volume-up.svg"
             }
         }
-
-    Connections {
-        target: player
-        onVolumeStatusChanged: updateStatus
     }
 }

src/qml/YouTubeButtonLayout.qml

@@ -1,10 +1,4 @@
 import QtQuick 2.0
-import QtQuick.Controls 2.3
-import QtQuick.Dialogs 1.3
-import QtQuick.Layouts 1.2
-import QtQuick.Window 2.2
-import Qt.labs.settings 1.0
-import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
 Item {
@@ -15,37 +9,34 @@ Item {
 
     PlaylistPrevButton {
         id: playlistPrevButton
-        anchors.left: parent.left
+        anchors {
-        anchors.top: parent.top
+            left: parent.left
-        anchors.bottom: parent.bottom
+            top: parent.top
+            bottom: parent.bottom
+        }
         width: visible ? playlistNextButton.width : 0
-        iconHeight: parent.height / 1.25
-        iconWidth: parent.height / 1.25
     }
     PlayPauseButton {
         id: playPauseButton
-        anchors.left: playlistPrevButton.right
+        anchors {
-        anchors.top: parent.top
+            left: playlistPrevButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+        }
         leftPadding: 14
     }
     PlaylistNextButton {
         id: playlistNextButton
-        anchors.left: playPauseButton.right
+        anchors {
-        anchors.top: parent.top
+            left: playPauseButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+        }
     }
 
     MouseArea {
         id: mouseAreaVolumeArea
-        anchors.bottom: parent.bottom
+        anchors.fill: volumeSlider
-        anchors.top: parent.top
-        anchors.left: volumeSlider.left
-        anchors.right: volumeSlider.right
         width: volumeSlider.width
         hoverEnabled: true
         propagateComposedEvents: true
@@ -55,42 +46,47 @@ Item {
 
     VolumeButton {
         id: volumeButton
-        anchors.left: playlistNextButton.right
+        anchors {
-        anchors.top: parent.top
+            left: playlistNextButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+        }
         z: 50
     }
     VolumeSlider {
         id: volumeSlider
-        anchors.left: volumeButton.right
+        anchors {
-        anchors.top: parent.top
+            left: volumeButton.right
-        anchors.bottom: parent.bottom
+            top: parent.top
+            bottom: parent.bottom
+        }
         height: parent.height
         visible: mouseAreaVolumeArea.containsMouse || volumeButton.hovered
         width: visible ? implicitWidth : 0
     }
     TimeLabel {
-        anchors.left: volumeSlider.right
+        anchors {
-        anchors.top: parent.top
+            left: volumeSlider.right
-        anchors.bottom: parent.bottom
+            top: parent.top
+            bottom: parent.bottom
+            leftMargin: parent.width / 128
+        }
     }
 
     SettingsButton {
         id: settingsButton
-        anchors.right: fullscreenButton.left
+        anchors {
-        anchors.top: parent.top
+            right: fullscreenButton.left
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+        }
     }
     FullscreenButton {
         id: fullscreenButton
-        anchors.right: parent.right
+        anchors {
-        anchors.top: parent.top
+            right: parent.right
-        anchors.bottom: parent.bottom
+            top: parent.top
-        iconHeight: parent.height / 1.25
+            bottom: parent.bottom
-        iconWidth: parent.height / 1.25
+        }
     }
 }

src/qml/main.qml

@@ -17,7 +17,6 @@ Window {
     height: 480
     property int virtualHeight: Screen.height * appearance.scaleFactor
     property int virtualWidth: Screen.width * appearance.scaleFactor
-
     property bool onTop: false
 
     QMLDebugger {
@@ -213,8 +212,8 @@ Window {
         anchors.fill: parent
         width: parent.width
         height: parent.height
-        z: 1
         logging: loggingSettings.logBackend
+        z: 1
 
         Action {
             onTriggered: {
@@ -307,7 +306,10 @@ Window {
     }
 
     MouseArea {
-        anchors.fill: parent
+        anchors {
+            fill: parent
+            bottomMargin: controlsBar.combinedHeight
+        }
         width: parent.width
         height: parent.height
         enabled: appearance.swipeToResize
@@ -316,7 +318,6 @@ Window {
         property int xPrev: 0
         hoverEnabled: false
         propagateComposedEvents: true
-        anchors.bottomMargin: controlsBar.combinedHeight
         z: 1010
         onPressed: {
             xStart = mouse.x
@@ -358,10 +359,12 @@ Window {
         MouseArea {
             id: mouseAreaBar
             width: parent.width
-            height: controlsBar.combinedHeight
+            height: controlsBar.combinedHeight * 1.5
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 0
             hoverEnabled: true
+            anchors {
+                bottom: parent.bottom
+                bottomMargin: 0
+            }
             onEntered: {
                 mouseAreaPlayerTimer.stop()
             }
@@ -372,16 +375,18 @@ Window {
             z: 10
             focus: true
             width: parent.width
-            anchors.bottom: mouseAreaBar.top
-            anchors.bottomMargin: 10
-            anchors.right: parent.right
-            anchors.rightMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
-            anchors.top: topBar.bottom
-            anchors.topMargin: 0
             hoverEnabled: true
             propagateComposedEvents: true
+            anchors {
+                bottom: mouseAreaBar.top
+                bottomMargin: 10
+                right: parent.right
+                rightMargin: 0
+                left: parent.left
+                leftMargin: 0
+                top: topBar.bottom
+                topMargin: 0
+            }
 
             Timer {
                 id: mouseTapTimer
@@ -454,16 +459,20 @@ Window {
             visible: false
             height: parent.height
             width: parent.width
-            anchors.fill: parent
-            anchors.topMargin: mainWindow.virtualHeight / 20
-            anchors.leftMargin: mainWindow.virtualHeight / 20
-            font.family: appearance.fontName
             textFormat: Text.RichText
-            font.pixelSize: mainWindow.virtualHeight / 50
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignTop
             renderType: Text.NativeRendering
             lineHeight: 1
+            font {
+                family: appearance.fontName
+                pixelSize: mainWindow.virtualHeight / 50
+            }
+            anchors {
+                fill: parent
+                topMargin: mainWindow.virtualHeight / 20
+                leftMargin: mainWindow.virtualHeight / 20
+            }
             Component.onCompleted: {
                 console.error(statsForNerdsText.lineHeight, font.pixelSize)
             }

src/qml/qml.qrc

@@ -4,13 +4,13 @@
         <file>main.qml</file>
         <file>CustomMenu.qml</file>
         <file>ControlsBar.qml</file>
+        <file>SubtitlesBar.qml</file>
         <file>MainMenu.qml</file>
         <file>YouTubeButtonLayout.qml</file>
         <file>NiconicoButtonLayout.qml</file>
         <file>RoosterTeethButtonLayout.qml</file>
         <file alias="MenuTitleBar.qml">UIComponents/MenuTitleBar.qml</file>
         <file alias="SmoothButton.qml">UIComponents/SmoothButton.qml</file>
-        <file alias="ButtonImage.qml">UIComponents/ButtonImage.qml</file>
         <file alias="VerticalVolume.qml">UIComponents/VerticalVolume.qml</file>
         <file alias="SpeedText.qml">UIComponents/SpeedText.qml</file>
         <file alias="ForwardButton.qml">UIComponents/ForwardButton.qml</file>