@xibosignage/xibo-layout-renderer 1.0.24 → 1.0.25

package/README.md

@@ -67,3 +67,52 @@ The library supports multiple platforms via `ConsumerPlatform` enum and the `opt
 | `chromeOS`  | Local file path                | Fault reporting via Service Worker |
 | `electron`  | App host + URL                 | Standard playback                 |
 | PWA         | Proxy/hosted                   | Service Worker caching            |
+
+## CMS Integration — postMessage Protocol
+
+When XLR is embedded in a sandboxed `<iframe>` (e.g. in CMS Preview), it communicates with the parent frame via `window.parent.postMessage` instead of using browser dialogs that require `allow-modals`.
+
+### Iframe requirements
+
+The iframe must include `allow-scripts` in its `sandbox` attribute. `allow-modals` is **not** required.
+
+```html
+<iframe src="..." sandbox="allow-scripts allow-same-origin"></iframe>
+```
+
+### Messages sent by XLR
+
+#### `xlr:navLayout`
+
+Fired when a "Navigate to Layout" touch/webhook action is triggered. The parent frame is responsible for showing a confirmation prompt and opening the layout.
+
+```typescript
+interface XlrNavLayoutMessage {
+  type: 'xlr:navLayout';
+  layoutCode: string;  // The layout code from the action
+  url: string;         // Pre-constructed preview URL (ready to open)
+}
+```
+
+**CMS listener example:**
+
+```javascript
+window.addEventListener('message', (event) => {
+  // In production, validate event.origin against your known CMS origin.
+  if (event.data?.type === 'xlr:navLayout') {
+    if (confirm(`Navigate to layout with code ${event.data.layoutCode}?`)) {
+      window.open(event.data.url, '_blank');
+    }
+  }
+});
+```
+
+### Event API (non-iframe consumers)
+
+The same action also emits a `navLayout` event via the XLR event system, usable by consumers that have direct access to the `IXlr` object:
+
+```typescript
+xlr.on('navLayout', (layoutCode: string, url: string) => {
+  // Show your own confirmation UI and open the URL as needed.
+});
+```

package/dist/src/Modules/Generators/Generators.d.ts

@@ -62,4 +62,5 @@ export declare function prepareImageMedia(media: IMedia, region: IRegion): void;
 export declare function prepareAudioMedia(media: IMedia, region: IRegion): void;
 export declare function prepareHtmlMedia(media: IMedia, region: IRegion): void;
 export declare function playerReportFault(msg: string, media: IMedia): Promise<void>;
+export declare function setLayoutIndex(layout: ILayout | undefined, layoutIndex: number): ILayout | undefined;
 export {};

package/dist/src/Types/Layout/Layout.types.d.ts

@@ -26,6 +26,7 @@ export type InputLayoutType = {
     getXlf?(): string;
     duration?: number;
     isOverlay?: boolean;
+    shareOfVoice?: number;
 };
 export type OptionsType = {
     xlfUrl: string;

package/dist/src/Types/XLR/XLR.types.d.ts

@@ -23,6 +23,7 @@ export type IXlrEvents = {
     overlayEnd: (overlay: ILayout) => void;
     commandCodeReceived: (commandCode: string) => void;
     commandStringReceived: (commandString: string) => void;
+    navLayout: (layoutCode: string, url: string) => void;
 };
 export interface IXlrPlayback {
     currentLayout: ILayout | undefined;

package/dist/xibo-layout-renderer.cjs.js

@@ -835,31 +835,37 @@ var OverlayLayoutManager = /*#__PURE__*/function () {
             case 0:
               _context2.next = 2;
               return Promise.all(list.map( /*#__PURE__*/function () {
-                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(item) {
-                  var inputOverlay, overlayLayout, $overlay;
+                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(item, index) {
+                  var _item$index;
+                  var inputOverlay, overlayLayout, $overlay, _overlayLayout$zIndex;
                   return _regeneratorRuntime().wrap(function _callee$(_context) {
                     while (1) switch (_context.prev = _context.next) {
                       case 0:
                         inputOverlay = {};
                         inputOverlay = _objectSpread2(_objectSpread2({}, inputOverlay), item);
-                        inputOverlay.index = item.index;
+                        inputOverlay.index = (_item$index = item.index) !== null && _item$index !== void 0 ? _item$index : index;
                         _context.next = 5;
                         return _this.parent.prepareLayoutXlf(_objectSpread2(_objectSpread2({}, initialLayout), inputOverlay));
                       case 5:
                         overlayLayout = _context.sent;
+                        console.debug('<> XLR.debug OverlayLayoutManager::parseOverlays prepared overlay layout', {
+                          overlayLayout: overlayLayout,
+                          inputOverlay: inputOverlay
+                        });
                         // Hide all overlays first
                         $overlay = document.querySelector("#".concat(overlayLayout.containerName, "[data-sequence=\"").concat(overlayLayout.index, "\"]"));
                         if ($overlay !== null) {
-                          $overlay.style.setProperty('display', 'none');
+                          $overlay.style.setProperty('visibility', 'hidden');
+                          $overlay.style.setProperty('z-index', "".concat((_overlayLayout$zIndex = overlayLayout.zIndex) !== null && _overlayLayout$zIndex !== void 0 ? _overlayLayout$zIndex : -999));
                         }
                         return _context.abrupt("return", overlayLayout);
-                      case 9:
+                      case 10:
                       case "end":
                         return _context.stop();
                     }
                   }, _callee);
                 }));
-                return function (_x2) {
+                return function (_x2, _x3) {
                   return _ref.apply(this, arguments);
                 };
               }()));
@@ -988,7 +994,7 @@ var OverlayLayoutManager = /*#__PURE__*/function () {
           }
         }, _callee3, this, [[12, 21, 24, 27]]);
       }));
-      function prepareOverlayLayouts(_x3, _x4) {
+      function prepareOverlayLayouts(_x4, _x5) {
         return _prepareOverlayLayouts.apply(this, arguments);
       }
       return prepareOverlayLayouts;
@@ -999,7 +1005,8 @@ var OverlayLayoutManager = /*#__PURE__*/function () {
       var _this$parent$currentL;
       if (this.overlays.length === 0) return;
       if (this.parent && (_this$parent$currentL = this.parent.currentLayout) !== null && _this$parent$currentL !== void 0 && _this$parent$currentL.isInterrupt()) {
-        this.container.style.setProperty('display', 'none');
+        this.container.style.setProperty('visibility', 'hidden');
+        this.container.style.setProperty('z-index', '-999');
         return;
       }
       this.overlays.forEach(function (overlay) {
@@ -1017,21 +1024,25 @@ var OverlayLayoutManager = /*#__PURE__*/function () {
             while (1) switch (_context5.prev = _context5.next) {
               case 0:
                 overlayHtml = document.querySelector("#".concat(overlay.containerName, "[data-sequence=\"").concat(overlay.index, "\"]"));
+                console.debug('<> XLR.debug OverlayLayoutManager::stopOverlays', {
+                  overlay: overlay,
+                  overlayHtml: overlayHtml
+                });
                 if (!(overlayHtml !== null)) {
-                  _context5.next = 5;
+                  _context5.next = 6;
                   break;
                 }
-                _context5.next = 4;
+                _context5.next = 5;
                 return overlay.finishAllRegions();
-              case 4:
-                overlay.emitter.emit('end', overlay);
               case 5:
+                overlay.emitter.emit('end', overlay);
+              case 6:
               case "end":
                 return _context5.stop();
             }
           }, _callee4);
         }));
-        return function (_x5) {
+        return function (_x6) {
           return _ref2.apply(this, arguments);
         };
       }());
@@ -73807,6 +73818,13 @@ function _playerReportFault() {
   }));
   return _playerReportFault.apply(this, arguments);
 }
+function setLayoutIndex(layout, layoutIndex) {
+  if (!layout || layout.id === null) {
+    return;
+  }
+  layout.index = layoutIndex;
+  return layout;
+}
 
 const urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -74982,10 +75000,16 @@ var ActionController = /*#__PURE__*/function () {
   }, {
     key: "openLayoutInNewTab",
     value: function openLayoutInNewTab(layoutCode, options) {
-      if (confirm(this.translations.navigateToLayout.replace('[layoutTag]', layoutCode))) {
-        var url = options.layoutPreviewUrl.replace('[layoutCode]', layoutCode) + '?findByCode=1';
-        window.open(url, '_blank');
-      }
+      var url = options.layoutPreviewUrl.replace('[layoutCode]', layoutCode) + '?findByCode=1';
+      // Send a postMessage to the parent frame so the CMS can handle the confirmation
+      // and navigation (confirm() is blocked in sandboxed iframes without allow-modals).
+      window.parent.postMessage({
+        type: 'xlr:navLayout',
+        layoutCode: layoutCode,
+        url: url
+      }, '*');
+      // Also emit via the XLR event system for non-iframe consumers.
+      this.parent.xlr.emitter.emit('navLayout', layoutCode, url);
     }
   }, {
     key: "openLayoutInPlayer",
@@ -75402,8 +75426,11 @@ var Layout = /*#__PURE__*/function () {
                 layout.state = exports.ELayoutState.PLAYED;
               }
               layout.done = true;
-              console.debug({
-                $layout: $layout
+              console.debug('>>> XLR.debug Layout end emitted > Layout ID > ', {
+                $layout: $layout,
+                layoutId: layout.id,
+                isOverlay: layout.isOverlay,
+                isInterrupt: layout.isInterrupt()
               });
               if ($layout !== null) {
                 $layout.style.setProperty('visibility', 'hidden');
@@ -76138,12 +76165,12 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
         $splashScreen === null || $splashScreen === void 0 || $splashScreen.hide();
       }
       if (!xlr.currentLayout.done) {
-        console.log('>>>> XLR.debug XLR::playSchedules > Running currentLayout', xlr.currentLayout);
-        xlr.currentLayout.run();
         // Hide overlays when current layout is interrupt
         if (xlr.currentLayout.isInterrupt()) {
           xlrObject.overlayLayoutManager.stopOverlays();
         }
+        console.log('>>>> XLR.debug XLR::playSchedules > Running currentLayout', xlr.currentLayout);
+        xlr.currentLayout.run();
       }
     } else {
       // Show splash screen
@@ -76491,8 +76518,10 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             var tempNextLayoutIndex = getLayoutIndexByLayoutId(this.inputLayouts, this.nextLayout.layoutId);
             _currentLayoutIndex = tempNextLayoutIndex !== null && tempNextLayoutIndex !== void 0 ? tempNextLayoutIndex : 0;
             _currentLayout = this.getLayout(this.inputLayouts[tempNextLayoutIndex !== null && tempNextLayoutIndex !== void 0 ? tempNextLayoutIndex : 0]);
+            _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
           } else {
             _currentLayout = this.getLayout(this.inputLayouts[0]);
+            _currentLayout = setLayoutIndex(_currentLayout, 0);
           }
           if (this.inputLayouts.length > 1) {
             if (_currentLayoutIndex + 1 > this.inputLayouts.length - 1) {
@@ -76501,6 +76530,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               _nextLayoutIndex = _currentLayoutIndex + 1;
             }
             _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+            _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
           } else {
             _nextLayout = _currentLayout;
           }
@@ -76513,20 +76543,25 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
                 if (_currentLayout) {
                   _currentLayoutIndex = _currentLayout.index;
                 }
+                _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
                 _nextLayoutIndex = 0;
                 _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+                _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
               }
             } else {
               _currentLayoutIndex = this.nextLayout.index > this.inputLayouts.length - 1 ? 0 : this.nextLayout.index;
               _currentLayout = this.getLayout(this.inputLayouts[_currentLayoutIndex]);
+              _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
               _nextLayoutIndex = _currentLayoutIndex + 1 > this.inputLayouts.length - 1 ? 0 : _currentLayoutIndex + 1;
               _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+              _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
             }
           } else {
             _currentLayout = this.nextLayout;
             _currentLayoutIndex = _currentLayout.index;
             _nextLayoutIndex = (_currentLayoutIndex + 1) % this.inputLayouts.length;
             _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+            _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
           }
         }
       }
@@ -76534,17 +76569,22 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
       // Initial run: set both currentLayout and nextLayout
       if (hasLayout) {
         _currentLayout = this.getLayout(this.inputLayouts[_currentLayoutIndex]);
+        _currentLayout = setLayoutIndex(_currentLayout, _currentLayoutIndex);
         if (this.inputLayouts.length > 1) {
           _nextLayout = this.getLayout(this.inputLayouts[_nextLayoutIndex]);
+          _nextLayout = setLayoutIndex(_nextLayout, _nextLayoutIndex);
         } else {
           _nextLayout = this.getLayout(this.inputLayouts[0]);
+          _nextLayout = setLayoutIndex(_nextLayout, 0);
         }
       }
     }
     if (_currentLayout === undefined && _nextLayout === undefined) {
       if (_hasDefaultOnly) {
         _currentLayout = this.getLayout(this.inputLayouts[0]);
+        _currentLayout = setLayoutIndex(_currentLayout, 0);
         _nextLayout = this.getLayout(this.inputLayouts[0]);
+        _nextLayout = setLayoutIndex(_nextLayout, 0);
       }
     }
     if (_currentLayout !== undefined && _nextLayout !== undefined) {
@@ -76578,6 +76618,11 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
           activeLayout = _objectSpread2({}, this.uniqueLayouts[inputLayout.layoutId]);
         }
         _layout = _objectSpread2(_objectSpread2({}, _layout), activeLayout);
+        console.debug('XLR::getLayout > activeLayout from uniqueLayouts', {
+          activeLayout: activeLayout,
+          inputLayout: inputLayout,
+          uniqueLayouts: this.uniqueLayouts
+        });
         // Must set index/sequence from schedule loop
         _layout.index = activeLayout.index;
       }
@@ -76790,7 +76835,7 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
             _nextLayout = nextLayout;
           case 2:
             if (!(_nextLayout && _nextLayout.xlfString === '')) {
-              _context16.next = 16;
+              _context16.next = 17;
               break;
             }
             // Remove skipped layout
@@ -76802,25 +76847,26 @@ function XiboLayoutRenderer(inputLayouts, overlays, options) {
               _context16.next = 7;
               break;
             }
-            return _context16.abrupt("break", 16);
+            return _context16.abrupt("break", 17);
           case 7:
             inputLayout = self.inputLayouts[nextIndex];
             if (inputLayout) {
               _context16.next = 10;
               break;
             }
-            return _context16.abrupt("break", 16);
+            return _context16.abrupt("break", 17);
           case 10:
             nextLayoutObj = self.getLayout(inputLayout);
-            _context16.next = 13;
+            nextLayoutObj = setLayoutIndex(nextLayoutObj, nextIndex);
+            _context16.next = 14;
             return self.prepareLayoutXlf(nextLayoutObj);
-          case 13:
+          case 14:
             _nextLayout = _context16.sent;
             _context16.next = 2;
             break;
-          case 16:
-            return _context16.abrupt("return", _nextLayout);
           case 17:
+            return _context16.abrupt("return", _nextLayout);
+          case 18:
           case "end":
             return _context16.stop();
         }