From a307a01eef987f983f545221dcb076fe8bd17af5 Mon Sep 17 00:00:00 2001 From: NamedKitten Date: Thu, 29 Nov 2018 08:25:54 +0000 Subject: [PATCH] [UI] Reformatting + Niconico forward / back buttons (using YouTube's icons for now) --- format-code.sh | 2 +- src/qml/ControlsBar.qml | 4 +- src/qml/Dialogs/PlaylistDialog.qml | 12 +- src/qml/Items/ChapterMarkerItem.qml | 4 +- src/qml/NiconicoButtonLayout.qml | 21 +- src/qml/UIComponents/BackwardButton.qml | 20 ++ src/qml/UIComponents/ForwardButton.qml | 20 ++ src/qml/UIComponents/FullscreenButton.qml | 28 +- src/qml/UIComponents/PlayPauseButton.qml | 44 +-- src/qml/UIComponents/PlaylistNextButton.qml | 26 +- src/qml/UIComponents/PlaylistPrevButton.qml | 48 ++- src/qml/UIComponents/SettingsButton.qml | 32 +- src/qml/UIComponents/TimeLabel.qml | 38 +-- src/qml/UIComponents/VideoProgress.qml | 327 ++++++++++---------- src/qml/UIComponents/VolumeButton.qml | 53 ++-- src/qml/UIComponents/VolumeSlider.qml | 99 +++--- src/qml/YouTubeButtonLayout.qml | 1 + src/qml/icons/Niconico/backward.svg | 1 + src/qml/icons/Niconico/forward.svg | 1 + src/qml/main.qml | 19 +- src/qml/qml.qrc | 4 + 21 files changed, 427 insertions(+), 377 deletions(-) create mode 100644 src/qml/UIComponents/BackwardButton.qml create mode 100644 src/qml/UIComponents/ForwardButton.qml create mode 100644 src/qml/icons/Niconico/backward.svg create mode 100644 src/qml/icons/Niconico/forward.svg diff --git a/format-code.sh b/format-code.sh index 58fc9bb..88899d6 100755 --- a/format-code.sh +++ b/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 diff --git a/src/qml/ControlsBar.qml b/src/qml/ControlsBar.qml index 5d27f65..6a5422b 100644 --- a/src/qml/ControlsBar.qml +++ b/src/qml/ControlsBar.qml @@ -30,9 +30,7 @@ Item { } var component = Qt.createComponent(themeName + "ButtonLayout.qml") - component.createObject(controlsBar, { - "anchors.fill": controlsBar - }) + component.createObject(controlsBar, {}) } Item { diff --git a/src/qml/Dialogs/PlaylistDialog.qml b/src/qml/Dialogs/PlaylistDialog.qml index b74aa4c..f193e5e 100644 --- a/src/qml/Dialogs/PlaylistDialog.qml +++ b/src/qml/Dialogs/PlaylistDialog.qml @@ -15,16 +15,16 @@ Dialog { Connections { target: player enabled: true - onPlaylistChanged: function(playlist) { + onPlaylistChanged: function (playlist) { playlistModel.clear() for (var thing in playlist) { var item = playlist[thing] playlistModel.append({ - playlistItemTitle: item["title"], - playlistItemFilename: item["filename"], - current: item["current"], - playlistPos: thing - }) + playlistItemTitle: item["title"], + playlistItemFilename: item["filename"], + current: item["current"], + playlistPos: thing + }) } } } diff --git a/src/qml/Items/ChapterMarkerItem.qml b/src/qml/Items/ChapterMarkerItem.qml index d0c148e..4bd7761 100644 --- a/src/qml/Items/ChapterMarkerItem.qml +++ b/src/qml/Items/ChapterMarkerItem.qml @@ -10,7 +10,9 @@ Rectangle { Connections { target: player enabled: true - onChaptersChanged: {chapterMarker.destroy()} + onChaptersChanged: { + chapterMarker.destroy() + } } width: 4 diff --git a/src/qml/NiconicoButtonLayout.qml b/src/qml/NiconicoButtonLayout.qml index 317149a..8973f76 100644 --- a/src/qml/NiconicoButtonLayout.qml +++ b/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 diff --git a/src/qml/UIComponents/BackwardButton.qml b/src/qml/UIComponents/BackwardButton.qml new file mode 100644 index 0000000..999094d --- /dev/null +++ b/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 { + } +} diff --git a/src/qml/UIComponents/ForwardButton.qml b/src/qml/UIComponents/ForwardButton.qml new file mode 100644 index 0000000..d115e7f --- /dev/null +++ b/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 { + } +} diff --git a/src/qml/UIComponents/FullscreenButton.qml b/src/qml/UIComponents/FullscreenButton.qml index 56e5548..69a8322 100644 --- a/src/qml/UIComponents/FullscreenButton.qml +++ b/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,18 +7,18 @@ import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 - Button { - id: fullscreenButton - //icon.name: "fullscreen" - icon.source: "icons/" + appearance.themeName + "/fullscreen.svg" - icon.color: appearance.buttonColor - Layout.alignment: Qt.AlignVCenter | Qt.AlignRight +Button { + id: fullscreenButton + //icon.name: "fullscreen" + icon.source: "icons/" + appearance.themeName + "/fullscreen.svg" + icon.color: appearance.buttonColor + Layout.alignment: Qt.AlignVCenter | Qt.AlignRight - display: AbstractButton.IconOnly - onClicked: { - toggleFullscreen() - } + display: AbstractButton.IconOnly + onClicked: { + toggleFullscreen() + } - background: Item { - } - } + background: Item { + } +} diff --git a/src/qml/UIComponents/PlayPauseButton.qml b/src/qml/UIComponents/PlayPauseButton.qml index f7f1092..4595e04 100644 --- a/src/qml/UIComponents/PlayPauseButton.qml +++ b/src/qml/UIComponents/PlayPauseButton.qml @@ -7,26 +7,26 @@ import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 - Button { - id: playPauseButton - icon.source: "icons/" + appearance.themeName + "/pause.svg" - icon.color: appearance.buttonColor - display: AbstractButton.IconOnly - onClicked: { - player.playerCommand(Enums.Commands.TogglePlayPause) - } - background: Item { - } - Connections { - target: player - enabled: true - onPlayStatusChanged: function (status) { - console.log(icon.height) - if (status == Enums.PlayStatus.Playing) { - icon.source = "qrc:/icons/" + appearance.themeName + "/pause.svg" - } else if (status == Enums.PlayStatus.Paused) { - icon.source = "qrc:/icons/" + appearance.themeName + "/play.svg" - } - } - } +Button { + id: playPauseButton + icon.source: "icons/" + appearance.themeName + "/pause.svg" + icon.color: appearance.buttonColor + display: AbstractButton.IconOnly + onClicked: { + player.playerCommand(Enums.Commands.TogglePlayPause) + } + background: Item { + } + Connections { + target: player + enabled: true + onPlayStatusChanged: function (status) { + console.log(icon.height) + if (status == Enums.PlayStatus.Playing) { + icon.source = "qrc:/icons/" + appearance.themeName + "/pause.svg" + } else if (status == Enums.PlayStatus.Paused) { + icon.source = "qrc:/icons/" + appearance.themeName + "/play.svg" } + } + } +} diff --git a/src/qml/UIComponents/PlaylistNextButton.qml b/src/qml/UIComponents/PlaylistNextButton.qml index 0bde443..be86612 100644 --- a/src/qml/UIComponents/PlaylistNextButton.qml +++ b/src/qml/UIComponents/PlaylistNextButton.qml @@ -7,17 +7,15 @@ import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 - - Button { - id: playlistNextButton - //icon.name: "next" - icon.source: "icons/" + appearance.themeName + "/next.svg" - icon.color: appearance.buttonColor - display: AbstractButton.IconOnly - onClicked: { - player.playerCommand(Enums.Commands.NextPlaylistItem) - } - background: Item { - } - } - +Button { + id: playlistNextButton + //icon.name: "next" + icon.source: "icons/" + appearance.themeName + "/next.svg" + icon.color: appearance.buttonColor + display: AbstractButton.IconOnly + onClicked: { + player.playerCommand(Enums.Commands.NextPlaylistItem) + } + background: Item { + } +} diff --git a/src/qml/UIComponents/PlaylistPrevButton.qml b/src/qml/UIComponents/PlaylistPrevButton.qml index 9a30ee7..d547e5c 100644 --- a/src/qml/UIComponents/PlaylistPrevButton.qml +++ b/src/qml/UIComponents/PlaylistPrevButton.qml @@ -7,31 +7,29 @@ import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 - Button { - id: playlistPrevButton - objectName: "playlistPrevButton" - icon.source: "icons/" + appearance.themeName + "/prev.svg" - icon.color: appearance.buttonColor - display: AbstractButton.IconOnly - visible: appearance.themeName == "Youtube" ? false : true - onClicked: { - player.playerCommand(Enums.Commands.PreviousPlaylistItem) - } - background: Item { - } - Connections { - target: player - enabled: true - onPlaylistPositionChanged: function (position) { - if (appearance.themeName == "YouTube") { - if (position != 0) { - visible = true - - } else { - visible = false - } - } - } + id: playlistPrevButton + objectName: "playlistPrevButton" + icon.source: "icons/" + appearance.themeName + "/prev.svg" + icon.color: appearance.buttonColor + display: AbstractButton.IconOnly + visible: appearance.themeName == "Youtube" ? false : true + onClicked: { + player.playerCommand(Enums.Commands.PreviousPlaylistItem) + } + background: Item { + } + Connections { + target: player + enabled: true + onPlaylistPositionChanged: function (position) { + if (appearance.themeName == "YouTube") { + if (position != 0) { + visible = true + } else { + visible = false } } + } + } +} diff --git a/src/qml/UIComponents/SettingsButton.qml b/src/qml/UIComponents/SettingsButton.qml index 07faf65..d0e23c2 100644 --- a/src/qml/UIComponents/SettingsButton.qml +++ b/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,18 +7,18 @@ import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 - Button { - id: settingsButton - //icon.name: "settings" - icon.source: "icons/" + appearance.themeName + "/settings.svg" - icon.color: appearance.buttonColor - Layout.alignment: Qt.AlignVCenter | Qt.AlignRight - display: AbstractButton.IconOnly - onClicked: { - appearance.themeName = appearance.themeName == "YouTube" ? "Niconico" : "YouTube" - controlsBarItem.setControlsTheme(appearance.themeName) - console.log("Settings Menu Not Yet Implemented.") - } - background: Item { - } - } +Button { + id: settingsButton + //icon.name: "settings" + icon.source: "icons/" + appearance.themeName + "/settings.svg" + icon.color: appearance.buttonColor + Layout.alignment: Qt.AlignVCenter | Qt.AlignRight + display: AbstractButton.IconOnly + onClicked: { + appearance.themeName = appearance.themeName == "YouTube" ? "Niconico" : "YouTube" + controlsBarItem.setControlsTheme(appearance.themeName) + console.log("Settings Menu Not Yet Implemented.") + } + background: Item { + } +} diff --git a/src/qml/UIComponents/TimeLabel.qml b/src/qml/UIComponents/TimeLabel.qml index 73d07df..76eed2a 100644 --- a/src/qml/UIComponents/TimeLabel.qml +++ b/src/qml/UIComponents/TimeLabel.qml @@ -6,22 +6,22 @@ import QtQuick.Window 2.11 import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 - - Text { - id: timeLabel - objectName: "timeLabel" - text: "0:00 / 0:00" - color: "white" - padding: 2 - font.family: appearance.fontName - font.pixelSize: 14 - verticalAlignment: Text.AlignVCenter - renderType: Text.NativeRendering - Connections { - target: player - enabled: true - onDurationStringChanged: function (durationString) { - timeLabel.text = durationString - } - } - } + +Text { + id: timeLabel + objectName: "timeLabel" + text: "0:00 / 0:00" + color: "white" + padding: 2 + font.family: appearance.fontName + font.pixelSize: 14 + verticalAlignment: Text.AlignVCenter + renderType: Text.NativeRendering + Connections { + target: player + enabled: true + onDurationStringChanged: function (durationString) { + timeLabel.text = durationString + } + } +} diff --git a/src/qml/UIComponents/VideoProgress.qml b/src/qml/UIComponents/VideoProgress.qml index 8e84039..39a9af9 100644 --- a/src/qml/UIComponents/VideoProgress.qml +++ b/src/qml/UIComponents/VideoProgress.qml @@ -7,175 +7,172 @@ import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 - Slider { - id: progressBar - objectName: "progressBar" - to: 1 - value: 0.0 +Slider { + id: progressBar + objectName: "progressBar" + to: 1 + value: 0.0 + Connections { + target: player + enabled: true + onPositionChanged: function (position) { + if (!pressed) { + progressBar.value = position + } + } + onDurationChanged: function (duration) { + progressBar.to = duration + } + onCachedDurationChanged: function (duration) { + cachedLength.duration = duration + } + } + onMoved: { + player.playerCommand(Enums.Commands.SeekAbsolute, value) + } + + function getProgressBarHeight(nyan, isMouse) { + var x = Math.max(Screen.height / 256, fun.nyanCat ? 12 : 2) + if (appearance.themeName == "Niconico" && !fun.nyanCat) { + return x * 2 + } else if (isMouse & !fun.nyanCat) { + return x * 2 + } else { + return x + } + } + function getHandleVisibility(themeName, isMouse) { + if (appearance.themeName == "Niconico" && isMouse) { + return true + } else if (appearance.themeName == "Niconico") { + return false + } else { + return true + } + } + MouseArea { + id: mouseAreaProgressBar + width: parent.width + height: parent.height + anchors.fill: parent + y: parent.y + x: parent.x + hoverEnabled: true + propagateComposedEvents: false + acceptedButtons: Qt.NoButton + z: 1 + + onPositionChanged: { + var a = (progressBar.to / progressBar.width) * mouseAreaProgressBar.mouseX + hoverProgressLabel.text = utils.createTimestamp(a) + } + } + + background: Rectangle { + id: progressBackground + x: progressBar.leftPadding + y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2 + width: progressBar.availableWidth + height: progressBar.getProgressBarHeight( + fun.nyanCat, mouseAreaProgressBar.containsMouse) + color: appearance.progressBackgroundColor + + Rectangle { + x: (mouseAreaProgressBar.mouseX - width / 2) + progressBar.leftPadding + y: progressBackground.y - 20 - height + visible: mouseAreaProgressBar.containsMouse + color: appearance.mainBackground + height: 20 + width: 50 + z: 80 + Text { + id: hoverProgressLabel + text: "0:00" + color: "white" + padding: 2 + font.family: appearance.fontName + font.pixelSize: 14 + verticalAlignment: Text.AlignVCenter + renderType: Text.NativeRendering + } + } + + ProgressBar { + id: cachedLength + background: Item { + } + contentItem: Item { + Rectangle { + width: cachedLength.visualPosition * parent.width + height: parent.height + color: appearance.progressCachedColor + } + } + z: 40 + to: progressBar.to + property int duration + value: progressBar.value + duration + anchors.fill: parent + } + + Item { + anchors.fill: parent + id: chapterMarkers Connections { target: player enabled: true - onPositionChanged: function (position) { - if (!pressed) { - progressBar.value = position + onChaptersChanged: function (chapters) { + for (var i = 0, len = chapters.length; i < len; i++) { + var component = Qt.createComponent("ChapterMarker.qml") + + var marker = component.createObject(chapterMarkers, { + time: chapters[i]["time"] + }) } } - onDurationChanged: function (duration) { - progressBar.to = duration - } - onCachedDurationChanged: function (duration) { - cachedLength.duration = duration - } - } - onMoved: { - player.playerCommand(Enums.Commands.SeekAbsolute, value) - } - - function getProgressBarHeight(nyan, isMouse) { - var x = Math.max(Screen.height / 256, fun.nyanCat ? 12 : 2) - if (appearance.themeName == "Niconico" && !fun.nyanCat) { - return x * 2 - } else if (isMouse & !fun.nyanCat) { - return x * 2 - } else { - return x - } - } - function getHandleVisibility(themeName, isMouse) { - if (appearance.themeName == "Niconico" && isMouse) { - return true - } else if (appearance.themeName == "Niconico") { - return false - } else { - return true - } - } - MouseArea { - id: mouseAreaProgressBar - width: parent.width - height: parent.height - anchors.fill: parent - y: parent.y - x: parent.x - hoverEnabled: true - propagateComposedEvents: false - acceptedButtons: Qt.NoButton - z: 1 - - onPositionChanged: { - var a = (progressBar.to / progressBar.width ) * mouseAreaProgressBar.mouseX - hoverProgressLabel.text = utils.createTimestamp(a) - } - } - - background: Rectangle { - id: progressBackground - x: progressBar.leftPadding - y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2 - width: progressBar.availableWidth - height: progressBar.getProgressBarHeight( - fun.nyanCat, mouseAreaProgressBar.containsMouse) - color: appearance.progressBackgroundColor - - - Rectangle { - x: (mouseAreaProgressBar.mouseX - width / 2) + progressBar.leftPadding - y: progressBackground.y - 20 - height - visible: mouseAreaProgressBar.containsMouse - color: appearance.mainBackground - height: 20 - width: 50 - z: 80 - Text { - id: hoverProgressLabel - text: "0:00" - color: "white" - padding: 2 - font.family: appearance.fontName - font.pixelSize: 14 - verticalAlignment: Text.AlignVCenter - renderType: Text.NativeRendering - } - } - - ProgressBar { - id: cachedLength - background: Item { - } - contentItem: Item { - Rectangle { - width: cachedLength.visualPosition * parent.width - height: parent.height - color: appearance.progressCachedColor - } - } - z: 40 - to: progressBar.to - property int duration - value: progressBar.value + duration - anchors.fill: parent - } - - Item { - anchors.fill: parent - id: chapterMarkers - Connections { - target: player - enabled: true - onChaptersChanged: function(chapters) { - for (var i = 0, len = chapters.length; i < len; i++) { - var component = Qt.createComponent( - "ChapterMarker.qml") - - var marker = component.createObject(chapterMarkers, - { - time: chapters[i]["time"] - }) - } - } - } - - } - - Rectangle { - id: progressLength - z: 50 - anchors.left: progressBackground.left - width: progressBar.visualPosition * parent.width - height: parent.height - color: appearance.progressSliderColor - Image { - visible: fun.nyanCat - id: rainbow - anchors.fill: parent - height: parent.height - width: parent.width - source: "qrc:/icons/rainbow.png" - fillMode: Image.TileHorizontally - } - } - } - - handle: Rectangle { - z: 70 - id: handleRect - x: progressBar.leftPadding + progressBar.visualPosition - * (progressBar.availableWidth - width) - y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2 - implicitHeight: radius - implicitWidth: radius - radius: 12 + (progressBackground.height / 2) - color: fun.nyanCat ? "transparent" : appearance.progressSliderColor - visible: getHandleVisibility(appearance.themeName, mouseAreaProgressBar.containsMouse) - AnimatedImage { - z: 80 - visible: fun.nyanCat - paused: progressBar.pressed - height: 30 - id: nyanimation - anchors.centerIn: parent - source: "qrc:/icons/nyancat.gif" - fillMode: Image.PreserveAspectFit - } } } + + Rectangle { + id: progressLength + z: 50 + anchors.left: progressBackground.left + width: progressBar.visualPosition * parent.width + height: parent.height + color: appearance.progressSliderColor + Image { + visible: fun.nyanCat + id: rainbow + anchors.fill: parent + height: parent.height + width: parent.width + source: "qrc:/icons/rainbow.png" + fillMode: Image.TileHorizontally + } + } + } + + handle: Rectangle { + z: 70 + id: handleRect + x: progressBar.leftPadding + progressBar.visualPosition + * (progressBar.availableWidth - width) + y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2 + implicitHeight: radius + implicitWidth: radius + radius: 12 + (progressBackground.height / 2) + color: fun.nyanCat ? "transparent" : appearance.progressSliderColor + visible: getHandleVisibility(appearance.themeName, + mouseAreaProgressBar.containsMouse) + AnimatedImage { + z: 80 + visible: fun.nyanCat + paused: progressBar.pressed + height: 30 + id: nyanimation + anchors.centerIn: parent + source: "qrc:/icons/nyancat.gif" + fillMode: Image.PreserveAspectFit + } + } +} diff --git a/src/qml/UIComponents/VolumeButton.qml b/src/qml/UIComponents/VolumeButton.qml index aa2660f..85a7688 100644 --- a/src/qml/UIComponents/VolumeButton.qml +++ b/src/qml/UIComponents/VolumeButton.qml @@ -7,32 +7,31 @@ import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 +Button { + id: volumeButton + objectName: "volumeButton" + icon.source: "icons/" + appearance.themeName + "/volume-up.svg" + icon.color: appearance.buttonColor + display: AbstractButton.IconOnly + onClicked: { + player.playerCommand(Enums.Commands.ToggleMute) + } + background: Item { + } + Connections { + target: player + enabled: true + onVolumeStatusChanged: function (status) { + if (volumeButton == null) + console.log("OwO") - Button { - id: volumeButton - objectName: "volumeButton" - icon.source: "icons/" + appearance.themeName + "/volume-up.svg" - icon.color: appearance.buttonColor - display: AbstractButton.IconOnly - onClicked: { - player.playerCommand(Enums.Commands.ToggleMute) - } - background: Item { - } - Connections { - target: player - enabled: true - onVolumeStatusChanged: function (status){ - if (volumeButton == null) - console.log("OwO"); - - if (status == Enums.VolumeStatus.Muted) { - volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-mute.svg" - } else if (status == Enums.VolumeStatus.Low) { - volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-down.svg" - } else if (status == Enums.VolumeStatus.Normal) { - volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-up.svg" - } - } - } + if (status == Enums.VolumeStatus.Muted) { + volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-mute.svg" + } else if (status == Enums.VolumeStatus.Low) { + volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-down.svg" + } else if (status == Enums.VolumeStatus.Normal) { + volumeButton.icon.source = "qrc:/icons/" + appearance.themeName + "/volume-up.svg" } + } + } +} diff --git a/src/qml/UIComponents/VolumeSlider.qml b/src/qml/UIComponents/VolumeSlider.qml index 32cacc8..495a059 100644 --- a/src/qml/UIComponents/VolumeSlider.qml +++ b/src/qml/UIComponents/VolumeSlider.qml @@ -7,57 +7,52 @@ import Qt.labs.settings 1.0 import Qt.labs.platform 1.0 as LabsPlatform import player 1.0 +Slider { + id: volumeBar + to: 100 + value: 100 + palette.dark: "#f00" - Slider { - id: volumeBar - to: 100 - value: 100 - palette.dark: "#f00" - - implicitWidth: Math.max( - background ? background.implicitWidth : 0, - (handle ? handle.implicitWidth : 0) - + leftPadding + rightPadding) - implicitHeight: Math.max( - background ? background.implicitHeight : 0, - (handle ? handle.implicitHeight : 0) - + topPadding + bottomPadding) - onMoved: { - player.playerCommand(Enums.Commands.SetVolume, - Math.round(volumeBar.value).toString()) - } - Connections { - target: player - enabled: true - onVolumeChanged: function (volume){ - volumeBar.value = volume - } - } - handle: Rectangle { - x: volumeBar.leftPadding + volumeBar.visualPosition - * (volumeBar.availableWidth - width) - y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2 - implicitWidth: 12 - implicitHeight: 12 - radius: 12 - visible: appearance.themeName == "Niconico" ? false : true - color: "#f6f6f6" - border.color: "#f6f6f6" - } - - background: Rectangle { - x: volumeBar.leftPadding - y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2 - implicitWidth: appearance.themeName == "Niconico" ? 80 : 60 - implicitHeight: appearance.themeName == "Niconico" ? 4 : 3 - width: volumeBar.availableWidth - height: implicitHeight - color: appearance.progressBackgroundColor - Rectangle { - width: volumeBar.visualPosition * parent.width - height: parent.height - color: appearance.volumeSliderBackground - } - } - } + implicitWidth: Math.max(background ? background.implicitWidth : 0, + (handle ? handle.implicitWidth : 0) + + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + (handle ? handle.implicitHeight : 0) + + topPadding + bottomPadding) + onMoved: { + player.playerCommand(Enums.Commands.SetVolume, + Math.round(volumeBar.value).toString()) + } + Connections { + target: player + enabled: true + onVolumeChanged: function (volume) { + volumeBar.value = volume + } + } + handle: Rectangle { + x: volumeBar.leftPadding + volumeBar.visualPosition * (volumeBar.availableWidth - width) + y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2 + implicitWidth: 12 + implicitHeight: 12 + radius: 12 + visible: appearance.themeName == "Niconico" ? false : true + color: "#f6f6f6" + border.color: "#f6f6f6" + } + background: Rectangle { + x: volumeBar.leftPadding + y: volumeBar.topPadding + volumeBar.availableHeight / 2 - height / 2 + implicitWidth: appearance.themeName == "Niconico" ? 80 : 60 + implicitHeight: appearance.themeName == "Niconico" ? 4 : 3 + width: volumeBar.availableWidth + height: implicitHeight + color: appearance.progressBackgroundColor + Rectangle { + width: volumeBar.visualPosition * parent.width + height: parent.height + color: appearance.volumeSliderBackground + } + } +} diff --git a/src/qml/YouTubeButtonLayout.qml b/src/qml/YouTubeButtonLayout.qml index ba5e67b..87be0c6 100644 --- a/src/qml/YouTubeButtonLayout.qml +++ b/src/qml/YouTubeButtonLayout.qml @@ -10,6 +10,7 @@ import player 1.0 Item { objectName: "buttonLayout" id: layout + anchors.fill: controlsBar PlaylistPrevButton { id: playlistPrevButton diff --git a/src/qml/icons/Niconico/backward.svg b/src/qml/icons/Niconico/backward.svg new file mode 100644 index 0000000..633505a --- /dev/null +++ b/src/qml/icons/Niconico/backward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/qml/icons/Niconico/forward.svg b/src/qml/icons/Niconico/forward.svg new file mode 100644 index 0000000..3b31b1b --- /dev/null +++ b/src/qml/icons/Niconico/forward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/qml/main.qml b/src/qml/main.qml index 9775cf2..2ee4460 100644 --- a/src/qml/main.qml +++ b/src/qml/main.qml @@ -17,7 +17,7 @@ Window { height: 480 property bool onTop: false - + Translator { id: translate } @@ -44,8 +44,7 @@ Window { property string chapterMarkerColor: "#fc0" property string volumeSliderBackground: "white" } - - + Settings { id: i18n category: "I18N" @@ -122,11 +121,11 @@ Window { mainWindow.visibility = lastScreenVisibility } } - + Utils { id: utils } - + PlayerBackend { id: player anchors.fill: parent @@ -200,7 +199,7 @@ Window { } } } - + Item { id: controlsOverlay anchors.centerIn: player @@ -222,7 +221,7 @@ Window { mouseAreaPlayer.cursorShape = Qt.ArrowCursor } } - + MouseArea { id: mouseAreaBar @@ -327,9 +326,9 @@ Window { && ((!appearance.titleOnlyOnFullscreen) || (mainWindow.visibility == Window.FullScreen)) Connections { - target: player - enabled: true - onTitleChanged: function (title) { + target: player + enabled: true + onTitleChanged: function (title) { titleLabel.text = title } } diff --git a/src/qml/qml.qrc b/src/qml/qml.qrc index 60aba24..07544d7 100644 --- a/src/qml/qml.qrc +++ b/src/qml/qml.qrc @@ -6,6 +6,8 @@ MainMenu.qml YouTubeButtonLayout.qml NiconicoButtonLayout.qml + UIComponents/ForwardButton.qml + UIComponents/BackwardButton.qml UIComponents/PlaylistPrevButton.qml UIComponents/PlayPauseButton.qml UIComponents/VideoProgress.qml @@ -45,6 +47,8 @@ icons/Niconico/prev.svg icons/Niconico/next.svg icons/Niconico/fullscreen.svg + icons/Niconico/forward.svg + icons/Niconico/backward.svg icons/nyancat.gif icons/rainbow.png