media-player widgets (wip, alpha2)

Author: fquirin

www/css/sepiaFW-cards.css

@@ -419,12 +419,19 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: #eee;
+	margin: 5px 5px 0 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 5px);
+	background: #dfdfdf;
 	color: #000;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
+.dark-skin .sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer .cardItemOverlay {
+	background: #212327;
+    color: #eee;
+}
 .sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer .cardItemOverlay p {
 	animation: sepiaFW-animation-blink 3s infinite;
 }

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

@@ -12,6 +12,7 @@ function sepiaFW_build_ui_cards_embed(){
 	*/
 	var playerWidgets = {
 		default: "<assist_server>/widgets/mp-default.html",
+		embedded: "<assist_server>/widgets/mp-default.html",
 		spotify: "<assist_server>/widgets/mp-spotify.html",
 		apple_music: "<assist_server>/widgets/mp-apple-music.html",
 		youtube: "<assist_server>/widgets/mp-youtube.html"
@@ -50,19 +51,26 @@ function sepiaFW_build_ui_cards_embed(){
 	});
 
 	//Create media player DOM element
-	function createMediaPlayerDomElement(id, contentUrl, onLoadHandler){
+	function createMediaPlayerDomElement(id, contentUrl, isTrusted, onLoadHandler){
 		//card
 		var mediaPlayerDiv = document.createElement('div');
 		mediaPlayerDiv.id = id;
 		mediaPlayerDiv.className = "embeddedWebPlayer cardBodyItem fullWidthItem";
 		//iframe
+		var allowIframe;
+		//Info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#the_iframe_allow_attribute
+		if (isTrusted){
+			allowIframe = 'autoplay *; encrypted-media *;';
+		}else{
+			allowIframe = 'encrypted-media *;';
+		}
 		var iframe = document.createElement("iframe");
 		iframe.src = contentUrl;
 		iframe.width = "100%";
 		iframe.height = 50; 	//can be set via postMessage interface
 		iframe.allowtransparency = true;
 		iframe.onload = onLoadHandler;
-		//iframe.allow = ...;
+		iframe.allow = allowIframe;
 		//iframe.sandbox = ...;
 		mediaPlayerDiv.appendChild(iframe);
 		//loading overlay
@@ -82,6 +90,7 @@ function sepiaFW_build_ui_cards_embed(){
 			return;
 		}
 		var thisPlayer = this;
+		console.error("TEST", "embedWebPlayer", options);      //DEBUG
 
 		//ID
 		var playerId = getNewMediaPlayerId();
@@ -90,12 +99,20 @@ function sepiaFW_build_ui_cards_embed(){
 		}
 
 		//Widget URL
-		var widgetUrl = options.widgetUrl || playerWidgets[options.widget];
+		var widgetUrl = (options.widgetUrl || playerWidgets[options.widget]).trim();
 		widgetUrl = SepiaFW.config.replacePathTagWithActualPath(widgetUrl);
-		console.error("URL", widgetUrl);	//DEBUG
+		var widgetIsSameOrigin = SepiaFW.tools.isSameOrigin(widgetUrl);
+		var widgetIsSepiaFileHost = SepiaFW.config.urlIsSepiaFileHost(widgetUrl);
+		var widgetIsRemote = (widgetUrl.indexOf("http:") == 0) || (widgetUrl.indexOf("https:") == 0) || (widgetUrl.indexOf("ftp:") == 0);
+		var widgetIsTrusted = widgetIsSameOrigin || widgetIsSepiaFileHost || !widgetIsRemote;
+
+		widgetUrl = SepiaFW.tools.setParameterInURL(widgetUrl, "skinStyle", SepiaFW.ui.getSkinStyle());
+		widgetUrl = SepiaFW.tools.setParameterInURL(widgetUrl, "skinId", SepiaFW.ui.getSkin());
+		
+		console.error("URL", widgetUrl, "isTrusted", widgetIsTrusted);	//DEBUG
 
 		//Create card (DOM element)
-		var mpObj = createMediaPlayerDomElement(playerId, widgetUrl, function(){
+		var mpObj = createMediaPlayerDomElement(playerId, widgetUrl, widgetIsTrusted, function(){
 			//on-load
 			console.error("on-load", playerId);		//DEBUG
 			sendEvent({text: "World Hello"});
@@ -127,7 +144,7 @@ function sepiaFW_build_ui_cards_embed(){
 				if (ev.size && ev.size.height){
 					thisPlayer.iframe.style.height = ev.size.height;
 				}
-				setTimeout(function(){ $(mpObj.overlay).remove(); }, 500);
+				setTimeout(function(){ $(mpObj.overlay).hide(); }, 500);
 			}else if (ev.state == 2){
 				//on-play
 				state = ev.state;

www/scripts/sepiaFW.ui.cards.js

@@ -1266,102 +1266,14 @@ function sepiaFW_build_ui_cards(){
 		cardBody.appendChild(linkCardEle);
 
 		//Experimenting with web players - note: use data.embedded ?
-		console.error("TEST", "embedWebPlayer", data);      //DEBUG
 		var embedWebPlayer = data.type && (data.type == "musicSearch" || data.type == "videoSearch") 
 			&& data.typeData && Cards.canEmbedWebPlayer(data.typeData.service);
 		if (embedWebPlayer){
-			var allowIframe;
-			if (isSafeSource){
-				allowIframe = 'autoplay *; encrypted-media *;';
-			}else{
-				allowIframe = 'encrypted-media *;';
-			}
 			//Embedded player
-			if (data.brand == "default"){
-				addEmbeddedPlayerToCard(cardBody, data.type, data.typeData);
-			
-			//Spotify
-			}else if (data.brand == "Spotify"){
-				var webPlayerDiv = document.createElement('DIV');
-				webPlayerDiv.className = "spotifyWebPlayer embeddedWebPlayer cardBodyItem fullWidthItem";
-				var contentUrl = "https://" + linkUrl.replace("spotify:", "open.spotify.com/embed/").replace(":play", "").replace(/:/g, "/").trim();
-				webPlayerDiv.innerHTML = '<iframe '
-					+ 'src="" width="100%" height="80" frameborder="0" allowtransparency="true" '
-					+ 'allow="' + allowIframe + '" '
-					+ 'sandbox="allow-forms allow-popups allow-same-origin allow-scripts" ' + '>'
-				+ '</iframe>';
-				$(webPlayerDiv).find("iframe").attr("src", contentUrl);
-				cardBody.appendChild(webPlayerDiv);
-			//Apple Music
-			}else if (data.brand == "Apple Music"){
-				var webPlayerDiv = document.createElement('DIV');
-				webPlayerDiv.className = "appleMusicWebPlayer embeddedWebPlayer cardBodyItem fullWidthItem";
-				var contentUrl;
-				if (linkUrl.indexOf("/artist/") > 0){
-					contentUrl = linkUrl.replace(/^https:\/\/.*?\//, "https://geo.itunes.apple.com/");
-				}else{
-					contentUrl = linkUrl.replace(/^https:\/\/.*?\//, "https://embed.music.apple.com/");
-				}
-				webPlayerDiv.innerHTML = '<iframe '
-					+ 'allow="' + allowIframe + '" '
-					+ '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="">'
-				+ '</iframe>';
-				$(webPlayerDiv).find("iframe").attr("src", contentUrl);
-				cardBody.appendChild(webPlayerDiv);
-			//YouTube
-			}else if (data.brand == "YouTube"){
-				//console.log('YouTube');				//DEBUG
-				var webPlayerDiv = document.createElement('DIV');
-				var playerId = currentLinkItemId++;
-				webPlayerDiv.className = "youTubeWebPlayer embeddedWebPlayer cardBodyItem fullWidthItem"
-				var f = document.createElement('iframe');
-				f.id = 'youTubeWebPlayer-' + playerId;
-				f.allow = allowIframe;
-				f.sandbox = "allow-same-origin allow-scripts allow-presentation allow-popups"; 
-				f.frameBorder = 0;
-				f.style.width = "100%";		f.style.height = "280px";		f.style.overflow = "hidden";
-				f.style.border = "4px solid";	f.style.borderColor = "#212121";
-				if (data.autoplay){
-					//console.log('add controls');		//DEBUG
-					if (isSafeSource){
-						//stop all previous audio first
-						if (SepiaFW.client.controls){
-							SepiaFW.client.controls.media({
-								action: "stop",
-								skipFollowUp: true
-							});
-						}else{
-							SepiaFW.audio.stop();
-						}
-						//add controls and start
-						addYouTubeControls(f, true);
-					}else{
-						//add controls only
-						addYouTubeControls(f, false);
-					}
-				}else{
-					//add controls only
-					addYouTubeControls(f, false);
-				}
-				if (linkUrl.indexOf("/embed") < 0){
-					//convert e.g.: https://www.youtube.com/results?search_query=purple+haze%2C+jimi+hendrix
-					f.src = "https://www.youtube.com/embed?autoplay=1&enablejsapi=1&playsinline=1&iv_load_policy=3&fs=1&listType=search&list=" 
-						+ linkUrl.replace(/.*?search_query=/, "").trim();
-				}else{
-					f.src = linkUrl; 				 		//TODO: fix URL security
-				}
-				if (!isSafeSource){
-					//remove autoplay flag
-					f.src = f.src.replace("autoplay=1", "autoplay=0");
-				}
-				cardBody.appendChild(webPlayerDiv);
-				webPlayerDiv.appendChild(f);
-			}
+			addEmbeddedPlayerToCard(cardBody, data.type, data.typeData, isSafeSource, {
+				brand: data.brand,
+				autoplay: data.autoplay
+			});
 		}
 
 		//link button(s)
@@ -2167,12 +2079,18 @@ function sepiaFW_build_ui_cards(){
 		});
 		cardBody.appendChild(cardEle);
 	}
-	function addEmbeddedPlayerToCard(cardBody, type, data){
-		//cardBody class should be -> 'sepiaFW-embedded-player-container'
+	function addEmbeddedPlayerToCard(cardBody, type, data, isSafeSource, options){
+		if (!options) options = {};
+		//type: musicSearch, videoSearch (currently same)
+		var widget = data.service? data.service.split("_")[0] : "default";
 		var player = new SepiaFW.ui.cards.embed.MediaPlayer({
 			parentElement: cardBody,
-			widget: "default"
+			widget: widget,
+			autoplay: options.autoplay,
+			safeRequest: isSafeSource, 	//came from assistant or private channel?
+			brand: options.brand
 		});
+		return player;
 	}
 
 	//-- Plot cards --