@edm-webplayer/webplayer-angular 0.1.45 → 0.1.47
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.
|
@@ -78,17 +78,14 @@ class PlyrPlayerComponent {
|
|
|
78
78
|
recommendationBlocker;
|
|
79
79
|
recommendationBlockerActiveZone;
|
|
80
80
|
topClickBlocker;
|
|
81
|
-
gestureOverlay;
|
|
82
81
|
menuObserver;
|
|
83
82
|
playbackEnded = false;
|
|
84
83
|
overlayBlockAll = false;
|
|
85
84
|
endedPosterOverlay;
|
|
86
85
|
interactionUnmuteCleanup;
|
|
87
86
|
pendingStartTime;
|
|
88
|
-
pendingGesturePlay = false;
|
|
89
87
|
onResize = () => {
|
|
90
88
|
this.updateRecommendationBlockerSafeZone();
|
|
91
|
-
this.updateGestureOverlaySafeZone();
|
|
92
89
|
};
|
|
93
90
|
onTopBlockerPointerDown = (event) => {
|
|
94
91
|
try {
|
|
@@ -151,9 +148,12 @@ class PlyrPlayerComponent {
|
|
|
151
148
|
});
|
|
152
149
|
}
|
|
153
150
|
getControlsSafeZone() {
|
|
154
|
-
const controls = (this.plyr?.elements?.controls ??
|
|
151
|
+
const controls = (this.plyr?.elements?.controls ??
|
|
152
|
+
null);
|
|
155
153
|
const menuHeight = this.getOpenMenuHeight();
|
|
156
|
-
const baseSafeZone = this.isTouchDevice()
|
|
154
|
+
const baseSafeZone = this.isTouchDevice()
|
|
155
|
+
? this.controlsSafeZonePxTouch
|
|
156
|
+
: this.controlsSafeZonePxDesktop;
|
|
157
157
|
if (!controls) {
|
|
158
158
|
return Math.max(baseSafeZone, menuHeight + 5);
|
|
159
159
|
}
|
|
@@ -172,8 +172,7 @@ class PlyrPlayerComponent {
|
|
|
172
172
|
}
|
|
173
173
|
getOverlaySafeZone() {
|
|
174
174
|
const host = this.config?.video_host;
|
|
175
|
-
if (this.overlayBlockAll &&
|
|
176
|
-
(host === 'youtube' || host === 'vimeo')) {
|
|
175
|
+
if (this.overlayBlockAll && (host === "youtube" || host === "vimeo")) {
|
|
177
176
|
if (this.playbackEnded) {
|
|
178
177
|
return 0;
|
|
179
178
|
}
|
|
@@ -199,7 +198,7 @@ class PlyrPlayerComponent {
|
|
|
199
198
|
}
|
|
200
199
|
ngAfterViewInit() {
|
|
201
200
|
this.setupPlayer();
|
|
202
|
-
window.addEventListener(
|
|
201
|
+
window.addEventListener("message", this.onCastMessage);
|
|
203
202
|
}
|
|
204
203
|
ngOnChanges(changes) {
|
|
205
204
|
if (changes["config"] && this.plyr) {
|
|
@@ -207,10 +206,10 @@ class PlyrPlayerComponent {
|
|
|
207
206
|
}
|
|
208
207
|
}
|
|
209
208
|
applyTheme(colors) {
|
|
210
|
-
const STYLE_ID =
|
|
209
|
+
const STYLE_ID = "webplayer-theme-vars";
|
|
211
210
|
let styleEl = this.document.getElementById(STYLE_ID);
|
|
212
211
|
if (!styleEl) {
|
|
213
|
-
styleEl = this.document.createElement(
|
|
212
|
+
styleEl = this.document.createElement("style");
|
|
214
213
|
styleEl.id = STYLE_ID;
|
|
215
214
|
this.document.head.appendChild(styleEl);
|
|
216
215
|
}
|
|
@@ -218,7 +217,7 @@ class PlyrPlayerComponent {
|
|
|
218
217
|
const allPairs = [];
|
|
219
218
|
for (const key in colors) {
|
|
220
219
|
if (Object.prototype.hasOwnProperty.call(colors, key)) {
|
|
221
|
-
const cssVarName = `--theme-${key.replace(
|
|
220
|
+
const cssVarName = `--theme-${key.replace("progresss-", "progress-")}`;
|
|
222
221
|
const cssVarValue = String(colors[key]);
|
|
223
222
|
allPairs.push([cssVarName, cssVarValue]);
|
|
224
223
|
try {
|
|
@@ -228,7 +227,7 @@ class PlyrPlayerComponent {
|
|
|
228
227
|
}
|
|
229
228
|
}
|
|
230
229
|
const cssRule = `:root{
|
|
231
|
-
${allPairs.map(([n, v]) => ` ${n}: ${v};`).join(
|
|
230
|
+
${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
232
231
|
}`;
|
|
233
232
|
styleEl.textContent = cssRule;
|
|
234
233
|
}
|
|
@@ -240,7 +239,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
240
239
|
if (!candidate) {
|
|
241
240
|
return null;
|
|
242
241
|
}
|
|
243
|
-
return candidate.replace(/_/g,
|
|
242
|
+
return candidate.replace(/_/g, "-");
|
|
244
243
|
}
|
|
245
244
|
resolveLocale() {
|
|
246
245
|
const candidates = [
|
|
@@ -257,7 +256,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
257
256
|
return normalized;
|
|
258
257
|
}
|
|
259
258
|
}
|
|
260
|
-
return
|
|
259
|
+
return "pt-BR";
|
|
261
260
|
}
|
|
262
261
|
resolveCaptionsLanguage(locale) {
|
|
263
262
|
const explicit = this.normalizeLocaleCandidate(this.config?.captions_locale ??
|
|
@@ -268,7 +267,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
268
267
|
const baseLocale = explicit || locale;
|
|
269
268
|
if (!baseLocale)
|
|
270
269
|
return null;
|
|
271
|
-
const code = baseLocale.split(
|
|
270
|
+
const code = baseLocale.split("-")[0]?.trim();
|
|
272
271
|
return code ? code.toLowerCase() : null;
|
|
273
272
|
}
|
|
274
273
|
shouldHideVimeoRecommendations() {
|
|
@@ -307,7 +306,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
307
306
|
if (!container)
|
|
308
307
|
return null;
|
|
309
308
|
const wrapper = this.plyr?.elements?.wrapper ||
|
|
310
|
-
container.querySelector(
|
|
309
|
+
container.querySelector(".plyr__video-wrapper");
|
|
311
310
|
return wrapper || null;
|
|
312
311
|
}
|
|
313
312
|
ensureRecommendationBlocker() {
|
|
@@ -317,30 +316,30 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
317
316
|
const wrapper = this.getVideoWrapper();
|
|
318
317
|
if (!wrapper)
|
|
319
318
|
return null;
|
|
320
|
-
const blocker = this.document.createElement(
|
|
321
|
-
blocker.className =
|
|
322
|
-
blocker.style.position =
|
|
323
|
-
blocker.style.top =
|
|
324
|
-
blocker.style.left =
|
|
325
|
-
blocker.style.width =
|
|
326
|
-
blocker.style.height =
|
|
327
|
-
blocker.style.zIndex =
|
|
328
|
-
blocker.style.pointerEvents =
|
|
329
|
-
blocker.style.display =
|
|
330
|
-
blocker.style.background =
|
|
331
|
-
blocker.style.cursor =
|
|
332
|
-
const activeZone = this.document.createElement(
|
|
333
|
-
activeZone.className =
|
|
334
|
-
activeZone.style.position =
|
|
335
|
-
activeZone.style.top =
|
|
336
|
-
activeZone.style.left =
|
|
337
|
-
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%";
|
|
338
337
|
activeZone.style.bottom = `20px`;
|
|
339
|
-
activeZone.style.pointerEvents =
|
|
340
|
-
activeZone.style.background =
|
|
341
|
-
activeZone.style.cursor =
|
|
342
|
-
activeZone.addEventListener(
|
|
343
|
-
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);
|
|
344
343
|
blocker.appendChild(activeZone);
|
|
345
344
|
wrapper.appendChild(blocker);
|
|
346
345
|
this.recommendationBlocker = blocker;
|
|
@@ -349,7 +348,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
349
348
|
return blocker;
|
|
350
349
|
}
|
|
351
350
|
toggleRecommendationBlocker(active) {
|
|
352
|
-
if (this.config.video_host !== "youtube" &&
|
|
351
|
+
if (this.config.video_host !== "youtube" &&
|
|
352
|
+
this.config.video_host !== "vimeo") {
|
|
353
353
|
return;
|
|
354
354
|
}
|
|
355
355
|
const blocker = this.ensureRecommendationBlocker();
|
|
@@ -357,18 +357,18 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
357
357
|
return;
|
|
358
358
|
const activeZone = this.recommendationBlockerActiveZone;
|
|
359
359
|
if (active) {
|
|
360
|
-
blocker.style.display =
|
|
361
|
-
blocker.style.pointerEvents =
|
|
360
|
+
blocker.style.display = "block";
|
|
361
|
+
blocker.style.pointerEvents = "none";
|
|
362
362
|
if (activeZone) {
|
|
363
|
-
activeZone.style.pointerEvents =
|
|
363
|
+
activeZone.style.pointerEvents = "auto";
|
|
364
364
|
}
|
|
365
365
|
this.updateRecommendationBlockerSafeZone();
|
|
366
366
|
}
|
|
367
367
|
else {
|
|
368
|
-
blocker.style.display =
|
|
369
|
-
blocker.style.pointerEvents =
|
|
368
|
+
blocker.style.display = "none";
|
|
369
|
+
blocker.style.pointerEvents = "none";
|
|
370
370
|
if (activeZone) {
|
|
371
|
-
activeZone.style.pointerEvents =
|
|
371
|
+
activeZone.style.pointerEvents = "none";
|
|
372
372
|
}
|
|
373
373
|
}
|
|
374
374
|
this.updateTopClickBlockerSafeZone();
|
|
@@ -379,45 +379,37 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
379
379
|
this.recommendationBlockerActiveZone.style.bottom = `${overlaySafeZone}px`;
|
|
380
380
|
}
|
|
381
381
|
this.updateTopClickBlockerSafeZone(overlaySafeZone);
|
|
382
|
-
this.updateGestureOverlaySafeZone(this.getControlsSafeZone());
|
|
383
382
|
}
|
|
384
383
|
updateTopClickBlockerSafeZone(precomputed) {
|
|
385
384
|
if (!this.topClickBlocker)
|
|
386
385
|
return;
|
|
387
|
-
const safeZoneRaw = typeof precomputed ===
|
|
386
|
+
const safeZoneRaw = typeof precomputed === "number" ? precomputed : this.getOverlaySafeZone();
|
|
388
387
|
const safeZone = Math.max(0, safeZoneRaw);
|
|
389
388
|
this.topClickBlocker.style.bottom = `${safeZone}px`;
|
|
390
389
|
}
|
|
391
|
-
updateGestureOverlaySafeZone(precomputed) {
|
|
392
|
-
if (!this.gestureOverlay)
|
|
393
|
-
return;
|
|
394
|
-
const safeZoneRaw = typeof precomputed === 'number' ? precomputed : this.getOverlaySafeZone();
|
|
395
|
-
const safeZone = Math.max(0, safeZoneRaw);
|
|
396
|
-
this.gestureOverlay.style.bottom = `${safeZone}px`;
|
|
397
|
-
}
|
|
398
390
|
togglePlayback(force) {
|
|
399
391
|
if (!this.plyr)
|
|
400
392
|
return;
|
|
401
|
-
const hasTogglePlay = typeof this.plyr.togglePlay ===
|
|
393
|
+
const hasTogglePlay = typeof this.plyr.togglePlay === "function";
|
|
402
394
|
const ended = this.playbackEnded;
|
|
403
|
-
if (hasTogglePlay && typeof force ===
|
|
395
|
+
if (hasTogglePlay && typeof force === "undefined") {
|
|
404
396
|
try {
|
|
405
397
|
const result = this.plyr.togglePlay();
|
|
406
|
-
if (result && typeof result.catch ===
|
|
398
|
+
if (result && typeof result.catch === "function") {
|
|
407
399
|
result.catch(() => { });
|
|
408
400
|
}
|
|
409
401
|
return;
|
|
410
402
|
}
|
|
411
403
|
catch { }
|
|
412
404
|
}
|
|
413
|
-
const shouldPlay = typeof force ===
|
|
405
|
+
const shouldPlay = typeof force === "boolean" ? !!force : !this.plyr.playing;
|
|
414
406
|
if (shouldPlay) {
|
|
415
407
|
if (this.deferUntilStartTimeSettles(() => this.togglePlayback(true))) {
|
|
416
408
|
return;
|
|
417
409
|
}
|
|
418
410
|
if (ended) {
|
|
419
411
|
try {
|
|
420
|
-
if (typeof this.plyr.restart ===
|
|
412
|
+
if (typeof this.plyr.restart === "function") {
|
|
421
413
|
this.plyr.restart();
|
|
422
414
|
}
|
|
423
415
|
else {
|
|
@@ -429,10 +421,9 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
429
421
|
this.playbackEnded = false;
|
|
430
422
|
this.overlayBlockAll = false;
|
|
431
423
|
this.updateRecommendationBlockerSafeZone();
|
|
432
|
-
this.hideGestureOverlay();
|
|
433
424
|
try {
|
|
434
425
|
const result = this.plyr.play?.();
|
|
435
|
-
if (result && typeof result.catch ===
|
|
426
|
+
if (result && typeof result.catch === "function") {
|
|
436
427
|
result.catch(() => { });
|
|
437
428
|
}
|
|
438
429
|
}
|
|
@@ -447,7 +438,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
447
438
|
catch { }
|
|
448
439
|
}
|
|
449
440
|
ensureTopClickBlocker() {
|
|
450
|
-
if (this.config.video_host !== "youtube" &&
|
|
441
|
+
if (this.config.video_host !== "youtube" &&
|
|
442
|
+
this.config.video_host !== "vimeo") {
|
|
451
443
|
return;
|
|
452
444
|
}
|
|
453
445
|
const wrapper = this.getVideoWrapper();
|
|
@@ -456,20 +448,20 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
456
448
|
if (this.topClickBlocker && this.topClickBlocker.isConnected) {
|
|
457
449
|
return;
|
|
458
450
|
}
|
|
459
|
-
const blocker = this.document.createElement(
|
|
460
|
-
blocker.className =
|
|
461
|
-
blocker.style.position =
|
|
462
|
-
blocker.style.top =
|
|
463
|
-
blocker.style.left =
|
|
464
|
-
blocker.style.right =
|
|
465
|
-
blocker.style.width =
|
|
466
|
-
blocker.style.zIndex =
|
|
467
|
-
blocker.style.pointerEvents =
|
|
468
|
-
blocker.style.background =
|
|
469
|
-
blocker.style.touchAction =
|
|
470
|
-
blocker.style.cursor =
|
|
471
|
-
blocker.addEventListener(
|
|
472
|
-
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);
|
|
473
465
|
wrapper.appendChild(blocker);
|
|
474
466
|
this.topClickBlocker = blocker;
|
|
475
467
|
this.updateTopClickBlockerSafeZone();
|
|
@@ -487,56 +479,52 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
487
479
|
observer.observe(container, {
|
|
488
480
|
subtree: true,
|
|
489
481
|
attributes: true,
|
|
490
|
-
attributeFilter: [
|
|
482
|
+
attributeFilter: ["aria-hidden", "class", "style"],
|
|
491
483
|
});
|
|
492
484
|
this.menuObserver = observer;
|
|
493
485
|
}
|
|
494
486
|
isIOSDevice() {
|
|
495
|
-
if (typeof navigator ===
|
|
487
|
+
if (typeof navigator === "undefined")
|
|
496
488
|
return false;
|
|
497
|
-
const ua = navigator.userAgent ||
|
|
489
|
+
const ua = navigator.userAgent || "";
|
|
498
490
|
const iOS = /iPad|iPhone|iPod/.test(ua);
|
|
499
|
-
const iPadOS = navigator.platform ===
|
|
491
|
+
const iPadOS = navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
|
|
500
492
|
return iOS || iPadOS;
|
|
501
493
|
}
|
|
502
|
-
isAndroidDevice() {
|
|
503
|
-
if (typeof navigator === 'undefined')
|
|
504
|
-
return false;
|
|
505
|
-
return /Android/i.test(navigator.userAgent || '');
|
|
506
|
-
}
|
|
507
494
|
isTouchDevice() {
|
|
508
|
-
if (typeof window ===
|
|
495
|
+
if (typeof window === "undefined") {
|
|
509
496
|
return false;
|
|
510
497
|
}
|
|
511
|
-
if (typeof navigator !==
|
|
498
|
+
if (typeof navigator !== "undefined" && navigator.maxTouchPoints > 0) {
|
|
512
499
|
return true;
|
|
513
500
|
}
|
|
514
501
|
if (window.matchMedia) {
|
|
515
502
|
try {
|
|
516
|
-
if (window.matchMedia(
|
|
503
|
+
if (window.matchMedia("(pointer: coarse)").matches) {
|
|
517
504
|
return true;
|
|
518
505
|
}
|
|
519
506
|
}
|
|
520
507
|
catch { }
|
|
521
508
|
}
|
|
522
|
-
return
|
|
509
|
+
return "ontouchstart" in window;
|
|
523
510
|
}
|
|
524
511
|
isIframeProvider() {
|
|
525
|
-
return this.config?.video_host ===
|
|
512
|
+
return (this.config?.video_host === "youtube" ||
|
|
513
|
+
this.config?.video_host === "vimeo");
|
|
526
514
|
}
|
|
527
515
|
shouldDisableAutoplayForIOS() {
|
|
528
|
-
return this.isIOSDevice()
|
|
516
|
+
return this.isIOSDevice();
|
|
529
517
|
}
|
|
530
518
|
shouldDisableAutoplayForVimeo() {
|
|
531
|
-
return this.isIOSDevice() && this.config?.video_host ===
|
|
519
|
+
return this.isIOSDevice() && this.config?.video_host === "vimeo";
|
|
532
520
|
}
|
|
533
521
|
shouldResetProgressToBeginning() {
|
|
534
522
|
const host = this.config?.video_host;
|
|
535
|
-
if (host !==
|
|
523
|
+
if (host !== "youtube" && host !== "vimeo") {
|
|
536
524
|
return false;
|
|
537
525
|
}
|
|
538
526
|
const seenFlag = this.config?.seen;
|
|
539
|
-
if (seenFlag === true || seenFlag ===
|
|
527
|
+
if (seenFlag === true || seenFlag === "true" || seenFlag === 1) {
|
|
540
528
|
return true;
|
|
541
529
|
}
|
|
542
530
|
const rawPercent = this.config?.last_percent;
|
|
@@ -556,7 +544,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
556
544
|
return !!(this.config?.autoplay || this.config?.is_live);
|
|
557
545
|
}
|
|
558
546
|
shouldAutoplay() {
|
|
559
|
-
if (this.shouldDisableAutoplayForIOS() ||
|
|
547
|
+
if (this.shouldDisableAutoplayForIOS() ||
|
|
548
|
+
this.shouldDisableAutoplayForVimeo()) {
|
|
560
549
|
return false;
|
|
561
550
|
}
|
|
562
551
|
return this.wantsAutoplay();
|
|
@@ -568,7 +557,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
568
557
|
return this.wantsAutoplay();
|
|
569
558
|
}
|
|
570
559
|
shouldBlockIframeAutoplay() {
|
|
571
|
-
return this.shouldDisableAutoplayForIOS() || this.shouldDisableAutoplayForVimeo();
|
|
560
|
+
return (this.shouldDisableAutoplayForIOS() || this.shouldDisableAutoplayForVimeo());
|
|
572
561
|
}
|
|
573
562
|
stopRestrictedIframeAutoplay() {
|
|
574
563
|
if (!this.shouldBlockIframeAutoplay()) {
|
|
@@ -597,7 +586,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
597
586
|
}
|
|
598
587
|
catch { }
|
|
599
588
|
try {
|
|
600
|
-
if (typeof this.plyr.pause ===
|
|
589
|
+
if (typeof this.plyr.pause === "function") {
|
|
601
590
|
this.plyr.pause();
|
|
602
591
|
}
|
|
603
592
|
}
|
|
@@ -606,13 +595,13 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
606
595
|
const embed = this.plyr?.embed;
|
|
607
596
|
if (embed) {
|
|
608
597
|
try {
|
|
609
|
-
if (typeof embed.pause ===
|
|
598
|
+
if (typeof embed.pause === "function") {
|
|
610
599
|
embed.pause();
|
|
611
600
|
}
|
|
612
|
-
if (typeof embed.setMuted ===
|
|
601
|
+
if (typeof embed.setMuted === "function") {
|
|
613
602
|
embed.setMuted(false);
|
|
614
603
|
}
|
|
615
|
-
if (typeof embed.setVolume ===
|
|
604
|
+
if (typeof embed.setVolume === "function") {
|
|
616
605
|
embed.setVolume(1);
|
|
617
606
|
}
|
|
618
607
|
}
|
|
@@ -620,7 +609,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
620
609
|
}
|
|
621
610
|
}
|
|
622
611
|
enforceVimeoVolumeAfterPlay(video) {
|
|
623
|
-
if (this.config?.video_host !==
|
|
612
|
+
if (this.config?.video_host !== "vimeo") {
|
|
624
613
|
return;
|
|
625
614
|
}
|
|
626
615
|
const media = video ?? this.videoRef?.nativeElement ?? null;
|
|
@@ -629,13 +618,13 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
629
618
|
this.setPlayerMutedState(false, volumeTarget, media);
|
|
630
619
|
const currentEmbed = this.plyr?.embed;
|
|
631
620
|
if (currentEmbed) {
|
|
632
|
-
if (typeof currentEmbed.setMuted ===
|
|
621
|
+
if (typeof currentEmbed.setMuted === "function") {
|
|
633
622
|
try {
|
|
634
623
|
currentEmbed.setMuted(false);
|
|
635
624
|
}
|
|
636
625
|
catch { }
|
|
637
626
|
}
|
|
638
|
-
if (typeof currentEmbed.setVolume ===
|
|
627
|
+
if (typeof currentEmbed.setVolume === "function") {
|
|
639
628
|
try {
|
|
640
629
|
currentEmbed.setVolume(volumeTarget);
|
|
641
630
|
}
|
|
@@ -666,7 +655,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
666
655
|
media.muted = muted;
|
|
667
656
|
}
|
|
668
657
|
catch { }
|
|
669
|
-
if (!muted && typeof media.volume ===
|
|
658
|
+
if (!muted && typeof media.volume === "number") {
|
|
670
659
|
try {
|
|
671
660
|
media.volume = volume;
|
|
672
661
|
}
|
|
@@ -684,7 +673,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
684
673
|
}
|
|
685
674
|
}
|
|
686
675
|
ensureAutoplayUnlockListener() {
|
|
687
|
-
if (typeof window ===
|
|
676
|
+
if (typeof window === "undefined" ||
|
|
688
677
|
this.interactionUnmuteCleanup ||
|
|
689
678
|
!this.shouldAutoplay()) {
|
|
690
679
|
return;
|
|
@@ -698,13 +687,13 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
698
687
|
catch { }
|
|
699
688
|
this.clearAutoplayUnlockListener();
|
|
700
689
|
};
|
|
701
|
-
window.addEventListener(
|
|
702
|
-
window.addEventListener(
|
|
703
|
-
window.addEventListener(
|
|
690
|
+
window.addEventListener("touchend", handler, capture);
|
|
691
|
+
window.addEventListener("pointerup", handler, capture);
|
|
692
|
+
window.addEventListener("click", handler, capture);
|
|
704
693
|
this.interactionUnmuteCleanup = () => {
|
|
705
|
-
window.removeEventListener(
|
|
706
|
-
window.removeEventListener(
|
|
707
|
-
window.removeEventListener(
|
|
694
|
+
window.removeEventListener("touchend", handler, capture);
|
|
695
|
+
window.removeEventListener("pointerup", handler, capture);
|
|
696
|
+
window.removeEventListener("click", handler, capture);
|
|
708
697
|
this.interactionUnmuteCleanup = undefined;
|
|
709
698
|
};
|
|
710
699
|
}
|
|
@@ -715,22 +704,28 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
715
704
|
const container = this.plyr?.elements?.container;
|
|
716
705
|
if (!container)
|
|
717
706
|
return;
|
|
718
|
-
const iframe = container.querySelector(
|
|
707
|
+
const iframe = container.querySelector("iframe") ?? null;
|
|
719
708
|
if (!iframe)
|
|
720
709
|
return;
|
|
721
|
-
const allowRaw = iframe.getAttribute(
|
|
710
|
+
const allowRaw = iframe.getAttribute("allow") || "";
|
|
722
711
|
const tokens = new Set(allowRaw
|
|
723
|
-
.split(
|
|
712
|
+
.split(";")
|
|
724
713
|
.map((token) => token.trim())
|
|
725
714
|
.filter(Boolean));
|
|
726
|
-
[
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
iframe.setAttribute(
|
|
715
|
+
[
|
|
716
|
+
"autoplay",
|
|
717
|
+
"fullscreen",
|
|
718
|
+
"encrypted-media",
|
|
719
|
+
"picture-in-picture",
|
|
720
|
+
"gyroscope",
|
|
721
|
+
].forEach((rule) => tokens.add(rule));
|
|
722
|
+
iframe.setAttribute("allow", Array.from(tokens).join("; "));
|
|
723
|
+
if (this.config.video_host === "youtube") {
|
|
724
|
+
iframe.setAttribute("playsinline", "1");
|
|
725
|
+
iframe.setAttribute("webkit-playsinline", "1");
|
|
726
|
+
}
|
|
727
|
+
iframe.setAttribute("allowfullscreen", "true");
|
|
728
|
+
iframe.setAttribute("data-keepplaying", "true");
|
|
734
729
|
}
|
|
735
730
|
scheduleUserInteractionUnmute(video) {
|
|
736
731
|
this.unmuteAfterDelay(video || undefined);
|
|
@@ -808,7 +803,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
808
803
|
let maybePromise = null;
|
|
809
804
|
try {
|
|
810
805
|
const result = this.seekUsingHostAPI(start, video);
|
|
811
|
-
if (result && typeof result.then ===
|
|
806
|
+
if (result && typeof result.then === "function") {
|
|
812
807
|
maybePromise = result;
|
|
813
808
|
}
|
|
814
809
|
}
|
|
@@ -830,9 +825,9 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
830
825
|
if (!Number.isFinite(target) || target < 0) {
|
|
831
826
|
return null;
|
|
832
827
|
}
|
|
833
|
-
if (this.config.video_host ===
|
|
828
|
+
if (this.config.video_host === "vimeo") {
|
|
834
829
|
const embed = this.plyr?.embed;
|
|
835
|
-
if (embed && typeof embed.setCurrentTime ===
|
|
830
|
+
if (embed && typeof embed.setCurrentTime === "function") {
|
|
836
831
|
try {
|
|
837
832
|
return embed.setCurrentTime(target);
|
|
838
833
|
}
|
|
@@ -853,120 +848,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
853
848
|
catch { }
|
|
854
849
|
return null;
|
|
855
850
|
}
|
|
856
|
-
ensureGestureOverlay() {
|
|
857
|
-
if (this.gestureOverlay && this.gestureOverlay.isConnected) {
|
|
858
|
-
return this.gestureOverlay;
|
|
859
|
-
}
|
|
860
|
-
const wrapper = this.getVideoWrapper();
|
|
861
|
-
if (!wrapper) {
|
|
862
|
-
return null;
|
|
863
|
-
}
|
|
864
|
-
const overlay = this.document.createElement('button');
|
|
865
|
-
overlay.type = 'button';
|
|
866
|
-
overlay.className = 'plyr-gesture-overlay';
|
|
867
|
-
overlay.style.position = 'absolute';
|
|
868
|
-
overlay.style.top = '0';
|
|
869
|
-
overlay.style.left = '0';
|
|
870
|
-
overlay.style.right = '0';
|
|
871
|
-
overlay.style.bottom = '0';
|
|
872
|
-
overlay.style.width = '100%';
|
|
873
|
-
overlay.style.height = '100%';
|
|
874
|
-
overlay.style.display = 'none';
|
|
875
|
-
overlay.style.alignItems = 'center';
|
|
876
|
-
overlay.style.justifyContent = 'center';
|
|
877
|
-
overlay.style.padding = '0 16px';
|
|
878
|
-
overlay.style.background = 'rgba(0,0,0,0.35)';
|
|
879
|
-
overlay.style.backdropFilter = 'blur(1px)';
|
|
880
|
-
overlay.style.border = '0';
|
|
881
|
-
overlay.style.zIndex = '16';
|
|
882
|
-
overlay.style.color = 'var(--theme-text-color, #fff)';
|
|
883
|
-
overlay.style.fontSize = '14px';
|
|
884
|
-
overlay.style.fontWeight = '600';
|
|
885
|
-
overlay.style.textAlign = 'center';
|
|
886
|
-
overlay.style.cursor = 'pointer';
|
|
887
|
-
overlay.style.touchAction = 'manipulation';
|
|
888
|
-
overlay.style.pointerEvents = 'none';
|
|
889
|
-
overlay.textContent = 'Toque para reproduzir';
|
|
890
|
-
wrapper.appendChild(overlay);
|
|
891
|
-
this.gestureOverlay = overlay;
|
|
892
|
-
this.updateGestureOverlaySafeZone();
|
|
893
|
-
return overlay;
|
|
894
|
-
}
|
|
895
|
-
hideGestureOverlay() {
|
|
896
|
-
if (this.gestureOverlay) {
|
|
897
|
-
this.gestureOverlay.style.display = 'none';
|
|
898
|
-
this.gestureOverlay.style.pointerEvents = 'none';
|
|
899
|
-
}
|
|
900
|
-
this.pendingGesturePlay = false;
|
|
901
|
-
}
|
|
902
|
-
requestGestureToPlay(video) {
|
|
903
|
-
if (!this.isIframeProvider()) {
|
|
904
|
-
return;
|
|
905
|
-
}
|
|
906
|
-
if (this.pendingGesturePlay) {
|
|
907
|
-
return;
|
|
908
|
-
}
|
|
909
|
-
const overlay = this.ensureGestureOverlay();
|
|
910
|
-
if (!overlay) {
|
|
911
|
-
return;
|
|
912
|
-
}
|
|
913
|
-
this.pendingGesturePlay = true;
|
|
914
|
-
const media = video ?? this.videoRef?.nativeElement ?? null;
|
|
915
|
-
const onInteraction = (event) => {
|
|
916
|
-
try {
|
|
917
|
-
event.preventDefault();
|
|
918
|
-
}
|
|
919
|
-
catch { }
|
|
920
|
-
try {
|
|
921
|
-
event.stopPropagation();
|
|
922
|
-
}
|
|
923
|
-
catch { }
|
|
924
|
-
overlay.removeEventListener('click', onInteraction);
|
|
925
|
-
overlay.removeEventListener('touchend', onInteraction);
|
|
926
|
-
overlay.style.display = 'none';
|
|
927
|
-
this.pendingGesturePlay = false;
|
|
928
|
-
this.clearAutoplayUnlockListener();
|
|
929
|
-
this.setPlayerMutedState(this.requiresMutedAutoplay(), 1, media);
|
|
930
|
-
try {
|
|
931
|
-
const result = this.plyr?.play();
|
|
932
|
-
if (result && typeof result.catch === 'function') {
|
|
933
|
-
result.catch(() => {
|
|
934
|
-
this.requestGestureToPlay(media);
|
|
935
|
-
});
|
|
936
|
-
}
|
|
937
|
-
}
|
|
938
|
-
catch {
|
|
939
|
-
this.requestGestureToPlay(media);
|
|
940
|
-
}
|
|
941
|
-
};
|
|
942
|
-
overlay.addEventListener('click', onInteraction, { once: true });
|
|
943
|
-
overlay.addEventListener('touchend', onInteraction, { once: true });
|
|
944
|
-
this.updateGestureOverlaySafeZone();
|
|
945
|
-
overlay.style.pointerEvents = 'auto';
|
|
946
|
-
overlay.style.display = 'flex';
|
|
947
|
-
}
|
|
948
|
-
shouldShowGestureOverlayForError(error) {
|
|
949
|
-
if (!this.isIframeProvider()) {
|
|
950
|
-
return false;
|
|
951
|
-
}
|
|
952
|
-
if (!error) {
|
|
953
|
-
return true;
|
|
954
|
-
}
|
|
955
|
-
const err = error;
|
|
956
|
-
const name = typeof err.name === 'string' ? err.name.toLowerCase() : '';
|
|
957
|
-
const message = typeof err.message === 'string' ? err.message.toLowerCase() : '';
|
|
958
|
-
if (!name && !message) {
|
|
959
|
-
return true;
|
|
960
|
-
}
|
|
961
|
-
return (name.includes('notallowed') ||
|
|
962
|
-
name.includes('notallowederror') ||
|
|
963
|
-
name.includes('gesture') ||
|
|
964
|
-
message.includes('gesture') ||
|
|
965
|
-
message.includes('user interaction') ||
|
|
966
|
-
message.includes('user activation') ||
|
|
967
|
-
message.includes('without user') ||
|
|
968
|
-
message.includes('play() failed'));
|
|
969
|
-
}
|
|
970
851
|
startAutoplayFlow(video) {
|
|
971
852
|
if (!this.shouldAutoplay() || !this.plyr)
|
|
972
853
|
return;
|
|
@@ -989,19 +870,17 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
989
870
|
if (media) {
|
|
990
871
|
try {
|
|
991
872
|
const nativePlay = media.play();
|
|
992
|
-
if (nativePlay && typeof nativePlay.catch ===
|
|
873
|
+
if (nativePlay && typeof nativePlay.catch === "function") {
|
|
993
874
|
nativePlay.catch(() => { });
|
|
994
875
|
}
|
|
995
876
|
}
|
|
996
877
|
catch { }
|
|
997
878
|
}
|
|
998
879
|
this.scheduleUserInteractionUnmute(media);
|
|
999
|
-
if (this.shouldShowGestureOverlayForError(error)) {
|
|
1000
|
-
this.requestGestureToPlay(media);
|
|
1001
|
-
}
|
|
1002
880
|
return;
|
|
1003
881
|
}
|
|
1004
|
-
if (playResult &&
|
|
882
|
+
if (playResult &&
|
|
883
|
+
typeof playResult.catch === "function") {
|
|
1005
884
|
playResult.catch((error) => {
|
|
1006
885
|
if (!muted) {
|
|
1007
886
|
tryPlay(true);
|
|
@@ -1010,16 +889,13 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1010
889
|
if (media) {
|
|
1011
890
|
try {
|
|
1012
891
|
const nativePlay = media.play();
|
|
1013
|
-
if (nativePlay && typeof nativePlay.catch ===
|
|
892
|
+
if (nativePlay && typeof nativePlay.catch === "function") {
|
|
1014
893
|
nativePlay.catch(() => { });
|
|
1015
894
|
}
|
|
1016
895
|
}
|
|
1017
896
|
catch { }
|
|
1018
897
|
}
|
|
1019
898
|
this.scheduleUserInteractionUnmute(media);
|
|
1020
|
-
if (this.shouldShowGestureOverlayForError(error)) {
|
|
1021
|
-
this.requestGestureToPlay(media);
|
|
1022
|
-
}
|
|
1023
899
|
});
|
|
1024
900
|
return;
|
|
1025
901
|
}
|
|
@@ -1044,16 +920,16 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1044
920
|
const embed = this.plyr?.embed;
|
|
1045
921
|
if (!embed)
|
|
1046
922
|
return;
|
|
1047
|
-
if (this.config.video_host ===
|
|
1048
|
-
if (typeof embed.playVideo ===
|
|
923
|
+
if (this.config.video_host === "youtube") {
|
|
924
|
+
if (typeof embed.playVideo === "function") {
|
|
1049
925
|
try {
|
|
1050
926
|
embed.playVideo();
|
|
1051
927
|
}
|
|
1052
928
|
catch { }
|
|
1053
929
|
}
|
|
1054
930
|
}
|
|
1055
|
-
else if (this.config.video_host ===
|
|
1056
|
-
if (typeof embed.play ===
|
|
931
|
+
else if (this.config.video_host === "vimeo") {
|
|
932
|
+
if (typeof embed.play === "function") {
|
|
1057
933
|
try {
|
|
1058
934
|
embed.play();
|
|
1059
935
|
}
|
|
@@ -1077,11 +953,11 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1077
953
|
}
|
|
1078
954
|
};
|
|
1079
955
|
const showControls = () => {
|
|
1080
|
-
container.classList.remove(
|
|
956
|
+
container.classList.remove("plyr--auto-hide-controls");
|
|
1081
957
|
};
|
|
1082
958
|
const hideControls = () => {
|
|
1083
959
|
if (this.plyr?.playing) {
|
|
1084
|
-
container.classList.add(
|
|
960
|
+
container.classList.add("plyr--auto-hide-controls");
|
|
1085
961
|
}
|
|
1086
962
|
};
|
|
1087
963
|
const scheduleHide = () => {
|
|
@@ -1098,7 +974,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1098
974
|
clearHideTimeout();
|
|
1099
975
|
showControls();
|
|
1100
976
|
if (this.isIOSDevice()) {
|
|
1101
|
-
console.log(
|
|
977
|
+
console.log("event: ended");
|
|
1102
978
|
}
|
|
1103
979
|
};
|
|
1104
980
|
const onEnded = () => {
|
|
@@ -1109,19 +985,19 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1109
985
|
showControls();
|
|
1110
986
|
scheduleHide();
|
|
1111
987
|
};
|
|
1112
|
-
this.plyr?.on?.(
|
|
1113
|
-
this.plyr?.on?.(
|
|
1114
|
-
this.plyr?.on?.(
|
|
1115
|
-
container.addEventListener(
|
|
1116
|
-
container.addEventListener(
|
|
988
|
+
this.plyr?.on?.("play", onPlay);
|
|
989
|
+
this.plyr?.on?.("pause", onPause);
|
|
990
|
+
this.plyr?.on?.("ended", onEnded);
|
|
991
|
+
container.addEventListener("touchstart", onUserInteraction);
|
|
992
|
+
container.addEventListener("click", onUserInteraction);
|
|
1117
993
|
this.controlsVisibilityCleanup = () => {
|
|
1118
994
|
clearHideTimeout();
|
|
1119
|
-
this.plyr?.off?.(
|
|
1120
|
-
this.plyr?.off?.(
|
|
1121
|
-
this.plyr?.off?.(
|
|
1122
|
-
container.removeEventListener(
|
|
1123
|
-
container.removeEventListener(
|
|
1124
|
-
container.classList.remove(
|
|
995
|
+
this.plyr?.off?.("play", onPlay);
|
|
996
|
+
this.plyr?.off?.("pause", onPause);
|
|
997
|
+
this.plyr?.off?.("ended", onEnded);
|
|
998
|
+
container.removeEventListener("touchstart", onUserInteraction);
|
|
999
|
+
container.removeEventListener("click", onUserInteraction);
|
|
1000
|
+
container.classList.remove("plyr--auto-hide-controls");
|
|
1125
1001
|
};
|
|
1126
1002
|
onPlay();
|
|
1127
1003
|
return;
|
|
@@ -1130,10 +1006,10 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1130
1006
|
const toggleClass = () => {
|
|
1131
1007
|
const playing = !!this.plyr?.playing;
|
|
1132
1008
|
if (playing && !hovering) {
|
|
1133
|
-
container.classList.add(
|
|
1009
|
+
container.classList.add("plyr--auto-hide-controls");
|
|
1134
1010
|
}
|
|
1135
1011
|
else {
|
|
1136
|
-
container.classList.remove(
|
|
1012
|
+
container.classList.remove("plyr--auto-hide-controls");
|
|
1137
1013
|
}
|
|
1138
1014
|
};
|
|
1139
1015
|
const onPlay = () => toggleClass();
|
|
@@ -1152,39 +1028,39 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1152
1028
|
toggleClass();
|
|
1153
1029
|
};
|
|
1154
1030
|
const onFocusOut = () => {
|
|
1155
|
-
hovering = container.matches(
|
|
1031
|
+
hovering = container.matches(":hover");
|
|
1156
1032
|
toggleClass();
|
|
1157
1033
|
};
|
|
1158
|
-
this.plyr?.on?.(
|
|
1159
|
-
this.plyr?.on?.(
|
|
1160
|
-
this.plyr?.on?.(
|
|
1161
|
-
container.addEventListener(
|
|
1162
|
-
container.addEventListener(
|
|
1163
|
-
container.addEventListener(
|
|
1164
|
-
container.addEventListener(
|
|
1034
|
+
this.plyr?.on?.("play", onPlay);
|
|
1035
|
+
this.plyr?.on?.("pause", onPause);
|
|
1036
|
+
this.plyr?.on?.("ended", onEnded);
|
|
1037
|
+
container.addEventListener("mouseenter", onMouseEnter);
|
|
1038
|
+
container.addEventListener("mouseleave", onMouseLeave);
|
|
1039
|
+
container.addEventListener("focusin", onFocusIn);
|
|
1040
|
+
container.addEventListener("focusout", onFocusOut);
|
|
1165
1041
|
toggleClass();
|
|
1166
1042
|
this.controlsVisibilityCleanup = () => {
|
|
1167
|
-
this.plyr?.off?.(
|
|
1168
|
-
this.plyr?.off?.(
|
|
1169
|
-
this.plyr?.off?.(
|
|
1170
|
-
container.removeEventListener(
|
|
1171
|
-
container.removeEventListener(
|
|
1172
|
-
container.removeEventListener(
|
|
1173
|
-
container.removeEventListener(
|
|
1174
|
-
container.classList.remove(
|
|
1043
|
+
this.plyr?.off?.("play", onPlay);
|
|
1044
|
+
this.plyr?.off?.("pause", onPause);
|
|
1045
|
+
this.plyr?.off?.("ended", onEnded);
|
|
1046
|
+
container.removeEventListener("mouseenter", onMouseEnter);
|
|
1047
|
+
container.removeEventListener("mouseleave", onMouseLeave);
|
|
1048
|
+
container.removeEventListener("focusin", onFocusIn);
|
|
1049
|
+
container.removeEventListener("focusout", onFocusOut);
|
|
1050
|
+
container.classList.remove("plyr--auto-hide-controls");
|
|
1175
1051
|
};
|
|
1176
1052
|
}
|
|
1177
1053
|
bindFullscreenBehavior() {
|
|
1178
1054
|
const onEnterFullscreen = () => {
|
|
1179
|
-
console.log(
|
|
1055
|
+
console.log("event: enterfullscreen");
|
|
1180
1056
|
parent.postMessage("event: fullscreen_enter', '*'");
|
|
1181
1057
|
};
|
|
1182
1058
|
const onExitFullscreen = () => {
|
|
1183
|
-
console.log(
|
|
1059
|
+
console.log("event: exitfullscreen");
|
|
1184
1060
|
parent.postMessage("event: fullscreen_exit', '*'");
|
|
1185
1061
|
};
|
|
1186
|
-
this.plyr.on(
|
|
1187
|
-
this.plyr.on(
|
|
1062
|
+
this.plyr.on("enterfullscreen", onEnterFullscreen);
|
|
1063
|
+
this.plyr.on("exitfullscreen", onExitFullscreen);
|
|
1188
1064
|
}
|
|
1189
1065
|
setupPlayer() {
|
|
1190
1066
|
if (!this.videoRef)
|
|
@@ -1194,11 +1070,10 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1194
1070
|
this.controlsVisibilityCleanup = undefined;
|
|
1195
1071
|
this.plyr?.destroy();
|
|
1196
1072
|
this.clearAutoplayUnlockListener();
|
|
1197
|
-
this.hideGestureOverlay();
|
|
1198
1073
|
this.recommendationBlocker = null;
|
|
1199
1074
|
const speedOptions = [1, 1.25, 1.5, 2];
|
|
1200
1075
|
const locale = this.resolveLocale();
|
|
1201
|
-
const captionsLanguage = this.resolveCaptionsLanguage(locale) ??
|
|
1076
|
+
const captionsLanguage = this.resolveCaptionsLanguage(locale) ?? "pt";
|
|
1202
1077
|
const hideVimeoRecommendations = this.shouldHideVimeoRecommendations();
|
|
1203
1078
|
const vimeoPremium = Boolean(this.config?.vimeo_premium);
|
|
1204
1079
|
const shouldAutoplay = this.shouldAutoplay();
|
|
@@ -1208,7 +1083,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1208
1083
|
}
|
|
1209
1084
|
catch { }
|
|
1210
1085
|
try {
|
|
1211
|
-
this.videoRef.nativeElement.playsInline =
|
|
1086
|
+
this.videoRef.nativeElement.playsInline =
|
|
1087
|
+
this.config?.video_host === "youtube";
|
|
1212
1088
|
}
|
|
1213
1089
|
catch { }
|
|
1214
1090
|
try {
|
|
@@ -1222,7 +1098,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1222
1098
|
};
|
|
1223
1099
|
youtubePlayerVars.playerVars = {
|
|
1224
1100
|
hl: locale,
|
|
1225
|
-
cc_lang_pref: captionsLanguage || locale.split(
|
|
1101
|
+
cc_lang_pref: captionsLanguage || locale.split("-")[0]?.toLowerCase(),
|
|
1226
1102
|
autoplay: shouldAutoplay ? 1 : 0,
|
|
1227
1103
|
mute: startMuted ? 1 : 0,
|
|
1228
1104
|
playsinline: 1,
|
|
@@ -1252,11 +1128,11 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1252
1128
|
container: null,
|
|
1253
1129
|
},
|
|
1254
1130
|
i18n: {
|
|
1255
|
-
speed:
|
|
1131
|
+
speed: "Velocidade",
|
|
1256
1132
|
},
|
|
1257
1133
|
speed: {
|
|
1258
1134
|
selected: 1,
|
|
1259
|
-
options: speedOptions
|
|
1135
|
+
options: speedOptions,
|
|
1260
1136
|
},
|
|
1261
1137
|
clickToPlay: true,
|
|
1262
1138
|
hideControls: false,
|
|
@@ -1268,7 +1144,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1268
1144
|
if (captionsLanguage) {
|
|
1269
1145
|
plyrOptions.captions = { language: captionsLanguage };
|
|
1270
1146
|
}
|
|
1271
|
-
if (this.config.video_host ===
|
|
1147
|
+
if (this.config.video_host === "youtube") {
|
|
1272
1148
|
plyrOptions.youtube = youtubePlayerVars;
|
|
1273
1149
|
}
|
|
1274
1150
|
this.plyr = new Plyr.default(this.videoRef.nativeElement, plyrOptions);
|
|
@@ -1278,8 +1154,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1278
1154
|
this.observeMenuChanges();
|
|
1279
1155
|
this.playbackEnded = false;
|
|
1280
1156
|
this.overlayBlockAll = false;
|
|
1281
|
-
window.removeEventListener(
|
|
1282
|
-
window.addEventListener(
|
|
1157
|
+
window.removeEventListener("resize", this.onResize);
|
|
1158
|
+
window.addEventListener("resize", this.onResize);
|
|
1283
1159
|
this.bindProgressEvents();
|
|
1284
1160
|
this.loadSource(this.videoRef.nativeElement).then(() => {
|
|
1285
1161
|
this.setupStartTime();
|
|
@@ -1288,9 +1164,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1288
1164
|
this.plyr.on("ready", () => {
|
|
1289
1165
|
this.ensureIframeAutoplayPermissions();
|
|
1290
1166
|
this.stopRestrictedIframeAutoplay();
|
|
1291
|
-
if (this.shouldDisableAutoplayForVimeo()) {
|
|
1292
|
-
this.requestGestureToPlay();
|
|
1293
|
-
}
|
|
1294
1167
|
this.ready.emit();
|
|
1295
1168
|
});
|
|
1296
1169
|
}
|
|
@@ -1310,7 +1183,11 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1310
1183
|
const t = this.plyr.currentTime || 0;
|
|
1311
1184
|
const d = this.plyr.duration || 0;
|
|
1312
1185
|
const p = d > 0 ? +((t / d) * 100).toFixed(2) : 0;
|
|
1313
|
-
this.progressService.progress$.next({
|
|
1186
|
+
this.progressService.progress$.next({
|
|
1187
|
+
currentTime: t,
|
|
1188
|
+
duration: d,
|
|
1189
|
+
percent: p,
|
|
1190
|
+
});
|
|
1314
1191
|
};
|
|
1315
1192
|
const onTimeUpdate = () => {
|
|
1316
1193
|
const now = performance.now();
|
|
@@ -1318,34 +1195,38 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1318
1195
|
lastEmit = now;
|
|
1319
1196
|
emitProgress();
|
|
1320
1197
|
}
|
|
1321
|
-
parent.postMessage(
|
|
1322
|
-
console.log(
|
|
1323
|
-
console.log(
|
|
1198
|
+
parent.postMessage("currentTime:" + (this.plyr.currentTime || 0), "*");
|
|
1199
|
+
console.log("event: current_time " + (this.plyr.currentTime || 0));
|
|
1200
|
+
console.log("event: duration " + this.plyr.duration);
|
|
1324
1201
|
this.postCastEvent({
|
|
1325
|
-
event:
|
|
1202
|
+
event: "current_time",
|
|
1326
1203
|
currentTime: this.plyr.currentTime || 0,
|
|
1327
1204
|
duration: this.plyr.duration || 0,
|
|
1328
1205
|
});
|
|
1329
1206
|
};
|
|
1330
1207
|
this.plyr?.on?.("play", () => {
|
|
1331
1208
|
this.retryPendingStartTime();
|
|
1332
|
-
this.hideGestureOverlay();
|
|
1333
1209
|
this.clearVimeoEndedState();
|
|
1334
1210
|
this.playbackEnded = false;
|
|
1335
1211
|
this.overlayBlockAll = false;
|
|
1336
1212
|
this.updateRecommendationBlockerSafeZone();
|
|
1337
1213
|
this.toggleRecommendationBlocker(false);
|
|
1338
1214
|
this.enforceVimeoVolumeAfterPlay();
|
|
1339
|
-
parent.postMessage(
|
|
1340
|
-
|
|
1341
|
-
|
|
1215
|
+
parent.postMessage("playing_video", "*");
|
|
1216
|
+
this.postCastEvent({
|
|
1217
|
+
event: "play",
|
|
1218
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1219
|
+
});
|
|
1342
1220
|
});
|
|
1343
1221
|
this.plyr?.on?.("timeupdate", onTimeUpdate);
|
|
1344
1222
|
this.plyr?.on?.("pause", () => {
|
|
1345
1223
|
emitProgress();
|
|
1346
|
-
console.log(
|
|
1347
|
-
parent.postMessage(
|
|
1348
|
-
this.postCastEvent({
|
|
1224
|
+
console.log("event: pause");
|
|
1225
|
+
parent.postMessage("paused_video", "*");
|
|
1226
|
+
this.postCastEvent({
|
|
1227
|
+
event: "pause",
|
|
1228
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1229
|
+
});
|
|
1349
1230
|
this.overlayBlockAll = true;
|
|
1350
1231
|
this.updateRecommendationBlockerSafeZone();
|
|
1351
1232
|
this.toggleRecommendationBlocker(true);
|
|
@@ -1355,9 +1236,12 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1355
1236
|
this.playbackEnded = true;
|
|
1356
1237
|
this.overlayBlockAll = true;
|
|
1357
1238
|
this.updateRecommendationBlockerSafeZone();
|
|
1358
|
-
console.log(
|
|
1359
|
-
parent.postMessage(
|
|
1360
|
-
this.postCastEvent({
|
|
1239
|
+
console.log("event: ended");
|
|
1240
|
+
parent.postMessage("event: ended", "*");
|
|
1241
|
+
this.postCastEvent({
|
|
1242
|
+
event: "ended",
|
|
1243
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1244
|
+
});
|
|
1361
1245
|
this.progressService.ended$.next();
|
|
1362
1246
|
this.preventVimeoRecommendations();
|
|
1363
1247
|
this.toggleRecommendationBlocker(true);
|
|
@@ -1386,7 +1270,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1386
1270
|
}
|
|
1387
1271
|
resetPlaybackRate(video) {
|
|
1388
1272
|
try {
|
|
1389
|
-
if (this.plyr && typeof this.plyr.speed !==
|
|
1273
|
+
if (this.plyr && typeof this.plyr.speed !== "undefined") {
|
|
1390
1274
|
this.plyr.speed = 1;
|
|
1391
1275
|
}
|
|
1392
1276
|
}
|
|
@@ -1415,7 +1299,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1415
1299
|
this.hls = undefined;
|
|
1416
1300
|
}
|
|
1417
1301
|
this.resetPlaybackRate(video);
|
|
1418
|
-
if (this.config.video_host === "youtube" ||
|
|
1302
|
+
if (this.config.video_host === "youtube" ||
|
|
1303
|
+
this.config.video_host === "vimeo") {
|
|
1419
1304
|
const onReady = () => {
|
|
1420
1305
|
this.plyr.off("ready", onReady);
|
|
1421
1306
|
this.ensureIframeAutoplayPermissions();
|
|
@@ -1427,20 +1312,20 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1427
1312
|
else if (this.shouldBlockIframeAutoplay()) {
|
|
1428
1313
|
this.stopRestrictedIframeAutoplay();
|
|
1429
1314
|
}
|
|
1430
|
-
parent.postMessage(
|
|
1431
|
-
parent.postMessage(
|
|
1432
|
-
console.log(
|
|
1433
|
-
console.log(
|
|
1434
|
-
console.log(
|
|
1315
|
+
parent.postMessage("playerIsReadyToPlay", "*");
|
|
1316
|
+
parent.postMessage("duration:" + this.plyr.duration, "*");
|
|
1317
|
+
console.log("event: current_time " + this.plyr.currentTime);
|
|
1318
|
+
console.log("event: duration " + this.plyr.duration);
|
|
1319
|
+
console.log("event: ready");
|
|
1435
1320
|
this.postCastEvent({
|
|
1436
|
-
event:
|
|
1321
|
+
event: "ready",
|
|
1437
1322
|
duration: this.plyr.duration || 0,
|
|
1438
1323
|
currentTime: this.plyr.currentTime || 0,
|
|
1439
1324
|
});
|
|
1440
1325
|
if (this.config.is_live) {
|
|
1441
|
-
this.plyr?.on(
|
|
1442
|
-
console.log(
|
|
1443
|
-
parent.postMessage(
|
|
1326
|
+
this.plyr?.on("playing", function () {
|
|
1327
|
+
console.log("event: playing_live");
|
|
1328
|
+
parent.postMessage("event: playing_live", "*");
|
|
1444
1329
|
});
|
|
1445
1330
|
}
|
|
1446
1331
|
if (this.config.mirror) {
|
|
@@ -1474,10 +1359,10 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1474
1359
|
else if (this.config.video_host === "hls") {
|
|
1475
1360
|
let sourceX = "";
|
|
1476
1361
|
try {
|
|
1477
|
-
sourceX = atob(this.config.video_id ||
|
|
1362
|
+
sourceX = atob(this.config.video_id || "");
|
|
1478
1363
|
}
|
|
1479
1364
|
catch (e) {
|
|
1480
|
-
sourceX = this.config.video_id ||
|
|
1365
|
+
sourceX = this.config.video_id || "";
|
|
1481
1366
|
}
|
|
1482
1367
|
const canNative = video.canPlayType("application/vnd.apple.mpegurl");
|
|
1483
1368
|
if (canNative) {
|
|
@@ -1560,7 +1445,9 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1560
1445
|
if (hasTime) {
|
|
1561
1446
|
return clamp(last_time);
|
|
1562
1447
|
}
|
|
1563
|
-
const hasPercent = last_percent !== undefined &&
|
|
1448
|
+
const hasPercent = last_percent !== undefined &&
|
|
1449
|
+
last_percent !== null &&
|
|
1450
|
+
last_percent !== "";
|
|
1564
1451
|
if (hasPercent && hasValidDuration) {
|
|
1565
1452
|
let p = Number(last_percent);
|
|
1566
1453
|
if (!isFinite(p) || p < 0)
|
|
@@ -1581,30 +1468,32 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1581
1468
|
return 0;
|
|
1582
1469
|
}
|
|
1583
1470
|
postCastEvent(payload) {
|
|
1584
|
-
parent.postMessage(JSON.stringify(payload),
|
|
1471
|
+
parent.postMessage(JSON.stringify(payload), "*");
|
|
1585
1472
|
}
|
|
1586
1473
|
onCastMessage = (evt) => {
|
|
1587
1474
|
let data = evt.data;
|
|
1588
|
-
if (typeof data ===
|
|
1475
|
+
if (typeof data === "string") {
|
|
1589
1476
|
try {
|
|
1590
1477
|
data = JSON.parse(data);
|
|
1591
1478
|
}
|
|
1592
|
-
catch {
|
|
1479
|
+
catch {
|
|
1480
|
+
/* ignora */
|
|
1481
|
+
}
|
|
1593
1482
|
}
|
|
1594
|
-
if (data?.action ===
|
|
1483
|
+
if (data?.action === "request-iframe-media-metadata") {
|
|
1595
1484
|
this.postCastEvent({
|
|
1596
|
-
event:
|
|
1485
|
+
event: "metadata",
|
|
1597
1486
|
duration: this.plyr?.duration || 0,
|
|
1598
1487
|
currentTime: this.plyr?.currentTime || 0,
|
|
1599
1488
|
});
|
|
1600
1489
|
}
|
|
1601
|
-
if (data?.action ===
|
|
1490
|
+
if (data?.action === "play") {
|
|
1602
1491
|
this.plyr?.play();
|
|
1603
1492
|
}
|
|
1604
|
-
if (data?.action ===
|
|
1493
|
+
if (data?.action === "pause") {
|
|
1605
1494
|
this.plyr?.pause();
|
|
1606
1495
|
}
|
|
1607
|
-
if (data?.action ===
|
|
1496
|
+
if (data?.action === "seek" && typeof data.time === "number") {
|
|
1608
1497
|
this.plyr && (this.plyr.currentTime = data.time);
|
|
1609
1498
|
}
|
|
1610
1499
|
};
|
|
@@ -1623,8 +1512,8 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1623
1512
|
}
|
|
1624
1513
|
if (this.recommendationBlockerActiveZone) {
|
|
1625
1514
|
try {
|
|
1626
|
-
this.recommendationBlockerActiveZone.removeEventListener(
|
|
1627
|
-
this.recommendationBlockerActiveZone.removeEventListener(
|
|
1515
|
+
this.recommendationBlockerActiveZone.removeEventListener("pointerdown", this.onTopBlockerPointerDown);
|
|
1516
|
+
this.recommendationBlockerActiveZone.removeEventListener("click", this.onRecommendationBlockerClick);
|
|
1628
1517
|
}
|
|
1629
1518
|
catch { }
|
|
1630
1519
|
}
|
|
@@ -1632,33 +1521,25 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
1632
1521
|
this.recommendationBlockerActiveZone = null;
|
|
1633
1522
|
if (this.topClickBlocker?.parentElement) {
|
|
1634
1523
|
try {
|
|
1635
|
-
this.topClickBlocker.removeEventListener(
|
|
1636
|
-
this.topClickBlocker.removeEventListener(
|
|
1524
|
+
this.topClickBlocker.removeEventListener("pointerdown", this.onTopBlockerPointerDown);
|
|
1525
|
+
this.topClickBlocker.removeEventListener("click", this.onTopBlockerClick);
|
|
1637
1526
|
this.topClickBlocker.parentElement.removeChild(this.topClickBlocker);
|
|
1638
1527
|
}
|
|
1639
1528
|
catch { }
|
|
1640
1529
|
}
|
|
1641
1530
|
this.topClickBlocker = null;
|
|
1642
|
-
if (this.gestureOverlay?.parentElement) {
|
|
1643
|
-
try {
|
|
1644
|
-
this.gestureOverlay.parentElement.removeChild(this.gestureOverlay);
|
|
1645
|
-
}
|
|
1646
|
-
catch { }
|
|
1647
|
-
}
|
|
1648
|
-
this.gestureOverlay = null;
|
|
1649
|
-
this.pendingGesturePlay = false;
|
|
1650
1531
|
this.menuObserver?.disconnect();
|
|
1651
1532
|
this.menuObserver = undefined;
|
|
1652
|
-
window.removeEventListener(
|
|
1533
|
+
window.removeEventListener("resize", this.onResize);
|
|
1653
1534
|
this.plyr?.destroy();
|
|
1654
|
-
window.removeEventListener(
|
|
1535
|
+
window.removeEventListener("message", this.onCastMessage);
|
|
1655
1536
|
}
|
|
1656
1537
|
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 });
|
|
1657
|
-
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 }] });
|
|
1538
|
+
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 }] });
|
|
1658
1539
|
}
|
|
1659
1540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlyrPlayerComponent, decorators: [{
|
|
1660
1541
|
type: Component,
|
|
1661
|
-
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"] }]
|
|
1542
|
+
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"] }]
|
|
1662
1543
|
}], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
|
|
1663
1544
|
type: Inject,
|
|
1664
1545
|
args: [DOCUMENT]
|