Merge pull request #37 from lduboeuf/customseekbar

provide a transparent seekbar to fast forward or rewind video
mateosalta · Feb 17, 2022 · e4f88cc · e4f88cc
2 parents 1e2077a + 927cf95
commit e4f88cc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/app/Main.qml b/app/Main.qml
@@ -60,14 +60,37 @@ Rectangle {
         profile: defaultProfile
         settings.fullScreenSupportEnabled: true
         settings.dnsPrefetchEnabled: true
+        settings.showScrollBars: false
 
         enableSelectOverride: true
 
         property var currentWebview: webview
         property ContextMenuRequest contextMenuRequest: null
+        property string seekBarOverlayScript: "
+            if (!document.getElementById('custom-seekbar')) {
+
+                var wrapper= document.createElement('div');
+                wrapper.innerHTML= '<div><div id=\"custom-seekbar\" class=\"cbox\" style=\"bottom: 0;left: 30px;right: 30px;width: auto;z-index: 3;position: absolute;height: 20px; overflow: hidden;margin-bottom: 10px;\"><span style=\" position: absolute; top: 0px; left: 0px; height: 10px; width: 0;\"></span></div></div>';
+
+                document.getElementById('player-container-id').appendChild(wrapper.firstChild);
+                var customseekbar = document.getElementById('custom-seekbar');
+
+                customseekbar.onclick = function(e) {
+                    var vid = document.querySelector('video');
+                    var offset = customseekbar.getBoundingClientRect();
+                    var left = (e.pageX - (offset.left + window.scrollX));
+                    var totalWidth = customseekbar.getBoundingClientRect().width;
+                    var percentage = ( left / totalWidth );
+                    var vidTime = vid.duration * percentage;
+                    vid.currentTime = parseFloat(vidTime);
+                };
+            }"
+
         settings.pluginsEnabled: true
         settings.javascriptCanAccessClipboard: true
 
+        onUrlChanged: {runJavaScript(seekBarOverlayScript); }
+
         onFullScreenRequested: function(request) {
             request.accept();
             nav.visible = !nav.visible

diff --git a/clickable.json b/clickable.json
@@ -1,5 +1,6 @@
 {
+  "builder": "cmake",
   "clickable_minimum_required": "6.12.2",
-    "qt_version": "5.12",
+  "qt_version": "5.12",
   "kill": "youtube-web"
 }