Commit 1d358161 authored by Camilo Higuita's avatar Camilo Higuita

polishing youtube integration

parent 676bd6dc
......@@ -16,7 +16,7 @@ CONFIG += c++11
linux:unix:!android {
QT += webkit
QT += webengine
message(Building for Linux KDE)
include(kde/kde.pri)
......
......@@ -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")));
......
......@@ -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>
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()
}
}
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);
}
}
......@@ -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
}
}
}
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 + "%");
}
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()
}
}
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()
// }
}
......@@ -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"
iconColor: darkForegroundColor
}
}
}
Loader
{
id: webViewer
Layout.fillHeight: true
Layout.fillWidth: true
source: isMobile ? "qrc:/services/web/WebView_A.qml" : "qrc:/services/web/WebView.qml"
}
}
}
import QtQuick 2.9
import QtWebView 1.1
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../../view_models"
BabePopup
{
id: videoPlayback
property alias webView: webView
WebView
{
id: webView
anchors.fill: parent
onLoadingChanged: {
if (loadRequest.errorString)
console.error(loadRequest.errorString);
}
}
}
......@@ -91,7 +91,7 @@ BabeSettings::BabeSettings(QObject *parent) : QObject(parent)
this->startBrainz(true, BAE::SEG::HALF);
}else
this->startBrainz(BAE::loadSettings("BRAINZ", "BABE", false).toBool(), BAE::SEG::THREE);
this->startBrainz(BAE::loadSettings("BRAINZ", "BABE", false).toBool(), BAE::SEG::TWO);
emit refreshTables(size);
});
......
......@@ -29,7 +29,7 @@ function playTrack(track)
bae.notifySong(currentTrack.url)
}
// bae.trackLyrics(currentTrack.url)
bae.trackLyrics(currentTrack.url)
// root.mainPlaylist.infoView.wikiAlbum = bae.albumWiki(root.mainPlaylist.currentTrack.album,root.mainPlaylist.currentTrack.artist)
// root.mainPlaylist.infoView.wikiArtist = bae.artistWiki(root.mainPlaylist.currentTrack.artist)
......
......@@ -198,14 +198,11 @@ Item
iconName: "videoclip-amarok"
onClicked:
{
if(youtube.getQuery(currentTrack.title+" "+currentTrack.artist))
{
pageStack.currentIndex = 1
currentView = viewsIndex.youtube
}
youtubeView.openVideo = 1
youtube.getQuery(currentTrack.title+" "+currentTrack.artist)
pageStack.currentIndex = 1
currentView = viewsIndex.youtube
}
}
}
......
......@@ -19,6 +19,7 @@ BabeTable
section.criteria: ViewSection.FullString
section.delegate: BabeDelegate
{
id: delegate
label: section
isSection: true
boldLabel: true
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment