implementing new media-player widgets (wip, alpha)

Author: fquirin

www/css/sepiaFW-cards.css

@@ -402,10 +402,28 @@
 
 /* --- Embedded Media Player --- */
 
-/* .sepiaFW-cards-flexSize-container.sepia-embedded-player-card {} */
-
+.sepiaFW-cards-flexSize-container.sepia-embedded-player-card {
+	margin-bottom: 10px;
+}
 .sepiaFW-cards-flexSize-container .sepiaFW-embedded-player-container iframe {
-	border: 1px solid #000;
+	border: 0;
+	border-radius: 3px;
+	transition: height .3s;
+}
+.sepiaFW-cards-flexSize-container .sepiaFW-embedded-player-container .cardItemOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #eee;
+	color: #000;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.sepiaFW-cards-flexSize-container .sepiaFW-embedded-player-container .cardItemOverlay p {
+	animation: sepiaFW-animation-blink 3s infinite;
 }
 
 /* --- Time events --- */

www/scripts/sepiaFW.android.js

@@ -13,11 +13,16 @@ function sepiaFW_build_android(){
     Android.musicApps = {
         "system": {name: "System", package: ""},
         "select": {name: "Select", package: ""},
-        "youtube": {name: "YouTube", package: "com.google.android.youtube"},
+        "embedded": {name: "Embedded Player", package: ""},
+        "youtube": {name: "YouTube App", package: "com.google.android.youtube"},
+        "youtube_link": {name: "YouTube Web", package: "com.google.android.youtube"},
+        "youtube_embedded": {name: "YouTube Widget", package: "com.google.android.youtube"},
         "spotify": {name: "Spotify App", package: "com.spotify.music"},
-        "spotify_link": {name: "Spotify URI", package: "com.spotify.music"},
+        "spotify_link": {name: "Spotify Web", package: "com.spotify.music"},
+        "spotify_embedded": {name: "Spotify Widget", 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"},
+        "apple_music_link": {name: "Apple Music Web", package: "com.apple.android.music"},
+        "apple_music_embedded": {name: "Apple Music Widget", 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"},

www/scripts/sepiaFW.app.config.js

@@ -303,11 +303,16 @@ function sepiaFW_build_config(){
 
 	//Collection of universally supported apps and their names
     Config.musicApps = {
-		"youtube": {name: "YouTube"},
-		"spotify_link": {name: "Spotify"},
-		"apple_music_link": {name: "Apple Music"}
+		//NOTE: _link services will skip 'Controls.searchForMusic' action (server will not send it)
+		"embedded": {name: "Embedded Player"},
+		"youtube_link": {name: "YouTube Web"},
+		"youtube_embedded": {name: "YouTube Widget"},
+		"spotify_link": {name: "Spotify Web"},
+		"spotify_embedded": {name: "Spotify Widget"},
+		"apple_music_link": {name: "Apple Music Web"},
+		"apple_music_embedded": {name: "Apple Music Widget"}
     }
-	var defaultMusicApp = "youtube";
+	var defaultMusicApp = "embedded";
 
 	Config.getMusicAppCollection = function(){
 		if (SepiaFW.ui.isAndroid){

www/scripts/sepiaFW.audio.js

@@ -886,7 +886,7 @@ function sepiaFW_build_audio(){
 
 		//console.log("Audio-URL: " + audioURL); 		//DEBUG
 		audioPlayer.src = audioURL;
-		audioPlayer.oncanplay = function() {
+		audioPlayer.oncanplay = function(){
 			SepiaFW.debug.info("AUDIO: can be played now (oncanplay event)");		//debug
 			if (audioPlayer == player){
 				Stream.isPlaying = true;

www/scripts/sepiaFW.client.controls.js

@@ -299,7 +299,7 @@ function sepiaFW_build_client_controls(sepiaSessionId){
             console.log('URI: ' + controlData.uri);
             */
 
-            //Stop other players
+            //Stop other players - TODO: move down?
             Controls.media({
                 action: "stop",
                 skipFollowUp: true

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

@@ -10,6 +10,11 @@ function sepiaFW_build_ui_cards_embed(){
 	- Make sure only one is active
 	- Implement async. callback with msgId and timeout
 	*/
+	var playerWidgets = {
+		spotify: "<assist_server>/widgets/mp-spotify.html",
+		apple_music: "<assist_server>/widgets/mp-apple-music.html",
+		youtube: "<assist_server>/widgets/mp-youtube.html"
+	}
 
 	var activeMediaPlayers = {};
 
@@ -46,7 +51,7 @@ function sepiaFW_build_ui_cards_embed(){
 	//Create media player DOM element
 	function createMediaPlayerDomElement(id, contentUrl, onLoadHandler){
 		//card
-		var mediaPlayerDiv = document.createElement('DIV');
+		var mediaPlayerDiv = document.createElement('div');
 		mediaPlayerDiv.id = id;
 		mediaPlayerDiv.className = "embeddedWebPlayer cardBodyItem fullWidthItem";
 		//iframe
@@ -59,8 +64,13 @@ function sepiaFW_build_ui_cards_embed(){
 		//iframe.allow = ...;
 		//iframe.sandbox = ...;
 		mediaPlayerDiv.appendChild(iframe);
+		//loading overlay
+		var loadOverlay = document.createElement('div');
+		loadOverlay.className = "cardItemOverlay";
+		loadOverlay.innerHTML = "<p>Loading</p>";
+		mediaPlayerDiv.appendChild(loadOverlay);
 		return {
-			card: mediaPlayerDiv, iframe: iframe
+			card: mediaPlayerDiv, iframe: iframe, overlay: loadOverlay
 		}
 	}
 
@@ -100,22 +110,42 @@ function sepiaFW_build_ui_cards_embed(){
 			}, "*");
 		}
 		thisPlayer.eventHandler = function(ev){
-			//TODO: use
 			console.error("ev", playerId, ev);		//DEBUG
+			if (ev.state){
+				stateHandler(ev);
+			}
 		}
 
 		//States
+		var state = 0;	//0: created, 1: ready, 2: playing, 3: paused, 10: error
+
+		function stateHandler(ev){
+			if (ev.state == 1){
+				//on-ready
+				state = ev.state;
+				if (ev.size && ev.size.height){
+					thisPlayer.iframe.style.height = ev.size.height;
+				}
+				setTimeout(function(){ $(mpObj.overlay).remove(); }, 500);
+			}else if (ev.state == 2){
+				//on-play
+				state = ev.state;
+			}else if (ev.state == 3){
+				//on-pause
+				state = ev.state;
+			}else if (ev.state == 10){
+				//on-error
+				state = ev.state;
+			}
+		}
 
 		//Controls - TODO: implement
-		thisPlayer.start = function(doneCallback, errorCallback){
-			sendEvent({controls: "start"});
+		thisPlayer.play = function(doneCallback, errorCallback){
+			sendEvent({controls: "play"});
 		}
 		thisPlayer.pause = function(doneCallback, errorCallback){
 			sendEvent({controls: "pause"});
 		}
-		thisPlayer.resume = function(doneCallback, errorCallback){
-			sendEvent({controls: "resume"});
-		}
 		thisPlayer.fadeOut = function(doneCallback, errorCallback){
 			sendEvent({controls: "fadeOut"});
 		}
@@ -128,6 +158,13 @@ function sepiaFW_build_ui_cards_embed(){
 		thisPlayer.previous = function(doneCallback, errorCallback){
 			sendEvent({controls: "previous"});
 		}
+		thisPlayer.volumeUp = function(doneCallback, errorCallback){
+			sendEvent({controls: "volumeUp"});
+		}
+		thisPlayer.volumeDown = function(doneCallback, errorCallback){
+			sendEvent({controls: "volumeDown"});
+		}
+
 		//stop, release resources and remove handle
 		thisPlayer.release = function(doneCallback, errorCallback){
 

www/scripts/sepiaFW.ui.cards.js

@@ -25,14 +25,15 @@ function sepiaFW_build_ui_cards(){
 	var topIndexZ = 1;			//to get an active element to the top (deprecated?)
 
 	//some specials
+	Cards.canEmbedCustomPlayer = true;
 	Cards.canEmbedYouTube = true;
 	Cards.canEmbedSpotify = false;		//deactivated by default because it only works in desktop and gives no control over start/stop/volume
-	Cards.canEmbedAppleMusic = false;	//"" ""
+	Cards.canEmbedAppleMusic = false;	// "" ""
 	Cards.canEmbedWebPlayer = function(service){
 		if (!service) return false;
-		service = service.toLowerCase().replace(/\s+/,"_"); 		//support brands too
-		if (service.indexOf("custom_embedded") == 0){
-			return true;
+		service = service.toLowerCase().replace(/\s+/, "_"); 		//support brands too
+		if (service.indexOf("embedded") == 0){
+			return Cards.canEmbedCustomPlayer;
 		}else if (service.indexOf("spotify") == 0){
 			return Cards.canEmbedSpotify;
 		}else if (service.indexOf("apple_music") == 0){
@@ -45,7 +46,7 @@ function sepiaFW_build_ui_cards(){
 	}
 	Cards.getSupportedWebPlayers = function(){
 		var players = [];
-		players.push("custom_embedded");
+		if (Cards.canEmbedCustomPlayer) players.push("embedded");
 		if (Cards.canEmbedYouTube) players.push("youtube");
 		if (Cards.canEmbedSpotify) players.push("spotify");
 		if (Cards.canEmbedAppleMusic) players.push("apple_music");
@@ -2131,14 +2132,14 @@ function sepiaFW_build_ui_cards(){
 			parentElement: cardBody,
 			widgetUrl: widgetUrl
 		});
-		var cardEle = document.createElement('DIV');
+		var cardEle = document.createElement('div');
 		cardEle.className = 'cardBodyItem radioStation';	//lazy styling: use radioStation
 		var buttons = [{
 			icon: "skip_previous",
 			fun: player.previous
 		},{
 			icon: "play_arrow",
-			fun: player.start
+			fun: player.play
 		},{
 			icon: "pause",
 			fun: player.pause
@@ -2147,7 +2148,7 @@ function sepiaFW_build_ui_cards(){
 			fun: player.next
 		}];
 		buttons.forEach(function(b){
-			var btn = document.createElement('DIV');
+			var btn = document.createElement('div');
 			btn.className = "itemLeft radioLeft";
 			btn.innerHTML = "<i class='material-icons md-mnu'>" + b.icon + "</i>";
 			$(btn).on("click", b.fun);