cleaned up some frame and widgets stuff + more offline tests

Author: fquirin

www/scripts/sepiaFW.frames.js

@@ -224,6 +224,7 @@ function sepiaFW_build_frames(){
 		//Error
 		}, function(){
 			$('#sepiaFW-frames-view').html("Error - could not load page");
+			SepiaFW.ui.showInfo("Custom view failed to load. URL: " + framePage, true);
 		});
 	}
 

www/scripts/sepiaFW.offline.js

@@ -85,7 +85,7 @@ function sepiaFW_build_offline(){
 		data.desc = description || "Click to open";
 		if (!url) url = "https://sepia-framework.github.io/app/search.html";
 		/* other data content e.g.:
-		"type": "musicSearch",
+		"type": "musicSearch",		//default, custom, websearch, musicSearch, videoSearch
 		"brand": "Spotify"
 		*/
 		data.type = imageUrl? "custom" : "default";
@@ -102,7 +102,8 @@ function sepiaFW_build_offline(){
 				"url": url
 			}]
 		};
-		return cardInfoItem;		//NOTE: it is ONE ITEM of the cardInfo-array! To build use e.g. [getLinkCard(...)]
+		return cardInfoItem;
+		//NOTE: it is ONE ITEM of the cardInfo-array! To build use e.g. [getLinkCard(...)]
 	}
 
 	//------------------ custom buttons -------------------

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

@@ -20,11 +20,11 @@ function sepiaFW_build_ui_cards_embed(){
 		soundcloud: "<assist_server>/widgets/mp-soundcloud.html"
 	}
 	function getPlayerWidget(widget){
-		if (SepiaFW.client.isDemoMode()){
-			return playerWidgets.template;
-		}else{
-			return playerWidgets[widget];
+		var wUrl = playerWidgets[widget];
+		if (wUrl && SepiaFW.client.isDemoMode()){
+			wUrl = wUrl.replace("<assist_server>", "<custom_data>");
 		}
+		return wUrl;
 	}
 
 	var activeMediaPlayers = {};
@@ -227,6 +227,7 @@ function sepiaFW_build_ui_cards_embed(){
 			//on-load
 			//console.error("on-load", playerId);		//DEBUG
 		});
+		var loadTimer = setTimeout(function(){ $(thisPlayer.overlay).hide(); }, 6000);	//fallback if read event never comes
 		thisPlayer.iframe = mpObj.iframe;
 		thisPlayer.cardItem = mpObj.card;
 		thisPlayer.overlay = mpObj.overlay;
@@ -337,6 +338,7 @@ function sepiaFW_build_ui_cards_embed(){
 				if (data.size && data.size.height){
 					thisPlayer.iframe.style.height = data.size.height;
 				}
+				clearTimeout(loadTimer);
 				setTimeout(function(){ $(thisPlayer.overlay).hide(); }, 500);
 				//settings stored?
 				if (widgetSettings){

www/templates/dynamic-frame.html

@@ -4,6 +4,10 @@
 		<div id="sepiaFW-frame-page-1" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
 			Page 1
 		</div>
+		<!-- Page 2
+		<div id="sepiaFW-frame-page-2" class='sepiaFW-frames-page sepiaFW-carousel-pane'>
+			Page 2
+		</div> -->
 	</div>
 </div>
 <div id="sepiaFW-frames-nav-bar" class='sepiaFW-layer-header'>
@@ -21,7 +25,7 @@
 		<span data-localize="next">next</span><i class="material-icons md-btn2">keyboard_arrow_right</i>
 	</button>
 	-->
-	<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div></div>
+	<div id="sepiaFW-frames-nav-bar-page-indicator"><div>&nbsp;</div><!--<div>&nbsp;</div>--></div>
 </div>
 <script>
 	$('#sepiaFW-frame-carousel').find('[data-localize]').each(function(){

www/templates/frames_template.html

@@ -1,3 +1,5 @@
 # Custom Data Folder
 
-You can put own data here and call it inside the app for example via `SepiaFW.files.fetch("<custom_data>"/...)`.
+You can put own data here and call it inside the app for example via `SepiaFW.files.fetch("<custom_data>"/...)`.  
+  
+NOTE: In mobile apps `<custom_data>/` will access the user-data folder available for your app.

www/xtensions/custom-data/README.md

@@ -31,9 +31,25 @@ <h3>Page 2 - Microphone and chat output</h3>
 <script>
 	//NOTE: this is a more basic version of "<assist_server>/views/custom-view-demo.html"
 
+	//Use this action in your service (or Teach-UI) to trigger the demo frame:
+	//Action name: "open_frames_view";
+	//Action data: "info": {"pageUrl": "<custom_data>/views/demo-view.html"}
+	
+	//Localize some UI text
 	$('#sepiaFW-frame-carousel').find('[data-localize]').each(function(){
 		$(this).html(SepiaFW.local.g(this.dataset.localize));
 	});
+	/* Currently available frame events:
+		onFinishSetup
+		onOpen
+		onFramePageChange
+		onClose
+		onMessageHandler
+		onMissedMessageHandler
+		onSpeechToTextInputHandler
+		onChatOutputHandler
+		actionHandler (for custom actions of type: 'frames_view_action')
+	*/
 	//Define scope
 	SepiaFW.frames.currentScope = {
 		//Theme (frame: light, dark, mod.: flat, screen: dark_full)
@@ -43,23 +59,26 @@ <h3>Page 2 - Microphone and chat output</h3>
 		load: function(){
 			$('#sepiaFW-frames-mic').attr('class', 'entry icon-button');
 		},
-		sayHelloOnOpen: function(){
+		onOpen: function(){
 			//we use '$('#sepiaFW-frame-page-...')' to avoid conflicts with global ID:
 			$('#sepiaFW-frame-page-1 #sepiaFW-frame-c-hello').html(
 				"<p>Welcome to the Demo-View frame.</p>" 
 				+ "<p>This frame runs inside the scope of the SEPIA client and has open access to all features.</p>"
 				+ "<p>This type of frames can only be used when loaded from safe origins (e.g. app folder, or SEPIA server).</p>"
 			);
 		},
-		handleSttData: function(data){
+		onClose: function(){
+			console.log("BYE BYE");
+		},
+		onSpeechToTextInputHandler: function(data){
 			$('#sepiaFW-frame-page-2 #sepiaFW-frame-c-stt-data').val(JSON.stringify(data, "", 2));
 			//modify text to include custom tag (can be used to redirect all input to a custom service for example)
 			if (data.text && data.isFinal){
 				var textWithPrefix = SepiaFW.frames.currentScope.nluPrefix? (SepiaFW.frames.currentScope.nluPrefix + " " + data.text) : data.text;
 				return textWithPrefix;	//<-- return the data to actually modify it
 			}
 		},
-		handleChatOutput: function(data){
+		onChatOutputHandler: function(data){
 			$('#sepiaFW-frame-page-2').find('#sepiaFW-frame-c-chat-data').val(JSON.stringify(data, "", 2));
 		},
 
@@ -71,15 +90,10 @@ <h3>Page 2 - Microphone and chat output</h3>
 			$('#sepiaFW-frames-mic').attr('class', 'entry icon-button state-' + animState);
 		},
 
-		//Custom actions (only)
+		//For custom 'frames_view_action' (only)
 		actionHandler: function(action){
 			console.error(action);
 		}
-		
-		//Use this action in your service to trigger the demo frame:
-		//Action name: "open_frames_view";
-		//Action data: "info": {"pageUrl": "<custom_data>/demo-view.html", "onOpen": "sayHelloOnOpen", "onSpeechToTextInputHandler": "handleSttData", "onChatOutputHandler": "handleChatOutput"}
-		//- alternatively use: {"pageUrl":..., "autoFillFrameEvents": true} to load all handlers via default name from frame scope
 	}
 	SepiaFW.frames.currentScope.load();
 </script>

www/xtensions/custom-data/demo-view.html …ensions/custom-data/views/demo-view.htmlwww/xtensions/custom-data/demo-view.html renamed to www/xtensions/custom-data/views/demo-view.html www/xtensions/custom-data/demo-view.html renamed to www/xtensions/custom-data/views/demo-view.html

@@ -61,6 +61,10 @@
 	</div>
 	<!-- JS -->
 	<script type="text/javascript">
+		//NOTE: This is a demo implementation of the SEPIA Client Media-Player Widget
+		
+		//--------- COMMON WIDGET INTERFACE ---------
+		
 		//postMessage listener
 		window.addEventListener('message', function(message){
 			if (message.data && message.data.type){
@@ -133,7 +137,7 @@
 				//settings previously sent by the widget (widget/app specific etc. - NOTE: avoid autoplay!)
 				handleSettingsRestore(ev);
 			}else{
-				console.error("event", ev);		//DEBUG
+				console.error("MediaPlayer - Unknown event", ev);		//DEBUG
 			}
 		}
 
@@ -147,7 +151,7 @@
 
 		function handleSettingsRestore(ev){
 			//any widget specific data submitted by widget itself (either via 'postSettings' or during 'ready')
-			console.error("Settings", ev.settings);		//DEBUG
+			console.error("MediaPlayer - Settings", ev.settings);		//DEBUG
 			var settings = ev.settings;
 			//restore
 			autoplay = settings.autoplay || false;
@@ -158,7 +162,7 @@
 
 		function handleControls(ev){
 			//play, pause, fadeOut, fadeIn, next, previous, volumeUp, volumeDown, ... tbd
-			console.error("Controls", ev.controls);		//DEBUG
+			console.error("MediaPlayer - Controls", ev.controls);		//DEBUG
 			var ctrl = ev.controls;
 			switch (ev.controls){
 				case "play":
@@ -171,13 +175,17 @@
 					player.pause();
 					break;
 				case "next":
+					//TODO: ignored for now
+					break;
 				case "previous":
 					//TODO: ignored for now
 					break;
 				case "volumeUp":
 					playerSetVolume(playerGetVolume() + 1);
+					break;
 				case "volumeDown":
 					playerSetVolume(playerGetVolume() - 1);
+					break;
 				case "volumeSet":
 					if (ev.data != undefined) playerSetVolume(ev.data);
 					break;
@@ -197,27 +205,29 @@
 		}
 
 		function handleMediaRequest(ev){
-			console.error("Media request", ev.mediaRequest);		//DEBUG
+			console.error("MediaPlayer - mediaRequest", ev.mediaRequest, ev.autoplay);		//DEBUG
 			var mr = ev.mediaRequest;
 			/* type: music:
 			{
 				"song": "",
-				"search": "",
 				"playlist": "",
 				"artist": "",
 				"album": "",
-				"service": "",
 				"genre": "",
+				"search": "",
 				"uri": "",
+				"service": "",
 				"serviceResult": {...}	//specific to service
 			}*/
 			var safeRequest = ev.safeRequest;	//request came from assistant or private channel?
 			autoplay = ev.autoplay;
 
-			//"search" music:
 			var url = "";
 			var title = "";
 
+			//"Search" Music - SIMPLE DEMO:
+			//Possible search terms - Artist: "ed", "virginia", Song: "twister", "titanic"
+			//
 			if (mr.song && mr.song.trim().toLowerCase().indexOf("twister") >= 0){
 				url = "http://www.openmusicarchive.org/audio/Eddies_Twister.mp3";
 				title = "Eddies Twister";
@@ -233,8 +243,8 @@
 				title = "Titanic Blues";
 			}
 
+			//Load music
 			if (url){
-				//Load music
 				if (safeRequest){
 					player.preload = "auto";
 				}else{
@@ -258,13 +268,13 @@
 		}
 
 		player.oncanplay = function(){
-			console.error("oncanplay", arguments);		//DEBUG
+			console.error("MediaPlayer - oncanplay", arguments);		//DEBUG
 			if (autoplay){
 				player.play();
 			}
 		};
 		player.onplay = function(){
-			console.error("onplay", arguments);			//DEBUG
+			console.error("MediaPlayer - onplay", arguments);			//DEBUG
 			postState(2, {
 				meta: {
 					title: player.title,
@@ -273,17 +283,20 @@
 			});
 		};
 		player.onpause = function(){
-			console.error("onpause", arguments);		//DEBUG
+			console.error("MediaPlayer - onpause", arguments);		//DEBUG
 			postState(3);
 		};
 		player.onended = function(){
-			console.error("onended", arguments);		//DEBUG
+			console.error("MediaPlayer - onended", arguments);		//DEBUG
 		};
 		player.onvolumechange = function(){
-			console.error("onvolumechange", player.volume);		//DEBUG
+			console.error("MediaPlayer - onvolumechange", player.volume);		//DEBUG
+			postProperties({
+				volume: playerGetVolume()
+			});
 		};
 		player.onerror = function(err){
-			console.error("onerror", err, player.error);		//DEBUG
+			console.error("MediaPlayer - onerror", err, player.error);		//DEBUG
 			if (player.error && player.error.code === 4){
 				postError("PlayerError", "Cannot play the selected media data.", 4);
 			}else if (err && err.name && err.name == "NotAllowedError"){
@@ -300,12 +313,13 @@
 
 		//--------- DEMO END ---------
 
-		//ready
+		//Send 'ready' event:
 		setTimeout(function(){
 			postProperties({
 				size: {
 					height: (cardBody.getBoundingClientRect().height + "px")
-				}
+				},
+				volume: playerGetVolume()
 			});
 			postState(1, {});
 		}, 300);