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
|
@@ -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
|
});
|
|
@@ -657,12 +677,18 @@ function createImaController(video, options) {
|
|
|
657
677
|
console.log("[IMA] All ads completed - restoring content");
|
|
658
678
|
adPlaying = false;
|
|
659
679
|
setAdPlayingFlag(false);
|
|
660
|
-
showContentVideo();
|
|
661
680
|
if (adContainerEl) {
|
|
662
|
-
adContainerEl.style.
|
|
663
|
-
adContainerEl.style.
|
|
664
|
-
|
|
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);
|
|
665
690
|
}
|
|
691
|
+
showContentVideo();
|
|
666
692
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds) && video.paused) {
|
|
667
693
|
console.log("[IMA] Resuming content video playback");
|
|
668
694
|
video.play().catch((e) => {
|
|
@@ -680,13 +706,21 @@ function createImaController(video, options) {
|
|
|
680
706
|
} catch (e) {
|
|
681
707
|
console.error("[IMA] Error setting up ads manager:", e);
|
|
682
708
|
adPlaying = false;
|
|
683
|
-
showContentVideo();
|
|
684
709
|
setAdPlayingFlag(false);
|
|
685
710
|
if (adContainerEl) {
|
|
686
|
-
adContainerEl.style.
|
|
687
|
-
adContainerEl.style.
|
|
688
|
-
|
|
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);
|
|
689
722
|
}
|
|
723
|
+
showContentVideo();
|
|
690
724
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
691
725
|
if (video.paused) {
|
|
692
726
|
console.log(
|
|
@@ -711,13 +745,19 @@ function createImaController(video, options) {
|
|
|
711
745
|
(adErrorEvent) => {
|
|
712
746
|
console.error("[IMA] Ads loader error:", adErrorEvent.getError());
|
|
713
747
|
adPlaying = false;
|
|
714
|
-
showContentVideo();
|
|
715
748
|
setAdPlayingFlag(false);
|
|
716
749
|
if (adContainerEl) {
|
|
717
|
-
adContainerEl.style.
|
|
718
|
-
adContainerEl.style.
|
|
719
|
-
|
|
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);
|
|
720
759
|
}
|
|
760
|
+
showContentVideo();
|
|
721
761
|
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
722
762
|
if (video.paused) {
|
|
723
763
|
console.log("[IMA] Resuming paused video after loader error");
|
|
@@ -823,12 +863,18 @@ function createImaController(video, options) {
|
|
|
823
863
|
console.log("[IMA] Stopping ad playback");
|
|
824
864
|
adPlaying = false;
|
|
825
865
|
setAdPlayingFlag(false);
|
|
826
|
-
showContentVideo();
|
|
827
866
|
if (adContainerEl) {
|
|
828
|
-
adContainerEl.style.
|
|
829
|
-
adContainerEl.style.
|
|
830
|
-
|
|
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);
|
|
831
876
|
}
|
|
877
|
+
showContentVideo();
|
|
832
878
|
try {
|
|
833
879
|
(_a = adsManager == null ? void 0 : adsManager.stop) == null ? void 0 : _a.call(adsManager);
|
|
834
880
|
} catch {
|
|
@@ -839,23 +885,29 @@ function createImaController(video, options) {
|
|
|
839
885
|
var _a;
|
|
840
886
|
destroyAdsManager();
|
|
841
887
|
adPlaying = false;
|
|
842
|
-
showContentVideo();
|
|
843
888
|
setAdPlayingFlag(false);
|
|
844
889
|
if (adContainerEl) {
|
|
845
|
-
adContainerEl.style.
|
|
846
|
-
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);
|
|
847
903
|
}
|
|
904
|
+
showContentVideo();
|
|
848
905
|
try {
|
|
849
906
|
(_a = adsLoader == null ? void 0 : adsLoader.destroy) == null ? void 0 : _a.call(adsLoader);
|
|
850
907
|
} catch {
|
|
851
908
|
}
|
|
852
|
-
if (adContainerEl == null ? void 0 : adContainerEl.parentElement) {
|
|
853
|
-
adContainerEl.parentElement.removeChild(adContainerEl);
|
|
854
|
-
}
|
|
855
|
-
adContainerEl = void 0;
|
|
856
909
|
adDisplayContainer = void 0;
|
|
857
910
|
adsLoader = void 0;
|
|
858
|
-
adVideoElement = void 0;
|
|
859
911
|
contentVideoHidden = false;
|
|
860
912
|
preloadedVast.clear();
|
|
861
913
|
preloadingVast.clear();
|
|
@@ -935,13 +987,22 @@ function createImaController(video, options) {
|
|
|
935
987
|
ensurePlaceholderContainer();
|
|
936
988
|
if (adContainerEl) {
|
|
937
989
|
adContainerEl.style.display = "flex";
|
|
990
|
+
adContainerEl.style.backgroundColor = "#000";
|
|
991
|
+
adContainerEl.offsetHeight;
|
|
992
|
+
adContainerEl.style.opacity = "1";
|
|
938
993
|
adContainerEl.style.pointerEvents = "auto";
|
|
939
994
|
}
|
|
940
995
|
},
|
|
941
996
|
hidePlaceholder() {
|
|
942
997
|
if (adContainerEl) {
|
|
943
|
-
adContainerEl.style.
|
|
944
|
-
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);
|
|
945
1006
|
}
|
|
946
1007
|
}
|
|
947
1008
|
};
|