stormcloud-video-player 0.2.30 → 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 +94 -33
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +94 -33
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +94 -33
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/players/HlsPlayer.cjs +94 -33
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +94 -33
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/ima.cjs +94 -33
- package/lib/sdk/ima.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +94 -33
- 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
|
});
|
|
@@ -699,12 +719,18 @@ function createImaController(video, options) {
|
|
|
699
719
|
console.log("[IMA] All ads completed - restoring content");
|
|
700
720
|
adPlaying = false;
|
|
701
721
|
setAdPlayingFlag(false);
|
|
702
|
-
showContentVideo();
|
|
703
722
|
if (adContainerEl) {
|
|
704
|
-
adContainerEl.style.
|
|
705
|
-
adContainerEl.style.
|
|
706
|
-
|
|
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);
|
|
707
732
|
}
|
|
733
|
+
showContentVideo();
|
|
708
734
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds) && video.paused) {
|
|
709
735
|
console.log("[IMA] Resuming content video playback");
|
|
710
736
|
video.play().catch((e) => {
|
|
@@ -722,13 +748,21 @@ function createImaController(video, options) {
|
|
|
722
748
|
} catch (e) {
|
|
723
749
|
console.error("[IMA] Error setting up ads manager:", e);
|
|
724
750
|
adPlaying = false;
|
|
725
|
-
showContentVideo();
|
|
726
751
|
setAdPlayingFlag(false);
|
|
727
752
|
if (adContainerEl) {
|
|
728
|
-
adContainerEl.style.
|
|
729
|
-
adContainerEl.style.
|
|
730
|
-
|
|
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);
|
|
731
764
|
}
|
|
765
|
+
showContentVideo();
|
|
732
766
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
733
767
|
if (video.paused) {
|
|
734
768
|
console.log(
|
|
@@ -753,13 +787,19 @@ function createImaController(video, options) {
|
|
|
753
787
|
(adErrorEvent) => {
|
|
754
788
|
console.error("[IMA] Ads loader error:", adErrorEvent.getError());
|
|
755
789
|
adPlaying = false;
|
|
756
|
-
showContentVideo();
|
|
757
790
|
setAdPlayingFlag(false);
|
|
758
791
|
if (adContainerEl) {
|
|
759
|
-
adContainerEl.style.
|
|
760
|
-
adContainerEl.style.
|
|
761
|
-
|
|
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);
|
|
762
801
|
}
|
|
802
|
+
showContentVideo();
|
|
763
803
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
764
804
|
if (video.paused) {
|
|
765
805
|
console.log("[IMA] Resuming paused video after loader error");
|
|
@@ -865,12 +905,18 @@ function createImaController(video, options) {
|
|
|
865
905
|
console.log("[IMA] Stopping ad playback");
|
|
866
906
|
adPlaying = false;
|
|
867
907
|
setAdPlayingFlag(false);
|
|
868
|
-
showContentVideo();
|
|
869
908
|
if (adContainerEl) {
|
|
870
|
-
adContainerEl.style.
|
|
871
|
-
adContainerEl.style.
|
|
872
|
-
|
|
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);
|
|
873
918
|
}
|
|
919
|
+
showContentVideo();
|
|
874
920
|
try {
|
|
875
921
|
(_a = adsManager == null ? void 0 : adsManager.stop) == null ? void 0 : _a.call(adsManager);
|
|
876
922
|
} catch {
|
|
@@ -881,23 +927,29 @@ function createImaController(video, options) {
|
|
|
881
927
|
var _a;
|
|
882
928
|
destroyAdsManager();
|
|
883
929
|
adPlaying = false;
|
|
884
|
-
showContentVideo();
|
|
885
930
|
setAdPlayingFlag(false);
|
|
886
931
|
if (adContainerEl) {
|
|
887
|
-
adContainerEl.style.
|
|
888
|
-
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);
|
|
889
945
|
}
|
|
946
|
+
showContentVideo();
|
|
890
947
|
try {
|
|
891
948
|
(_a = adsLoader == null ? void 0 : adsLoader.destroy) == null ? void 0 : _a.call(adsLoader);
|
|
892
949
|
} catch {
|
|
893
950
|
}
|
|
894
|
-
if (adContainerEl == null ? void 0 : adContainerEl.parentElement) {
|
|
895
|
-
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
896
|
-
}
|
|
897
|
-
adContainerEl = void 0;
|
|
898
951
|
adDisplayContainer = void 0;
|
|
899
952
|
adsLoader = void 0;
|
|
900
|
-
adVideoElement = void 0;
|
|
901
953
|
contentVideoHidden = false;
|
|
902
954
|
preloadedVast.clear();
|
|
903
955
|
preloadingVast.clear();
|
|
@@ -977,13 +1029,22 @@ function createImaController(video, options) {
|
|
|
977
1029
|
ensurePlaceholderContainer();
|
|
978
1030
|
if (adContainerEl) {
|
|
979
1031
|
adContainerEl.style.display = "flex";
|
|
1032
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
1033
|
+
adContainerEl.offsetHeight;
|
|
1034
|
+
adContainerEl.style.opacity = "1";
|
|
980
1035
|
adContainerEl.style.pointerEvents = "auto";
|
|
981
1036
|
}
|
|
982
1037
|
},
|
|
983
1038
|
hidePlaceholder() {
|
|
984
1039
|
if (adContainerEl) {
|
|
985
|
-
adContainerEl.style.
|
|
986
|
-
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);
|
|
987
1048
|
}
|
|
988
1049
|
}
|
|
989
1050
|
};
|