Skip to content

Commit 243253a

Browse files
fquirinfquirin
committed
more work on embedded mediaPlayer and interface
1 parent 723c687 commit 243253a

File tree

3 files changed

+128
-19
lines changed

3 files changed

+128
-19
lines changed

‎www/css/sepiaFW-cards.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -400,6 +400,14 @@
400400
margin: 5px 5px 0 5px;
401401
}
402402

403+
/* --- Embedded Media Player --- */
404+
405+
/* .sepiaFW-cards-flexSize-container.sepia-embedded-player-card {} */
406+
407+
.sepiaFW-cards-flexSize-container .sepiaFW-embedded-player-container iframe {
408+
border: 1px solid #000;
409+
}
410+
403411
/* --- Time events --- */
404412

405413
.sepiaFW-cards-list-body .timeEvent {

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

Lines changed: 75 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,47 @@ function sepiaFW_build_ui_cards_embed(){
2929
}
3030
var mediaPlayerLastId = 0;
3131

32+
//Iframe message listener
33+
window.addEventListener('message', function(message){
34+
if (message.data && message.data.type){
35+
if (message.data.type == "sepia-embedded-player-event" && message.data.ev){
36+
var mp = Object.values(activeMediaPlayers).find(function(amp){
37+
return amp.iframe.contentWindow == message.source;
38+
});
39+
if (mp && mp.eventHandler){
40+
mp.eventHandler(message.data.ev);
41+
}
42+
}
43+
}
44+
});
45+
46+
//Create media player DOM element
47+
function createMediaPlayerDomElement(id, contentUrl, onLoadHandler){
48+
//card
49+
var mediaPlayerDiv = document.createElement('DIV');
50+
mediaPlayerDiv.id = id;
51+
mediaPlayerDiv.className = "embeddedWebPlayer cardBodyItem fullWidthItem";
52+
//iframe
53+
var iframe = document.createElement("iframe");
54+
iframe.src = contentUrl;
55+
iframe.width = "100%";
56+
iframe.height = 50; //can be set via postMessage interface
57+
iframe.allowtransparency = true;
58+
iframe.onload = onLoadHandler;
59+
//iframe.allow = ...;
60+
//iframe.sandbox = ...;
61+
mediaPlayerDiv.appendChild(iframe);
62+
return {
63+
card: mediaPlayerDiv, iframe: iframe
64+
}
65+
}
66+
67+
//MediaPlayer interface
3268
Embed.MediaPlayer = function(options){
33-
if (!options) options = {};
69+
if (!options || !options.parentElement || !options.widgetUrl){
70+
SepiaFW.debug.error("Embedded MediaPlayer - Invalid options!");
71+
return;
72+
}
3473
var thisPlayer = this;
3574

3675
//ID
@@ -39,30 +78,55 @@ function sepiaFW_build_ui_cards_embed(){
3978
return playerId;
4079
}
4180

42-
//States
81+
//Widget URL
82+
options.widgetUrl = SepiaFW.config.replacePathTagWithActualPath(options.widgetUrl);
83+
console.error("URL", options.widgetUrl); //DEBUG
84+
//<custom_data>/embedded-player.html
85+
86+
//Create card (DOM element)
87+
var mpObj = createMediaPlayerDomElement(playerId, options.widgetUrl, function(){
88+
//on-load
89+
console.error("on-load", playerId); //DEBUG
90+
sendEvent({text: "World Hello"});
91+
});
92+
thisPlayer.iframe = mpObj.iframe;
93+
options.parentElement.appendChild(mpObj.card);
94+
95+
//SEPIA postMessage interface
96+
function sendEvent(ev){
97+
thisPlayer.iframe.contentWindow.postMessage({
98+
type: "sepia-embedded-player-event",
99+
ev: ev
100+
}, "*");
101+
}
102+
thisPlayer.eventHandler = function(ev){
103+
//TODO: use
104+
console.error("ev", playerId, ev); //DEBUG
105+
}
43106

107+
//States
44108

45109
//Controls - TODO: implement
46110
thisPlayer.start = function(doneCallback, errorCallback){
47-
111+
sendEvent({controls: "start"});
48112
}
49113
thisPlayer.pause = function(doneCallback, errorCallback){
50-
51-
}
52-
thisPlayer.fadeOut = function(doneCallback, errorCallback){
53-
114+
sendEvent({controls: "pause"});
54115
}
55116
thisPlayer.resume = function(doneCallback, errorCallback){
56-
117+
sendEvent({controls: "resume"});
118+
}
119+
thisPlayer.fadeOut = function(doneCallback, errorCallback){
120+
sendEvent({controls: "fadeOut"});
57121
}
58122
thisPlayer.fadeIn = function(doneCallback, errorCallback){
59-
123+
sendEvent({controls: "fadeIn"});
60124
}
61125
thisPlayer.next = function(doneCallback, errorCallback){
62-
126+
sendEvent({controls: "next"});
63127
}
64128
thisPlayer.previous = function(doneCallback, errorCallback){
65-
129+
sendEvent({controls: "previous"});
66130
}
67131
//stop, release resources and remove handle
68132
thisPlayer.release = function(doneCallback, errorCallback){

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

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@ function sepiaFW_build_ui_cards(){
3131
Cards.canEmbedWebPlayer = function(service){
3232
if (!service) return false;
3333
service = service.toLowerCase().replace(/\s+/,"_"); //support brands too
34-
if (service.indexOf("spotify") == 0){
34+
if (service.indexOf("custom_embedded") == 0){
35+
return true;
36+
}else if (service.indexOf("spotify") == 0){
3537
return Cards.canEmbedSpotify;
3638
}else if (service.indexOf("apple_music") == 0){
3739
return Cards.canEmbedAppleMusic;
@@ -43,6 +45,7 @@ function sepiaFW_build_ui_cards(){
4345
}
4446
Cards.getSupportedWebPlayers = function(){
4547
var players = [];
48+
players.push("custom_embedded");
4649
if (Cards.canEmbedYouTube) players.push("youtube");
4750
if (Cards.canEmbedSpotify) players.push("spotify");
4851
if (Cards.canEmbedAppleMusic) players.push("apple_music");
@@ -2120,6 +2123,39 @@ function sepiaFW_build_ui_cards(){
21202123

21212124
//------ TODO: Cards to be integrated into interface:
21222125

2126+
//-- Embedded Media Player --
2127+
2128+
Cards.addEmbeddedPlayer = function(targetView, widgetUrl){
2129+
var cardBody = addContainerToTargetView(targetView, "sepiaFW-embedded-player-container", "sepia-embedded-player-card");
2130+
var player = new SepiaFW.ui.cards.embed.MediaPlayer({
2131+
parentElement: cardBody,
2132+
widgetUrl: widgetUrl
2133+
});
2134+
var cardEle = document.createElement('DIV');
2135+
cardEle.className = 'cardBodyItem radioStation'; //lazy styling: use radioStation
2136+
var buttons = [{
2137+
icon: "skip_previous",
2138+
fun: player.previous
2139+
},{
2140+
icon: "play_arrow",
2141+
fun: player.start
2142+
},{
2143+
icon: "pause",
2144+
fun: player.pause
2145+
},{
2146+
icon: "skip_next",
2147+
fun: player.next
2148+
}];
2149+
buttons.forEach(function(b){
2150+
var btn = document.createElement('DIV');
2151+
btn.className = "itemLeft radioLeft";
2152+
btn.innerHTML = "<i class='material-icons md-mnu'>" + b.icon + "</i>";
2153+
$(btn).on("click", b.fun);
2154+
cardEle.appendChild(btn);
2155+
});
2156+
cardBody.appendChild(cardEle);
2157+
}
2158+
21232159
//-- Plot cards --
21242160

21252161
Cards.addLinePlotToView = function(x, data, plotOptions, targetView){
@@ -2128,26 +2164,27 @@ function sepiaFW_build_ui_cards(){
21282164
}
21292165

21302166
//-- Audio file cards --
2131-
2132-
//create container directly inside "chat", "myView" or "bigResults"
21332167

21342168
Cards.addWaveCardToView = function(wavAudio, targetView){
2135-
var c = addAudioContainerToTargetView(targetView);
2169+
var cardBody = addContainerToTargetView(targetView, "sepiaFW-audio-container", "sepia-audio-card");
21362170
var audioEle = document.createElement("audio");
21372171
audioEle.src = window.URL.createObjectURL((wavAudio.constructor.name == "Blob")? wavAudio : (new Blob([wavAudio], { type: "audio/wav" })));
21382172
audioEle.setAttribute("controls", "controls");
21392173
var audioBox = document.createElement("div");
21402174
audioBox.appendChild(audioEle);
2141-
c.appendChild(audioBox);
2175+
cardBody.appendChild(audioBox);
21422176
}
2143-
function addAudioContainerToTargetView(targetView){
2177+
2178+
//create container directly inside "chat", "myView" or "bigResults":
2179+
2180+
function addContainerToTargetView(targetView, containerClass, cardClass){
21442181
if (!targetView) targetView = "chat";
21452182
//inner container
21462183
var container = document.createElement("div");
2147-
container.className = "sepiaFW-cards-list-body sepiaFW-audio-container";
2184+
container.className = "sepiaFW-cards-list-body " + containerClass;
21482185
//outer card
21492186
var cardElement = Cards.buildCardContainer(true, true);
2150-
cardElement.classList.add("sepia-audio-card");
2187+
cardElement.classList.add(cardClass);
21512188
cardElement.appendChild(container);
21522189
//add
21532190
var resultView = SepiaFW.ui.getResultViewByName(targetView);

0 commit comments

Comments
 (0)