youtube web-player beta; allowWebPlayer hidden btn; skin tweaks;

fquirin · fquirin · commit ebe0f34d8dd9 · 2019-05-23T16:01:05.000+02:00
diff --git a/www/css/sepiaFW-skin-canary-dark.css b/www/css/sepiaFW-skin-canary-dark.css
@@ -133,7 +133,8 @@ html {
 	background: #040404;
 	max-width: none;
 }
-#sepiaFW-chat-controls-more-menu button {
+#sepiaFW-chat-controls-more-menu button,
+.sepiaFW-touch-device #sepiaFW-chat-controls-more-menu button:hover {
 	background: #F4F4F4;
 	color: #040404;
 }
diff --git a/www/css/sepiaFW-skin-neo-sepia-dark.css b/www/css/sepiaFW-skin-neo-sepia-dark.css
@@ -116,7 +116,8 @@ html {
 	background: #101418;
 	max-width: none;
 }
-#sepiaFW-chat-controls-more-menu button {
+#sepiaFW-chat-controls-more-menu button,
+.sepiaFW-touch-device #sepiaFW-chat-controls-more-menu button:hover {
 	background: #beff1a;
 	color: #101418;
 }
diff --git a/www/css/sepiaFW-skin-spot.css b/www/css/sepiaFW-skin-spot.css
@@ -130,7 +130,8 @@ html {
 	background: #111111;
 	max-width: none;
 }
-#sepiaFW-chat-controls-more-menu button {
+#sepiaFW-chat-controls-more-menu button,
+.sepiaFW-touch-device #sepiaFW-chat-controls-more-menu button:hover {
 	background: #F4F4F4;
 	color: #111111;
 }
diff --git a/www/scripts/sepiaFW.android.js b/www/scripts/sepiaFW.android.js
@@ -18,9 +18,9 @@ function sepiaFW_build_android(){
         "spotify_link": {name: "Spotify URI", package: "com.spotify.music"},
         "apple_music": {name: "Apple Music App", package: "com.apple.android.music"},
         "apple_music_link": {name: "Apple Music URI", package: "com.apple.android.music"},
-        "amazon_music": {name: "Amazon Music", package: "com.amazon.mp3"},
-        "soundcloud": {name: "SoundCloud", package: "com.soundcloud.android"},
-        "deezer": {name: "Deezer", package: "deezer.android.app"},
+        //"amazon_music": {name: "Amazon Music", package: "com.amazon.mp3"},
+        //"soundcloud": {name: "SoundCloud", package: "com.soundcloud.android"},
+        //"deezer": {name: "Deezer", package: "deezer.android.app"},
         "vlc_media_player": {name: "VLC", package: "org.videolan.vlc"}
     }
     Android.musicAppsThatBehaveByPackage = {
diff --git a/www/scripts/sepiaFW.client.controls.js b/www/scripts/sepiaFW.client.controls.js
@@ -193,8 +193,14 @@ function sepiaFW_build_client_controls(){
                 SepiaFW.audio.stop(SepiaFW.audio.getMusicPlayer());    
             }
 
+            //Embedded Player
+            if (SepiaFW.ui.cards.allowWebPlayer || controlData.service.indexOf("_embedded") > 0){
+                //just skip, cards will do the rest...
+                //YouTube
+                //if (controlData.service.indexOf("youtube") == 0){}
+
             //Android Intent music search
-            if (SepiaFW.ui.isAndroid && (!controlData.service || controlData.service.indexOf("_link") == -1)){
+            }else if (SepiaFW.ui.isAndroid && (!controlData.service || controlData.service.indexOf("_link") == -1)){
                 var allowSpecificService = true;
                 SepiaFW.android.startMusicSearchActivity(controlData, allowSpecificService, function(err){
                     //error callback
diff --git a/www/scripts/sepiaFW.ui.actions.js b/www/scripts/sepiaFW.ui.actions.js
@@ -164,7 +164,8 @@ function sepiaFW_build_ui_actions(){
 				|| (url.indexOf('http') !== 0 && !!url.match(/^\w+:/)) 		//TODO: keep an eye on this! Does it prevent some cool URL scheme features?
 				|| url.indexOf('https://maps.') === 0 || url.indexOf('http://maps.') === 0
 				|| url.indexOf('https://www.google.com/maps/') === 0 || url.indexOf('https://www.google.de/maps/') === 0
-				|| url.indexOf('https://itunes.apple.com/') === 0
+				|| url.indexOf('https://itunes.apple.com/') === 0 || url.indexOf('https://music.apple.com/') === 0 || url.indexOf('https://geo.itunes.apple.com/') === 0
+				|| url.indexOf('https://open.spotify.com/') === 0
 				){
 				cordova.InAppBrowser.open(url, '_system');
 			}else{
@@ -175,7 +176,7 @@ function sepiaFW_build_ui_actions(){
 			var newWindow = window.open(url, '_blank');
 			newWindow.opener = null;
 			//some special links that should not leave an empty browser tab
-			if (url.indexOf('spotify:') == 0){
+			if (url.indexOf('spotify:') == 0 || url.indexOf('itmss:') == 0 || url.indexOf('musics:') == 0){
 				setTimeout(function(){
 					newWindow.close(); 		//NOTE: problem here is that app-request dissapears before user interaction if not already allowed by user
 				}, 500);
diff --git a/www/scripts/sepiaFW.ui.build.js b/www/scripts/sepiaFW.ui.build.js
@@ -541,7 +541,9 @@ function sepiaFW_build_ui_build(){
 						+ "<span>" + "CLEXI ID" + ": </span>"
 						+ "<input id='sepiaFW-menu-clexi-server-id' type='url' spellcheck='false'>"
 					+ "</li>"
-					+ "<li id='sepiaFW-menu-select-music-app-li' title='Select default music app for search intents.'><span>Default music app: </span></li>"
+					+ "<li id='sepiaFW-menu-select-music-app-li' title='Select default music app for search intents.'>"
+						+ "<span>Default music app: </span></li>"
+						//+ "<span id='sepiaFW-menu-toggle-music-cards-btn'><i class='material-icons'>art_track</i></span>"
 					+ "<li id='sepiaFW-menu-administration-li'>"
 						+ "<button id='sepiaFW-menu-ui-dataprivacy-btn'>" + SepiaFW.local.g('data_privacy') + "</button>"
 						+ "<button id='sepiaFW-menu-ui-license-btn'>" + SepiaFW.local.g('license') + "</button>"
@@ -772,6 +774,19 @@ function sepiaFW_build_ui_build(){
 			
 			//Music app selector
 			document.getElementById('sepiaFW-menu-select-music-app-li').appendChild(Build.musicAppSelector(SepiaFW.config.getMusicAppCollection()));
+			SepiaFW.ui.onShortLongPress($('#sepiaFW-menu-select-music-app-li').find('span').first()[0], function(){
+				//Short press
+			}, function(){
+				//Long press
+				if (SepiaFW.ui.cards.allowWebPlayer){
+					SepiaFW.ui.cards.allowWebPlayer = false;
+					SepiaFW.ui.showPopup("Music Cards deactivated");
+				}else{
+					SepiaFW.ui.cards.allowWebPlayer = true;
+					SepiaFW.ui.showPopup("Music Cards activated (for debugging)");
+				}				
+			}, true);
+			//$('#sepiaFW-menu-toggle-music-cards-btn').off().on('click', function(){});
 
 			//Wake-word stuff - Hey SEPIA
 			if (!SepiaFW.wakeTriggers){
diff --git a/www/scripts/sepiaFW.ui.cards.js b/www/scripts/sepiaFW.ui.cards.js
@@ -989,6 +989,7 @@ function sepiaFW_build_ui_cards(){
 	//LINK
 
 	var currentLinkItemId = 0;
+	var youTubeMessageListenerExists = false;
 	
 	function buildLinkElement(cardElementInfo){
 		var newId = ("sepiaFW-card-id-" + Cards.currentCardId++);
@@ -1035,28 +1036,67 @@ function sepiaFW_build_ui_cards(){
 		//linkCardEle.setAttribute('data-element', JSON.stringify(cardElementInfo));
 		cardBody.appendChild(linkCardEle);
 
-		//Experimenting with Spotify Web Player
-		if (!SepiaFW.ui.isMobile && data.type && data.type == "musicSearch" && data.brand == "Spotify" && linkUrl){
-			if (Cards.allowWebPlayer){
+		//Experimenting with web players
+		if (Cards.allowWebPlayer || data.embedded){
+			//Spotify
+			if (data.type && data.type == "musicSearch" && data.brand == "Spotify" && linkUrl){
 				var webPlayerDiv = document.createElement('DIV');
-				webPlayerDiv.className = "spotifyWebPlayer cardBodyItem fullWidthItem"
-				var contentUrl = "https://" + linkUrl.replace("spotify:", "open.spotify.com/embed/").replace(":play", "").replace(/:/g, "/").trim();
+				webPlayerDiv.className = "spotifyWebPlayer cardBodyItem fullWidthItem";
+				var contentUrl = linkUrl.replace("spotify:", "https://open.spotify.com/embed/").replace(":play", "").replace(/:/g, "/").trim();
 				webPlayerDiv.innerHTML = '<iframe src="' + contentUrl + '" width="100%" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>';
 				cardBody.appendChild(webPlayerDiv);
-			}
-		}else if (!SepiaFW.ui.isMobile && data.type && data.type == "musicSearch" && data.brand == "Apple Music" && linkUrl){
-			if (Cards.allowWebPlayer){
+			//Apple Music
+			}else if (data.type && data.type == "musicSearch" && data.brand == "Apple Music" && linkUrl){
 				var webPlayerDiv = document.createElement('DIV');
-				webPlayerDiv.className = "appleMusicWebPlayer cardBodyItem fullWidthItem"
+				webPlayerDiv.className = "appleMusicWebPlayer cardBodyItem fullWidthItem";
 				webPlayerDiv.innerHTML = '<iframe '
 					+ 'allow="autoplay *; encrypted-media *;" frameborder="0" height="150" '
 					+ 'style="width:100%;max-width:660px;overflow:hidden;background:transparent;" '
 					+ 'sandbox="allow-forms allow-popups allow-same-origin allow-scripts ' 
 						+ ((SepiaFW.ui.isSafari)? 'allow-storage-access-by-user-activation' : '')
 						+ ' allow-top-navigation-by-user-activation" '
-					+ 'src="' + linkUrl.replace("itunes.", "embed.music.") + '">'
+					+ 'src="' + linkUrl.replace(/^https:\/\/.*?\//, "https://embed.music.apple.com/") + '">'
 				+ '</iframe>';
 				cardBody.appendChild(webPlayerDiv);
+			//YouTube - TODO: improve server-side to give brand and correct URL and return data.embedded
+			}else if (linkUrl.indexOf('youtube')){
+				var webPlayerDiv = document.createElement('DIV');
+				var playerId = currentLinkItemId++;
+				webPlayerDiv.className = "youTubeWebPlayer cardBodyItem fullWidthItem"
+				var f = document.createElement('iframe');
+				f.id = 'youTubeWebPlayer-' + playerId;
+				f.allow = "autoplay; encrypted-media;";
+				f.frameBorder = 0;
+				f.style.width = "100%";		f.style.height = "280px";		f.style.overflow = "hidden";
+				f.style.border = "4px solid";	f.style.borderColor = "#212121";
+				f.onload = function(){
+					//API
+					if (!youTubeMessageListenerExists){
+						youTubeMessageListenerExists = true;
+						window.addEventListener('message', function(e){
+							if (e.origin == "https://www.youtube.com" && e.data && typeof e.data == "string" && e.data.indexOf("{") == 0){
+								var data = JSON.parse(e.data);
+								if (data && data.id){
+									//f.contentWindow.postMessage(JSON.stringify({event:'command', func:'stopVideo'}), "*"); //playVideo, paus.., stop.., next..,
+									if (data.event == 'onReady'){
+										$('#' + data.id)[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'playVideo'}), "*");
+									}else if (data.event == 'infoDelivery' && data.info && data.info.playerState == -1){
+										//console.log(JSON.stringify(data));
+										//TODO: sometimes fails AND should not end up in an endless loop!
+										if (data.info.availableQualityLevels.length == 0){
+											$('#' + data.id)[0].contentWindow.postMessage(JSON.stringify({event:'command', func:'nextVideo'}), "*");
+										}
+									}
+								}
+							}
+						});
+					}
+					f.contentWindow.postMessage(JSON.stringify({event:'listening', id: f.id}), "*");
+				};
+				//https://www.youtube.com/results?search_query=purple+haze%2C+jimi+hendrix
+				f.src = "https://www.youtube.com/embed?autoplay=1&enablejsapi=1&listType=search&list=" + linkUrl.replace(/.*?search_query=/, "").trim();
+				cardBody.appendChild(webPlayerDiv);
+				webPlayerDiv.appendChild(f);
 			}
 		}
 		
@@ -1348,7 +1388,7 @@ function sepiaFW_build_ui_cards(){
 									var $scrollContainer = $container.closest('.sepiaFW-results-container');
 									var y = $scrollContainer.scrollTop(); 
 									$scrollContainer.animate({ scrollTop: y + 60 }, animTime);
-								}, animTime);
+								}, animTime + 50);
 							}
 						}
 					}

Original file line number	Diff line number	Diff line change
`@@ -133,7 +133,8 @@ html {`
`133`	`133`	`background: #040404;`
`134`	`134`	`max-width: none;`
`135`	`135`	`}`
`136`		`-#sepiaFW-chat-controls-more-menu button {`
	`136`	`+#sepiaFW-chat-controls-more-menu button,`
	`137`	`+.sepiaFW-touch-device #sepiaFW-chat-controls-more-menu button:hover {`
`137`	`138`	`background: #F4F4F4;`
`138`	`139`	`color: #040404;`
`139`	`140`	`}`
Original file line number	Diff line number	Diff line change
`@@ -116,7 +116,8 @@ html {`
`116`	`116`	`background: #101418;`
`117`	`117`	`max-width: none;`
`118`	`118`	`}`
`119`		`-#sepiaFW-chat-controls-more-menu button {`
	`119`	`+#sepiaFW-chat-controls-more-menu button,`
	`120`	`+.sepiaFW-touch-device #sepiaFW-chat-controls-more-menu button:hover {`
`120`	`121`	`background: #beff1a;`
`121`	`122`	`color: #101418;`
`122`	`123`	`}`
Original file line number	Diff line number	Diff line change
`@@ -130,7 +130,8 @@ html {`
`130`	`130`	`background: #111111;`
`131`	`131`	`max-width: none;`
`132`	`132`	`}`
`133`		`-#sepiaFW-chat-controls-more-menu button {`
	`133`	`+#sepiaFW-chat-controls-more-menu button,`
	`134`	`+.sepiaFW-touch-device #sepiaFW-chat-controls-more-menu button:hover {`
`134`	`135`	`background: #F4F4F4;`
`135`	`136`	`color: #111111;`
`136`	`137`	`}`