Skip to content

Commit 97e2acc

Browse files
fquirinfquirin
committed
fixed a bug in YouTube fadeOut/In handling; improved code;
1 parent d71f045 commit 97e2acc

File tree

3 files changed

+64
-45
lines changed

3 files changed

+64
-45
lines changed

‎www/scripts/sepiaFW.audio.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,7 @@ function sepiaFW_build_audio(){
305305
for (var i=0; i<customPlayerIds.length; i++){
306306
//stop on first fade out? There should not be more than one active player
307307
if (audioFadeListeners[customPlayerIds[i]].onFadeOutRequest(force)){
308+
SepiaFW.debug.info("AUDIO: fadeOut - player: " + customPlayerIds[i]);
308309
break;
309310
}
310311
}
@@ -318,9 +319,12 @@ function sepiaFW_build_audio(){
318319
var customPlayerIds = Object.keys(audioFadeListeners);
319320
for (var i=0; i<customPlayerIds.length; i++){
320321
//stop on first fade in? There should not be more than one active player
321-
if (audioFadeListeners[customPlayerIds[i]].onFadeInRequest){
322-
if (audioFadeListeners[customPlayerIds[i]].isOnHold()){
323-
audioFadeListeners[customPlayerIds[i]].onFadeInRequest()
322+
var pId = customPlayerIds[i];
323+
if (audioFadeListeners[pId].onFadeInRequest){
324+
SepiaFW.debug.info("AUDIO: fadeInIfOnHold - player: " + pId);
325+
if (audioFadeListeners[pId].isOnHold()){
326+
SepiaFW.debug.info("AUDIO: fadeInIfOnHold - triggering onFadeInRequest");
327+
audioFadeListeners[pId].onFadeInRequest()
324328
break;
325329
}
326330
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,22 +144,26 @@ function sepiaFW_build_client_controls(){
144144
//1) app player (full control including fade on STT, TTS)
145145
//2) client player (outside app but with full or partial fade support)
146146
//3) remote player (no fade control, but start/stop etc.)
147+
SepiaFW.debug.info("Client controls - Media action: " + controlData.action);
147148

148149
//STOP
149150
if (controlData.action == "stop" || controlData.action == "pause" || controlData.action == "close"){
150151
//Stop internal player
151152
var isInternalPlayerStreaming = SepiaFW.audio.isMusicPlayerStreaming() || SepiaFW.audio.isMainOnHold();
152153
if (isInternalPlayerStreaming){
153-
SepiaFW.audio.stop(SepiaFW.audio.getMusicPlayer());
154+
SepiaFW.debug.info("Client controls - Media: stopping internal media player");
155+
SepiaFW.audio.stop(SepiaFW.audio.getMusicPlayer());
154156
}
155157
//Player and platform specific additional STOP methods
156158
var sentAdditionalEvent = false;
157159
if (SepiaFW.ui.cards.youTubePlayerGetState() == 1 || SepiaFW.ui.cards.youTubePlayerIsOnHold()){
158160
//YouTube embedded player
161+
SepiaFW.debug.info("Client controls - Media: stopping YouTube media player");
159162
sentAdditionalEvent = (SepiaFW.ui.cards.youTubePlayerControls("stop") > 0);
160163
}else if (SepiaFW.ui.isAndroid){
161164
//we do this only if we have a recent Android media event - otherwhise it will activate all music apps
162165
var requireMediaAppPackage = true;
166+
SepiaFW.debug.info("Client controls - Media: stopping Android media player");
163167
sentAdditionalEvent = SepiaFW.android.broadcastMediaButtonDownUpIntent(127, requireMediaAppPackage);
164168
//127: KEYCODE_MEDIA_PAUSE
165169
}

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

Lines changed: 52 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1098,6 +1098,7 @@ function sepiaFW_build_ui_cards(){
10981098
cardBody.appendChild(webPlayerDiv);
10991099
//YouTube
11001100
}else if (data.brand == "YouTube"){
1101+
//console.log('YouTube'); //DEBUG
11011102
var webPlayerDiv = document.createElement('DIV');
11021103
var playerId = currentLinkItemId++;
11031104
webPlayerDiv.className = "youTubeWebPlayer cardBodyItem fullWidthItem"
@@ -1109,6 +1110,7 @@ function sepiaFW_build_ui_cards(){
11091110
f.style.width = "100%"; f.style.height = "280px"; f.style.overflow = "hidden";
11101111
f.style.border = "4px solid"; f.style.borderColor = "#212121";
11111112
if (data.autoplay){
1113+
//console.log('add controls'); //DEBUG
11121114
if (isSafeSource){
11131115
//stop all previous audio first
11141116
if (SepiaFW.client.controls){
@@ -1682,11 +1684,13 @@ function sepiaFW_build_ui_cards(){
16821684
var youTubeLastActivePlayerState = undefined;
16831685
var youTubePlayConfirmTimer = undefined;
16841686
var youTubePlayerIsOnHold = false;
1687+
var youTubePlayerStopRequested = false;
16851688
var youTubePlayerAutoPlay = true;
16861689

16871690
function addYouTubeControls(frameEle, startWhenReady){
16881691
//reset some stuff first
16891692
youTubePlayerIsOnHold = false;
1693+
youTubePlayerStopRequested = false;
16901694
//add interface
16911695
frameEle.onload = function(){
16921696
//API
@@ -1696,46 +1700,49 @@ function sepiaFW_build_ui_cards(){
16961700
}else{
16971701
youTubeMessageListenerExists = true;
16981702
youTubePlayerAutoPlay = startWhenReady;
1699-
window.addEventListener('message', function(e){
1700-
if (e.origin == "https://www.youtube.com" && e.data && typeof e.data == "string" && e.data.indexOf("{") == 0){
1701-
var data = JSON.parse(e.data);
1702-
if (data && data.id){
1703-
var $player = $('#' + data.id);
1704-
//console.log("YouTube iframe event: " + data.event);
1705-
if ($player.length == 0){
1706-
return;
1707-
}
1708-
if (data.event == 'onReady'){
1709-
if (youTubePlayerAutoPlay){
1710-
setTimeout(function(){
1711-
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'playVideo'}), "*");
1712-
}, 1000);
1713-
}
1714-
}else if (data.event == 'infoDelivery' && data.info){
1715-
//console.log(JSON.stringify(data));
1716-
if (data.info.playerState != undefined){
1717-
youTubeLastActivePlayerState = data.info.playerState;
1718-
}
1719-
youTubeLastActivePlayerId = data.id;
1720-
if (data.info.playerState == -1){
1721-
//Skip if faulty
1722-
if (youTubePlayerAutoPlay){
1723-
youTubeSkipIfNotPlayed(data, $player); //TODO: this is tricky, we should reactivate this when user presses play
1724-
}
1725-
}else if (data.info.playerState == 1){
1726-
clearTimeout(youtubeSkipTimer);
1727-
clearTimeout(youTubePlayConfirmTimer);
1728-
}
1729-
}
1730-
}
1731-
}
1732-
});
1703+
window.addEventListener('message', youTubeEventListener);
17331704
}
17341705
frameEle.contentWindow.postMessage(JSON.stringify({event:'listening', id: frameEle.id}), "*");
17351706
};
17361707
//set/update fade listener
17371708
youTubeRegisterFadeInOutListener();
17381709
}
1710+
function youTubeEventListener(e){
1711+
if (e.origin == "https://www.youtube.com" && e.data && typeof e.data == "string" && e.data.indexOf("{") == 0){
1712+
var data = JSON.parse(e.data);
1713+
if (data && data.id){
1714+
var $player = $('#' + data.id);
1715+
//console.log("YouTube iframe event: " + data.event);
1716+
if ($player.length == 0){
1717+
return;
1718+
}
1719+
if (data.event == 'onReady'){
1720+
SepiaFW.debug.info("Cards - YouTube: player ready.");
1721+
if (youTubePlayerAutoPlay){
1722+
setTimeout(function(){
1723+
Cards.youTubePlayerControls("resume", $player[0].id);
1724+
}, 1000);
1725+
}
1726+
}else if (data.event == 'infoDelivery' && data.info){
1727+
//console.log(JSON.stringify(data));
1728+
if (data.info.playerState != undefined){
1729+
SepiaFW.debug.info("Cards - YouTube: player state: " + data.info.playerState);
1730+
youTubeLastActivePlayerState = data.info.playerState;
1731+
}
1732+
youTubeLastActivePlayerId = data.id;
1733+
if (data.info.playerState == -1){
1734+
//Skip if faulty
1735+
if (youTubePlayerAutoPlay){
1736+
youTubeSkipIfNotPlayed(data, $player); //TODO: this is tricky, we should reactivate this when user presses play
1737+
}
1738+
}else if (data.info.playerState == 1){
1739+
clearTimeout(youtubeSkipTimer);
1740+
clearTimeout(youTubePlayConfirmTimer);
1741+
}
1742+
}
1743+
}
1744+
}
1745+
}
17391746
var youtubeSkipTimer = undefined;
17401747
function youTubeSkipIfNotPlayed(data, $player, skipFirstTest){
17411748
if (skipFirstTest || data.info.availableQualityLevels.length == 0){
@@ -1746,14 +1753,14 @@ function sepiaFW_build_ui_cards(){
17461753
//console.log('--- next A ---');
17471754
clearTimeout(youtubeSkipTimer);
17481755
youtubeSkipTimer = setTimeout(function(){
1749-
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'nextVideo'}), "*");
1756+
Cards.youTubePlayerControls("next", $player[0].id);
17501757
}, 1000);
17511758
}else if (data.info.playlist && data.info.playlist.length > 0){
17521759
if (data.info.playlistIndex != undefined && data.info.playlistIndex < (data.info.playlist.length - 1)){
17531760
//console.log('--- next B ---');
17541761
clearTimeout(youtubeSkipTimer);
17551762
youtubeSkipTimer = setTimeout(function(){
1756-
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'nextVideo'}), "*");
1763+
Cards.youTubePlayerControls("next", $player[0].id);
17571764
}, 1000);
17581765
delete youTubePlayersTriedToStart[data.id];
17591766
}
@@ -1790,20 +1797,24 @@ function sepiaFW_build_ui_cards(){
17901797
Cards.youTubePlayerIsOnHold = function(){
17911798
return youTubePlayerIsOnHold;
17921799
}
1793-
Cards.youTubePlayerControls = function(cmd){
1800+
Cards.youTubePlayerControls = function(cmd, playerId){
17941801
//reset some stuff first
17951802
youTubePlayerIsOnHold = false; //NOTE: we assume any interaction with the player resets this to false
1803+
youTubePlayerStopRequested = false;
17961804
clearTimeout(youTubePlayConfirmTimer);
17971805

1798-
if (youTubeLastActivePlayerId && youTubeLastActivePlayerState > 0){
1799-
var $player = $('#' + youTubeLastActivePlayerId);
1806+
var playerState = (playerId)? 2 : Cards.youTubePlayerGetState(); //NOTE: since we cannot read states of arbitrary players we need to assume 2 here
1807+
if (playerId || (youTubeLastActivePlayerId && youTubeLastActivePlayerState > 0)){
1808+
var $player = (playerId)? $('#' + playerId) : $('#' + youTubeLastActivePlayerId);
18001809
if ($player.length == 0){
18011810
return 0;
18021811
}else{
1812+
SepiaFW.debug.info("Cards - YouTube: sending command: " + cmd);
18031813
if (cmd == "stop" || cmd == "pause"){
18041814
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'pauseVideo'}), "*"); //NOTE: we use pause for now because stop triggers next video
1815+
youTubePlayerStopRequested = true;
18051816
return 1;
1806-
}else if (cmd == "resume" && Cards.youTubePlayerGetState() == 2){
1817+
}else if (cmd == "resume" && playerState == 2){
18071818
$player[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'playVideo'}), "*");
18081819
return 1;
18091820
}else if (cmd == "next"){
@@ -1827,7 +1838,7 @@ function sepiaFW_build_ui_cards(){
18271838
},
18281839
onFadeOutRequest: function(force){
18291840
//TODO: check if player is playing
1830-
if (Cards.youTubePlayerGetState() == 1){
1841+
if (Cards.youTubePlayerGetState() == 1 && !youTubePlayerStopRequested){
18311842
Cards.youTubePlayerControls("pause");
18321843
youTubePlayerIsOnHold = true;
18331844
return true;

0 commit comments

Comments
 (0)