Skip to content

Commit

Permalink
Layout Preview: Media and Youtube Embed play at the same time when in…
Browse files Browse the repository at this point in the history 
… a playlist (#2367)

relates to xibosignage/xibo#3333
  • Loading branch information
@maurofmferrao
maurofmferrao authored Feb 9, 2024
1 parent 2b484f5 commit 9d55910
Showing 1 changed file with 35 additions and 31 deletions.
66 changes: 35 additions & 31 deletions ui/src/preview/html-preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -643,6 +643,8 @@ function media(parent, id, xml, options, preload) {
self.timeoutId = undefined;
self.ready = true;
self.checkIframeStatus = false;
self.loadIframeOnRun = false;
self.tempSrc = '';

if (self.render == undefined)
self.render = "module";
Expand All @@ -654,6 +656,10 @@ function media(parent, id, xml, options, preload) {
var iframeDOM = $("#" + self.containerName + ' #' + self.iframeName);
iframeDOM.css({visibility: 'hidden'});
iframeDOM[0].src = iframeDOM[0].src;
} else if(self.loadIframeOnRun) {
var iframe = self.iframe;
iframe[0].src = self.tempSrc;
$("#" + self.containerName).empty().append(iframe)
} else {
$("#" + self.containerName).empty().append(self.iframe);
}
Expand Down Expand Up @@ -783,27 +789,11 @@ function media(parent, id, xml, options, preload) {
self.options['loop'] == '1' ||
(self.region.options['loop'] == '1' && self.region.totalMediaObjects == 1);

if (self.render == "html" || self.mediaType == "ticker") {
self.checkIframeStatus = true;
self.iframe = $('<iframe scrolling="no" id="' + self.iframeName + '" src="' + tmpUrl + '&width=' + self.divWidth + '&height=' + self.divHeight + '" width="' + self.divWidth + 'px" height="' + self.divHeight + 'px" style="border:0; visibility: hidden;"></iframe>');
/* Check if the ticker duration is based on the number of items in the feed */
if(self.options['durationisperitem'] == '1') {
var regex = new RegExp("<!-- NUMITEMS=(.*?) -->");
jQuery.ajax({
url: tmpUrl + '&width=' + self.divWidth + '&height=' + self.divHeight,
success: function(html) {
var res = regex.exec(html);
if (res != null) {
/* The ticker is duration per item, so multiply the duration
by the number of items from the feed */
self.duration = parseInt(self.duration) * parseInt(res[1]);
}
},
async:false
});
}
}
else if (self.mediaType === "image") {
if (self.mediaType == "webpage" || self.mediaType == "embedded") {
self.loadIframeOnRun = true;
self.iframe = $('<iframe scrolling="no" id="' + self.iframeName + '" width="' + self.divWidth + 'px" height="' + self.divHeight + 'px" style="border:0;"></iframe>');
self.tempSrc = tmpUrl + '&width=' + self.divWidth + '&height=' + self.divHeight + '" width="' + self.divWidth + 'px';
} else if (self.mediaType === "image") {
preload.addFiles(tmpUrl);
media.css("background-image", "url('" + tmpUrl + "')");
if (self.options['scaletype'] === 'stretch') {
Expand All @@ -816,12 +806,10 @@ function media(parent, id, xml, options, preload) {
var valign = (self.options['valign'] == "" || self.options['valign'] == "middle") ? "center" : self.options['valign'];
media.css("background-position", align + " " + valign);
}
}
else if (self.mediaType == "text" || self.mediaType == "datasetview" || self.mediaType == "webpage" || self.mediaType == "embedded") {
} else if (self.mediaType == "text" || self.mediaType == "datasetview") {
self.checkIframeStatus = true;
self.iframe = $('<iframe scrolling="no" id="' + self.iframeName + '" src="' + tmpUrl + '&width=' + self.divWidth + '&height=' + self.divHeight + '" width="' + self.divWidth + 'px" height="' + self.divHeight + 'px" style="border:0; visibility: hidden;"></iframe>');
}
else if (self.mediaType == "video") {
} else if (self.mediaType == "video") {
preload.addFiles(tmpUrl);

self.iframe = $('<video id="' + self.containerName + '-vid" preload="auto" ' + ((self.options["mute"] == 1) ? 'muted' : '') + ' ' + (loop ? 'loop' : '') + '><source src="' + tmpUrl + '">Unsupported Video</video>');
Expand All @@ -830,19 +818,35 @@ function media(parent, id, xml, options, preload) {
if(self.options['scaletype'] == 'stretch') {
self.iframe.css("object-fit", "fill");
}
}
else if(self.mediaType == "audio") {
} else if(self.mediaType == "audio") {
preload.addFiles(tmpUrl);

media.append('<audio id="' + self.containerName + '-aud" preload="auto" ' + (loop ? 'loop' : '') + ' ' + ((self.options["mute"] == 1) ? 'muted' : '') + '><source src="' + tmpUrl + '">Unsupported Audio</audio>');
}
else if (self.mediaType == "flash") {
} else if (self.mediaType == "flash") {
var embedCode = '<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%" id="Yourfilename" ALIGN="">';
embedCode = embedCode + '<PARAM NAME=movie VALUE="' + tmpUrl + '"> <PARAM NAME=quality VALUE=high> <param name="wmode" value="transparent"> <EMBED src="' + tmpUrl + '" quality="high" wmode="transparent" WIDTH="100%" HEIGHT="100%" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>';
preload.addFiles(tmpUrl);
self.iframe = $(embedCode);
}
else {
} else if (self.render == "html" || self.mediaType == "ticker") {
self.checkIframeStatus = true;
self.iframe = $('<iframe scrolling="no" id="' + self.iframeName + '" src="' + tmpUrl + '&width=' + self.divWidth + '&height=' + self.divHeight + '" width="' + self.divWidth + 'px" height="' + self.divHeight + 'px" style="border:0; visibility: hidden;"></iframe>');
/* Check if the ticker duration is based on the number of items in the feed */
if(self.options['durationisperitem'] == '1') {
var regex = new RegExp("<!-- NUMITEMS=(.*?) -->");
jQuery.ajax({
url: tmpUrl + '&width=' + self.divWidth + '&height=' + self.divHeight,
success: function(html) {
var res = regex.exec(html);
if (res != null) {
/* The ticker is duration per item, so multiply the duration
by the number of items from the feed */
self.duration = parseInt(self.duration) * parseInt(res[1]);
}
},
async:false
});
}
} else {
media.css("outline", "red solid thin");
}

Expand Down

0 comments on commit 9d55910

Please sign in to comment.