stormcloud-video-player 0.2.29 → 0.2.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stormcloud-vp.min.js +1 -1
- package/lib/index.cjs +103 -44
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +103 -44
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +103 -44
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/players/HlsPlayer.cjs +103 -44
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +103 -44
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/ima.cjs +103 -44
- package/lib/sdk/ima.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +103 -44
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -217,7 +217,11 @@ function createImaController(video, options) {
|
|
|
217
217
|
}
|
|
218
218
|
function hideContentVideo() {
|
|
219
219
|
if (!contentVideoHidden) {
|
|
220
|
-
video.style.
|
|
220
|
+
video.style.transition = "opacity 0.3s ease-in-out";
|
|
221
|
+
video.style.opacity = "0";
|
|
222
|
+
setTimeout(() => {
|
|
223
|
+
video.style.visibility = "hidden";
|
|
224
|
+
}, 300);
|
|
221
225
|
video.muted = true;
|
|
222
226
|
video.volume = 0;
|
|
223
227
|
contentVideoHidden = true;
|
|
@@ -227,6 +231,9 @@ function createImaController(video, options) {
|
|
|
227
231
|
function showContentVideo() {
|
|
228
232
|
if (contentVideoHidden) {
|
|
229
233
|
video.style.visibility = "visible";
|
|
234
|
+
video.style.transition = "opacity 0.3s ease-in-out";
|
|
235
|
+
video.offsetHeight;
|
|
236
|
+
video.style.opacity = "1";
|
|
230
237
|
video.muted = originalMutedState;
|
|
231
238
|
video.volume = originalVolume;
|
|
232
239
|
contentVideoHidden = false;
|
|
@@ -399,7 +406,9 @@ function createImaController(video, options) {
|
|
|
399
406
|
container.style.justifyContent = "center";
|
|
400
407
|
container.style.pointerEvents = "none";
|
|
401
408
|
container.style.zIndex = "10";
|
|
402
|
-
container.style.backgroundColor = "
|
|
409
|
+
container.style.backgroundColor = "transparent";
|
|
410
|
+
container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
|
|
411
|
+
container.style.opacity = "0";
|
|
403
412
|
(_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
404
413
|
adContainerEl = container;
|
|
405
414
|
}
|
|
@@ -509,7 +518,9 @@ function createImaController(video, options) {
|
|
|
509
518
|
container.style.justifyContent = "center";
|
|
510
519
|
container.style.pointerEvents = "none";
|
|
511
520
|
container.style.zIndex = "10";
|
|
512
|
-
container.style.backgroundColor = "
|
|
521
|
+
container.style.backgroundColor = "transparent";
|
|
522
|
+
container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
|
|
523
|
+
container.style.opacity = "0";
|
|
513
524
|
if (!video.parentElement) {
|
|
514
525
|
throw new Error("Video element has no parent for ad container");
|
|
515
526
|
}
|
|
@@ -573,13 +584,19 @@ function createImaController(video, options) {
|
|
|
573
584
|
console.error("[IMA] Ad error:", errorEvent.getError());
|
|
574
585
|
destroyAdsManager();
|
|
575
586
|
adPlaying = false;
|
|
576
|
-
showContentVideo();
|
|
577
587
|
setAdPlayingFlag(false);
|
|
578
588
|
if (adContainerEl) {
|
|
579
|
-
adContainerEl.style.
|
|
580
|
-
adContainerEl.style.
|
|
581
|
-
|
|
589
|
+
adContainerEl.style.opacity = "0";
|
|
590
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
591
|
+
setTimeout(() => {
|
|
592
|
+
if (adContainerEl) {
|
|
593
|
+
adContainerEl.style.pointerEvents = "none";
|
|
594
|
+
adContainerEl.style.display = "none";
|
|
595
|
+
console.log("[IMA] Ad container hidden after error");
|
|
596
|
+
}
|
|
597
|
+
}, 300);
|
|
582
598
|
}
|
|
599
|
+
showContentVideo();
|
|
583
600
|
if (adsLoadedReject) {
|
|
584
601
|
adsLoadedReject(new Error("Ad playback error"));
|
|
585
602
|
adsLoadedReject = void 0;
|
|
@@ -644,6 +661,9 @@ function createImaController(video, options) {
|
|
|
644
661
|
if (adContainerEl) {
|
|
645
662
|
adContainerEl.style.pointerEvents = "auto";
|
|
646
663
|
adContainerEl.style.display = "flex";
|
|
664
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
665
|
+
adContainerEl.offsetHeight;
|
|
666
|
+
adContainerEl.style.opacity = "1";
|
|
647
667
|
console.log("[IMA] Ad container now visible");
|
|
648
668
|
}
|
|
649
669
|
});
|
|
@@ -653,27 +673,31 @@ function createImaController(video, options) {
|
|
|
653
673
|
console.log("[IMA] Content resume requested");
|
|
654
674
|
adPlaying = false;
|
|
655
675
|
setAdPlayingFlag(false);
|
|
656
|
-
showContentVideo();
|
|
657
676
|
emit("content_resume");
|
|
658
|
-
setTimeout(() => {
|
|
659
|
-
const stillInPod = video.dataset.stormcloudAdPlaying === "true";
|
|
660
|
-
if (stillInPod) {
|
|
661
|
-
console.log(
|
|
662
|
-
"[IMA] Still in ad pod - keeping ad container visible"
|
|
663
|
-
);
|
|
664
|
-
if (adContainerEl) {
|
|
665
|
-
adContainerEl.style.display = "flex";
|
|
666
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
667
|
-
}
|
|
668
|
-
hideContentVideo();
|
|
669
|
-
}
|
|
670
|
-
}, 50);
|
|
671
677
|
}
|
|
672
678
|
);
|
|
673
679
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
674
|
-
console.log("[IMA] All ads completed -
|
|
680
|
+
console.log("[IMA] All ads completed - restoring content");
|
|
675
681
|
adPlaying = false;
|
|
676
682
|
setAdPlayingFlag(false);
|
|
683
|
+
if (adContainerEl) {
|
|
684
|
+
adContainerEl.style.opacity = "0";
|
|
685
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
686
|
+
setTimeout(() => {
|
|
687
|
+
if (adContainerEl) {
|
|
688
|
+
adContainerEl.style.pointerEvents = "none";
|
|
689
|
+
adContainerEl.style.display = "none";
|
|
690
|
+
console.log("[IMA] Ad container hidden");
|
|
691
|
+
}
|
|
692
|
+
}, 300);
|
|
693
|
+
}
|
|
694
|
+
showContentVideo();
|
|
695
|
+
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds) && video.paused) {
|
|
696
|
+
console.log("[IMA] Resuming content video playback");
|
|
697
|
+
video.play().catch((e) => {
|
|
698
|
+
console.warn("[IMA] Failed to resume content video:", e);
|
|
699
|
+
});
|
|
700
|
+
}
|
|
677
701
|
emit("all_ads_completed");
|
|
678
702
|
});
|
|
679
703
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -685,13 +709,21 @@ function createImaController(video, options) {
|
|
|
685
709
|
} catch (e) {
|
|
686
710
|
console.error("[IMA] Error setting up ads manager:", e);
|
|
687
711
|
adPlaying = false;
|
|
688
|
-
showContentVideo();
|
|
689
712
|
setAdPlayingFlag(false);
|
|
690
713
|
if (adContainerEl) {
|
|
691
|
-
adContainerEl.style.
|
|
692
|
-
adContainerEl.style.
|
|
693
|
-
|
|
714
|
+
adContainerEl.style.opacity = "0";
|
|
715
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
716
|
+
setTimeout(() => {
|
|
717
|
+
if (adContainerEl) {
|
|
718
|
+
adContainerEl.style.pointerEvents = "none";
|
|
719
|
+
adContainerEl.style.display = "none";
|
|
720
|
+
console.log(
|
|
721
|
+
"[IMA] Ad container hidden after setup error"
|
|
722
|
+
);
|
|
723
|
+
}
|
|
724
|
+
}, 300);
|
|
694
725
|
}
|
|
726
|
+
showContentVideo();
|
|
695
727
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
696
728
|
if (video.paused) {
|
|
697
729
|
console.log(
|
|
@@ -716,13 +748,19 @@ function createImaController(video, options) {
|
|
|
716
748
|
(adErrorEvent) => {
|
|
717
749
|
console.error("[IMA] Ads loader error:", adErrorEvent.getError());
|
|
718
750
|
adPlaying = false;
|
|
719
|
-
showContentVideo();
|
|
720
751
|
setAdPlayingFlag(false);
|
|
721
752
|
if (adContainerEl) {
|
|
722
|
-
adContainerEl.style.
|
|
723
|
-
adContainerEl.style.
|
|
724
|
-
|
|
753
|
+
adContainerEl.style.opacity = "0";
|
|
754
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
755
|
+
setTimeout(() => {
|
|
756
|
+
if (adContainerEl) {
|
|
757
|
+
adContainerEl.style.pointerEvents = "none";
|
|
758
|
+
adContainerEl.style.display = "none";
|
|
759
|
+
console.log("[IMA] Ad container hidden after loader error");
|
|
760
|
+
}
|
|
761
|
+
}, 300);
|
|
725
762
|
}
|
|
763
|
+
showContentVideo();
|
|
726
764
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
727
765
|
if (video.paused) {
|
|
728
766
|
console.log("[IMA] Resuming paused video after loader error");
|
|
@@ -828,12 +866,18 @@ function createImaController(video, options) {
|
|
|
828
866
|
console.log("[IMA] Stopping ad playback");
|
|
829
867
|
adPlaying = false;
|
|
830
868
|
setAdPlayingFlag(false);
|
|
831
|
-
showContentVideo();
|
|
832
869
|
if (adContainerEl) {
|
|
833
|
-
adContainerEl.style.
|
|
834
|
-
adContainerEl.style.
|
|
835
|
-
|
|
870
|
+
adContainerEl.style.opacity = "0";
|
|
871
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
872
|
+
setTimeout(() => {
|
|
873
|
+
if (adContainerEl) {
|
|
874
|
+
adContainerEl.style.pointerEvents = "none";
|
|
875
|
+
adContainerEl.style.display = "none";
|
|
876
|
+
console.log("[IMA] Ad container hidden after stop");
|
|
877
|
+
}
|
|
878
|
+
}, 300);
|
|
836
879
|
}
|
|
880
|
+
showContentVideo();
|
|
837
881
|
try {
|
|
838
882
|
(_a = adsManager == null ? void 0 : adsManager.stop) == null ? void 0 : _a.call(adsManager);
|
|
839
883
|
} catch {
|
|
@@ -844,23 +888,29 @@ function createImaController(video, options) {
|
|
|
844
888
|
var _a;
|
|
845
889
|
destroyAdsManager();
|
|
846
890
|
adPlaying = false;
|
|
847
|
-
showContentVideo();
|
|
848
891
|
setAdPlayingFlag(false);
|
|
849
892
|
if (adContainerEl) {
|
|
850
|
-
adContainerEl.style.
|
|
851
|
-
adContainerEl.style.
|
|
893
|
+
adContainerEl.style.opacity = "0";
|
|
894
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
895
|
+
setTimeout(() => {
|
|
896
|
+
if (adContainerEl) {
|
|
897
|
+
adContainerEl.style.pointerEvents = "none";
|
|
898
|
+
adContainerEl.style.display = "none";
|
|
899
|
+
if (adContainerEl.parentElement) {
|
|
900
|
+
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
901
|
+
}
|
|
902
|
+
adContainerEl = void 0;
|
|
903
|
+
adVideoElement = void 0;
|
|
904
|
+
}
|
|
905
|
+
}, 300);
|
|
852
906
|
}
|
|
907
|
+
showContentVideo();
|
|
853
908
|
try {
|
|
854
909
|
(_a = adsLoader == null ? void 0 : adsLoader.destroy) == null ? void 0 : _a.call(adsLoader);
|
|
855
910
|
} catch {
|
|
856
911
|
}
|
|
857
|
-
if (adContainerEl == null ? void 0 : adContainerEl.parentElement) {
|
|
858
|
-
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
859
|
-
}
|
|
860
|
-
adContainerEl = void 0;
|
|
861
912
|
adDisplayContainer = void 0;
|
|
862
913
|
adsLoader = void 0;
|
|
863
|
-
adVideoElement = void 0;
|
|
864
914
|
contentVideoHidden = false;
|
|
865
915
|
preloadedVast.clear();
|
|
866
916
|
preloadingVast.clear();
|
|
@@ -940,13 +990,22 @@ function createImaController(video, options) {
|
|
|
940
990
|
ensurePlaceholderContainer();
|
|
941
991
|
if (adContainerEl) {
|
|
942
992
|
adContainerEl.style.display = "flex";
|
|
993
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
994
|
+
adContainerEl.offsetHeight;
|
|
995
|
+
adContainerEl.style.opacity = "1";
|
|
943
996
|
adContainerEl.style.pointerEvents = "auto";
|
|
944
997
|
}
|
|
945
998
|
},
|
|
946
999
|
hidePlaceholder() {
|
|
947
1000
|
if (adContainerEl) {
|
|
948
|
-
adContainerEl.style.
|
|
949
|
-
adContainerEl.style.
|
|
1001
|
+
adContainerEl.style.opacity = "0";
|
|
1002
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
1003
|
+
setTimeout(() => {
|
|
1004
|
+
if (adContainerEl) {
|
|
1005
|
+
adContainerEl.style.display = "none";
|
|
1006
|
+
adContainerEl.style.pointerEvents = "none";
|
|
1007
|
+
}
|
|
1008
|
+
}, 300);
|
|
950
1009
|
}
|
|
951
1010
|
}
|
|
952
1011
|
};
|