media-player (wip, alpha2); some code optimizations;

Author: fquirin

www/css/sepiaFW-cards.css

@@ -405,12 +405,15 @@
 .sepiaFW-cards-flexSize-container.sepia-embedded-player-card {
 	margin-bottom: 10px;
 }
-.sepiaFW-cards-flexSize-container .sepiaFW-embedded-player-container iframe {
+.sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer {
+	position: relative;
+}
+.sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer iframe {
 	border: 0;
 	border-radius: 3px;
 	transition: height .3s;
 }
-.sepiaFW-cards-flexSize-container .sepiaFW-embedded-player-container .cardItemOverlay {
+.sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer .cardItemOverlay {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -422,7 +425,7 @@
 	justify-content: center;
 	align-items: center;
 }
-.sepiaFW-cards-flexSize-container .sepiaFW-embedded-player-container .cardItemOverlay p {
+.sepiaFW-cards-flexSize-container .cardBodyItem.embeddedWebPlayer .cardItemOverlay p {
 	animation: sepiaFW-animation-blink 3s infinite;
 }
 

www/css/sepiaFW-frames.css

@@ -195,7 +195,7 @@
 }
 .sepiaFW-frames-page .group .set-button {
 	margin: 0 8px !important; 
-	min-width: 56px;
+	min-width: 36px;
 	flex: 0 0 auto;
 }
 .sepiaFW-frames-page .group .trigger-button {

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

@@ -11,6 +11,7 @@ function sepiaFW_build_ui_cards_embed(){
 	- Implement async. callback with msgId and timeout
 	*/
 	var playerWidgets = {
+		default: "<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"
@@ -76,7 +77,7 @@ function sepiaFW_build_ui_cards_embed(){
 
 	//MediaPlayer interface
 	Embed.MediaPlayer = function(options){
-		if (!options || !options.parentElement || !options.widgetUrl){
+		if (!options || !options.parentElement || !(options.widgetUrl || options.widget)){
 			SepiaFW.debug.error("Embedded MediaPlayer - Invalid options!");
 			return;
 		}
@@ -89,12 +90,12 @@ function sepiaFW_build_ui_cards_embed(){
 		}
 
 		//Widget URL
-		options.widgetUrl = SepiaFW.config.replacePathTagWithActualPath(options.widgetUrl);
-		console.error("URL", options.widgetUrl);	//DEBUG
-		//<custom_data>/embedded-player.html
+		var widgetUrl = options.widgetUrl || playerWidgets[options.widget];
+		widgetUrl = SepiaFW.config.replacePathTagWithActualPath(widgetUrl);
+		console.error("URL", widgetUrl);	//DEBUG
 
 		//Create card (DOM element)
-		var mpObj = createMediaPlayerDomElement(playerId, options.widgetUrl, function(){
+		var mpObj = createMediaPlayerDomElement(playerId, widgetUrl, function(){
 			//on-load
 			console.error("on-load", playerId);		//DEBUG
 			sendEvent({text: "World Hello"});

www/scripts/sepiaFW.ui.cards.js

@@ -1227,8 +1227,13 @@ function sepiaFW_build_ui_cards(){
 				//default link icon
 				leftElement = "<div class='itemLeft linkCardLogo'>" + "<i class='material-icons md-mnu'>link</i>" + "</div>";	//language
 			}else if (data.type == "musicSearch" || data.type == "videoSearch"){
-				//we could check the brand here: data.brand, e.g. Spotify, YouTube, ...
-				linkCardEle.className += (" " + data.brand);
+				//default music icon
+				if (!linkLogo){
+					leftElement = "<div class='itemLeft linkCardLogo'>" + "<i class='material-icons md-mnu'>music_video</i>" + "</div>";
+				}else if (data.brand && data.brand != "default"){
+					//we could check the brand here: data.brand, e.g. Spotify, YouTube, ...
+					linkCardEle.className += (" " + data.brand);
+				}
 			}
 		}else if (!linkLogo){
 			//default link icon
@@ -1261,16 +1266,22 @@ function sepiaFW_build_ui_cards(){
 		cardBody.appendChild(linkCardEle);
 
 		//Experimenting with web players - note: use data.embedded ?
-		var embedWebPlayer = Cards.canEmbedWebPlayer(data.brand) && linkUrl && data.type && (data.type == "musicSearch" || data.type == "videoSearch");
+		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
-			if (data.brand == "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();
@@ -2156,6 +2167,13 @@ function sepiaFW_build_ui_cards(){
 		});
 		cardBody.appendChild(cardEle);
 	}
+	function addEmbeddedPlayerToCard(cardBody, type, data){
+		//cardBody class should be -> 'sepiaFW-embedded-player-container'
+		var player = new SepiaFW.ui.cards.embed.MediaPlayer({
+			parentElement: cardBody,
+			widget: "default"
+		});
+	}
 
 	//-- Plot cards --
 

www/scripts/sepiaFW.ui.js

@@ -1437,6 +1437,52 @@ function sepiaFW_build_ui(){
 		messagePopupAutoActionTry = 0;
 	}
 
+	//Create basic input popup
+	UI.showInputPopup = function(infoContent, inputLabel, 
+			inputCallback, abortCallback, buttonLabel1, buttonLabel2){
+		return SepiaFW.ui.showPopup(infoContent, {
+			inputLabelOne: inputLabel || "Input",
+			buttonOneName: buttonLabel1 || SepiaFW.local.g('ok'),
+			buttonOneAction: function(btn, inputVal1){
+				if (inputCallback) inputCallback(inputVal1);
+			},
+			buttonTwoName: buttonLabel2 || SepiaFW.local.g('abort'),
+			buttonTwoAction: function(btn, inputVal1){
+				if (abortCallback) abortCallback(inputVal1);
+			}
+		});
+	}
+
+	//Create a special select popup
+    UI.showSelectPopup = function(textInfo, selectOptions, selectCallback, abortCallback){
+        var text = document.createElement("p");
+        text.textContent = textInfo || "";
+        var selector = document.createElement("select");
+        selector.style.maxWidth = "100%";
+        selectOptions.forEach(function(sel, i){
+            var opt = document.createElement("option");
+            opt.value = sel.value;
+			opt.textContent = sel.text;
+			if (sel.selected) opt.selected = true;
+            selector.appendChild(opt);
+        });
+        var config = {
+            buttonOneName: SepiaFW.local.g('select'),
+            buttonOneAction: function(){
+				var selectedOpt = selector.options[selector.selectedIndex];
+				if (selectCallback) selectCallback(selectedOpt.value, selectedOpt.textContent);
+			},
+            buttonTwoName: SepiaFW.local.g('abort'),
+            buttonTwoAction: function(){
+				if (abortCallback) abortCallback();
+			}
+        };
+        var content = document.createElement("div");
+        content.appendChild(text);
+        content.appendChild(selector);
+        return SepiaFW.ui.showPopup(content, config);
+    }
+
 	//Use pop-up to ask for permission
 	UI.askForPermissionToExecute = function(question, allowedCallback, refusedCallback){
 		var request = SepiaFW.local.g('allowedToExecuteThisCommand') + "<br>" + question;
@@ -1456,7 +1502,7 @@ function sepiaFW_build_ui(){
 	UI.askForConfirmation = function(question, allowedCallback, refusedCallback, alternativeCallback, alternativeLabel){
 		var config = {
 			buttonOneName: SepiaFW.local.g('ok'),
-			buttonOneAction : function(){
+			buttonOneAction: function(){
 				//yes
 				if (allowedCallback) allowedCallback();
 			},

www/scripts/sepiaFW.wakeWordSettings.js

@@ -108,33 +108,23 @@ function sepiaFW_build_wake_word_settings() {
 
     //Select engine file URL
     WakeWordSettings.engineFileUrlPopup = function(){
-        var text = document.createElement("p");
-        text.textContent = "Suggestions for engine file URLs. Adapt as required. Note: <...> parts are special tags that the client will convert automatically.";
-        var selector = document.createElement("select");
-        selector.style.maxWidth = "100%";
         var suggestedEngineFolder = (SepiaFW.wakeTriggers.engine || "porcupine").toLowerCase();
-        [{info: "SEPIA Server (self-hosted)", url: "<assist_server>/files/wake-words/" + suggestedEngineFolder + "/"},
-         {info: "Device (local app folder or filesystem)", url: "<custom_data>/" + suggestedEngineFolder + "/"},
-         {info: "SEPIA Website (public URL)", url: "<sepia_website>/files/" + suggestedEngineFolder + "/"},
-         {info: "Any Website with SSL (public URL)", url: "https://..."}
-        ].forEach(function(sugg, i){
-            var opt = document.createElement("option");
-            opt.value = sugg.url;
-            opt.textContent = sugg.info;
-            selector.appendChild(opt);
-        });
-        var config = {
-            buttonOneName : SepiaFW.local.g('select'),
-            buttonOneAction : function(){
-                $("#sepiaFW-wake-word-remote-url").val(selector.value);
-            },
-            buttonTwoName : SepiaFW.local.g('abort'),
-            buttonTwoAction : function(){}
-        };
-        var content = document.createElement("div");
-        content.appendChild(text);
-        content.appendChild(selector);
-        SepiaFW.ui.showPopup(content, config);
+        var currentVal = $("#sepiaFW-wake-word-remote-url").val();
+        var selectOptions = [
+            {text: "SEPIA Server (self-hosted)", value: "<assist_server>/files/wake-words/" + suggestedEngineFolder + "/"},
+            {text: "Device (local app folder or filesystem)", value: "<custom_data>/" + suggestedEngineFolder + "/"},
+            {text: "SEPIA Website (public URL)", value: "<sepia_website>/files/" + suggestedEngineFolder + "/"},
+            {text: "Any Website with SSL (public URL)", value: "https://..."}
+        ];
+        selectOptions.forEach(function(o){ if (o.value == currentVal){ o.selected = true; }});
+        SepiaFW.ui.showSelectPopup(
+            "Suggestions for engine file URLs. Adapt as required. Note: <...> parts are special tags that the client will convert automatically.", 
+            selectOptions, 
+            function(val, tex){
+                $("#sepiaFW-wake-word-remote-url").val(val);
+            }, 
+            function(){}
+        );
     }
 
     //Select keyword pop-up
@@ -143,32 +133,28 @@ function sepiaFW_build_wake_word_settings() {
             SepiaFW.ui.showPopup("Please load engine first to get a list of available wake-words.");
             return;
         }
+        var currentVal = $("#sepiaFW-wake-word-name").val();
+        var selectOptions = [
+            {text: "Default", value: ""}
+        ];
         var akw = SepiaFW.wakeTriggers.getAvailableWakeWords() || {};
-        var text = document.createElement("p");
-        text.textContent = "Choose your wake-word:";
-        var selector = document.createElement("select");
-        selector.innerHTML = '<option value=\'{"v": "", "kw": ""}\'>Default</option>';
-        Object.keys(akw).forEach(function(kw, i){
-            var opt = document.createElement("option");
-            opt.value = JSON.stringify({v: akw[kw], kw: kw});
-            opt.textContent = kw + " (v" + akw[kw] + ")";
-            selector.appendChild(opt);
+        Object.keys(akw).forEach(function(kw){
+            selectOptions.push({
+                text: (kw + " (v" + akw[kw] + ")"), 
+                value: JSON.stringify({v: akw[kw], kw: kw}),
+                selected: (currentVal == kw)
+            });
         });
-        var config = {
-            buttonOneName : SepiaFW.local.g('select'),
-            buttonOneAction : function(){
-                //select
-                var vkw = JSON.parse(selector.value);
+        SepiaFW.ui.showSelectPopup(
+            "Choose your wake-word:", 
+            selectOptions, 
+            function(val, tex){
+                var vkw = val? JSON.parse(val) : {v: "", kw: ""};
                 $("#sepiaFW-wake-word-version").val(vkw.v);
                 $("#sepiaFW-wake-word-name").val(vkw.kw);
-            },
-            buttonTwoName : SepiaFW.local.g('abort'),
-            buttonTwoAction : function(){}
-        };
-        var content = document.createElement("div");
-        content.appendChild(text);
-        content.appendChild(selector);
-        SepiaFW.ui.showPopup(content, config);
+            }, 
+            function(){}
+        );
     }
 
     //Test-function for wake-word

www/wake-word-settings.html

@@ -51,7 +51,7 @@ <h3>Wake-Word Settings</h3>
 							title="Paths you can use: empty or '<assist_server>/files/...' (self-hosted), '<custom_data>/...' (device), '<sepia_website>/files/porcupine/' (remote) as shortcuts.">
 					</div>
 					<button class="trigger-button" onclick="SepiaFW.wakeWordSettings.engineFileUrlPopup()"><i class="material-icons md-txt">search</i></button>
-					<button class="set-button" onclick="SepiaFW.wakeWordSettings.storeWakeWordRemoteDownloadUrl()">SET</button>
+					<button class="set-button" onclick="SepiaFW.wakeWordSettings.storeWakeWordRemoteDownloadUrl()"><i class="material-icons md-txt">save</i></button>
 				</div>
 				<div class="group fit expert-setting" id="sepiaFW-wake-word-switcher" style="display: none;">
 					<div class="entry-content">
@@ -60,7 +60,7 @@ <h3>Wake-Word Settings</h3>
 						<input id="sepiaFW-wake-word-name" style="max-width: calc(100% - 80px);" placeholder="Hey SEPIA" value="Hey SEPIA" spellcheck="false">
 					</div>
 					<button class="trigger-button" onclick="SepiaFW.wakeWordSettings.keywordSelectPopup()"><i class="material-icons md-txt">search</i></button>
-					<button class="set-button" onclick="SepiaFW.wakeWordSettings.updateWakeWordFile()">SET</button>
+					<button class="set-button" onclick="SepiaFW.wakeWordSettings.updateWakeWordFile()"><i class="material-icons md-txt">save</i></button>
 				</div>
 				<div class="group fit expert-setting" id="sepiaFW-wake-word-confirm-sound" style="display: none;">
 					<div class="entry-content">
@@ -69,14 +69,14 @@ <h3>Wake-Word Settings</h3>
 							title="Some options: sounds/bleep.mp3, sounds/blob.mp3, sounds/chirp.mp3 (default: coin.mp3)">
 					</div>
 					<button class="trigger-button" onclick="SepiaFW.wakeWordSettings.testMicConfirmationSound()"><i class="material-icons md-txt">play_arrow</i></button>
-					<button class="set-button" onclick="SepiaFW.wakeWordSettings.setMicConfirmationSound()">SET</button>
+					<button class="set-button" onclick="SepiaFW.wakeWordSettings.setMicConfirmationSound()"><i class="material-icons md-txt">save</i></button>
 				</div>
 				<div class="group fit hidden-expert-setting" id="sepiaFW-wake-word-buffer" style="display: none;">
 					<div class="entry-content">
 						<label>Buffer Length:</label>
 						<input id="sepiaFW-wake-word-buffer-length" placeholder="512" value="512" spellcheck="false">
 					</div>
-					<button class="set-button" onclick="SepiaFW.wakeWordSettings.setBufferLength()">SET</button>
+					<button class="set-button" onclick="SepiaFW.wakeWordSettings.setBufferLength()"><i class="material-icons md-txt">save</i></button>
 				</div>
 				<div class="group fit debug-setting" style="display: none; flex-direction: column;">
 					<p>Debug Log &nbsp;<button class="trigger-button" onclick="document.getElementById('sepiaFW-wake-word-audio-info').textContent='';"><i class="material-icons md-txt">delete_sweep</i></button></p>