polishing youtube integration

Babe.pro

@@ -16,7 +16,7 @@ CONFIG += c++11
 
 linux:unix:!android {
 
-    QT       += webkit
+    QT       += webengine
     message(Building for Linux KDE)
     include(kde/kde.pri)
 

main.cpp

@@ -11,7 +11,8 @@
 #ifdef Q_OS_ANDROID
 #include "./3rdparty/kirigami/src/kirigamiplugin.h"
 #include <QtWebView/QtWebView>
-//#include "java/notificationclient.h"
+#else
+#include <QtWebEngine>
 #endif
 
 #include "utils/bae.h"
@@ -77,7 +78,8 @@ int main(int argc, char *argv[])
     KirigamiPlugin::getInstance().registerTypes();
     QtWebView::initialize();
 #else
-    QQuickStyle::setStyle("material");
+    QQuickStyle::setStyle("nomad");
+    QtWebEngine::initialize();
 #endif
 
     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

qml.qrc

@@ -74,6 +74,10 @@
         <file>widgets/SearchView/SearchSuggestions.qml</file>
         <file>services/web/YouTube.qml</file>
         <file>services/web/YoutubeViewer.qml</file>
-        <file>services/web/YoutubeViewer_A.qml</file>
+        <file>services/web/YoutubePlayer.qml</file>
+        <file>services/web/YoutubeHelper.js</file>
+        <file>services/web/YoutubePlayer_A.qml</file>
+        <file>services/web/WebView.qml</file>
+        <file>services/web/WebView_A.qml</file>
     </qresource>
 </RCC>

services/web/WebView.qml

+import QtQuick 2.0
+import QtWebEngine 1.5
+import "../../utils/Player.js" as Player
+
+WebEngineView
+{
+    id: webView
+
+    onLoadingChanged:
+    {
+        if (loadRequest.errorString)
+            console.error(loadRequest.errorString);
+    }
+
+    onRecentlyAudibleChanged:
+    {
+        console.log("is playing", recentlyAudible)
+        if(recentlyAudible && isPlaying)
+        {
+            wasPlaying = isPlaying
+            Player.pauseTrack()
+        }
+
+        if(!recentlyAudible && wasPlaying)
+            Player.resumeTrack()
+    }
+}

services/web/WebView_A.qml

+import QtQuick 2.0
+import QtWebView 1.1
+import "../../utils/Player.js" as Player
+
+WebView
+{
+    id: webView
+
+    onLoadingChanged:
+    {
+        if (loadRequest.errorString)
+            console.error(loadRequest.errorString);
+    }
+}

services/web/YouTube.qml

@@ -11,6 +11,10 @@ Page
     id: youtubeViewRoot
     property var searchRes : []
     clip: true
+
+    property alias viewer : youtubeViewer
+    property int openVideo : 0
+
     Connections
     {
         target: youtube
@@ -19,17 +23,73 @@ Page
             searchRes = res;
             populate(searchRes)
             youtubeTable.forceActiveFocus()
+
+            if(openVideo > 0)
+            {
+                console.log("trying to open video")
+                watchVideo(youtubeTable.model.get(openVideo-1))
+                openVideo = 0
+            }
         }
     }
 
+    function watchVideo(track)
+    {
+        if(track && track.url)
+        {
+            var url = track.url
+            if(url && url.length > 0)
+            {
+                youtubeViewer.currentYt = track
+                youtubeViewer.webView.url = url+"?autoplay=1?"
+                stackView.push(youtubeViewer)
 
-    Loader
+            }
+        }
+    }
+
+    function playTrack(url)
     {
-        id: youtubeViewer
-        source: isMobile ? "qrc:/services/web/YoutubeViewer_A.qml" : "qrc:/services/web/YoutubeViewer.qml"
+        if(url && url.length > 0)
+        {
+            var newURL = url.replace("embed/", "watch?v=")
+            console.log(newURL)
+            youtubePlayer.item.url = newURL+"?autoplay=1+&vq=tiny"
+            youtubePlayer.item.runJavaScript("document.title", function(result) { console.log(result); });
+        }
+    }
 
+    function runSearch(searchTxt)
+    {
+        if(searchTxt)
+            if(searchTxt !== youtubeTable.headerBarTitle)
+            {
+                youtubeTable.headerBarTitle = searchTxt
+                youtube.getQuery(searchTxt, bae.loadSetting("YOUTUBELIMIT", "BABE", 25))
+            }
     }
 
+    function clearSearch()
+    {
+        searchInput.clear()
+        youtubeTable.clearTable()
+        youtubeTable.headerBarTitle = ""
+        searchRes = []
+    }
+
+    function populate(tracks)
+    {
+        youtubeTable.clearTable()
+        for(var i in tracks)
+            youtubeTable.model.append(tracks[i])
+    }
+
+    Loader
+    {
+        id: youtubePlayer
+        source: isMobile ? "qrc:/services/web/YoutubePlayer_A.qml" : "qrc:/services/web/YoutubePlayer.qml"
+
+    }
 
     BabePopup
     {
@@ -111,138 +171,169 @@ Page
         }
     }
 
-    function runSearch(searchTxt)
-    {
-        if(searchTxt)
-            if(searchTxt !== youtubeTable.headerBarTitle)
-            {
-                youtubeTable.headerBarTitle = searchTxt
-                youtube.getQuery(searchTxt, bae.loadSetting("YOUTUBELIMIT", "BABE", 25))
-            }
-
-    }
-
-    function clearSearch()
-    {
-        searchInput.clear()
-        youtubeTable.clearTable()
-        youtubeTable.headerBarTitle = ""
-        searchRes = []
-    }
-
-    function populate(tracks)
-    {
-        youtubeTable.clearTable()
-        for(var i in tracks)
-            youtubeTable.model.append(tracks[i])
-    }
-
 
-    ColumnLayout
+    StackView
     {
+        id: stackView
         anchors.fill: parent
-        width: parent.width
-        height: parent.height
-
-        Layout.margins: 0
-        spacing: 0
+        focus: true
 
-        BabeTable
+        pushEnter: Transition
         {
-            id: youtubeTable
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            trackNumberVisible: false
-            headerBarVisible: true
-            headerBarExit: true
-            headerBarExitIcon: "edit-clear"
-            holder.message: "No YouTube results!"
-            coverArtVisible: true
-            trackDuration: true
-            trackRating: true
-            onExit: clearSearch()
-            isArtworkRemote: true
-
-            appendBtn.visible: false
-            playAllBtn.visible: false
-            menuBtn.visible: false
-
-            headerBarRight: BabeButton
+            PropertyAnimation
             {
-                id: menuBtn
-                iconName: "application-menu"
-                onClicked: configPopup.open()
-            }
-
-            onRowClicked:
-            {
-                youtubeViewer.item.open()
-                youtubeViewer.item.webView.url= youtubeTable.model.get(index).url
+                property: "opacity"
+                from: 0
+                to:1
+                duration: 200
             }
+        }
 
-            onQuickPlayTrack:
+        pushExit: Transition
+        {
+            PropertyAnimation
             {
-                bae.getYoutubeTrack(JSON.stringify(youtubeTable.model.get(index)))
+                property: "opacity"
+                from: 1
+                to:0
+                duration: 200
             }
-
-
         }
 
-        Kirigami.Separator
+        popEnter: Transition
         {
-            visible: !isMobile
-            Layout.fillWidth: true
-            width: parent.width
-            height: 1
+            PropertyAnimation {
+                property: "opacity"
+                from: 0
+                to:1
+                duration: 200
+            }
         }
 
-        ToolBar
+        popExit: Transition
         {
-            id: searchBox
-            Layout.fillWidth: true
-            width: parent.width
-            height: toolBarHeight
-            position: ToolBar.Footer
-
-            Rectangle
+            PropertyAnimation
             {
-                anchors.fill: parent
-                z: -999
-                color: backgroundColor
+                property: "opacity"
+                from: 1
+                to:0
+                duration: 200
             }
+        }
 
 
-            RowLayout
+        initialItem: Item
+        {
+            id: youtubeList
+            ColumnLayout
             {
                 anchors.fill: parent
+                width: parent.width
+                height: parent.height
 
+                Layout.margins: 0
+                spacing: 0
 
-                TextInput
+                BabeTable
                 {
-                    id: searchInput
-                    color: foregroundColor
-                    Layout.fillWidth: true
+                    id: youtubeTable
                     Layout.fillHeight: true
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment:  Text.AlignVCenter
-                    selectByMouse: !root.isMobile
-                    selectionColor: babeHighlightColor
-                    selectedTextColor: foregroundColor
-                    focus: true
-                    text: ""
-                    wrapMode: TextEdit.Wrap
-                    onAccepted: runSearch(searchInput.text)
-
+                    Layout.fillWidth: true
+                    trackNumberVisible: false
+                    headerBarVisible: true
+                    headerBarExit: true
+                    headerBarExitIcon: "edit-clear"
+                    holder.message: "No YouTube results!"
+                    coverArtVisible: true
+                    trackDuration: true
+                    trackRating: true
+                    onExit: clearSearch()
+                    isArtworkRemote: true
+
+                    appendBtn.visible: false
+                    playAllBtn.visible: false
+                    menuBtn.visible: false
+
+                    headerBarRight: BabeButton
+                    {
+                        id: menuBtn
+                        iconName: "application-menu"
+                        onClicked: configPopup.open()
+                    }
+
+                    onRowClicked:
+                    {
+                        watchVideo(youtubeTable.model.get(index))
+                    }
+
+                    onQuickPlayTrack:
+                    {
+                        playTrack(youtubeTable.model.get(index).url)
+                    }
                 }
 
-                BabeButton
+                Kirigami.Separator
                 {
-                    Layout.rightMargin: contentMargins
-                    iconName: "edit-clear"
-                    onClicked: searchInput.clear()
+                    visible: !isMobile
+                    Layout.fillWidth: true
+                    width: parent.width
+                    height: 1
                 }
 
+                ToolBar
+                {
+                    id: searchBox
+                    Layout.fillWidth: true
+                    width: parent.width
+                    height: toolBarHeight
+                    position: ToolBar.Footer
+
+                    Rectangle
+                    {
+                        anchors.fill: parent
+                        z: -999
+                        color: backgroundColor
+                    }
+
+
+                    RowLayout
+                    {
+                        anchors.fill: parent
+
+
+                        TextInput
+                        {
+                            id: searchInput
+                            color: foregroundColor
+                            Layout.fillWidth: true
+                            Layout.fillHeight: true
+                            horizontalAlignment: Text.AlignHCenter
+                            verticalAlignment:  Text.AlignVCenter
+                            selectByMouse: !root.isMobile
+                            selectionColor: babeHighlightColor
+                            selectedTextColor: foregroundColor
+                            focus: true
+                            text: ""
+                            wrapMode: TextEdit.Wrap
+                            onAccepted: runSearch(searchInput.text)
+
+                        }
+
+                        BabeButton
+                        {
+                            Layout.rightMargin: contentMargins
+                            iconName: "edit-clear"
+                            onClicked: searchInput.clear()
+                        }
+
+                    }
+                }
             }
         }
+
+        YoutubeViewer
+        {
+            id: youtubeViewer
+        }
     }
 }

services/web/YoutubeHelper.js

+var player, timer, timeSpent = [], display = document.getElementById('display');
+
+function onYouTubeIframeAPIReady() {
+    player = new YT.Player( 'player', {
+        events: { 'onStateChange': onPlayerStateChange }
+    });
+}
+
+function onPlayerStateChange(event) {
+    if(event.data === 1) { // Started playing
+        if(!timeSpent.length){
+            timeSpent = new Array( parseInt(player.getDuration()) );
+        }
+        timer = setInterval(record,100);
+    } else {
+        clearInterval(timer);
+    }
+}
+
+function record(){
+    timeSpent[ parseInt(player.getCurrentTime()) ] = true;
+    showPercentage();
+}
+
+function showPercentage(){
+    var percent = 0;
+    for(var i=0, l=timeSpent.length; i<l; i++){
+        if(timeSpent[i]) percent++;
+    }
+    percent = Math.round(percent / timeSpent.length * 100);
+    console.log(percent + "%");
+}

services/web/YoutubePlayer.qml

+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import "../../view_models"
+import QtWebEngine 1.5
+import "../../utils/Player.js" as Player
+import "YoutubeHelper.js" as YTH
+WebEngineView
+{
+    id: webView
+    anchors.fill: parent
+    visible: true
+    property bool wasPlaying: false
+
+
+    onLoadingChanged:
+    {
+        if (loadRequest.errorString)
+            console.error(loadRequest.errorString);
+    }
+
+    onRecentlyAudibleChanged:
+    {
+        console.log("is playing", recentlyAudible)
+        if(recentlyAudible && isPlaying)
+            Player.pauseTrack()
+
+        if(!recentlyAudible && wasPlaying)
+            Player.resumeTrack()
+    }
+}

services/web/YoutubePlayer_A.qml

+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import "../../view_models"
+import QtWebView 1.1
+import "../../utils/Player.js" as Player
+import "YoutubeHelper.js" as YTH
+
+WebView
+{
+    id: webView
+    anchors.fill: parent
+    visible: false
+    clip: true
+    property bool wasPlaying: false
+
+
+    onLoadingChanged:
+    {
+        if (loadRequest.errorString)
+            console.error(loadRequest.errorString);
+    }
+
+//    onRecentlyAudibleChanged:
+//    {
+//        console.log("is playing", recentlyAudible)
+//        if(recentlyAudible && isPlaying)
+//            Player.pauseTrack()
+
+//        if(!recentlyAudible && wasPlaying)
+//            Player.resumeTrack()
+//    }
+}

services/web/YoutubeViewer.qml

@@ -2,21 +2,115 @@ import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import "../../view_models"
-import QtWebKit 3.0
 
-BabePopup
+import org.kde.kirigami 2.2 as Kirigami
+
+Page
 {
     id: videoPlayback
-    property alias webView: webView
-    maxHeight: 200
+    property alias webView: webViewer.item
+    property bool wasPlaying: false
+    property var currentYt : ({})
 
-    WebView
+    ColumnLayout
     {
-        id: webView
         anchors.fill: parent
-        onLoadingChanged: {
-            if (loadRequest.errorString)
-                console.error(loadRequest.errorString);
+
+        spacing: 0
+
+        Rectangle
+        {
+            id: headerRoot
+            width: parent.width
+            height:  visible ?  toolBarHeight : 0
+            Layout.fillWidth: true
+            focus: true
+            color: darkDarkColor
+
+            Kirigami.Separator
+            {
+                visible: !isMobile
+                width: parent.width
+                height: 1
+                anchors
+                {
+                    left: parent.left
+                    right: parent.right
+                    bottom: parent.bottom
+                }
+            }
+
+            RowLayout
+            {
+                id: headerBar
+                anchors.fill: parent
+
+                BabeButton
+                {
+                    Layout.alignment : Qt.AlignLeft
+                    Layout.leftMargin: contentMargins
+                    width: rowHeight
+                    iconName : "arrow-left"
+                    iconColor: darkForegroundColor
+                    onClicked: stackView.pop(youtubeList)
+                }
+
+                Label
+                {
+                    text : currentYt ? currentYt.title : "YouTube"
+                    Layout.fillHeight : true
+                    Layout.fillWidth : true
+                    Layout.alignment : Qt.AlignCenter
+
+                    elide : Text.ElideRight
+                    font.bold : false
+                    color : darkForegroundColor
+                    font.pointSize: fontSizes.big
+                    horizontalAlignment : Text.AlignHCenter
+                    verticalAlignment :  Text.AlignVCenter
+                }
+
+                BabeButton
+                {
+                    Layout.alignment : Qt.AlignLeft
+                    width: rowHeight
+                    iconName : "link"
+                    iconColor: darkForegroundColor
+                    onClicked: bae.openFile(webView.url)
+                }
+
+                BabeButton
+                {
+                    Layout.alignment : Qt.AlignLeft
+                    width: rowHeight
+                    iconName : "download"
+                    iconColor: darkForegroundColor
+                    onClicked: bae.getYoutubeTrack(JSON.stringify(currentYt))
+
+                }
+
+                BabeButton
+                {
+                    Layout.alignment : Qt.AlignLeft
+                    Layout.rightMargin: contentMargins
+                    width: rowHeight
+                    iconName : "overflow-menu"