[UI] Added improved subtitles.

KittehPlayer.pro

@@ -4,8 +4,10 @@ TEMPLATE = app
 QT += qml quickcontrols2 widgets core-private gui-private
 SOURCES += src/main.cpp src/mpvobject.cpp src/filesavedialog.cpp src/fileopendialog.cpp
 
-CONFIG += release
+CONFIG += debug
-CONFIG+=qtquickcompiler
+CONFIG+=qml_debug
+
+#CONFIG+=qtquickcompiler
 QT_CONFIG -= no-pkg-config
 CONFIG += link_pkgconfig
 PKGCONFIG += mpv

src/mpvobject.cpp

@@ -129,21 +129,10 @@ MpvObject::MpvObject(QQuickItem * parent)
     //mpp_set_option_string(mpv, "no-sub-ass", "yes)
 
     mpv_set_option_string(mpv, "slang", "en");
-    mpv_set_option_string(mpv, "sub-font", "Noto Sans");
-    mpv_set_option_string(mpv, "sub-font-size", "24");
-    mpv_set_option_string(mpv, "sub-ass-override", "force");
-    mpv_set_option_string(mpv, "sub-ass", "off");
-    mpv_set_option_string(mpv, "sub-border-size", "0");
-    mpv_set_option_string(mpv, "sub-bold", "off");
-    mpv_set_option_string(mpv, "sub-scale-by-window", "on");
-    mpv_set_option_string(mpv, "sub-scale-with-window", "on");
-
-    mpv_set_option_string(mpv, "sub-back-color", "0.0/0.0/0.0/0.0");
 
     mpv_set_option_string(mpv, "config", "yes");
     //mpv_set_option_string(mpv, "sub-visibility", "no");
-    mpv_set_option_string(mpv, "sub-color", "0.0/0.0/0.0/0.0");
+
-    mpv_set_option_string(mpv, "sub-border-color", "0.0/0.0/0.0/0.0");
 
 
 

src/qml/main.qml

@@ -85,6 +85,20 @@ ApplicationWindow {
         width: parent.width
         height: parent.height
 
+        Settings {
+            id: appearance
+            category: "Appearance"
+            property bool titleOnlyOnFullscreen: true
+            property bool clickToPause: true
+            property bool useMpvSubs: false
+        }
+
+        Settings {
+            id: fun
+            category: "Fun"
+            property bool nyanCat: false
+        }
+
         Timer {
             id: initTimer
             interval: 1000
@@ -102,6 +116,21 @@ ApplicationWindow {
             var args = Qt.application.arguments
             var len = Qt.application.arguments.length
             var argNo = 0
+
+            if (!appearance.useMpvSubs) {
+                player.setOption("sub-font", "Noto Sans")
+                player.setOption("sub-font-size", "24")
+                player.setOption("sub-ass-override", "force")
+                player.setOption("sub-ass", "off")
+                player.setOption("sub-border-size", "0")
+                player.setOption("sub-bold", "off")
+                player.setOption("sub-scale-by-window", "on")
+                player.setOption("sub-scale-with-window", "on")
+                player.setOption("sub-color", "0.0/0.0/0.0/0.0")
+                player.setOption("sub-border-color", "0.0/0.0/0.0/0.0")
+                player.setOption("sub-back-color", "0.0/0.0/0.0/0.0")
+            }
+
             player.setOption("ytdl-format", "bestvideo[width<=" + Screen.width
                              + "][height<=" + Screen.height + "]+bestaudio")
             if (len > 1) {
@@ -211,13 +240,12 @@ ApplicationWindow {
             return subtitlesMenu.visible || settingsMenu.visible
                     || fileMenuBarItem.opened || playbackMenuBarItem.opened
                     || viewMenuBarItem.opened || audioMenuBarItem.opened
-                    || screenshotSaveDialog.visible || videoMenuBarItem.opened
+                    || videoMenuBarItem.opened || subsMenuBarItem.opened
-                    || subsMenuBarItem.opened || aboutMenuBarItem.opened
+                    || aboutMenuBarItem.opened
         }
 
         function hideControls(force) {
             if (!isAnyMenuOpen() || force) {
-                //player.setOption("sub-margin-y", "22")
                 controlsBar.visible = false
                 controlsBackground.visible = false
                 titleBar.visible = false
@@ -228,7 +256,6 @@ ApplicationWindow {
 
         function showControls() {
             if (!controlsBar.visible) {
-                //player.setOption("sub-margin-y", String(controlsBar.height + progressBar.height))
                 controlsBar.visible = true
                 controlsBackground.visible = true
                 if (appearance.titleOnlyOnFullscreen) {
@@ -243,19 +270,6 @@ ApplicationWindow {
             }
         }
 
-        Settings {
-            id: appearance
-            category: "Appearance"
-            property bool titleOnlyOnFullscreen: true
-            property bool clickToPause: true
-        }
-
-        Settings {
-            id: fun
-            category: "Fun"
-            property bool nyanCat: false
-        }
-
         FileSaveDialog {
             id: screenshotSaveDialog
             title: "Save Screenshot To"
@@ -267,7 +281,7 @@ ApplicationWindow {
                                 "file://", '')
                     console.log("Saving screenshot to: " + filepath)
                     result.saveToFile(filepath)
-                    nativeSubs.visible = true
+                    subtitlesBar.visible = appearance.useMpvSubs ? false : true
                 })
             }
         }
@@ -315,6 +329,8 @@ ApplicationWindow {
 
         MouseArea {
             id: mouseAreaPlayer
+            z: 1000
+            focus: true
             width: parent.width
             anchors.bottom: mouseAreaBar.top
             anchors.bottomMargin: 10
@@ -334,8 +350,8 @@ ApplicationWindow {
             Timer {
                 id: mouseAreaPlayerTimer
                 interval: 1000
-                running: false
+                running: true
-                repeat: false
+                repeat: true
                 onTriggered: {
                     player.hideControls()
                 }
@@ -456,7 +472,7 @@ ApplicationWindow {
                     text: "Screenshot w/o subtitles"
                     onTriggered: {
                         player.hideControls(true)
-                        nativeSubs.visible = false
+                        subtitlesBar.visible = false
                         screenshotSaveDialog.open()
                     }
                     shortcut: keybinds.screenshotWithoutSubtitles
@@ -659,6 +675,13 @@ ApplicationWindow {
                     }
                     shortcut: keybinds.cycleSubBackwards
                 }
+                Action {
+                    text: "Toggle MPV Subs"
+                    onTriggered: {
+                        appearance.useMpvSubs = !appearance.useMpvSubs
+                    }
+                    shortcut: keybinds.cycleSubBackwards
+                }
             }
 
             Menu {
@@ -925,44 +948,57 @@ ApplicationWindow {
         }
 
         Rectangle {
-            id: nativeSubtitles
+            id: subtitlesBar
-            height: nativeSubs.font.pixelSize + 4
+            visible: !appearance.useMpvSubs
-            visible: nativeSubs.text == "" ? false : true
-            anchors.left: controlsBar.left
-            anchors.right: controlsBar.right
-            anchors.bottom: controlsBackground.top
-            anchors.bottomMargin: 0
-
-            radius: 5
             color: "transparent"
-            TextMetrics {
+            height: player.height / 8
-                id: subTextMetrics
+            anchors.bottom: controlsBackground.top
-                font.family: notoFont.name
+            anchors.bottomMargin: 5
-                font.pixelSize: nativeSubs.fontInfo.pixelSize
+            anchors.right: parent.right
-                text: nativeSubs.text
+            anchors.left: parent.left
-            }
 
-            Label {
+            RowLayout {
-                id: nativeSubs
+                id: nativeSubtitles
-                width: parent.width
+                visible: true
-                text: ""
+                anchors.left: subtitlesBar.left
-                color: "white"
+                anchors.right: subtitlesBar.right
-                font.family: notoFont.name
+                height: childrenRect.height
-                font.pixelSize: Screen.height / 24
+                anchors.bottom: parent.bottom
-                horizontalAlignment: Text.AlignHCenter
+                anchors.bottomMargin: 10
-                anchors.bottom: parent.top
-                opacity: 1
-                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
 
-                background: Rectangle {
+                Rectangle {
-                    id: subsBackground
+                    id: subsContainer
-                    color: Qt.rgba(0, 0, 0, 0.6)
+                    Layout.fillWidth: true
-                    width: subTextMetrics.tightBoundingRect.width + 8
+                    Layout.fillHeight: true
-                    anchors.left: parent.left
+                    Layout.rightMargin: 0
-                    anchors.leftMargin: (nativeSubtitles.width
+                    Layout.leftMargin: 0
-                                         - subTextMetrics.tightBoundingRect.width) / 2
+                    Layout.maximumWidth: nativeSubtitles.width
-                    anchors.right: parent.right
+                    color: "transparent"
-                    anchors.rightMargin: anchors.leftMargin
+                    height: childrenRect.height
+
+                    Label {
+                        id: 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: Screen.height / 24
+                        font.family: notoFont.name
+                        horizontalAlignment: Text.AlignHCenter
+                        opacity: 1
+                        background: Rectangle {
+                            id: subsBackground
+                            color: Qt.rgba(0, 0, 0, 0.6)
+                            width: subsContainer.childrenRect.width
+                            height: subsContainer.childrenRect.height
+                        }
+                    }
                 }
             }
         }