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