From 9b537bc9f51c01853245da795b97b3776694ce95 Mon Sep 17 00:00:00 2001 From: namedkitten Date: Thu, 23 Apr 2020 15:10:48 +0100 Subject: [PATCH] Tidy up some things, ACTUALLY fix #14 finally. --- src/qml/ControlsBar.qml | 38 +++++--- src/qml/MainMenu.qml | 41 --------- src/qml/RoosterTeethButtonLayout.qml | 3 + src/qml/UIComponents/MenuTitleBar.qml | 71 +++++++++++++++ src/qml/UIComponents/VideoProgress.qml | 49 ++++++++--- src/qml/main.qml | 115 ++++++------------------- src/qml/qml.qrc | 1 + 7 files changed, 163 insertions(+), 155 deletions(-) create mode 100644 src/qml/UIComponents/MenuTitleBar.qml diff --git a/src/qml/ControlsBar.qml b/src/qml/ControlsBar.qml index bfbceb7..8ba8688 100644 --- a/src/qml/ControlsBar.qml +++ b/src/qml/ControlsBar.qml @@ -17,6 +17,18 @@ Item { property var progress: progressBar property var controls: controlsBar property var duration: progressBar.to + property bool controlsShowing: true + + Connections { + target: globalConnections + onHideUI: function(force) { + controlsBarItem.controlsShowing=false + } + onShowUI: { + controlsBarItem.controlsShowing=true + } + } + Component.onCompleted: { setControlsTheme(appearance.themeName) @@ -103,6 +115,17 @@ Item { } } + VideoProgress { + id: progressBar + visible: controlsBarItem.controlsShowing && (appearance.themeName == "RoosterTeeth" ? false : true) + anchors.bottom: controlsBackground.top + anchors.left: controlsBackground.left + anchors.right: controlsBackground.right + anchors.bottomMargin: 0 + bottomPadding: 0 + z: 20 + } + Rectangle { id: controlsBackground height: controlsBar.visible ? controlsBar.height @@ -115,7 +138,8 @@ Item { Layout.fillHeight: true color: getAppearanceValueForTheme(appearance.themeName, "mainBackground") - visible: controlsOverlay.controlsShowing + visible: controlsBarItem.controlsShowing + z: 10 } Item { @@ -127,15 +151,7 @@ Item { anchors.leftMargin: parent.width / 128 anchors.bottom: parent.bottom anchors.bottomMargin: 0 - visible: controlsOverlay.controlsShowing - VideoProgress { - id: progressBar - visible: appearance.themeName == "RoosterTeeth" ? false : true - anchors.bottom: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.bottomMargin: 0 - bottomPadding: 0 - } + visible: controlsBarItem.controlsShowing + z: 30 } } diff --git a/src/qml/MainMenu.qml b/src/qml/MainMenu.qml index 50f669b..e87fbbb 100644 --- a/src/qml/MainMenu.qml +++ b/src/qml/MainMenu.qml @@ -83,22 +83,6 @@ MenuBar { } } - LabsPlatform.FileDialog { - id: screenshotSaveDialog - title: translate.getTranslation("SAVE_SCREENSHOT", i18n.language) - fileMode: LabsPlatform.FileDialog.SaveFile - defaultSuffix: "png" - nameFilters: ["Images (*.png)", "All files (*)"] - onAccepted: { - player.grabToImage(function (result) { - var filepath = String(screenshotSaveDialog.file).replace( - "file://", '') - result.saveToFile(filepath) - subtitlesBar.visible = appearance.useMpvSubs ? false : true - }) - } - } - LabsPlatform.FileDialog { id: fileDialog title: translate.getTranslation("OPEN_FILE", i18n.language) @@ -185,31 +169,6 @@ MenuBar { onTriggered: loadDialog.open() shortcut: keybinds.openURI } - Action { - text: translate.getTranslation("SCREENSHOT", i18n.language) - onTriggered: { - player.hideControls(true) - screenshotSaveDialog.open() - } - shortcut: keybinds.screenshot - } - Action { - text: translate.getTranslation("SCREENSHOT_WITHOUT_SUBTITLES", - i18n.language) - onTriggered: { - player.hideControls(true) - subtitlesBar.visible = false - screenshotSaveDialog.open() - } - shortcut: keybinds.screenshotWithoutSubtitles - } - Action { - text: translate.getTranslation("FULL_SCREENSHOT", i18n.language) - onTriggered: { - screenshotSaveDialog.open() - } - shortcut: keybinds.fullScreenshot - } Action { text: translate.getTranslation("EXIT", i18n.language) onTriggered: Qt.quit() diff --git a/src/qml/RoosterTeethButtonLayout.qml b/src/qml/RoosterTeethButtonLayout.qml index c7a37d9..1e6a203 100644 --- a/src/qml/RoosterTeethButtonLayout.qml +++ b/src/qml/RoosterTeethButtonLayout.qml @@ -75,11 +75,14 @@ Item { id: videoProgressRoosterTeeth anchors.left: timeLabel.right anchors.right: speedText.left + anchors.leftMargin: parent.width / 128 + anchors.rightMargin: parent.width / 128 anchors.top: parent.top anchors.bottom: parent.bottom height: parent.height to: progressBar.to value: progressBar.value + center: true } SpeedText { diff --git a/src/qml/UIComponents/MenuTitleBar.qml b/src/qml/UIComponents/MenuTitleBar.qml new file mode 100644 index 0000000..5087c42 --- /dev/null +++ b/src/qml/UIComponents/MenuTitleBar.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 + +Item { + id: menuTitleBar + height: menuBar.height + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + visible: true + + Connections { + target: globalConnections + onHideUI: function () { + if (!menuBar.anythingOpen()) { + menuTitleBar.visible = false + } + } + onShowUI: { + menuTitleBar.visible = true + } + } + + MainMenu { + id: menuBar + } + + Rectangle { + id: titleBar + height: menuBar.height + anchors.right: parent.right + anchors.left: menuBar.right + anchors.top: parent.top + color: getAppearanceValueForTheme(appearance.themeName, + "mainBackground") + + Text { + id: titleLabel + objectName: "titleLabel" + text: translate.getTranslation("TITLE", i18n.language) + 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)) + Connections { + target: player + onTitleChanged: function (title) { + titleLabel.text = title + mainWindow.title = title + } + } + } + } +} diff --git a/src/qml/UIComponents/VideoProgress.qml b/src/qml/UIComponents/VideoProgress.qml index bfcf089..3f55157 100644 --- a/src/qml/UIComponents/VideoProgress.qml +++ b/src/qml/UIComponents/VideoProgress.qml @@ -12,8 +12,29 @@ Slider { objectName: "progressBar" property string currentMediaURL: "" property bool playing: false + property bool center: false to: 1 value: 0.0 + + Rectangle { + id: timestampBox + visible: false + width: hoverProgressLabel.width + height: hoverProgressLabel.height + z: 100 + color: getAppearanceValueForTheme(appearance.themeName, + "mainBackground") + Text { + id: hoverProgressLabel + text: "0:00" + color: "white" + font.family: appearance.fontName + font.pixelSize: mainWindow.virtualHeight / 50 + horizontalAlignment: Text.AlignHCenter + renderType: Text.NativeRendering + } + } + Connections { target: player onPlayStatusChanged: function (status) { @@ -50,6 +71,10 @@ Slider { } } function getHandleVisibility(themeName, isMouse) { + if (fun.nyanCat) { + return true + } + if (appearance.themeName == "Niconico" && isMouse) { return true } else if (appearance.themeName == "Niconico") { @@ -65,30 +90,30 @@ Slider { anchors.fill: parent hoverEnabled: true - propagateComposedEvents: false + propagateComposedEvents: true acceptedButtons: Qt.NoButton z: 100 property string currentTime: "" - onEntered: previewRect.visible = true - onExited: previewRect.visible = false + onEntered: timestampBox.visible = true + onExited: timestampBox.visible = false + onPositionChanged: { var a = (progressBar.to / progressBar.availableWidth) * (mouseAreaProgressBar.mapToItem( progressBar, mouseAreaProgressBar.mouseX, 0).x - 2) hoverProgressLabel.text = utils.createTimestamp(a) - previewRect.x = mouseAreaProgressBar.mapToItem( - controlsOverlay, mouseAreaProgressBar.mouseX, - 0).x - previewRect.width / 2 - previewRect.y = progressBackground.y - previewRect.height - controlsBar.height * 2 + timestampBox.x = mouseAreaProgressBar.mouseX - (timestampBox.width / 2) + timestampBox.y = progressBackground.y - timestampBox.height * 2 } } background: Rectangle { + anchors.bottom: parent.bottom + anchors.bottomMargin: progressBar.center ? (progressBar.height / 2) - (height / 2) : 0 id: progressBackground - x: progressBar.leftPadding - y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2 + z: 30 width: progressBar.availableWidth height: progressBar.getProgressBarHeight( fun.nyanCat, mouseAreaProgressBar.containsMouse) @@ -152,9 +177,9 @@ Slider { handle: Rectangle { z: 70 id: handleRect - x: progressBar.leftPadding + progressBar.visualPosition - * (progressBar.availableWidth - width) - y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2 + x: progressBar.visualPosition * (progressBar.availableWidth - width) + anchors.bottom: parent.bottom + anchors.bottomMargin: progressBar.center ? (progressBar.height / 2) - (height / 2) : -height / 4 implicitHeight: radius implicitWidth: radius radius: mainWindow.virtualHeight / 59 diff --git a/src/qml/main.qml b/src/qml/main.qml index a74e1d3..42164cc 100644 --- a/src/qml/main.qml +++ b/src/qml/main.qml @@ -11,7 +11,7 @@ import "codes.js" as LanguageCodes Window { id: mainWindow - title: titleLabel.text + title: "KittehPlayer" visible: true width: 720 height: 480 @@ -24,6 +24,12 @@ Window { id: qmlDebugger } + Item { + id: globalConnections + signal showUI() + signal hideUI() + } + function getAppearanceValueForTheme(themeName, name) { if (themeName == "YouTube") { return youTubeAppearance[name] @@ -306,23 +312,19 @@ Window { property bool controlsShowing: true z: 2 - function hideControls(force) { - if (!menuBar.anythingOpen() || force) { - controlsShowing = false - mouseAreaPlayer.cursorShape = Qt.BlankCursor - } + Connections { + target: globalConnections + onHideUI: function() { + mouseAreaPlayer.cursorShape = Qt.BlankCursor } + onShowUI: { + mouseAreaPlayer.cursorShape = Qt.ArrowCursor + } + } - function showControls() { - if (!controlsShowing) { - controlsShowing = true - mouseAreaPlayer.cursorShape = Qt.ArrowCursor - } - } MouseArea { id: mouseAreaBar - width: parent.width height: (controlsBar.controls.height * 2) + controlsBar.progress.height anchors.bottom: parent.bottom @@ -344,9 +346,11 @@ Window { anchors.rightMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 - anchors.top: titleBar.bottom + anchors.top: topBar.bottom anchors.topMargin: 0 hoverEnabled: true + propagateComposedEvents: true + Timer{ id: mouseTapTimer @@ -392,11 +396,11 @@ Window { running: true repeat: false onTriggered: { - controlsOverlay.hideControls() + globalConnections.hideUI() } } onPositionChanged: { - controlsOverlay.showControls() + globalConnections.showUI() mouseAreaPlayerTimer.restart() } } @@ -404,12 +408,10 @@ Window { Timer { id: statsUpdater interval: 1000 - running: true + running: statsForNerdsText.visible repeat: true onTriggered: { - if (statsForNerdsText.visible) { - statsForNerdsText.text = player.getStats() - } + statsForNerdsText.text = player.getStats() } } @@ -435,81 +437,12 @@ Window { } } - MainMenu { - id: menuBar - visible: controlsOverlay.controlsShowing - } - - Rectangle { - id: titleBar - height: menuBar.height - anchors.right: parent.right - anchors.left: menuBar.right - anchors.top: parent.top - visible: controlsOverlay.controlsShowing - - color: getAppearanceValueForTheme(appearance.themeName, - "mainBackground") - - Text { - id: titleLabel - objectName: "titleLabel" - text: translate.getTranslation("TITLE", i18n.language) - 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: controlsOverlay.controlsShowing - && ((!appearance.titleOnlyOnFullscreen) - || (mainWindow.visibility == Window.FullScreen - || mainWindow.visibility == Window.Maximized)) - Connections { - target: player - onTitleChanged: function (title) { - titleLabel.text = title - } - } - } + MenuTitleBar { + id: topBar } ControlsBar { id: controlsBar - Item { - id: previewRect - z: 80 - visible: false - width: hoverProgressLabel.width - - Rectangle { - anchors.bottom: parent.bottom - anchors.left: parent.left - anchors.right: parent.right - width: hoverProgressLabel.width - height: hoverProgressLabel.height - z: 100 - color: getAppearanceValueForTheme(appearance.themeName, - "mainBackground") - Text { - id: hoverProgressLabel - text: "0:00" - color: "white" - font.family: appearance.fontName - font.pixelSize: mainWindow.virtualHeight / 50 - horizontalAlignment: Text.AlignHCenter - renderType: Text.NativeRendering - } - } - } } } } diff --git a/src/qml/qml.qrc b/src/qml/qml.qrc index 2ca6d2a..eccf714 100644 --- a/src/qml/qml.qrc +++ b/src/qml/qml.qrc @@ -8,6 +8,7 @@ YouTubeButtonLayout.qml NiconicoButtonLayout.qml RoosterTeethButtonLayout.qml + UIComponents/MenuTitleBar.qml UIComponents/SmoothButton.qml UIComponents/ButtonImage.qml UIComponents/VerticalVolume.qml