@100mslive/roomkit-react 0.3.7-alpha.0 → 0.3.7-alpha.1
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/{HLSView-4GYBPDV3.js → HLSView-QKPBZFZP.js} +120 -109
- package/dist/{HLSView-4GYBPDV3.js.map → HLSView-QKPBZFZP.js.map} +2 -2
- package/dist/Prebuilt/common/constants.d.ts +1 -2
- package/dist/Prebuilt/components/VideoLayouts/WhiteboardLayout.d.ts +0 -1
- package/dist/{chunk-3KJZ5DTM.js → chunk-LVXGI4HW.js} +1769 -1445
- package/dist/chunk-LVXGI4HW.js.map +7 -0
- package/dist/index.cjs.js +1938 -1628
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +748 -343
- package/dist/meta.esbuild.json +761 -419
- package/package.json +6 -7
- package/src/Prebuilt/common/constants.ts +0 -1
- package/src/Prebuilt/components/AppData/AppData.tsx +2 -5
- package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +6 -2
- package/src/Prebuilt/components/Preview/PreviewJoin.tsx +1 -1
- package/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx +13 -7
- package/dist/HLSView-B3CVWA37.css +0 -2765
- package/dist/HLSView-B3CVWA37.css.map +0 -7
- package/dist/chunk-3KJZ5DTM.js.map +0 -7
- package/dist/index.cjs.css +0 -2765
- package/dist/index.cjs.css.map +0 -7
- package/dist/index.css +0 -2765
- package/dist/index.css.map +0 -7
@@ -23,6 +23,10 @@ import {
|
|
23
23
|
Text,
|
24
24
|
ToastManager,
|
25
25
|
Tooltip,
|
26
|
+
__async,
|
27
|
+
__objRest,
|
28
|
+
__spreadProps,
|
29
|
+
__spreadValues,
|
26
30
|
config,
|
27
31
|
init_define_process_env,
|
28
32
|
styled,
|
@@ -34,7 +38,7 @@ import {
|
|
34
38
|
useRoomLayoutHeader,
|
35
39
|
useSidepaneToggle,
|
36
40
|
useTheme
|
37
|
-
} from "./chunk-
|
41
|
+
} from "./chunk-LVXGI4HW.js";
|
38
42
|
|
39
43
|
// src/Prebuilt/layouts/HLSView.jsx
|
40
44
|
init_define_process_env();
|
@@ -62,6 +66,7 @@ init_define_process_env();
|
|
62
66
|
import React, { memo } from "react";
|
63
67
|
import { CrossIcon } from "@100mslive/react-icons";
|
64
68
|
function HlsStatsOverlay({ hlsStatsState, onClose }) {
|
69
|
+
var _a, _b, _c;
|
65
70
|
return /* @__PURE__ */ React.createElement(
|
66
71
|
Flex,
|
67
72
|
{
|
@@ -81,18 +86,18 @@ function HlsStatsOverlay({ hlsStatsState, onClose }) {
|
|
81
86
|
"a",
|
82
87
|
{
|
83
88
|
style: { cursor: "pointer", textDecoration: "underline" },
|
84
|
-
href: hlsStatsState
|
89
|
+
href: hlsStatsState == null ? void 0 : hlsStatsState.url,
|
85
90
|
target: "_blank",
|
86
91
|
rel: "noreferrer"
|
87
92
|
},
|
88
93
|
"Stream url"
|
89
94
|
))),
|
90
|
-
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Video size" }, ` ${hlsStatsState
|
91
|
-
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Buffer duration" }, hlsStatsState
|
92
|
-
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Connection speed" }, `${(hlsStatsState
|
93
|
-
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Bitrate" }, `${(hlsStatsState
|
95
|
+
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Video size" }, ` ${(_a = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _a.width}x${(_b = hlsStatsState == null ? void 0 : hlsStatsState.videoSize) == null ? void 0 : _b.height}`),
|
96
|
+
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Buffer duration" }, (_c = hlsStatsState == null ? void 0 : hlsStatsState.bufferedDuration) == null ? void 0 : _c.toFixed(2), " "),
|
97
|
+
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Connection speed" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bandwidthEstimate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
|
98
|
+
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Bitrate" }, `${((hlsStatsState == null ? void 0 : hlsStatsState.bitrate) / (1e3 * 1e3)).toFixed(2)} Mbps`),
|
94
99
|
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "distance from live" }, getDurationFromSeconds(hlsStatsState.distanceFromLive / 1e3)),
|
95
|
-
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState
|
100
|
+
/* @__PURE__ */ React.createElement(HlsStatsRow, { label: "Dropped frames" }, hlsStatsState == null ? void 0 : hlsStatsState.droppedFrames)
|
96
101
|
);
|
97
102
|
}
|
98
103
|
function getDurationFromSeconds(timeInSeconds) {
|
@@ -165,10 +170,11 @@ var RightControls = styled(Flex, {
|
|
165
170
|
// src/Prebuilt/components/HMSVideo/HMSVideo.jsx
|
166
171
|
init_define_process_env();
|
167
172
|
import React2, { forwardRef } from "react";
|
168
|
-
var HMSVideo = forwardRef((
|
173
|
+
var HMSVideo = forwardRef((_a, videoRef) => {
|
174
|
+
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
169
175
|
return /* @__PURE__ */ React2.createElement(
|
170
176
|
Flex,
|
171
|
-
{
|
177
|
+
__spreadValues({
|
172
178
|
"data-testid": "hms-video",
|
173
179
|
css: {
|
174
180
|
size: "100%",
|
@@ -199,9 +205,8 @@ var HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
|
|
199
205
|
fontSize: "$space$10 !important"
|
200
206
|
}
|
201
207
|
},
|
202
|
-
direction: "column"
|
203
|
-
|
204
|
-
},
|
208
|
+
direction: "column"
|
209
|
+
}, props),
|
205
210
|
/* @__PURE__ */ React2.createElement(
|
206
211
|
"video",
|
207
212
|
{
|
@@ -250,10 +255,10 @@ var PlayPauseButton = ({
|
|
250
255
|
height = 20
|
251
256
|
}) => {
|
252
257
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
253
|
-
const onClick =
|
254
|
-
event
|
255
|
-
isPaused ?
|
256
|
-
};
|
258
|
+
const onClick = (event) => __async(void 0, null, function* () {
|
259
|
+
event == null ? void 0 : event.stopPropagation();
|
260
|
+
isPaused ? yield hlsPlayer2 == null ? void 0 : hlsPlayer2.play() : hlsPlayer2 == null ? void 0 : hlsPlayer2.pause();
|
261
|
+
});
|
257
262
|
return /* @__PURE__ */ React4.createElement(Tooltip, { title: isPaused ? "Play" : "Pause", side: "top" }, /* @__PURE__ */ React4.createElement(IconButton, { onClick, "data-testid": "play_pause_btn" }, isPaused ? /* @__PURE__ */ React4.createElement(PlayIcon, { width, height }) : /* @__PURE__ */ React4.createElement(PauseIcon, { width, height })));
|
258
263
|
};
|
259
264
|
|
@@ -431,16 +436,17 @@ var VideoProgress = ({
|
|
431
436
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
432
437
|
const [videoProgress, setVideoProgress] = useState(0);
|
433
438
|
const [bufferProgress, setBufferProgress] = useState(0);
|
434
|
-
const videoEl = hlsPlayer2
|
439
|
+
const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
|
435
440
|
const setProgress = useCallback(() => {
|
441
|
+
var _a, _b;
|
436
442
|
if (!videoEl) {
|
437
443
|
return;
|
438
444
|
}
|
439
|
-
const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable
|
445
|
+
const duration = isFinite(videoEl.duration) ? videoEl.duration : ((_a = videoEl.seekable) == null ? void 0 : _a.end(0)) || 0;
|
440
446
|
const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, duration));
|
441
447
|
let bufferProgress2 = 0;
|
442
448
|
if (videoEl.buffered.length > 0) {
|
443
|
-
bufferProgress2 = Math.floor(getPercentage(videoEl.buffered
|
449
|
+
bufferProgress2 = Math.floor(getPercentage((_b = videoEl.buffered) == null ? void 0 : _b.end(0), duration));
|
444
450
|
}
|
445
451
|
if (!isNaN(videoProgress2)) {
|
446
452
|
setVideoProgress(videoProgress2);
|
@@ -461,18 +467,19 @@ var VideoProgress = ({
|
|
461
467
|
}
|
462
468
|
videoEl.addEventListener("timeupdate", timeupdateHandler);
|
463
469
|
return function cleanup() {
|
464
|
-
videoEl
|
470
|
+
videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
|
465
471
|
};
|
466
472
|
}, [setProgress, timeupdateHandler, videoEl]);
|
467
473
|
const onProgress = (progress) => {
|
474
|
+
var _a;
|
468
475
|
const progress1 = Math.floor(getPercentage(progress[0], 100));
|
469
|
-
const videoEl2 = hlsPlayer2
|
476
|
+
const videoEl2 = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
|
470
477
|
if (!videoEl2) {
|
471
478
|
return;
|
472
479
|
}
|
473
|
-
const duration = isFinite(videoEl2.duration) ? videoEl2.duration : videoEl2.seekable
|
480
|
+
const duration = isFinite(videoEl2.duration) ? videoEl2.duration : ((_a = videoEl2.seekable) == null ? void 0 : _a.end(0)) || 0;
|
474
481
|
const currentTime = progress1 * duration / 100;
|
475
|
-
hlsPlayer2
|
482
|
+
hlsPlayer2 == null ? void 0 : hlsPlayer2.seekTo(currentTime);
|
476
483
|
setProgress();
|
477
484
|
};
|
478
485
|
if (!videoEl) {
|
@@ -523,7 +530,7 @@ var VideoTime = () => {
|
|
523
530
|
const [videoTime, setVideoTime] = useState2("");
|
524
531
|
useEffect2(() => {
|
525
532
|
const timeupdateHandler = (currentTime) => {
|
526
|
-
const videoEl = hlsPlayer2
|
533
|
+
const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
|
527
534
|
if (videoEl) {
|
528
535
|
const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
|
529
536
|
setVideoTime(getDurationFromSeconds2(duration - currentTime));
|
@@ -535,7 +542,7 @@ var VideoTime = () => {
|
|
535
542
|
hlsPlayer2.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
|
536
543
|
}
|
537
544
|
return function cleanup() {
|
538
|
-
hlsPlayer2
|
545
|
+
hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
|
539
546
|
};
|
540
547
|
}, [hlsPlayer2]);
|
541
548
|
return hlsPlayer2 ? /* @__PURE__ */ React8.createElement(
|
@@ -560,8 +567,9 @@ init_define_process_env();
|
|
560
567
|
import React9, { useState as useState3 } from "react";
|
561
568
|
import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from "@100mslive/react-icons";
|
562
569
|
var VolumeControl = () => {
|
570
|
+
var _a;
|
563
571
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
564
|
-
const [volume, setVolume] = useState3(hlsPlayer2
|
572
|
+
const [volume, setVolume] = useState3((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
|
565
573
|
const [showSlider, setShowSlider] = useState3(false);
|
566
574
|
return /* @__PURE__ */ React9.createElement(
|
567
575
|
Flex,
|
@@ -584,10 +592,10 @@ var VolumeControl = () => {
|
|
584
592
|
onClick: () => {
|
585
593
|
if (volume > 0) {
|
586
594
|
setVolume(0);
|
587
|
-
hlsPlayer2
|
595
|
+
hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(0);
|
588
596
|
} else {
|
589
597
|
setVolume(100);
|
590
|
-
hlsPlayer2
|
598
|
+
hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(100);
|
591
599
|
}
|
592
600
|
}
|
593
601
|
}
|
@@ -610,7 +618,7 @@ var VolumeControl = () => {
|
|
610
618
|
step: 1,
|
611
619
|
value: [volume],
|
612
620
|
onValueChange: (volume2) => {
|
613
|
-
hlsPlayer2
|
621
|
+
hlsPlayer2 == null ? void 0 : hlsPlayer2.setVolume(volume2[0]);
|
614
622
|
setVolume(volume2[0]);
|
615
623
|
},
|
616
624
|
thumbStyles: { w: "$6", h: "$6" }
|
@@ -671,7 +679,9 @@ function HLSAutoplayBlockedPrompt({
|
|
671
679
|
color: "#000",
|
672
680
|
r: "$2"
|
673
681
|
},
|
674
|
-
onClick:
|
682
|
+
onClick: () => __async(this, null, function* () {
|
683
|
+
return yield unblockAutoPlay();
|
684
|
+
})
|
675
685
|
},
|
676
686
|
/* @__PURE__ */ React11.createElement(VolumeTwoIcon2, { width: "32", height: "32" }),
|
677
687
|
/* @__PURE__ */ React11.createElement(
|
@@ -692,19 +702,19 @@ function HLSAutoplayBlockedPrompt({
|
|
692
702
|
Dialog.Root,
|
693
703
|
{
|
694
704
|
open,
|
695
|
-
onOpenChange:
|
705
|
+
onOpenChange: (value) => __async(this, null, function* () {
|
696
706
|
if (!value) {
|
697
|
-
|
707
|
+
yield unblockAutoPlay();
|
698
708
|
}
|
699
|
-
}
|
709
|
+
})
|
700
710
|
},
|
701
711
|
/* @__PURE__ */ React11.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React11.createElement(DialogRow, null, /* @__PURE__ */ React11.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React11.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React11.createElement(
|
702
712
|
Button,
|
703
713
|
{
|
704
714
|
variant: "primary",
|
705
|
-
onClick:
|
706
|
-
|
707
|
-
}
|
715
|
+
onClick: () => __async(this, null, function* () {
|
716
|
+
yield unblockAutoPlay();
|
717
|
+
})
|
708
718
|
},
|
709
719
|
"Play stream"
|
710
720
|
)))
|
@@ -717,7 +727,7 @@ import React12 from "react";
|
|
717
727
|
import { ClosedCaptionIcon, OpenCaptionIcon } from "@100mslive/react-icons";
|
718
728
|
function HLSCaptionSelector({ isEnabled }) {
|
719
729
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
720
|
-
return /* @__PURE__ */ React12.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React12.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2
|
730
|
+
return /* @__PURE__ */ React12.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React12.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ React12.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React12.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
|
721
731
|
}
|
722
732
|
|
723
733
|
// src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
|
@@ -798,7 +808,7 @@ function HLSQualitySelector({
|
|
798
808
|
},
|
799
809
|
/* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
|
800
810
|
/* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
|
801
|
-
!isAuto && layer.width === selection
|
811
|
+
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
|
802
812
|
);
|
803
813
|
}),
|
804
814
|
/* @__PURE__ */ React13.createElement(
|
@@ -893,7 +903,7 @@ function HLSQualitySelector({
|
|
893
903
|
onClick: () => onQualityChange(layer),
|
894
904
|
key: layer.width,
|
895
905
|
css: {
|
896
|
-
bg: !isAuto && layer.width === selection
|
906
|
+
bg: !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) ? "$surface_default" : "$surface_bright",
|
897
907
|
"&:hover": {
|
898
908
|
bg: "$surface_brighter"
|
899
909
|
},
|
@@ -904,7 +914,7 @@ function HLSQualitySelector({
|
|
904
914
|
},
|
905
915
|
/* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
|
906
916
|
/* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
|
907
|
-
!isAuto && layer.width === selection
|
917
|
+
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React13.createElement(CheckIcon, { width: "16px", height: "16px" })
|
908
918
|
);
|
909
919
|
}),
|
910
920
|
/* @__PURE__ */ React13.createElement(
|
@@ -995,7 +1005,7 @@ var ToggleChat = ({ isFullScreen = false }) => {
|
|
995
1005
|
const { elements } = useRoomLayoutConferencingScreen();
|
996
1006
|
const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
|
997
1007
|
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
|
998
|
-
const showChat = !!elements
|
1008
|
+
const showChat = !!(elements == null ? void 0 : elements.chat);
|
999
1009
|
const isMobile = useMedia4(config.media.md);
|
1000
1010
|
const hmsActions = useHMSActions();
|
1001
1011
|
useEffect3(() => {
|
@@ -1011,6 +1021,7 @@ var ToggleChat = ({ isFullScreen = false }) => {
|
|
1011
1021
|
return null;
|
1012
1022
|
};
|
1013
1023
|
var HLSView = () => {
|
1024
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
1014
1025
|
const videoRef = useRef(null);
|
1015
1026
|
const hlsViewRef = useRef();
|
1016
1027
|
const { elements } = useRoomLayoutConferencingScreen();
|
@@ -1021,7 +1032,7 @@ var HLSView = () => {
|
|
1021
1032
|
const { themeType } = useTheme();
|
1022
1033
|
const [streamEnded, setStreamEnded] = useState4(false);
|
1023
1034
|
let [hlsStatsState, setHlsStatsState] = useState4(null);
|
1024
|
-
const hlsUrl = hlsState.variants[0]
|
1035
|
+
const hlsUrl = (_a = hlsState.variants[0]) == null ? void 0 : _a.url;
|
1025
1036
|
const [availableLayers, setAvailableLayers] = useState4([]);
|
1026
1037
|
const [isVideoLive, setIsVideoLive] = useState4(true);
|
1027
1038
|
const [isCaptionEnabled, setIsCaptionEnabled] = useState4(true);
|
@@ -1045,7 +1056,7 @@ var HLSView = () => {
|
|
1045
1056
|
const [seekProgress, setSeekProgress] = useState4(false);
|
1046
1057
|
const isFullScreenSupported = screenfull.isEnabled;
|
1047
1058
|
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
|
1048
|
-
const showChat = !!elements
|
1059
|
+
const showChat = !!(elements == null ? void 0 : elements.chat);
|
1049
1060
|
const isMobile = useMedia4(config.media.md);
|
1050
1061
|
const isLandscape = useIsLandscape();
|
1051
1062
|
const isFullScreen = useFullscreen(hlsViewRef, show, {
|
@@ -1056,11 +1067,11 @@ var HLSView = () => {
|
|
1056
1067
|
const videoEl = videoRef.current;
|
1057
1068
|
const showLoader2 = () => setShowLoader(true);
|
1058
1069
|
const hideLoader = () => setShowLoader(false);
|
1059
|
-
videoEl
|
1060
|
-
videoEl
|
1070
|
+
videoEl == null ? void 0 : videoEl.addEventListener("playing", hideLoader);
|
1071
|
+
videoEl == null ? void 0 : videoEl.addEventListener("waiting", showLoader2);
|
1061
1072
|
return () => {
|
1062
|
-
videoEl
|
1063
|
-
videoEl
|
1073
|
+
videoEl == null ? void 0 : videoEl.removeEventListener("playing", hideLoader);
|
1074
|
+
videoEl == null ? void 0 : videoEl.removeEventListener("waiting", showLoader2);
|
1064
1075
|
};
|
1065
1076
|
}, []);
|
1066
1077
|
useEffect3(() => {
|
@@ -1071,7 +1082,7 @@ var HLSView = () => {
|
|
1071
1082
|
useEffect3(() => {
|
1072
1083
|
if (!notification)
|
1073
1084
|
return;
|
1074
|
-
const toastID = toastMap
|
1085
|
+
const toastID = toastMap == null ? void 0 : toastMap[notification.data.id];
|
1075
1086
|
if (toastID) {
|
1076
1087
|
ToastManager.removeToast(toastMap[notification.data.id]);
|
1077
1088
|
delete toastMap[notification.data.id];
|
@@ -1081,18 +1092,19 @@ var HLSView = () => {
|
|
1081
1092
|
const videoElem = videoRef.current;
|
1082
1093
|
const setStreamEndedCallback = () => {
|
1083
1094
|
setStreamEnded(true);
|
1084
|
-
videoElem
|
1095
|
+
videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
|
1085
1096
|
};
|
1086
|
-
videoElem
|
1097
|
+
videoElem == null ? void 0 : videoElem.addEventListener("ended", setStreamEndedCallback);
|
1087
1098
|
return () => {
|
1088
|
-
videoElem
|
1099
|
+
videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
|
1089
1100
|
};
|
1090
1101
|
}, [hlsUrl]);
|
1091
1102
|
const handleQuality = useCallback2(
|
1092
1103
|
(quality) => {
|
1104
|
+
var _a2;
|
1093
1105
|
if (hlsPlayer) {
|
1094
|
-
setIsUserSelectedAuto(quality.height
|
1095
|
-
hlsPlayer
|
1106
|
+
setIsUserSelectedAuto(((_a2 = quality.height) == null ? void 0 : _a2.toString().toLowerCase()) === "auto");
|
1107
|
+
hlsPlayer == null ? void 0 : hlsPlayer.setLayer(quality);
|
1096
1108
|
}
|
1097
1109
|
},
|
1098
1110
|
[availableLayers]
|
@@ -1102,12 +1114,14 @@ var HLSView = () => {
|
|
1102
1114
|
let videoEl = videoRef.current;
|
1103
1115
|
const manifestLoadedHandler = ({ layers }) => {
|
1104
1116
|
setAvailableLayers(layers);
|
1105
|
-
setHasCaptions(hlsPlayer
|
1117
|
+
setHasCaptions(hlsPlayer == null ? void 0 : hlsPlayer.hasCaptions());
|
1106
1118
|
};
|
1107
1119
|
const layerUpdatedHandler = ({ layer }) => {
|
1108
1120
|
setCurrentSelectedQuality(layer);
|
1109
1121
|
};
|
1110
|
-
const metadataLoadedHandler = (
|
1122
|
+
const metadataLoadedHandler = (_a2) => {
|
1123
|
+
var _b2 = _a2, { payload } = _b2, rest = __objRest(_b2, ["payload"]);
|
1124
|
+
var _a3;
|
1111
1125
|
const parsePayload = (str) => {
|
1112
1126
|
try {
|
1113
1127
|
return JSON.parse(str);
|
@@ -1152,7 +1166,7 @@ var HLSView = () => {
|
|
1152
1166
|
}
|
1153
1167
|
switch (parsedPayload.type) {
|
1154
1168
|
case EMOJI_REACTION_TYPE:
|
1155
|
-
window.showFlyingEmoji
|
1169
|
+
(_a3 = window.showFlyingEmoji) == null ? void 0 : _a3.call(window, { emojiId: parsedPayload == null ? void 0 : parsedPayload.emojiId, senderId: parsedPayload == null ? void 0 : parsedPayload.senderId });
|
1156
1170
|
break;
|
1157
1171
|
default: {
|
1158
1172
|
const toast = {
|
@@ -1173,15 +1187,13 @@ var HLSView = () => {
|
|
1173
1187
|
};
|
1174
1188
|
const playbackEventHandler = (data) => {
|
1175
1189
|
setIsPaused(data.state === HLSPlaybackState.paused);
|
1176
|
-
setHoverControlsVisible({
|
1177
|
-
...hoverControlsVisible,
|
1190
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
|
1178
1191
|
pausePlay: true
|
1179
|
-
});
|
1192
|
+
}));
|
1180
1193
|
setTimeout(() => {
|
1181
|
-
setHoverControlsVisible({
|
1182
|
-
...hoverControlsVisible,
|
1194
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
|
1183
1195
|
pausePlay: false
|
1184
|
-
});
|
1196
|
+
}));
|
1185
1197
|
}, 2e3);
|
1186
1198
|
};
|
1187
1199
|
const captionEnabledEventHandler = (isCaptionEnabled2) => {
|
@@ -1214,22 +1226,22 @@ var HLSView = () => {
|
|
1214
1226
|
useEffect3(() => {
|
1215
1227
|
const onHLSStats = (state) => setHlsStatsState(state);
|
1216
1228
|
if (enablHlsStats) {
|
1217
|
-
hlsPlayer
|
1229
|
+
hlsPlayer == null ? void 0 : hlsPlayer.on(HMSHLSPlayerEvents2.STATS, onHLSStats);
|
1218
1230
|
} else {
|
1219
|
-
hlsPlayer
|
1231
|
+
hlsPlayer == null ? void 0 : hlsPlayer.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
|
1220
1232
|
}
|
1221
1233
|
return () => {
|
1222
|
-
hlsPlayer
|
1234
|
+
hlsPlayer == null ? void 0 : hlsPlayer.off(HMSHLSPlayerEvents2.STATS, onHLSStats);
|
1223
1235
|
};
|
1224
1236
|
}, [enablHlsStats]);
|
1225
|
-
const unblockAutoPlay =
|
1237
|
+
const unblockAutoPlay = () => __async(void 0, null, function* () {
|
1226
1238
|
try {
|
1227
|
-
|
1239
|
+
yield hlsPlayer.play();
|
1228
1240
|
setIsHlsAutoplayBlocked(false);
|
1229
1241
|
} catch (error) {
|
1230
1242
|
console.error("Tried to unblock Autoplay failed with", error.message);
|
1231
1243
|
}
|
1232
|
-
};
|
1244
|
+
});
|
1233
1245
|
const sfnOverlayClose = () => {
|
1234
1246
|
hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);
|
1235
1247
|
};
|
@@ -1255,64 +1267,62 @@ var HLSView = () => {
|
|
1255
1267
|
}, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
|
1256
1268
|
const onSeekTo = useCallback2(
|
1257
1269
|
(seek) => {
|
1270
|
+
var _a2;
|
1258
1271
|
match({ isLandscape, isMobile, seek }).with({ seek: -10, isMobile: false, isLandscape: false }, () => {
|
1259
|
-
setHoverControlsVisible({
|
1272
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekBackward: true }));
|
1260
1273
|
setTimeout(() => {
|
1261
|
-
setHoverControlsVisible({
|
1262
|
-
...hoverControlsVisible,
|
1274
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
|
1263
1275
|
seekBackward: false
|
1264
|
-
});
|
1276
|
+
}));
|
1265
1277
|
}, 1e3);
|
1266
1278
|
}).with({ seek: 10, isMobile: false, isLandscape: false }, () => {
|
1267
|
-
setHoverControlsVisible({
|
1279
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), { seekForward: true }));
|
1268
1280
|
setTimeout(() => {
|
1269
|
-
setHoverControlsVisible({
|
1270
|
-
...hoverControlsVisible,
|
1281
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
|
1271
1282
|
seekForward: false
|
1272
|
-
});
|
1283
|
+
}));
|
1273
1284
|
}, 1e3);
|
1274
1285
|
}).otherwise(() => null);
|
1275
|
-
hlsPlayer
|
1286
|
+
hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
|
1276
1287
|
},
|
1277
1288
|
[hoverControlsVisible, isLandscape, isMobile]
|
1278
1289
|
);
|
1279
1290
|
const onDoubleClickHandler = useCallback2(
|
1280
1291
|
(event) => {
|
1281
|
-
|
1292
|
+
var _a2;
|
1293
|
+
if (!(isMobile || isLandscape) || ((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) !== HLSPlaylistType.DVR) {
|
1282
1294
|
return;
|
1283
1295
|
}
|
1284
1296
|
const sidePercentage = event.screenX * 100 / event.target.clientWidth;
|
1285
1297
|
if (sidePercentage < 45) {
|
1286
|
-
setHoverControlsVisible({
|
1287
|
-
...hoverControlsVisible,
|
1298
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
|
1288
1299
|
seekBackward: true
|
1289
|
-
});
|
1300
|
+
}));
|
1290
1301
|
onSeekTo(-10);
|
1291
1302
|
} else {
|
1292
|
-
setHoverControlsVisible({
|
1293
|
-
...hoverControlsVisible,
|
1303
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
|
1294
1304
|
seekForward: true
|
1295
|
-
});
|
1305
|
+
}));
|
1296
1306
|
onSeekTo(10);
|
1297
1307
|
}
|
1298
1308
|
setTimeout(() => {
|
1299
|
-
setHoverControlsVisible({
|
1300
|
-
...hoverControlsVisible,
|
1309
|
+
setHoverControlsVisible(__spreadProps(__spreadValues({}, hoverControlsVisible), {
|
1301
1310
|
seekForward: false,
|
1302
1311
|
seekBackward: false
|
1303
|
-
});
|
1312
|
+
}));
|
1304
1313
|
}, 1e3);
|
1305
1314
|
},
|
1306
|
-
[hlsState
|
1315
|
+
[hlsState == null ? void 0 : hlsState.variants, hoverControlsVisible, isLandscape, isMobile, onSeekTo]
|
1307
1316
|
);
|
1308
|
-
const onClickHandler = useCallback2(
|
1309
|
-
|
1317
|
+
const onClickHandler = useCallback2(() => __async(void 0, null, function* () {
|
1318
|
+
var _a2;
|
1319
|
+
match({ isMobile, isLandscape, playlist_type: (_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type }).with({ playlist_type: HLSPlaylistType.DVR, isMobile: false, isLandscape: false }, () => __async(void 0, null, function* () {
|
1310
1320
|
if (isPaused) {
|
1311
|
-
|
1321
|
+
yield hlsPlayer == null ? void 0 : hlsPlayer.play();
|
1312
1322
|
} else {
|
1313
|
-
hlsPlayer
|
1323
|
+
hlsPlayer == null ? void 0 : hlsPlayer.pause();
|
1314
1324
|
}
|
1315
|
-
}).when(
|
1325
|
+
})).when(
|
1316
1326
|
({ isMobile: isMobile2, isLandscape: isLandscape2 }) => isMobile2 || isLandscape2,
|
1317
1327
|
() => {
|
1318
1328
|
setControlsVisible((value) => !value);
|
@@ -1321,7 +1331,7 @@ var HLSView = () => {
|
|
1321
1331
|
}
|
1322
1332
|
}
|
1323
1333
|
).otherwise(() => null);
|
1324
|
-
}, [hlsState
|
1334
|
+
}), [hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, isPaused]);
|
1325
1335
|
const onHoverHandler = useCallback2(
|
1326
1336
|
(event) => {
|
1327
1337
|
event.preventDefault();
|
@@ -1379,7 +1389,7 @@ var HLSView = () => {
|
|
1379
1389
|
}
|
1380
1390
|
},
|
1381
1391
|
hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React15.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
|
1382
|
-
/* @__PURE__ */ React15.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, hlsStatsState
|
1392
|
+
/* @__PURE__ */ React15.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React15.createElement(
|
1383
1393
|
Flex,
|
1384
1394
|
{
|
1385
1395
|
id: "hls-player-container",
|
@@ -1393,11 +1403,12 @@ var HLSView = () => {
|
|
1393
1403
|
},
|
1394
1404
|
outline: "none"
|
1395
1405
|
},
|
1396
|
-
onKeyDown:
|
1397
|
-
|
1398
|
-
|
1406
|
+
onKeyDown: (event) => __async(void 0, null, function* () {
|
1407
|
+
var _a2;
|
1408
|
+
if (((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) === HLSPlaylistType.DVR) {
|
1409
|
+
yield keyHandler(event);
|
1399
1410
|
}
|
1400
|
-
},
|
1411
|
+
}),
|
1401
1412
|
tabIndex: "0"
|
1402
1413
|
},
|
1403
1414
|
!(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
|
@@ -1438,7 +1449,7 @@ var HLSView = () => {
|
|
1438
1449
|
size: "100%"
|
1439
1450
|
}
|
1440
1451
|
},
|
1441
|
-
!showLoader && hlsState
|
1452
|
+
!showLoader && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
|
1442
1453
|
HMSVideoPlayer.PlayPauseSeekControls.Overlay,
|
1443
1454
|
{
|
1444
1455
|
isPaused,
|
@@ -1446,7 +1457,7 @@ var HLSView = () => {
|
|
1446
1457
|
hoverControlsVisible
|
1447
1458
|
}
|
1448
1459
|
)
|
1449
|
-
), isMobile || isLandscape ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, !showLoader && hlsState
|
1460
|
+
), isMobile || isLandscape ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, !showLoader && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React15.createElement(
|
1450
1461
|
HMSVideoPlayer.PlayPauseSeekControls.Overlay,
|
1451
1462
|
{
|
1452
1463
|
isPaused,
|
@@ -1513,7 +1524,7 @@ var HLSView = () => {
|
|
1513
1524
|
align: "start",
|
1514
1525
|
css: {
|
1515
1526
|
position: "absolute",
|
1516
|
-
bottom: isFullScreen && hlsState
|
1527
|
+
bottom: isFullScreen && ((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === HLSPlaylistType.DVR ? "$8" : "0",
|
1517
1528
|
left: "0",
|
1518
1529
|
zIndex: 1,
|
1519
1530
|
background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
|
@@ -1523,7 +1534,7 @@ var HLSView = () => {
|
|
1523
1534
|
transition: "visibility 0s 0.5s, opacity 0.5s linear"
|
1524
1535
|
}
|
1525
1536
|
},
|
1526
|
-
hlsState
|
1537
|
+
((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
|
1527
1538
|
/* @__PURE__ */ React15.createElement(
|
1528
1539
|
HMSVideoPlayer.Controls.Root,
|
1529
1540
|
{
|
@@ -1532,15 +1543,15 @@ var HLSView = () => {
|
|
1532
1543
|
},
|
1533
1544
|
onClick: (e) => e.stopPropagation()
|
1534
1545
|
},
|
1535
|
-
/* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(React15.Fragment, null, hlsState
|
1546
|
+
/* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(React15.Fragment, null, ((_f = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _f.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(HMSVideoPlayer.PlayPauseSeekControls.Button, { isPaused, onSeekTo }), !isVideoLive ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Duration, null) : null) : null, /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React15.createElement(
|
1536
1547
|
IconButton,
|
1537
1548
|
{
|
1538
1549
|
css: { px: "$2" },
|
1539
|
-
onClick:
|
1550
|
+
onClick: (e) => __async(void 0, null, function* () {
|
1540
1551
|
e.stopPropagation();
|
1541
|
-
|
1552
|
+
yield hlsPlayer == null ? void 0 : hlsPlayer.seekToLivePosition();
|
1542
1553
|
setIsVideoLive(true);
|
1543
|
-
},
|
1554
|
+
}),
|
1544
1555
|
key: "jump-to-live_btn",
|
1545
1556
|
"data-testid": "jump-to-live_btn"
|
1546
1557
|
},
|
@@ -1565,7 +1576,7 @@ var HLSView = () => {
|
|
1565
1576
|
},
|
1566
1577
|
isVideoLive ? "LIVE" : "GO LIVE"
|
1567
1578
|
)))
|
1568
|
-
), (isMobile || isLandscape) && !isVideoLive && hlsState
|
1579
|
+
), (isMobile || isLandscape) && !isVideoLive && ((_g = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _g.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React15.createElement(HMSVideoPlayer.Duration, null) : null),
|
1569
1580
|
/* @__PURE__ */ React15.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React15.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React15.createElement(
|
1570
1581
|
HLSQualitySelector,
|
1571
1582
|
{
|
@@ -1589,4 +1600,4 @@ var HLSView_default = HLSView;
|
|
1589
1600
|
export {
|
1590
1601
|
HLSView_default as default
|
1591
1602
|
};
|
1592
|
-
//# sourceMappingURL=HLSView-
|
1603
|
+
//# sourceMappingURL=HLSView-QKPBZFZP.js.map
|