@edm-webplayer/webplayer-angular 0.1.70 → 0.1.72
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.
|
@@ -92,16 +92,6 @@ class PlyrPlayerComponent {
|
|
|
92
92
|
onResize = () => {
|
|
93
93
|
this.updateRecommendationBlockerSafeZone();
|
|
94
94
|
};
|
|
95
|
-
onTopBlockerPointerDown = (event) => {
|
|
96
|
-
try {
|
|
97
|
-
event.preventDefault();
|
|
98
|
-
}
|
|
99
|
-
catch { }
|
|
100
|
-
event.stopPropagation();
|
|
101
|
-
};
|
|
102
|
-
onTopBlockerClick = () => {
|
|
103
|
-
this.togglePlayback();
|
|
104
|
-
};
|
|
105
95
|
onRecommendationBlockerClick = (event) => {
|
|
106
96
|
if (event) {
|
|
107
97
|
try {
|
|
@@ -113,7 +103,26 @@ class PlyrPlayerComponent {
|
|
|
113
103
|
}
|
|
114
104
|
catch { }
|
|
115
105
|
}
|
|
116
|
-
|
|
106
|
+
};
|
|
107
|
+
onTopBlockerPointerDown = (event) => {
|
|
108
|
+
try {
|
|
109
|
+
event.preventDefault();
|
|
110
|
+
}
|
|
111
|
+
catch { }
|
|
112
|
+
try {
|
|
113
|
+
event.stopPropagation();
|
|
114
|
+
}
|
|
115
|
+
catch { }
|
|
116
|
+
};
|
|
117
|
+
onTopBlockerClick = (event) => {
|
|
118
|
+
try {
|
|
119
|
+
event.preventDefault();
|
|
120
|
+
}
|
|
121
|
+
catch { }
|
|
122
|
+
try {
|
|
123
|
+
event.stopPropagation();
|
|
124
|
+
}
|
|
125
|
+
catch { }
|
|
117
126
|
};
|
|
118
127
|
controlsSafeZonePxDesktop = 96;
|
|
119
128
|
controlsSafeZonePxTouch = 144;
|
|
@@ -297,7 +306,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
297
306
|
blocker.style.left = "0";
|
|
298
307
|
blocker.style.width = "100%";
|
|
299
308
|
blocker.style.height = "100%";
|
|
300
|
-
blocker.style.zIndex = "
|
|
309
|
+
blocker.style.zIndex = "9";
|
|
301
310
|
blocker.style.pointerEvents = "none";
|
|
302
311
|
blocker.style.display = "none";
|
|
303
312
|
blocker.style.background = "rgba(0,0,0,0)";
|
|
@@ -328,87 +337,17 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
328
337
|
const blocker = this.ensureRecommendationBlocker();
|
|
329
338
|
if (!blocker)
|
|
330
339
|
return;
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
blocker.style.pointerEvents = "none";
|
|
335
|
-
if (activeZone) {
|
|
336
|
-
activeZone.style.pointerEvents = "auto";
|
|
337
|
-
}
|
|
338
|
-
this.updateRecommendationBlockerSafeZone();
|
|
339
|
-
}
|
|
340
|
-
else {
|
|
341
|
-
blocker.style.display = "none";
|
|
342
|
-
blocker.style.pointerEvents = "none";
|
|
343
|
-
if (activeZone) {
|
|
344
|
-
activeZone.style.pointerEvents = "none";
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
this.updateTopClickBlockerSafeZone();
|
|
340
|
+
blocker.style.display = active ? "block" : "none";
|
|
341
|
+
blocker.style.pointerEvents = "none";
|
|
342
|
+
this.updateRecommendationBlockerSafeZone();
|
|
348
343
|
}
|
|
349
344
|
updateRecommendationBlockerSafeZone() {
|
|
350
|
-
const overlaySafeZone = this.getOverlaySafeZone();
|
|
351
345
|
if (this.recommendationBlockerActiveZone) {
|
|
352
|
-
this.recommendationBlockerActiveZone.style.
|
|
346
|
+
this.recommendationBlockerActiveZone.style.pointerEvents = this.overlayBlockAll
|
|
347
|
+
? "auto"
|
|
348
|
+
: "none";
|
|
353
349
|
}
|
|
354
|
-
this.updateTopClickBlockerSafeZone(
|
|
355
|
-
}
|
|
356
|
-
updateTopClickBlockerSafeZone(precomputed) {
|
|
357
|
-
if (!this.topClickBlocker)
|
|
358
|
-
return;
|
|
359
|
-
const safeZoneRaw = typeof precomputed === "number" ? precomputed : this.getOverlaySafeZone();
|
|
360
|
-
const safeZone = Math.max(0, safeZoneRaw);
|
|
361
|
-
this.topClickBlocker.style.bottom = `${safeZone}px`;
|
|
362
|
-
}
|
|
363
|
-
togglePlayback(force) {
|
|
364
|
-
if (!this.plyr)
|
|
365
|
-
return;
|
|
366
|
-
const hasTogglePlay = typeof this.plyr.togglePlay === "function";
|
|
367
|
-
const ended = this.playbackEnded;
|
|
368
|
-
if (hasTogglePlay && typeof force === "undefined") {
|
|
369
|
-
try {
|
|
370
|
-
const result = this.plyr.togglePlay();
|
|
371
|
-
if (result && typeof result.catch === "function") {
|
|
372
|
-
result.catch(() => { });
|
|
373
|
-
}
|
|
374
|
-
return;
|
|
375
|
-
}
|
|
376
|
-
catch { }
|
|
377
|
-
}
|
|
378
|
-
const shouldPlay = typeof force === "boolean" ? !!force : !this.plyr.playing;
|
|
379
|
-
if (shouldPlay) {
|
|
380
|
-
if (this.deferUntilStartTimeSettles(() => this.togglePlayback(true))) {
|
|
381
|
-
return;
|
|
382
|
-
}
|
|
383
|
-
if (ended) {
|
|
384
|
-
try {
|
|
385
|
-
if (typeof this.plyr.restart === "function") {
|
|
386
|
-
this.plyr.restart();
|
|
387
|
-
}
|
|
388
|
-
else {
|
|
389
|
-
this.plyr.currentTime = 0;
|
|
390
|
-
}
|
|
391
|
-
}
|
|
392
|
-
catch { }
|
|
393
|
-
}
|
|
394
|
-
this.playbackEnded = false;
|
|
395
|
-
this.overlayBlockAll = false;
|
|
396
|
-
this.updateRecommendationBlockerSafeZone();
|
|
397
|
-
try {
|
|
398
|
-
const result = this.plyr.play?.();
|
|
399
|
-
if (result && typeof result.catch === "function") {
|
|
400
|
-
result.catch(() => { });
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
catch { }
|
|
404
|
-
return;
|
|
405
|
-
}
|
|
406
|
-
this.overlayBlockAll = true;
|
|
407
|
-
this.updateRecommendationBlockerSafeZone();
|
|
408
|
-
try {
|
|
409
|
-
this.plyr.pause?.();
|
|
410
|
-
}
|
|
411
|
-
catch { }
|
|
350
|
+
this.updateTopClickBlockerSafeZone();
|
|
412
351
|
}
|
|
413
352
|
ensureTopClickBlocker() {
|
|
414
353
|
if (this.config.video_host !== "youtube") {
|
|
@@ -418,6 +357,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
418
357
|
if (!wrapper)
|
|
419
358
|
return;
|
|
420
359
|
if (this.topClickBlocker && this.topClickBlocker.isConnected) {
|
|
360
|
+
this.updateTopClickBlockerSafeZone();
|
|
421
361
|
return;
|
|
422
362
|
}
|
|
423
363
|
const blocker = this.document.createElement("div");
|
|
@@ -431,13 +371,22 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
431
371
|
blocker.style.pointerEvents = "auto";
|
|
432
372
|
blocker.style.background = "rgba(0,0,0,0)";
|
|
433
373
|
blocker.style.touchAction = "none";
|
|
434
|
-
blocker.style.cursor = "
|
|
374
|
+
blocker.style.cursor = "default";
|
|
435
375
|
blocker.addEventListener("pointerdown", this.onTopBlockerPointerDown);
|
|
436
376
|
blocker.addEventListener("click", this.onTopBlockerClick);
|
|
437
377
|
wrapper.appendChild(blocker);
|
|
438
378
|
this.topClickBlocker = blocker;
|
|
439
379
|
this.updateTopClickBlockerSafeZone();
|
|
440
380
|
}
|
|
381
|
+
updateTopClickBlockerSafeZone() {
|
|
382
|
+
if (!this.topClickBlocker)
|
|
383
|
+
return;
|
|
384
|
+
const height = Math.max(48, Math.ceil(this.getOverlaySafeZone()));
|
|
385
|
+
this.topClickBlocker.style.height = `${height}px`;
|
|
386
|
+
this.topClickBlocker.style.pointerEvents = this.overlayBlockAll
|
|
387
|
+
? "auto"
|
|
388
|
+
: "none";
|
|
389
|
+
}
|
|
441
390
|
observeMenuChanges() {
|
|
442
391
|
this.menuObserver?.disconnect();
|
|
443
392
|
const container = this.plyr?.elements?.container;
|
|
@@ -697,6 +646,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
697
646
|
const media = target ?? this.videoRef?.nativeElement ?? null;
|
|
698
647
|
const prevVideoMuted = media?.muted ?? false;
|
|
699
648
|
const prevPlyrMuted = !!this.plyr?.muted;
|
|
649
|
+
const shouldForceUnmute = !this.shouldAutoplay();
|
|
700
650
|
try {
|
|
701
651
|
if (media) {
|
|
702
652
|
media.muted = true;
|
|
@@ -722,6 +672,9 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
722
672
|
}
|
|
723
673
|
}
|
|
724
674
|
catch { }
|
|
675
|
+
if (shouldForceUnmute) {
|
|
676
|
+
this.setPlayerMutedState(false, 1, media);
|
|
677
|
+
}
|
|
725
678
|
};
|
|
726
679
|
}
|
|
727
680
|
clearAutoplayUnlockListener() {
|
|
@@ -1014,11 +967,14 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1014
967
|
};
|
|
1015
968
|
const onPlay = () => {
|
|
1016
969
|
showControls();
|
|
1017
|
-
|
|
970
|
+
this.overlayBlockAll = false;
|
|
1018
971
|
};
|
|
1019
972
|
const onPause = () => {
|
|
1020
973
|
clearHideTimeout();
|
|
1021
974
|
showControls();
|
|
975
|
+
this.overlayBlockAll = true;
|
|
976
|
+
this.updateTopClickBlockerSafeZone();
|
|
977
|
+
this.topClickBlocker?.setAttribute("data-state", "paused");
|
|
1022
978
|
if (this.shouldEmitEndedOnPause()) {
|
|
1023
979
|
this.endedLoggedOnPause = true;
|
|
1024
980
|
console.log("event: ended");
|
|
@@ -1027,6 +983,9 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1027
983
|
const onEnded = () => {
|
|
1028
984
|
clearHideTimeout();
|
|
1029
985
|
showControls();
|
|
986
|
+
this.overlayBlockAll = true;
|
|
987
|
+
this.updateTopClickBlockerSafeZone();
|
|
988
|
+
this.topClickBlocker?.setAttribute("data-state", "ended");
|
|
1030
989
|
};
|
|
1031
990
|
const onUserInteraction = () => {
|
|
1032
991
|
showControls();
|
|
@@ -1587,11 +1546,11 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1587
1546
|
window.removeEventListener("message", this.onCastMessage);
|
|
1588
1547
|
}
|
|
1589
1548
|
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 });
|
|
1590
|
-
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" }, host: { properties: { "class.live-mode": "this.isLiveMode" } }, 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(.live-mode) ::ng-deep .plyr__controls,:host(.live-mode) ::ng-deep .plyr__control,:host(.live-mode) ::ng-deep .plyr__menu,:host(.live-mode) ::ng-deep .plyr__menu__container,:host(.live-mode) ::ng-deep .plyr__control--overlaid,:host(.live-mode) ::ng-deep .plyr__control--overlaid+.plyr__control{display:none!important}:host(.live-mode) ::ng-deep .plyr__video-wrapper,:host(.live-mode) ::ng-deep video,:host(.live-mode) ::ng-deep .plyr__video-embed{pointer-events:none!important}:host ::ng-deep .plyr__live-interaction-blocker{position:absolute;inset:0;z-index:12;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1549
|
+
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" }, host: { properties: { "class.live-mode": "this.isLiveMode" } }, 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;z-index:10!important}: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__control{z-index:10!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(.live-mode) ::ng-deep .plyr__controls,:host(.live-mode) ::ng-deep .plyr__control,:host(.live-mode) ::ng-deep .plyr__menu,:host(.live-mode) ::ng-deep .plyr__menu__container,:host(.live-mode) ::ng-deep .plyr__control--overlaid,:host(.live-mode) ::ng-deep .plyr__control--overlaid+.plyr__control{display:none!important}:host(.live-mode) ::ng-deep .plyr__video-wrapper,:host(.live-mode) ::ng-deep video,:host(.live-mode) ::ng-deep .plyr__video-embed{pointer-events:none!important}:host ::ng-deep .plyr__live-interaction-blocker{position:absolute;inset:0;z-index:12;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1591
1550
|
}
|
|
1592
1551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlyrPlayerComponent, decorators: [{
|
|
1593
1552
|
type: Component,
|
|
1594
|
-
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(.live-mode) ::ng-deep .plyr__controls,:host(.live-mode) ::ng-deep .plyr__control,:host(.live-mode) ::ng-deep .plyr__menu,:host(.live-mode) ::ng-deep .plyr__menu__container,:host(.live-mode) ::ng-deep .plyr__control--overlaid,:host(.live-mode) ::ng-deep .plyr__control--overlaid+.plyr__control{display:none!important}:host(.live-mode) ::ng-deep .plyr__video-wrapper,:host(.live-mode) ::ng-deep video,:host(.live-mode) ::ng-deep .plyr__video-embed{pointer-events:none!important}:host ::ng-deep .plyr__live-interaction-blocker{position:absolute;inset:0;z-index:12;pointer-events:auto}\n"] }]
|
|
1553
|
+
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;z-index:10!important}: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__control{z-index:10!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(.live-mode) ::ng-deep .plyr__controls,:host(.live-mode) ::ng-deep .plyr__control,:host(.live-mode) ::ng-deep .plyr__menu,:host(.live-mode) ::ng-deep .plyr__menu__container,:host(.live-mode) ::ng-deep .plyr__control--overlaid,:host(.live-mode) ::ng-deep .plyr__control--overlaid+.plyr__control{display:none!important}:host(.live-mode) ::ng-deep .plyr__video-wrapper,:host(.live-mode) ::ng-deep video,:host(.live-mode) ::ng-deep .plyr__video-embed{pointer-events:none!important}:host ::ng-deep .plyr__live-interaction-blocker{position:absolute;inset:0;z-index:12;pointer-events:auto}\n"] }]
|
|
1595
1554
|
}], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
|
|
1596
1555
|
type: Inject,
|
|
1597
1556
|
args: [DOCUMENT]
|
|
@@ -1803,6 +1762,7 @@ class VimeoPlayerComponent {
|
|
|
1803
1762
|
if (this.shouldEmitEndedOnPause()) {
|
|
1804
1763
|
this.handleEnded(true);
|
|
1805
1764
|
}
|
|
1765
|
+
this.unlockPlayerInteraction();
|
|
1806
1766
|
});
|
|
1807
1767
|
this.plyr.on('ended', () => {
|
|
1808
1768
|
onTimeUpdate();
|
|
@@ -2069,14 +2029,28 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
|
2069
2029
|
}
|
|
2070
2030
|
}
|
|
2071
2031
|
catch { }
|
|
2032
|
+
this.unlockPlayerInteraction();
|
|
2072
2033
|
};
|
|
2073
2034
|
}
|
|
2035
|
+
unlockPlayerInteraction() {
|
|
2036
|
+
try {
|
|
2037
|
+
const controls = this.plyr?.elements?.controls;
|
|
2038
|
+
if (controls) {
|
|
2039
|
+
controls.style.pointerEvents = 'auto';
|
|
2040
|
+
}
|
|
2041
|
+
const overlay = this.plyr?.elements?.buttons?.play;
|
|
2042
|
+
if (overlay) {
|
|
2043
|
+
overlay.style.pointerEvents = 'auto';
|
|
2044
|
+
}
|
|
2045
|
+
}
|
|
2046
|
+
catch { }
|
|
2047
|
+
}
|
|
2074
2048
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VimeoPlayerComponent, deps: [{ token: WebplayerProgressService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
|
2075
2049
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: VimeoPlayerComponent, isStandalone: true, selector: "app-vimeo-player", inputs: { config: "config" }, outputs: { ready: "ready" }, host: { properties: { "class.overlay-visible": "endedOverlayVisible" } }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
2076
2050
|
<div class="vimeo-wrapper">
|
|
2077
2051
|
<video #video playsinline></video>
|
|
2078
2052
|
</div>
|
|
2079
|
-
`, 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;z-index:
|
|
2053
|
+
`, 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;z-index:5}: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}.vimeo-wrapper{width:100%;height:100%;position:relative}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe{width:100%!important;height:100%!important;top:0!important;left:0!important;background:#000!important}:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{max-height:100%!important;object-fit:contain!important}:host ::ng-deep .plyr__video-wrapper{position:relative;z-index:1}:host(.overlay-visible) ::ng-deep .plyr__video-wrapper:after{content:\"\";position:absolute;inset:0 0 40px;pointer-events:none;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 45%),radial-gradient(circle at 70% 30%,rgba(255,255,255,.09),transparent 45%),#000000eb;z-index:2}: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__control--overlaid{position:fixed!important;z-index:4!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 }] });
|
|
2080
2054
|
}
|
|
2081
2055
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VimeoPlayerComponent, decorators: [{
|
|
2082
2056
|
type: Component,
|
|
@@ -2086,7 +2060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2086
2060
|
<div class="vimeo-wrapper">
|
|
2087
2061
|
<video #video playsinline></video>
|
|
2088
2062
|
</div>
|
|
2089
|
-
`, 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;z-index:
|
|
2063
|
+
`, 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;z-index:5}: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}.vimeo-wrapper{width:100%;height:100%;position:relative}:host ::ng-deep .plyr,:host ::ng-deep .plyr__video-wrapper,:host ::ng-deep .plyr__video-embed,:host ::ng-deep .plyr__video-embed>iframe{width:100%!important;height:100%!important;top:0!important;left:0!important;background:#000!important}:host ::ng-deep .plyr__video-embed>iframe,:host ::ng-deep video{max-height:100%!important;object-fit:contain!important}:host ::ng-deep .plyr__video-wrapper{position:relative;z-index:1}:host(.overlay-visible) ::ng-deep .plyr__video-wrapper:after{content:\"\";position:absolute;inset:0 0 40px;pointer-events:none;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 45%),radial-gradient(circle at 70% 30%,rgba(255,255,255,.09),transparent 45%),#000000eb;z-index:2}: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__control--overlaid{position:fixed!important;z-index:4!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"] }]
|
|
2090
2064
|
}], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
|
|
2091
2065
|
type: Inject,
|
|
2092
2066
|
args: [DOCUMENT]
|