[UI] Reformatting + Niconico forward / back buttons (using YouTube's icons for now)

format-code.sh

@@ -1,5 +1,5 @@
 SOURCE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd )"
 pushd $SOURCE_DIR
-qmlfmt -w src/qml/*.qml
+qmlfmt -w src/qml/*.qml src/qml/*/*.qml
 clang-format -style mozilla -i src/*
 popd

src/qml/ControlsBar.qml

@@ -30,9 +30,7 @@ Item {
         }
 
         var component = Qt.createComponent(themeName + "ButtonLayout.qml")
-        component.createObject(controlsBar, {
+        component.createObject(controlsBar, {})
-                                   "anchors.fill": controlsBar
-                               })
     }
 
     Item {

src/qml/Dialogs/PlaylistDialog.qml

@@ -15,7 +15,7 @@ Dialog {
     Connections {
         target: player
         enabled: true
-        onPlaylistChanged: function(playlist) {
+        onPlaylistChanged: function (playlist) {
             playlistModel.clear()
             for (var thing in playlist) {
                 var item = playlist[thing]

src/qml/Items/ChapterMarkerItem.qml

@@ -10,7 +10,9 @@ Rectangle {
     Connections {
         target: player
         enabled: true
-        onChaptersChanged: {chapterMarker.destroy()}
+        onChaptersChanged: {
+            chapterMarker.destroy()
+        }
     }
 
     width: 4

src/qml/NiconicoButtonLayout.qml

@@ -10,6 +10,7 @@ import player 1.0
 Item {
     objectName: "buttonLayout"
     id: layout
+    anchors.fill: controlsBar
 
     PlayPauseButton {
         id: playPauseButton
@@ -36,21 +37,37 @@ Item {
 
     PlaylistPrevButton {
         id: playlistPrevButton
-        anchors.right: timeLabel.left
+        anchors.right: backwardButton.left
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         icon.height: 16
         icon.width: 16
     }
+    BackwardButton {
+        id: backwardButton
+        anchors.right: timeLabel.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        icon.height: 32
+        icon.width: 32
+    }
     TimeLabel {
         id: timeLabel
         anchors.centerIn: parent
         anchors.top: parent.top
         anchors.bottom: parent.bottom
     }
+    ForwardButton {
+        id: forwardButton
+        anchors.left: timeLabel.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        icon.height: 32
+        icon.width: 32
+    }
     PlaylistNextButton {
         id: playlistNextButton
-        anchors.left: timeLabel.right
+        anchors.left: forwardButton.right
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         icon.height: 16

src/qml/UIComponents/BackwardButton.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Dialogs 1.3
+import QtQuick.Layouts 1.11
+import QtQuick.Window 2.11
+import Qt.labs.settings 1.0
+import Qt.labs.platform 1.0 as LabsPlatform
+import player 1.0
+
+Button {
+    id: backwardButton
+    icon.source: "icons/" + appearance.themeName + "/backward.svg"
+    icon.color: appearance.buttonColor
+    display: AbstractButton.IconOnly
+    onClicked: {
+        player.playerCommand(Enums.Commands.Seek, "-10")
+    }
+    background: Item {
+    }
+}

src/qml/UIComponents/ForwardButton.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Dialogs 1.3
+import QtQuick.Layouts 1.11
+import QtQuick.Window 2.11
+import Qt.labs.settings 1.0
+import Qt.labs.platform 1.0 as LabsPlatform
+import player 1.0
+
+Button {
+    id: forwardButton
+    icon.source: "icons/" + appearance.themeName + "/forward.svg"
+    icon.color: appearance.buttonColor
+    display: AbstractButton.IconOnly
+    onClicked: {
+        player.playerCommand(Enums.Commands.Seek, "10")
+    }
+    background: Item {
+    }
+}

src/qml/UIComponents/FullscreenButton.qml

@@ -1,4 +1,4 @@
-            import QtQuick 2.11
+import QtQuick 2.11
 import QtQuick.Controls 2.4
 import QtQuick.Dialogs 1.3
 import QtQuick.Layouts 1.11
@@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-            Button {
+Button {
     id: fullscreenButton
     //icon.name: "fullscreen"
     icon.source: "icons/" + appearance.themeName + "/fullscreen.svg"
@@ -21,4 +21,4 @@ import player 1.0
 
     background: Item {
     }
-            }
+}

src/qml/UIComponents/PlayPauseButton.qml

@@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-            Button {
+Button {
     id: playPauseButton
     icon.source: "icons/" + appearance.themeName + "/pause.svg"
     icon.color: appearance.buttonColor
@@ -29,4 +29,4 @@ import player 1.0
             }
         }
     }
-            }
+}

src/qml/UIComponents/PlaylistNextButton.qml

@@ -7,8 +7,7 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-
+Button {
-            Button {
     id: playlistNextButton
     //icon.name: "next"
     icon.source: "icons/" + appearance.themeName + "/next.svg"
@@ -19,5 +18,4 @@ import player 1.0
     }
     background: Item {
     }
-            }
+}
-

src/qml/UIComponents/PlaylistPrevButton.qml

@@ -7,7 +7,6 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-
 Button {
     id: playlistPrevButton
     objectName: "playlistPrevButton"
@@ -27,11 +26,10 @@ Button {
             if (appearance.themeName == "YouTube") {
                 if (position != 0) {
                     visible = true
-                            
                 } else {
                     visible = false
                 }
             }
         }
     }
-            }
+}

src/qml/UIComponents/SettingsButton.qml

@@ -1,4 +1,4 @@
-            import QtQuick 2.11
+import QtQuick 2.11
 import QtQuick.Controls 2.4
 import QtQuick.Dialogs 1.3
 import QtQuick.Layouts 1.11
@@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-            Button {
+Button {
     id: settingsButton
     //icon.name: "settings"
     icon.source: "icons/" + appearance.themeName + "/settings.svg"
@@ -21,4 +21,4 @@ import player 1.0
     }
     background: Item {
     }
-            }
+}

src/qml/UIComponents/TimeLabel.qml

@@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-            Text {
+Text {
     id: timeLabel
     objectName: "timeLabel"
     text: "0:00 / 0:00"
@@ -24,4 +24,4 @@ import player 1.0
             timeLabel.text = durationString
         }
     }
-            }
+}

src/qml/UIComponents/VideoProgress.qml

@@ -7,7 +7,7 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-        Slider {
+Slider {
     id: progressBar
     objectName: "progressBar"
     to: 1
@@ -63,7 +63,7 @@ import player 1.0
         z: 1
 
         onPositionChanged: {
-                        var a = (progressBar.to / progressBar.width ) * mouseAreaProgressBar.mouseX
+            var a = (progressBar.to / progressBar.width) * mouseAreaProgressBar.mouseX
             hoverProgressLabel.text = utils.createTimestamp(a)
         }
     }
@@ -77,7 +77,6 @@ import player 1.0
                     fun.nyanCat, mouseAreaProgressBar.containsMouse)
         color: appearance.progressBackgroundColor
 
-                
         Rectangle {
             x: (mouseAreaProgressBar.mouseX - width / 2) + progressBar.leftPadding
             y: progressBackground.y - 20 - height
@@ -122,19 +121,16 @@ import player 1.0
             Connections {
                 target: player
                 enabled: true
-                        onChaptersChanged: function(chapters) {
+                onChaptersChanged: function (chapters) {
                     for (var i = 0, len = chapters.length; i < len; i++) {
-                                var component = Qt.createComponent(
+                        var component = Qt.createComponent("ChapterMarker.qml")
-                                            "ChapterMarker.qml")
 
-                                var marker = component.createObject(chapterMarkers,
+                        var marker = component.createObject(chapterMarkers, {
-                                                                {
                                                                 time: chapters[i]["time"]
                                                             })
                     }
                 }
             }
-                    
         }
 
         Rectangle {
@@ -166,7 +162,8 @@ import player 1.0
         implicitWidth: radius
         radius: 12 + (progressBackground.height / 2)
         color: fun.nyanCat ? "transparent" : appearance.progressSliderColor
-                visible: getHandleVisibility(appearance.themeName, mouseAreaProgressBar.containsMouse)
+        visible: getHandleVisibility(appearance.themeName,
+                                     mouseAreaProgressBar.containsMouse)
         AnimatedImage {
             z: 80
             visible: fun.nyanCat
@@ -178,4 +175,4 @@ import player 1.0
             fillMode: Image.PreserveAspectFit
         }
     }
-        }
+}

src/qml/UIComponents/VolumeButton.qml

@@ -7,8 +7,7 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-
+Button {
-            Button {
     id: volumeButton
     objectName: "volumeButton"
     icon.source: "icons/" + appearance.themeName + "/volume-up.svg"
@@ -22,9 +21,9 @@ import player 1.0
     Connections {
         target: player
         enabled: true
-                    onVolumeStatusChanged: function (status){
+        onVolumeStatusChanged: function (status) {
             if (volumeButton == null)
-                            console.log("OwO");
+                console.log("OwO")
 
             if (status == Enums.VolumeStatus.Muted) {
                 volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-mute.svg"
@@ -35,4 +34,4 @@ import player 1.0
             }
         }
     }
-            }
+}

src/qml/UIComponents/VolumeSlider.qml

@@ -7,19 +7,16 @@ import Qt.labs.settings 1.0
 import Qt.labs.platform 1.0 as LabsPlatform
 import player 1.0
 
-
+Slider {
-            Slider {
     id: volumeBar
     to: 100
     value: 100
     palette.dark: "#f00"
 
-                implicitWidth: Math.max(
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
-                                   background ? background.implicitWidth : 0,
                                          (handle ? handle.implicitWidth : 0)
                                          + leftPadding + rightPadding)
-                implicitHeight: Math.max(
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
-                                    background ? background.implicitHeight : 0,
                                           (handle ? handle.implicitHeight : 0)
                                           + topPadding + bottomPadding)
     onMoved: {
@@ -29,13 +26,12 @@ import player 1.0
     Connections {
         target: player
         enabled: true
-                    onVolumeChanged: function (volume){
+        onVolumeChanged: function (volume) {
             volumeBar.value = volume
         }
     }
     handle: Rectangle {
-                    x: volumeBar.leftPadding + volumeBar.visualPosition
+        x: volumeBar.leftPadding + volumeBar.visualPosition * (volumeBar.availableWidth - width)
-                       * (volumeBar.availableWidth - width)
         y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2
         implicitWidth: 12
         implicitHeight: 12
@@ -59,5 +55,4 @@ import player 1.0
             color: appearance.volumeSliderBackground
         }
     }
-            }
+}
-

src/qml/YouTubeButtonLayout.qml

@@ -10,6 +10,7 @@ import player 1.0
 Item {
     objectName: "buttonLayout"
     id: layout
+    anchors.fill: controlsBar
 
     PlaylistPrevButton {
         id: playlistPrevButton

src/qml/icons/Niconico/backward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M24 10V2L14 12l10 10v-8c6.6 0 12 5.4 12 12s-5.4 12-12 12-12-5.4-12-12H8c0 8.8 7.2 16 16 16s16-7.2 16-16-7.2-16-16-16zm-2.2 22h-1.7v-6.5l-2 .6v-1.4l3.5-1.3h.2V32zm8.5-3.5c0 .6-.1 1.2-.2 1.6s-.3.8-.6 1.1-.6.5-.9.7-.7.2-1.2.2-.8-.1-1.2-.2-.7-.4-.9-.7-.5-.7-.6-1.1-.2-1-.2-1.6V27c0-.6.1-1.2.2-1.6s.3-.8.6-1.1.6-.5.9-.7.7-.2 1.2-.2.8.1 1.2.2.7.4.9.7.5.7.6 1.1.2 1 .2 1.6v1.5zm-1.6-1.7c0-.4 0-.7-.1-1s-.1-.5-.2-.6-.2-.3-.4-.3-.3-.1-.5-.1-.4 0-.5.1-.3.2-.4.3-.2.4-.2.6-.1.6-.1 1v1.9c0 .4 0 .7.1 1s.1.5.2.6.2.3.4.3.3.1.5.1.4 0 .5-.1.3-.2.4-.3.2-.4.2-.6.1-.6.1-1v-1.9z"/></svg>

src/qml/icons/Niconico/forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M8 26c0 8.8 7.2 16 16 16s16-7.2 16-16h-4c0 6.6-5.4 12-12 12s-12-5.4-12-12 5.4-12 12-12v8l10-10L24 2v8c-8.8 0-16 7.2-16 16zm13.7 6H20v-6.5l-2 .6v-1.4l3.5-1.3h.2V32zm8.5-3.5c0 .6-.1 1.2-.2 1.6s-.3.8-.6 1.1-.6.5-.9.7-.7.2-1.2.2-.8-.1-1.2-.2-.7-.4-.9-.7-.5-.7-.6-1.1-.2-1-.2-1.6V27c0-.6.1-1.2.2-1.6s.3-.8.6-1.1.6-.5.9-.7.7-.2 1.2-.2.8.1 1.2.2.7.4.9.7.5.7.6 1.1.2 1 .2 1.6v1.5zm-1.7-1.7c0-.4 0-.7-.1-1s-.1-.5-.2-.6-.2-.3-.4-.3-.3-.1-.5-.1-.4 0-.5.1-.3.2-.4.3-.2.4-.2.6-.1.6-.1 1v1.9c0 .4 0 .7.1 1s.1.5.2.6.2.3.4.3.3.1.5.1.4 0 .5-.1.3-.2.4-.3.2-.4.2-.6.1-.6.1-1v-1.9z"/></svg>

src/qml/main.qml

@@ -45,7 +45,6 @@ Window {
         property string volumeSliderBackground: "white"
     }
 
-    
     Settings {
         id: i18n
         category: "I18N"

src/qml/qml.qrc

@@ -6,6 +6,8 @@
         <file>MainMenu.qml</file>
         <file>YouTubeButtonLayout.qml</file>
         <file>NiconicoButtonLayout.qml</file>
+        <file alias="ForwardButton.qml">UIComponents/ForwardButton.qml</file>
+        <file alias="BackwardButton.qml">UIComponents/BackwardButton.qml</file>
         <file alias="PlaylistPrevButton.qml">UIComponents/PlaylistPrevButton.qml</file>
         <file alias="PlayPauseButton.qml">UIComponents/PlayPauseButton.qml</file>
         <file alias="VideoProgress.qml">UIComponents/VideoProgress.qml</file>
@@ -45,6 +47,8 @@
         <file>icons/Niconico/prev.svg</file>
         <file>icons/Niconico/next.svg</file>
         <file>icons/Niconico/fullscreen.svg</file>
+        <file>icons/Niconico/forward.svg</file>
+        <file>icons/Niconico/backward.svg</file>
         <file>icons/nyancat.gif</file>
         <file>icons/rainbow.png</file> 
     </qresource>