Skip to content

Commit aec7baf

Browse files
fquirinfquirin
committed
fixed YouTube embedded player
1 parent 19eb62a commit aec7baf

File tree

2 files changed

+66
-28
lines changed

2 files changed

+66
-28
lines changed

‎www/scripts/sepiaFW.client.controls.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ function sepiaFW_build_client_controls(){
137137
}
138138
//TODO: add iOS and Windows?
139139
//TODO: we could use a Mesh-Node and the sendMessage API in Windows
140-
if (!isInternalPlayerStreaming && !sentAdditionalEvent){
140+
if (!isInternalPlayerStreaming && !sentAdditionalEvent && !controlData.skipFollowUp){
141141
//The user has probably tried to stop an external app but that was not possible
142142
sendFollowUpMessage(SepiaFW.local.g("tried_but_not_sure"), SepiaFW.local.g('result_unclear') + "Media: STOP"); //"<default_under_construction_0b>"
143143
}
@@ -162,7 +162,7 @@ function sepiaFW_build_client_controls(){
162162
SepiaFW.android.broadcastMediaButtonDownUpIntent(87, requireMediaAppPackage); //87: KEYCODE_MEDIA_NEXT
163163

164164
//Out of options ... for now
165-
}else{
165+
}else if (!controlData.skipFollowUp){
166166
sendFollowUpMessage("<default_under_construction_0b>", SepiaFW.local.g('no_client_support'));
167167
SepiaFW.debug.error("Client controls - Unsupported action in 'media': " + controlData.action);
168168
}
@@ -195,10 +195,11 @@ function sepiaFW_build_client_controls(){
195195
console.log('URI: ' + controlData.uri);
196196
*/
197197

198-
//Stop internal player
199-
if (SepiaFW.audio.isMusicPlayerStreaming() || SepiaFW.audio.isMainOnHold()){
200-
SepiaFW.audio.stop(SepiaFW.audio.getMusicPlayer());
201-
}
198+
//Stop other players
199+
Controls.media({
200+
action: "stop",
201+
skipFollowUp: true
202+
});
202203

203204
//Embedded Player - TODO: check if service has web-player support
204205
if (controlData.uri && (SepiaFW.ui.cards.canEmbedWebPlayer(controlData.service) || controlData.service.indexOf("_embedded") > 0)){

‎www/scripts/sepiaFW.ui.cards.js‎

Lines changed: 59 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1063,8 +1063,12 @@ function sepiaFW_build_ui_cards(){
10631063
if (data.brand == "Spotify"){
10641064
var webPlayerDiv = document.createElement('DIV');
10651065
webPlayerDiv.className = "spotifyWebPlayer cardBodyItem fullWidthItem";
1066-
var contentUrl = linkUrl.replace("spotify:", "https://open.spotify.com/embed/").replace(":play", "").replace(/:/g, "/").trim();
1067-
webPlayerDiv.innerHTML = '<iframe src="' + contentUrl + '" width="100%" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>';
1066+
var contentUrl = "https://" + linkUrl.replace("spotify:", "open.spotify.com/embed/").replace(":play", "").replace(/:/g, "/").trim();
1067+
webPlayerDiv.innerHTML = '<iframe '
1068+
+ 'src="' + contentUrl + '" width="100%" height="80" frameborder="0" allowtransparency="true" '
1069+
+ 'allow="encrypted-media" '
1070+
+ 'sandbox="allow-forms allow-popups allow-same-origin allow-scripts" ' + '>'
1071+
+ '</iframe>';
10681072
cardBody.appendChild(webPlayerDiv);
10691073
//Apple Music
10701074
}else if (data.brand == "Apple Music"){
@@ -1087,15 +1091,26 @@ function sepiaFW_build_ui_cards(){
10871091
var f = document.createElement('iframe');
10881092
f.id = 'youTubeWebPlayer-' + playerId;
10891093
f.allow = "autoplay; encrypted-media;";
1094+
f.sandbox = "allow-same-origin allow-scripts allow-presentation";
10901095
f.frameBorder = 0;
10911096
f.style.width = "100%"; f.style.height = "280px"; f.style.overflow = "hidden";
10921097
f.style.border = "4px solid"; f.style.borderColor = "#212121";
10931098
if (data.autoplay){
1099+
//stop all previous audio first
1100+
if (SepiaFW.client.controls){
1101+
SepiaFW.client.controls.media({
1102+
action: "stop",
1103+
skipFollowUp: true
1104+
});
1105+
}else{
1106+
SepiaFW.audio.stop();
1107+
}
10941108
addYouTubeControls(f);
10951109
}
10961110
if (linkUrl.indexOf("/embed") < 0){
10971111
//convert e.g.: https://www.youtube.com/results?search_query=purple+haze%2C+jimi+hendrix
1098-
f.src = "https://www.youtube.com/embed?autoplay=1&enablejsapi=1&playsinline=1&fs=1&listType=search&list=" + linkUrl.replace(/.*?search_query=/, "").trim();
1112+
f.src = "https://www.youtube.com/embed?autoplay=1&enablejsapi=1&playsinline=1&iv_load_policy=3&fs=1&listType=search&list="
1113+
+ linkUrl.replace(/.*?search_query=/, "").trim();
10991114
}else{
11001115
f.src = linkUrl;
11011116
}
@@ -1630,12 +1645,13 @@ function sepiaFW_build_ui_cards(){
16301645
return footer;
16311646
}
16321647

1633-
//--- YouTube Card Controls ---
1648+
//------ YouTube Card Controls ------
16341649

16351650
var youTubeMessageListenerExists = false;
16361651
var youTubePlayersTriedToStart = {};
16371652
var youTubeLastActivePlayerId = undefined;
16381653
var youTubeLastActivePlayerState = undefined;
1654+
var youTubePlayConfirmTimer = undefined;
16391655

16401656
function addYouTubeControls(frameEle){
16411657
frameEle.onload = function(){
@@ -1655,25 +1671,15 @@ function sepiaFW_build_ui_cards(){
16551671
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'playVideo'}), "*");
16561672
}else if (data.event == 'infoDelivery' && data.info){
16571673
//console.log(JSON.stringify(data));
1658-
if (data.info.playerState != undefined) youTubeLastActivePlayerState = data.info.playerState;
1674+
if (data.info.playerState != undefined){
1675+
youTubeLastActivePlayerState = data.info.playerState;
1676+
}
1677+
youTubeLastActivePlayerId = data.id;
16591678
if (data.info.playerState == -1){
16601679
//Skip if faulty
1661-
if (data.info.availableQualityLevels.length == 0 || data.info.videoBytesTotal == 1){
1662-
//console.log(data.info.playlist.length - 1);
1663-
//console.log(data.info.playlistIndex);
1664-
if (!youTubePlayersTriedToStart[data.id] && data.info.playlistIndex == 0){
1665-
youTubePlayersTriedToStart[data.id] = true;
1666-
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'nextVideo'}), "*");
1667-
}else if (data.info.playlist && data.info.playlist.length > 0){
1668-
if (data.info.playlistIndex != undefined && data.info.playlistIndex < (data.info.playlist.length - 1)){
1669-
//console.log('--- next ---');
1670-
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'nextVideo'}), "*");
1671-
delete youTubePlayersTriedToStart[data.id];
1672-
}
1673-
}
1674-
}
1675-
}else{
1676-
youTubeLastActivePlayerId = data.id;
1680+
youTubeSkipIfNotPlayed(data, $player);
1681+
}else if (data.info.playerState == 1){
1682+
clearTimeout(youTubePlayConfirmTimer);
16771683
}
16781684
}
16791685
}
@@ -1683,6 +1689,36 @@ function sepiaFW_build_ui_cards(){
16831689
frameEle.contentWindow.postMessage(JSON.stringify({event:'listening', id: frameEle.id}), "*");
16841690
};
16851691
}
1692+
function youTubeSkipIfNotPlayed(data, $player, skipFirstTest){
1693+
if (skipFirstTest || data.info.availableQualityLevels.length == 0){
1694+
//console.log(data.info.playlist.length - 1);
1695+
//console.log(data.info.playlistIndex);
1696+
if (!youTubePlayersTriedToStart[data.id] && data.info.playlistIndex == 0){
1697+
youTubePlayersTriedToStart[data.id] = true;
1698+
//console.log('--- next A ---');
1699+
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'nextVideo'}), "*");
1700+
}else if (data.info.playlist && data.info.playlist.length > 0){
1701+
if (data.info.playlistIndex != undefined && data.info.playlistIndex < (data.info.playlist.length - 1)){
1702+
//console.log('--- next B ---');
1703+
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'nextVideo'}), "*");
1704+
delete youTubePlayersTriedToStart[data.id];
1705+
}
1706+
}
1707+
}else{
1708+
//confirm play
1709+
youTubeSetConfirmTimer(data, $player);
1710+
}
1711+
}
1712+
function youTubeSetConfirmTimer(data, $player){
1713+
clearTimeout(youTubePlayConfirmTimer);
1714+
youTubePlayConfirmTimer = setTimeout(function(){
1715+
//console.log('--- confirm check ---');
1716+
if (Cards.youTubePlayerGetState() != 1){
1717+
data.info.playlistIndex++;
1718+
youTubeSkipIfNotPlayed(data, $player, true);
1719+
}
1720+
}, 3000);
1721+
}
16861722
Cards.youTubePlayerGetState = function(){
16871723
if (youTubeLastActivePlayerId){
16881724
var $player = $('#' + youTubeLastActivePlayerId);
@@ -1696,6 +1732,7 @@ function sepiaFW_build_ui_cards(){
16961732
}
16971733
}
16981734
Cards.youTubePlayerControls = function(cmd){
1735+
clearTimeout(youTubePlayConfirmTimer);
16991736
if (youTubeLastActivePlayerId && youTubeLastActivePlayerState > 0){
17001737
var $player = $('#' + youTubeLastActivePlayerId);
17011738
if ($player.length == 0){
@@ -1716,4 +1753,4 @@ function sepiaFW_build_ui_cards(){
17161753
}
17171754

17181755
return Cards;
1719-
}
1756+
}

0 commit comments

Comments
 (0)