@xibosignage/xibo-layout-renderer 1.0.2 → 1.0.4

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

@@ -0,0 +1,32 @@
+import { ILayout, OptionsType } from '../../types';
+import './action-controller.css';
+export declare class Action {
+    readonly id: string;
+    readonly xml: Element;
+    constructor(id: string, xml: Element);
+}
+export declare class ActionsWrapper extends HTMLDivElement {
+    constructor();
+}
+export type InactOptions = {
+    [k: string]: any;
+} & OptionsType['previewTranslations'];
+export default class ActionController {
+    readonly parent: ILayout;
+    readonly actions: Action[];
+    readonly options: InactOptions;
+    readonly $actionController: ActionsWrapper;
+    readonly $actionListContainer: Element | null;
+    translations: any;
+    constructor(parent: ILayout, actions: Action[], options: InactOptions);
+    init(): void;
+    openLayoutInNewTab(layoutCode: string, options: InactOptions): void;
+    /** Change media in region (next/previous) */
+    nextMediaInRegion(regionId: string, actionType: string): void;
+    loadMediaInRegion(regionId: string, widgetId: string): void;
+    /** Run action based on action data */
+    runAction(actionData: {
+        [k: string]: any;
+    }, options: InactOptions): void;
+    initTouchActions(): void;
+}

package/dist/src/Modules/ActionController/index.d.ts

@@ -0,0 +1 @@
+export { default, Action, ActionsWrapper, InactOptions, } from './ActionController';

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

@@ -28,4 +28,7 @@ export declare function getIndexByLayoutId(layoutsInput: InputLayoutType[], layo
 export declare function isEmpty(input: any): boolean;
 export declare const splashScreenLayoutObj: InputLayoutType;
 export declare function splashScreenDOM(): HTMLImageElement;
+export declare function getAllAttributes(elem: Element): {
+    [k: string]: any;
+};
 export {};

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

@@ -2,6 +2,7 @@ import { Emitter, Unsubscribe } from 'nanoevents';
 import { IRegion } from '../Region';
 import { ILayoutEvents } from '../../Modules/Layout';
 import { IXlr } from '../XLR';
+import InteractiveActions, { Action } from '../../Modules/ActionController';
 export type InputLayoutType = {
     layoutId: number | null;
     path?: string;
@@ -23,6 +24,9 @@ export type OptionsType = {
         cmsKey: string | null;
         hardwareKey: string | null;
     };
+    previewTranslations?: {
+        [k: string]: any;
+    };
 };
 export interface ILayout {
     id: number | null;
@@ -45,10 +49,10 @@ export interface ILayout {
     regionMaxZIndex: number;
     ready: boolean;
     regionObjects: IRegion[];
-    drawer: String[];
+    drawer: Element | null;
     allExpired: boolean;
     regions: IRegion[];
-    actions: String[];
+    actions: Action[];
     options: OptionsType;
     done: boolean;
     allEnded: boolean;
@@ -64,6 +68,7 @@ export interface ILayout {
     stopAllMedia(): Promise<void>;
     resetLayout(): Promise<void>;
     index: number;
+    actionController: InteractiveActions | undefined;
 }
 export declare const initialLayout: ILayout;
 export type GetLayoutParamType = {

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

@@ -9,9 +9,10 @@ export interface IRegion {
     layout: ILayout;
     id: string;
     regionId: string;
+    uniqueId: string;
     xml: null | Element;
     mediaObjects: IMedia[];
-    mediaObjectsActions: String[];
+    mediaObjectsActions: IMedia[];
     currentMedia: number;
     complete: boolean;
     containerName: string;
@@ -36,6 +37,7 @@ export interface IRegion {
     emitter?: Emitter<DefaultEvents>;
     prepareRegion(): void;
     playNextMedia(): void;
+    playPreviousMedia(): void;
     transitionNodes(oldMedia: IMedia | undefined, newMedia: IMedia | undefined): void;
     finished(): void;
     run(): void;

package/dist/styles.css

@@ -168,4 +168,112 @@ div.preview-ended a {
 @keyframes elemFadeOut {
     0% { opacity: 1; }
     100% { opacity: 0; }
+}
+div.action-controller {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    z-index: 1001;
+    font-family: monospace, monospace;
+    font-size: 0.75rem;
+    background-color: #363636;
+    border-radius: 4px;
+    opacity: 0.95;
+    filter: alpha(opacity = 90);
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    max-height: 80%;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+div.action-controller .action-controller-title {
+    width: calc(300px - 8px);
+    z-index: 2;
+    padding: 4px;
+    color: #fff;
+    cursor: grab;
+    position: fixed;
+    border-radius: 4px;
+    background-color: #363636;
+}
+div.action-controller .action-controller-title .toggle {
+    cursor: pointer;
+    color: inherit;
+    width: 24px;
+    height: 18px;
+    padding: 0;
+    background-color: #5f5f5f;
+    border: none;
+    border-radius: 3px;
+    line-height: 12px;
+    font-weight: bold;
+}
+div.action-controller .action-controller-title .toggle:after {
+    content: ' \002D';
+}
+div.action-controller.d-none .action-controller-title .toggle:after {
+    content: ' \002B';
+}
+div.action-controller .action-controller-title .title {
+    margin-left: 4px;
+}
+div.action-controller .actions-container {
+    margin-top: 24px;
+    padding: 4px;
+}
+
+div.action-controller.d-none {
+    min-width: 100px;
+    opacity: 0.5;
+    filter: alpha(opacity=50); /* IE8 and lower */
+}
+
+div.action-controller.d-none .actions-container {
+    display: none;
+}
+
+div.action-controller.d-none:hover {
+    opacity: 0.8;
+    filter: alpha(opacity=80); /* IE8 and lower */
+}
+
+div.action-controller.d-none .action {
+    display: none;
+}
+
+div.action-controller .action {
+    position: relative;
+    height: 20px;
+    border-radius: 4px;
+    margin-bottom: 4px;
+    background-color: #337ab7;
+    padding: 2px 4px;
+    color: #f3f3f3;
+    line-height: 20px;
+    display: flex;
+    justify-content: space-between;
+}
+
+div.action-controller .action:hover {
+    background-color: #4289c7;
+}
+
+div.action-controller .action:not([triggerType="webhook"]) {
+    display: none;
+}
+
+.clickable {
+    cursor: pointer;
+}
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+iframe {
+    pointer-events: none;
 }