Widgets: Fix scaling issue for static widgets and elements (#2227)

* do not apply default scaling if static widgets don't have onRender * fix onRender for analogue clock/embedded * apply scaling once to elements * fix for refreshing preview source relates to xibosignage/xibo#3239
xibosignage · Nov 16, 2023 · d4d8b52 · d4d8b52
1 parent 6437f57
commit d4d8b52
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 37 deletions.
diff --git a/modules/clock-analogue.xml b/modules/clock-analogue.xml
@@ -207,6 +207,10 @@ if (typeof updateClock === 'function') {
     setInterval(updateClock, 1000);
 }
     ]]></onVisible>
+    <onRender><![CDATA[
+      // Scale the content
+      $(target).xiboLayoutScaler(properties);
+]]></onRender>
     <assets>
         <asset id="clock-analogue-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/clock/clock-analogue-thumb.png" />
         <asset id="clock_bg_modern_dark" type="path" mime="image/png" path="/modules/assets/clock_bg_modern_dark.png"></asset>

diff --git a/modules/embedded.xml b/modules/embedded.xml
@@ -92,10 +92,11 @@
 if(typeof EmbedInit === 'function') {
     EmbedInit();
 }
-
+    ]]></onInitialize>
+    <onRender><![CDATA[
 if(properties.scaleContent) {
     window.scaleContent = true;
-    $('body').xiboLayoutScaler(globalOptions);
+    $(target).xiboLayoutScaler(globalOptions);
 }
-    ]]></onInitialize>
+]]></onRender>
 </module>
diff --git a/modules/pdf.xml b/modules/pdf.xml
@@ -70,8 +70,8 @@ var pdfDoc = null,
 var canvas = document.getElementById('the-canvas');
 var ctx = canvas.getContext('2d');
 
-width = $('body').width();
-height = $('body').height();
+width = $(window).width();
+height = $(window).height();
 
 canvas.width = width;
 canvas.height = height;

diff --git a/modules/src/player.js b/modules/src/player.js
@@ -184,11 +184,6 @@ $(function() {
       window.renders.push(window.onRender);
     }
 
-    // If there's no elements in renders, use the default scaler
-    if (window.renders.length === 0) {
-      window.renders.push(defaultScaler);
-    }
-
     // If we have a custom template, run the legacy template render first
     if (customTemplate) {
       const newOptions =
@@ -270,7 +265,6 @@ $(function() {
       url,
       meta,
     } = widget;
-    widget.items = [];
 
     if (Object.keys(elements.groups).length > 0 ||
     Object.keys(elements.standalone).length > 0) {
@@ -715,28 +709,14 @@ $(function() {
             }
           });
       }
-
-      if (templateId !== null && url !== null) {
-        // Run defaultScaler for global elements
-        defaultScaler(
-          widget.widgetId,
-          $content,
-          widget.items,
-          Object.assign(
-            widget.properties,
-            globalOptions,
-            {duration: widget.duration},
-          ),
-          meta,
-        );
-      }
     }
   }
 
   PlayerHelper
     .init(widgetData, elements)
-    .then(({widgets}) => {
+    .then(({widgets, countWidgetElements}) => {
       if (Object.keys(widgets).length > 0) {
+        let _countWidgetElements = 0;
         Object.keys(widgets).forEach(function(widgetKey) {
           const widget = widgets[widgetKey];
 
@@ -767,7 +747,20 @@ $(function() {
                 Object.keys(widget.elements.groups).length > 0 ||
                 Object.keys(widget.elements.standalone).length > 0
               ))) && typeof widget.elements !== 'undefined') {
+            widget.items = [];
+
+            _countWidgetElements++;
+
             initPlayerElements(widget);
+
+            if (countWidgetElements === _countWidgetElements) {
+              // Run xiboLayoutScaler to scale the content
+              $content.xiboLayoutScaler(Object.assign(
+                widget.properties,
+                globalOptions,
+                {duration: widget.duration},
+              ));
+            }
           } else {
             initStaticTemplates(
               $template,

diff --git a/modules/src/xibo-layout-scaler.js b/modules/src/xibo-layout-scaler.js
@@ -104,14 +104,19 @@ jQuery.fn.extend({
 
       mElOptions.contentScaleX = width / mElOptions.contentWidth;
       mElOptions.contentScaleY = height / mElOptions.contentHeight;
+
+      // calculate/update ratio
+      ratio = Math.min(mElOptions.contentScaleX, mElOptions.contentScaleY);
+    }
+
+    // Do nothing and return $(this) when ratio = 1
+    if (ratio == 1) {
+      return $(this);
     }
 
     // Apply these details
     $(this).each(function(_idx, el) {
       if (!$.isEmptyObject(mElOptions)) {
-        // calculate/update ratio
-        ratio = Math.min(mElOptions.contentScaleX, mElOptions.contentScaleY);
-
         $(el).css('transform-origin', '0 0');
         $(el).css('transform', 'scale(' + ratio + ')');
         $(el).width(mElOptions.contentWidth);
@@ -148,7 +153,7 @@ jQuery.fn.extend({
       }
 
       // Set ratio on the body incase we want to get it easily
-      $(el).data('ratio', ratio);
+      $(el).attr('data-ratio', ratio);
 
       // Handle alignment (do not add position absolute unless needed)
       if (!options.type || options.type !== 'text') {

diff --git a/ui/src/helpers/player-helper.js b/ui/src/helpers/player-helper.js
@@ -3,7 +3,15 @@ const PlayerHelper = function() {
   const _self = this;
   const urlParams = new URLSearchParams(window.location.search);
   const isPreview = urlParams.get('preview') === '1';
+  let countWidgetElements = 0;
+  let countWidgetStatic = 0;
 
+  /**
+   * Initialize player with the available widgetData and elements
+   * @param {array} widgetData
+   * @param {array} elements
+   * @return {Promise<object>}
+   */
   this.init = (widgetData, elements) => new Promise((resolve) => {
     if (Array.isArray(widgetData)) {
       const _widgetData = [...widgetData];
@@ -46,6 +54,16 @@ const PlayerHelper = function() {
             }
           }
 
+          if (_widget.templateId === 'elements' ||
+              (_widget.templateId === null && (
+                Object.keys(_elements.groups).length > 0 ||
+                Object.keys(_elements.standalone).length > 0
+              ))) {
+            countWidgetElements++;
+          } else {
+            countWidgetStatic++;
+          }
+
           widgets[_widget.widgetId] = {
             ..._widget,
             data: dataItems,
@@ -55,7 +73,11 @@ const PlayerHelper = function() {
           };
         });
 
-        resolve({widgets});
+        resolve({
+          widgets,
+          countWidgetElements,
+          countWidgetStatic,
+        });
       });
     }
   });

diff --git a/ui/src/preview/html-preview.js b/ui/src/preview/html-preview.js
@@ -652,9 +652,8 @@ function media(parent, id, xml, options, preload) {
             if(self.checkIframeStatus) {
                 // Reload iframe
                 var iframeDOM = $("#" + self.containerName + ' #' + self.iframeName);
-                // We remove this line because of flickering and
-                // We will need to address the duration
-                // iframeDOM[0].src = iframeDOM[0].src;
+                iframeDOM.css({visibility: 'hidden'});
+                iframeDOM[0].src = iframeDOM[0].src;
             } else {
                 $("#" + self.containerName).empty().append(self.iframe);
             }
@@ -786,7 +785,7 @@ function media(parent, id, xml, options, preload) {
 
     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;"></iframe>');
+        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' || self.options['durationisperpage'] == '1') {
             var regex =  new RegExp("<!-- NUMITEMS=(.*?) -->"); 
@@ -820,7 +819,7 @@ function media(parent, id, xml, options, preload) {
     }
     else if (self.mediaType == "text" || self.mediaType == "datasetview" || self.mediaType == "webpage" || self.mediaType == "embedded") {
         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;"></iframe>');
+        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") {
         preload.addFiles(tmpUrl);
@@ -858,6 +857,7 @@ function media(parent, id, xml, options, preload) {
         // On iframe load, set state as ready to play full preview
         $(self.iframe).on('load', function(){
             self.ready = true;
+            $(self.iframe).css({visibility: 'visible'});
         });
     }