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
|
@@ -214,7 +214,11 @@ function createImaController(video, options) {
|
|
|
214
214
|
}
|
|
215
215
|
function hideContentVideo() {
|
|
216
216
|
if (!contentVideoHidden) {
|
|
217
|
-
video.style.
|
|
217
|
+
video.style.transition = "opacity 0.3s ease-in-out";
|
|
218
|
+
video.style.opacity = "0";
|
|
219
|
+
setTimeout(() => {
|
|
220
|
+
video.style.visibility = "hidden";
|
|
221
|
+
}, 300);
|
|
218
222
|
video.muted = true;
|
|
219
223
|
video.volume = 0;
|
|
220
224
|
contentVideoHidden = true;
|
|
@@ -224,6 +228,9 @@ function createImaController(video, options) {
|
|
|
224
228
|
function showContentVideo() {
|
|
225
229
|
if (contentVideoHidden) {
|
|
226
230
|
video.style.visibility = "visible";
|
|
231
|
+
video.style.transition = "opacity 0.3s ease-in-out";
|
|
232
|
+
video.offsetHeight;
|
|
233
|
+
video.style.opacity = "1";
|
|
227
234
|
video.muted = originalMutedState;
|
|
228
235
|
video.volume = originalVolume;
|
|
229
236
|
contentVideoHidden = false;
|
|
@@ -396,7 +403,9 @@ function createImaController(video, options) {
|
|
|
396
403
|
container.style.justifyContent = "center";
|
|
397
404
|
container.style.pointerEvents = "none";
|
|
398
405
|
container.style.zIndex = "10";
|
|
399
|
-
container.style.backgroundColor = "
|
|
406
|
+
container.style.backgroundColor = "transparent";
|
|
407
|
+
container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
|
|
408
|
+
container.style.opacity = "0";
|
|
400
409
|
(_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
401
410
|
adContainerEl = container;
|
|
402
411
|
}
|
|
@@ -506,7 +515,9 @@ function createImaController(video, options) {
|
|
|
506
515
|
container.style.justifyContent = "center";
|
|
507
516
|
container.style.pointerEvents = "none";
|
|
508
517
|
container.style.zIndex = "10";
|
|
509
|
-
container.style.backgroundColor = "
|
|
518
|
+
container.style.backgroundColor = "transparent";
|
|
519
|
+
container.style.transition = "opacity 0.3s ease-in-out, background-color 0.3s ease-in-out";
|
|
520
|
+
container.style.opacity = "0";
|
|
510
521
|
if (!video.parentElement) {
|
|
511
522
|
throw new Error("Video element has no parent for ad container");
|
|
512
523
|
}
|
|
@@ -570,13 +581,19 @@ function createImaController(video, options) {
|
|
|
570
581
|
console.error("[IMA] Ad error:", errorEvent.getError());
|
|
571
582
|
destroyAdsManager();
|
|
572
583
|
adPlaying = false;
|
|
573
|
-
showContentVideo();
|
|
574
584
|
setAdPlayingFlag(false);
|
|
575
585
|
if (adContainerEl) {
|
|
576
|
-
adContainerEl.style.
|
|
577
|
-
adContainerEl.style.
|
|
578
|
-
|
|
586
|
+
adContainerEl.style.opacity = "0";
|
|
587
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
588
|
+
setTimeout(() => {
|
|
589
|
+
if (adContainerEl) {
|
|
590
|
+
adContainerEl.style.pointerEvents = "none";
|
|
591
|
+
adContainerEl.style.display = "none";
|
|
592
|
+
console.log("[IMA] Ad container hidden after error");
|
|
593
|
+
}
|
|
594
|
+
}, 300);
|
|
579
595
|
}
|
|
596
|
+
showContentVideo();
|
|
580
597
|
if (adsLoadedReject) {
|
|
581
598
|
adsLoadedReject(new Error("Ad playback error"));
|
|
582
599
|
adsLoadedReject = void 0;
|
|
@@ -641,6 +658,9 @@ function createImaController(video, options) {
|
|
|
641
658
|
if (adContainerEl) {
|
|
642
659
|
adContainerEl.style.pointerEvents = "auto";
|
|
643
660
|
adContainerEl.style.display = "flex";
|
|
661
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
662
|
+
adContainerEl.offsetHeight;
|
|
663
|
+
adContainerEl.style.opacity = "1";
|
|
644
664
|
console.log("[IMA] Ad container now visible");
|
|
645
665
|
}
|
|
646
666
|
});
|
|
@@ -650,27 +670,31 @@ function createImaController(video, options) {
|
|
|
650
670
|
console.log("[IMA] Content resume requested");
|
|
651
671
|
adPlaying = false;
|
|
652
672
|
setAdPlayingFlag(false);
|
|
653
|
-
showContentVideo();
|
|
654
673
|
emit("content_resume");
|
|
655
|
-
setTimeout(() => {
|
|
656
|
-
const stillInPod = video.dataset.stormcloudAdPlaying === "true";
|
|
657
|
-
if (stillInPod) {
|
|
658
|
-
console.log(
|
|
659
|
-
"[IMA] Still in ad pod - keeping ad container visible"
|
|
660
|
-
);
|
|
661
|
-
if (adContainerEl) {
|
|
662
|
-
adContainerEl.style.display = "flex";
|
|
663
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
664
|
-
}
|
|
665
|
-
hideContentVideo();
|
|
666
|
-
}
|
|
667
|
-
}, 50);
|
|
668
674
|
}
|
|
669
675
|
);
|
|
670
676
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
671
|
-
console.log("[IMA] All ads completed -
|
|
677
|
+
console.log("[IMA] All ads completed - restoring content");
|
|
672
678
|
adPlaying = false;
|
|
673
679
|
setAdPlayingFlag(false);
|
|
680
|
+
if (adContainerEl) {
|
|
681
|
+
adContainerEl.style.opacity = "0";
|
|
682
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
683
|
+
setTimeout(() => {
|
|
684
|
+
if (adContainerEl) {
|
|
685
|
+
adContainerEl.style.pointerEvents = "none";
|
|
686
|
+
adContainerEl.style.display = "none";
|
|
687
|
+
console.log("[IMA] Ad container hidden");
|
|
688
|
+
}
|
|
689
|
+
}, 300);
|
|
690
|
+
}
|
|
691
|
+
showContentVideo();
|
|
692
|
+
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds) && video.paused) {
|
|
693
|
+
console.log("[IMA] Resuming content video playback");
|
|
694
|
+
video.play().catch((e) => {
|
|
695
|
+
console.warn("[IMA] Failed to resume content video:", e);
|
|
696
|
+
});
|
|
697
|
+
}
|
|
674
698
|
emit("all_ads_completed");
|
|
675
699
|
});
|
|
676
700
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -682,13 +706,21 @@ function createImaController(video, options) {
|
|
|
682
706
|
} catch (e) {
|
|
683
707
|
console.error("[IMA] Error setting up ads manager:", e);
|
|
684
708
|
adPlaying = false;
|
|
685
|
-
showContentVideo();
|
|
686
709
|
setAdPlayingFlag(false);
|
|
687
710
|
if (adContainerEl) {
|
|
688
|
-
adContainerEl.style.
|
|
689
|
-
adContainerEl.style.
|
|
690
|
-
|
|
711
|
+
adContainerEl.style.opacity = "0";
|
|
712
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
713
|
+
setTimeout(() => {
|
|
714
|
+
if (adContainerEl) {
|
|
715
|
+
adContainerEl.style.pointerEvents = "none";
|
|
716
|
+
adContainerEl.style.display = "none";
|
|
717
|
+
console.log(
|
|
718
|
+
"[IMA] Ad container hidden after setup error"
|
|
719
|
+
);
|
|
720
|
+
}
|
|
721
|
+
}, 300);
|
|
691
722
|
}
|
|
723
|
+
showContentVideo();
|
|
692
724
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
693
725
|
if (video.paused) {
|
|
694
726
|
console.log(
|
|
@@ -713,13 +745,19 @@ function createImaController(video, options) {
|
|
|
713
745
|
(adErrorEvent) => {
|
|
714
746
|
console.error("[IMA] Ads loader error:", adErrorEvent.getError());
|
|
715
747
|
adPlaying = false;
|
|
716
|
-
showContentVideo();
|
|
717
748
|
setAdPlayingFlag(false);
|
|
718
749
|
if (adContainerEl) {
|
|
719
|
-
adContainerEl.style.
|
|
720
|
-
adContainerEl.style.
|
|
721
|
-
|
|
750
|
+
adContainerEl.style.opacity = "0";
|
|
751
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
752
|
+
setTimeout(() => {
|
|
753
|
+
if (adContainerEl) {
|
|
754
|
+
adContainerEl.style.pointerEvents = "none";
|
|
755
|
+
adContainerEl.style.display = "none";
|
|
756
|
+
console.log("[IMA] Ad container hidden after loader error");
|
|
757
|
+
}
|
|
758
|
+
}, 300);
|
|
722
759
|
}
|
|
760
|
+
showContentVideo();
|
|
723
761
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
724
762
|
if (video.paused) {
|
|
725
763
|
console.log("[IMA] Resuming paused video after loader error");
|
|
@@ -825,12 +863,18 @@ function createImaController(video, options) {
|
|
|
825
863
|
console.log("[IMA] Stopping ad playback");
|
|
826
864
|
adPlaying = false;
|
|
827
865
|
setAdPlayingFlag(false);
|
|
828
|
-
showContentVideo();
|
|
829
866
|
if (adContainerEl) {
|
|
830
|
-
adContainerEl.style.
|
|
831
|
-
adContainerEl.style.
|
|
832
|
-
|
|
867
|
+
adContainerEl.style.opacity = "0";
|
|
868
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
869
|
+
setTimeout(() => {
|
|
870
|
+
if (adContainerEl) {
|
|
871
|
+
adContainerEl.style.pointerEvents = "none";
|
|
872
|
+
adContainerEl.style.display = "none";
|
|
873
|
+
console.log("[IMA] Ad container hidden after stop");
|
|
874
|
+
}
|
|
875
|
+
}, 300);
|
|
833
876
|
}
|
|
877
|
+
showContentVideo();
|
|
834
878
|
try {
|
|
835
879
|
(_a = adsManager == null ? void 0 : adsManager.stop) == null ? void 0 : _a.call(adsManager);
|
|
836
880
|
} catch {
|
|
@@ -841,23 +885,29 @@ function createImaController(video, options) {
|
|
|
841
885
|
var _a;
|
|
842
886
|
destroyAdsManager();
|
|
843
887
|
adPlaying = false;
|
|
844
|
-
showContentVideo();
|
|
845
888
|
setAdPlayingFlag(false);
|
|
846
889
|
if (adContainerEl) {
|
|
847
|
-
adContainerEl.style.
|
|
848
|
-
adContainerEl.style.
|
|
890
|
+
adContainerEl.style.opacity = "0";
|
|
891
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
892
|
+
setTimeout(() => {
|
|
893
|
+
if (adContainerEl) {
|
|
894
|
+
adContainerEl.style.pointerEvents = "none";
|
|
895
|
+
adContainerEl.style.display = "none";
|
|
896
|
+
if (adContainerEl.parentElement) {
|
|
897
|
+
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
898
|
+
}
|
|
899
|
+
adContainerEl = void 0;
|
|
900
|
+
adVideoElement = void 0;
|
|
901
|
+
}
|
|
902
|
+
}, 300);
|
|
849
903
|
}
|
|
904
|
+
showContentVideo();
|
|
850
905
|
try {
|
|
851
906
|
(_a = adsLoader == null ? void 0 : adsLoader.destroy) == null ? void 0 : _a.call(adsLoader);
|
|
852
907
|
} catch {
|
|
853
908
|
}
|
|
854
|
-
if (adContainerEl == null ? void 0 : adContainerEl.parentElement) {
|
|
855
|
-
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
856
|
-
}
|
|
857
|
-
adContainerEl = void 0;
|
|
858
909
|
adDisplayContainer = void 0;
|
|
859
910
|
adsLoader = void 0;
|
|
860
|
-
adVideoElement = void 0;
|
|
861
911
|
contentVideoHidden = false;
|
|
862
912
|
preloadedVast.clear();
|
|
863
913
|
preloadingVast.clear();
|
|
@@ -937,13 +987,22 @@ function createImaController(video, options) {
|
|
|
937
987
|
ensurePlaceholderContainer();
|
|
938
988
|
if (adContainerEl) {
|
|
939
989
|
adContainerEl.style.display = "flex";
|
|
990
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
991
|
+
adContainerEl.offsetHeight;
|
|
992
|
+
adContainerEl.style.opacity = "1";
|
|
940
993
|
adContainerEl.style.pointerEvents = "auto";
|
|
941
994
|
}
|
|
942
995
|
},
|
|
943
996
|
hidePlaceholder() {
|
|
944
997
|
if (adContainerEl) {
|
|
945
|
-
adContainerEl.style.
|
|
946
|
-
adContainerEl.style.
|
|
998
|
+
adContainerEl.style.opacity = "0";
|
|
999
|
+
adContainerEl.style.backgroundColor = "transparent";
|
|
1000
|
+
setTimeout(() => {
|
|
1001
|
+
if (adContainerEl) {
|
|
1002
|
+
adContainerEl.style.display = "none";
|
|
1003
|
+
adContainerEl.style.pointerEvents = "none";
|
|
1004
|
+
}
|
|
1005
|
+
}, 300);
|
|
947
1006
|
}
|
|
948
1007
|
}
|
|
949
1008
|
};
|