stormcloud-video-player 0.6.6 → 0.7.0
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 +544 -118
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +64 -1
- package/lib/index.d.ts +64 -1
- package/lib/index.js +510 -100
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +40 -0
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +4 -0
- package/lib/players/HlsPlayer.cjs +40 -0
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +40 -0
- package/lib/players/index.cjs.map +1 -1
- package/lib/ui/OverlayRenderer.cjs +392 -0
- package/lib/ui/OverlayRenderer.cjs.map +1 -0
- package/lib/ui/OverlayRenderer.d.cts +15 -0
- package/lib/ui/StormcloudVideoPlayer.cjs +504 -94
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.d.cts +1 -0
- package/lib/utils/overlays.cjs +286 -0
- package/lib/utils/overlays.cjs.map +1 -0
- package/lib/utils/overlays.d.cts +59 -0
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -367,7 +367,7 @@ function _ts_values(o) {
|
|
|
367
367
|
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
368
368
|
}
|
|
369
369
|
// src/ui/StormcloudVideoPlayer.tsx
|
|
370
|
-
import
|
|
370
|
+
import React2, { useEffect as useEffect2, useRef as useRef2, useMemo, useCallback as useCallback2 } from "react";
|
|
371
371
|
// src/player/StormcloudVideoPlayer.ts
|
|
372
372
|
import Hls2 from "hls.js";
|
|
373
373
|
// src/sdk/vastParser.ts
|
|
@@ -6032,6 +6032,46 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
6032
6032
|
return this.isLiveStream;
|
|
6033
6033
|
}
|
|
6034
6034
|
},
|
|
6035
|
+
{
|
|
6036
|
+
key: "getMinHlsResolution",
|
|
6037
|
+
value: function getMinHlsResolution() {
|
|
6038
|
+
var _this_hls;
|
|
6039
|
+
var levels = (_this_hls = this.hls) === null || _this_hls === void 0 ? void 0 : _this_hls.levels;
|
|
6040
|
+
if (!levels || levels.length === 0) return null;
|
|
6041
|
+
var min = null;
|
|
6042
|
+
var minPixels = Infinity;
|
|
6043
|
+
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
|
|
6044
|
+
try {
|
|
6045
|
+
for(var _iterator = levels[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
|
|
6046
|
+
var level = _step.value;
|
|
6047
|
+
if (level.width && level.height) {
|
|
6048
|
+
var pixels = level.width * level.height;
|
|
6049
|
+
if (pixels < minPixels) {
|
|
6050
|
+
minPixels = pixels;
|
|
6051
|
+
min = {
|
|
6052
|
+
width: level.width,
|
|
6053
|
+
height: level.height
|
|
6054
|
+
};
|
|
6055
|
+
}
|
|
6056
|
+
}
|
|
6057
|
+
}
|
|
6058
|
+
} catch (err) {
|
|
6059
|
+
_didIteratorError = true;
|
|
6060
|
+
_iteratorError = err;
|
|
6061
|
+
} finally{
|
|
6062
|
+
try {
|
|
6063
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) {
|
|
6064
|
+
_iterator.return();
|
|
6065
|
+
}
|
|
6066
|
+
} finally{
|
|
6067
|
+
if (_didIteratorError) {
|
|
6068
|
+
throw _iteratorError;
|
|
6069
|
+
}
|
|
6070
|
+
}
|
|
6071
|
+
}
|
|
6072
|
+
return min;
|
|
6073
|
+
}
|
|
6074
|
+
},
|
|
6035
6075
|
{
|
|
6036
6076
|
key: "videoElement",
|
|
6037
6077
|
get: function get() {
|
|
@@ -6094,7 +6134,322 @@ var StormcloudVideoPlayer = /*#__PURE__*/ function() {
|
|
|
6094
6134
|
}();
|
|
6095
6135
|
// src/ui/StormcloudVideoPlayer.tsx
|
|
6096
6136
|
import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaVolumeDown, FaExpand, FaCompress, FaSpinner } from "react-icons/fa";
|
|
6137
|
+
// src/ui/OverlayRenderer.tsx
|
|
6138
|
+
import { useEffect, useRef, useState, useCallback } from "react";
|
|
6139
|
+
// src/utils/overlays.ts
|
|
6140
|
+
var OVERLAY_API_BASE = "https://adstorm.co/api-adstorm-dev";
|
|
6141
|
+
function timeStringToSeconds(timeStr) {
|
|
6142
|
+
if (!timeStr) return 0;
|
|
6143
|
+
var parts = timeStr.split(":");
|
|
6144
|
+
if (parts.length >= 3) {
|
|
6145
|
+
var _parts_, _parts_1, _parts_2;
|
|
6146
|
+
var hours = parseInt((_parts_ = parts[0]) !== null && _parts_ !== void 0 ? _parts_ : "0", 10) || 0;
|
|
6147
|
+
var minutes = parseInt((_parts_1 = parts[1]) !== null && _parts_1 !== void 0 ? _parts_1 : "0", 10) || 0;
|
|
6148
|
+
var secStr = (_parts_2 = parts[2]) !== null && _parts_2 !== void 0 ? _parts_2 : "0";
|
|
6149
|
+
var dotIdx = secStr.indexOf(".");
|
|
6150
|
+
var seconds = parseInt(dotIdx >= 0 ? secStr.substring(0, dotIdx) : secStr, 10) || 0;
|
|
6151
|
+
var msFrag = dotIdx >= 0 ? secStr.substring(dotIdx + 1) : "";
|
|
6152
|
+
var ms = msFrag ? parseInt(msFrag.padEnd(3, "0").substring(0, 3), 10) || 0 : 0;
|
|
6153
|
+
return hours * 3600 + minutes * 60 + seconds + ms / 1e3;
|
|
6154
|
+
}
|
|
6155
|
+
if (parts.length === 2) {
|
|
6156
|
+
var _parts_3, _parts_4;
|
|
6157
|
+
var minutes1 = parseInt((_parts_3 = parts[0]) !== null && _parts_3 !== void 0 ? _parts_3 : "0", 10) || 0;
|
|
6158
|
+
var secStr1 = (_parts_4 = parts[1]) !== null && _parts_4 !== void 0 ? _parts_4 : "0";
|
|
6159
|
+
var dotIdx1 = secStr1.indexOf(".");
|
|
6160
|
+
var seconds1 = parseInt(dotIdx1 >= 0 ? secStr1.substring(0, dotIdx1) : secStr1, 10) || 0;
|
|
6161
|
+
var msFrag1 = dotIdx1 >= 0 ? secStr1.substring(dotIdx1 + 1) : "";
|
|
6162
|
+
var ms1 = msFrag1 ? parseInt(msFrag1.padEnd(3, "0").substring(0, 3), 10) || 0 : 0;
|
|
6163
|
+
return minutes1 * 60 + seconds1 + ms1 / 1e3;
|
|
6164
|
+
}
|
|
6165
|
+
var num = parseFloat(timeStr);
|
|
6166
|
+
return isFinite(num) ? Math.max(0, num) : 0;
|
|
6167
|
+
}
|
|
6168
|
+
function isOverlayActive(overlay, currentTime) {
|
|
6169
|
+
if (!overlay.visible) return false;
|
|
6170
|
+
var startSec = timeStringToSeconds(overlay.start_time);
|
|
6171
|
+
var durationSec = timeStringToSeconds(overlay.duration);
|
|
6172
|
+
if (durationSec <= 0) return false;
|
|
6173
|
+
return currentTime >= startSec && currentTime < startSec + durationSec;
|
|
6174
|
+
}
|
|
6175
|
+
function fetchProjectOverlays(_0) {
|
|
6176
|
+
return _async_to_generator(function(projectId) {
|
|
6177
|
+
var apiBaseUrl, response, data;
|
|
6178
|
+
var _arguments = arguments;
|
|
6179
|
+
return _ts_generator(this, function(_state) {
|
|
6180
|
+
switch(_state.label){
|
|
6181
|
+
case 0:
|
|
6182
|
+
apiBaseUrl = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : OVERLAY_API_BASE;
|
|
6183
|
+
return [
|
|
6184
|
+
4,
|
|
6185
|
+
fetch("".concat(apiBaseUrl, "/adstorm/swirl/projects/").concat(projectId, "/overlays"))
|
|
6186
|
+
];
|
|
6187
|
+
case 1:
|
|
6188
|
+
response = _state.sent();
|
|
6189
|
+
if (!response.ok) {
|
|
6190
|
+
throw new Error("Failed to fetch overlays: ".concat(response.status, " ").concat(response.statusText));
|
|
6191
|
+
}
|
|
6192
|
+
return [
|
|
6193
|
+
4,
|
|
6194
|
+
response.json()
|
|
6195
|
+
];
|
|
6196
|
+
case 2:
|
|
6197
|
+
data = _state.sent();
|
|
6198
|
+
return [
|
|
6199
|
+
2,
|
|
6200
|
+
Array.isArray(data) ? data : []
|
|
6201
|
+
];
|
|
6202
|
+
}
|
|
6203
|
+
});
|
|
6204
|
+
}).apply(this, arguments);
|
|
6205
|
+
}
|
|
6206
|
+
function resolveImageUrl(imageUrl) {
|
|
6207
|
+
var apiBaseUrl = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : OVERLAY_API_BASE;
|
|
6208
|
+
if (!imageUrl) return "";
|
|
6209
|
+
if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
|
|
6210
|
+
return imageUrl;
|
|
6211
|
+
}
|
|
6212
|
+
if (imageUrl.startsWith("/")) {
|
|
6213
|
+
try {
|
|
6214
|
+
var url = new URL(apiBaseUrl);
|
|
6215
|
+
return "".concat(url.origin).concat(imageUrl);
|
|
6216
|
+
} catch (unused) {
|
|
6217
|
+
return imageUrl;
|
|
6218
|
+
}
|
|
6219
|
+
}
|
|
6220
|
+
return "".concat(apiBaseUrl, "/").concat(imageUrl);
|
|
6221
|
+
}
|
|
6222
|
+
// src/ui/OverlayRenderer.tsx
|
|
6097
6223
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6224
|
+
function computeVideoDimensions(video) {
|
|
6225
|
+
var nativeWidth = video.videoWidth;
|
|
6226
|
+
var nativeHeight = video.videoHeight;
|
|
6227
|
+
if (!nativeWidth || !nativeHeight) return null;
|
|
6228
|
+
var displayWidth = video.offsetWidth;
|
|
6229
|
+
var displayHeight = video.offsetHeight;
|
|
6230
|
+
if (!displayWidth || !displayHeight) return null;
|
|
6231
|
+
var videoAspect = nativeWidth / nativeHeight;
|
|
6232
|
+
var displayAspect = displayWidth / displayHeight;
|
|
6233
|
+
var renderWidth;
|
|
6234
|
+
var renderHeight;
|
|
6235
|
+
var offsetX;
|
|
6236
|
+
var offsetY;
|
|
6237
|
+
if (videoAspect > displayAspect) {
|
|
6238
|
+
renderWidth = displayWidth;
|
|
6239
|
+
renderHeight = displayWidth / videoAspect;
|
|
6240
|
+
offsetX = 0;
|
|
6241
|
+
offsetY = (displayHeight - renderHeight) / 2;
|
|
6242
|
+
} else {
|
|
6243
|
+
renderHeight = displayHeight;
|
|
6244
|
+
renderWidth = displayHeight * videoAspect;
|
|
6245
|
+
offsetX = (displayWidth - renderWidth) / 2;
|
|
6246
|
+
offsetY = 0;
|
|
6247
|
+
}
|
|
6248
|
+
return {
|
|
6249
|
+
nativeWidth: nativeWidth,
|
|
6250
|
+
nativeHeight: nativeHeight,
|
|
6251
|
+
displayWidth: renderWidth,
|
|
6252
|
+
displayHeight: renderHeight,
|
|
6253
|
+
offsetX: offsetX,
|
|
6254
|
+
offsetY: offsetY,
|
|
6255
|
+
scaleX: renderWidth / nativeWidth,
|
|
6256
|
+
scaleY: renderHeight / nativeHeight
|
|
6257
|
+
};
|
|
6258
|
+
}
|
|
6259
|
+
function ImageOverlay(param) {
|
|
6260
|
+
var overlay = param.overlay;
|
|
6261
|
+
var src = resolveImageUrl(overlay.image_url || "");
|
|
6262
|
+
if (!src) return null;
|
|
6263
|
+
return /* @__PURE__ */ jsx("img", {
|
|
6264
|
+
src: src,
|
|
6265
|
+
alt: overlay.name,
|
|
6266
|
+
draggable: false,
|
|
6267
|
+
style: {
|
|
6268
|
+
width: "100%",
|
|
6269
|
+
height: "100%",
|
|
6270
|
+
objectFit: "contain",
|
|
6271
|
+
display: "block",
|
|
6272
|
+
pointerEvents: "none",
|
|
6273
|
+
userSelect: "none"
|
|
6274
|
+
}
|
|
6275
|
+
});
|
|
6276
|
+
}
|
|
6277
|
+
function TextOverlay(param) {
|
|
6278
|
+
var overlay = param.overlay;
|
|
6279
|
+
var text = overlay.content || "";
|
|
6280
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6281
|
+
style: {
|
|
6282
|
+
width: "100%",
|
|
6283
|
+
height: "100%",
|
|
6284
|
+
display: "flex",
|
|
6285
|
+
alignItems: "center",
|
|
6286
|
+
justifyContent: "center",
|
|
6287
|
+
color: "#ffffff",
|
|
6288
|
+
fontSize: "clamp(10px, 1.4vw, 20px)",
|
|
6289
|
+
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
6290
|
+
fontWeight: 600,
|
|
6291
|
+
textAlign: "center",
|
|
6292
|
+
padding: "4px 8px",
|
|
6293
|
+
boxSizing: "border-box",
|
|
6294
|
+
wordBreak: "break-word",
|
|
6295
|
+
textShadow: "0 1px 4px rgba(0,0,0,0.7)",
|
|
6296
|
+
pointerEvents: "none",
|
|
6297
|
+
userSelect: "none",
|
|
6298
|
+
lineHeight: 1.3
|
|
6299
|
+
},
|
|
6300
|
+
children: text
|
|
6301
|
+
});
|
|
6302
|
+
}
|
|
6303
|
+
function ScrollerOverlay(param) {
|
|
6304
|
+
var overlay = param.overlay;
|
|
6305
|
+
var _ref, _ref1, _ref2, _ref3, _ref4;
|
|
6306
|
+
var cfg = overlay.scroller_config;
|
|
6307
|
+
var text = (cfg === null || cfg === void 0 ? void 0 : cfg.use_custom_text) && cfg.custom_text ? cfg.custom_text : overlay.content || (cfg === null || cfg === void 0 ? void 0 : cfg.custom_text) || "";
|
|
6308
|
+
var scrollSpeed = (_ref = cfg === null || cfg === void 0 ? void 0 : cfg.scroll_speed) !== null && _ref !== void 0 ? _ref : 50;
|
|
6309
|
+
var direction = (_ref1 = cfg === null || cfg === void 0 ? void 0 : cfg.direction) !== null && _ref1 !== void 0 ? _ref1 : "left";
|
|
6310
|
+
var fontSize = (cfg === null || cfg === void 0 ? void 0 : cfg.font_size) ? "".concat(cfg.font_size, "px") : "clamp(10px, 1.2vw, 18px)";
|
|
6311
|
+
var fontFamily = (cfg === null || cfg === void 0 ? void 0 : cfg.font_family) || "Roboto, 'Segoe UI', Arial, sans-serif";
|
|
6312
|
+
var fontWeight = (cfg === null || cfg === void 0 ? void 0 : cfg.font_weight) || "600";
|
|
6313
|
+
var textColor = (cfg === null || cfg === void 0 ? void 0 : cfg.text_color) || "#ffffff";
|
|
6314
|
+
var bgColor = (cfg === null || cfg === void 0 ? void 0 : cfg.background_color) || "transparent";
|
|
6315
|
+
var bgOpacity = (cfg === null || cfg === void 0 ? void 0 : cfg.background_opacity) !== void 0 ? cfg.background_opacity / 100 : 0;
|
|
6316
|
+
var borderColor = (cfg === null || cfg === void 0 ? void 0 : cfg.border_color) || "transparent";
|
|
6317
|
+
var borderWidth = (_ref2 = cfg === null || cfg === void 0 ? void 0 : cfg.border_width) !== null && _ref2 !== void 0 ? _ref2 : 0;
|
|
6318
|
+
var borderRadius = (_ref3 = cfg === null || cfg === void 0 ? void 0 : cfg.border_radius) !== null && _ref3 !== void 0 ? _ref3 : 0;
|
|
6319
|
+
var padding = (_ref4 = cfg === null || cfg === void 0 ? void 0 : cfg.padding) !== null && _ref4 !== void 0 ? _ref4 : 4;
|
|
6320
|
+
var isVertical = direction === "up" || direction === "down";
|
|
6321
|
+
var isReverse = direction === "right" || direction === "down";
|
|
6322
|
+
var durationSec = Math.max(3, 120 - scrollSpeed);
|
|
6323
|
+
var animId = "sc-scroller-".concat(overlay.id);
|
|
6324
|
+
var keyframes = isVertical ? "@keyframes ".concat(animId, " {\n 0% { transform: translateY(").concat(isReverse ? "-100%" : "100%", "); }\n 100% { transform: translateY(").concat(isReverse ? "100%" : "-100%", "); }\n }") : "@keyframes ".concat(animId, " {\n 0% { transform: translateX(").concat(isReverse ? "-100%" : "100%", "); }\n 100% { transform: translateX(").concat(isReverse ? "100%" : "-100%", "); }\n }");
|
|
6325
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
6326
|
+
children: [
|
|
6327
|
+
/* @__PURE__ */ jsx("style", {
|
|
6328
|
+
children: keyframes
|
|
6329
|
+
}),
|
|
6330
|
+
/* @__PURE__ */ jsx("div", {
|
|
6331
|
+
style: {
|
|
6332
|
+
width: "100%",
|
|
6333
|
+
height: "100%",
|
|
6334
|
+
overflow: "hidden",
|
|
6335
|
+
display: "flex",
|
|
6336
|
+
alignItems: "center",
|
|
6337
|
+
backgroundColor: bgOpacity > 0 ? "rgba(".concat(hexToRgb(bgColor), ", ").concat(bgOpacity, ")") : void 0,
|
|
6338
|
+
border: borderWidth > 0 ? "".concat(borderWidth, "px solid ").concat(borderColor) : void 0,
|
|
6339
|
+
borderRadius: borderRadius > 0 ? "".concat(borderRadius, "px") : void 0,
|
|
6340
|
+
padding: "".concat(padding, "px"),
|
|
6341
|
+
boxSizing: "border-box",
|
|
6342
|
+
pointerEvents: "none"
|
|
6343
|
+
},
|
|
6344
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
6345
|
+
style: {
|
|
6346
|
+
whiteSpace: "nowrap",
|
|
6347
|
+
fontSize: fontSize,
|
|
6348
|
+
fontFamily: fontFamily,
|
|
6349
|
+
fontWeight: fontWeight,
|
|
6350
|
+
color: textColor,
|
|
6351
|
+
animation: "".concat(animId, " ").concat(durationSec, "s linear infinite"),
|
|
6352
|
+
textShadow: "0 1px 4px rgba(0,0,0,0.5)",
|
|
6353
|
+
userSelect: "none"
|
|
6354
|
+
},
|
|
6355
|
+
children: text
|
|
6356
|
+
})
|
|
6357
|
+
})
|
|
6358
|
+
]
|
|
6359
|
+
});
|
|
6360
|
+
}
|
|
6361
|
+
function hexToRgb(hex) {
|
|
6362
|
+
if (!hex || !hex.startsWith("#")) return "0,0,0";
|
|
6363
|
+
var clean = hex.slice(1);
|
|
6364
|
+
var num = parseInt(clean.length === 3 ? clean.replace(/./g, "$&$&") : clean, 16);
|
|
6365
|
+
return "".concat(num >> 16 & 255, ",").concat(num >> 8 & 255, ",").concat(num & 255);
|
|
6366
|
+
}
|
|
6367
|
+
var OverlayRenderer = function OverlayRenderer(param) {
|
|
6368
|
+
var overlays = param.overlays, currentTime = param.currentTime, videoRef = param.videoRef, coordinateSpace = param.coordinateSpace;
|
|
6369
|
+
var _useState = _sliced_to_array(useState(null), 2), dims = _useState[0], setDims = _useState[1];
|
|
6370
|
+
var rafRef = useRef(null);
|
|
6371
|
+
var updateDims = useCallback(function() {
|
|
6372
|
+
var video = videoRef.current;
|
|
6373
|
+
if (video) {
|
|
6374
|
+
var computed = computeVideoDimensions(video);
|
|
6375
|
+
setDims(function(prev) {
|
|
6376
|
+
if (!computed || prev && prev.nativeWidth === computed.nativeWidth && prev.nativeHeight === computed.nativeHeight && prev.displayWidth === computed.displayWidth && prev.displayHeight === computed.displayHeight && prev.offsetX === computed.offsetX && prev.offsetY === computed.offsetY) {
|
|
6377
|
+
return prev;
|
|
6378
|
+
}
|
|
6379
|
+
return computed;
|
|
6380
|
+
});
|
|
6381
|
+
}
|
|
6382
|
+
}, [
|
|
6383
|
+
videoRef
|
|
6384
|
+
]);
|
|
6385
|
+
useEffect(function() {
|
|
6386
|
+
updateDims();
|
|
6387
|
+
var interval = setInterval(updateDims, 500);
|
|
6388
|
+
var handleResize = function handleResize() {
|
|
6389
|
+
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
|
6390
|
+
rafRef.current = requestAnimationFrame(updateDims);
|
|
6391
|
+
};
|
|
6392
|
+
window.addEventListener("resize", handleResize);
|
|
6393
|
+
return function() {
|
|
6394
|
+
clearInterval(interval);
|
|
6395
|
+
window.removeEventListener("resize", handleResize);
|
|
6396
|
+
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
|
6397
|
+
};
|
|
6398
|
+
}, [
|
|
6399
|
+
updateDims
|
|
6400
|
+
]);
|
|
6401
|
+
var activeOverlays = overlays.filter(function(o) {
|
|
6402
|
+
return isOverlayActive(o, currentTime);
|
|
6403
|
+
});
|
|
6404
|
+
if (!dims || activeOverlays.length === 0) return null;
|
|
6405
|
+
return /* @__PURE__ */ jsx("div", {
|
|
6406
|
+
"aria-hidden": "true",
|
|
6407
|
+
style: {
|
|
6408
|
+
position: "absolute",
|
|
6409
|
+
left: "".concat(dims.offsetX, "px"),
|
|
6410
|
+
top: "".concat(dims.offsetY, "px"),
|
|
6411
|
+
width: "".concat(dims.displayWidth, "px"),
|
|
6412
|
+
height: "".concat(dims.displayHeight, "px"),
|
|
6413
|
+
pointerEvents: "none",
|
|
6414
|
+
overflow: "hidden",
|
|
6415
|
+
zIndex: 8
|
|
6416
|
+
},
|
|
6417
|
+
children: activeOverlays.map(function(overlay) {
|
|
6418
|
+
var scaleX = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.width) ? dims.displayWidth / coordinateSpace.width : dims.scaleX;
|
|
6419
|
+
var scaleY = (coordinateSpace === null || coordinateSpace === void 0 ? void 0 : coordinateSpace.height) ? dims.displayHeight / coordinateSpace.height : dims.scaleY;
|
|
6420
|
+
var left = overlay.x * scaleX;
|
|
6421
|
+
var top = overlay.y * scaleY;
|
|
6422
|
+
var width = overlay.width * scaleX;
|
|
6423
|
+
var height = overlay.height * scaleY;
|
|
6424
|
+
var opacity = Math.max(0, Math.min(100, overlay.opacity)) / 100;
|
|
6425
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
6426
|
+
style: {
|
|
6427
|
+
position: "absolute",
|
|
6428
|
+
left: "".concat(left, "px"),
|
|
6429
|
+
top: "".concat(top, "px"),
|
|
6430
|
+
width: "".concat(width, "px"),
|
|
6431
|
+
height: "".concat(height, "px"),
|
|
6432
|
+
opacity: opacity,
|
|
6433
|
+
zIndex: overlay.z_index,
|
|
6434
|
+
overflow: "hidden"
|
|
6435
|
+
},
|
|
6436
|
+
children: [
|
|
6437
|
+
overlay.type === "image" && /* @__PURE__ */ jsx(ImageOverlay, {
|
|
6438
|
+
overlay: overlay
|
|
6439
|
+
}),
|
|
6440
|
+
overlay.type === "text" && /* @__PURE__ */ jsx(TextOverlay, {
|
|
6441
|
+
overlay: overlay
|
|
6442
|
+
}),
|
|
6443
|
+
overlay.type === "scroller" && /* @__PURE__ */ jsx(ScrollerOverlay, {
|
|
6444
|
+
overlay: overlay
|
|
6445
|
+
})
|
|
6446
|
+
]
|
|
6447
|
+
}, overlay.id);
|
|
6448
|
+
})
|
|
6449
|
+
});
|
|
6450
|
+
};
|
|
6451
|
+
// src/ui/StormcloudVideoPlayer.tsx
|
|
6452
|
+
import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
6098
6453
|
var CRITICAL_PROPS = [
|
|
6099
6454
|
"src",
|
|
6100
6455
|
"allowNativeHls",
|
|
@@ -6103,8 +6458,8 @@ var CRITICAL_PROPS = [
|
|
|
6103
6458
|
"driftToleranceMs"
|
|
6104
6459
|
];
|
|
6105
6460
|
var CONTROLS_HIDE_DELAY = 3e3;
|
|
6106
|
-
var StormcloudVideoPlayerComponent =
|
|
6107
|
-
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, [
|
|
6461
|
+
var StormcloudVideoPlayerComponent = React2.memo(function(props) {
|
|
6462
|
+
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, swirlProjectId = props.swirlProjectId, restVideoAttrs = _object_without_properties(props, [
|
|
6108
6463
|
"src",
|
|
6109
6464
|
"autoplay",
|
|
6110
6465
|
"muted",
|
|
@@ -6131,35 +6486,38 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6131
6486
|
"licenseKey",
|
|
6132
6487
|
"minSegmentsBeforePlay",
|
|
6133
6488
|
"disableAds",
|
|
6134
|
-
"disableFiller"
|
|
6489
|
+
"disableFiller",
|
|
6490
|
+
"swirlProjectId"
|
|
6135
6491
|
]);
|
|
6136
|
-
var videoRef =
|
|
6137
|
-
var playerRef =
|
|
6138
|
-
var bufferingTimeoutRef =
|
|
6139
|
-
var controlsTimerRef =
|
|
6140
|
-
var wrapperRef =
|
|
6141
|
-
var
|
|
6492
|
+
var videoRef = useRef2(null);
|
|
6493
|
+
var playerRef = useRef2(null);
|
|
6494
|
+
var bufferingTimeoutRef = useRef2(null);
|
|
6495
|
+
var controlsTimerRef = useRef2(null);
|
|
6496
|
+
var wrapperRef = useRef2(null);
|
|
6497
|
+
var _React2_useState = _sliced_to_array(React2.useState({
|
|
6142
6498
|
showAds: false,
|
|
6143
6499
|
currentIndex: 0,
|
|
6144
6500
|
totalAds: 0
|
|
6145
|
-
}), 2), adStatus =
|
|
6146
|
-
var
|
|
6147
|
-
var
|
|
6148
|
-
var
|
|
6149
|
-
var
|
|
6150
|
-
var
|
|
6151
|
-
var
|
|
6152
|
-
var
|
|
6153
|
-
var
|
|
6154
|
-
var
|
|
6155
|
-
var
|
|
6156
|
-
var
|
|
6157
|
-
var
|
|
6158
|
-
var
|
|
6159
|
-
var
|
|
6160
|
-
var
|
|
6161
|
-
var
|
|
6162
|
-
var
|
|
6501
|
+
}), 2), adStatus = _React2_useState[0], setAdStatus = _React2_useState[1];
|
|
6502
|
+
var _React2_useState1 = _sliced_to_array(React2.useState(true), 2), shouldShowNativeControls = _React2_useState1[0], setShouldShowNativeControls = _React2_useState1[1];
|
|
6503
|
+
var _React2_useState2 = _sliced_to_array(React2.useState(false), 2), isMuted = _React2_useState2[0], setIsMuted = _React2_useState2[1];
|
|
6504
|
+
var _React2_useState3 = _sliced_to_array(React2.useState(false), 2), isFullscreen = _React2_useState3[0], setIsFullscreen = _React2_useState3[1];
|
|
6505
|
+
var _React2_useState4 = _sliced_to_array(React2.useState(false), 2), isPlaying = _React2_useState4[0], setIsPlaying = _React2_useState4[1];
|
|
6506
|
+
var _React2_useState5 = _sliced_to_array(React2.useState(0), 2), currentTime = _React2_useState5[0], setCurrentTime = _React2_useState5[1];
|
|
6507
|
+
var _React2_useState6 = _sliced_to_array(React2.useState(0), 2), duration = _React2_useState6[0], setDuration = _React2_useState6[1];
|
|
6508
|
+
var _React2_useState7 = _sliced_to_array(React2.useState(1), 2), volume = _React2_useState7[0], setVolume = _React2_useState7[1];
|
|
6509
|
+
var _React2_useState8 = _sliced_to_array(React2.useState(1), 2), playbackRate = _React2_useState8[0], setPlaybackRate = _React2_useState8[1];
|
|
6510
|
+
var _React2_useState9 = _sliced_to_array(React2.useState(false), 2), showVolumeSlider = _React2_useState9[0], setShowVolumeSlider = _React2_useState9[1];
|
|
6511
|
+
var _React2_useState10 = _sliced_to_array(React2.useState(false), 2), showSpeedMenu = _React2_useState10[0], setShowSpeedMenu = _React2_useState10[1];
|
|
6512
|
+
var _React2_useState11 = _sliced_to_array(React2.useState(true), 2), isLoading = _React2_useState11[0], setIsLoading = _React2_useState11[1];
|
|
6513
|
+
var _React2_useState12 = _sliced_to_array(React2.useState(false), 2), isBuffering = _React2_useState12[0], setIsBuffering = _React2_useState12[1];
|
|
6514
|
+
var _React2_useState13 = _sliced_to_array(React2.useState(false), 2), showCenterPlay = _React2_useState13[0], setShowCenterPlay = _React2_useState13[1];
|
|
6515
|
+
var _React2_useState14 = _sliced_to_array(React2.useState(false), 2), showLicenseWarning = _React2_useState14[0], setShowLicenseWarning = _React2_useState14[1];
|
|
6516
|
+
var _React2_useState15 = _sliced_to_array(React2.useState(true), 2), controlsVisible = _React2_useState15[0], setControlsVisible = _React2_useState15[1];
|
|
6517
|
+
var _React2_useState16 = _sliced_to_array(React2.useState([]), 2), overlays = _React2_useState16[0], setOverlays = _React2_useState16[1];
|
|
6518
|
+
var _React2_useState17 = _sliced_to_array(React2.useState(null), 2), overlayCoordSpace = _React2_useState17[0], setOverlayCoordSpace = _React2_useState17[1];
|
|
6519
|
+
var _React2_useState18 = _sliced_to_array(React2.useState(typeof window !== "undefined" ? window.innerWidth : 1920), 2), viewportWidth = _React2_useState18[0], setViewportWidth = _React2_useState18[1];
|
|
6520
|
+
var _React2_useState19 = _sliced_to_array(React2.useState(typeof window !== "undefined" ? window.innerHeight > window.innerWidth : false), 2), isPortrait = _React2_useState19[0], setIsPortrait = _React2_useState19[1];
|
|
6163
6521
|
var getResponsiveScale = function getResponsiveScale() {
|
|
6164
6522
|
if (viewportWidth < 480) return 0.7;
|
|
6165
6523
|
if (viewportWidth < 768) return 0.8;
|
|
@@ -6167,7 +6525,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6167
6525
|
return 1;
|
|
6168
6526
|
};
|
|
6169
6527
|
var responsiveScale = getResponsiveScale();
|
|
6170
|
-
var resetControlsTimer =
|
|
6528
|
+
var resetControlsTimer = useCallback2(function() {
|
|
6171
6529
|
if (controlsTimerRef.current) {
|
|
6172
6530
|
clearTimeout(controlsTimerRef.current);
|
|
6173
6531
|
}
|
|
@@ -6255,7 +6613,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6255
6613
|
lowLatencyMode,
|
|
6256
6614
|
driftToleranceMs
|
|
6257
6615
|
]);
|
|
6258
|
-
|
|
6616
|
+
useEffect2(function() {
|
|
6259
6617
|
if (typeof window === "undefined") return;
|
|
6260
6618
|
var el = videoRef.current;
|
|
6261
6619
|
if (!el || !src) return;
|
|
@@ -6310,7 +6668,50 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6310
6668
|
}, [
|
|
6311
6669
|
criticalPropsKey
|
|
6312
6670
|
]);
|
|
6313
|
-
|
|
6671
|
+
useEffect2(function() {
|
|
6672
|
+
if (!swirlProjectId) {
|
|
6673
|
+
setOverlays([]);
|
|
6674
|
+
setOverlayCoordSpace(null);
|
|
6675
|
+
return;
|
|
6676
|
+
}
|
|
6677
|
+
var cancelled = false;
|
|
6678
|
+
fetchProjectOverlays(swirlProjectId).then(function(data) {
|
|
6679
|
+
if (!cancelled) setOverlays(data);
|
|
6680
|
+
}).catch(function(err) {
|
|
6681
|
+
if (!cancelled) {
|
|
6682
|
+
console.warn("[StormcloudVideoPlayer] Failed to fetch overlays:", err);
|
|
6683
|
+
}
|
|
6684
|
+
});
|
|
6685
|
+
return function() {
|
|
6686
|
+
cancelled = true;
|
|
6687
|
+
};
|
|
6688
|
+
}, [
|
|
6689
|
+
swirlProjectId
|
|
6690
|
+
]);
|
|
6691
|
+
useEffect2(function() {
|
|
6692
|
+
if (!swirlProjectId) return;
|
|
6693
|
+
var player = playerRef.current;
|
|
6694
|
+
if (!player) return;
|
|
6695
|
+
var tryResolve = function tryResolve() {
|
|
6696
|
+
var res = player.getMinHlsResolution();
|
|
6697
|
+
if (res) {
|
|
6698
|
+
setOverlayCoordSpace(res);
|
|
6699
|
+
return true;
|
|
6700
|
+
}
|
|
6701
|
+
return false;
|
|
6702
|
+
};
|
|
6703
|
+
if (tryResolve()) return;
|
|
6704
|
+
var interval = setInterval(function() {
|
|
6705
|
+
if (tryResolve()) clearInterval(interval);
|
|
6706
|
+
}, 300);
|
|
6707
|
+
return function() {
|
|
6708
|
+
return clearInterval(interval);
|
|
6709
|
+
};
|
|
6710
|
+
}, [
|
|
6711
|
+
swirlProjectId,
|
|
6712
|
+
criticalPropsKey
|
|
6713
|
+
]);
|
|
6714
|
+
useEffect2(function() {
|
|
6314
6715
|
if (!playerRef.current) return;
|
|
6315
6716
|
try {
|
|
6316
6717
|
if (autoplay !== void 0 && playerRef.current.videoElement) {
|
|
@@ -6326,7 +6727,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6326
6727
|
autoplay,
|
|
6327
6728
|
muted
|
|
6328
6729
|
]);
|
|
6329
|
-
|
|
6730
|
+
useEffect2(function() {
|
|
6330
6731
|
if (!playerRef.current) return;
|
|
6331
6732
|
var checkAdStatus = function checkAdStatus() {
|
|
6332
6733
|
if (playerRef.current) {
|
|
@@ -6356,7 +6757,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6356
6757
|
return clearInterval(interval);
|
|
6357
6758
|
};
|
|
6358
6759
|
}, []);
|
|
6359
|
-
|
|
6760
|
+
useEffect2(function() {
|
|
6360
6761
|
if (typeof window === "undefined" || !playerRef.current) return;
|
|
6361
6762
|
var handleResize = function handleResize() {
|
|
6362
6763
|
if (playerRef.current && videoRef.current) {
|
|
@@ -6372,7 +6773,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6372
6773
|
return window.removeEventListener("resize", handleResize);
|
|
6373
6774
|
};
|
|
6374
6775
|
}, []);
|
|
6375
|
-
|
|
6776
|
+
useEffect2(function() {
|
|
6376
6777
|
if (!playerRef.current || !videoRef.current) return;
|
|
6377
6778
|
var updateStates = function updateStates() {
|
|
6378
6779
|
if (playerRef.current && videoRef.current) {
|
|
@@ -6399,7 +6800,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6399
6800
|
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
|
6400
6801
|
};
|
|
6401
6802
|
}, []);
|
|
6402
|
-
|
|
6803
|
+
useEffect2(function() {
|
|
6403
6804
|
if (!videoRef.current) return;
|
|
6404
6805
|
var handleCanPlay = function handleCanPlay() {
|
|
6405
6806
|
setIsLoading(false);
|
|
@@ -6471,19 +6872,19 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6471
6872
|
}, [
|
|
6472
6873
|
debugAdTiming
|
|
6473
6874
|
]);
|
|
6474
|
-
|
|
6875
|
+
useEffect2(function() {
|
|
6475
6876
|
return function() {
|
|
6476
6877
|
if (controlsTimerRef.current) {
|
|
6477
6878
|
clearTimeout(controlsTimerRef.current);
|
|
6478
6879
|
}
|
|
6479
6880
|
};
|
|
6480
6881
|
}, []);
|
|
6481
|
-
var handleWrapperMouseMove =
|
|
6882
|
+
var handleWrapperMouseMove = useCallback2(function() {
|
|
6482
6883
|
resetControlsTimer();
|
|
6483
6884
|
}, [
|
|
6484
6885
|
resetControlsTimer
|
|
6485
6886
|
]);
|
|
6486
|
-
var handleWrapperMouseLeave =
|
|
6887
|
+
var handleWrapperMouseLeave = useCallback2(function() {
|
|
6487
6888
|
if (!showVolumeSlider && !showSpeedMenu) {
|
|
6488
6889
|
setControlsVisible(false);
|
|
6489
6890
|
}
|
|
@@ -6493,12 +6894,12 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6493
6894
|
]);
|
|
6494
6895
|
var progressPercent = duration > 0 ? currentTime / duration * 100 : 0;
|
|
6495
6896
|
var VolumeIcon = isMuted || volume === 0 ? FaVolumeMute : volume < 0.5 ? FaVolumeDown : FaVolumeUp;
|
|
6496
|
-
return /* @__PURE__ */
|
|
6897
|
+
return /* @__PURE__ */ jsxs2(Fragment2, {
|
|
6497
6898
|
children: [
|
|
6498
|
-
/* @__PURE__ */
|
|
6899
|
+
/* @__PURE__ */ jsx2("style", {
|
|
6499
6900
|
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 "
|
|
6500
6901
|
}),
|
|
6501
|
-
/* @__PURE__ */
|
|
6902
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6502
6903
|
ref: wrapperRef,
|
|
6503
6904
|
className: "sc-wrapper ".concat(wrapperClassName || ""),
|
|
6504
6905
|
onMouseMove: handleWrapperMouseMove,
|
|
@@ -6522,10 +6923,12 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6522
6923
|
boxShadow: isFullscreen ? "none" : void 0
|
|
6523
6924
|
}, wrapperStyle),
|
|
6524
6925
|
children: [
|
|
6525
|
-
/* @__PURE__ */
|
|
6926
|
+
/* @__PURE__ */ jsx2("video", _object_spread_props(_object_spread({
|
|
6526
6927
|
ref: videoRef,
|
|
6527
6928
|
className: className,
|
|
6528
6929
|
style: _object_spread({
|
|
6930
|
+
position: "relative",
|
|
6931
|
+
zIndex: 1,
|
|
6529
6932
|
display: "block",
|
|
6530
6933
|
width: "100%",
|
|
6531
6934
|
height: isFullscreen ? "100%" : "auto",
|
|
@@ -6542,7 +6945,13 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6542
6945
|
}, restVideoAttrs), {
|
|
6543
6946
|
children: children
|
|
6544
6947
|
})),
|
|
6545
|
-
|
|
6948
|
+
overlays.length > 0 && !adStatus.showAds && /* @__PURE__ */ jsx2(OverlayRenderer, {
|
|
6949
|
+
overlays: overlays,
|
|
6950
|
+
currentTime: currentTime,
|
|
6951
|
+
videoRef: videoRef,
|
|
6952
|
+
coordinateSpace: overlayCoordSpace
|
|
6953
|
+
}),
|
|
6954
|
+
(isLoading || isBuffering) && !hideLoadingIndicator && /* @__PURE__ */ jsx2(FaSpinner, {
|
|
6546
6955
|
className: "sc-loading-indicator",
|
|
6547
6956
|
size: 40,
|
|
6548
6957
|
color: "rgba(255, 255, 255, 0.85)",
|
|
@@ -6555,7 +6964,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6555
6964
|
filter: "drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6))"
|
|
6556
6965
|
}
|
|
6557
6966
|
}),
|
|
6558
|
-
showLicenseWarning && /* @__PURE__ */
|
|
6967
|
+
showLicenseWarning && /* @__PURE__ */ jsxs2("div", {
|
|
6559
6968
|
style: {
|
|
6560
6969
|
position: "absolute",
|
|
6561
6970
|
top: "50%",
|
|
@@ -6574,7 +6983,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6574
6983
|
margin: "0 16px"
|
|
6575
6984
|
},
|
|
6576
6985
|
children: [
|
|
6577
|
-
/* @__PURE__ */
|
|
6986
|
+
/* @__PURE__ */ jsx2("div", {
|
|
6578
6987
|
style: {
|
|
6579
6988
|
fontSize: "18px",
|
|
6580
6989
|
fontWeight: "700",
|
|
@@ -6583,7 +6992,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6583
6992
|
},
|
|
6584
6993
|
children: "License Key Required"
|
|
6585
6994
|
}),
|
|
6586
|
-
/* @__PURE__ */
|
|
6995
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6587
6996
|
style: {
|
|
6588
6997
|
fontSize: "13px",
|
|
6589
6998
|
lineHeight: "1.6",
|
|
@@ -6591,13 +7000,13 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6591
7000
|
},
|
|
6592
7001
|
children: [
|
|
6593
7002
|
"Please provide a valid license key to use the Stormcloud Video Player.",
|
|
6594
|
-
/* @__PURE__ */
|
|
7003
|
+
/* @__PURE__ */ jsx2("br", {}),
|
|
6595
7004
|
"Contact your administrator for licensing information."
|
|
6596
7005
|
]
|
|
6597
7006
|
})
|
|
6598
7007
|
]
|
|
6599
7008
|
}),
|
|
6600
|
-
showCenterPlay && !isLoading && !isBuffering && !showLicenseWarning && !adStatus.showAds && /* @__PURE__ */
|
|
7009
|
+
showCenterPlay && !isLoading && !isBuffering && !showLicenseWarning && !adStatus.showAds && /* @__PURE__ */ jsx2("div", {
|
|
6601
7010
|
onClick: handleCenterPlayClick,
|
|
6602
7011
|
style: {
|
|
6603
7012
|
position: "absolute",
|
|
@@ -6632,7 +7041,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6632
7041
|
el.style.transform = "translate(-50%, -50%) scale(1)";
|
|
6633
7042
|
},
|
|
6634
7043
|
title: "Play",
|
|
6635
|
-
children: /* @__PURE__ */
|
|
7044
|
+
children: /* @__PURE__ */ jsx2(FaPlay, {
|
|
6636
7045
|
size: Math.max(22, 28 * responsiveScale),
|
|
6637
7046
|
color: "white",
|
|
6638
7047
|
style: {
|
|
@@ -6641,7 +7050,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6641
7050
|
}
|
|
6642
7051
|
})
|
|
6643
7052
|
}),
|
|
6644
|
-
adStatus.showAds && /* @__PURE__ */
|
|
7053
|
+
adStatus.showAds && /* @__PURE__ */ jsxs2("div", {
|
|
6645
7054
|
style: {
|
|
6646
7055
|
position: "absolute",
|
|
6647
7056
|
top: "".concat(12 * responsiveScale, "px"),
|
|
@@ -6653,7 +7062,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6653
7062
|
animation: "sc-fade-in 0.3s ease"
|
|
6654
7063
|
},
|
|
6655
7064
|
children: [
|
|
6656
|
-
/* @__PURE__ */
|
|
7065
|
+
/* @__PURE__ */ jsx2("div", {
|
|
6657
7066
|
style: {
|
|
6658
7067
|
background: "rgba(234, 179, 8, 0.9)",
|
|
6659
7068
|
backdropFilter: "blur(12px)",
|
|
@@ -6668,7 +7077,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6668
7077
|
},
|
|
6669
7078
|
children: "Ad"
|
|
6670
7079
|
}),
|
|
6671
|
-
adStatus.currentIndex > 0 && /* @__PURE__ */
|
|
7080
|
+
adStatus.currentIndex > 0 && /* @__PURE__ */ jsxs2("div", {
|
|
6672
7081
|
style: {
|
|
6673
7082
|
background: "rgba(0, 0, 0, 0.5)",
|
|
6674
7083
|
backdropFilter: "blur(12px)",
|
|
@@ -6687,7 +7096,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6687
7096
|
})
|
|
6688
7097
|
]
|
|
6689
7098
|
}),
|
|
6690
|
-
shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */
|
|
7099
|
+
shouldShowEnhancedControls && !showLicenseWarning ? /* @__PURE__ */ jsxs2("div", {
|
|
6691
7100
|
className: "sc-controls-bar",
|
|
6692
7101
|
style: {
|
|
6693
7102
|
position: "absolute",
|
|
@@ -6702,7 +7111,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6702
7111
|
pointerEvents: controlsVisible || adStatus.showAds ? "auto" : "none"
|
|
6703
7112
|
},
|
|
6704
7113
|
children: [
|
|
6705
|
-
/* @__PURE__ */
|
|
7114
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6706
7115
|
className: "sc-progress-track",
|
|
6707
7116
|
style: {
|
|
6708
7117
|
width: "100%",
|
|
@@ -6722,7 +7131,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6722
7131
|
e.currentTarget.style.height = "3px";
|
|
6723
7132
|
},
|
|
6724
7133
|
children: [
|
|
6725
|
-
/* @__PURE__ */
|
|
7134
|
+
/* @__PURE__ */ jsx2("div", {
|
|
6726
7135
|
style: {
|
|
6727
7136
|
position: "absolute",
|
|
6728
7137
|
top: 0,
|
|
@@ -6734,7 +7143,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6734
7143
|
transition: "width 0.15s linear"
|
|
6735
7144
|
}
|
|
6736
7145
|
}),
|
|
6737
|
-
/* @__PURE__ */
|
|
7146
|
+
/* @__PURE__ */ jsx2("div", {
|
|
6738
7147
|
className: "sc-progress-thumb",
|
|
6739
7148
|
style: {
|
|
6740
7149
|
position: "absolute",
|
|
@@ -6751,7 +7160,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6751
7160
|
})
|
|
6752
7161
|
]
|
|
6753
7162
|
}),
|
|
6754
|
-
/* @__PURE__ */
|
|
7163
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6755
7164
|
style: {
|
|
6756
7165
|
display: "flex",
|
|
6757
7166
|
alignItems: "center",
|
|
@@ -6760,14 +7169,14 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6760
7169
|
gap: "".concat(8 * responsiveScale, "px")
|
|
6761
7170
|
},
|
|
6762
7171
|
children: [
|
|
6763
|
-
/* @__PURE__ */
|
|
7172
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6764
7173
|
style: {
|
|
6765
7174
|
display: "flex",
|
|
6766
7175
|
alignItems: "center",
|
|
6767
7176
|
gap: "".concat(8 * responsiveScale, "px")
|
|
6768
7177
|
},
|
|
6769
7178
|
children: [
|
|
6770
|
-
/* @__PURE__ */
|
|
7179
|
+
/* @__PURE__ */ jsx2("button", {
|
|
6771
7180
|
className: "sc-ctrl-btn",
|
|
6772
7181
|
onClick: handlePlayPause,
|
|
6773
7182
|
style: {
|
|
@@ -6777,16 +7186,16 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6777
7186
|
minHeight: "".concat(36 * responsiveScale, "px")
|
|
6778
7187
|
},
|
|
6779
7188
|
title: isPlaying ? "Pause" : "Play",
|
|
6780
|
-
children: isPlaying ? /* @__PURE__ */
|
|
7189
|
+
children: isPlaying ? /* @__PURE__ */ jsx2(FaPause, {
|
|
6781
7190
|
size: Math.max(14, 18 * responsiveScale)
|
|
6782
|
-
}) : /* @__PURE__ */
|
|
7191
|
+
}) : /* @__PURE__ */ jsx2(FaPlay, {
|
|
6783
7192
|
size: Math.max(14, 18 * responsiveScale),
|
|
6784
7193
|
style: {
|
|
6785
7194
|
marginLeft: "2px"
|
|
6786
7195
|
}
|
|
6787
7196
|
})
|
|
6788
7197
|
}),
|
|
6789
|
-
/* @__PURE__ */
|
|
7198
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6790
7199
|
style: {
|
|
6791
7200
|
display: "flex",
|
|
6792
7201
|
alignItems: "center"
|
|
@@ -6798,7 +7207,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6798
7207
|
return setShowVolumeSlider(false);
|
|
6799
7208
|
},
|
|
6800
7209
|
children: [
|
|
6801
|
-
/* @__PURE__ */
|
|
7210
|
+
/* @__PURE__ */ jsx2("button", {
|
|
6802
7211
|
className: "sc-ctrl-btn",
|
|
6803
7212
|
onClick: function onClick() {
|
|
6804
7213
|
if (playerRef.current) {
|
|
@@ -6814,11 +7223,11 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6814
7223
|
minHeight: "".concat(36 * responsiveScale, "px")
|
|
6815
7224
|
},
|
|
6816
7225
|
title: isMuted ? "Unmute" : "Mute",
|
|
6817
|
-
children: /* @__PURE__ */
|
|
7226
|
+
children: /* @__PURE__ */ jsx2(VolumeIcon, {
|
|
6818
7227
|
size: Math.max(14, 18 * responsiveScale)
|
|
6819
7228
|
})
|
|
6820
7229
|
}),
|
|
6821
|
-
/* @__PURE__ */
|
|
7230
|
+
/* @__PURE__ */ jsx2("div", {
|
|
6822
7231
|
style: {
|
|
6823
7232
|
width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
|
|
6824
7233
|
overflow: "hidden",
|
|
@@ -6828,7 +7237,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6828
7237
|
paddingLeft: showVolumeSlider ? "2px" : "0",
|
|
6829
7238
|
paddingRight: showVolumeSlider ? "4px" : "0"
|
|
6830
7239
|
},
|
|
6831
|
-
children: /* @__PURE__ */
|
|
7240
|
+
children: /* @__PURE__ */ jsxs2("div", {
|
|
6832
7241
|
style: {
|
|
6833
7242
|
position: "relative",
|
|
6834
7243
|
width: "".concat(56 * responsiveScale, "px"),
|
|
@@ -6858,7 +7267,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6858
7267
|
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
6859
7268
|
},
|
|
6860
7269
|
children: [
|
|
6861
|
-
/* @__PURE__ */
|
|
7270
|
+
/* @__PURE__ */ jsx2("div", {
|
|
6862
7271
|
style: {
|
|
6863
7272
|
position: "absolute",
|
|
6864
7273
|
inset: 0,
|
|
@@ -6866,7 +7275,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6866
7275
|
borderRadius: "1.5px"
|
|
6867
7276
|
}
|
|
6868
7277
|
}),
|
|
6869
|
-
/* @__PURE__ */
|
|
7278
|
+
/* @__PURE__ */ jsx2("div", {
|
|
6870
7279
|
style: {
|
|
6871
7280
|
position: "absolute",
|
|
6872
7281
|
top: 0,
|
|
@@ -6878,7 +7287,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6878
7287
|
transition: "width 0.1s ease-out"
|
|
6879
7288
|
}
|
|
6880
7289
|
}),
|
|
6881
|
-
/* @__PURE__ */
|
|
7290
|
+
/* @__PURE__ */ jsx2("div", {
|
|
6882
7291
|
style: {
|
|
6883
7292
|
position: "absolute",
|
|
6884
7293
|
top: "50%",
|
|
@@ -6897,7 +7306,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6897
7306
|
})
|
|
6898
7307
|
]
|
|
6899
7308
|
}),
|
|
6900
|
-
/* @__PURE__ */
|
|
7309
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6901
7310
|
style: {
|
|
6902
7311
|
fontSize: "".concat(13 * responsiveScale, "px"),
|
|
6903
7312
|
fontFamily: "Roboto, 'Segoe UI', Arial, sans-serif",
|
|
@@ -6910,7 +7319,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6910
7319
|
children: [
|
|
6911
7320
|
formatTime(currentTime),
|
|
6912
7321
|
" ",
|
|
6913
|
-
/* @__PURE__ */
|
|
7322
|
+
/* @__PURE__ */ jsx2("span", {
|
|
6914
7323
|
style: {
|
|
6915
7324
|
color: "rgba(255,255,255,0.5)"
|
|
6916
7325
|
},
|
|
@@ -6922,20 +7331,20 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6922
7331
|
})
|
|
6923
7332
|
]
|
|
6924
7333
|
}),
|
|
6925
|
-
/* @__PURE__ */
|
|
7334
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6926
7335
|
style: {
|
|
6927
7336
|
display: "flex",
|
|
6928
7337
|
alignItems: "center",
|
|
6929
7338
|
gap: "".concat(8 * responsiveScale, "px")
|
|
6930
7339
|
},
|
|
6931
7340
|
children: [
|
|
6932
|
-
/* @__PURE__ */
|
|
7341
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
6933
7342
|
style: {
|
|
6934
7343
|
position: "relative",
|
|
6935
7344
|
display: viewportWidth < 600 ? "none" : "block"
|
|
6936
7345
|
},
|
|
6937
7346
|
children: [
|
|
6938
|
-
/* @__PURE__ */
|
|
7347
|
+
/* @__PURE__ */ jsxs2("button", {
|
|
6939
7348
|
className: "sc-ctrl-btn",
|
|
6940
7349
|
onClick: function onClick() {
|
|
6941
7350
|
setShowSpeedMenu(!showSpeedMenu);
|
|
@@ -6955,7 +7364,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6955
7364
|
"x"
|
|
6956
7365
|
]
|
|
6957
7366
|
}),
|
|
6958
|
-
showSpeedMenu && /* @__PURE__ */
|
|
7367
|
+
showSpeedMenu && /* @__PURE__ */ jsx2("div", {
|
|
6959
7368
|
style: {
|
|
6960
7369
|
position: "absolute",
|
|
6961
7370
|
bottom: "100%",
|
|
@@ -6981,7 +7390,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
6981
7390
|
1.75,
|
|
6982
7391
|
2
|
|
6983
7392
|
].map(function(speed) {
|
|
6984
|
-
return /* @__PURE__ */
|
|
7393
|
+
return /* @__PURE__ */ jsxs2("button", {
|
|
6985
7394
|
onClick: function onClick() {
|
|
6986
7395
|
return handlePlaybackRateChange(speed);
|
|
6987
7396
|
},
|
|
@@ -7020,7 +7429,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7020
7429
|
})
|
|
7021
7430
|
]
|
|
7022
7431
|
}),
|
|
7023
|
-
/* @__PURE__ */
|
|
7432
|
+
/* @__PURE__ */ jsx2("button", {
|
|
7024
7433
|
className: "sc-ctrl-btn",
|
|
7025
7434
|
onClick: function onClick() {
|
|
7026
7435
|
if (onFullscreenToggle) {
|
|
@@ -7041,9 +7450,9 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7041
7450
|
minHeight: "".concat(36 * responsiveScale, "px")
|
|
7042
7451
|
},
|
|
7043
7452
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
7044
|
-
children: isFullscreen ? /* @__PURE__ */
|
|
7453
|
+
children: isFullscreen ? /* @__PURE__ */ jsx2(FaCompress, {
|
|
7045
7454
|
size: Math.max(14, 18 * responsiveScale)
|
|
7046
|
-
}) : /* @__PURE__ */
|
|
7455
|
+
}) : /* @__PURE__ */ jsx2(FaExpand, {
|
|
7047
7456
|
size: Math.max(14, 18 * responsiveScale)
|
|
7048
7457
|
})
|
|
7049
7458
|
})
|
|
@@ -7052,7 +7461,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7052
7461
|
]
|
|
7053
7462
|
})
|
|
7054
7463
|
]
|
|
7055
|
-
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */
|
|
7464
|
+
}) : showCustomControls && !showLicenseWarning && /* @__PURE__ */ jsxs2("div", {
|
|
7056
7465
|
className: "sc-controls-bar",
|
|
7057
7466
|
style: {
|
|
7058
7467
|
position: "absolute",
|
|
@@ -7067,7 +7476,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7067
7476
|
pointerEvents: controlsVisible ? "auto" : "none"
|
|
7068
7477
|
},
|
|
7069
7478
|
children: [
|
|
7070
|
-
/* @__PURE__ */
|
|
7479
|
+
/* @__PURE__ */ jsxs2("div", {
|
|
7071
7480
|
style: {
|
|
7072
7481
|
display: "flex",
|
|
7073
7482
|
alignItems: "center",
|
|
@@ -7082,7 +7491,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7082
7491
|
return setShowVolumeSlider(false);
|
|
7083
7492
|
},
|
|
7084
7493
|
children: [
|
|
7085
|
-
/* @__PURE__ */
|
|
7494
|
+
/* @__PURE__ */ jsx2("button", {
|
|
7086
7495
|
className: "sc-ctrl-btn",
|
|
7087
7496
|
onClick: function onClick() {
|
|
7088
7497
|
if (playerRef.current) playerRef.current.toggleMute();
|
|
@@ -7096,11 +7505,11 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7096
7505
|
minHeight: "".concat(36 * responsiveScale, "px")
|
|
7097
7506
|
},
|
|
7098
7507
|
title: isMuted ? "Unmute" : "Mute",
|
|
7099
|
-
children: /* @__PURE__ */
|
|
7508
|
+
children: /* @__PURE__ */ jsx2(VolumeIcon, {
|
|
7100
7509
|
size: Math.max(14, 18 * responsiveScale)
|
|
7101
7510
|
})
|
|
7102
7511
|
}),
|
|
7103
|
-
/* @__PURE__ */
|
|
7512
|
+
/* @__PURE__ */ jsx2("div", {
|
|
7104
7513
|
style: {
|
|
7105
7514
|
width: showVolumeSlider ? "".concat(62 * responsiveScale, "px") : "0px",
|
|
7106
7515
|
overflow: "hidden",
|
|
@@ -7110,7 +7519,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7110
7519
|
paddingLeft: showVolumeSlider ? "2px" : "0",
|
|
7111
7520
|
paddingRight: showVolumeSlider ? "6px" : "0"
|
|
7112
7521
|
},
|
|
7113
|
-
children: /* @__PURE__ */
|
|
7522
|
+
children: /* @__PURE__ */ jsxs2("div", {
|
|
7114
7523
|
style: {
|
|
7115
7524
|
position: "relative",
|
|
7116
7525
|
width: "".concat(56 * responsiveScale, "px"),
|
|
@@ -7140,7 +7549,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7140
7549
|
handleVolumeChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
|
|
7141
7550
|
},
|
|
7142
7551
|
children: [
|
|
7143
|
-
/* @__PURE__ */
|
|
7552
|
+
/* @__PURE__ */ jsx2("div", {
|
|
7144
7553
|
style: {
|
|
7145
7554
|
position: "absolute",
|
|
7146
7555
|
inset: 0,
|
|
@@ -7148,7 +7557,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7148
7557
|
borderRadius: "1.5px"
|
|
7149
7558
|
}
|
|
7150
7559
|
}),
|
|
7151
|
-
/* @__PURE__ */
|
|
7560
|
+
/* @__PURE__ */ jsx2("div", {
|
|
7152
7561
|
style: {
|
|
7153
7562
|
position: "absolute",
|
|
7154
7563
|
top: 0,
|
|
@@ -7160,7 +7569,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7160
7569
|
transition: "width 0.1s ease-out"
|
|
7161
7570
|
}
|
|
7162
7571
|
}),
|
|
7163
|
-
/* @__PURE__ */
|
|
7572
|
+
/* @__PURE__ */ jsx2("div", {
|
|
7164
7573
|
style: {
|
|
7165
7574
|
position: "absolute",
|
|
7166
7575
|
top: "50%",
|
|
@@ -7179,7 +7588,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7179
7588
|
})
|
|
7180
7589
|
]
|
|
7181
7590
|
}),
|
|
7182
|
-
/* @__PURE__ */
|
|
7591
|
+
/* @__PURE__ */ jsx2("button", {
|
|
7183
7592
|
className: "sc-ctrl-btn",
|
|
7184
7593
|
onClick: function onClick() {
|
|
7185
7594
|
if (onFullscreenToggle) {
|
|
@@ -7201,15 +7610,15 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7201
7610
|
background: "rgba(0, 0, 0, 0.6)"
|
|
7202
7611
|
},
|
|
7203
7612
|
title: isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
|
|
7204
|
-
children: isFullscreen ? /* @__PURE__ */
|
|
7613
|
+
children: isFullscreen ? /* @__PURE__ */ jsx2(FaCompress, {
|
|
7205
7614
|
size: Math.max(14, 18 * responsiveScale)
|
|
7206
|
-
}) : /* @__PURE__ */
|
|
7615
|
+
}) : /* @__PURE__ */ jsx2(FaExpand, {
|
|
7207
7616
|
size: Math.max(14, 18 * responsiveScale)
|
|
7208
7617
|
})
|
|
7209
7618
|
})
|
|
7210
7619
|
]
|
|
7211
7620
|
}),
|
|
7212
|
-
onControlClick && /* @__PURE__ */
|
|
7621
|
+
onControlClick && /* @__PURE__ */ jsx2("div", {
|
|
7213
7622
|
onClick: onControlClick,
|
|
7214
7623
|
style: {
|
|
7215
7624
|
position: "absolute",
|
|
@@ -7260,7 +7669,8 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7260
7669
|
"playsInline",
|
|
7261
7670
|
"preload",
|
|
7262
7671
|
"poster",
|
|
7263
|
-
"children"
|
|
7672
|
+
"children",
|
|
7673
|
+
"swirlProjectId"
|
|
7264
7674
|
];
|
|
7265
7675
|
var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = undefined;
|
|
7266
7676
|
try {
|
|
@@ -7315,7 +7725,7 @@ var StormcloudVideoPlayerComponent = React.memo(function(props) {
|
|
|
7315
7725
|
return true;
|
|
7316
7726
|
});
|
|
7317
7727
|
// src/StormcloudPlayer.tsx
|
|
7318
|
-
import
|
|
7728
|
+
import React4, { Component as Component4, Suspense } from "react";
|
|
7319
7729
|
// src/props.ts
|
|
7320
7730
|
var noop = function noop() {};
|
|
7321
7731
|
var defaultProps = {
|
|
@@ -7996,7 +8406,7 @@ var players = [
|
|
|
7996
8406
|
];
|
|
7997
8407
|
var players_default = players;
|
|
7998
8408
|
// src/Player.tsx
|
|
7999
|
-
import
|
|
8409
|
+
import React3, { Component as Component3 } from "react";
|
|
8000
8410
|
var SEEK_ON_PLAY_EXPIRY = 5e3;
|
|
8001
8411
|
var Player = /*#__PURE__*/ function(Component3) {
|
|
8002
8412
|
"use strict";
|
|
@@ -8245,7 +8655,7 @@ var Player = /*#__PURE__*/ function(Component3) {
|
|
|
8245
8655
|
if (!Player2) {
|
|
8246
8656
|
return null;
|
|
8247
8657
|
}
|
|
8248
|
-
return
|
|
8658
|
+
return React3.createElement(Player2, _object_spread_props(_object_spread({}, this.props), {
|
|
8249
8659
|
onMount: this.handlePlayerMount,
|
|
8250
8660
|
onReady: this.handleReady,
|
|
8251
8661
|
onPlay: this.handlePlay,
|
|
@@ -8392,7 +8802,7 @@ var createStormcloudPlayer = function createStormcloudPlayer(playerList, fallbac
|
|
|
8392
8802
|
if (!src) return null;
|
|
8393
8803
|
var activePlayer = _this.getActivePlayer(src);
|
|
8394
8804
|
if (!activePlayer) return null;
|
|
8395
|
-
return
|
|
8805
|
+
return React4.createElement(Player, _object_spread_props(_object_spread({}, _this.props), {
|
|
8396
8806
|
key: activePlayer.key,
|
|
8397
8807
|
ref: _this.references.player,
|
|
8398
8808
|
activePlayer: activePlayer.lazyPlayer || activePlayer,
|
|
@@ -8408,13 +8818,13 @@ var createStormcloudPlayer = function createStormcloudPlayer(playerList, fallbac
|
|
|
8408
8818
|
var _this_props = this.props, src = _this_props.src, style = _this_props.style, width = _this_props.width, height = _this_props.height, fallbackElement = _this_props.fallback, Wrapper = _this_props.wrapper;
|
|
8409
8819
|
var attributes = this.getAttributes(src);
|
|
8410
8820
|
var wrapperRef = typeof Wrapper === "string" ? this.references.wrapper : void 0;
|
|
8411
|
-
return
|
|
8821
|
+
return React4.createElement(Wrapper, _object_spread({
|
|
8412
8822
|
ref: wrapperRef,
|
|
8413
8823
|
style: _object_spread_props(_object_spread({}, style), {
|
|
8414
8824
|
width: width,
|
|
8415
8825
|
height: height
|
|
8416
8826
|
})
|
|
8417
|
-
}, attributes),
|
|
8827
|
+
}, attributes), React4.createElement(UniversalSuspense, {
|
|
8418
8828
|
fallback: fallbackElement
|
|
8419
8829
|
}, this.renderActivePlayer(src)));
|
|
8420
8830
|
}
|
|
@@ -8480,5 +8890,5 @@ var createStormcloudPlayer = function createStormcloudPlayer(playerList, fallbac
|
|
|
8480
8890
|
};
|
|
8481
8891
|
var StormcloudPlayer = createStormcloudPlayer(players_default, players_default[players_default.length - 1]);
|
|
8482
8892
|
var StormcloudPlayer_default = StormcloudPlayer;
|
|
8483
|
-
export { IS_BROWSER, IS_GLOBAL, IS_IOS, IS_SAFARI, SUPPORTS_DASH, SUPPORTS_HLS, StormcloudPlayer_default as StormcloudPlayer, StormcloudVideoPlayer, StormcloudVideoPlayerComponent, canPlay, createStormcloudPlayer, createVastAdLayer, createVastManager, StormcloudVideoPlayerComponent as default, detectBrowser, getBrowserConfigOverrides, getBrowserID, getClientInfo, initializePolyfills, isMediaStream, lazy, logBrowserInfo, merge, omit, parseQuery, players_default as players, randomString, sendHeartbeat, sendInitialTracking, supportsFeature, supportsModernJS, supportsWebKitPresentationMode };
|
|
8893
|
+
export { IS_BROWSER, IS_GLOBAL, IS_IOS, IS_SAFARI, SUPPORTS_DASH, SUPPORTS_HLS, StormcloudPlayer_default as StormcloudPlayer, StormcloudVideoPlayer, StormcloudVideoPlayerComponent, canPlay, createStormcloudPlayer, createVastAdLayer, createVastManager, StormcloudVideoPlayerComponent as default, detectBrowser, fetchProjectOverlays, getBrowserConfigOverrides, getBrowserID, getClientInfo, initializePolyfills, isMediaStream, isOverlayActive, lazy, logBrowserInfo, merge, omit, parseQuery, players_default as players, randomString, resolveImageUrl, sendHeartbeat, sendInitialTracking, supportsFeature, supportsModernJS, supportsWebKitPresentationMode, timeStringToSeconds };
|
|
8484
8894
|
//# sourceMappingURL=index.js.map
|