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
package/lib/players/index.cjs
CHANGED
|
@@ -256,7 +256,11 @@ function createImaController(video, options) {
|
|
|
256
256
|
}
|
|
257
257
|
function hideContentVideo() {
|
|
258
258
|
if (!contentVideoHidden) {
|
|
259
|
-
video.style.
|
|
259
|
+
video.style.transition = "opacity 0.3s ease-in-out";
|
|
260
|
+
video.style.opacity = "0";
|
|
261
|
+
setTimeout(() => {
|
|
262
|
+
video.style.visibility = "hidden";
|
|
263
|
+
}, 300);
|
|
260
264
|
video.muted = true;
|
|
261
265
|
video.volume = 0;
|
|
262
266
|
contentVideoHidden = true;
|
|
@@ -266,6 +270,9 @@ function createImaController(video, options) {
|
|
|
266
270
|
function showContentVideo() {
|
|
267
271
|
if (contentVideoHidden) {
|
|
268
272
|
video.style.visibility = "visible";
|
|
273
|
+
video.style.transition = "opacity 0.3s ease-in-out";
|
|
274
|
+
video.offsetHeight;
|
|
275
|
+
video.style.opacity = "1";
|
|
269
276
|
video.muted = originalMutedState;
|
|
270
277
|
video.volume = originalVolume;
|
|
271
278
|
contentVideoHidden = false;
|
|
@@ -438,7 +445,9 @@ function createImaController(video, options) {
|
|
|
438
445
|
container.style.justifyContent = "center";
|
|
439
446
|
container.style.pointerEvents = "none";
|
|
440
447
|
container.style.zIndex = "10";
|
|
441
|
-
container.style.backgroundColor = "
|
|
448
|
+
container.style.backgroundColor = "transparent";
|
|
449
|
+
container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
|
|
450
|
+
container.style.opacity = "0";
|
|
442
451
|
(_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
443
452
|
adContainerEl = container;
|
|
444
453
|
}
|
|
@@ -548,7 +557,9 @@ function createImaController(video, options) {
|
|
|
548
557
|
container.style.justifyContent = "center";
|
|
549
558
|
container.style.pointerEvents = "none";
|
|
550
559
|
container.style.zIndex = "10";
|
|
551
|
-
container.style.backgroundColor = "
|
|
560
|
+
container.style.backgroundColor = "transparent";
|
|
561
|
+
container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
|
|
562
|
+
container.style.opacity = "0";
|
|
552
563
|
if (!video.parentElement) {
|
|
553
564
|
throw new Error("Video element has no parent for ad container");
|
|
554
565
|
}
|
|
@@ -612,13 +623,19 @@ function createImaController(video, options) {
|
|
|
612
623
|
console.error("[IMA] Ad error:", errorEvent.getError());
|
|
613
624
|
destroyAdsManager();
|
|
614
625
|
adPlaying = false;
|
|
615
|
-
showContentVideo();
|
|
616
626
|
setAdPlayingFlag(false);
|
|
617
627
|
if (adContainerEl) {
|
|
618
|
-
adContainerEl.style.
|
|
619
|
-
adContainerEl.style.
|
|
620
|
-
|
|
628
|
+
adContainerEl.style.opacity = "0";
|
|
629
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
630
|
+
setTimeout(() => {
|
|
631
|
+
if (adContainerEl) {
|
|
632
|
+
adContainerEl.style.pointerEvents = "none";
|
|
633
|
+
adContainerEl.style.display = "none";
|
|
634
|
+
console.log("[IMA] Ad container hidden after error");
|
|
635
|
+
}
|
|
636
|
+
}, 300);
|
|
621
637
|
}
|
|
638
|
+
showContentVideo();
|
|
622
639
|
if (adsLoadedReject) {
|
|
623
640
|
adsLoadedReject(new Error("Ad playback error"));
|
|
624
641
|
adsLoadedReject = void 0;
|
|
@@ -683,6 +700,9 @@ function createImaController(video, options) {
|
|
|
683
700
|
if (adContainerEl) {
|
|
684
701
|
adContainerEl.style.pointerEvents = "auto";
|
|
685
702
|
adContainerEl.style.display = "flex";
|
|
703
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
704
|
+
adContainerEl.offsetHeight;
|
|
705
|
+
adContainerEl.style.opacity = "1";
|
|
686
706
|
console.log("[IMA] Ad container now visible");
|
|
687
707
|
}
|
|
688
708
|
});
|
|
@@ -692,27 +712,31 @@ function createImaController(video, options) {
|
|
|
692
712
|
console.log("[IMA] Content resume requested");
|
|
693
713
|
adPlaying = false;
|
|
694
714
|
setAdPlayingFlag(false);
|
|
695
|
-
showContentVideo();
|
|
696
715
|
emit("content_resume");
|
|
697
|
-
setTimeout(() => {
|
|
698
|
-
const stillInPod = video.dataset.stormcloudAdPlaying === "true";
|
|
699
|
-
if (stillInPod) {
|
|
700
|
-
console.log(
|
|
701
|
-
"[IMA] Still in ad pod - keeping ad container visible"
|
|
702
|
-
);
|
|
703
|
-
if (adContainerEl) {
|
|
704
|
-
adContainerEl.style.display = "flex";
|
|
705
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
706
|
-
}
|
|
707
|
-
hideContentVideo();
|
|
708
|
-
}
|
|
709
|
-
}, 50);
|
|
710
716
|
}
|
|
711
717
|
);
|
|
712
718
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
713
|
-
console.log("[IMA] All ads completed -
|
|
719
|
+
console.log("[IMA] All ads completed - restoring content");
|
|
714
720
|
adPlaying = false;
|
|
715
721
|
setAdPlayingFlag(false);
|
|
722
|
+
if (adContainerEl) {
|
|
723
|
+
adContainerEl.style.opacity = "0";
|
|
724
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
725
|
+
setTimeout(() => {
|
|
726
|
+
if (adContainerEl) {
|
|
727
|
+
adContainerEl.style.pointerEvents = "none";
|
|
728
|
+
adContainerEl.style.display = "none";
|
|
729
|
+
console.log("[IMA] Ad container hidden");
|
|
730
|
+
}
|
|
731
|
+
}, 300);
|
|
732
|
+
}
|
|
733
|
+
showContentVideo();
|
|
734
|
+
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds) && video.paused) {
|
|
735
|
+
console.log("[IMA] Resuming content video playback");
|
|
736
|
+
video.play().catch((e) => {
|
|
737
|
+
console.warn("[IMA] Failed to resume content video:", e);
|
|
738
|
+
});
|
|
739
|
+
}
|
|
716
740
|
emit("all_ads_completed");
|
|
717
741
|
});
|
|
718
742
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -724,13 +748,21 @@ function createImaController(video, options) {
|
|
|
724
748
|
} catch (e) {
|
|
725
749
|
console.error("[IMA] Error setting up ads manager:", e);
|
|
726
750
|
adPlaying = false;
|
|
727
|
-
showContentVideo();
|
|
728
751
|
setAdPlayingFlag(false);
|
|
729
752
|
if (adContainerEl) {
|
|
730
|
-
adContainerEl.style.
|
|
731
|
-
adContainerEl.style.
|
|
732
|
-
|
|
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(
|
|
760
|
+
"[IMA] Ad container hidden after setup error"
|
|
761
|
+
);
|
|
762
|
+
}
|
|
763
|
+
}, 300);
|
|
733
764
|
}
|
|
765
|
+
showContentVideo();
|
|
734
766
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
735
767
|
if (video.paused) {
|
|
736
768
|
console.log(
|
|
@@ -755,13 +787,19 @@ function createImaController(video, options) {
|
|
|
755
787
|
(adErrorEvent) => {
|
|
756
788
|
console.error("[IMA] Ads loader error:", adErrorEvent.getError());
|
|
757
789
|
adPlaying = false;
|
|
758
|
-
showContentVideo();
|
|
759
790
|
setAdPlayingFlag(false);
|
|
760
791
|
if (adContainerEl) {
|
|
761
|
-
adContainerEl.style.
|
|
762
|
-
adContainerEl.style.
|
|
763
|
-
|
|
792
|
+
adContainerEl.style.opacity = "0";
|
|
793
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
794
|
+
setTimeout(() => {
|
|
795
|
+
if (adContainerEl) {
|
|
796
|
+
adContainerEl.style.pointerEvents = "none";
|
|
797
|
+
adContainerEl.style.display = "none";
|
|
798
|
+
console.log("[IMA] Ad container hidden after loader error");
|
|
799
|
+
}
|
|
800
|
+
}, 300);
|
|
764
801
|
}
|
|
802
|
+
showContentVideo();
|
|
765
803
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
766
804
|
if (video.paused) {
|
|
767
805
|
console.log("[IMA] Resuming paused video after loader error");
|
|
@@ -867,12 +905,18 @@ function createImaController(video, options) {
|
|
|
867
905
|
console.log("[IMA] Stopping ad playback");
|
|
868
906
|
adPlaying = false;
|
|
869
907
|
setAdPlayingFlag(false);
|
|
870
|
-
showContentVideo();
|
|
871
908
|
if (adContainerEl) {
|
|
872
|
-
adContainerEl.style.
|
|
873
|
-
adContainerEl.style.
|
|
874
|
-
|
|
909
|
+
adContainerEl.style.opacity = "0";
|
|
910
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
911
|
+
setTimeout(() => {
|
|
912
|
+
if (adContainerEl) {
|
|
913
|
+
adContainerEl.style.pointerEvents = "none";
|
|
914
|
+
adContainerEl.style.display = "none";
|
|
915
|
+
console.log("[IMA] Ad container hidden after stop");
|
|
916
|
+
}
|
|
917
|
+
}, 300);
|
|
875
918
|
}
|
|
919
|
+
showContentVideo();
|
|
876
920
|
try {
|
|
877
921
|
(_a = adsManager == null ? void 0 : adsManager.stop) == null ? void 0 : _a.call(adsManager);
|
|
878
922
|
} catch {
|
|
@@ -883,23 +927,29 @@ function createImaController(video, options) {
|
|
|
883
927
|
var _a;
|
|
884
928
|
destroyAdsManager();
|
|
885
929
|
adPlaying = false;
|
|
886
|
-
showContentVideo();
|
|
887
930
|
setAdPlayingFlag(false);
|
|
888
931
|
if (adContainerEl) {
|
|
889
|
-
adContainerEl.style.
|
|
890
|
-
adContainerEl.style.
|
|
932
|
+
adContainerEl.style.opacity = "0";
|
|
933
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
934
|
+
setTimeout(() => {
|
|
935
|
+
if (adContainerEl) {
|
|
936
|
+
adContainerEl.style.pointerEvents = "none";
|
|
937
|
+
adContainerEl.style.display = "none";
|
|
938
|
+
if (adContainerEl.parentElement) {
|
|
939
|
+
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
940
|
+
}
|
|
941
|
+
adContainerEl = void 0;
|
|
942
|
+
adVideoElement = void 0;
|
|
943
|
+
}
|
|
944
|
+
}, 300);
|
|
891
945
|
}
|
|
946
|
+
showContentVideo();
|
|
892
947
|
try {
|
|
893
948
|
(_a = adsLoader == null ? void 0 : adsLoader.destroy) == null ? void 0 : _a.call(adsLoader);
|
|
894
949
|
} catch {
|
|
895
950
|
}
|
|
896
|
-
if (adContainerEl == null ? void 0 : adContainerEl.parentElement) {
|
|
897
|
-
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
898
|
-
}
|
|
899
|
-
adContainerEl = void 0;
|
|
900
951
|
adDisplayContainer = void 0;
|
|
901
952
|
adsLoader = void 0;
|
|
902
|
-
adVideoElement = void 0;
|
|
903
953
|
contentVideoHidden = false;
|
|
904
954
|
preloadedVast.clear();
|
|
905
955
|
preloadingVast.clear();
|
|
@@ -979,13 +1029,22 @@ function createImaController(video, options) {
|
|
|
979
1029
|
ensurePlaceholderContainer();
|
|
980
1030
|
if (adContainerEl) {
|
|
981
1031
|
adContainerEl.style.display = "flex";
|
|
1032
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
1033
|
+
adContainerEl.offsetHeight;
|
|
1034
|
+
adContainerEl.style.opacity = "1";
|
|
982
1035
|
adContainerEl.style.pointerEvents = "auto";
|
|
983
1036
|
}
|
|
984
1037
|
},
|
|
985
1038
|
hidePlaceholder() {
|
|
986
1039
|
if (adContainerEl) {
|
|
987
|
-
adContainerEl.style.
|
|
988
|
-
adContainerEl.style.
|
|
1040
|
+
adContainerEl.style.opacity = "0";
|
|
1041
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
1042
|
+
setTimeout(() => {
|
|
1043
|
+
if (adContainerEl) {
|
|
1044
|
+
adContainerEl.style.display = "none";
|
|
1045
|
+
adContainerEl.style.pointerEvents = "none";
|
|
1046
|
+
}
|
|
1047
|
+
}, 300);
|
|
989
1048
|
}
|
|
990
1049
|
}
|
|
991
1050
|
};
|