stormcloud-video-player 0.6.6 → 0.6.7
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 +64 -18
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +65 -19
- package/lib/index.js.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +64 -18
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -6093,7 +6093,7 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
6093
6093
|
return StormcloudVideoPlayer;
|
|
6094
6094
|
}();
|
|
6095
6095
|
// src/ui/StormcloudVideoPlayer.tsx
|
|
6096
|
-
import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress
|
|
6096
|
+
import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress } from "react-icons/fa";
|
|
6097
6097
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6098
6098
|
var CRITICAL_PROPS = [
|
|
6099
6099
|
"src",
|
|
@@ -6103,6 +6103,7 @@ var CRITICAL_PROPS = [
|
|
|
6103
6103
|
"driftToleranceMs"
|
|
6104
6104
|
];
|
|
6105
6105
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
6106
|
+
var DEFAULT_PLAYER_ASPECT_RATIO = 16 / 9;
|
|
6106
6107
|
var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
6107
6108
|
var src = props.src, autoplay = props.autoplay, muted = props.muted, lowLatencyMode = props.lowLatencyMode, allowNativeHls = props.allowNativeHls, driftToleranceMs = props.driftToleranceMs, immediateManifestAds = props.immediateManifestAds, debugAdTiming = props.debugAdTiming, showCustomControls = props.showCustomControls, hideLoadingIndicator = props.hideLoadingIndicator, onVolumeToggle = props.onVolumeToggle, onFullscreenToggle = props.onFullscreenToggle, onControlClick = props.onControlClick, onReady = props.onReady, wrapperClassName = props.wrapperClassName, wrapperStyle = props.wrapperStyle, className = props.className, style = props.style, controls = props.controls, playsInline = props.playsInline, preload = props.preload, poster = props.poster, children = props.children, licenseKey = props.licenseKey, minSegmentsBeforePlay = props.minSegmentsBeforePlay, disableAds = props.disableAds, disableFiller = props.disableFiller, restVideoAttrs = _object_without_properties(props, [
|
|
6108
6109
|
"src",
|
|
@@ -6160,6 +6161,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6160
6161
|
var _React_useState15 = _sliced_to_array(React.useState(true), 2), controlsVisible = _React_useState15[0], setControlsVisible = _React_useState15[1];
|
|
6161
6162
|
var _React_useState16 = _sliced_to_array(React.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _React_useState16[0], setViewportWidth = _React_useState16[1];
|
|
6162
6163
|
var _React_useState17 = _sliced_to_array(React.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _React_useState17[0], setIsPortrait = _React_useState17[1];
|
|
6164
|
+
var _React_useState18 = _sliced_to_array(React.useState(DEFAULT_PLAYER_ASPECT_RATIO), 2), playerAspectRatio = _React_useState18[0], setPlayerAspectRatio = _React_useState18[1];
|
|
6163
6165
|
var getResponsiveScale = function getResponsiveScale() {
|
|
6164
6166
|
if (viewportWidth < 480) return 0.7;
|
|
6165
6167
|
if (viewportWidth < 768) return 0.8;
|
|
@@ -6401,6 +6403,13 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6401
6403
|
}, []);
|
|
6402
6404
|
useEffect(function() {
|
|
6403
6405
|
if (!videoRef.current) return;
|
|
6406
|
+
var handleLoadedMetadata = function handleLoadedMetadata() {
|
|
6407
|
+
var video2 = videoRef.current;
|
|
6408
|
+
if (!video2) return;
|
|
6409
|
+
if (video2.videoWidth > 0 && video2.videoHeight > 0) {
|
|
6410
|
+
setPlayerAspectRatio(video2.videoWidth / video2.videoHeight);
|
|
6411
|
+
}
|
|
6412
|
+
};
|
|
6404
6413
|
var handleCanPlay = function handleCanPlay() {
|
|
6405
6414
|
setIsLoading(false);
|
|
6406
6415
|
if (bufferingTimeoutRef.current) {
|
|
@@ -6447,6 +6456,8 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6447
6456
|
setShowCenterPlay(true);
|
|
6448
6457
|
};
|
|
6449
6458
|
var video = videoRef.current;
|
|
6459
|
+
handleLoadedMetadata();
|
|
6460
|
+
video.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
6450
6461
|
video.addEventListener("canplay", handleCanPlay);
|
|
6451
6462
|
video.addEventListener("canplaythrough", handleCanPlayThrough);
|
|
6452
6463
|
video.addEventListener("waiting", handleWaiting);
|
|
@@ -6461,6 +6472,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6461
6472
|
clearTimeout(bufferingTimeoutRef.current);
|
|
6462
6473
|
bufferingTimeoutRef.current = null;
|
|
6463
6474
|
}
|
|
6475
|
+
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
6464
6476
|
video.removeEventListener("canplay", handleCanPlay);
|
|
6465
6477
|
video.removeEventListener("canplaythrough", handleCanPlayThrough);
|
|
6466
6478
|
video.removeEventListener("waiting", handleWaiting);
|
|
@@ -6471,6 +6483,11 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6471
6483
|
}, [
|
|
6472
6484
|
debugAdTiming
|
|
6473
6485
|
]);
|
|
6486
|
+
useEffect(function() {
|
|
6487
|
+
setPlayerAspectRatio(DEFAULT_PLAYER_ASPECT_RATIO);
|
|
6488
|
+
}, [
|
|
6489
|
+
src
|
|
6490
|
+
]);
|
|
6474
6491
|
useEffect(function() {
|
|
6475
6492
|
return function() {
|
|
6476
6493
|
if (controlsTimerRef.current) {
|
|
@@ -6496,7 +6513,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6496
6513
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
6497
6514
|
children: [
|
|
6498
6515
|
/* @__PURE__ */ jsx("style", {
|
|
6499
|
-
children: "\n @keyframes sc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n @keyframes sc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n @keyframes sc-fade-in {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .sc-wrapper:fullscreen,\n .sc-wrapper:has(*:fullscreen) {\n border-radius: 0 !important;\n box-shadow: none !important;\n width: 100vw !important;\n height: 100vh !important;\n max-width: 100vw !important;\n max-height: 100vh !important;\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n z-index: 999999 !important;\n background: #000 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }\n .sc-ctrl-btn {\n background: none;\n border: none;\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n padding: 8px;\n transition: background 0.15s ease, opacity 0.15s ease;\n opacity: 0.9;\n }\n .sc-ctrl-btn:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n }\n .sc-ctrl-btn:active {\n opacity: 0.7;\n }\n .sc-controls-bar {\n transition: opacity 0.35s ease, transform 0.35s ease;\n }\n .sc-progress-track:hover .sc-progress-thumb {\n transform: translate(-50%, -50%) scale(1) !important;\n }\n .sc-loading-hidden .sc-loading-indicator {\n display: none !important;\n }\n "
|
|
6516
|
+
children: "\n @keyframes sc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n @keyframes sc-loading-glow {\n 0%, 100% { opacity: 0.85; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.05); }\n }\n @keyframes sc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n @keyframes sc-fade-in {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .sc-wrapper:fullscreen,\n .sc-wrapper:has(*:fullscreen) {\n border-radius: 0 !important;\n box-shadow: none !important;\n width: 100vw !important;\n height: 100vh !important;\n max-width: 100vw !important;\n max-height: 100vh !important;\n position: fixed !important;\n top: 0 !important;\n left: 0 !important;\n z-index: 999999 !important;\n background: #000 !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n }\n .sc-ctrl-btn {\n background: none;\n border: none;\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n padding: 8px;\n transition: background 0.15s ease, opacity 0.15s ease;\n opacity: 0.9;\n }\n .sc-ctrl-btn:hover {\n opacity: 1;\n background: rgba(255, 255, 255, 0.1);\n }\n .sc-ctrl-btn:active {\n opacity: 0.7;\n }\n .sc-controls-bar {\n transition: opacity 0.35s ease, transform 0.35s ease;\n }\n .sc-progress-track:hover .sc-progress-thumb {\n transform: translate(-50%, -50%) scale(1) !important;\n }\n .sc-loading-hidden .sc-loading-indicator {\n display: none !important;\n }\n "
|
|
6500
6517
|
}),
|
|
6501
6518
|
/* @__PURE__ */ jsxs("div", {
|
|
6502
6519
|
ref: wrapperRef,
|
|
@@ -6514,6 +6531,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6514
6531
|
width: isFullscreen ? "100vw" : "100%",
|
|
6515
6532
|
height: isFullscreen ? "100vh" : "auto",
|
|
6516
6533
|
minHeight: isFullscreen ? "100vh" : "auto",
|
|
6534
|
+
aspectRatio: isFullscreen ? void 0 : playerAspectRatio,
|
|
6517
6535
|
maxWidth: isFullscreen ? "100vw" : "100%",
|
|
6518
6536
|
maxHeight: isFullscreen ? "100vh" : "none",
|
|
6519
6537
|
zIndex: isFullscreen ? 999999 : void 0,
|
|
@@ -6528,7 +6546,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6528
6546
|
style: _object_spread({
|
|
6529
6547
|
display: "block",
|
|
6530
6548
|
width: "100%",
|
|
6531
|
-
height:
|
|
6549
|
+
height: "100%",
|
|
6532
6550
|
maxWidth: "100%",
|
|
6533
6551
|
maxHeight: isFullscreen ? "100%" : "none",
|
|
6534
6552
|
objectFit: isFullscreen ? "cover" : "contain",
|
|
@@ -6542,18 +6560,44 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6542
6560
|
}, restVideoAttrs), {
|
|
6543
6561
|
children: children
|
|
6544
6562
|
})),
|
|
6545
|
-
(isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */
|
|
6563
|
+
(isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ jsxs("div", {
|
|
6546
6564
|
className: "sc-loading-indicator",
|
|
6547
|
-
size: 40,
|
|
6548
|
-
color: "rgba(255, 255, 255, 0.85)",
|
|
6549
6565
|
style: {
|
|
6550
6566
|
position: "absolute",
|
|
6551
|
-
top: "
|
|
6552
|
-
left: "
|
|
6567
|
+
top: "50%",
|
|
6568
|
+
left: "50%",
|
|
6569
|
+
transform: "translate(-50%, -50%)",
|
|
6553
6570
|
zIndex: 20,
|
|
6554
|
-
|
|
6555
|
-
|
|
6556
|
-
|
|
6571
|
+
width: "".concat(Math.max(34, 38 * responsiveScale), "px"),
|
|
6572
|
+
height: "".concat(Math.max(34, 38 * responsiveScale), "px"),
|
|
6573
|
+
display: "flex",
|
|
6574
|
+
alignItems: "center",
|
|
6575
|
+
justifyContent: "center",
|
|
6576
|
+
animation: "sc-loading-glow 1.4s ease-in-out infinite",
|
|
6577
|
+
filter: "drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))"
|
|
6578
|
+
},
|
|
6579
|
+
children: [
|
|
6580
|
+
/* @__PURE__ */ jsx("div", {
|
|
6581
|
+
style: {
|
|
6582
|
+
position: "absolute",
|
|
6583
|
+
inset: 0,
|
|
6584
|
+
borderRadius: "50%",
|
|
6585
|
+
border: "3px solid rgba(255, 255, 255, 0.25)",
|
|
6586
|
+
borderTopColor: "#ff0000",
|
|
6587
|
+
borderRightColor: "rgba(255, 255, 255, 0.85)",
|
|
6588
|
+
animation: "sc-spin 0.8s linear infinite"
|
|
6589
|
+
}
|
|
6590
|
+
}),
|
|
6591
|
+
/* @__PURE__ */ jsx("div", {
|
|
6592
|
+
style: {
|
|
6593
|
+
width: "7px",
|
|
6594
|
+
height: "7px",
|
|
6595
|
+
borderRadius: "50%",
|
|
6596
|
+
background: "#ff0000",
|
|
6597
|
+
boxShadow: "0 0 10px rgba(255, 0, 0, 0.65)"
|
|
6598
|
+
}
|
|
6599
|
+
})
|
|
6600
|
+
]
|
|
6557
6601
|
}),
|
|
6558
6602
|
showLicenseWarning && /* @__PURE__ */ jsxs("div", {
|
|
6559
6603
|
style: {
|
|
@@ -6789,7 +6833,8 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6789
6833
|
/* @__PURE__ */ jsxs("div", {
|
|
6790
6834
|
style: {
|
|
6791
6835
|
display: "flex",
|
|
6792
|
-
alignItems: "center"
|
|
6836
|
+
alignItems: "center",
|
|
6837
|
+
paddingRight: "".concat(6 * responsiveScale, "px")
|
|
6793
6838
|
},
|
|
6794
6839
|
onMouseEnter: function onMouseEnter() {
|
|
6795
6840
|
return setShowVolumeSlider(true);
|
|
@@ -6820,13 +6865,13 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6820
6865
|
}),
|
|
6821
6866
|
/* @__PURE__ */ jsx("div", {
|
|
6822
6867
|
style: {
|
|
6823
|
-
width: showVolumeSlider ? "".concat(
|
|
6868
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
6824
6869
|
overflow: "hidden",
|
|
6825
6870
|
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
6826
6871
|
display: "flex",
|
|
6827
6872
|
alignItems: "center",
|
|
6828
|
-
paddingLeft: showVolumeSlider ? "
|
|
6829
|
-
paddingRight: showVolumeSlider ? "
|
|
6873
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
6874
|
+
paddingRight: showVolumeSlider ? "".concat(8 * responsiveScale, "px") : "0"
|
|
6830
6875
|
},
|
|
6831
6876
|
children: /* @__PURE__ */ jsxs("div", {
|
|
6832
6877
|
style: {
|
|
@@ -7073,7 +7118,8 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7073
7118
|
alignItems: "center",
|
|
7074
7119
|
background: "rgba(0, 0, 0, 0.6)",
|
|
7075
7120
|
borderRadius: "".concat(18 * responsiveScale, "px"),
|
|
7076
|
-
padding: "2px"
|
|
7121
|
+
padding: "2px",
|
|
7122
|
+
paddingRight: "".concat(8 * responsiveScale, "px")
|
|
7077
7123
|
},
|
|
7078
7124
|
onMouseEnter: function onMouseEnter() {
|
|
7079
7125
|
return setShowVolumeSlider(true);
|
|
@@ -7102,13 +7148,13 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7102
7148
|
}),
|
|
7103
7149
|
/* @__PURE__ */ jsx("div", {
|
|
7104
7150
|
style: {
|
|
7105
|
-
width: showVolumeSlider ? "".concat(
|
|
7151
|
+
width: showVolumeSlider ? "".concat(68 * responsiveScale, "px") : "0px",
|
|
7106
7152
|
overflow: "hidden",
|
|
7107
7153
|
transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
7108
7154
|
display: "flex",
|
|
7109
7155
|
alignItems: "center",
|
|
7110
|
-
paddingLeft: showVolumeSlider ? "
|
|
7111
|
-
paddingRight: showVolumeSlider ? "
|
|
7156
|
+
paddingLeft: showVolumeSlider ? "".concat(3 * responsiveScale, "px") : "0",
|
|
7157
|
+
paddingRight: showVolumeSlider ? "".concat(10 * responsiveScale, "px") : "0"
|
|
7112
7158
|
},
|
|
7113
7159
|
children: /* @__PURE__ */ jsxs("div", {
|
|
7114
7160
|
style: {
|