@edm-webplayer/webplayer-angular 0.1.46 → 0.1.48
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.
|
@@ -148,9 +148,12 @@ class PlyrPlayerComponent {
|
|
|
148
148
|
});
|
|
149
149
|
}
|
|
150
150
|
getControlsSafeZone() {
|
|
151
|
-
const controls = (this.plyr?.elements?.controls ??
|
|
151
|
+
const controls = (this.plyr?.elements?.controls ??
|
|
152
|
+
null);
|
|
152
153
|
const menuHeight = this.getOpenMenuHeight();
|
|
153
|
-
const baseSafeZone = this.isTouchDevice()
|
|
154
|
+
const baseSafeZone = this.isTouchDevice()
|
|
155
|
+
? this.controlsSafeZonePxTouch
|
|
156
|
+
: this.controlsSafeZonePxDesktop;
|
|
154
157
|
if (!controls) {
|
|
155
158
|
return Math.max(baseSafeZone, menuHeight + 5);
|
|
156
159
|
}
|
|
@@ -169,8 +172,7 @@ class PlyrPlayerComponent {
|
|
|
169
172
|
}
|
|
170
173
|
getOverlaySafeZone() {
|
|
171
174
|
const host = this.config?.video_host;
|
|
172
|
-
if (this.overlayBlockAll &&
|
|
173
|
-
(host === 'youtube' || host === 'vimeo')) {
|
|
175
|
+
if (this.overlayBlockAll && (host === "youtube" || host === "vimeo")) {
|
|
174
176
|
if (this.playbackEnded) {
|
|
175
177
|
return 0;
|
|
176
178
|
}
|
|
@@ -196,7 +198,7 @@ class PlyrPlayerComponent {
|
|
|
196
198
|
}
|
|
197
199
|
ngAfterViewInit() {
|
|
198
200
|
this.setupPlayer();
|
|
199
|
-
window.addEventListener(
|
|
201
|
+
window.addEventListener("message", this.onCastMessage);
|
|
200
202
|
}
|
|
201
203
|
ngOnChanges(changes) {
|
|
202
204
|
if (changes["config"] && this.plyr) {
|
|
@@ -204,10 +206,10 @@ class PlyrPlayerComponent {
|
|
|
204
206
|
}
|
|
205
207
|
}
|
|
206
208
|
applyTheme(colors) {
|
|
207
|
-
const STYLE_ID =
|
|
209
|
+
const STYLE_ID = "webplayer-theme-vars";
|
|
208
210
|
let styleEl = this.document.getElementById(STYLE_ID);
|
|
209
211
|
if (!styleEl) {
|
|
210
|
-
styleEl = this.document.createElement(
|
|
212
|
+
styleEl = this.document.createElement("style");
|
|
211
213
|
styleEl.id = STYLE_ID;
|
|
212
214
|
this.document.head.appendChild(styleEl);
|
|
213
215
|
}
|
|
@@ -215,7 +217,7 @@ class PlyrPlayerComponent {
|
|
|
215
217
|
const allPairs = [];
|
|
216
218
|
for (const key in colors) {
|
|
217
219
|
if (Object.prototype.hasOwnProperty.call(colors, key)) {
|
|
218
|
-
const cssVarName = `--theme-${key.replace(
|
|
220
|
+
const cssVarName = `--theme-${key.replace("progresss-", "progress-")}`;
|
|
219
221
|
const cssVarValue = String(colors[key]);
|
|
220
222
|
allPairs.push([cssVarName, cssVarValue]);
|
|
221
223
|
try {
|
|
@@ -225,7 +227,7 @@ class PlyrPlayerComponent {
|
|
|
225
227
|
}
|
|
226
228
|
}
|
|
227
229
|
const cssRule = `:root{
|
|
228
|
-
${allPairs.map(([n, v]) => ` ${n}: ${v};`).join(
|
|
230
|
+
${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
229
231
|
}`;
|
|
230
232
|
styleEl.textContent = cssRule;
|
|
231
233
|
}
|
|
@@ -237,7 +239,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
237
239
|
if (!candidate) {
|
|
238
240
|
return null;
|
|
239
241
|
}
|
|
240
|
-
return candidate.replace(/_/g,
|
|
242
|
+
return candidate.replace(/_/g, "-");
|
|
241
243
|
}
|
|
242
244
|
resolveLocale() {
|
|
243
245
|
const candidates = [
|
|
@@ -254,7 +256,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
254
256
|
return normalized;
|
|
255
257
|
}
|
|
256
258
|
}
|
|
257
|
-
return
|
|
259
|
+
return "pt-BR";
|
|
258
260
|
}
|
|
259
261
|
resolveCaptionsLanguage(locale) {
|
|
260
262
|
const explicit = this.normalizeLocaleCandidate(this.config?.captions_locale ??
|
|
@@ -265,7 +267,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
265
267
|
const baseLocale = explicit || locale;
|
|
266
268
|
if (!baseLocale)
|
|
267
269
|
return null;
|
|
268
|
-
const code = baseLocale.split(
|
|
270
|
+
const code = baseLocale.split("-")[0]?.trim();
|
|
269
271
|
return code ? code.toLowerCase() : null;
|
|
270
272
|
}
|
|
271
273
|
shouldHideVimeoRecommendations() {
|
|
@@ -304,7 +306,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
304
306
|
if (!container)
|
|
305
307
|
return null;
|
|
306
308
|
const wrapper = this.plyr?.elements?.wrapper ||
|
|
307
|
-
container.querySelector(
|
|
309
|
+
container.querySelector(".plyr__video-wrapper");
|
|
308
310
|
return wrapper || null;
|
|
309
311
|
}
|
|
310
312
|
ensureRecommendationBlocker() {
|
|
@@ -314,30 +316,30 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
314
316
|
const wrapper = this.getVideoWrapper();
|
|
315
317
|
if (!wrapper)
|
|
316
318
|
return null;
|
|
317
|
-
const blocker = this.document.createElement(
|
|
318
|
-
blocker.className =
|
|
319
|
-
blocker.style.position =
|
|
320
|
-
blocker.style.top =
|
|
321
|
-
blocker.style.left =
|
|
322
|
-
blocker.style.width =
|
|
323
|
-
blocker.style.height =
|
|
324
|
-
blocker.style.zIndex =
|
|
325
|
-
blocker.style.pointerEvents =
|
|
326
|
-
blocker.style.display =
|
|
327
|
-
blocker.style.background =
|
|
328
|
-
blocker.style.cursor =
|
|
329
|
-
const activeZone = this.document.createElement(
|
|
330
|
-
activeZone.className =
|
|
331
|
-
activeZone.style.position =
|
|
332
|
-
activeZone.style.top =
|
|
333
|
-
activeZone.style.left =
|
|
334
|
-
activeZone.style.width =
|
|
319
|
+
const blocker = this.document.createElement("div");
|
|
320
|
+
blocker.className = "plyr-recommendation-blocker";
|
|
321
|
+
blocker.style.position = "absolute";
|
|
322
|
+
blocker.style.top = "0";
|
|
323
|
+
blocker.style.left = "0";
|
|
324
|
+
blocker.style.width = "100%";
|
|
325
|
+
blocker.style.height = "100%";
|
|
326
|
+
blocker.style.zIndex = "11";
|
|
327
|
+
blocker.style.pointerEvents = "none";
|
|
328
|
+
blocker.style.display = "none";
|
|
329
|
+
blocker.style.background = "rgba(0,0,0,0)";
|
|
330
|
+
blocker.style.cursor = "pointer";
|
|
331
|
+
const activeZone = this.document.createElement("div");
|
|
332
|
+
activeZone.className = "plyr-recommendation-blocker__zone";
|
|
333
|
+
activeZone.style.position = "absolute";
|
|
334
|
+
activeZone.style.top = "0";
|
|
335
|
+
activeZone.style.left = "0";
|
|
336
|
+
activeZone.style.width = "100%";
|
|
335
337
|
activeZone.style.bottom = `20px`;
|
|
336
|
-
activeZone.style.pointerEvents =
|
|
337
|
-
activeZone.style.background =
|
|
338
|
-
activeZone.style.cursor =
|
|
339
|
-
activeZone.addEventListener(
|
|
340
|
-
activeZone.addEventListener(
|
|
338
|
+
activeZone.style.pointerEvents = "auto";
|
|
339
|
+
activeZone.style.background = "rgba(0,0,0,0)";
|
|
340
|
+
activeZone.style.cursor = "pointer";
|
|
341
|
+
activeZone.addEventListener("pointerdown", this.onTopBlockerPointerDown);
|
|
342
|
+
activeZone.addEventListener("click", this.onRecommendationBlockerClick);
|
|
341
343
|
blocker.appendChild(activeZone);
|
|
342
344
|
wrapper.appendChild(blocker);
|
|
343
345
|
this.recommendationBlocker = blocker;
|
|
@@ -346,7 +348,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
346
348
|
return blocker;
|
|
347
349
|
}
|
|
348
350
|
toggleRecommendationBlocker(active) {
|
|
349
|
-
if (this.config.video_host !== "youtube" &&
|
|
351
|
+
if (this.config.video_host !== "youtube" &&
|
|
352
|
+
this.config.video_host !== "vimeo") {
|
|
350
353
|
return;
|
|
351
354
|
}
|
|
352
355
|
const blocker = this.ensureRecommendationBlocker();
|
|
@@ -354,18 +357,18 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
354
357
|
return;
|
|
355
358
|
const activeZone = this.recommendationBlockerActiveZone;
|
|
356
359
|
if (active) {
|
|
357
|
-
blocker.style.display =
|
|
358
|
-
blocker.style.pointerEvents =
|
|
360
|
+
blocker.style.display = "block";
|
|
361
|
+
blocker.style.pointerEvents = "none";
|
|
359
362
|
if (activeZone) {
|
|
360
|
-
activeZone.style.pointerEvents =
|
|
363
|
+
activeZone.style.pointerEvents = "auto";
|
|
361
364
|
}
|
|
362
365
|
this.updateRecommendationBlockerSafeZone();
|
|
363
366
|
}
|
|
364
367
|
else {
|
|
365
|
-
blocker.style.display =
|
|
366
|
-
blocker.style.pointerEvents =
|
|
368
|
+
blocker.style.display = "none";
|
|
369
|
+
blocker.style.pointerEvents = "none";
|
|
367
370
|
if (activeZone) {
|
|
368
|
-
activeZone.style.pointerEvents =
|
|
371
|
+
activeZone.style.pointerEvents = "none";
|
|
369
372
|
}
|
|
370
373
|
}
|
|
371
374
|
this.updateTopClickBlockerSafeZone();
|
|
@@ -380,33 +383,33 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
380
383
|
updateTopClickBlockerSafeZone(precomputed) {
|
|
381
384
|
if (!this.topClickBlocker)
|
|
382
385
|
return;
|
|
383
|
-
const safeZoneRaw = typeof precomputed ===
|
|
386
|
+
const safeZoneRaw = typeof precomputed === "number" ? precomputed : this.getOverlaySafeZone();
|
|
384
387
|
const safeZone = Math.max(0, safeZoneRaw);
|
|
385
388
|
this.topClickBlocker.style.bottom = `${safeZone}px`;
|
|
386
389
|
}
|
|
387
390
|
togglePlayback(force) {
|
|
388
391
|
if (!this.plyr)
|
|
389
392
|
return;
|
|
390
|
-
const hasTogglePlay = typeof this.plyr.togglePlay ===
|
|
393
|
+
const hasTogglePlay = typeof this.plyr.togglePlay === "function";
|
|
391
394
|
const ended = this.playbackEnded;
|
|
392
|
-
if (hasTogglePlay && typeof force ===
|
|
395
|
+
if (hasTogglePlay && typeof force === "undefined") {
|
|
393
396
|
try {
|
|
394
397
|
const result = this.plyr.togglePlay();
|
|
395
|
-
if (result && typeof result.catch ===
|
|
398
|
+
if (result && typeof result.catch === "function") {
|
|
396
399
|
result.catch(() => { });
|
|
397
400
|
}
|
|
398
401
|
return;
|
|
399
402
|
}
|
|
400
403
|
catch { }
|
|
401
404
|
}
|
|
402
|
-
const shouldPlay = typeof force ===
|
|
405
|
+
const shouldPlay = typeof force === "boolean" ? !!force : !this.plyr.playing;
|
|
403
406
|
if (shouldPlay) {
|
|
404
407
|
if (this.deferUntilStartTimeSettles(() => this.togglePlayback(true))) {
|
|
405
408
|
return;
|
|
406
409
|
}
|
|
407
410
|
if (ended) {
|
|
408
411
|
try {
|
|
409
|
-
if (typeof this.plyr.restart ===
|
|
412
|
+
if (typeof this.plyr.restart === "function") {
|
|
410
413
|
this.plyr.restart();
|
|
411
414
|
}
|
|
412
415
|
else {
|
|
@@ -420,7 +423,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
420
423
|
this.updateRecommendationBlockerSafeZone();
|
|
421
424
|
try {
|
|
422
425
|
const result = this.plyr.play?.();
|
|
423
|
-
if (result && typeof result.catch ===
|
|
426
|
+
if (result && typeof result.catch === "function") {
|
|
424
427
|
result.catch(() => { });
|
|
425
428
|
}
|
|
426
429
|
}
|
|
@@ -435,7 +438,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
435
438
|
catch { }
|
|
436
439
|
}
|
|
437
440
|
ensureTopClickBlocker() {
|
|
438
|
-
if (this.config.video_host !== "youtube" &&
|
|
441
|
+
if (this.config.video_host !== "youtube" &&
|
|
442
|
+
this.config.video_host !== "vimeo") {
|
|
439
443
|
return;
|
|
440
444
|
}
|
|
441
445
|
const wrapper = this.getVideoWrapper();
|
|
@@ -444,20 +448,20 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
444
448
|
if (this.topClickBlocker && this.topClickBlocker.isConnected) {
|
|
445
449
|
return;
|
|
446
450
|
}
|
|
447
|
-
const blocker = this.document.createElement(
|
|
448
|
-
blocker.className =
|
|
449
|
-
blocker.style.position =
|
|
450
|
-
blocker.style.top =
|
|
451
|
-
blocker.style.left =
|
|
452
|
-
blocker.style.right =
|
|
453
|
-
blocker.style.width =
|
|
454
|
-
blocker.style.zIndex =
|
|
455
|
-
blocker.style.pointerEvents =
|
|
456
|
-
blocker.style.background =
|
|
457
|
-
blocker.style.touchAction =
|
|
458
|
-
blocker.style.cursor =
|
|
459
|
-
blocker.addEventListener(
|
|
460
|
-
blocker.addEventListener(
|
|
451
|
+
const blocker = this.document.createElement("div");
|
|
452
|
+
blocker.className = "plyr-top-click-blocker";
|
|
453
|
+
blocker.style.position = "absolute";
|
|
454
|
+
blocker.style.top = "0";
|
|
455
|
+
blocker.style.left = "0";
|
|
456
|
+
blocker.style.right = "0";
|
|
457
|
+
blocker.style.width = "100%";
|
|
458
|
+
blocker.style.zIndex = "12";
|
|
459
|
+
blocker.style.pointerEvents = "auto";
|
|
460
|
+
blocker.style.background = "rgba(0,0,0,0)";
|
|
461
|
+
blocker.style.touchAction = "none";
|
|
462
|
+
blocker.style.cursor = "pointer";
|
|
463
|
+
blocker.addEventListener("pointerdown", this.onTopBlockerPointerDown);
|
|
464
|
+
blocker.addEventListener("click", this.onTopBlockerClick);
|
|
461
465
|
wrapper.appendChild(blocker);
|
|
462
466
|
this.topClickBlocker = blocker;
|
|
463
467
|
this.updateTopClickBlockerSafeZone();
|
|
@@ -475,56 +479,71 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
475
479
|
observer.observe(container, {
|
|
476
480
|
subtree: true,
|
|
477
481
|
attributes: true,
|
|
478
|
-
attributeFilter: [
|
|
482
|
+
attributeFilter: ["aria-hidden", "class", "style"],
|
|
479
483
|
});
|
|
480
484
|
this.menuObserver = observer;
|
|
481
485
|
}
|
|
482
486
|
isIOSDevice() {
|
|
483
|
-
if (typeof navigator ===
|
|
487
|
+
if (typeof navigator === "undefined")
|
|
484
488
|
return false;
|
|
485
|
-
const ua = navigator.userAgent ||
|
|
489
|
+
const ua = navigator.userAgent || "";
|
|
486
490
|
const iOS = /iPad|iPhone|iPod/.test(ua);
|
|
487
|
-
const iPadOS = navigator.platform ===
|
|
491
|
+
const iPadOS = navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
|
|
488
492
|
return iOS || iPadOS;
|
|
489
493
|
}
|
|
490
|
-
isAndroidDevice() {
|
|
491
|
-
if (typeof navigator === 'undefined')
|
|
492
|
-
return false;
|
|
493
|
-
return /Android/i.test(navigator.userAgent || '');
|
|
494
|
-
}
|
|
495
494
|
isTouchDevice() {
|
|
496
|
-
if (typeof window ===
|
|
495
|
+
if (typeof window === "undefined") {
|
|
497
496
|
return false;
|
|
498
497
|
}
|
|
499
|
-
if (typeof navigator !==
|
|
498
|
+
if (typeof navigator !== "undefined" && navigator.maxTouchPoints > 0) {
|
|
500
499
|
return true;
|
|
501
500
|
}
|
|
502
501
|
if (window.matchMedia) {
|
|
503
502
|
try {
|
|
504
|
-
if (window.matchMedia(
|
|
503
|
+
if (window.matchMedia("(pointer: coarse)").matches) {
|
|
505
504
|
return true;
|
|
506
505
|
}
|
|
507
506
|
}
|
|
508
507
|
catch { }
|
|
509
508
|
}
|
|
510
|
-
return
|
|
509
|
+
return "ontouchstart" in window;
|
|
511
510
|
}
|
|
512
511
|
isIframeProvider() {
|
|
513
|
-
return this.config?.video_host ===
|
|
512
|
+
return (this.config?.video_host === "youtube" ||
|
|
513
|
+
this.config?.video_host === "vimeo");
|
|
514
514
|
}
|
|
515
515
|
shouldDisableAutoplayForIOS() {
|
|
516
516
|
return this.isIOSDevice();
|
|
517
517
|
}
|
|
518
|
+
tryEnterVimeoFullscreen() {
|
|
519
|
+
if (!this.isIOSDevice() || this.config?.video_host !== 'vimeo') {
|
|
520
|
+
return;
|
|
521
|
+
}
|
|
522
|
+
const embed = this.plyr?.embed;
|
|
523
|
+
if (!embed)
|
|
524
|
+
return;
|
|
525
|
+
const requestFullscreen = embed.requestFullscreen ||
|
|
526
|
+
(embed.element && embed.element.requestFullscreen);
|
|
527
|
+
if (typeof requestFullscreen === 'function') {
|
|
528
|
+
try {
|
|
529
|
+
const result = requestFullscreen.call(embed.element ?? embed);
|
|
530
|
+
if (result && typeof result.catch === 'function') {
|
|
531
|
+
result.catch(() => { });
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
catch { }
|
|
535
|
+
}
|
|
536
|
+
}
|
|
518
537
|
shouldDisableAutoplayForVimeo() {
|
|
519
|
-
return this.isIOSDevice() && this.config?.video_host ===
|
|
538
|
+
return this.isIOSDevice() && this.config?.video_host === "vimeo";
|
|
520
539
|
}
|
|
521
540
|
shouldResetProgressToBeginning() {
|
|
522
541
|
const host = this.config?.video_host;
|
|
523
|
-
if (host !==
|
|
542
|
+
if (host !== "youtube" && host !== "vimeo") {
|
|
524
543
|
return false;
|
|
525
544
|
}
|
|
526
545
|
const seenFlag = this.config?.seen;
|
|
527
|
-
if (seenFlag === true || seenFlag ===
|
|
546
|
+
if (seenFlag === true || seenFlag === "true" || seenFlag === 1) {
|
|
528
547
|
return true;
|
|
529
548
|
}
|
|
530
549
|
const rawPercent = this.config?.last_percent;
|
|
@@ -544,7 +563,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
544
563
|
return !!(this.config?.autoplay || this.config?.is_live);
|
|
545
564
|
}
|
|
546
565
|
shouldAutoplay() {
|
|
547
|
-
if (this.shouldDisableAutoplayForIOS() ||
|
|
566
|
+
if (this.shouldDisableAutoplayForIOS() ||
|
|
567
|
+
this.shouldDisableAutoplayForVimeo()) {
|
|
548
568
|
return false;
|
|
549
569
|
}
|
|
550
570
|
return this.wantsAutoplay();
|
|
@@ -556,7 +576,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
556
576
|
return this.wantsAutoplay();
|
|
557
577
|
}
|
|
558
578
|
shouldBlockIframeAutoplay() {
|
|
559
|
-
return this.shouldDisableAutoplayForIOS() || this.shouldDisableAutoplayForVimeo();
|
|
579
|
+
return (this.shouldDisableAutoplayForIOS() || this.shouldDisableAutoplayForVimeo());
|
|
560
580
|
}
|
|
561
581
|
stopRestrictedIframeAutoplay() {
|
|
562
582
|
if (!this.shouldBlockIframeAutoplay()) {
|
|
@@ -585,7 +605,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
585
605
|
}
|
|
586
606
|
catch { }
|
|
587
607
|
try {
|
|
588
|
-
if (typeof this.plyr.pause ===
|
|
608
|
+
if (typeof this.plyr.pause === "function") {
|
|
589
609
|
this.plyr.pause();
|
|
590
610
|
}
|
|
591
611
|
}
|
|
@@ -594,13 +614,13 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
594
614
|
const embed = this.plyr?.embed;
|
|
595
615
|
if (embed) {
|
|
596
616
|
try {
|
|
597
|
-
if (typeof embed.pause ===
|
|
617
|
+
if (typeof embed.pause === "function") {
|
|
598
618
|
embed.pause();
|
|
599
619
|
}
|
|
600
|
-
if (typeof embed.setMuted ===
|
|
620
|
+
if (typeof embed.setMuted === "function") {
|
|
601
621
|
embed.setMuted(false);
|
|
602
622
|
}
|
|
603
|
-
if (typeof embed.setVolume ===
|
|
623
|
+
if (typeof embed.setVolume === "function") {
|
|
604
624
|
embed.setVolume(1);
|
|
605
625
|
}
|
|
606
626
|
}
|
|
@@ -608,7 +628,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
608
628
|
}
|
|
609
629
|
}
|
|
610
630
|
enforceVimeoVolumeAfterPlay(video) {
|
|
611
|
-
if (this.config?.video_host !==
|
|
631
|
+
if (this.config?.video_host !== "vimeo") {
|
|
612
632
|
return;
|
|
613
633
|
}
|
|
614
634
|
const media = video ?? this.videoRef?.nativeElement ?? null;
|
|
@@ -617,13 +637,13 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
617
637
|
this.setPlayerMutedState(false, volumeTarget, media);
|
|
618
638
|
const currentEmbed = this.plyr?.embed;
|
|
619
639
|
if (currentEmbed) {
|
|
620
|
-
if (typeof currentEmbed.setMuted ===
|
|
640
|
+
if (typeof currentEmbed.setMuted === "function") {
|
|
621
641
|
try {
|
|
622
642
|
currentEmbed.setMuted(false);
|
|
623
643
|
}
|
|
624
644
|
catch { }
|
|
625
645
|
}
|
|
626
|
-
if (typeof currentEmbed.setVolume ===
|
|
646
|
+
if (typeof currentEmbed.setVolume === "function") {
|
|
627
647
|
try {
|
|
628
648
|
currentEmbed.setVolume(volumeTarget);
|
|
629
649
|
}
|
|
@@ -654,7 +674,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
654
674
|
media.muted = muted;
|
|
655
675
|
}
|
|
656
676
|
catch { }
|
|
657
|
-
if (!muted && typeof media.volume ===
|
|
677
|
+
if (!muted && typeof media.volume === "number") {
|
|
658
678
|
try {
|
|
659
679
|
media.volume = volume;
|
|
660
680
|
}
|
|
@@ -672,7 +692,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
672
692
|
}
|
|
673
693
|
}
|
|
674
694
|
ensureAutoplayUnlockListener() {
|
|
675
|
-
if (typeof window ===
|
|
695
|
+
if (typeof window === "undefined" ||
|
|
676
696
|
this.interactionUnmuteCleanup ||
|
|
677
697
|
!this.shouldAutoplay()) {
|
|
678
698
|
return;
|
|
@@ -686,13 +706,13 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
686
706
|
catch { }
|
|
687
707
|
this.clearAutoplayUnlockListener();
|
|
688
708
|
};
|
|
689
|
-
window.addEventListener(
|
|
690
|
-
window.addEventListener(
|
|
691
|
-
window.addEventListener(
|
|
709
|
+
window.addEventListener("touchend", handler, capture);
|
|
710
|
+
window.addEventListener("pointerup", handler, capture);
|
|
711
|
+
window.addEventListener("click", handler, capture);
|
|
692
712
|
this.interactionUnmuteCleanup = () => {
|
|
693
|
-
window.removeEventListener(
|
|
694
|
-
window.removeEventListener(
|
|
695
|
-
window.removeEventListener(
|
|
713
|
+
window.removeEventListener("touchend", handler, capture);
|
|
714
|
+
window.removeEventListener("pointerup", handler, capture);
|
|
715
|
+
window.removeEventListener("click", handler, capture);
|
|
696
716
|
this.interactionUnmuteCleanup = undefined;
|
|
697
717
|
};
|
|
698
718
|
}
|
|
@@ -703,22 +723,28 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
703
723
|
const container = this.plyr?.elements?.container;
|
|
704
724
|
if (!container)
|
|
705
725
|
return;
|
|
706
|
-
const iframe = container.querySelector(
|
|
726
|
+
const iframe = container.querySelector("iframe") ?? null;
|
|
707
727
|
if (!iframe)
|
|
708
728
|
return;
|
|
709
|
-
const allowRaw = iframe.getAttribute(
|
|
729
|
+
const allowRaw = iframe.getAttribute("allow") || "";
|
|
710
730
|
const tokens = new Set(allowRaw
|
|
711
|
-
.split(
|
|
731
|
+
.split(";")
|
|
712
732
|
.map((token) => token.trim())
|
|
713
733
|
.filter(Boolean));
|
|
714
|
-
[
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
iframe.setAttribute(
|
|
734
|
+
[
|
|
735
|
+
"autoplay",
|
|
736
|
+
"fullscreen",
|
|
737
|
+
"encrypted-media",
|
|
738
|
+
"picture-in-picture",
|
|
739
|
+
"gyroscope",
|
|
740
|
+
].forEach((rule) => tokens.add(rule));
|
|
741
|
+
iframe.setAttribute("allow", Array.from(tokens).join("; "));
|
|
742
|
+
if (this.config.video_host === "youtube") {
|
|
743
|
+
iframe.setAttribute("playsinline", "1");
|
|
744
|
+
iframe.setAttribute("webkit-playsinline", "1");
|
|
745
|
+
}
|
|
746
|
+
iframe.setAttribute("allowfullscreen", "true");
|
|
747
|
+
iframe.setAttribute("data-keepplaying", "true");
|
|
722
748
|
}
|
|
723
749
|
scheduleUserInteractionUnmute(video) {
|
|
724
750
|
this.unmuteAfterDelay(video || undefined);
|
|
@@ -796,7 +822,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
796
822
|
let maybePromise = null;
|
|
797
823
|
try {
|
|
798
824
|
const result = this.seekUsingHostAPI(start, video);
|
|
799
|
-
if (result && typeof result.then ===
|
|
825
|
+
if (result && typeof result.then === "function") {
|
|
800
826
|
maybePromise = result;
|
|
801
827
|
}
|
|
802
828
|
}
|
|
@@ -818,9 +844,9 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
818
844
|
if (!Number.isFinite(target) || target < 0) {
|
|
819
845
|
return null;
|
|
820
846
|
}
|
|
821
|
-
if (this.config.video_host ===
|
|
847
|
+
if (this.config.video_host === "vimeo") {
|
|
822
848
|
const embed = this.plyr?.embed;
|
|
823
|
-
if (embed && typeof embed.setCurrentTime ===
|
|
849
|
+
if (embed && typeof embed.setCurrentTime === "function") {
|
|
824
850
|
try {
|
|
825
851
|
return embed.setCurrentTime(target);
|
|
826
852
|
}
|
|
@@ -863,7 +889,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
863
889
|
if (media) {
|
|
864
890
|
try {
|
|
865
891
|
const nativePlay = media.play();
|
|
866
|
-
if (nativePlay && typeof nativePlay.catch ===
|
|
892
|
+
if (nativePlay && typeof nativePlay.catch === "function") {
|
|
867
893
|
nativePlay.catch(() => { });
|
|
868
894
|
}
|
|
869
895
|
}
|
|
@@ -872,7 +898,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
872
898
|
this.scheduleUserInteractionUnmute(media);
|
|
873
899
|
return;
|
|
874
900
|
}
|
|
875
|
-
if (playResult &&
|
|
901
|
+
if (playResult &&
|
|
902
|
+
typeof playResult.catch === "function") {
|
|
876
903
|
playResult.catch((error) => {
|
|
877
904
|
if (!muted) {
|
|
878
905
|
tryPlay(true);
|
|
@@ -881,7 +908,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
881
908
|
if (media) {
|
|
882
909
|
try {
|
|
883
910
|
const nativePlay = media.play();
|
|
884
|
-
if (nativePlay && typeof nativePlay.catch ===
|
|
911
|
+
if (nativePlay && typeof nativePlay.catch === "function") {
|
|
885
912
|
nativePlay.catch(() => { });
|
|
886
913
|
}
|
|
887
914
|
}
|
|
@@ -912,16 +939,16 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
912
939
|
const embed = this.plyr?.embed;
|
|
913
940
|
if (!embed)
|
|
914
941
|
return;
|
|
915
|
-
if (this.config.video_host ===
|
|
916
|
-
if (typeof embed.playVideo ===
|
|
942
|
+
if (this.config.video_host === "youtube") {
|
|
943
|
+
if (typeof embed.playVideo === "function") {
|
|
917
944
|
try {
|
|
918
945
|
embed.playVideo();
|
|
919
946
|
}
|
|
920
947
|
catch { }
|
|
921
948
|
}
|
|
922
949
|
}
|
|
923
|
-
else if (this.config.video_host ===
|
|
924
|
-
if (typeof embed.play ===
|
|
950
|
+
else if (this.config.video_host === "vimeo") {
|
|
951
|
+
if (typeof embed.play === "function") {
|
|
925
952
|
try {
|
|
926
953
|
embed.play();
|
|
927
954
|
}
|
|
@@ -945,11 +972,11 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
945
972
|
}
|
|
946
973
|
};
|
|
947
974
|
const showControls = () => {
|
|
948
|
-
container.classList.remove(
|
|
975
|
+
container.classList.remove("plyr--auto-hide-controls");
|
|
949
976
|
};
|
|
950
977
|
const hideControls = () => {
|
|
951
978
|
if (this.plyr?.playing) {
|
|
952
|
-
container.classList.add(
|
|
979
|
+
container.classList.add("plyr--auto-hide-controls");
|
|
953
980
|
}
|
|
954
981
|
};
|
|
955
982
|
const scheduleHide = () => {
|
|
@@ -966,7 +993,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
966
993
|
clearHideTimeout();
|
|
967
994
|
showControls();
|
|
968
995
|
if (this.isIOSDevice()) {
|
|
969
|
-
console.log(
|
|
996
|
+
console.log("event: ended");
|
|
970
997
|
}
|
|
971
998
|
};
|
|
972
999
|
const onEnded = () => {
|
|
@@ -977,19 +1004,19 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
977
1004
|
showControls();
|
|
978
1005
|
scheduleHide();
|
|
979
1006
|
};
|
|
980
|
-
this.plyr?.on?.(
|
|
981
|
-
this.plyr?.on?.(
|
|
982
|
-
this.plyr?.on?.(
|
|
983
|
-
container.addEventListener(
|
|
984
|
-
container.addEventListener(
|
|
1007
|
+
this.plyr?.on?.("play", onPlay);
|
|
1008
|
+
this.plyr?.on?.("pause", onPause);
|
|
1009
|
+
this.plyr?.on?.("ended", onEnded);
|
|
1010
|
+
container.addEventListener("touchstart", onUserInteraction);
|
|
1011
|
+
container.addEventListener("click", onUserInteraction);
|
|
985
1012
|
this.controlsVisibilityCleanup = () => {
|
|
986
1013
|
clearHideTimeout();
|
|
987
|
-
this.plyr?.off?.(
|
|
988
|
-
this.plyr?.off?.(
|
|
989
|
-
this.plyr?.off?.(
|
|
990
|
-
container.removeEventListener(
|
|
991
|
-
container.removeEventListener(
|
|
992
|
-
container.classList.remove(
|
|
1014
|
+
this.plyr?.off?.("play", onPlay);
|
|
1015
|
+
this.plyr?.off?.("pause", onPause);
|
|
1016
|
+
this.plyr?.off?.("ended", onEnded);
|
|
1017
|
+
container.removeEventListener("touchstart", onUserInteraction);
|
|
1018
|
+
container.removeEventListener("click", onUserInteraction);
|
|
1019
|
+
container.classList.remove("plyr--auto-hide-controls");
|
|
993
1020
|
};
|
|
994
1021
|
onPlay();
|
|
995
1022
|
return;
|
|
@@ -998,10 +1025,10 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
998
1025
|
const toggleClass = () => {
|
|
999
1026
|
const playing = !!this.plyr?.playing;
|
|
1000
1027
|
if (playing && !hovering) {
|
|
1001
|
-
container.classList.add(
|
|
1028
|
+
container.classList.add("plyr--auto-hide-controls");
|
|
1002
1029
|
}
|
|
1003
1030
|
else {
|
|
1004
|
-
container.classList.remove(
|
|
1031
|
+
container.classList.remove("plyr--auto-hide-controls");
|
|
1005
1032
|
}
|
|
1006
1033
|
};
|
|
1007
1034
|
const onPlay = () => toggleClass();
|
|
@@ -1020,39 +1047,39 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1020
1047
|
toggleClass();
|
|
1021
1048
|
};
|
|
1022
1049
|
const onFocusOut = () => {
|
|
1023
|
-
hovering = container.matches(
|
|
1050
|
+
hovering = container.matches(":hover");
|
|
1024
1051
|
toggleClass();
|
|
1025
1052
|
};
|
|
1026
|
-
this.plyr?.on?.(
|
|
1027
|
-
this.plyr?.on?.(
|
|
1028
|
-
this.plyr?.on?.(
|
|
1029
|
-
container.addEventListener(
|
|
1030
|
-
container.addEventListener(
|
|
1031
|
-
container.addEventListener(
|
|
1032
|
-
container.addEventListener(
|
|
1053
|
+
this.plyr?.on?.("play", onPlay);
|
|
1054
|
+
this.plyr?.on?.("pause", onPause);
|
|
1055
|
+
this.plyr?.on?.("ended", onEnded);
|
|
1056
|
+
container.addEventListener("mouseenter", onMouseEnter);
|
|
1057
|
+
container.addEventListener("mouseleave", onMouseLeave);
|
|
1058
|
+
container.addEventListener("focusin", onFocusIn);
|
|
1059
|
+
container.addEventListener("focusout", onFocusOut);
|
|
1033
1060
|
toggleClass();
|
|
1034
1061
|
this.controlsVisibilityCleanup = () => {
|
|
1035
|
-
this.plyr?.off?.(
|
|
1036
|
-
this.plyr?.off?.(
|
|
1037
|
-
this.plyr?.off?.(
|
|
1038
|
-
container.removeEventListener(
|
|
1039
|
-
container.removeEventListener(
|
|
1040
|
-
container.removeEventListener(
|
|
1041
|
-
container.removeEventListener(
|
|
1042
|
-
container.classList.remove(
|
|
1062
|
+
this.plyr?.off?.("play", onPlay);
|
|
1063
|
+
this.plyr?.off?.("pause", onPause);
|
|
1064
|
+
this.plyr?.off?.("ended", onEnded);
|
|
1065
|
+
container.removeEventListener("mouseenter", onMouseEnter);
|
|
1066
|
+
container.removeEventListener("mouseleave", onMouseLeave);
|
|
1067
|
+
container.removeEventListener("focusin", onFocusIn);
|
|
1068
|
+
container.removeEventListener("focusout", onFocusOut);
|
|
1069
|
+
container.classList.remove("plyr--auto-hide-controls");
|
|
1043
1070
|
};
|
|
1044
1071
|
}
|
|
1045
1072
|
bindFullscreenBehavior() {
|
|
1046
1073
|
const onEnterFullscreen = () => {
|
|
1047
|
-
console.log(
|
|
1074
|
+
console.log("event: enterfullscreen");
|
|
1048
1075
|
parent.postMessage("event: fullscreen_enter', '*'");
|
|
1049
1076
|
};
|
|
1050
1077
|
const onExitFullscreen = () => {
|
|
1051
|
-
console.log(
|
|
1078
|
+
console.log("event: exitfullscreen");
|
|
1052
1079
|
parent.postMessage("event: fullscreen_exit', '*'");
|
|
1053
1080
|
};
|
|
1054
|
-
this.plyr.on(
|
|
1055
|
-
this.plyr.on(
|
|
1081
|
+
this.plyr.on("enterfullscreen", onEnterFullscreen);
|
|
1082
|
+
this.plyr.on("exitfullscreen", onExitFullscreen);
|
|
1056
1083
|
}
|
|
1057
1084
|
setupPlayer() {
|
|
1058
1085
|
if (!this.videoRef)
|
|
@@ -1065,7 +1092,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1065
1092
|
this.recommendationBlocker = null;
|
|
1066
1093
|
const speedOptions = [1, 1.25, 1.5, 2];
|
|
1067
1094
|
const locale = this.resolveLocale();
|
|
1068
|
-
const captionsLanguage = this.resolveCaptionsLanguage(locale) ??
|
|
1095
|
+
const captionsLanguage = this.resolveCaptionsLanguage(locale) ?? "pt";
|
|
1069
1096
|
const hideVimeoRecommendations = this.shouldHideVimeoRecommendations();
|
|
1070
1097
|
const vimeoPremium = Boolean(this.config?.vimeo_premium);
|
|
1071
1098
|
const shouldAutoplay = this.shouldAutoplay();
|
|
@@ -1075,7 +1102,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1075
1102
|
}
|
|
1076
1103
|
catch { }
|
|
1077
1104
|
try {
|
|
1078
|
-
this.videoRef.nativeElement.playsInline =
|
|
1105
|
+
this.videoRef.nativeElement.playsInline =
|
|
1106
|
+
this.config?.video_host === "youtube";
|
|
1079
1107
|
}
|
|
1080
1108
|
catch { }
|
|
1081
1109
|
try {
|
|
@@ -1089,7 +1117,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1089
1117
|
};
|
|
1090
1118
|
youtubePlayerVars.playerVars = {
|
|
1091
1119
|
hl: locale,
|
|
1092
|
-
cc_lang_pref: captionsLanguage || locale.split(
|
|
1120
|
+
cc_lang_pref: captionsLanguage || locale.split("-")[0]?.toLowerCase(),
|
|
1093
1121
|
autoplay: shouldAutoplay ? 1 : 0,
|
|
1094
1122
|
mute: startMuted ? 1 : 0,
|
|
1095
1123
|
playsinline: 1,
|
|
@@ -1119,11 +1147,11 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1119
1147
|
container: null,
|
|
1120
1148
|
},
|
|
1121
1149
|
i18n: {
|
|
1122
|
-
speed:
|
|
1150
|
+
speed: "Velocidade",
|
|
1123
1151
|
},
|
|
1124
1152
|
speed: {
|
|
1125
1153
|
selected: 1,
|
|
1126
|
-
options: speedOptions
|
|
1154
|
+
options: speedOptions,
|
|
1127
1155
|
},
|
|
1128
1156
|
clickToPlay: true,
|
|
1129
1157
|
hideControls: false,
|
|
@@ -1135,7 +1163,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1135
1163
|
if (captionsLanguage) {
|
|
1136
1164
|
plyrOptions.captions = { language: captionsLanguage };
|
|
1137
1165
|
}
|
|
1138
|
-
if (this.config.video_host ===
|
|
1166
|
+
if (this.config.video_host === "youtube") {
|
|
1139
1167
|
plyrOptions.youtube = youtubePlayerVars;
|
|
1140
1168
|
}
|
|
1141
1169
|
this.plyr = new Plyr.default(this.videoRef.nativeElement, plyrOptions);
|
|
@@ -1145,8 +1173,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1145
1173
|
this.observeMenuChanges();
|
|
1146
1174
|
this.playbackEnded = false;
|
|
1147
1175
|
this.overlayBlockAll = false;
|
|
1148
|
-
window.removeEventListener(
|
|
1149
|
-
window.addEventListener(
|
|
1176
|
+
window.removeEventListener("resize", this.onResize);
|
|
1177
|
+
window.addEventListener("resize", this.onResize);
|
|
1150
1178
|
this.bindProgressEvents();
|
|
1151
1179
|
this.loadSource(this.videoRef.nativeElement).then(() => {
|
|
1152
1180
|
this.setupStartTime();
|
|
@@ -1174,7 +1202,11 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1174
1202
|
const t = this.plyr.currentTime || 0;
|
|
1175
1203
|
const d = this.plyr.duration || 0;
|
|
1176
1204
|
const p = d > 0 ? +((t / d) * 100).toFixed(2) : 0;
|
|
1177
|
-
this.progressService.progress$.next({
|
|
1205
|
+
this.progressService.progress$.next({
|
|
1206
|
+
currentTime: t,
|
|
1207
|
+
duration: d,
|
|
1208
|
+
percent: p,
|
|
1209
|
+
});
|
|
1178
1210
|
};
|
|
1179
1211
|
const onTimeUpdate = () => {
|
|
1180
1212
|
const now = performance.now();
|
|
@@ -1182,11 +1214,11 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1182
1214
|
lastEmit = now;
|
|
1183
1215
|
emitProgress();
|
|
1184
1216
|
}
|
|
1185
|
-
parent.postMessage(
|
|
1186
|
-
console.log(
|
|
1187
|
-
console.log(
|
|
1217
|
+
parent.postMessage("currentTime:" + (this.plyr.currentTime || 0), "*");
|
|
1218
|
+
console.log("event: current_time " + (this.plyr.currentTime || 0));
|
|
1219
|
+
console.log("event: duration " + this.plyr.duration);
|
|
1188
1220
|
this.postCastEvent({
|
|
1189
|
-
event:
|
|
1221
|
+
event: "current_time",
|
|
1190
1222
|
currentTime: this.plyr.currentTime || 0,
|
|
1191
1223
|
duration: this.plyr.duration || 0,
|
|
1192
1224
|
});
|
|
@@ -1198,17 +1230,23 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1198
1230
|
this.overlayBlockAll = false;
|
|
1199
1231
|
this.updateRecommendationBlockerSafeZone();
|
|
1200
1232
|
this.toggleRecommendationBlocker(false);
|
|
1233
|
+
this.tryEnterVimeoFullscreen();
|
|
1201
1234
|
this.enforceVimeoVolumeAfterPlay();
|
|
1202
|
-
parent.postMessage(
|
|
1203
|
-
|
|
1204
|
-
|
|
1235
|
+
parent.postMessage("playing_video", "*");
|
|
1236
|
+
this.postCastEvent({
|
|
1237
|
+
event: "play",
|
|
1238
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1239
|
+
});
|
|
1205
1240
|
});
|
|
1206
1241
|
this.plyr?.on?.("timeupdate", onTimeUpdate);
|
|
1207
1242
|
this.plyr?.on?.("pause", () => {
|
|
1208
1243
|
emitProgress();
|
|
1209
|
-
console.log(
|
|
1210
|
-
parent.postMessage(
|
|
1211
|
-
this.postCastEvent({
|
|
1244
|
+
console.log("event: pause");
|
|
1245
|
+
parent.postMessage("paused_video", "*");
|
|
1246
|
+
this.postCastEvent({
|
|
1247
|
+
event: "pause",
|
|
1248
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1249
|
+
});
|
|
1212
1250
|
this.overlayBlockAll = true;
|
|
1213
1251
|
this.updateRecommendationBlockerSafeZone();
|
|
1214
1252
|
this.toggleRecommendationBlocker(true);
|
|
@@ -1218,9 +1256,12 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1218
1256
|
this.playbackEnded = true;
|
|
1219
1257
|
this.overlayBlockAll = true;
|
|
1220
1258
|
this.updateRecommendationBlockerSafeZone();
|
|
1221
|
-
console.log(
|
|
1222
|
-
parent.postMessage(
|
|
1223
|
-
this.postCastEvent({
|
|
1259
|
+
console.log("event: ended");
|
|
1260
|
+
parent.postMessage("event: ended", "*");
|
|
1261
|
+
this.postCastEvent({
|
|
1262
|
+
event: "ended",
|
|
1263
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1264
|
+
});
|
|
1224
1265
|
this.progressService.ended$.next();
|
|
1225
1266
|
this.preventVimeoRecommendations();
|
|
1226
1267
|
this.toggleRecommendationBlocker(true);
|
|
@@ -1249,7 +1290,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1249
1290
|
}
|
|
1250
1291
|
resetPlaybackRate(video) {
|
|
1251
1292
|
try {
|
|
1252
|
-
if (this.plyr && typeof this.plyr.speed !==
|
|
1293
|
+
if (this.plyr && typeof this.plyr.speed !== "undefined") {
|
|
1253
1294
|
this.plyr.speed = 1;
|
|
1254
1295
|
}
|
|
1255
1296
|
}
|
|
@@ -1278,7 +1319,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1278
1319
|
this.hls = undefined;
|
|
1279
1320
|
}
|
|
1280
1321
|
this.resetPlaybackRate(video);
|
|
1281
|
-
if (this.config.video_host === "youtube" ||
|
|
1322
|
+
if (this.config.video_host === "youtube" ||
|
|
1323
|
+
this.config.video_host === "vimeo") {
|
|
1282
1324
|
const onReady = () => {
|
|
1283
1325
|
this.plyr.off("ready", onReady);
|
|
1284
1326
|
this.ensureIframeAutoplayPermissions();
|
|
@@ -1290,20 +1332,20 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1290
1332
|
else if (this.shouldBlockIframeAutoplay()) {
|
|
1291
1333
|
this.stopRestrictedIframeAutoplay();
|
|
1292
1334
|
}
|
|
1293
|
-
parent.postMessage(
|
|
1294
|
-
parent.postMessage(
|
|
1295
|
-
console.log(
|
|
1296
|
-
console.log(
|
|
1297
|
-
console.log(
|
|
1335
|
+
parent.postMessage("playerIsReadyToPlay", "*");
|
|
1336
|
+
parent.postMessage("duration:" + this.plyr.duration, "*");
|
|
1337
|
+
console.log("event: current_time " + this.plyr.currentTime);
|
|
1338
|
+
console.log("event: duration " + this.plyr.duration);
|
|
1339
|
+
console.log("event: ready");
|
|
1298
1340
|
this.postCastEvent({
|
|
1299
|
-
event:
|
|
1341
|
+
event: "ready",
|
|
1300
1342
|
duration: this.plyr.duration || 0,
|
|
1301
1343
|
currentTime: this.plyr.currentTime || 0,
|
|
1302
1344
|
});
|
|
1303
1345
|
if (this.config.is_live) {
|
|
1304
|
-
this.plyr?.on(
|
|
1305
|
-
console.log(
|
|
1306
|
-
parent.postMessage(
|
|
1346
|
+
this.plyr?.on("playing", function () {
|
|
1347
|
+
console.log("event: playing_live");
|
|
1348
|
+
parent.postMessage("event: playing_live", "*");
|
|
1307
1349
|
});
|
|
1308
1350
|
}
|
|
1309
1351
|
if (this.config.mirror) {
|
|
@@ -1337,10 +1379,10 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1337
1379
|
else if (this.config.video_host === "hls") {
|
|
1338
1380
|
let sourceX = "";
|
|
1339
1381
|
try {
|
|
1340
|
-
sourceX = atob(this.config.video_id ||
|
|
1382
|
+
sourceX = atob(this.config.video_id || "");
|
|
1341
1383
|
}
|
|
1342
1384
|
catch (e) {
|
|
1343
|
-
sourceX = this.config.video_id ||
|
|
1385
|
+
sourceX = this.config.video_id || "";
|
|
1344
1386
|
}
|
|
1345
1387
|
const canNative = video.canPlayType("application/vnd.apple.mpegurl");
|
|
1346
1388
|
if (canNative) {
|
|
@@ -1423,7 +1465,9 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1423
1465
|
if (hasTime) {
|
|
1424
1466
|
return clamp(last_time);
|
|
1425
1467
|
}
|
|
1426
|
-
const hasPercent = last_percent !== undefined &&
|
|
1468
|
+
const hasPercent = last_percent !== undefined &&
|
|
1469
|
+
last_percent !== null &&
|
|
1470
|
+
last_percent !== "";
|
|
1427
1471
|
if (hasPercent && hasValidDuration) {
|
|
1428
1472
|
let p = Number(last_percent);
|
|
1429
1473
|
if (!isFinite(p) || p < 0)
|
|
@@ -1444,30 +1488,32 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1444
1488
|
return 0;
|
|
1445
1489
|
}
|
|
1446
1490
|
postCastEvent(payload) {
|
|
1447
|
-
parent.postMessage(JSON.stringify(payload),
|
|
1491
|
+
parent.postMessage(JSON.stringify(payload), "*");
|
|
1448
1492
|
}
|
|
1449
1493
|
onCastMessage = (evt) => {
|
|
1450
1494
|
let data = evt.data;
|
|
1451
|
-
if (typeof data ===
|
|
1495
|
+
if (typeof data === "string") {
|
|
1452
1496
|
try {
|
|
1453
1497
|
data = JSON.parse(data);
|
|
1454
1498
|
}
|
|
1455
|
-
catch {
|
|
1499
|
+
catch {
|
|
1500
|
+
/* ignora */
|
|
1501
|
+
}
|
|
1456
1502
|
}
|
|
1457
|
-
if (data?.action ===
|
|
1503
|
+
if (data?.action === "request-iframe-media-metadata") {
|
|
1458
1504
|
this.postCastEvent({
|
|
1459
|
-
event:
|
|
1505
|
+
event: "metadata",
|
|
1460
1506
|
duration: this.plyr?.duration || 0,
|
|
1461
1507
|
currentTime: this.plyr?.currentTime || 0,
|
|
1462
1508
|
});
|
|
1463
1509
|
}
|
|
1464
|
-
if (data?.action ===
|
|
1510
|
+
if (data?.action === "play") {
|
|
1465
1511
|
this.plyr?.play();
|
|
1466
1512
|
}
|
|
1467
|
-
if (data?.action ===
|
|
1513
|
+
if (data?.action === "pause") {
|
|
1468
1514
|
this.plyr?.pause();
|
|
1469
1515
|
}
|
|
1470
|
-
if (data?.action ===
|
|
1516
|
+
if (data?.action === "seek" && typeof data.time === "number") {
|
|
1471
1517
|
this.plyr && (this.plyr.currentTime = data.time);
|
|
1472
1518
|
}
|
|
1473
1519
|
};
|
|
@@ -1486,8 +1532,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1486
1532
|
}
|
|
1487
1533
|
if (this.recommendationBlockerActiveZone) {
|
|
1488
1534
|
try {
|
|
1489
|
-
this.recommendationBlockerActiveZone.removeEventListener(
|
|
1490
|
-
this.recommendationBlockerActiveZone.removeEventListener(
|
|
1535
|
+
this.recommendationBlockerActiveZone.removeEventListener("pointerdown", this.onTopBlockerPointerDown);
|
|
1536
|
+
this.recommendationBlockerActiveZone.removeEventListener("click", this.onRecommendationBlockerClick);
|
|
1491
1537
|
}
|
|
1492
1538
|
catch { }
|
|
1493
1539
|
}
|
|
@@ -1495,8 +1541,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1495
1541
|
this.recommendationBlockerActiveZone = null;
|
|
1496
1542
|
if (this.topClickBlocker?.parentElement) {
|
|
1497
1543
|
try {
|
|
1498
|
-
this.topClickBlocker.removeEventListener(
|
|
1499
|
-
this.topClickBlocker.removeEventListener(
|
|
1544
|
+
this.topClickBlocker.removeEventListener("pointerdown", this.onTopBlockerPointerDown);
|
|
1545
|
+
this.topClickBlocker.removeEventListener("click", this.onTopBlockerClick);
|
|
1500
1546
|
this.topClickBlocker.parentElement.removeChild(this.topClickBlocker);
|
|
1501
1547
|
}
|
|
1502
1548
|
catch { }
|
|
@@ -1504,16 +1550,16 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1504
1550
|
this.topClickBlocker = null;
|
|
1505
1551
|
this.menuObserver?.disconnect();
|
|
1506
1552
|
this.menuObserver = undefined;
|
|
1507
|
-
window.removeEventListener(
|
|
1553
|
+
window.removeEventListener("resize", this.onResize);
|
|
1508
1554
|
this.plyr?.destroy();
|
|
1509
|
-
window.removeEventListener(
|
|
1555
|
+
window.removeEventListener("message", this.onCastMessage);
|
|
1510
1556
|
}
|
|
1511
1557
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlyrPlayerComponent, deps: [{ token: WebplayerProgressService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
1512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PlyrPlayerComponent, isStandalone: true, selector: "app-plyr-player", inputs: { config: "config" }, outputs: { ready: "ready" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<video #video playsinline></video>`, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var(--theme-progress-view-off, rgba(255, 255, 255, .25));--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{width:100%!important;height:100%!important;aspect-ratio:auto!important;top:0!important;left:0!important}:host ::ng-deep .mirror{transform:scaleX(-1)!important;-webkit-transform:scaleX(-1)!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}:host ::ng-deep .plyr--vimeo .plyr__video-wrapper.plyr__video-embed{aspect-ratio:16 / 9!important;width:100%!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1558
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PlyrPlayerComponent, isStandalone: true, selector: "app-plyr-player", inputs: { config: "config" }, outputs: { ready: "ready" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<video #video playsinline></video>`, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var( --theme-progress-view-off, rgba(255, 255, 255, .25) );--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{width:100%!important;height:100%!important;aspect-ratio:auto!important;top:0!important;left:0!important}:host ::ng-deep .mirror{transform:scaleX(-1)!important;-webkit-transform:scaleX(-1)!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}:host ::ng-deep .plyr--vimeo .plyr__video-wrapper.plyr__video-embed{aspect-ratio:16 / 9!important;width:100%!important;height:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1513
1559
|
}
|
|
1514
1560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlyrPlayerComponent, decorators: [{
|
|
1515
1561
|
type: Component,
|
|
1516
|
-
args: [{ selector: "app-plyr-player", template: `<video #video playsinline></video>`, standalone: true, imports: [CommonModule], styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var(--theme-progress-view-off, rgba(255, 255, 255, .25));--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{width:100%!important;height:100%!important;aspect-ratio:auto!important;top:0!important;left:0!important}:host ::ng-deep .mirror{transform:scaleX(-1)!important;-webkit-transform:scaleX(-1)!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}:host ::ng-deep .plyr--vimeo .plyr__video-wrapper.plyr__video-embed{aspect-ratio:16 / 9!important;width:100%!important;height:auto!important}\n"] }]
|
|
1562
|
+
args: [{ selector: "app-plyr-player", template: `<video #video playsinline></video>`, standalone: true, imports: [CommonModule], styles: [":host{display:block;width:100%;height:100%;position:relative;--plyr-color-main: var(--theme-alert, #19a6d9);--plyr-color-hover: var(--theme-alert, #2dbbff);--plyr-progress-buffer-background: var( --theme-progress-view-off, rgba(255, 255, 255, .25) );--plyr-control-background: var(--theme-bg, rgba(0, 0, 0, .8));--plyr-control-color: var(--theme-text-color, #fff);--plyr-control-button-color: var(--theme-font-bt, #fff)}:host ::ng-deep .plyr__controls{color:var(--plyr-control-color)!important;transition:opacity .2s ease,transform .2s ease}:host ::ng-deep .plyr__controls button{color:var(--plyr-control-color)!important}:host ::ng-deep .plyr__progress__buffer{background-color:var(--plyr-progress-buffer-background)!important}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{width:100%!important;height:100%!important;aspect-ratio:auto!important;top:0!important;left:0!important}:host ::ng-deep .mirror{transform:scaleX(-1)!important;-webkit-transform:scaleX(-1)!important}:host ::ng-deep .plyr--video .plyr__control.plyr__tab-focus,:host ::ng-deep .plyr--video .plyr__control:hover,:host ::ng-deep .plyr--video .plyr__control[aria-expanded=true]{background:var(--plyr-color-hover)!important;color:var(--plyr-control-button-color)!important}:host ::ng-deep .plyr--full-ui input[type=range]{color:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:var(--plyr-color-main)!important}:host ::ng-deep .plyr__menu__container{background:var(--plyr-control-background)!important;z-index:7!important}:host ::ng-deep .plyr--auto-hide-controls .plyr__controls{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}:host ::ng-deep .ytp-more-videos-view .ytp-suggestions{pointer-events:none!important}:host ::ng-deep .plyr--vimeo .plyr__video-wrapper.plyr__video-embed{aspect-ratio:16 / 9!important;width:100%!important;height:auto!important}\n"] }]
|
|
1517
1563
|
}], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
|
|
1518
1564
|
type: Inject,
|
|
1519
1565
|
args: [DOCUMENT]
|