@xiboplayer/pwa 0.3.1 → 0.3.2
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/assets/cache-proxy-CrlayfSe.js +2 -0
- package/dist/assets/cache-proxy-CrlayfSe.js.map +1 -0
- package/dist/assets/cms-api-Ce7EVg5h.js +2 -0
- package/dist/assets/cms-api-Ce7EVg5h.js.map +1 -0
- package/dist/assets/html2canvas.esm-CBrSDip1.js +23 -0
- package/dist/assets/html2canvas.esm-CBrSDip1.js.map +1 -0
- package/dist/assets/index-BF8qB-pu.js +2 -0
- package/dist/assets/index-BF8qB-pu.js.map +1 -0
- package/dist/assets/index-Baows0WY.js +2 -0
- package/dist/assets/index-Baows0WY.js.map +1 -0
- package/dist/assets/index-Be_IxwIZ.js +2 -0
- package/dist/assets/index-Be_IxwIZ.js.map +1 -0
- package/dist/assets/index-BhHwWvzx.js +2 -0
- package/dist/assets/index-BhHwWvzx.js.map +1 -0
- package/dist/assets/index-C77HSi9N.js +8 -0
- package/dist/assets/index-C77HSi9N.js.map +1 -0
- package/dist/assets/index-ChPoQ8Bt.js +607 -0
- package/dist/assets/index-ChPoQ8Bt.js.map +1 -0
- package/dist/assets/index-DPR3fBRV.js +2 -0
- package/dist/assets/index-DPR3fBRV.js.map +1 -0
- package/dist/assets/index-b1tfCACR.js +2 -0
- package/dist/assets/index-b1tfCACR.js.map +1 -0
- package/dist/assets/index-es8y3c70.js +2 -0
- package/dist/assets/index-es8y3c70.js.map +1 -0
- package/dist/assets/main-BUvkpHsV.js +44 -0
- package/dist/assets/main-BUvkpHsV.js.map +1 -0
- package/dist/assets/modulepreload-polyfill-B5Qt9EMX.js +2 -0
- package/dist/assets/modulepreload-polyfill-B5Qt9EMX.js.map +1 -0
- package/dist/assets/pdf-BnPRJEQ6.js +13 -0
- package/dist/assets/pdf-BnPRJEQ6.js.map +1 -0
- package/dist/assets/setup-B9GCkQRS.js +2 -0
- package/dist/assets/setup-B9GCkQRS.js.map +1 -0
- package/dist/assets/xmds-client-MaDHqpeL.js +16 -0
- package/dist/assets/xmds-client-MaDHqpeL.js.map +1 -0
- package/dist/index.html +130 -0
- package/dist/setup.html +371 -0
- package/dist/sw-pwa.js +2 -0
- package/dist/sw-pwa.js.map +1 -0
- package/dist/sw.test.js +271 -0
- package/package.json +9 -8
|
@@ -0,0 +1,607 @@
|
|
|
1
|
+
import{L as A,R as E}from"./main-BUvkpHsV.js";import"./modulepreload-polyfill-B5Qt9EMX.js";import"./cms-api-Ce7EVg5h.js";import"./cache-proxy-CrlayfSe.js";const T="0.3.1",R={version:T};class F{constructor(e){this.xmds=e}async translateXLF(e,t,n){const r=new DOMParser().parseFromString(t,"text/xml"),i=r.querySelector("layout");if(!i)throw new Error("Invalid XLF: no <layout> element");const o=parseInt(i.getAttribute("width")||"1920"),d=parseInt(i.getAttribute("height")||"1080"),p=i.getAttribute("bgcolor")||"#000000",c=[];for(const u of r.querySelectorAll("region"))c.push(await this.translateRegion(e,u,n));return this.generateHTML(o,d,p,c)}async translateRegion(e,t,n){const a=t.getAttribute("id"),r=parseInt(t.getAttribute("width")),i=parseInt(t.getAttribute("height")),o=parseInt(t.getAttribute("top")),d=parseInt(t.getAttribute("left")),p=parseInt(t.getAttribute("zindex")||"0"),c=[];for(const u of t.querySelectorAll("media"))c.push(await this.translateMedia(e,a,u,n));return{id:a,width:r,height:i,top:o,left:d,zindex:p,media:c}}async translateMedia(e,t,n,a){const r=n.getAttribute("type"),i=parseInt(n.getAttribute("duration")||"10"),o=n.getAttribute("id"),d=n.querySelector("options"),p=n.querySelector("raw"),c={};if(d)for(const g of d.children)c[g.tagName]=g.textContent;const u={in:null,out:null},m=n.querySelector("options > transIn"),y=n.querySelector("options > transOut"),f=n.querySelector("options > transInDuration"),w=n.querySelector("options > transOutDuration"),$=n.querySelector("options > transInDirection"),x=n.querySelector("options > transOutDirection");m&&m.textContent&&(u.in={type:m.textContent,duration:parseInt((f==null?void 0:f.textContent)||"1000"),direction:($==null?void 0:$.textContent)||"N"}),y&&y.textContent&&(u.out={type:y.textContent,duration:parseInt((w==null?void 0:w.textContent)||"1000"),direction:(x==null?void 0:x.textContent)||"N"});let l=p?p.textContent:"";if(["clock","clock-digital","clock-analogue","calendar","weather","currencies","stocks","twitter","global","embedded","text","ticker"].some(g=>r.includes(g))){let g=3,v=null;for(let s=1;s<=g;s++)try{console.log(`[Layout] Fetching resource for ${r} widget (layout=${e}, region=${t}, media=${o}) - attempt ${s}/${g}`),l=await this.xmds.getResource(e,t,o),console.log(`[Layout] Got resource HTML (${l.length} chars)`);const h=await a.cacheWidgetHtml(e,t,o,l);c.widgetCacheKey=h;break}catch(h){if(v=h,console.warn(`[Layout] Failed to get resource (attempt ${s}/${g}):`,h.message),s<g){const I=s*2e3;console.log(`[Layout] Retrying in ${I}ms...`),await new Promise(b=>setTimeout(b,I))}}if(!l&&v){console.warn("[Layout] All retries failed, checking for cached widget HTML...");try{const s=`/cache/widget/${e}/${t}/${o}.html`,h=await a.cache.match(new Request(window.location.origin+"/player"+s));h?(l=await h.text(),c.widgetCacheKey=s,console.log(`[Layout] Using cached widget HTML (${l.length} chars) - CMS update pending`)):(console.error(`[Layout] No cached version available for widget ${o}`),l='<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:18px;">Content updating...</div>')}catch(s){console.error("[Layout] Cache fallback failed:",s),l='<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:18px;">Content updating...</div>'}}}return{type:r,duration:i,id:o,options:c,raw:l,transitions:u}}generateHTML(e,t,n,a){const r=a.map(o=>this.generateRegionHTML(o)).join(`
|
|
2
|
+
`),i=a.map(o=>this.generateRegionJS(o)).join(`,
|
|
3
|
+
`);return`<!DOCTYPE html>
|
|
4
|
+
<html>
|
|
5
|
+
<head>
|
|
6
|
+
<meta charset="utf-8">
|
|
7
|
+
<meta name="viewport" content="width=${e}, height=${t}">
|
|
8
|
+
<style>
|
|
9
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
10
|
+
html, body { width: 100%; height: 100%; overflow: hidden; }
|
|
11
|
+
body { background-color: ${n}; }
|
|
12
|
+
.region {
|
|
13
|
+
position: absolute;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
}
|
|
16
|
+
.media {
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 100%;
|
|
19
|
+
object-fit: contain;
|
|
20
|
+
}
|
|
21
|
+
iframe {
|
|
22
|
+
border: none;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
}
|
|
26
|
+
</style>
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
${r}
|
|
30
|
+
<script>
|
|
31
|
+
// Transition utilities
|
|
32
|
+
window.Transitions = {
|
|
33
|
+
fadeIn(element, duration) {
|
|
34
|
+
const keyframes = [
|
|
35
|
+
{ opacity: 0 },
|
|
36
|
+
{ opacity: 1 }
|
|
37
|
+
];
|
|
38
|
+
const timing = {
|
|
39
|
+
duration: duration,
|
|
40
|
+
easing: 'linear',
|
|
41
|
+
fill: 'forwards'
|
|
42
|
+
};
|
|
43
|
+
return element.animate(keyframes, timing);
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
fadeOut(element, duration) {
|
|
47
|
+
const keyframes = [
|
|
48
|
+
{ opacity: 1 },
|
|
49
|
+
{ opacity: 0 }
|
|
50
|
+
];
|
|
51
|
+
const timing = {
|
|
52
|
+
duration: duration,
|
|
53
|
+
easing: 'linear',
|
|
54
|
+
fill: 'forwards'
|
|
55
|
+
};
|
|
56
|
+
return element.animate(keyframes, timing);
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
getFlyKeyframes(direction, width, height, isIn) {
|
|
60
|
+
const dirMap = {
|
|
61
|
+
'N': { x: 0, y: isIn ? -height : height },
|
|
62
|
+
'NE': { x: isIn ? width : -width, y: isIn ? -height : height },
|
|
63
|
+
'E': { x: isIn ? width : -width, y: 0 },
|
|
64
|
+
'SE': { x: isIn ? width : -width, y: isIn ? height : -height },
|
|
65
|
+
'S': { x: 0, y: isIn ? height : -height },
|
|
66
|
+
'SW': { x: isIn ? -width : width, y: isIn ? height : -height },
|
|
67
|
+
'W': { x: isIn ? -width : width, y: 0 },
|
|
68
|
+
'NW': { x: isIn ? -width : width, y: isIn ? -height : height }
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
const offset = dirMap[direction] || dirMap['N'];
|
|
72
|
+
|
|
73
|
+
if (isIn) {
|
|
74
|
+
return [
|
|
75
|
+
{ transform: \`translate(\${offset.x}px, \${offset.y}px)\`, opacity: 0 },
|
|
76
|
+
{ transform: 'translate(0, 0)', opacity: 1 }
|
|
77
|
+
];
|
|
78
|
+
} else {
|
|
79
|
+
return [
|
|
80
|
+
{ transform: 'translate(0, 0)', opacity: 1 },
|
|
81
|
+
{ transform: \`translate(\${offset.x}px, \${offset.y}px)\`, opacity: 0 }
|
|
82
|
+
];
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
|
|
86
|
+
flyIn(element, duration, direction, regionWidth, regionHeight) {
|
|
87
|
+
const keyframes = this.getFlyKeyframes(direction, regionWidth, regionHeight, true);
|
|
88
|
+
const timing = {
|
|
89
|
+
duration: duration,
|
|
90
|
+
easing: 'ease-out',
|
|
91
|
+
fill: 'forwards'
|
|
92
|
+
};
|
|
93
|
+
return element.animate(keyframes, timing);
|
|
94
|
+
},
|
|
95
|
+
|
|
96
|
+
flyOut(element, duration, direction, regionWidth, regionHeight) {
|
|
97
|
+
const keyframes = this.getFlyKeyframes(direction, regionWidth, regionHeight, false);
|
|
98
|
+
const timing = {
|
|
99
|
+
duration: duration,
|
|
100
|
+
easing: 'ease-in',
|
|
101
|
+
fill: 'forwards'
|
|
102
|
+
};
|
|
103
|
+
return element.animate(keyframes, timing);
|
|
104
|
+
},
|
|
105
|
+
|
|
106
|
+
apply(element, transitionConfig, isIn, regionWidth, regionHeight) {
|
|
107
|
+
if (!transitionConfig || !transitionConfig.type) {
|
|
108
|
+
return null;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
const type = transitionConfig.type.toLowerCase();
|
|
112
|
+
const duration = transitionConfig.duration || 1000;
|
|
113
|
+
const direction = transitionConfig.direction || 'N';
|
|
114
|
+
|
|
115
|
+
switch (type) {
|
|
116
|
+
case 'fadein':
|
|
117
|
+
return isIn ? this.fadeIn(element, duration) : null;
|
|
118
|
+
case 'fadeout':
|
|
119
|
+
return isIn ? null : this.fadeOut(element, duration);
|
|
120
|
+
case 'flyin':
|
|
121
|
+
return isIn ? this.flyIn(element, duration, direction, regionWidth, regionHeight) : null;
|
|
122
|
+
case 'flyout':
|
|
123
|
+
return isIn ? null : this.flyOut(element, duration, direction, regionWidth, regionHeight);
|
|
124
|
+
default:
|
|
125
|
+
return null;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
const regions = {
|
|
131
|
+
${i}
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
// Auto-start all regions
|
|
135
|
+
Object.keys(regions).forEach(id => {
|
|
136
|
+
playRegion(id);
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
function playRegion(id) {
|
|
140
|
+
const region = regions[id];
|
|
141
|
+
if (!region || region.media.length === 0) return;
|
|
142
|
+
|
|
143
|
+
// If only one media item, just show it and don't cycle (arexibo behavior)
|
|
144
|
+
if (region.media.length === 1) {
|
|
145
|
+
const media = region.media[0];
|
|
146
|
+
if (media.start) media.start();
|
|
147
|
+
return; // Don't schedule stop/restart
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Multiple media items - cycle normally
|
|
151
|
+
let currentIndex = 0;
|
|
152
|
+
|
|
153
|
+
function playNext() {
|
|
154
|
+
const media = region.media[currentIndex];
|
|
155
|
+
if (media.start) media.start();
|
|
156
|
+
|
|
157
|
+
const duration = media.duration || 10;
|
|
158
|
+
setTimeout(() => {
|
|
159
|
+
if (media.stop) media.stop();
|
|
160
|
+
currentIndex = (currentIndex + 1) % region.media.length;
|
|
161
|
+
playNext();
|
|
162
|
+
}, duration * 1000);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
playNext();
|
|
166
|
+
}
|
|
167
|
+
<\/script>
|
|
168
|
+
</body>
|
|
169
|
+
</html>`}generateRegionHTML(e){return` <div id="region_${e.id}" class="region" style="
|
|
170
|
+
left: ${e.left}px;
|
|
171
|
+
top: ${e.top}px;
|
|
172
|
+
width: ${e.width}px;
|
|
173
|
+
height: ${e.height}px;
|
|
174
|
+
z-index: ${e.zindex};
|
|
175
|
+
"></div>`}generateRegionJS(e){const t=e.media.map(n=>this.generateMediaJS(n,e.id)).join(`,
|
|
176
|
+
`);return` '${e.id}': {
|
|
177
|
+
media: [
|
|
178
|
+
${t}
|
|
179
|
+
]
|
|
180
|
+
}`}_generateIframeWidgetJS(e,t,n,a,r){const i=`widget_${e}_${t}`,o=`() => {
|
|
181
|
+
const region = document.getElementById('region_${e}');
|
|
182
|
+
let iframe = document.getElementById('${i}');
|
|
183
|
+
if (!iframe) {
|
|
184
|
+
iframe = document.createElement('iframe');
|
|
185
|
+
iframe.id = '${i}';
|
|
186
|
+
iframe.src = '${n}';
|
|
187
|
+
iframe.style.width = '100%';
|
|
188
|
+
iframe.style.height = '100%';
|
|
189
|
+
iframe.style.border = 'none';
|
|
190
|
+
iframe.scrolling = 'no';
|
|
191
|
+
iframe.style.opacity = '0';
|
|
192
|
+
region.innerHTML = '';
|
|
193
|
+
region.appendChild(iframe);
|
|
194
|
+
|
|
195
|
+
// Apply transition after iframe loads
|
|
196
|
+
iframe.onload = () => {
|
|
197
|
+
const transIn = ${a};
|
|
198
|
+
if (transIn && window.Transitions) {
|
|
199
|
+
const regionRect = region.getBoundingClientRect();
|
|
200
|
+
window.Transitions.apply(iframe, transIn, true, regionRect.width, regionRect.height);
|
|
201
|
+
} else {
|
|
202
|
+
iframe.style.opacity = '1';
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
} else {
|
|
206
|
+
iframe.style.display = 'block';
|
|
207
|
+
iframe.style.opacity = '1';
|
|
208
|
+
}
|
|
209
|
+
}`,d=`() => {
|
|
210
|
+
const region = document.getElementById('region_${e}');
|
|
211
|
+
const iframe = document.getElementById('${i}');
|
|
212
|
+
if (iframe) {
|
|
213
|
+
const transOut = ${r};
|
|
214
|
+
if (transOut && window.Transitions) {
|
|
215
|
+
const regionRect = region.getBoundingClientRect();
|
|
216
|
+
const animation = window.Transitions.apply(iframe, transOut, false, regionRect.width, regionRect.height);
|
|
217
|
+
if (animation) {
|
|
218
|
+
animation.onfinish = () => {
|
|
219
|
+
iframe.style.display = 'none';
|
|
220
|
+
};
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
iframe.style.display = 'none';
|
|
225
|
+
}
|
|
226
|
+
}`;return{startFn:o,stopFn:d}}generateMediaJS(e,t){var d,p;const n=e.duration||10,a=(d=e.transitions)!=null&&d.in?JSON.stringify(e.transitions.in):"null",r=(p=e.transitions)!=null&&p.out?JSON.stringify(e.transitions.out):"null";let i="null",o="null";switch(e.type){case"image":const c=`${window.location.origin}/player/cache/media/${e.options.uri}`;i=`() => {
|
|
227
|
+
const region = document.getElementById('region_${t}');
|
|
228
|
+
const img = document.createElement('img');
|
|
229
|
+
img.className = 'media';
|
|
230
|
+
img.src = '${c}';
|
|
231
|
+
img.style.opacity = '0';
|
|
232
|
+
region.innerHTML = '';
|
|
233
|
+
region.appendChild(img);
|
|
234
|
+
|
|
235
|
+
// Apply transition
|
|
236
|
+
const transIn = ${a};
|
|
237
|
+
if (transIn && window.Transitions) {
|
|
238
|
+
const regionRect = region.getBoundingClientRect();
|
|
239
|
+
window.Transitions.apply(img, transIn, true, regionRect.width, regionRect.height);
|
|
240
|
+
} else {
|
|
241
|
+
img.style.opacity = '1';
|
|
242
|
+
}
|
|
243
|
+
}`;break;case"video":const u=`${window.location.origin}/player/cache/media/${e.options.uri}`,m=e.options.uri;i=`() => {
|
|
244
|
+
const region = document.getElementById('region_${t}');
|
|
245
|
+
const video = document.createElement('video');
|
|
246
|
+
video.className = 'media';
|
|
247
|
+
video.src = '${u}';
|
|
248
|
+
video.dataset.filename = '${m}';
|
|
249
|
+
video.autoplay = true;
|
|
250
|
+
video.muted = ${e.options.mute==="1"?"true":"false"};
|
|
251
|
+
video.loop = false;
|
|
252
|
+
video.style.width = '100%';
|
|
253
|
+
video.style.height = '100%';
|
|
254
|
+
video.style.objectFit = 'contain';
|
|
255
|
+
video.style.opacity = '0';
|
|
256
|
+
|
|
257
|
+
// Retry loading if cache completes while video is playing
|
|
258
|
+
const retryOnCache = (event) => {
|
|
259
|
+
if (event.detail.filename === '${m}' && video.error) {
|
|
260
|
+
console.log('[Video] Cache complete, reloading:', '${m}');
|
|
261
|
+
video.load();
|
|
262
|
+
video.play();
|
|
263
|
+
}
|
|
264
|
+
};
|
|
265
|
+
window.addEventListener('media-cached', retryOnCache);
|
|
266
|
+
video.dataset.cacheListener = 'attached';
|
|
267
|
+
|
|
268
|
+
region.innerHTML = '';
|
|
269
|
+
region.appendChild(video);
|
|
270
|
+
|
|
271
|
+
// Apply transition
|
|
272
|
+
const transIn = ${a};
|
|
273
|
+
if (transIn && window.Transitions) {
|
|
274
|
+
const regionRect = region.getBoundingClientRect();
|
|
275
|
+
window.Transitions.apply(video, transIn, true, regionRect.width, regionRect.height);
|
|
276
|
+
} else {
|
|
277
|
+
video.style.opacity = '1';
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
console.log('[Video] Playing:', '${e.options.uri}');
|
|
281
|
+
}`,o=`() => {
|
|
282
|
+
const region = document.getElementById('region_${t}');
|
|
283
|
+
const video = document.querySelector('#region_${t} video');
|
|
284
|
+
if (video) {
|
|
285
|
+
const transOut = ${r};
|
|
286
|
+
if (transOut && window.Transitions) {
|
|
287
|
+
const regionRect = region.getBoundingClientRect();
|
|
288
|
+
const animation = window.Transitions.apply(video, transOut, false, regionRect.width, regionRect.height);
|
|
289
|
+
if (animation) {
|
|
290
|
+
animation.onfinish = () => {
|
|
291
|
+
video.pause();
|
|
292
|
+
video.remove();
|
|
293
|
+
};
|
|
294
|
+
return;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
video.pause();
|
|
298
|
+
video.remove();
|
|
299
|
+
}
|
|
300
|
+
}`;break;case"text":case"ticker":if(e.options.widgetCacheKey){const v=`${window.location.origin}/player${e.options.widgetCacheKey}`,s=this._generateIframeWidgetJS(t,e.id,v,a,r);i=s.startFn,o=s.stopFn;break}case"audio":const y=`${window.location.origin}/player/cache/media/${e.options.uri}`,f=`audio_${t}_${e.id}`,w=e.options.loop==="1",$=(parseInt(e.options.volume||"100")/100).toFixed(2);i=`() => {
|
|
301
|
+
const region = document.getElementById('region_${t}');
|
|
302
|
+
|
|
303
|
+
// Create audio element
|
|
304
|
+
const audio = document.createElement('audio');
|
|
305
|
+
audio.id = '${f}';
|
|
306
|
+
audio.className = 'media';
|
|
307
|
+
audio.src = '${y}';
|
|
308
|
+
audio.autoplay = true;
|
|
309
|
+
audio.loop = ${w};
|
|
310
|
+
audio.volume = ${$};
|
|
311
|
+
|
|
312
|
+
// Create visual feedback container
|
|
313
|
+
const visualContainer = document.createElement('div');
|
|
314
|
+
visualContainer.className = 'audio-visual';
|
|
315
|
+
visualContainer.style.cssText = \`
|
|
316
|
+
width: 100%;
|
|
317
|
+
height: 100%;
|
|
318
|
+
display: flex;
|
|
319
|
+
flex-direction: column;
|
|
320
|
+
align-items: center;
|
|
321
|
+
justify-content: center;
|
|
322
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
323
|
+
opacity: 0;
|
|
324
|
+
\`;
|
|
325
|
+
|
|
326
|
+
// Audio icon
|
|
327
|
+
const icon = document.createElement('div');
|
|
328
|
+
icon.innerHTML = '♪';
|
|
329
|
+
icon.style.cssText = \`
|
|
330
|
+
font-size: 120px;
|
|
331
|
+
color: white;
|
|
332
|
+
margin-bottom: 20px;
|
|
333
|
+
animation: pulse 2s ease-in-out infinite;
|
|
334
|
+
\`;
|
|
335
|
+
|
|
336
|
+
// Audio info
|
|
337
|
+
const info = document.createElement('div');
|
|
338
|
+
info.style.cssText = \`
|
|
339
|
+
color: white;
|
|
340
|
+
font-size: 24px;
|
|
341
|
+
text-align: center;
|
|
342
|
+
padding: 0 20px;
|
|
343
|
+
\`;
|
|
344
|
+
info.textContent = 'Playing Audio';
|
|
345
|
+
|
|
346
|
+
// Filename
|
|
347
|
+
const filename = document.createElement('div');
|
|
348
|
+
filename.style.cssText = \`
|
|
349
|
+
color: rgba(255,255,255,0.7);
|
|
350
|
+
font-size: 16px;
|
|
351
|
+
margin-top: 10px;
|
|
352
|
+
\`;
|
|
353
|
+
filename.textContent = '${e.options.uri}';
|
|
354
|
+
|
|
355
|
+
visualContainer.appendChild(icon);
|
|
356
|
+
visualContainer.appendChild(info);
|
|
357
|
+
visualContainer.appendChild(filename);
|
|
358
|
+
|
|
359
|
+
region.innerHTML = '';
|
|
360
|
+
region.appendChild(audio);
|
|
361
|
+
region.appendChild(visualContainer);
|
|
362
|
+
|
|
363
|
+
// Add pulse animation
|
|
364
|
+
const style = document.createElement('style');
|
|
365
|
+
style.textContent = \`
|
|
366
|
+
@keyframes pulse {
|
|
367
|
+
0%, 100% { transform: scale(1); opacity: 1; }
|
|
368
|
+
50% { transform: scale(1.1); opacity: 0.8; }
|
|
369
|
+
}
|
|
370
|
+
\`;
|
|
371
|
+
document.head.appendChild(style);
|
|
372
|
+
|
|
373
|
+
// Apply transition
|
|
374
|
+
const transIn = ${a};
|
|
375
|
+
if (transIn && window.Transitions) {
|
|
376
|
+
const regionRect = region.getBoundingClientRect();
|
|
377
|
+
window.Transitions.apply(visualContainer, transIn, true, regionRect.width, regionRect.height);
|
|
378
|
+
} else {
|
|
379
|
+
visualContainer.style.opacity = '1';
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
console.log('[Audio] Playing:', '${y}', 'Volume:', ${$}, 'Loop:', ${w});
|
|
383
|
+
}`,o=`() => {
|
|
384
|
+
const audio = document.getElementById('${f}');
|
|
385
|
+
if (audio) {
|
|
386
|
+
audio.pause();
|
|
387
|
+
audio.remove();
|
|
388
|
+
}
|
|
389
|
+
const region = document.getElementById('region_${t}');
|
|
390
|
+
if (region) {
|
|
391
|
+
const visualContainer = region.querySelector('.audio-visual');
|
|
392
|
+
if (visualContainer) {
|
|
393
|
+
const transOut = ${r};
|
|
394
|
+
if (transOut && window.Transitions) {
|
|
395
|
+
const regionRect = region.getBoundingClientRect();
|
|
396
|
+
const animation = window.Transitions.apply(visualContainer, transOut, false, regionRect.width, regionRect.height);
|
|
397
|
+
if (animation) {
|
|
398
|
+
animation.onfinish = () => visualContainer.remove();
|
|
399
|
+
return;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
visualContainer.remove();
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
}`;break;case"pdf":const x=`${window.location.origin}/player/cache/media/${e.options.uri}`,l=`pdf_${t}_${e.id}`,C=n;i=`async () => {
|
|
406
|
+
const container = document.createElement('div');
|
|
407
|
+
container.className = 'media pdf-container';
|
|
408
|
+
container.id = '${l}';
|
|
409
|
+
container.style.width = '100%';
|
|
410
|
+
container.style.height = '100%';
|
|
411
|
+
container.style.overflow = 'hidden';
|
|
412
|
+
container.style.backgroundColor = '#525659';
|
|
413
|
+
container.style.opacity = '0';
|
|
414
|
+
container.style.position = 'relative';
|
|
415
|
+
|
|
416
|
+
const region = document.getElementById('region_${t}');
|
|
417
|
+
region.innerHTML = '';
|
|
418
|
+
region.appendChild(container);
|
|
419
|
+
|
|
420
|
+
// Load PDF.js if not already loaded
|
|
421
|
+
if (typeof pdfjsLib === 'undefined') {
|
|
422
|
+
try {
|
|
423
|
+
const pdfjsModule = await import('pdfjs-dist');
|
|
424
|
+
window.pdfjsLib = pdfjsModule;
|
|
425
|
+
pdfjsLib.GlobalWorkerOptions.workerSrc = '${window.location.origin}/player/pdf.worker.min.mjs';
|
|
426
|
+
} catch (error) {
|
|
427
|
+
console.error('[PDF] Failed to load PDF.js:', error);
|
|
428
|
+
container.innerHTML = '<div style="color:white;padding:20px;text-align:center;">PDF viewer unavailable</div>';
|
|
429
|
+
return;
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
// Render PDF with multi-page support
|
|
434
|
+
try {
|
|
435
|
+
const loadingTask = pdfjsLib.getDocument('${x}');
|
|
436
|
+
const pdf = await loadingTask.promise;
|
|
437
|
+
const totalPages = pdf.numPages;
|
|
438
|
+
|
|
439
|
+
// Calculate time per page (distribute total duration across all pages)
|
|
440
|
+
const timePerPage = (${C} * 1000) / totalPages; // milliseconds per page
|
|
441
|
+
|
|
442
|
+
console.log(\`[PDF] Loading: \${totalPages} pages, \${timePerPage}ms per page\`);
|
|
443
|
+
|
|
444
|
+
const containerWidth = container.offsetWidth || ${width};
|
|
445
|
+
const containerHeight = container.offsetHeight || ${height};
|
|
446
|
+
|
|
447
|
+
// Create page indicator
|
|
448
|
+
const pageIndicator = document.createElement('div');
|
|
449
|
+
pageIndicator.className = 'pdf-page-indicator';
|
|
450
|
+
pageIndicator.style.cssText = \`
|
|
451
|
+
position: absolute;
|
|
452
|
+
bottom: 10px;
|
|
453
|
+
right: 10px;
|
|
454
|
+
background: rgba(0,0,0,0.7);
|
|
455
|
+
color: white;
|
|
456
|
+
padding: 8px 12px;
|
|
457
|
+
border-radius: 4px;
|
|
458
|
+
font-size: 14px;
|
|
459
|
+
z-index: 10;
|
|
460
|
+
\`;
|
|
461
|
+
container.appendChild(pageIndicator);
|
|
462
|
+
|
|
463
|
+
let currentPage = 1;
|
|
464
|
+
let pageTimers = [];
|
|
465
|
+
|
|
466
|
+
// Function to render a single page
|
|
467
|
+
async function renderPage(pageNum) {
|
|
468
|
+
const page = await pdf.getPage(pageNum);
|
|
469
|
+
const viewport = page.getViewport({ scale: 1 });
|
|
470
|
+
|
|
471
|
+
// Calculate scale to fit page within container
|
|
472
|
+
const scaleX = containerWidth / viewport.width;
|
|
473
|
+
const scaleY = containerHeight / viewport.height;
|
|
474
|
+
const scale = Math.min(scaleX, scaleY);
|
|
475
|
+
|
|
476
|
+
const scaledViewport = page.getViewport({ scale });
|
|
477
|
+
|
|
478
|
+
const canvas = document.createElement('canvas');
|
|
479
|
+
canvas.className = 'pdf-page';
|
|
480
|
+
const context = canvas.getContext('2d');
|
|
481
|
+
canvas.width = scaledViewport.width;
|
|
482
|
+
canvas.height = scaledViewport.height;
|
|
483
|
+
|
|
484
|
+
// Center canvas in container
|
|
485
|
+
canvas.style.cssText = \`
|
|
486
|
+
display: block;
|
|
487
|
+
margin: auto;
|
|
488
|
+
margin-top: \${Math.max(0, (containerHeight - scaledViewport.height) / 2)}px;
|
|
489
|
+
position: absolute;
|
|
490
|
+
top: 0;
|
|
491
|
+
left: 50%;
|
|
492
|
+
transform: translateX(-50%);
|
|
493
|
+
opacity: 0;
|
|
494
|
+
transition: opacity 0.5s ease-in-out;
|
|
495
|
+
\`;
|
|
496
|
+
|
|
497
|
+
container.appendChild(canvas);
|
|
498
|
+
|
|
499
|
+
await page.render({
|
|
500
|
+
canvasContext: context,
|
|
501
|
+
viewport: scaledViewport
|
|
502
|
+
}).promise;
|
|
503
|
+
|
|
504
|
+
// Fade in new page
|
|
505
|
+
setTimeout(() => canvas.style.opacity = '1', 50);
|
|
506
|
+
|
|
507
|
+
return canvas;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
// Function to cycle through pages
|
|
511
|
+
async function cyclePage() {
|
|
512
|
+
// Update page indicator
|
|
513
|
+
pageIndicator.textContent = \`Page \${currentPage} / \${totalPages}\`;
|
|
514
|
+
|
|
515
|
+
// Remove old pages
|
|
516
|
+
const oldPages = container.querySelectorAll('.pdf-page');
|
|
517
|
+
oldPages.forEach(oldPage => {
|
|
518
|
+
if (oldPage !== container.lastChild) {
|
|
519
|
+
oldPage.style.opacity = '0';
|
|
520
|
+
setTimeout(() => oldPage.remove(), 500);
|
|
521
|
+
}
|
|
522
|
+
});
|
|
523
|
+
|
|
524
|
+
// Render current page
|
|
525
|
+
await renderPage(currentPage);
|
|
526
|
+
|
|
527
|
+
console.log(\`[PDF] Showing page \${currentPage}/\${totalPages}\`);
|
|
528
|
+
|
|
529
|
+
// Schedule next page
|
|
530
|
+
if (totalPages > 1) {
|
|
531
|
+
const timer = setTimeout(() => {
|
|
532
|
+
currentPage = currentPage >= totalPages ? 1 : currentPage + 1;
|
|
533
|
+
cyclePage();
|
|
534
|
+
}, timePerPage);
|
|
535
|
+
pageTimers.push(timer);
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
// Start cycling
|
|
540
|
+
await cyclePage();
|
|
541
|
+
|
|
542
|
+
// Apply transition to container
|
|
543
|
+
const transIn = ${a};
|
|
544
|
+
if (transIn && window.Transitions) {
|
|
545
|
+
const regionRect = region.getBoundingClientRect();
|
|
546
|
+
window.Transitions.apply(container, transIn, true, regionRect.width, regionRect.height);
|
|
547
|
+
} else {
|
|
548
|
+
container.style.opacity = '1';
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
// Store timers for cleanup
|
|
552
|
+
container.dataset.pageTimers = JSON.stringify(pageTimers.map(t => t));
|
|
553
|
+
|
|
554
|
+
} catch (error) {
|
|
555
|
+
console.error('[PDF] Render failed:', error);
|
|
556
|
+
container.innerHTML = '<div style="color:white;padding:20px;text-align:center;">Failed to load PDF</div>';
|
|
557
|
+
container.style.opacity = '1';
|
|
558
|
+
}
|
|
559
|
+
}`,o=`() => {
|
|
560
|
+
const region = document.getElementById('region_${t}');
|
|
561
|
+
const container = document.getElementById('${l}');
|
|
562
|
+
if (container) {
|
|
563
|
+
// Clear page cycling timers
|
|
564
|
+
const timers = container.dataset.pageTimers;
|
|
565
|
+
if (timers) {
|
|
566
|
+
try {
|
|
567
|
+
JSON.parse(timers).forEach(t => clearTimeout(t));
|
|
568
|
+
} catch (e) {}
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
const transOut = ${r};
|
|
572
|
+
if (transOut && window.Transitions) {
|
|
573
|
+
const regionRect = region.getBoundingClientRect();
|
|
574
|
+
const animation = window.Transitions.apply(container, transOut, false, regionRect.width, regionRect.height);
|
|
575
|
+
if (animation) {
|
|
576
|
+
animation.onfinish = () => {
|
|
577
|
+
container.remove();
|
|
578
|
+
};
|
|
579
|
+
return;
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
container.remove();
|
|
583
|
+
}
|
|
584
|
+
}`;break;case"webpage":const g=e.options.uri;i=`() => {
|
|
585
|
+
const region = document.getElementById('region_${t}');
|
|
586
|
+
const iframe = document.createElement('iframe');
|
|
587
|
+
iframe.src = '${g}';
|
|
588
|
+
iframe.style.opacity = '0';
|
|
589
|
+
region.innerHTML = '';
|
|
590
|
+
region.appendChild(iframe);
|
|
591
|
+
|
|
592
|
+
// Apply transition after iframe loads
|
|
593
|
+
iframe.onload = () => {
|
|
594
|
+
const transIn = ${a};
|
|
595
|
+
if (transIn && window.Transitions) {
|
|
596
|
+
const regionRect = region.getBoundingClientRect();
|
|
597
|
+
window.Transitions.apply(iframe, transIn, true, regionRect.width, regionRect.height);
|
|
598
|
+
} else {
|
|
599
|
+
iframe.style.opacity = '1';
|
|
600
|
+
}
|
|
601
|
+
};
|
|
602
|
+
}`;break;default:if(e.options.widgetCacheKey){const v=`${window.location.origin}/player${e.options.widgetCacheKey}`,s=this._generateIframeWidgetJS(t,e.id,v,a,r);i=s.startFn,o=s.stopFn}else console.warn(`[Layout] Unsupported media type: ${e.type}`),i=`() => console.log('Unsupported media type: ${e.type}')`}return` {
|
|
603
|
+
start: ${i},
|
|
604
|
+
stop: ${o},
|
|
605
|
+
duration: ${n}
|
|
606
|
+
}`}}const M=R.version;export{A as LayoutPool,F as LayoutTranslator,E as RendererLite,M as VERSION};
|
|
607
|
+
//# sourceMappingURL=index-ChPoQ8Bt.js.map
|