@edm-webplayer/webplayer-angular 0.1.49 → 0.1.51
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.
|
@@ -84,11 +84,6 @@ class PlyrPlayerComponent {
|
|
|
84
84
|
endedPosterOverlay;
|
|
85
85
|
interactionUnmuteCleanup;
|
|
86
86
|
pendingStartTime;
|
|
87
|
-
nativeVimeoPlayer;
|
|
88
|
-
nativeVimeoContainer;
|
|
89
|
-
vimeoPlayerScriptPromise;
|
|
90
|
-
nativeVimeoDuration = 0;
|
|
91
|
-
nativeVimeoCurrentTime = 0;
|
|
92
87
|
onResize = () => {
|
|
93
88
|
this.updateRecommendationBlockerSafeZone();
|
|
94
89
|
};
|
|
@@ -177,7 +172,7 @@ class PlyrPlayerComponent {
|
|
|
177
172
|
}
|
|
178
173
|
getOverlaySafeZone() {
|
|
179
174
|
const host = this.config?.video_host;
|
|
180
|
-
if (this.overlayBlockAll &&
|
|
175
|
+
if (this.overlayBlockAll && host === "youtube") {
|
|
181
176
|
if (this.playbackEnded) {
|
|
182
177
|
return 0;
|
|
183
178
|
}
|
|
@@ -206,7 +201,7 @@ class PlyrPlayerComponent {
|
|
|
206
201
|
window.addEventListener("message", this.onCastMessage);
|
|
207
202
|
}
|
|
208
203
|
ngOnChanges(changes) {
|
|
209
|
-
if (changes["config"]) {
|
|
204
|
+
if (changes["config"] && this.plyr) {
|
|
210
205
|
this.setupPlayer();
|
|
211
206
|
}
|
|
212
207
|
}
|
|
@@ -275,37 +270,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
275
270
|
const code = baseLocale.split("-")[0]?.trim();
|
|
276
271
|
return code ? code.toLowerCase() : null;
|
|
277
272
|
}
|
|
278
|
-
shouldHideVimeoRecommendations() {
|
|
279
|
-
const flag = this.config?.disable_vimeo_recommendations;
|
|
280
|
-
return flag !== false;
|
|
281
|
-
}
|
|
282
|
-
clearVimeoEndedState() {
|
|
283
|
-
if (this.config.video_host !== "vimeo")
|
|
284
|
-
return;
|
|
285
|
-
const container = this.plyr?.elements?.container;
|
|
286
|
-
container?.classList.remove("plyr--vimeo-ended");
|
|
287
|
-
this.toggleRecommendationBlocker(false);
|
|
288
|
-
}
|
|
289
|
-
preventVimeoRecommendations() {
|
|
290
|
-
if (this.config.video_host !== "vimeo")
|
|
291
|
-
return;
|
|
292
|
-
if (!this.shouldHideVimeoRecommendations())
|
|
293
|
-
return;
|
|
294
|
-
try {
|
|
295
|
-
this.plyr?.stop();
|
|
296
|
-
}
|
|
297
|
-
catch { }
|
|
298
|
-
const embed = this.plyr?.embed;
|
|
299
|
-
if (embed && typeof embed.unload === "function") {
|
|
300
|
-
try {
|
|
301
|
-
embed.unload().catch(() => { });
|
|
302
|
-
}
|
|
303
|
-
catch { }
|
|
304
|
-
}
|
|
305
|
-
const container = this.plyr?.elements?.container;
|
|
306
|
-
container?.classList.add("plyr--vimeo-ended");
|
|
307
|
-
this.toggleRecommendationBlocker(true);
|
|
308
|
-
}
|
|
309
273
|
getVideoWrapper() {
|
|
310
274
|
const container = this.plyr?.elements?.container;
|
|
311
275
|
if (!container)
|
|
@@ -353,8 +317,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
353
317
|
return blocker;
|
|
354
318
|
}
|
|
355
319
|
toggleRecommendationBlocker(active) {
|
|
356
|
-
if (this.config.video_host !== "youtube"
|
|
357
|
-
this.config.video_host !== "vimeo") {
|
|
320
|
+
if (this.config.video_host !== "youtube") {
|
|
358
321
|
return;
|
|
359
322
|
}
|
|
360
323
|
const blocker = this.ensureRecommendationBlocker();
|
|
@@ -443,8 +406,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
443
406
|
catch { }
|
|
444
407
|
}
|
|
445
408
|
ensureTopClickBlocker() {
|
|
446
|
-
if (this.config.video_host !== "youtube"
|
|
447
|
-
this.config.video_host !== "vimeo") {
|
|
409
|
+
if (this.config.video_host !== "youtube") {
|
|
448
410
|
return;
|
|
449
411
|
}
|
|
450
412
|
const wrapper = this.getVideoWrapper();
|
|
@@ -514,22 +476,14 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
514
476
|
return "ontouchstart" in window;
|
|
515
477
|
}
|
|
516
478
|
isIframeProvider() {
|
|
517
|
-
return
|
|
518
|
-
this.config?.video_host === "vimeo");
|
|
479
|
+
return this.config?.video_host === "youtube";
|
|
519
480
|
}
|
|
520
481
|
shouldDisableAutoplayForIOS() {
|
|
521
482
|
return this.isIOSDevice();
|
|
522
483
|
}
|
|
523
|
-
tryEnterVimeoFullscreen() { }
|
|
524
|
-
shouldDisableAutoplayForVimeo() {
|
|
525
|
-
return this.isIOSDevice() && this.config?.video_host === "vimeo";
|
|
526
|
-
}
|
|
527
|
-
useNativeVimeoPlayer() {
|
|
528
|
-
return this.isIOSDevice() && this.config?.video_host === "vimeo";
|
|
529
|
-
}
|
|
530
484
|
shouldResetProgressToBeginning() {
|
|
531
485
|
const host = this.config?.video_host;
|
|
532
|
-
if (host !== "youtube"
|
|
486
|
+
if (host !== "youtube") {
|
|
533
487
|
return false;
|
|
534
488
|
}
|
|
535
489
|
const seenFlag = this.config?.seen;
|
|
@@ -553,8 +507,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
553
507
|
return !!(this.config?.autoplay || this.config?.is_live);
|
|
554
508
|
}
|
|
555
509
|
shouldAutoplay() {
|
|
556
|
-
if (this.shouldDisableAutoplayForIOS()
|
|
557
|
-
this.shouldDisableAutoplayForVimeo()) {
|
|
510
|
+
if (this.shouldDisableAutoplayForIOS()) {
|
|
558
511
|
return false;
|
|
559
512
|
}
|
|
560
513
|
return this.wantsAutoplay();
|
|
@@ -566,7 +519,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
566
519
|
return this.wantsAutoplay();
|
|
567
520
|
}
|
|
568
521
|
shouldBlockIframeAutoplay() {
|
|
569
|
-
return
|
|
522
|
+
return this.shouldDisableAutoplayForIOS();
|
|
570
523
|
}
|
|
571
524
|
stopRestrictedIframeAutoplay() {
|
|
572
525
|
if (!this.shouldBlockIframeAutoplay()) {
|
|
@@ -617,215 +570,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
617
570
|
catch { }
|
|
618
571
|
}
|
|
619
572
|
}
|
|
620
|
-
ensureVimeoPlayerScript() {
|
|
621
|
-
if (typeof window === "undefined") {
|
|
622
|
-
return Promise.resolve();
|
|
623
|
-
}
|
|
624
|
-
const globalVimeo = window.Vimeo;
|
|
625
|
-
if (globalVimeo?.Player) {
|
|
626
|
-
return Promise.resolve();
|
|
627
|
-
}
|
|
628
|
-
if (this.vimeoPlayerScriptPromise) {
|
|
629
|
-
return this.vimeoPlayerScriptPromise;
|
|
630
|
-
}
|
|
631
|
-
this.vimeoPlayerScriptPromise = new Promise((resolve, reject) => {
|
|
632
|
-
const existing = this.document.querySelector('script[data-vimeo-player="true"]');
|
|
633
|
-
if (existing) {
|
|
634
|
-
existing.addEventListener("load", () => resolve(), { once: true });
|
|
635
|
-
existing.addEventListener("error", () => reject(new Error("Failed to load Vimeo API")), { once: true });
|
|
636
|
-
return;
|
|
637
|
-
}
|
|
638
|
-
const script = this.document.createElement("script");
|
|
639
|
-
script.src = "https://player.vimeo.com/api/player.js";
|
|
640
|
-
script.async = true;
|
|
641
|
-
script.setAttribute("data-vimeo-player", "true");
|
|
642
|
-
script.onload = () => resolve();
|
|
643
|
-
script.onerror = () => reject(new Error("Failed to load Vimeo API script"));
|
|
644
|
-
this.document.head.appendChild(script);
|
|
645
|
-
});
|
|
646
|
-
return this.vimeoPlayerScriptPromise;
|
|
647
|
-
}
|
|
648
|
-
async setupNativeVimeoPlayer() {
|
|
649
|
-
try {
|
|
650
|
-
await this.ensureVimeoPlayerScript();
|
|
651
|
-
}
|
|
652
|
-
catch {
|
|
653
|
-
return;
|
|
654
|
-
}
|
|
655
|
-
this.teardownNativeVimeoPlayer();
|
|
656
|
-
if (!this.config?.video_id) {
|
|
657
|
-
return;
|
|
658
|
-
}
|
|
659
|
-
const placeholder = this.videoRef?.nativeElement;
|
|
660
|
-
const host = placeholder?.parentElement;
|
|
661
|
-
if (!placeholder || !host) {
|
|
662
|
-
return;
|
|
663
|
-
}
|
|
664
|
-
placeholder.style.display = "none";
|
|
665
|
-
const wrapper = this.document.createElement("div");
|
|
666
|
-
wrapper.className = "native-vimeo-player";
|
|
667
|
-
host.appendChild(wrapper);
|
|
668
|
-
this.nativeVimeoContainer = wrapper;
|
|
669
|
-
const Vimeo = window.Vimeo;
|
|
670
|
-
if (!Vimeo?.Player) {
|
|
671
|
-
return;
|
|
672
|
-
}
|
|
673
|
-
const playerOptions = {
|
|
674
|
-
id: this.config.video_id,
|
|
675
|
-
autoplay: false,
|
|
676
|
-
muted: false,
|
|
677
|
-
controls: true,
|
|
678
|
-
pip: false,
|
|
679
|
-
playsinline: false,
|
|
680
|
-
byline: false,
|
|
681
|
-
portrait: false,
|
|
682
|
-
title: false,
|
|
683
|
-
};
|
|
684
|
-
const player = new Vimeo.Player(wrapper, playerOptions);
|
|
685
|
-
this.nativeVimeoPlayer = player;
|
|
686
|
-
player.on("loaded", () => this.onNativeVimeoReady());
|
|
687
|
-
player.on("play", () => this.onNativeVimeoPlay());
|
|
688
|
-
player.on("pause", () => this.onNativeVimeoPause());
|
|
689
|
-
player.on("ended", () => this.onNativeVimeoEnded());
|
|
690
|
-
player.on("timeupdate", (event) => this.onNativeVimeoTimeupdate(event));
|
|
691
|
-
}
|
|
692
|
-
teardownNativeVimeoPlayer() {
|
|
693
|
-
if (this.nativeVimeoPlayer) {
|
|
694
|
-
try {
|
|
695
|
-
this.nativeVimeoPlayer.off?.("play");
|
|
696
|
-
this.nativeVimeoPlayer.off?.("pause");
|
|
697
|
-
this.nativeVimeoPlayer.off?.("ended");
|
|
698
|
-
this.nativeVimeoPlayer.off?.("timeupdate");
|
|
699
|
-
}
|
|
700
|
-
catch { }
|
|
701
|
-
try {
|
|
702
|
-
this.nativeVimeoPlayer.destroy?.();
|
|
703
|
-
}
|
|
704
|
-
catch { }
|
|
705
|
-
this.nativeVimeoPlayer = undefined;
|
|
706
|
-
}
|
|
707
|
-
if (this.nativeVimeoContainer?.parentElement) {
|
|
708
|
-
try {
|
|
709
|
-
this.nativeVimeoContainer.parentElement.removeChild(this.nativeVimeoContainer);
|
|
710
|
-
}
|
|
711
|
-
catch { }
|
|
712
|
-
}
|
|
713
|
-
this.nativeVimeoContainer = null;
|
|
714
|
-
this.nativeVimeoDuration = 0;
|
|
715
|
-
this.nativeVimeoCurrentTime = 0;
|
|
716
|
-
const placeholder = this.videoRef?.nativeElement;
|
|
717
|
-
if (placeholder) {
|
|
718
|
-
try {
|
|
719
|
-
placeholder.style.display = "";
|
|
720
|
-
}
|
|
721
|
-
catch { }
|
|
722
|
-
}
|
|
723
|
-
}
|
|
724
|
-
async onNativeVimeoReady() {
|
|
725
|
-
const player = this.nativeVimeoPlayer;
|
|
726
|
-
if (!player) {
|
|
727
|
-
return;
|
|
728
|
-
}
|
|
729
|
-
try {
|
|
730
|
-
const duration = await player.getDuration();
|
|
731
|
-
this.nativeVimeoDuration = duration || 0;
|
|
732
|
-
const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, this.nativeVimeoDuration);
|
|
733
|
-
if (start > 0) {
|
|
734
|
-
try {
|
|
735
|
-
await player.setCurrentTime(start);
|
|
736
|
-
}
|
|
737
|
-
catch { }
|
|
738
|
-
}
|
|
739
|
-
}
|
|
740
|
-
catch { }
|
|
741
|
-
this.ready.emit();
|
|
742
|
-
}
|
|
743
|
-
onNativeVimeoTimeupdate(event) {
|
|
744
|
-
const current = event?.seconds ?? 0;
|
|
745
|
-
const duration = event?.duration ?? this.nativeVimeoDuration;
|
|
746
|
-
this.nativeVimeoCurrentTime = current;
|
|
747
|
-
this.nativeVimeoDuration = duration;
|
|
748
|
-
this.emitProgressUpdate(current, duration);
|
|
749
|
-
}
|
|
750
|
-
onNativeVimeoPlay() {
|
|
751
|
-
this.playbackEnded = false;
|
|
752
|
-
this.overlayBlockAll = false;
|
|
753
|
-
this.updateRecommendationBlockerSafeZone();
|
|
754
|
-
this.toggleRecommendationBlocker(false);
|
|
755
|
-
parent.postMessage("playing_video", "*");
|
|
756
|
-
this.postCastEvent({
|
|
757
|
-
event: "play",
|
|
758
|
-
currentTime: this.nativeVimeoCurrentTime || 0,
|
|
759
|
-
});
|
|
760
|
-
}
|
|
761
|
-
onNativeVimeoPause() {
|
|
762
|
-
this.emitProgressUpdate(this.nativeVimeoCurrentTime, this.nativeVimeoDuration);
|
|
763
|
-
parent.postMessage("paused_video", "*");
|
|
764
|
-
this.overlayBlockAll = true;
|
|
765
|
-
this.updateRecommendationBlockerSafeZone();
|
|
766
|
-
this.toggleRecommendationBlocker(true);
|
|
767
|
-
this.postCastEvent({
|
|
768
|
-
event: "pause",
|
|
769
|
-
currentTime: this.nativeVimeoCurrentTime || 0,
|
|
770
|
-
});
|
|
771
|
-
}
|
|
772
|
-
onNativeVimeoEnded() {
|
|
773
|
-
this.emitProgressUpdate(this.nativeVimeoDuration, this.nativeVimeoDuration);
|
|
774
|
-
this.playbackEnded = true;
|
|
775
|
-
this.overlayBlockAll = true;
|
|
776
|
-
this.updateRecommendationBlockerSafeZone();
|
|
777
|
-
parent.postMessage("event: ended", "*");
|
|
778
|
-
this.postCastEvent({
|
|
779
|
-
event: "ended",
|
|
780
|
-
currentTime: this.nativeVimeoDuration || 0,
|
|
781
|
-
});
|
|
782
|
-
this.progressService.ended$.next();
|
|
783
|
-
this.preventVimeoRecommendations();
|
|
784
|
-
this.toggleRecommendationBlocker(true);
|
|
785
|
-
}
|
|
786
|
-
emitProgressUpdate(current, duration) {
|
|
787
|
-
const safeDuration = duration || 0;
|
|
788
|
-
const percent = safeDuration > 0 ? +((current / safeDuration) * 100).toFixed(2) : 0;
|
|
789
|
-
this.progressService.progress$.next({
|
|
790
|
-
currentTime: current,
|
|
791
|
-
duration: safeDuration,
|
|
792
|
-
percent,
|
|
793
|
-
});
|
|
794
|
-
parent.postMessage("currentTime:" + current, "*");
|
|
795
|
-
this.postCastEvent({
|
|
796
|
-
event: "current_time",
|
|
797
|
-
currentTime: current,
|
|
798
|
-
duration: safeDuration,
|
|
799
|
-
});
|
|
800
|
-
}
|
|
801
|
-
enforceVimeoVolumeAfterPlay(video) {
|
|
802
|
-
if (this.config?.video_host !== "vimeo") {
|
|
803
|
-
return;
|
|
804
|
-
}
|
|
805
|
-
const media = video ?? this.videoRef?.nativeElement ?? null;
|
|
806
|
-
const volumeTarget = 1;
|
|
807
|
-
const attemptRestore = () => {
|
|
808
|
-
this.setPlayerMutedState(false, volumeTarget, media);
|
|
809
|
-
const currentEmbed = this.plyr?.embed;
|
|
810
|
-
if (currentEmbed) {
|
|
811
|
-
if (typeof currentEmbed.setMuted === "function") {
|
|
812
|
-
try {
|
|
813
|
-
currentEmbed.setMuted(false);
|
|
814
|
-
}
|
|
815
|
-
catch { }
|
|
816
|
-
}
|
|
817
|
-
if (typeof currentEmbed.setVolume === "function") {
|
|
818
|
-
try {
|
|
819
|
-
currentEmbed.setVolume(volumeTarget);
|
|
820
|
-
}
|
|
821
|
-
catch { }
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
};
|
|
825
|
-
[0, 250, 500, 750].forEach((offset) => {
|
|
826
|
-
setTimeout(attemptRestore, 500 + offset);
|
|
827
|
-
});
|
|
828
|
-
}
|
|
829
573
|
setPlayerMutedState(muted, volume = 1, target) {
|
|
830
574
|
if (this.plyr) {
|
|
831
575
|
try {
|
|
@@ -1015,17 +759,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1015
759
|
if (!Number.isFinite(target) || target < 0) {
|
|
1016
760
|
return null;
|
|
1017
761
|
}
|
|
1018
|
-
if (this.config.video_host === "vimeo") {
|
|
1019
|
-
const embed = this.plyr?.embed;
|
|
1020
|
-
if (embed && typeof embed.setCurrentTime === "function") {
|
|
1021
|
-
try {
|
|
1022
|
-
return embed.setCurrentTime(target);
|
|
1023
|
-
}
|
|
1024
|
-
catch {
|
|
1025
|
-
return null;
|
|
1026
|
-
}
|
|
1027
|
-
}
|
|
1028
|
-
}
|
|
1029
762
|
if (video) {
|
|
1030
763
|
try {
|
|
1031
764
|
video.currentTime = target;
|
|
@@ -1118,14 +851,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1118
851
|
catch { }
|
|
1119
852
|
}
|
|
1120
853
|
}
|
|
1121
|
-
else if (this.config.video_host === "vimeo") {
|
|
1122
|
-
if (typeof embed.play === "function") {
|
|
1123
|
-
try {
|
|
1124
|
-
embed.play();
|
|
1125
|
-
}
|
|
1126
|
-
catch { }
|
|
1127
|
-
}
|
|
1128
|
-
}
|
|
1129
854
|
}
|
|
1130
855
|
setupControlsVisibility() {
|
|
1131
856
|
const container = this.plyr?.elements?.container;
|
|
@@ -1260,13 +985,10 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1260
985
|
this.controlsVisibilityCleanup = undefined;
|
|
1261
986
|
this.plyr?.destroy();
|
|
1262
987
|
this.clearAutoplayUnlockListener();
|
|
1263
|
-
this.teardownNativeVimeoPlayer();
|
|
1264
988
|
this.recommendationBlocker = null;
|
|
1265
989
|
const speedOptions = [1, 1.25, 1.5, 2];
|
|
1266
990
|
const locale = this.resolveLocale();
|
|
1267
991
|
const captionsLanguage = this.resolveCaptionsLanguage(locale) ?? "pt";
|
|
1268
|
-
const hideVimeoRecommendations = this.shouldHideVimeoRecommendations();
|
|
1269
|
-
const vimeoPremium = Boolean(this.config?.vimeo_premium);
|
|
1270
992
|
const shouldAutoplay = this.shouldAutoplay();
|
|
1271
993
|
const startMuted = this.requiresMutedAutoplay();
|
|
1272
994
|
try {
|
|
@@ -1282,30 +1004,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1282
1004
|
this.videoRef.nativeElement.autoplay = shouldAutoplay;
|
|
1283
1005
|
}
|
|
1284
1006
|
catch { }
|
|
1285
|
-
if (this.useNativeVimeoPlayer()) {
|
|
1286
|
-
void this.setupNativeVimeoPlayer();
|
|
1287
|
-
return;
|
|
1288
|
-
}
|
|
1289
|
-
const vimeoOptions = {
|
|
1290
|
-
byline: false,
|
|
1291
|
-
portrait: false,
|
|
1292
|
-
title: false,
|
|
1293
|
-
playsinline: false,
|
|
1294
|
-
speed: true,
|
|
1295
|
-
dnt: 1,
|
|
1296
|
-
pip: false,
|
|
1297
|
-
quality: "auto",
|
|
1298
|
-
transparent: false,
|
|
1299
|
-
};
|
|
1300
|
-
vimeoOptions.autoplay = shouldAutoplay;
|
|
1301
|
-
vimeoOptions.muted = startMuted;
|
|
1302
|
-
if (hideVimeoRecommendations) {
|
|
1303
|
-
vimeoOptions.controls = false;
|
|
1304
|
-
vimeoOptions.sidedock = 0;
|
|
1305
|
-
}
|
|
1306
|
-
if (vimeoPremium) {
|
|
1307
|
-
vimeoOptions.premium = true;
|
|
1308
|
-
}
|
|
1309
1007
|
const youtubePlayerVars = {
|
|
1310
1008
|
rel: 0,
|
|
1311
1009
|
modestbranding: 1,
|
|
@@ -1362,9 +1060,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1362
1060
|
if (this.config.video_host === "youtube") {
|
|
1363
1061
|
plyrOptions.youtube = youtubePlayerVars;
|
|
1364
1062
|
}
|
|
1365
|
-
if (this.config.video_host === "vimeo") {
|
|
1366
|
-
plyrOptions.vimeo = vimeoOptions;
|
|
1367
|
-
}
|
|
1368
1063
|
this.plyr = new Plyr.default(this.videoRef.nativeElement, plyrOptions);
|
|
1369
1064
|
this.bindFullscreenBehavior();
|
|
1370
1065
|
this.setupControlsVisibility();
|
|
@@ -1424,13 +1119,10 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1424
1119
|
};
|
|
1425
1120
|
this.plyr?.on?.("play", () => {
|
|
1426
1121
|
this.retryPendingStartTime();
|
|
1427
|
-
this.clearVimeoEndedState();
|
|
1428
1122
|
this.playbackEnded = false;
|
|
1429
1123
|
this.overlayBlockAll = false;
|
|
1430
1124
|
this.updateRecommendationBlockerSafeZone();
|
|
1431
1125
|
this.toggleRecommendationBlocker(false);
|
|
1432
|
-
this.tryEnterVimeoFullscreen();
|
|
1433
|
-
this.enforceVimeoVolumeAfterPlay();
|
|
1434
1126
|
parent.postMessage("playing_video", "*");
|
|
1435
1127
|
this.postCastEvent({
|
|
1436
1128
|
event: "play",
|
|
@@ -1462,7 +1154,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1462
1154
|
currentTime: this.plyr.currentTime || 0,
|
|
1463
1155
|
});
|
|
1464
1156
|
this.progressService.ended$.next();
|
|
1465
|
-
this.preventVimeoRecommendations();
|
|
1466
1157
|
this.toggleRecommendationBlocker(true);
|
|
1467
1158
|
});
|
|
1468
1159
|
}
|
|
@@ -1518,8 +1209,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1518
1209
|
this.hls = undefined;
|
|
1519
1210
|
}
|
|
1520
1211
|
this.resetPlaybackRate(video);
|
|
1521
|
-
if (this.config.video_host === "youtube"
|
|
1522
|
-
this.config.video_host === "vimeo") {
|
|
1212
|
+
if (this.config.video_host === "youtube") {
|
|
1523
1213
|
const onReady = () => {
|
|
1524
1214
|
this.plyr.off("ready", onReady);
|
|
1525
1215
|
this.ensureIframeAutoplayPermissions();
|
|
@@ -1563,12 +1253,6 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1563
1253
|
sources: [{ src: this.config.video_id, provider: "youtube" }],
|
|
1564
1254
|
};
|
|
1565
1255
|
}
|
|
1566
|
-
else if (this.config.video_host === "vimeo") {
|
|
1567
|
-
this.plyr.source = {
|
|
1568
|
-
type: "video",
|
|
1569
|
-
sources: [{ src: this.config.video_id, provider: "vimeo" }],
|
|
1570
|
-
};
|
|
1571
|
-
}
|
|
1572
1256
|
else if (this.config.video_host === "mp4") {
|
|
1573
1257
|
this.plyr.source = {
|
|
1574
1258
|
type: "video",
|
|
@@ -1702,42 +1386,18 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1702
1386
|
if (data?.action === "request-iframe-media-metadata") {
|
|
1703
1387
|
this.postCastEvent({
|
|
1704
1388
|
event: "metadata",
|
|
1705
|
-
duration: this.
|
|
1706
|
-
currentTime: this.
|
|
1389
|
+
duration: this.plyr?.duration || 0,
|
|
1390
|
+
currentTime: this.plyr?.currentTime || 0,
|
|
1707
1391
|
});
|
|
1708
1392
|
}
|
|
1709
1393
|
if (data?.action === "play") {
|
|
1710
|
-
|
|
1711
|
-
try {
|
|
1712
|
-
this.nativeVimeoPlayer.play();
|
|
1713
|
-
}
|
|
1714
|
-
catch { }
|
|
1715
|
-
}
|
|
1716
|
-
else {
|
|
1717
|
-
this.plyr?.play();
|
|
1718
|
-
}
|
|
1394
|
+
this.plyr?.play();
|
|
1719
1395
|
}
|
|
1720
1396
|
if (data?.action === "pause") {
|
|
1721
|
-
|
|
1722
|
-
try {
|
|
1723
|
-
this.nativeVimeoPlayer.pause();
|
|
1724
|
-
}
|
|
1725
|
-
catch { }
|
|
1726
|
-
}
|
|
1727
|
-
else {
|
|
1728
|
-
this.plyr?.pause();
|
|
1729
|
-
}
|
|
1397
|
+
this.plyr?.pause();
|
|
1730
1398
|
}
|
|
1731
1399
|
if (data?.action === "seek" && typeof data.time === "number") {
|
|
1732
|
-
|
|
1733
|
-
try {
|
|
1734
|
-
this.nativeVimeoPlayer.setCurrentTime(data.time);
|
|
1735
|
-
}
|
|
1736
|
-
catch { }
|
|
1737
|
-
}
|
|
1738
|
-
else if (this.plyr) {
|
|
1739
|
-
this.plyr.currentTime = data.time;
|
|
1740
|
-
}
|
|
1400
|
+
this.plyr && (this.plyr.currentTime = data.time);
|
|
1741
1401
|
}
|
|
1742
1402
|
};
|
|
1743
1403
|
ngOnDestroy() {
|
|
@@ -1745,15 +1405,7 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1745
1405
|
this.controlsVisibilityCleanup?.();
|
|
1746
1406
|
this.controlsVisibilityCleanup = undefined;
|
|
1747
1407
|
this.clearAutoplayUnlockListener();
|
|
1748
|
-
this.teardownNativeVimeoPlayer();
|
|
1749
|
-
if (typeof window !== "undefined") {
|
|
1750
|
-
try {
|
|
1751
|
-
window.removeEventListener("message", this.onCastMessage);
|
|
1752
|
-
}
|
|
1753
|
-
catch { }
|
|
1754
|
-
}
|
|
1755
1408
|
const container = this.plyr?.elements?.container;
|
|
1756
|
-
container?.classList.remove("plyr--vimeo-ended");
|
|
1757
1409
|
if (this.recommendationBlocker?.parentElement) {
|
|
1758
1410
|
try {
|
|
1759
1411
|
this.recommendationBlocker.parentElement.removeChild(this.recommendationBlocker);
|
|
@@ -1782,13 +1434,14 @@ ${allPairs.map(([n, v]) => ` ${n}: ${v};`).join("\n")}
|
|
|
1782
1434
|
this.menuObserver = undefined;
|
|
1783
1435
|
window.removeEventListener("resize", this.onResize);
|
|
1784
1436
|
this.plyr?.destroy();
|
|
1437
|
+
window.removeEventListener("message", this.onCastMessage);
|
|
1785
1438
|
}
|
|
1786
1439
|
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 });
|
|
1787
|
-
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}
|
|
1440
|
+
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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
1788
1441
|
}
|
|
1789
1442
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlyrPlayerComponent, decorators: [{
|
|
1790
1443
|
type: Component,
|
|
1791
|
-
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}
|
|
1444
|
+
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}\n"] }]
|
|
1792
1445
|
}], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
|
|
1793
1446
|
type: Inject,
|
|
1794
1447
|
args: [DOCUMENT]
|
|
@@ -1801,6 +1454,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1801
1454
|
type: Output
|
|
1802
1455
|
}] } });
|
|
1803
1456
|
|
|
1457
|
+
class VimeoPlayerComponent {
|
|
1458
|
+
progressService;
|
|
1459
|
+
document;
|
|
1460
|
+
config;
|
|
1461
|
+
ready = new EventEmitter();
|
|
1462
|
+
videoRef;
|
|
1463
|
+
plyr;
|
|
1464
|
+
onCastMessage = (event) => {
|
|
1465
|
+
let data = event.data;
|
|
1466
|
+
if (typeof data === 'string') {
|
|
1467
|
+
try {
|
|
1468
|
+
data = JSON.parse(data);
|
|
1469
|
+
}
|
|
1470
|
+
catch { }
|
|
1471
|
+
}
|
|
1472
|
+
if (data?.action === 'request-iframe-media-metadata') {
|
|
1473
|
+
this.postCastEvent({
|
|
1474
|
+
event: 'metadata',
|
|
1475
|
+
duration: this.plyr?.duration || 0,
|
|
1476
|
+
currentTime: this.plyr?.currentTime || 0,
|
|
1477
|
+
});
|
|
1478
|
+
}
|
|
1479
|
+
if (data?.action === 'play') {
|
|
1480
|
+
this.plyr?.play?.();
|
|
1481
|
+
}
|
|
1482
|
+
if (data?.action === 'pause') {
|
|
1483
|
+
this.plyr?.pause?.();
|
|
1484
|
+
}
|
|
1485
|
+
if (data?.action === 'seek' && typeof data.time === 'number') {
|
|
1486
|
+
this.plyr && (this.plyr.currentTime = data.time);
|
|
1487
|
+
}
|
|
1488
|
+
};
|
|
1489
|
+
constructor(progressService, document) {
|
|
1490
|
+
this.progressService = progressService;
|
|
1491
|
+
this.document = document;
|
|
1492
|
+
}
|
|
1493
|
+
ngOnInit() {
|
|
1494
|
+
this.applyTheme(this.config?.ui?.colors);
|
|
1495
|
+
}
|
|
1496
|
+
ngAfterViewInit() {
|
|
1497
|
+
this.setupPlayer();
|
|
1498
|
+
}
|
|
1499
|
+
ngOnChanges(changes) {
|
|
1500
|
+
if (changes['config'] && this.plyr) {
|
|
1501
|
+
this.setupPlayer();
|
|
1502
|
+
}
|
|
1503
|
+
}
|
|
1504
|
+
setupPlayer() {
|
|
1505
|
+
if (!this.videoRef) {
|
|
1506
|
+
return;
|
|
1507
|
+
}
|
|
1508
|
+
this.plyr?.destroy();
|
|
1509
|
+
const shouldAutoplay = !!(this.config?.autoplay && !this.isIOSDevice());
|
|
1510
|
+
const startMuted = shouldAutoplay;
|
|
1511
|
+
const speedOptions = [1, 1.25, 1.5, 2];
|
|
1512
|
+
const options = {
|
|
1513
|
+
controls: [
|
|
1514
|
+
'play-large',
|
|
1515
|
+
'play',
|
|
1516
|
+
'progress',
|
|
1517
|
+
'current-time',
|
|
1518
|
+
'duration',
|
|
1519
|
+
'mute',
|
|
1520
|
+
'volume',
|
|
1521
|
+
'captions',
|
|
1522
|
+
'settings',
|
|
1523
|
+
'pip',
|
|
1524
|
+
'airplay',
|
|
1525
|
+
'fullscreen',
|
|
1526
|
+
],
|
|
1527
|
+
clickToPlay: true,
|
|
1528
|
+
autoplay: shouldAutoplay,
|
|
1529
|
+
muted: startMuted,
|
|
1530
|
+
keyboard: { focused: true, global: false },
|
|
1531
|
+
hideControls: false,
|
|
1532
|
+
i18n: {
|
|
1533
|
+
speed: "Velocidade",
|
|
1534
|
+
},
|
|
1535
|
+
speed: {
|
|
1536
|
+
selected: 1,
|
|
1537
|
+
options: speedOptions,
|
|
1538
|
+
},
|
|
1539
|
+
fullscreen: {
|
|
1540
|
+
enabled: true,
|
|
1541
|
+
fallback: true,
|
|
1542
|
+
iosNative: true,
|
|
1543
|
+
container: null,
|
|
1544
|
+
},
|
|
1545
|
+
};
|
|
1546
|
+
options.vimeo = {
|
|
1547
|
+
autopause: true,
|
|
1548
|
+
autoplay: shouldAutoplay,
|
|
1549
|
+
muted: startMuted,
|
|
1550
|
+
playsinline: !this.isIOSDevice(),
|
|
1551
|
+
byline: false,
|
|
1552
|
+
portrait: false,
|
|
1553
|
+
title: false,
|
|
1554
|
+
pip: false,
|
|
1555
|
+
controls: false,
|
|
1556
|
+
};
|
|
1557
|
+
this.plyr = new Plyr.default(this.videoRef.nativeElement, options);
|
|
1558
|
+
this.plyr.source = {
|
|
1559
|
+
type: 'video',
|
|
1560
|
+
sources: [{ src: this.config.video_id, provider: 'vimeo' }],
|
|
1561
|
+
};
|
|
1562
|
+
this.bindEvents();
|
|
1563
|
+
}
|
|
1564
|
+
bindEvents() {
|
|
1565
|
+
if (!this.plyr)
|
|
1566
|
+
return;
|
|
1567
|
+
const onTimeUpdate = () => {
|
|
1568
|
+
const current = this.plyr.currentTime || 0;
|
|
1569
|
+
const duration = this.plyr.duration || 0;
|
|
1570
|
+
const percent = duration > 0 ? +((current / duration) * 100).toFixed(2) : 0;
|
|
1571
|
+
this.progressService.progress$.next({ currentTime: current, duration, percent });
|
|
1572
|
+
};
|
|
1573
|
+
this.plyr.on('ready', () => {
|
|
1574
|
+
const duration = this.plyr.duration || 0;
|
|
1575
|
+
const start = this.resolveStartTime(this.config.last_time, this.config.last_percent, duration);
|
|
1576
|
+
if (start > 0) {
|
|
1577
|
+
this.plyr.currentTime = start;
|
|
1578
|
+
}
|
|
1579
|
+
console.log('event: ready');
|
|
1580
|
+
parent.postMessage('duration:' + duration, '*');
|
|
1581
|
+
parent.postMessage('playerIsReadyToPlay', '*');
|
|
1582
|
+
this.ready.emit();
|
|
1583
|
+
});
|
|
1584
|
+
this.plyr.on('timeupdate', onTimeUpdate);
|
|
1585
|
+
this.plyr.on('play', () => {
|
|
1586
|
+
this.progressService.ended$.next();
|
|
1587
|
+
console.log('event: playing_video');
|
|
1588
|
+
parent.postMessage('playing_video', '*');
|
|
1589
|
+
this.postCastEvent({
|
|
1590
|
+
event: 'play',
|
|
1591
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1592
|
+
});
|
|
1593
|
+
onTimeUpdate();
|
|
1594
|
+
});
|
|
1595
|
+
this.plyr.on('pause', () => {
|
|
1596
|
+
console.log('event: pause');
|
|
1597
|
+
parent.postMessage('paused_video', '*');
|
|
1598
|
+
this.postCastEvent({
|
|
1599
|
+
event: 'pause',
|
|
1600
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1601
|
+
});
|
|
1602
|
+
onTimeUpdate();
|
|
1603
|
+
});
|
|
1604
|
+
this.plyr.on('ended', () => {
|
|
1605
|
+
console.log('event: ended');
|
|
1606
|
+
parent.postMessage('event: ended', '*');
|
|
1607
|
+
this.postCastEvent({
|
|
1608
|
+
event: 'ended',
|
|
1609
|
+
currentTime: this.plyr.currentTime || 0,
|
|
1610
|
+
});
|
|
1611
|
+
onTimeUpdate();
|
|
1612
|
+
this.progressService.ended$.next();
|
|
1613
|
+
});
|
|
1614
|
+
}
|
|
1615
|
+
resolveStartTime(last_time, last_percent, duration) {
|
|
1616
|
+
const dur = Number(duration) || 0;
|
|
1617
|
+
if (dur <= 0)
|
|
1618
|
+
return 0;
|
|
1619
|
+
if (last_time && Number(last_time) > 0) {
|
|
1620
|
+
return Math.min(Number(last_time), dur - 2);
|
|
1621
|
+
}
|
|
1622
|
+
if (last_percent && Number(last_percent) > 0) {
|
|
1623
|
+
let percent = Number(last_percent);
|
|
1624
|
+
if (percent > 1) {
|
|
1625
|
+
percent = percent / 100;
|
|
1626
|
+
}
|
|
1627
|
+
return Math.min(percent * dur, dur - 2);
|
|
1628
|
+
}
|
|
1629
|
+
return 0;
|
|
1630
|
+
}
|
|
1631
|
+
isIOSDevice() {
|
|
1632
|
+
if (typeof navigator === 'undefined')
|
|
1633
|
+
return false;
|
|
1634
|
+
const ua = navigator.userAgent || '';
|
|
1635
|
+
const iOS = /iPad|iPhone|iPod/.test(ua);
|
|
1636
|
+
const iPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
|
|
1637
|
+
return iOS || iPadOS;
|
|
1638
|
+
}
|
|
1639
|
+
ngOnDestroy() {
|
|
1640
|
+
this.plyr?.destroy();
|
|
1641
|
+
if (typeof window !== 'undefined') {
|
|
1642
|
+
window.removeEventListener('message', this.onCastMessage);
|
|
1643
|
+
}
|
|
1644
|
+
}
|
|
1645
|
+
postCastEvent(payload) {
|
|
1646
|
+
parent.postMessage(JSON.stringify(payload), '*');
|
|
1647
|
+
}
|
|
1648
|
+
applyTheme(colors) {
|
|
1649
|
+
if (!colors)
|
|
1650
|
+
return;
|
|
1651
|
+
const STYLE_ID = 'webplayer-theme-vars';
|
|
1652
|
+
let styleEl = this.document.getElementById(STYLE_ID);
|
|
1653
|
+
if (!styleEl) {
|
|
1654
|
+
styleEl = this.document.createElement('style');
|
|
1655
|
+
styleEl.id = STYLE_ID;
|
|
1656
|
+
this.document.head.appendChild(styleEl);
|
|
1657
|
+
}
|
|
1658
|
+
const rootStyle = this.document.documentElement.style;
|
|
1659
|
+
const allPairs = [];
|
|
1660
|
+
for (const key in colors) {
|
|
1661
|
+
if (Object.prototype.hasOwnProperty.call(colors, key)) {
|
|
1662
|
+
const cssVarName = `--theme-${key.replace('progresss-', 'progress-')}`;
|
|
1663
|
+
const cssVarValue = String(colors[key]);
|
|
1664
|
+
allPairs.push([cssVarName, cssVarValue]);
|
|
1665
|
+
try {
|
|
1666
|
+
rootStyle.setProperty(cssVarName, cssVarValue);
|
|
1667
|
+
}
|
|
1668
|
+
catch { }
|
|
1669
|
+
}
|
|
1670
|
+
}
|
|
1671
|
+
const cssRule = `:root{
|
|
1672
|
+
${allPairs.map(([n, v]) => ` ${n}: ${v};`).join('\n')}
|
|
1673
|
+
}`;
|
|
1674
|
+
styleEl.textContent = cssRule;
|
|
1675
|
+
}
|
|
1676
|
+
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 });
|
|
1677
|
+
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" }, 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{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 .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 }] });
|
|
1678
|
+
}
|
|
1679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VimeoPlayerComponent, decorators: [{
|
|
1680
|
+
type: Component,
|
|
1681
|
+
args: [{ selector: 'app-vimeo-player', standalone: true, imports: [CommonModule], template: `<video #video playsinline></video>`, 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{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 .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"] }]
|
|
1682
|
+
}], ctorParameters: () => [{ type: WebplayerProgressService }, { type: Document, decorators: [{
|
|
1683
|
+
type: Inject,
|
|
1684
|
+
args: [DOCUMENT]
|
|
1685
|
+
}] }], propDecorators: { config: [{
|
|
1686
|
+
type: Input
|
|
1687
|
+
}], ready: [{
|
|
1688
|
+
type: Output
|
|
1689
|
+
}], videoRef: [{
|
|
1690
|
+
type: ViewChild,
|
|
1691
|
+
args: ['video', { static: true }]
|
|
1692
|
+
}] } });
|
|
1693
|
+
|
|
1804
1694
|
class PandaPlayerComponent {
|
|
1805
1695
|
elementRef;
|
|
1806
1696
|
progressService;
|
|
@@ -2290,11 +2180,11 @@ class PlayerLoaderComponent {
|
|
|
2290
2180
|
[config]="config"
|
|
2291
2181
|
(ready)="onPlayerReady()"
|
|
2292
2182
|
></app-plyr-player>
|
|
2293
|
-
<app-
|
|
2183
|
+
<app-vimeo-player
|
|
2294
2184
|
*ngSwitchCase="'vimeo'"
|
|
2295
2185
|
[config]="config"
|
|
2296
2186
|
(ready)="onPlayerReady()"
|
|
2297
|
-
></app-
|
|
2187
|
+
></app-vimeo-player>
|
|
2298
2188
|
<app-panda-player
|
|
2299
2189
|
*ngSwitchCase="'panda'"
|
|
2300
2190
|
[config]="config"
|
|
@@ -2310,7 +2200,7 @@ class PlayerLoaderComponent {
|
|
|
2310
2200
|
</div>
|
|
2311
2201
|
</div>
|
|
2312
2202
|
</div>
|
|
2313
|
-
`, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PlyrPlayerComponent, selector: "app-plyr-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: PandaPlayerComponent, selector: "app-panda-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: ScaleupPlayerComponent, selector: "app-scaleup-player", inputs: ["config"], outputs: ["ready"] }] });
|
|
2203
|
+
`, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: PlyrPlayerComponent, selector: "app-plyr-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: VimeoPlayerComponent, selector: "app-vimeo-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: PandaPlayerComponent, selector: "app-panda-player", inputs: ["config"], outputs: ["ready"] }, { kind: "component", type: ScaleupPlayerComponent, selector: "app-scaleup-player", inputs: ["config"], outputs: ["ready"] }] });
|
|
2314
2204
|
}
|
|
2315
2205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PlayerLoaderComponent, decorators: [{
|
|
2316
2206
|
type: Component,
|
|
@@ -2332,11 +2222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2332
2222
|
[config]="config"
|
|
2333
2223
|
(ready)="onPlayerReady()"
|
|
2334
2224
|
></app-plyr-player>
|
|
2335
|
-
<app-
|
|
2225
|
+
<app-vimeo-player
|
|
2336
2226
|
*ngSwitchCase="'vimeo'"
|
|
2337
2227
|
[config]="config"
|
|
2338
2228
|
(ready)="onPlayerReady()"
|
|
2339
|
-
></app-
|
|
2229
|
+
></app-vimeo-player>
|
|
2340
2230
|
<app-panda-player
|
|
2341
2231
|
*ngSwitchCase="'panda'"
|
|
2342
2232
|
[config]="config"
|
|
@@ -2355,6 +2245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2355
2245
|
`, standalone: true, imports: [
|
|
2356
2246
|
CommonModule,
|
|
2357
2247
|
PlyrPlayerComponent,
|
|
2248
|
+
VimeoPlayerComponent,
|
|
2358
2249
|
PandaPlayerComponent,
|
|
2359
2250
|
ScaleupPlayerComponent,
|
|
2360
2251
|
], styles: [":host{display:block;width:100%;height:100%}\n"] }]
|