@xibosignage/xibo-layout-renderer 1.0.23 → 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

@@ -1,5 +1,5 @@
 import { IMedia } from '../../Types/Media';
-import { InputLayoutType, OptionsType } from '../../Types/Layout';
+import { ILayout, InputLayoutType, OptionsType } from '../../Types/Layout';
 import { IRegion } from "../../Types/Region";
 export declare function nextId(options: {
     idCounter: number;
@@ -17,7 +17,7 @@ export declare function videoFileType(str: string): string | undefined;
 export declare function composeResourceUrlByPlatform(options: OptionsType, params: any): string;
 export declare function composeResourceUrl(options: OptionsType, params: any): string;
 export declare function composeMediaUrl(params: any): string;
-export declare function composeBgUrlByPlatform(platform: OptionsType['platform'], params: any): string;
+export declare function composeBgUrlByPlatform(platform: OptionsType['platform'], params: ILayout): string;
 type LayoutIndexType = {
     [k: string]: InputLayoutType & {
         index: number;
@@ -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/Modules/Generators/index.d.ts

@@ -1,2 +1 @@
-export type { MediaTypes, } from './Generators';
-export { getFileExt, nextId, preloadMediaBlob, getMediaId, fetchJSON, capitalizeStr, audioFileType, videoFileType, setExpiry, composeMediaUrl, fetchText, getDataBlob, composeResourceUrl, composeResourceUrlByPlatform, getIndexByLayoutId, isEmpty, composeBgUrlByPlatform, hasDefaultOnly, isLayoutValid, createMediaElement, } from './Generators';
+export { getFileExt, nextId, preloadMediaBlob, getMediaId, fetchJSON, capitalizeStr, audioFileType, videoFileType, setExpiry, composeMediaUrl, fetchText, getDataBlob, composeResourceUrl, composeResourceUrlByPlatform, getIndexByLayoutId, isEmpty, composeBgUrlByPlatform, hasDefaultOnly, isLayoutValid, createMediaElement, playerReportFault, getAllAttributes, prepareAudioMedia, prepareHtmlMedia, prepareImageMedia, prepareVideoMedia, getLayoutIndexByLayoutId, hasSspLayout, type MediaTypes, } from './Generators';

package/dist/src/Modules/Media/VideoMedia.d.ts

@@ -1,6 +1,6 @@
 import Player from "video.js/dist/types/player";
 import { IMedia } from '../../Types/Media';
-import { IXlr, OptionsType } from '../../types';
+import { IXlr } from '../../types';
 import './media.css';
 export declare function composeVideoSource($media: HTMLVideoElement, media: IMedia): HTMLVideoElement;
 export declare const defaultVjsOpts: {
@@ -15,7 +15,6 @@ export interface IVideoMediaHandler {
     duration: number;
     stop(disposeOnly?: boolean): void;
 }
-export declare function videoMediaHandler(media: IMedia, platform: OptionsType['platform']): IVideoMediaHandler;
 export declare function VideoMedia(media: IMedia, xlr: IXlr): {
     duration: number;
     init: () => void;

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

@@ -42,9 +42,6 @@ export default class Region implements IRegion {
     prepareNextMedia(): void;
     prepareMediaObjects(): void;
     finished(): void;
-    private prepareVideo;
-    private prepareImage;
-    private prepareIframe;
     run(): void;
     transitionNodes(oldMedia: IMedia | undefined, newMedia: IMedia | undefined): void;
     playNextMedia(): void;

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;