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/index.cjs
CHANGED
|
@@ -281,7 +281,11 @@ function createImaController(video, options) {
|
|
|
281
281
|
}
|
|
282
282
|
function hideContentVideo() {
|
|
283
283
|
if (!contentVideoHidden) {
|
|
284
|
-
video.style.
|
|
284
|
+
video.style.transition = "opacity 0.3s ease-in-out";
|
|
285
|
+
video.style.opacity = "0";
|
|
286
|
+
setTimeout(() => {
|
|
287
|
+
video.style.visibility = "hidden";
|
|
288
|
+
}, 300);
|
|
285
289
|
video.muted = true;
|
|
286
290
|
video.volume = 0;
|
|
287
291
|
contentVideoHidden = true;
|
|
@@ -291,6 +295,9 @@ function createImaController(video, options) {
|
|
|
291
295
|
function showContentVideo() {
|
|
292
296
|
if (contentVideoHidden) {
|
|
293
297
|
video.style.visibility = "visible";
|
|
298
|
+
video.style.transition = "opacity 0.3s ease-in-out";
|
|
299
|
+
video.offsetHeight;
|
|
300
|
+
video.style.opacity = "1";
|
|
294
301
|
video.muted = originalMutedState;
|
|
295
302
|
video.volume = originalVolume;
|
|
296
303
|
contentVideoHidden = false;
|
|
@@ -463,7 +470,9 @@ function createImaController(video, options) {
|
|
|
463
470
|
container.style.justifyContent = "center";
|
|
464
471
|
container.style.pointerEvents = "none";
|
|
465
472
|
container.style.zIndex = "10";
|
|
466
|
-
container.style.backgroundColor = "
|
|
473
|
+
container.style.backgroundColor = "transparent";
|
|
474
|
+
container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
|
|
475
|
+
container.style.opacity = "0";
|
|
467
476
|
(_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
468
477
|
adContainerEl = container;
|
|
469
478
|
}
|
|
@@ -573,7 +582,9 @@ function createImaController(video, options) {
|
|
|
573
582
|
container.style.justifyContent = "center";
|
|
574
583
|
container.style.pointerEvents = "none";
|
|
575
584
|
container.style.zIndex = "10";
|
|
576
|
-
container.style.backgroundColor = "
|
|
585
|
+
container.style.backgroundColor = "transparent";
|
|
586
|
+
container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
|
|
587
|
+
container.style.opacity = "0";
|
|
577
588
|
if (!video.parentElement) {
|
|
578
589
|
throw new Error("Video element has no parent for ad container");
|
|
579
590
|
}
|
|
@@ -637,13 +648,19 @@ function createImaController(video, options) {
|
|
|
637
648
|
console.error("[IMA] Ad error:", errorEvent.getError());
|
|
638
649
|
destroyAdsManager();
|
|
639
650
|
adPlaying = false;
|
|
640
|
-
showContentVideo();
|
|
641
651
|
setAdPlayingFlag(false);
|
|
642
652
|
if (adContainerEl) {
|
|
643
|
-
adContainerEl.style.
|
|
644
|
-
adContainerEl.style.
|
|
645
|
-
|
|
653
|
+
adContainerEl.style.opacity = "0";
|
|
654
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
655
|
+
setTimeout(() => {
|
|
656
|
+
if (adContainerEl) {
|
|
657
|
+
adContainerEl.style.pointerEvents = "none";
|
|
658
|
+
adContainerEl.style.display = "none";
|
|
659
|
+
console.log("[IMA] Ad container hidden after error");
|
|
660
|
+
}
|
|
661
|
+
}, 300);
|
|
646
662
|
}
|
|
663
|
+
showContentVideo();
|
|
647
664
|
if (adsLoadedReject) {
|
|
648
665
|
adsLoadedReject(new Error("Ad playback error"));
|
|
649
666
|
adsLoadedReject = void 0;
|
|
@@ -708,6 +725,9 @@ function createImaController(video, options) {
|
|
|
708
725
|
if (adContainerEl) {
|
|
709
726
|
adContainerEl.style.pointerEvents = "auto";
|
|
710
727
|
adContainerEl.style.display = "flex";
|
|
728
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
729
|
+
adContainerEl.offsetHeight;
|
|
730
|
+
adContainerEl.style.opacity = "1";
|
|
711
731
|
console.log("[IMA] Ad container now visible");
|
|
712
732
|
}
|
|
713
733
|
});
|
|
@@ -717,27 +737,31 @@ function createImaController(video, options) {
|
|
|
717
737
|
console.log("[IMA] Content resume requested");
|
|
718
738
|
adPlaying = false;
|
|
719
739
|
setAdPlayingFlag(false);
|
|
720
|
-
showContentVideo();
|
|
721
740
|
emit("content_resume");
|
|
722
|
-
setTimeout(() => {
|
|
723
|
-
const stillInPod = video.dataset.stormcloudAdPlaying === "true";
|
|
724
|
-
if (stillInPod) {
|
|
725
|
-
console.log(
|
|
726
|
-
"[IMA] Still in ad pod - keeping ad container visible"
|
|
727
|
-
);
|
|
728
|
-
if (adContainerEl) {
|
|
729
|
-
adContainerEl.style.display = "flex";
|
|
730
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
731
|
-
}
|
|
732
|
-
hideContentVideo();
|
|
733
|
-
}
|
|
734
|
-
}, 50);
|
|
735
741
|
}
|
|
736
742
|
);
|
|
737
743
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
738
|
-
console.log("[IMA] All ads completed -
|
|
744
|
+
console.log("[IMA] All ads completed - restoring content");
|
|
739
745
|
adPlaying = false;
|
|
740
746
|
setAdPlayingFlag(false);
|
|
747
|
+
if (adContainerEl) {
|
|
748
|
+
adContainerEl.style.opacity = "0";
|
|
749
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
750
|
+
setTimeout(() => {
|
|
751
|
+
if (adContainerEl) {
|
|
752
|
+
adContainerEl.style.pointerEvents = "none";
|
|
753
|
+
adContainerEl.style.display = "none";
|
|
754
|
+
console.log("[IMA] Ad container hidden");
|
|
755
|
+
}
|
|
756
|
+
}, 300);
|
|
757
|
+
}
|
|
758
|
+
showContentVideo();
|
|
759
|
+
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds) && video.paused) {
|
|
760
|
+
console.log("[IMA] Resuming content video playback");
|
|
761
|
+
video.play().catch((e) => {
|
|
762
|
+
console.warn("[IMA] Failed to resume content video:", e);
|
|
763
|
+
});
|
|
764
|
+
}
|
|
741
765
|
emit("all_ads_completed");
|
|
742
766
|
});
|
|
743
767
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -749,13 +773,21 @@ function createImaController(video, options) {
|
|
|
749
773
|
} catch (e) {
|
|
750
774
|
console.error("[IMA] Error setting up ads manager:", e);
|
|
751
775
|
adPlaying = false;
|
|
752
|
-
showContentVideo();
|
|
753
776
|
setAdPlayingFlag(false);
|
|
754
777
|
if (adContainerEl) {
|
|
755
|
-
adContainerEl.style.
|
|
756
|
-
adContainerEl.style.
|
|
757
|
-
|
|
778
|
+
adContainerEl.style.opacity = "0";
|
|
779
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
780
|
+
setTimeout(() => {
|
|
781
|
+
if (adContainerEl) {
|
|
782
|
+
adContainerEl.style.pointerEvents = "none";
|
|
783
|
+
adContainerEl.style.display = "none";
|
|
784
|
+
console.log(
|
|
785
|
+
"[IMA] Ad container hidden after setup error"
|
|
786
|
+
);
|
|
787
|
+
}
|
|
788
|
+
}, 300);
|
|
758
789
|
}
|
|
790
|
+
showContentVideo();
|
|
759
791
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
760
792
|
if (video.paused) {
|
|
761
793
|
console.log(
|
|
@@ -780,13 +812,19 @@ function createImaController(video, options) {
|
|
|
780
812
|
(adErrorEvent) => {
|
|
781
813
|
console.error("[IMA] Ads loader error:", adErrorEvent.getError());
|
|
782
814
|
adPlaying = false;
|
|
783
|
-
showContentVideo();
|
|
784
815
|
setAdPlayingFlag(false);
|
|
785
816
|
if (adContainerEl) {
|
|
786
|
-
adContainerEl.style.
|
|
787
|
-
adContainerEl.style.
|
|
788
|
-
|
|
817
|
+
adContainerEl.style.opacity = "0";
|
|
818
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
819
|
+
setTimeout(() => {
|
|
820
|
+
if (adContainerEl) {
|
|
821
|
+
adContainerEl.style.pointerEvents = "none";
|
|
822
|
+
adContainerEl.style.display = "none";
|
|
823
|
+
console.log("[IMA] Ad container hidden after loader error");
|
|
824
|
+
}
|
|
825
|
+
}, 300);
|
|
789
826
|
}
|
|
827
|
+
showContentVideo();
|
|
790
828
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
791
829
|
if (video.paused) {
|
|
792
830
|
console.log("[IMA] Resuming paused video after loader error");
|
|
@@ -892,12 +930,18 @@ function createImaController(video, options) {
|
|
|
892
930
|
console.log("[IMA] Stopping ad playback");
|
|
893
931
|
adPlaying = false;
|
|
894
932
|
setAdPlayingFlag(false);
|
|
895
|
-
showContentVideo();
|
|
896
933
|
if (adContainerEl) {
|
|
897
|
-
adContainerEl.style.
|
|
898
|
-
adContainerEl.style.
|
|
899
|
-
|
|
934
|
+
adContainerEl.style.opacity = "0";
|
|
935
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
936
|
+
setTimeout(() => {
|
|
937
|
+
if (adContainerEl) {
|
|
938
|
+
adContainerEl.style.pointerEvents = "none";
|
|
939
|
+
adContainerEl.style.display = "none";
|
|
940
|
+
console.log("[IMA] Ad container hidden after stop");
|
|
941
|
+
}
|
|
942
|
+
}, 300);
|
|
900
943
|
}
|
|
944
|
+
showContentVideo();
|
|
901
945
|
try {
|
|
902
946
|
(_a = adsManager == null ? void 0 : adsManager.stop) == null ? void 0 : _a.call(adsManager);
|
|
903
947
|
} catch {
|
|
@@ -908,23 +952,29 @@ function createImaController(video, options) {
|
|
|
908
952
|
var _a;
|
|
909
953
|
destroyAdsManager();
|
|
910
954
|
adPlaying = false;
|
|
911
|
-
showContentVideo();
|
|
912
955
|
setAdPlayingFlag(false);
|
|
913
956
|
if (adContainerEl) {
|
|
914
|
-
adContainerEl.style.
|
|
915
|
-
adContainerEl.style.
|
|
957
|
+
adContainerEl.style.opacity = "0";
|
|
958
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
959
|
+
setTimeout(() => {
|
|
960
|
+
if (adContainerEl) {
|
|
961
|
+
adContainerEl.style.pointerEvents = "none";
|
|
962
|
+
adContainerEl.style.display = "none";
|
|
963
|
+
if (adContainerEl.parentElement) {
|
|
964
|
+
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
965
|
+
}
|
|
966
|
+
adContainerEl = void 0;
|
|
967
|
+
adVideoElement = void 0;
|
|
968
|
+
}
|
|
969
|
+
}, 300);
|
|
916
970
|
}
|
|
971
|
+
showContentVideo();
|
|
917
972
|
try {
|
|
918
973
|
(_a = adsLoader == null ? void 0 : adsLoader.destroy) == null ? void 0 : _a.call(adsLoader);
|
|
919
974
|
} catch {
|
|
920
975
|
}
|
|
921
|
-
if (adContainerEl == null ? void 0 : adContainerEl.parentElement) {
|
|
922
|
-
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
923
|
-
}
|
|
924
|
-
adContainerEl = void 0;
|
|
925
976
|
adDisplayContainer = void 0;
|
|
926
977
|
adsLoader = void 0;
|
|
927
|
-
adVideoElement = void 0;
|
|
928
978
|
contentVideoHidden = false;
|
|
929
979
|
preloadedVast.clear();
|
|
930
980
|
preloadingVast.clear();
|
|
@@ -1004,13 +1054,22 @@ function createImaController(video, options) {
|
|
|
1004
1054
|
ensurePlaceholderContainer();
|
|
1005
1055
|
if (adContainerEl) {
|
|
1006
1056
|
adContainerEl.style.display = "flex";
|
|
1057
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
1058
|
+
adContainerEl.offsetHeight;
|
|
1059
|
+
adContainerEl.style.opacity = "1";
|
|
1007
1060
|
adContainerEl.style.pointerEvents = "auto";
|
|
1008
1061
|
}
|
|
1009
1062
|
},
|
|
1010
1063
|
hidePlaceholder() {
|
|
1011
1064
|
if (adContainerEl) {
|
|
1012
|
-
adContainerEl.style.
|
|
1013
|
-
adContainerEl.style.
|
|
1065
|
+
adContainerEl.style.opacity = "0";
|
|
1066
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
1067
|
+
setTimeout(() => {
|
|
1068
|
+
if (adContainerEl) {
|
|
1069
|
+
adContainerEl.style.display = "none";
|
|
1070
|
+
adContainerEl.style.pointerEvents = "none";
|
|
1071
|
+
}
|
|
1072
|
+
}, 300);
|
|
1014
1073
|
}
|
|
1015
1074
|
}
|
|
1016
1075
|
};
|