@100mslive/roomkit-react 0.2.8-alpha.8 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{HLSView-6KPQ2KD6.js → HLSView-LZOTIUWE.js} +152 -96
- package/dist/HLSView-LZOTIUWE.js.map +7 -0
- package/dist/Prebuilt/components/Chat/Chat.d.ts +1 -1
- package/dist/Prebuilt/components/HMSVideo/VideoProgress.d.ts +3 -2
- package/dist/Prebuilt/components/HMSVideo/index.d.ts +3 -2
- package/dist/Prebuilt/components/SidePaneTabs.d.ts +0 -1
- package/dist/Prebuilt/layouts/SidePane.d.ts +1 -1
- package/dist/{chunk-JQCSGJIR.js → chunk-LCECN6XD.js} +297 -238
- package/dist/chunk-LCECN6XD.js.map +7 -0
- package/dist/index.cjs.js +446 -332
- package/dist/index.cjs.js.map +3 -3
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +96 -61
- package/dist/meta.esbuild.json +109 -73
- package/package.json +6 -6
- package/src/Prebuilt/components/Chat/Chat.tsx +23 -4
- package/src/Prebuilt/components/Chat/ChatFooter.tsx +2 -2
- package/src/Prebuilt/components/Chat/EmptyChat.tsx +5 -1
- package/src/Prebuilt/components/ConferenceScreen.tsx +13 -1
- package/src/Prebuilt/components/EmojiReaction.jsx +2 -2
- package/src/Prebuilt/components/Footer/RoleOptions.tsx +125 -126
- package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx +13 -10
- package/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx +6 -4
- package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx +38 -25
- package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +1 -1
- package/src/Prebuilt/components/MwebLandscapePrompt.tsx +9 -3
- package/src/Prebuilt/components/Polls/common/utils.ts +1 -1
- package/src/Prebuilt/components/SidePaneTabs.tsx +1 -4
- package/src/Prebuilt/layouts/HLSView.jsx +293 -239
- package/src/Prebuilt/layouts/SidePane.tsx +73 -49
- package/src/Prebuilt/layouts/VideoStreamingSection.tsx +10 -2
- package/dist/HLSView-6KPQ2KD6.js.map +0 -7
- package/dist/chunk-JQCSGJIR.js.map +0 -7
@@ -14,6 +14,8 @@ import {
|
|
14
14
|
LeaveRoom,
|
15
15
|
Loading,
|
16
16
|
Logo,
|
17
|
+
POLL_STATE,
|
18
|
+
POLL_VIEWS,
|
17
19
|
RoomDetailsRow,
|
18
20
|
SIDE_PANE_OPTIONS,
|
19
21
|
Sheet,
|
@@ -30,19 +32,19 @@ import {
|
|
30
32
|
theme,
|
31
33
|
useIsLandscape,
|
32
34
|
useIsSidepaneTypeOpen,
|
33
|
-
usePollViewToggle,
|
34
35
|
useRoomLayoutConferencingScreen,
|
35
36
|
useRoomLayoutHeader,
|
36
37
|
useSidepaneToggle,
|
37
38
|
useTheme
|
38
|
-
} from "./chunk-
|
39
|
+
} from "./chunk-LCECN6XD.js";
|
39
40
|
|
40
41
|
// src/Prebuilt/layouts/HLSView.jsx
|
41
42
|
init_define_process_env();
|
42
|
-
import React14, { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
|
43
|
-
import { useFullscreen, useMedia as
|
43
|
+
import React14, { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState4 } from "react";
|
44
|
+
import { useFullscreen, useMedia as useMedia3, usePrevious, useToggle } from "react-use";
|
44
45
|
import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
|
45
46
|
import screenfull from "screenfull";
|
47
|
+
import { match, P } from "ts-pattern";
|
46
48
|
import {
|
47
49
|
HLSPlaylistType,
|
48
50
|
HMSNotificationTypes,
|
@@ -166,11 +168,8 @@ var RightControls = styled(Flex, {
|
|
166
168
|
// src/Prebuilt/components/HMSVideo/HMSVideo.jsx
|
167
169
|
init_define_process_env();
|
168
170
|
import React2, { forwardRef } from "react";
|
169
|
-
import { useMedia } from "react-use";
|
170
171
|
var HMSVideo = forwardRef((_a, videoRef) => {
|
171
172
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
172
|
-
const isLandscape = useIsLandscape();
|
173
|
-
const isMobile = useMedia(config.media.md);
|
174
173
|
return /* @__PURE__ */ React2.createElement(
|
175
174
|
Flex,
|
176
175
|
__spreadValues({
|
@@ -178,6 +177,13 @@ var HMSVideo = forwardRef((_a, videoRef) => {
|
|
178
177
|
css: {
|
179
178
|
size: "100%",
|
180
179
|
position: "relative",
|
180
|
+
justifyContent: "center",
|
181
|
+
"@md": {
|
182
|
+
height: "auto",
|
183
|
+
"& video": {
|
184
|
+
height: "$60 !important"
|
185
|
+
}
|
186
|
+
},
|
181
187
|
"& video::cue": {
|
182
188
|
color: "white",
|
183
189
|
whiteSpace: "pre-line",
|
@@ -201,16 +207,16 @@ var HMSVideo = forwardRef((_a, videoRef) => {
|
|
201
207
|
"video",
|
202
208
|
{
|
203
209
|
style: {
|
204
|
-
flex: "1 1 0",
|
205
210
|
margin: "0 auto",
|
206
|
-
minHeight: "0",
|
207
211
|
objectFit: "contain",
|
208
|
-
width: "
|
209
|
-
height:
|
210
|
-
|
212
|
+
width: "auto",
|
213
|
+
height: "auto",
|
214
|
+
maxWidth: "100%",
|
215
|
+
maxHeight: "100%"
|
211
216
|
},
|
212
217
|
ref: videoRef,
|
213
|
-
playsInline: true
|
218
|
+
playsInline: true,
|
219
|
+
disablePictureInPicture: true
|
214
220
|
}
|
215
221
|
),
|
216
222
|
children
|
@@ -261,7 +267,7 @@ var SeekControls = ({
|
|
261
267
|
|
262
268
|
// src/Prebuilt/components/HMSVideo/VideoProgress.tsx
|
263
269
|
init_define_process_env();
|
264
|
-
import React6, { useEffect, useState } from "react";
|
270
|
+
import React6, { useCallback, useEffect, useState } from "react";
|
265
271
|
|
266
272
|
// src/Prebuilt/components/HMSVideo/utils.ts
|
267
273
|
init_define_process_env();
|
@@ -285,48 +291,59 @@ function getDurationFromSeconds2(timeInSeconds) {
|
|
285
291
|
}
|
286
292
|
|
287
293
|
// src/Prebuilt/components/HMSVideo/VideoProgress.tsx
|
288
|
-
var VideoProgress = ({
|
294
|
+
var VideoProgress = ({
|
295
|
+
seekProgress,
|
296
|
+
setSeekProgress
|
297
|
+
}) => {
|
289
298
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
290
299
|
const [videoProgress, setVideoProgress] = useState(0);
|
291
300
|
const [bufferProgress, setBufferProgress] = useState(0);
|
292
301
|
const videoEl = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
|
293
|
-
const
|
294
|
-
|
295
|
-
|
302
|
+
const setProgress = useCallback(() => {
|
303
|
+
var _a, _b;
|
304
|
+
if (!videoEl) {
|
305
|
+
return;
|
306
|
+
}
|
307
|
+
const duration = isFinite(videoEl.duration) ? videoEl.duration : ((_a = videoEl.seekable) == null ? void 0 : _a.end(0)) || 0;
|
308
|
+
const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, duration));
|
309
|
+
let bufferProgress2 = 0;
|
310
|
+
if (videoEl.buffered.length > 0) {
|
311
|
+
bufferProgress2 = Math.floor(getPercentage((_b = videoEl.buffered) == null ? void 0 : _b.end(0), duration));
|
312
|
+
}
|
313
|
+
setVideoProgress(isNaN(videoProgress2) ? 0 : videoProgress2);
|
314
|
+
setBufferProgress(isNaN(bufferProgress2) ? 0 : bufferProgress2);
|
315
|
+
}, [videoEl]);
|
316
|
+
const timeupdateHandler = useCallback(() => {
|
317
|
+
if (!videoEl || seekProgress) {
|
318
|
+
return;
|
319
|
+
}
|
320
|
+
setProgress();
|
321
|
+
}, [seekProgress, setProgress, videoEl]);
|
296
322
|
useEffect(() => {
|
297
323
|
if (!videoEl) {
|
298
324
|
return;
|
299
325
|
}
|
300
|
-
const timeupdateHandler = () => {
|
301
|
-
var _a;
|
302
|
-
if (!videoEl) {
|
303
|
-
return;
|
304
|
-
}
|
305
|
-
const videoProgress2 = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));
|
306
|
-
let bufferProgress2 = 0;
|
307
|
-
if (videoEl.buffered.length > 0) {
|
308
|
-
bufferProgress2 = Math.floor(getPercentage((_a = videoEl.buffered) == null ? void 0 : _a.end(0), videoEl.duration));
|
309
|
-
}
|
310
|
-
setVideoProgress(isNaN(videoProgress2) ? 0 : videoProgress2);
|
311
|
-
setBufferProgress(isNaN(bufferProgress2) ? 0 : bufferProgress2);
|
312
|
-
};
|
313
326
|
videoEl.addEventListener("timeupdate", timeupdateHandler);
|
314
327
|
return function cleanup() {
|
315
328
|
videoEl == null ? void 0 : videoEl.removeEventListener("timeupdate", timeupdateHandler);
|
316
329
|
};
|
317
|
-
}, [videoEl]);
|
330
|
+
}, [timeupdateHandler, videoEl]);
|
318
331
|
const onProgress = (progress) => {
|
332
|
+
var _a;
|
319
333
|
const progress1 = Math.floor(getPercentage(progress[0], 100));
|
320
334
|
const videoEl2 = hlsPlayer2 == null ? void 0 : hlsPlayer2.getVideoElement();
|
321
|
-
|
322
|
-
|
323
|
-
onValueChange(currentTime);
|
335
|
+
if (!videoEl2) {
|
336
|
+
return;
|
324
337
|
}
|
338
|
+
const duration = isFinite(videoEl2.duration) ? videoEl2.duration : ((_a = videoEl2.seekable) == null ? void 0 : _a.end(0)) || 0;
|
339
|
+
const currentTime = progress1 * duration / 100;
|
340
|
+
hlsPlayer2 == null ? void 0 : hlsPlayer2.seekTo(currentTime);
|
341
|
+
setProgress();
|
325
342
|
};
|
326
343
|
if (!videoEl) {
|
327
344
|
return null;
|
328
345
|
}
|
329
|
-
return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch"
|
346
|
+
return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ React6.createElement(
|
330
347
|
Slider,
|
331
348
|
{
|
332
349
|
id: "video-actual-rest",
|
@@ -334,8 +351,7 @@ var VideoProgress = ({ isDvr = true }) => {
|
|
334
351
|
cursor: "pointer",
|
335
352
|
h: "$2",
|
336
353
|
zIndex: 1,
|
337
|
-
transition: `all .2s ease .5s
|
338
|
-
pointerEvents: isDvr ? "" : "none"
|
354
|
+
transition: `all .2s ease .5s`
|
339
355
|
},
|
340
356
|
min: 0,
|
341
357
|
max: 100,
|
@@ -343,7 +359,9 @@ var VideoProgress = ({ isDvr = true }) => {
|
|
343
359
|
value: [videoProgress],
|
344
360
|
showTooltip: false,
|
345
361
|
onValueChange: onProgress,
|
346
|
-
|
362
|
+
onPointerDown: () => setSeekProgress(true),
|
363
|
+
onPointerUp: () => setSeekProgress(false),
|
364
|
+
thumbStyles: { w: "$6", h: "$6" }
|
347
365
|
}
|
348
366
|
), /* @__PURE__ */ React6.createElement(
|
349
367
|
Box,
|
@@ -499,14 +517,14 @@ var FullScreenButton = ({ isFullScreen, onToggle }) => {
|
|
499
517
|
// src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx
|
500
518
|
init_define_process_env();
|
501
519
|
import React10 from "react";
|
502
|
-
import { useMedia
|
520
|
+
import { useMedia } from "react-use";
|
503
521
|
import { VolumeTwoIcon as VolumeTwoIcon2 } from "@100mslive/react-icons";
|
504
522
|
function HLSAutoplayBlockedPrompt({
|
505
523
|
open,
|
506
524
|
unblockAutoPlay
|
507
525
|
}) {
|
508
526
|
const isLandscape = useIsLandscape();
|
509
|
-
const isMobile =
|
527
|
+
const isMobile = useMedia(config.media.md);
|
510
528
|
if ((isMobile || isLandscape) && open) {
|
511
529
|
return /* @__PURE__ */ React10.createElement(
|
512
530
|
IconButton,
|
@@ -571,7 +589,7 @@ function HLSCaptionSelector({ isEnabled }) {
|
|
571
589
|
// src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
|
572
590
|
init_define_process_env();
|
573
591
|
import React12 from "react";
|
574
|
-
import { useMedia as
|
592
|
+
import { useMedia as useMedia2 } from "react-use";
|
575
593
|
import { CheckIcon, CrossIcon as CrossIcon2, SettingsIcon } from "@100mslive/react-icons";
|
576
594
|
function HLSQualitySelector({
|
577
595
|
open,
|
@@ -582,7 +600,7 @@ function HLSQualitySelector({
|
|
582
600
|
isAuto,
|
583
601
|
containerRef
|
584
602
|
}) {
|
585
|
-
const isMobile =
|
603
|
+
const isMobile = useMedia2(config.media.md);
|
586
604
|
const isLandscape = useIsLandscape();
|
587
605
|
if (layers.length === 0) {
|
588
606
|
return null;
|
@@ -783,7 +801,7 @@ init_define_process_env();
|
|
783
801
|
import React13 from "react";
|
784
802
|
import { ChevronDownIcon } from "@100mslive/react-icons";
|
785
803
|
var HLSViewTitle = () => {
|
786
|
-
const { title, details } = useRoomLayoutHeader();
|
804
|
+
const { title, details, description } = useRoomLayoutHeader();
|
787
805
|
const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
|
788
806
|
const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
|
789
807
|
if (isDetailSidepaneOpen) {
|
@@ -832,20 +850,36 @@ var HLSViewTitle = () => {
|
|
832
850
|
}
|
833
851
|
},
|
834
852
|
/* @__PURE__ */ React13.createElement(Logo, null),
|
835
|
-
/* @__PURE__ */ React13.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ React13.createElement(Flex, null, /* @__PURE__ */ React13.createElement(RoomDetailsRow, { details }), /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more")))
|
853
|
+
/* @__PURE__ */ React13.createElement(Flex, { direction: "column" }, title ? /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, title) : null, /* @__PURE__ */ React13.createElement(Flex, null, /* @__PURE__ */ React13.createElement(RoomDetailsRow, { details }), description ? /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" }, onClick: toggleDetailsPane }, "\xA0...more") : null))
|
836
854
|
);
|
837
855
|
};
|
838
856
|
|
839
857
|
// src/Prebuilt/layouts/HLSView.jsx
|
840
858
|
var hlsPlayer;
|
841
859
|
var toastMap = {};
|
860
|
+
var ToggleChat = () => {
|
861
|
+
const { elements } = useRoomLayoutConferencingScreen();
|
862
|
+
const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
|
863
|
+
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
|
864
|
+
const showChat = !!(elements == null ? void 0 : elements.chat);
|
865
|
+
const isMobile = useMedia3(config.media.md);
|
866
|
+
const hmsActions = useHMSActions();
|
867
|
+
useEffect3(() => {
|
868
|
+
match({ sidepane, isMobile, showChat }).with({ isMobile: true, showChat: true, sidepane: P.when((value) => !value) }, () => {
|
869
|
+
toggleChat();
|
870
|
+
}).with({ showChat: false, isMobile: true, sidepane: SIDE_PANE_OPTIONS.CHAT }, () => {
|
871
|
+
hmsActions.setAppData(APP_DATA.sidePane, "");
|
872
|
+
}).otherwise(() => {
|
873
|
+
});
|
874
|
+
}, [sidepane, isMobile, toggleChat, showChat, hmsActions]);
|
875
|
+
return null;
|
876
|
+
};
|
842
877
|
var HLSView = () => {
|
843
|
-
var _a, _b, _c;
|
878
|
+
var _a, _b, _c, _d, _e, _f;
|
844
879
|
const videoRef = useRef(null);
|
845
880
|
const hlsViewRef = useRef();
|
846
881
|
const hlsState = useHMSStore(selectHLSState);
|
847
882
|
const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
|
848
|
-
const { elements, screenType } = useRoomLayoutConferencingScreen();
|
849
883
|
const notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);
|
850
884
|
const hmsActions = useHMSActions();
|
851
885
|
const { themeType } = useTheme();
|
@@ -862,29 +896,20 @@ var HLSView = () => {
|
|
862
896
|
const [isPaused, setIsPaused] = useState4(false);
|
863
897
|
const [show, toggle] = useToggle(false);
|
864
898
|
const lastHlsUrl = usePrevious(hlsUrl);
|
865
|
-
const togglePollView = usePollViewToggle();
|
866
899
|
const vanillaStore = useHMSVanillaStore();
|
867
900
|
const [controlsVisible, setControlsVisible] = useState4(true);
|
868
901
|
const [isUserSelectedAuto, setIsUserSelectedAuto] = useState4(true);
|
869
902
|
const [qualityDropDownOpen, setQualityDropDownOpen] = useState4(false);
|
870
903
|
const controlsRef = useRef(null);
|
871
904
|
const controlsTimerRef = useRef();
|
872
|
-
const
|
873
|
-
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
|
874
|
-
const showChat = !!(elements == null ? void 0 : elements.chat);
|
905
|
+
const [seekProgress, setSeekProgress] = useState4(false);
|
875
906
|
const isFullScreenSupported = screenfull.isEnabled;
|
876
|
-
const isMobile =
|
907
|
+
const isMobile = useMedia3(config.media.md);
|
877
908
|
const isLandscape = useIsLandscape();
|
878
909
|
const isFullScreen = useFullscreen(hlsViewRef, show, {
|
879
910
|
onClose: () => toggle(false)
|
880
911
|
});
|
881
912
|
const [showLoader, setShowLoader] = useState4(false);
|
882
|
-
const isMwebHLSStream = screenType === "hls_live_streaming" && isMobile;
|
883
|
-
useEffect3(() => {
|
884
|
-
if (sidepane === "" && isMwebHLSStream && showChat) {
|
885
|
-
toggleChat();
|
886
|
-
}
|
887
|
-
}, [sidepane, isMwebHLSStream, toggleChat, showChat]);
|
888
913
|
useEffect3(() => {
|
889
914
|
const videoEl = videoRef.current;
|
890
915
|
const showLoader2 = () => setShowLoader(true);
|
@@ -921,7 +946,7 @@ var HLSView = () => {
|
|
921
946
|
videoElem == null ? void 0 : videoElem.removeEventListener("ended", setStreamEndedCallback);
|
922
947
|
};
|
923
948
|
}, [hlsUrl]);
|
924
|
-
const handleQuality =
|
949
|
+
const handleQuality = useCallback2(
|
925
950
|
(quality) => {
|
926
951
|
var _a2;
|
927
952
|
if (hlsPlayer) {
|
@@ -963,7 +988,13 @@ var HLSView = () => {
|
|
963
988
|
action: /* @__PURE__ */ React14.createElement(
|
964
989
|
Button,
|
965
990
|
{
|
966
|
-
onClick: () =>
|
991
|
+
onClick: () => {
|
992
|
+
hmsActions.setAppData(APP_DATA.pollState, {
|
993
|
+
[POLL_STATE.pollInView]: pollId,
|
994
|
+
[POLL_STATE.view]: POLL_VIEWS.VOTE
|
995
|
+
});
|
996
|
+
hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
|
997
|
+
},
|
967
998
|
variant: "standard",
|
968
999
|
css: {
|
969
1000
|
backgroundColor: "$surface_bright",
|
@@ -1028,7 +1059,7 @@ var HLSView = () => {
|
|
1028
1059
|
hlsPlayer.reset();
|
1029
1060
|
};
|
1030
1061
|
}
|
1031
|
-
}, [hlsUrl,
|
1062
|
+
}, [hlsUrl, vanillaStore, hmsActions]);
|
1032
1063
|
useEffect3(() => {
|
1033
1064
|
const onHLSStats = (state) => setHlsStatsState(state);
|
1034
1065
|
if (enablHlsStats) {
|
@@ -1061,21 +1092,24 @@ var HLSView = () => {
|
|
1061
1092
|
clearTimeout(controlsTimerRef.current);
|
1062
1093
|
}
|
1063
1094
|
controlsTimerRef.current = setTimeout(() => {
|
1064
|
-
|
1095
|
+
if (!seekProgress) {
|
1096
|
+
setControlsVisible(false);
|
1097
|
+
}
|
1065
1098
|
}, 5e3);
|
1066
1099
|
return () => {
|
1067
1100
|
if (controlsTimerRef.current) {
|
1068
1101
|
clearTimeout(controlsTimerRef.current);
|
1069
1102
|
}
|
1070
1103
|
};
|
1071
|
-
}, [controlsVisible, isFullScreen, qualityDropDownOpen]);
|
1072
|
-
const onSeekTo =
|
1104
|
+
}, [controlsVisible, isFullScreen, seekProgress, qualityDropDownOpen]);
|
1105
|
+
const onSeekTo = useCallback2((seek) => {
|
1073
1106
|
var _a2;
|
1074
1107
|
hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
|
1075
1108
|
}, []);
|
1076
|
-
const onDoubleClickHandler =
|
1109
|
+
const onDoubleClickHandler = useCallback2(
|
1077
1110
|
(event) => {
|
1078
|
-
|
1111
|
+
var _a2;
|
1112
|
+
if (!(isMobile || isLandscape) || ((_a2 = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _a2.playlist_type) !== HLSPlaylistType.DVR) {
|
1079
1113
|
return;
|
1080
1114
|
}
|
1081
1115
|
const sidePercentage = event.screenX * 100 / event.target.clientWidth;
|
@@ -1089,9 +1123,9 @@ var HLSView = () => {
|
|
1089
1123
|
setIsSeekEnabled(false);
|
1090
1124
|
}, 200);
|
1091
1125
|
},
|
1092
|
-
[isLandscape, isMobile, onSeekTo]
|
1126
|
+
[hlsState == null ? void 0 : hlsState.variants, isLandscape, isMobile, onSeekTo]
|
1093
1127
|
);
|
1094
|
-
const onClickHandler =
|
1128
|
+
const onClickHandler = useCallback2(() => {
|
1095
1129
|
if (!(isMobile || isLandscape)) {
|
1096
1130
|
return;
|
1097
1131
|
}
|
@@ -1100,7 +1134,7 @@ var HLSView = () => {
|
|
1100
1134
|
clearTimeout(controlsTimerRef.current);
|
1101
1135
|
}
|
1102
1136
|
}, [isLandscape, isMobile]);
|
1103
|
-
const onHoverHandler =
|
1137
|
+
const onHoverHandler = useCallback2(
|
1104
1138
|
(event) => {
|
1105
1139
|
event.preventDefault();
|
1106
1140
|
if (isMobile || isLandscape) {
|
@@ -1110,17 +1144,33 @@ var HLSView = () => {
|
|
1110
1144
|
setControlsVisible(true);
|
1111
1145
|
return;
|
1112
1146
|
}
|
1113
|
-
if (event.type === "mouseleave") {
|
1147
|
+
if (event.type === "mouseleave" && !seekProgress) {
|
1114
1148
|
setControlsVisible(false);
|
1115
|
-
} else if (
|
1149
|
+
} else if (!controlsVisible && event.type === "mousemove") {
|
1116
1150
|
setControlsVisible(true);
|
1117
1151
|
if (controlsTimerRef.current) {
|
1118
1152
|
clearTimeout(controlsTimerRef.current);
|
1119
1153
|
}
|
1120
1154
|
}
|
1121
1155
|
},
|
1122
|
-
[controlsVisible,
|
1156
|
+
[controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress]
|
1123
1157
|
);
|
1158
|
+
if (!hlsUrl || streamEnded) {
|
1159
|
+
return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(ToggleChat, null), hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })), /* @__PURE__ */ React14.createElement(
|
1160
|
+
Flex,
|
1161
|
+
{
|
1162
|
+
key: "hls-viewer",
|
1163
|
+
id: `hls-viewer-${themeType}`,
|
1164
|
+
ref: hlsViewRef,
|
1165
|
+
direction: isMobile || isLandscape ? "column" : "row",
|
1166
|
+
justify: "center",
|
1167
|
+
css: {
|
1168
|
+
flex: isLandscape ? "2 1 0" : "1 1 0"
|
1169
|
+
}
|
1170
|
+
},
|
1171
|
+
/* @__PURE__ */ React14.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React14.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React14.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React14.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React14.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React14.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
|
1172
|
+
));
|
1173
|
+
}
|
1124
1174
|
return /* @__PURE__ */ React14.createElement(
|
1125
1175
|
Flex,
|
1126
1176
|
{
|
@@ -1128,13 +1178,18 @@ var HLSView = () => {
|
|
1128
1178
|
id: `hls-viewer-${themeType}`,
|
1129
1179
|
ref: hlsViewRef,
|
1130
1180
|
direction: isMobile || isLandscape ? "column" : "row",
|
1181
|
+
justify: "center",
|
1131
1182
|
css: {
|
1132
|
-
|
1133
|
-
|
1134
|
-
|
1183
|
+
flex: isLandscape ? "2 1 0" : "1 1 0",
|
1184
|
+
"&:fullscreen": {
|
1185
|
+
"& video": {
|
1186
|
+
height: "unset !important"
|
1187
|
+
}
|
1188
|
+
}
|
1135
1189
|
}
|
1136
1190
|
},
|
1137
|
-
|
1191
|
+
hlsViewRef.current && (isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(Box, { css: { position: "fixed", left: "$4", top: "$4", zIndex: 11 } }, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType: "hls_live_streaming", container: hlsViewRef.current })),
|
1192
|
+
/* @__PURE__ */ React14.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React14.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React14.createElement(
|
1138
1193
|
Flex,
|
1139
1194
|
{
|
1140
1195
|
id: "hls-player-container",
|
@@ -1142,7 +1197,10 @@ var HLSView = () => {
|
|
1142
1197
|
justify: "center",
|
1143
1198
|
css: {
|
1144
1199
|
size: "100%",
|
1145
|
-
margin: "0 auto"
|
1200
|
+
margin: "0 auto",
|
1201
|
+
"@md": {
|
1202
|
+
height: "auto"
|
1203
|
+
}
|
1146
1204
|
}
|
1147
1205
|
},
|
1148
1206
|
!(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
|
@@ -1169,12 +1227,13 @@ var HLSView = () => {
|
|
1169
1227
|
onDoubleClickHandler(e);
|
1170
1228
|
}
|
1171
1229
|
},
|
1172
|
-
/* @__PURE__ */ React14.createElement(React14.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React14.createElement(React14.Fragment, null,
|
1230
|
+
/* @__PURE__ */ React14.createElement(React14.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
|
1173
1231
|
Flex,
|
1174
1232
|
{
|
1175
1233
|
align: "center",
|
1176
1234
|
justify: "center",
|
1177
1235
|
css: {
|
1236
|
+
position: "absolute",
|
1178
1237
|
bg: "#00000066",
|
1179
1238
|
display: "inline-flex",
|
1180
1239
|
gap: "$2",
|
@@ -1184,7 +1243,7 @@ var HLSView = () => {
|
|
1184
1243
|
opacity: controlsVisible ? `1` : "0"
|
1185
1244
|
}
|
1186
1245
|
},
|
1187
|
-
/* @__PURE__ */ React14.createElement(
|
1246
|
+
!showLoader && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
|
1188
1247
|
HMSVideoPlayer.Seeker,
|
1189
1248
|
{
|
1190
1249
|
title: "backward",
|
@@ -1194,8 +1253,7 @@ var HLSView = () => {
|
|
1194
1253
|
}
|
1195
1254
|
},
|
1196
1255
|
/* @__PURE__ */ React14.createElement(BackwardArrowIcon, { width: 32, height: 32 })
|
1197
|
-
),
|
1198
|
-
/* @__PURE__ */ React14.createElement(
|
1256
|
+
), /* @__PURE__ */ React14.createElement(
|
1199
1257
|
Box,
|
1200
1258
|
{
|
1201
1259
|
css: {
|
@@ -1204,8 +1262,7 @@ var HLSView = () => {
|
|
1204
1262
|
}
|
1205
1263
|
},
|
1206
1264
|
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused, width: 48, height: 48 })
|
1207
|
-
),
|
1208
|
-
/* @__PURE__ */ React14.createElement(
|
1265
|
+
), /* @__PURE__ */ React14.createElement(
|
1209
1266
|
HMSVideoPlayer.Seeker,
|
1210
1267
|
{
|
1211
1268
|
title: "forward",
|
@@ -1215,7 +1272,7 @@ var HLSView = () => {
|
|
1215
1272
|
}
|
1216
1273
|
},
|
1217
1274
|
/* @__PURE__ */ React14.createElement(ForwardArrowIcon, { width: 32, height: 32 })
|
1218
|
-
)
|
1275
|
+
))
|
1219
1276
|
), /* @__PURE__ */ React14.createElement(
|
1220
1277
|
Flex,
|
1221
1278
|
{
|
@@ -1241,7 +1298,6 @@ var HLSView = () => {
|
|
1241
1298
|
p: "$4 $8"
|
1242
1299
|
}
|
1243
1300
|
},
|
1244
|
-
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, hlsViewRef.current && /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType, container: hlsViewRef.current })),
|
1245
1301
|
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ React14.createElement(ChatToggle, null), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ React14.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ React14.createElement(
|
1246
1302
|
HLSQualitySelector,
|
1247
1303
|
{
|
@@ -1255,7 +1311,7 @@ var HLSView = () => {
|
|
1255
1311
|
}
|
1256
1312
|
) : null, /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
|
1257
1313
|
)
|
1258
|
-
)) : null, /* @__PURE__ */ React14.createElement(
|
1314
|
+
)) : null, controlsVisible && /* @__PURE__ */ React14.createElement(
|
1259
1315
|
Flex,
|
1260
1316
|
{
|
1261
1317
|
ref: controlsRef,
|
@@ -1264,19 +1320,17 @@ var HLSView = () => {
|
|
1264
1320
|
align: "start",
|
1265
1321
|
css: {
|
1266
1322
|
position: "absolute",
|
1267
|
-
bottom: isFullScreen && ((
|
1323
|
+
bottom: isFullScreen && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === HLSPlaylistType.DVR ? "$8" : "0",
|
1268
1324
|
left: "0",
|
1269
1325
|
zIndex: 1,
|
1270
1326
|
background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
|
1271
1327
|
width: "100%",
|
1272
1328
|
pt: "$8",
|
1273
1329
|
flexShrink: 0,
|
1274
|
-
transition: "visibility 0s 0.5s, opacity 0.5s linear"
|
1275
|
-
visibility: controlsVisible ? `` : `hidden`,
|
1276
|
-
opacity: controlsVisible ? `1` : "0"
|
1330
|
+
transition: "visibility 0s 0.5s, opacity 0.5s linear"
|
1277
1331
|
}
|
1278
1332
|
},
|
1279
|
-
|
1333
|
+
((_d = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _d.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Progress, { seekProgress, setSeekProgress }) : null,
|
1280
1334
|
/* @__PURE__ */ React14.createElement(
|
1281
1335
|
HMSVideoPlayer.Controls.Root,
|
1282
1336
|
{
|
@@ -1284,7 +1338,7 @@ var HLSView = () => {
|
|
1284
1338
|
p: "$4 $8"
|
1285
1339
|
}
|
1286
1340
|
},
|
1287
|
-
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
|
1341
|
+
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(React14.Fragment, null, ((_e = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _e.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
|
1288
1342
|
HMSVideoPlayer.Seeker,
|
1289
1343
|
{
|
1290
1344
|
onClick: () => {
|
@@ -1302,7 +1356,7 @@ var HLSView = () => {
|
|
1302
1356
|
title: "forward"
|
1303
1357
|
},
|
1304
1358
|
/* @__PURE__ */ React14.createElement(ForwardArrowIcon, { width: 20, height: 20 })
|
1305
|
-
), !isVideoLive ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Duration, null) : null, /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React14.createElement(
|
1359
|
+
), !isVideoLive ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Duration, null) : null) : null, /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React14.createElement(
|
1306
1360
|
IconButton,
|
1307
1361
|
{
|
1308
1362
|
css: { px: "$2" },
|
@@ -1334,7 +1388,7 @@ var HLSView = () => {
|
|
1334
1388
|
},
|
1335
1389
|
isVideoLive ? "LIVE" : "GO LIVE"
|
1336
1390
|
)))
|
1337
|
-
), (isMobile || isLandscape) && !isVideoLive ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Duration, null) : null),
|
1391
|
+
), (isMobile || isLandscape) && !isVideoLive && ((_f = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _f.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Duration, null) : null),
|
1338
1392
|
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React14.createElement(
|
1339
1393
|
HLSQualitySelector,
|
1340
1394
|
{
|
@@ -1349,11 +1403,13 @@ var HLSView = () => {
|
|
1349
1403
|
)
|
1350
1404
|
))
|
1351
1405
|
)
|
1352
|
-
)),
|
1406
|
+
)),
|
1407
|
+
/* @__PURE__ */ React14.createElement(ToggleChat, null),
|
1408
|
+
isMobile && !isFullScreen && /* @__PURE__ */ React14.createElement(HLSViewTitle, null)
|
1353
1409
|
);
|
1354
1410
|
};
|
1355
1411
|
var HLSView_default = HLSView;
|
1356
1412
|
export {
|
1357
1413
|
HLSView_default as default
|
1358
1414
|
};
|
1359
|
-
//# sourceMappingURL=HLSView-
|
1415
|
+
//# sourceMappingURL=HLSView-LZOTIUWE.js.map
|