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