@xibosignage/xibo-layout-renderer 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/Types/Layout/Layout.types.d.ts +2 -0
- package/dist/src/Types/Media/Media.types.d.ts +1 -0
- package/dist/xibo-layout-renderer.cjs.js +59 -12
- package/dist/xibo-layout-renderer.cjs.js.map +1 -1
- package/dist/xibo-layout-renderer.d.ts +3 -0
- package/dist/xibo-layout-renderer.esm.js +59 -12
- package/dist/xibo-layout-renderer.esm.js.map +1 -1
- package/dist/xibo-layout-renderer.js +59 -12
- package/dist/xibo-layout-renderer.min.js +8 -8
- package/dist/xibo-layout-renderer.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -31,6 +31,7 @@ export type OptionsType = {
|
|
|
31
31
|
export interface ILayout {
|
|
32
32
|
id: number | null;
|
|
33
33
|
layoutId: number | null;
|
|
34
|
+
scheduleId?: number;
|
|
34
35
|
sw: number | null;
|
|
35
36
|
sh: number | null;
|
|
36
37
|
xw: number | null;
|
|
@@ -69,6 +70,7 @@ export interface ILayout {
|
|
|
69
70
|
resetLayout(): Promise<void>;
|
|
70
71
|
index: number;
|
|
71
72
|
actionController: InteractiveActions | undefined;
|
|
73
|
+
enableStat: boolean;
|
|
72
74
|
}
|
|
73
75
|
export declare const initialLayout: ILayout;
|
|
74
76
|
export type GetLayoutParamType = {
|
|
@@ -664,7 +664,8 @@ var initialLayout = {
|
|
|
664
664
|
},
|
|
665
665
|
emitter: {},
|
|
666
666
|
index: -1,
|
|
667
|
-
actionController: undefined
|
|
667
|
+
actionController: undefined,
|
|
668
|
+
enableStat: false
|
|
668
669
|
};
|
|
669
670
|
|
|
670
671
|
function nextId(options) {
|
|
@@ -849,7 +850,9 @@ function composeMediaUrl(params) {
|
|
|
849
850
|
function composeBgUrlByPlatform(platform, params) {
|
|
850
851
|
var bgImageUrl = params.layoutBackgroundDownloadUrl.replace(":id", params.layout.id) + '?preview=1&width=' + params.layout.sWidth + '&height=' + params.layout.sHeight + '&dynamic&proportional=0';
|
|
851
852
|
if (platform === 'chromeOS') {
|
|
852
|
-
bgImageUrl =
|
|
853
|
+
bgImageUrl = composeMediaUrl({
|
|
854
|
+
uri: params.layout.bgImage
|
|
855
|
+
});
|
|
853
856
|
}
|
|
854
857
|
return bgImageUrl;
|
|
855
858
|
}
|
|
@@ -69557,7 +69560,8 @@ var initialMedia = {
|
|
|
69557
69560
|
on: function on(event, callback) {
|
|
69558
69561
|
return {};
|
|
69559
69562
|
},
|
|
69560
|
-
emitter: {}
|
|
69563
|
+
emitter: {},
|
|
69564
|
+
enableStat: false
|
|
69561
69565
|
};
|
|
69562
69566
|
|
|
69563
69567
|
/*
|
|
@@ -72812,6 +72816,7 @@ function Media(region, mediaId, xml, options, xlr) {
|
|
|
72812
72816
|
var mediaTimeCount = 0;
|
|
72813
72817
|
var emitter = createNanoEvents();
|
|
72814
72818
|
var mediaObject = _objectSpread2(_objectSpread2({}, initialMedia), props);
|
|
72819
|
+
var statsBC = new BroadcastChannel('statsBC');
|
|
72815
72820
|
var startMediaTimer = function startMediaTimer(media) {
|
|
72816
72821
|
mediaTimer = setInterval(function () {
|
|
72817
72822
|
mediaTimeCount++;
|
|
@@ -72835,12 +72840,32 @@ function Media(region, mediaId, xml, options, xlr) {
|
|
|
72835
72840
|
} else {
|
|
72836
72841
|
startMediaTimer(media);
|
|
72837
72842
|
}
|
|
72843
|
+
// Check if stats are enabled for the layout
|
|
72844
|
+
if (media.enableStat) {
|
|
72845
|
+
statsBC.postMessage({
|
|
72846
|
+
action: 'START_STAT',
|
|
72847
|
+
mediaId: parseInt(media.id),
|
|
72848
|
+
layoutId: media.region.layout.id,
|
|
72849
|
+
scheduleId: media.region.layout.scheduleId,
|
|
72850
|
+
type: 'media'
|
|
72851
|
+
});
|
|
72852
|
+
}
|
|
72838
72853
|
});
|
|
72839
72854
|
emitter.on('end', function (media) {
|
|
72840
72855
|
if (mediaTimer) {
|
|
72841
72856
|
clearInterval(mediaTimer);
|
|
72842
72857
|
mediaTimeCount = 0;
|
|
72843
72858
|
}
|
|
72859
|
+
// Check if stats are enabled for the layout
|
|
72860
|
+
if (media.enableStat) {
|
|
72861
|
+
statsBC.postMessage({
|
|
72862
|
+
action: 'END_STAT',
|
|
72863
|
+
mediaId: parseInt(media.id),
|
|
72864
|
+
layoutId: media.region.layout.id,
|
|
72865
|
+
scheduleId: media.region.layout.scheduleId,
|
|
72866
|
+
type: 'media'
|
|
72867
|
+
});
|
|
72868
|
+
}
|
|
72844
72869
|
media.region.playNextMedia();
|
|
72845
72870
|
});
|
|
72846
72871
|
mediaObject.on = function (event, callback) {
|
|
@@ -72848,7 +72873,7 @@ function Media(region, mediaId, xml, options, xlr) {
|
|
|
72848
72873
|
};
|
|
72849
72874
|
mediaObject.emitter = emitter;
|
|
72850
72875
|
mediaObject.init = function () {
|
|
72851
|
-
var _self$xml, _self$xml2, _self$xml3, _self$xml4, _self$xml5;
|
|
72876
|
+
var _self$xml, _self$xml2, _self$xml3, _self$xml4, _self$xml5, _self$xml6;
|
|
72852
72877
|
var self = mediaObject;
|
|
72853
72878
|
self.id = props.mediaId;
|
|
72854
72879
|
self.fileId = ((_self$xml = self.xml) === null || _self$xml === void 0 ? void 0 : _self$xml.getAttribute('fileId')) || '';
|
|
@@ -72858,9 +72883,10 @@ function Media(region, mediaId, xml, options, xlr) {
|
|
|
72858
72883
|
self.mediaType = ((_self$xml2 = self.xml) === null || _self$xml2 === void 0 ? void 0 : _self$xml2.getAttribute('type')) || '';
|
|
72859
72884
|
self.render = ((_self$xml3 = self.xml) === null || _self$xml3 === void 0 ? void 0 : _self$xml3.getAttribute('render')) || '';
|
|
72860
72885
|
self.duration = parseInt((_self$xml4 = self.xml) === null || _self$xml4 === void 0 ? void 0 : _self$xml4.getAttribute('duration')) || 0;
|
|
72886
|
+
self.enableStat = Boolean(((_self$xml5 = self.xml) === null || _self$xml5 === void 0 ? void 0 : _self$xml5.getAttribute('enableStat')) || false);
|
|
72861
72887
|
self.options = _objectSpread2({}, props.options);
|
|
72862
72888
|
var $mediaIframe = document.createElement('iframe');
|
|
72863
|
-
var mediaOptions = (_self$
|
|
72889
|
+
var mediaOptions = (_self$xml6 = self.xml) === null || _self$xml6 === void 0 ? void 0 : _self$xml6.getElementsByTagName('options');
|
|
72864
72890
|
if (mediaOptions) {
|
|
72865
72891
|
for (var _i = 0, _Array$from = Array.from(mediaOptions); _i < _Array$from.length; _i++) {
|
|
72866
72892
|
var _options = _Array$from[_i];
|
|
@@ -73888,9 +73914,19 @@ function Layout(data, options, xlr, layout) {
|
|
|
73888
73914
|
layout: layout || initialLayout
|
|
73889
73915
|
};
|
|
73890
73916
|
var emitter = createNanoEvents();
|
|
73917
|
+
var statsBC = new BroadcastChannel('statsBC');
|
|
73891
73918
|
emitter.on('start', function (layout) {
|
|
73892
73919
|
layout.done = false;
|
|
73893
73920
|
console.debug('Layout start emitted > Layout ID > ', layout.id);
|
|
73921
|
+
// Check if stats are enabled for the layout
|
|
73922
|
+
if (layout.enableStat) {
|
|
73923
|
+
statsBC.postMessage({
|
|
73924
|
+
action: 'START_STAT',
|
|
73925
|
+
layoutId: layout.id,
|
|
73926
|
+
scheduleId: layout.scheduleId,
|
|
73927
|
+
type: 'layout'
|
|
73928
|
+
});
|
|
73929
|
+
}
|
|
73894
73930
|
});
|
|
73895
73931
|
emitter.on('end', /*#__PURE__*/function () {
|
|
73896
73932
|
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(layout) {
|
|
@@ -73908,13 +73944,22 @@ function Layout(data, options, xlr, layout) {
|
|
|
73908
73944
|
if ($layout !== null) {
|
|
73909
73945
|
$layout.remove();
|
|
73910
73946
|
}
|
|
73947
|
+
// Check if stats are enabled for the layout
|
|
73948
|
+
if (layout.enableStat) {
|
|
73949
|
+
statsBC.postMessage({
|
|
73950
|
+
action: 'END_STAT',
|
|
73951
|
+
layoutId: layout.id,
|
|
73952
|
+
scheduleId: layout.scheduleId,
|
|
73953
|
+
type: 'layout'
|
|
73954
|
+
});
|
|
73955
|
+
}
|
|
73911
73956
|
if (xlr.config.platform !== 'CMS') {
|
|
73912
73957
|
// Transition next layout to current layout and prepare next layout if exist
|
|
73913
73958
|
xlr.prepareLayouts().then(function (parent) {
|
|
73914
73959
|
xlr.playSchedules(parent);
|
|
73915
73960
|
});
|
|
73916
73961
|
}
|
|
73917
|
-
case
|
|
73962
|
+
case 7:
|
|
73918
73963
|
case "end":
|
|
73919
73964
|
return _context.stop();
|
|
73920
73965
|
}
|
|
@@ -73952,7 +73997,7 @@ function Layout(data, options, xlr, layout) {
|
|
|
73952
73997
|
layoutObject.parseXlf();
|
|
73953
73998
|
};
|
|
73954
73999
|
layoutObject.parseXlf = function () {
|
|
73955
|
-
var _layout$layoutNode, _layout$layoutNode2, _layout$layoutNode3, _layout$layoutNode4, _layout$layoutNode5, _layout$layoutNode6, _layout$layoutNode7, _layout$layoutNode8;
|
|
74000
|
+
var _layout$layoutNode, _layout$layoutNode2, _layout$layoutNode3, _layout$layoutNode4, _layout$layoutNode5, _layout$layoutNode6, _layout$layoutNode7, _layout$layoutNode8, _layout$layoutNode9;
|
|
73956
74001
|
var layout = this;
|
|
73957
74002
|
var options = layout.options;
|
|
73958
74003
|
layout.done = false;
|
|
@@ -73981,6 +74026,7 @@ function Layout(data, options, xlr, layout) {
|
|
|
73981
74026
|
layout.xw = Number((_layout$layoutNode = layout.layoutNode) === null || _layout$layoutNode === void 0 || (_layout$layoutNode = _layout$layoutNode.firstElementChild) === null || _layout$layoutNode === void 0 ? void 0 : _layout$layoutNode.getAttribute('width'));
|
|
73982
74027
|
layout.xh = Number((_layout$layoutNode2 = layout.layoutNode) === null || _layout$layoutNode2 === void 0 || (_layout$layoutNode2 = _layout$layoutNode2.firstElementChild) === null || _layout$layoutNode2 === void 0 ? void 0 : _layout$layoutNode2.getAttribute('height'));
|
|
73983
74028
|
layout.zIndex = Number((_layout$layoutNode3 = layout.layoutNode) === null || _layout$layoutNode3 === void 0 || (_layout$layoutNode3 = _layout$layoutNode3.firstElementChild) === null || _layout$layoutNode3 === void 0 ? void 0 : _layout$layoutNode3.getAttribute('zindex')) || 0;
|
|
74029
|
+
layout.enableStat = Boolean(((_layout$layoutNode4 = layout.layoutNode) === null || _layout$layoutNode4 === void 0 || (_layout$layoutNode4 = _layout$layoutNode4.firstElementChild) === null || _layout$layoutNode4 === void 0 ? void 0 : _layout$layoutNode4.getAttribute('enableStat')) || false);
|
|
73984
74030
|
/* Calculate Scale Factor */
|
|
73985
74031
|
layout.scaleFactor = Math.min(layout.sw / layout.xw, layout.sh / layout.xh);
|
|
73986
74032
|
layout.sWidth = layout.xw * layout.scaleFactor;
|
|
@@ -73999,8 +74045,8 @@ function Layout(data, options, xlr, layout) {
|
|
|
73999
74045
|
$layout.style.zIndex = "".concat(layout.zIndex);
|
|
74000
74046
|
}
|
|
74001
74047
|
/* Set the layout background */
|
|
74002
|
-
layout.bgColor = ((_layout$
|
|
74003
|
-
layout.bgImage = ((_layout$
|
|
74048
|
+
layout.bgColor = ((_layout$layoutNode5 = layout.layoutNode) === null || _layout$layoutNode5 === void 0 || (_layout$layoutNode5 = _layout$layoutNode5.firstElementChild) === null || _layout$layoutNode5 === void 0 ? void 0 : _layout$layoutNode5.getAttribute('bgcolor')) || '';
|
|
74049
|
+
layout.bgImage = ((_layout$layoutNode6 = layout.layoutNode) === null || _layout$layoutNode6 === void 0 || (_layout$layoutNode6 = _layout$layoutNode6.firstElementChild) === null || _layout$layoutNode6 === void 0 ? void 0 : _layout$layoutNode6.getAttribute('background')) || '';
|
|
74004
74050
|
if (!(layout.bgImage === "" || typeof layout.bgImage === 'undefined')) {
|
|
74005
74051
|
/* Extract the image ID from the filename */
|
|
74006
74052
|
layout.bgId = layout.bgImage.substring(0, layout.bgImage.indexOf('.'));
|
|
@@ -74023,19 +74069,19 @@ function Layout(data, options, xlr, layout) {
|
|
|
74023
74069
|
$layout.style.display = 'none';
|
|
74024
74070
|
}
|
|
74025
74071
|
// Create actions
|
|
74026
|
-
var layoutActions = Array.from((layout === null || layout === void 0 || (_layout$
|
|
74072
|
+
var layoutActions = Array.from((layout === null || layout === void 0 || (_layout$layoutNode7 = layout.layoutNode) === null || _layout$layoutNode7 === void 0 ? void 0 : _layout$layoutNode7.getElementsByTagName('action')) || []);
|
|
74027
74073
|
Array.from(layoutActions).forEach(function (actionXml, indx) {
|
|
74028
74074
|
layout.actions.push(new Action((actionXml === null || actionXml === void 0 ? void 0 : actionXml.getAttribute('id')) || '', actionXml));
|
|
74029
74075
|
});
|
|
74030
74076
|
// Create interactive actions
|
|
74031
74077
|
layout.actionController = new ActionController(layout, layout.actions, options);
|
|
74032
74078
|
// Create drawer
|
|
74033
|
-
var layoutDrawers = Array.from((layout === null || layout === void 0 || (_layout$
|
|
74079
|
+
var layoutDrawers = Array.from((layout === null || layout === void 0 || (_layout$layoutNode8 = layout.layoutNode) === null || _layout$layoutNode8 === void 0 ? void 0 : _layout$layoutNode8.getElementsByTagName('drawer')) || []);
|
|
74034
74080
|
Array.from(layoutDrawers).forEach(function (layoutDrawerXml) {
|
|
74035
74081
|
layout.drawer = layoutDrawerXml;
|
|
74036
74082
|
});
|
|
74037
74083
|
// Create regions
|
|
74038
|
-
var layoutRegions = Array.from((layout === null || layout === void 0 || (_layout$
|
|
74084
|
+
var layoutRegions = Array.from((layout === null || layout === void 0 || (_layout$layoutNode9 = layout.layoutNode) === null || _layout$layoutNode9 === void 0 ? void 0 : _layout$layoutNode9.getElementsByTagName('region')) || []);
|
|
74039
74085
|
Array.from(layoutRegions).forEach(function (regionXml, indx) {
|
|
74040
74086
|
var regionObj = Region(layout, regionXml, (regionXml === null || regionXml === void 0 ? void 0 : regionXml.getAttribute('id')) || '', options, xlr);
|
|
74041
74087
|
regionObj.index = indx;
|
|
@@ -74553,6 +74599,7 @@ function XiboLayoutRenderer(inputLayouts, options) {
|
|
|
74553
74599
|
var xlrLayoutObj = initialLayout;
|
|
74554
74600
|
xlrLayoutObj.id = Number(inputLayout.layoutId);
|
|
74555
74601
|
xlrLayoutObj.layoutId = Number(inputLayout.layoutId);
|
|
74602
|
+
xlrLayoutObj.scheduleId = (inputLayout === null || inputLayout === void 0 ? void 0 : inputLayout.scheduleId) || undefined;
|
|
74556
74603
|
xlrLayoutObj.options = newOptions;
|
|
74557
74604
|
xlrLayoutObj.index = getIndexByLayoutId(_this3.inputLayouts, xlrLayoutObj.layoutId).index;
|
|
74558
74605
|
resolve(Layout(layoutXlfNode, newOptions, self, xlrLayoutObj));
|