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
|
@@ -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
|
});
|
|
@@ -660,12 +680,18 @@ function createImaController(video, options) {
|
|
|
660
680
|
console.log("[IMA] All ads completed - restoring content");
|
|
661
681
|
adPlaying = false;
|
|
662
682
|
setAdPlayingFlag(false);
|
|
663
|
-
showContentVideo();
|
|
664
683
|
if (adContainerEl) {
|
|
665
|
-
adContainerEl.style.
|
|
666
|
-
adContainerEl.style.
|
|
667
|
-
|
|
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);
|
|
668
693
|
}
|
|
694
|
+
showContentVideo();
|
|
669
695
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds) && video.paused) {
|
|
670
696
|
console.log("[IMA] Resuming content video playback");
|
|
671
697
|
video.play().catch((e) => {
|
|
@@ -683,13 +709,21 @@ function createImaController(video, options) {
|
|
|
683
709
|
} catch (e) {
|
|
684
710
|
console.error("[IMA] Error setting up ads manager:", e);
|
|
685
711
|
adPlaying = false;
|
|
686
|
-
showContentVideo();
|
|
687
712
|
setAdPlayingFlag(false);
|
|
688
713
|
if (adContainerEl) {
|
|
689
|
-
adContainerEl.style.
|
|
690
|
-
adContainerEl.style.
|
|
691
|
-
|
|
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);
|
|
692
725
|
}
|
|
726
|
+
showContentVideo();
|
|
693
727
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
694
728
|
if (video.paused) {
|
|
695
729
|
console.log(
|
|
@@ -714,13 +748,19 @@ function createImaController(video, options) {
|
|
|
714
748
|
(adErrorEvent) => {
|
|
715
749
|
console.error("[IMA] Ads loader error:", adErrorEvent.getError());
|
|
716
750
|
adPlaying = false;
|
|
717
|
-
showContentVideo();
|
|
718
751
|
setAdPlayingFlag(false);
|
|
719
752
|
if (adContainerEl) {
|
|
720
|
-
adContainerEl.style.
|
|
721
|
-
adContainerEl.style.
|
|
722
|
-
|
|
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);
|
|
723
762
|
}
|
|
763
|
+
showContentVideo();
|
|
724
764
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
725
765
|
if (video.paused) {
|
|
726
766
|
console.log("[IMA] Resuming paused video after loader error");
|
|
@@ -826,12 +866,18 @@ function createImaController(video, options) {
|
|
|
826
866
|
console.log("[IMA] Stopping ad playback");
|
|
827
867
|
adPlaying = false;
|
|
828
868
|
setAdPlayingFlag(false);
|
|
829
|
-
showContentVideo();
|
|
830
869
|
if (adContainerEl) {
|
|
831
|
-
adContainerEl.style.
|
|
832
|
-
adContainerEl.style.
|
|
833
|
-
|
|
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);
|
|
834
879
|
}
|
|
880
|
+
showContentVideo();
|
|
835
881
|
try {
|
|
836
882
|
(_a = adsManager == null ? void 0 : adsManager.stop) == null ? void 0 : _a.call(adsManager);
|
|
837
883
|
} catch {
|
|
@@ -842,23 +888,29 @@ function createImaController(video, options) {
|
|
|
842
888
|
var _a;
|
|
843
889
|
destroyAdsManager();
|
|
844
890
|
adPlaying = false;
|
|
845
|
-
showContentVideo();
|
|
846
891
|
setAdPlayingFlag(false);
|
|
847
892
|
if (adContainerEl) {
|
|
848
|
-
adContainerEl.style.
|
|
849
|
-
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);
|
|
850
906
|
}
|
|
907
|
+
showContentVideo();
|
|
851
908
|
try {
|
|
852
909
|
(_a = adsLoader == null ? void 0 : adsLoader.destroy) == null ? void 0 : _a.call(adsLoader);
|
|
853
910
|
} catch {
|
|
854
911
|
}
|
|
855
|
-
if (adContainerEl == null ? void 0 : adContainerEl.parentElement) {
|
|
856
|
-
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
857
|
-
}
|
|
858
|
-
adContainerEl = void 0;
|
|
859
912
|
adDisplayContainer = void 0;
|
|
860
913
|
adsLoader = void 0;
|
|
861
|
-
adVideoElement = void 0;
|
|
862
914
|
contentVideoHidden = false;
|
|
863
915
|
preloadedVast.clear();
|
|
864
916
|
preloadingVast.clear();
|
|
@@ -938,13 +990,22 @@ function createImaController(video, options) {
|
|
|
938
990
|
ensurePlaceholderContainer();
|
|
939
991
|
if (adContainerEl) {
|
|
940
992
|
adContainerEl.style.display = "flex";
|
|
993
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
994
|
+
adContainerEl.offsetHeight;
|
|
995
|
+
adContainerEl.style.opacity = "1";
|
|
941
996
|
adContainerEl.style.pointerEvents = "auto";
|
|
942
997
|
}
|
|
943
998
|
},
|
|
944
999
|
hidePlaceholder() {
|
|
945
1000
|
if (adContainerEl) {
|
|
946
|
-
adContainerEl.style.
|
|
947
|
-
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);
|
|
948
1009
|
}
|
|
949
1010
|
}
|
|
950
1011
|
};
|