@100mslive/roomkit-react 0.2.8-alpha.4 → 0.2.8-alpha.6
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-UIPDGADR.js → HLSView-53PDKIS2.js} +239 -144
- package/dist/HLSView-53PDKIS2.js.map +7 -0
- package/dist/Prebuilt/components/Chat/MwebChatOption.d.ts +1 -1
- package/dist/Prebuilt/components/HMSVideo/PlayPauseButton.d.ts +6 -0
- package/dist/Prebuilt/components/HMSVideo/SeekControls.d.ts +7 -0
- package/dist/Prebuilt/components/HMSVideo/VideoProgress.d.ts +3 -1
- package/dist/Prebuilt/components/HMSVideo/index.d.ts +10 -2
- package/dist/Prebuilt/layouts/SidePane.d.ts +1 -1
- package/dist/{chunk-J4NOQ2YL.js → chunk-2ZFAT7KY.js} +339 -218
- package/dist/chunk-2ZFAT7KY.js.map +7 -0
- package/dist/index.cjs.js +932 -708
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +217 -78
- package/dist/meta.esbuild.json +227 -87
- package/package.json +7 -6
- package/src/Prebuilt/components/AppData/useSidepane.js +17 -2
- package/src/Prebuilt/components/AuthToken.jsx +1 -1
- package/src/Prebuilt/components/Chat/ChatFooter.tsx +1 -1
- package/src/Prebuilt/components/Chat/MwebChatOption.tsx +1 -1
- package/src/Prebuilt/components/ConferenceScreen.tsx +11 -14
- package/src/Prebuilt/components/Footer/RoleOptions.tsx +32 -15
- package/src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx +31 -1
- package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx +7 -1
- package/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx +27 -0
- package/src/Prebuilt/components/HMSVideo/SeekControls.tsx +22 -0
- package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx +4 -3
- package/src/Prebuilt/components/HMSVideo/VolumeControl.tsx +1 -1
- package/src/Prebuilt/components/HMSVideo/index.ts +4 -2
- package/src/Prebuilt/components/Header/StreamActions.tsx +1 -1
- package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +37 -31
- package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +5 -5
- package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx +2 -2
- package/src/Prebuilt/components/Notifications/PeerNotifications.tsx +1 -1
- package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx +19 -8
- package/src/Prebuilt/components/SidePaneTabs.tsx +27 -35
- package/src/Prebuilt/components/StatsForNerds.jsx +14 -6
- package/src/Prebuilt/components/Streaming/Common.jsx +1 -1
- package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx +2 -2
- package/src/Prebuilt/components/Toast/ToastBatcher.js +8 -1
- package/src/Prebuilt/components/Toast/ToastConfig.jsx +17 -0
- package/src/Prebuilt/layouts/HLSView.jsx +109 -69
- package/src/Prebuilt/layouts/SidePane.tsx +125 -67
- package/src/Prebuilt/layouts/VideoStreamingSection.tsx +2 -1
- package/src/Prebuilt/provider/roomLayoutProvider/index.tsx +1 -1
- package/src/Sheet/Sheet.tsx +4 -0
- package/dist/HLSView-UIPDGADR.js.map +0 -7
- package/dist/chunk-J4NOQ2YL.js.map +0 -7
- package/src/Prebuilt/components/HMSVideo/PlayButton.jsx +0 -13
@@ -11,6 +11,7 @@ import {
|
|
11
11
|
Flex,
|
12
12
|
IconButton,
|
13
13
|
IconButton_default,
|
14
|
+
LeaveRoom,
|
14
15
|
Loading,
|
15
16
|
Logo,
|
16
17
|
SIDE_PANE_OPTIONS,
|
@@ -32,12 +33,12 @@ import {
|
|
32
33
|
useRoomLayoutConferencingScreen,
|
33
34
|
useSidepaneToggle,
|
34
35
|
useTheme
|
35
|
-
} from "./chunk-
|
36
|
+
} from "./chunk-2ZFAT7KY.js";
|
36
37
|
|
37
38
|
// src/Prebuilt/layouts/HLSView.jsx
|
38
39
|
init_define_process_env();
|
39
|
-
import
|
40
|
-
import { useFullscreen, useMedia as
|
40
|
+
import React14, { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
|
41
|
+
import { useFullscreen, useMedia as useMedia4, usePrevious, useToggle } from "react-use";
|
41
42
|
import { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents as HMSHLSPlayerEvents2 } from "@100mslive/hls-player";
|
42
43
|
import screenfull from "screenfull";
|
43
44
|
import {
|
@@ -52,7 +53,7 @@ import {
|
|
52
53
|
useHMSStore as useHMSStore2,
|
53
54
|
useHMSVanillaStore
|
54
55
|
} from "@100mslive/react-sdk";
|
55
|
-
import {
|
56
|
+
import { BackwardArrowIcon, ColoredHandIcon, ForwardArrowIcon, GoLiveIcon } from "@100mslive/react-icons";
|
56
57
|
|
57
58
|
// src/Prebuilt/components/HlsStatsOverlay.jsx
|
58
59
|
init_define_process_env();
|
@@ -163,8 +164,11 @@ var RightControls = styled(Flex, {
|
|
163
164
|
// src/Prebuilt/components/HMSVideo/HMSVideo.jsx
|
164
165
|
init_define_process_env();
|
165
166
|
import React2, { forwardRef } from "react";
|
167
|
+
import { useMedia } from "react-use";
|
166
168
|
var HMSVideo = forwardRef((_a, videoRef) => {
|
167
169
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
170
|
+
const isLandscape = useIsLandscape();
|
171
|
+
const isMobile = useMedia(config.media.md);
|
168
172
|
return /* @__PURE__ */ React2.createElement(
|
169
173
|
Flex,
|
170
174
|
__spreadValues({
|
@@ -200,7 +204,9 @@ var HMSVideo = forwardRef((_a, videoRef) => {
|
|
200
204
|
margin: "0 auto",
|
201
205
|
minHeight: "0",
|
202
206
|
objectFit: "contain",
|
203
|
-
width: "inherit"
|
207
|
+
width: "inherit",
|
208
|
+
height: isLandscape || isMobile ? "100%" : "",
|
209
|
+
position: isLandscape || isMobile ? "absolute" : ""
|
204
210
|
},
|
205
211
|
ref: videoRef,
|
206
212
|
playsInline: true
|
@@ -210,7 +216,7 @@ var HMSVideo = forwardRef((_a, videoRef) => {
|
|
210
216
|
);
|
211
217
|
});
|
212
218
|
|
213
|
-
// src/Prebuilt/components/HMSVideo/
|
219
|
+
// src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
|
214
220
|
init_define_process_env();
|
215
221
|
import React4 from "react";
|
216
222
|
import { PauseIcon, PlayIcon } from "@100mslive/react-icons";
|
@@ -226,8 +232,8 @@ var useHMSPlayerContext = () => {
|
|
226
232
|
return context;
|
227
233
|
};
|
228
234
|
|
229
|
-
// src/Prebuilt/components/HMSVideo/
|
230
|
-
var
|
235
|
+
// src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
|
236
|
+
var PlayPauseButton = ({
|
231
237
|
isPaused,
|
232
238
|
width = 20,
|
233
239
|
height = 20
|
@@ -240,9 +246,21 @@ var PlayButton = ({
|
|
240
246
|
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 })));
|
241
247
|
};
|
242
248
|
|
249
|
+
// src/Prebuilt/components/HMSVideo/SeekControls.tsx
|
250
|
+
init_define_process_env();
|
251
|
+
import React5 from "react";
|
252
|
+
var SeekControls = ({
|
253
|
+
title,
|
254
|
+
onClick,
|
255
|
+
children,
|
256
|
+
css
|
257
|
+
}) => {
|
258
|
+
return /* @__PURE__ */ React5.createElement(Tooltip, { title, side: "top" }, /* @__PURE__ */ React5.createElement(IconButton, { onClick, "data-testid": "backward_forward_arrow_btn", css }, children));
|
259
|
+
};
|
260
|
+
|
243
261
|
// src/Prebuilt/components/HMSVideo/VideoProgress.tsx
|
244
262
|
init_define_process_env();
|
245
|
-
import
|
263
|
+
import React6, { useEffect, useState } from "react";
|
246
264
|
|
247
265
|
// src/Prebuilt/components/HMSVideo/utils.ts
|
248
266
|
init_define_process_env();
|
@@ -273,7 +291,7 @@ function getTime(timeInMilles) {
|
|
273
291
|
}
|
274
292
|
|
275
293
|
// src/Prebuilt/components/HMSVideo/VideoProgress.tsx
|
276
|
-
var VideoProgress = () => {
|
294
|
+
var VideoProgress = ({ isDvr = true }) => {
|
277
295
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
278
296
|
const [videoProgress, setVideoProgress] = useState(0);
|
279
297
|
const [bufferProgress, setBufferProgress] = useState(0);
|
@@ -314,7 +332,7 @@ var VideoProgress = () => {
|
|
314
332
|
if (!videoEl) {
|
315
333
|
return null;
|
316
334
|
}
|
317
|
-
return /* @__PURE__ */
|
335
|
+
return /* @__PURE__ */ React6.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch", pointerEvents: isDvr ? "" : "none" } }, /* @__PURE__ */ React6.createElement(
|
318
336
|
Slider,
|
319
337
|
{
|
320
338
|
id: "video-actual-rest",
|
@@ -322,7 +340,8 @@ var VideoProgress = () => {
|
|
322
340
|
cursor: "pointer",
|
323
341
|
h: "$2",
|
324
342
|
zIndex: 1,
|
325
|
-
transition: `all .2s ease .5s
|
343
|
+
transition: `all .2s ease .5s`,
|
344
|
+
pointerEvents: isDvr ? "" : "none"
|
326
345
|
},
|
327
346
|
min: 0,
|
328
347
|
max: 100,
|
@@ -330,9 +349,9 @@ var VideoProgress = () => {
|
|
330
349
|
value: [videoProgress],
|
331
350
|
showTooltip: false,
|
332
351
|
onValueChange: onProgress,
|
333
|
-
thumbStyles: { w: "$6", h: "$6" }
|
352
|
+
thumbStyles: { w: "$6", h: "$6", display: isDvr ? "" : "none" }
|
334
353
|
}
|
335
|
-
), /* @__PURE__ */
|
354
|
+
), /* @__PURE__ */ React6.createElement(
|
336
355
|
Box,
|
337
356
|
{
|
338
357
|
id: "video-buffer",
|
@@ -350,7 +369,7 @@ var VideoProgress = () => {
|
|
350
369
|
|
351
370
|
// src/Prebuilt/components/HMSVideo/VideoTime.tsx
|
352
371
|
init_define_process_env();
|
353
|
-
import
|
372
|
+
import React7, { useEffect as useEffect2, useState as useState2 } from "react";
|
354
373
|
import { HMSHLSPlayerEvents } from "@100mslive/hls-player";
|
355
374
|
var VideoTime = () => {
|
356
375
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
@@ -371,7 +390,7 @@ var VideoTime = () => {
|
|
371
390
|
hlsPlayer2 == null ? void 0 : hlsPlayer2.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
|
372
391
|
};
|
373
392
|
}, [hlsPlayer2]);
|
374
|
-
return hlsPlayer2 ? /* @__PURE__ */
|
393
|
+
return hlsPlayer2 ? /* @__PURE__ */ React7.createElement(
|
375
394
|
Text,
|
376
395
|
{
|
377
396
|
variant: "body1",
|
@@ -390,13 +409,14 @@ var VideoTime = () => {
|
|
390
409
|
|
391
410
|
// src/Prebuilt/components/HMSVideo/VolumeControl.tsx
|
392
411
|
init_define_process_env();
|
393
|
-
import
|
412
|
+
import React8, { useState as useState3 } from "react";
|
394
413
|
import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from "@100mslive/react-icons";
|
395
414
|
var VolumeControl = () => {
|
415
|
+
var _a;
|
396
416
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
397
|
-
const [volume, setVolume] = useState3((hlsPlayer2 == null ? void 0 : hlsPlayer2.volume)
|
417
|
+
const [volume, setVolume] = useState3((_a = hlsPlayer2 == null ? void 0 : hlsPlayer2.volume) != null ? _a : 100);
|
398
418
|
const [showSlider, setShowSlider] = useState3(false);
|
399
|
-
return /* @__PURE__ */
|
419
|
+
return /* @__PURE__ */ React8.createElement(
|
400
420
|
Flex,
|
401
421
|
{
|
402
422
|
align: "center",
|
@@ -410,7 +430,7 @@ var VolumeControl = () => {
|
|
410
430
|
setShowSlider(false);
|
411
431
|
}
|
412
432
|
},
|
413
|
-
/* @__PURE__ */
|
433
|
+
/* @__PURE__ */ React8.createElement(
|
414
434
|
VolumeIcon,
|
415
435
|
{
|
416
436
|
volume,
|
@@ -425,7 +445,7 @@ var VolumeControl = () => {
|
|
425
445
|
}
|
426
446
|
}
|
427
447
|
),
|
428
|
-
/* @__PURE__ */
|
448
|
+
/* @__PURE__ */ React8.createElement(
|
429
449
|
Slider,
|
430
450
|
{
|
431
451
|
css: {
|
@@ -453,15 +473,15 @@ var VolumeControl = () => {
|
|
453
473
|
};
|
454
474
|
var VolumeIcon = ({ volume, onClick }) => {
|
455
475
|
if (volume === 0) {
|
456
|
-
return /* @__PURE__ */
|
476
|
+
return /* @__PURE__ */ React8.createElement(VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
|
457
477
|
}
|
458
|
-
return volume < 50 ? /* @__PURE__ */
|
478
|
+
return volume < 50 ? /* @__PURE__ */ React8.createElement(VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ React8.createElement(VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
|
459
479
|
};
|
460
480
|
|
461
481
|
// src/Prebuilt/components/HMSVideo/index.ts
|
462
482
|
var HMSVideoPlayer = {
|
463
483
|
Root: HMSVideo,
|
464
|
-
|
484
|
+
PlayPauseButton,
|
465
485
|
Progress: VideoProgress,
|
466
486
|
Duration: VideoTime,
|
467
487
|
Volume: VolumeControl,
|
@@ -469,25 +489,59 @@ var HMSVideoPlayer = {
|
|
469
489
|
Root: VideoControls,
|
470
490
|
Left: LeftControls,
|
471
491
|
Right: RightControls
|
472
|
-
}
|
492
|
+
},
|
493
|
+
Seeker: SeekControls
|
473
494
|
};
|
474
495
|
|
475
496
|
// src/Prebuilt/components/HMSVideo/FullscreenButton.tsx
|
476
497
|
init_define_process_env();
|
477
|
-
import
|
498
|
+
import React9 from "react";
|
478
499
|
import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
|
479
500
|
var FullScreenButton = ({ isFullScreen, onToggle }) => {
|
480
|
-
return /* @__PURE__ */
|
501
|
+
return /* @__PURE__ */ React9.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React9.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ React9.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ React9.createElement(ShrinkIcon, null) : /* @__PURE__ */ React9.createElement(ExpandIcon, null))));
|
481
502
|
};
|
482
503
|
|
483
504
|
// src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx
|
484
505
|
init_define_process_env();
|
485
|
-
import
|
506
|
+
import React10 from "react";
|
507
|
+
import { useMedia as useMedia2 } from "react-use";
|
508
|
+
import { VolumeTwoIcon as VolumeTwoIcon2 } from "@100mslive/react-icons";
|
486
509
|
function HLSAutoplayBlockedPrompt({
|
487
510
|
open,
|
488
511
|
unblockAutoPlay
|
489
512
|
}) {
|
490
|
-
|
513
|
+
const isLandscape = useIsLandscape();
|
514
|
+
const isMobile = useMedia2(config.media.md);
|
515
|
+
if ((isMobile || isLandscape) && open) {
|
516
|
+
return /* @__PURE__ */ React10.createElement(
|
517
|
+
IconButton,
|
518
|
+
{
|
519
|
+
css: {
|
520
|
+
border: "1px solid white",
|
521
|
+
bg: "white",
|
522
|
+
color: "#000",
|
523
|
+
r: "$2"
|
524
|
+
},
|
525
|
+
onClick: () => __async(this, null, function* () {
|
526
|
+
return yield unblockAutoPlay();
|
527
|
+
})
|
528
|
+
},
|
529
|
+
/* @__PURE__ */ React10.createElement(VolumeTwoIcon2, { width: "32", height: "32" }),
|
530
|
+
/* @__PURE__ */ React10.createElement(
|
531
|
+
Text,
|
532
|
+
{
|
533
|
+
variant: "body1",
|
534
|
+
css: {
|
535
|
+
fontWeight: "$semiBold",
|
536
|
+
px: "$2",
|
537
|
+
color: "#000"
|
538
|
+
}
|
539
|
+
},
|
540
|
+
"Tap To Unmute"
|
541
|
+
)
|
542
|
+
);
|
543
|
+
}
|
544
|
+
return /* @__PURE__ */ React10.createElement(
|
491
545
|
Dialog.Root,
|
492
546
|
{
|
493
547
|
open,
|
@@ -497,7 +551,7 @@ function HLSAutoplayBlockedPrompt({
|
|
497
551
|
}
|
498
552
|
})
|
499
553
|
},
|
500
|
-
/* @__PURE__ */
|
554
|
+
/* @__PURE__ */ React10.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React10.createElement(DialogRow, null, /* @__PURE__ */ React10.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React10.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React10.createElement(
|
501
555
|
Button,
|
502
556
|
{
|
503
557
|
variant: "primary",
|
@@ -512,17 +566,17 @@ function HLSAutoplayBlockedPrompt({
|
|
512
566
|
|
513
567
|
// src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx
|
514
568
|
init_define_process_env();
|
515
|
-
import
|
569
|
+
import React11 from "react";
|
516
570
|
import { ClosedCaptionIcon, OpenCaptionIcon } from "@100mslive/react-icons";
|
517
571
|
function HLSCaptionSelector({ isEnabled }) {
|
518
572
|
const { hlsPlayer: hlsPlayer2 } = useHMSPlayerContext();
|
519
|
-
return /* @__PURE__ */
|
573
|
+
return /* @__PURE__ */ React11.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React11.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ React11.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React11.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
|
520
574
|
}
|
521
575
|
|
522
576
|
// src/Prebuilt/components/HMSVideo/HLSQualitySelector.tsx
|
523
577
|
init_define_process_env();
|
524
|
-
import
|
525
|
-
import { useMedia } from "react-use";
|
578
|
+
import React12 from "react";
|
579
|
+
import { useMedia as useMedia3 } from "react-use";
|
526
580
|
import { CheckIcon, CrossIcon as CrossIcon2, SettingsIcon } from "@100mslive/react-icons";
|
527
581
|
function HLSQualitySelector({
|
528
582
|
open,
|
@@ -532,10 +586,10 @@ function HLSQualitySelector({
|
|
532
586
|
selection,
|
533
587
|
isAuto
|
534
588
|
}) {
|
535
|
-
const isMobile =
|
589
|
+
const isMobile = useMedia3(config.media.md);
|
536
590
|
const isLandscape = useIsLandscape();
|
537
591
|
if (isMobile || isLandscape) {
|
538
|
-
return /* @__PURE__ */
|
592
|
+
return /* @__PURE__ */ React12.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React12.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React12.createElement(
|
539
593
|
Flex,
|
540
594
|
{
|
541
595
|
css: {
|
@@ -545,8 +599,8 @@ function HLSQualitySelector({
|
|
545
599
|
p: "$2"
|
546
600
|
}
|
547
601
|
},
|
548
|
-
/* @__PURE__ */
|
549
|
-
)), layers.length > 0 && /* @__PURE__ */
|
602
|
+
/* @__PURE__ */ React12.createElement(SettingsIcon, null)
|
603
|
+
)), layers.length > 0 && /* @__PURE__ */ React12.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$1" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React12.createElement(
|
550
604
|
Sheet.Title,
|
551
605
|
{
|
552
606
|
css: {
|
@@ -563,9 +617,9 @@ function HLSQualitySelector({
|
|
563
617
|
}
|
564
618
|
},
|
565
619
|
"Quality",
|
566
|
-
/* @__PURE__ */
|
620
|
+
/* @__PURE__ */ React12.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React12.createElement(CrossIcon2, null))
|
567
621
|
), layers.map((layer) => {
|
568
|
-
return /* @__PURE__ */
|
622
|
+
return /* @__PURE__ */ React12.createElement(
|
569
623
|
Flex,
|
570
624
|
{
|
571
625
|
align: "center",
|
@@ -583,11 +637,11 @@ function HLSQualitySelector({
|
|
583
637
|
key: layer.width,
|
584
638
|
onClick: () => onQualityChange(layer)
|
585
639
|
},
|
586
|
-
/* @__PURE__ */
|
587
|
-
/* @__PURE__ */
|
588
|
-
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */
|
640
|
+
/* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
|
641
|
+
/* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
|
642
|
+
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
|
589
643
|
);
|
590
|
-
}), /* @__PURE__ */
|
644
|
+
}), /* @__PURE__ */ React12.createElement(
|
591
645
|
Flex,
|
592
646
|
{
|
593
647
|
align: "center",
|
@@ -605,11 +659,11 @@ function HLSQualitySelector({
|
|
605
659
|
key: "auto",
|
606
660
|
onClick: () => onQualityChange({ height: "auto" })
|
607
661
|
},
|
608
|
-
/* @__PURE__ */
|
609
|
-
isAuto && /* @__PURE__ */
|
662
|
+
/* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
|
663
|
+
isAuto && /* @__PURE__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
|
610
664
|
)));
|
611
665
|
}
|
612
|
-
return /* @__PURE__ */
|
666
|
+
return /* @__PURE__ */ React12.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value) }, /* @__PURE__ */ React12.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React12.createElement(
|
613
667
|
Flex,
|
614
668
|
{
|
615
669
|
css: {
|
@@ -619,7 +673,7 @@ function HLSQualitySelector({
|
|
619
673
|
p: "$2"
|
620
674
|
}
|
621
675
|
},
|
622
|
-
/* @__PURE__ */
|
676
|
+
/* @__PURE__ */ React12.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React12.createElement(Flex, { align: "center" }, /* @__PURE__ */ React12.createElement(
|
623
677
|
Box,
|
624
678
|
{
|
625
679
|
css: {
|
@@ -630,8 +684,8 @@ function HLSQualitySelector({
|
|
630
684
|
c: "$on_surface_high"
|
631
685
|
}
|
632
686
|
},
|
633
|
-
/* @__PURE__ */
|
634
|
-
), /* @__PURE__ */
|
687
|
+
/* @__PURE__ */ React12.createElement(SettingsIcon, null)
|
688
|
+
), /* @__PURE__ */ React12.createElement(
|
635
689
|
Text,
|
636
690
|
{
|
637
691
|
variant: {
|
@@ -641,7 +695,7 @@ function HLSQualitySelector({
|
|
641
695
|
},
|
642
696
|
css: { display: "flex", alignItems: "center", ml: "$2", c: "$on_surface_medium" }
|
643
697
|
},
|
644
|
-
isAuto && /* @__PURE__ */
|
698
|
+
isAuto && /* @__PURE__ */ React12.createElement(React12.Fragment, null, "Auto", /* @__PURE__ */ React12.createElement(
|
645
699
|
Box,
|
646
700
|
{
|
647
701
|
css: {
|
@@ -656,7 +710,7 @@ function HLSQualitySelector({
|
|
656
710
|
selection && Math.min(selection.width || 0, selection.height || 0),
|
657
711
|
"p"
|
658
712
|
)))
|
659
|
-
)), layers.length > 0 && /* @__PURE__ */
|
713
|
+
)), layers.length > 0 && /* @__PURE__ */ React12.createElement(
|
660
714
|
Dropdown.Content,
|
661
715
|
{
|
662
716
|
sideOffset: 5,
|
@@ -672,7 +726,7 @@ function HLSQualitySelector({
|
|
672
726
|
}
|
673
727
|
},
|
674
728
|
layers.map((layer) => {
|
675
|
-
return /* @__PURE__ */
|
729
|
+
return /* @__PURE__ */ React12.createElement(
|
676
730
|
Dropdown.Item,
|
677
731
|
{
|
678
732
|
onClick: () => onQualityChange(layer),
|
@@ -687,12 +741,12 @@ function HLSQualitySelector({
|
|
687
741
|
gap: "$2"
|
688
742
|
}
|
689
743
|
},
|
690
|
-
/* @__PURE__ */
|
691
|
-
/* @__PURE__ */
|
692
|
-
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */
|
744
|
+
/* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
|
745
|
+
/* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
|
746
|
+
!isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
|
693
747
|
);
|
694
748
|
}),
|
695
|
-
/* @__PURE__ */
|
749
|
+
/* @__PURE__ */ React12.createElement(
|
696
750
|
Dropdown.Item,
|
697
751
|
{
|
698
752
|
onClick: () => onQualityChange({ height: "auto" }),
|
@@ -707,8 +761,8 @@ function HLSQualitySelector({
|
|
707
761
|
gap: "$2"
|
708
762
|
}
|
709
763
|
},
|
710
|
-
/* @__PURE__ */
|
711
|
-
isAuto && /* @__PURE__ */
|
764
|
+
/* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
|
765
|
+
isAuto && /* @__PURE__ */ React12.createElement(CheckIcon, { width: "16px", height: "16px" })
|
712
766
|
)
|
713
767
|
));
|
714
768
|
}
|
@@ -717,7 +771,7 @@ var getBitrateText = (layer) => `(${(Number(layer.bitrate / 1e3) / 1e3).toFixed(
|
|
717
771
|
|
718
772
|
// src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx
|
719
773
|
init_define_process_env();
|
720
|
-
import
|
774
|
+
import React13, { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
|
721
775
|
import { selectHLSState, selectPeerCount, useHMSStore } from "@100mslive/react-sdk";
|
722
776
|
var HLSViewTitle = () => {
|
723
777
|
const peerCount = useHMSStore(selectPeerCount);
|
@@ -752,7 +806,7 @@ var HLSViewTitle = () => {
|
|
752
806
|
}
|
753
807
|
};
|
754
808
|
}, [hlsState == null ? void 0 : hlsState.running, hlsState == null ? void 0 : hlsState.variants, screenType, startTimer]);
|
755
|
-
return /* @__PURE__ */
|
809
|
+
return /* @__PURE__ */ React13.createElement(
|
756
810
|
Flex,
|
757
811
|
{
|
758
812
|
gap: "4",
|
@@ -766,8 +820,8 @@ var HLSViewTitle = () => {
|
|
766
820
|
backgroundColor: "$surface_dim"
|
767
821
|
}
|
768
822
|
},
|
769
|
-
/* @__PURE__ */
|
770
|
-
/* @__PURE__ */
|
823
|
+
/* @__PURE__ */ React13.createElement(Logo, null),
|
824
|
+
/* @__PURE__ */ React13.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React13.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "Tech Talk"), /* @__PURE__ */ React13.createElement(Flex, { gap: "1" }, /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, getFormattedCount(peerCount) + " watching"), /* @__PURE__ */ React13.createElement(
|
771
825
|
Flex,
|
772
826
|
{
|
773
827
|
direction: "column",
|
@@ -779,7 +833,7 @@ var HLSViewTitle = () => {
|
|
779
833
|
alignSelf: "center"
|
780
834
|
}
|
781
835
|
}
|
782
|
-
), /* @__PURE__ */
|
836
|
+
), /* @__PURE__ */ React13.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, "Started " + getTime(liveTime) + " ago")))
|
783
837
|
);
|
784
838
|
};
|
785
839
|
|
@@ -787,7 +841,7 @@ var HLSViewTitle = () => {
|
|
787
841
|
var hlsPlayer;
|
788
842
|
var toastMap = {};
|
789
843
|
var HLSView = () => {
|
790
|
-
var _a, _b
|
844
|
+
var _a, _b;
|
791
845
|
const videoRef = useRef2(null);
|
792
846
|
const hlsViewRef = useRef2(null);
|
793
847
|
const hlsState = useHMSStore2(selectHLSState2);
|
@@ -805,6 +859,7 @@ var HLSView = () => {
|
|
805
859
|
const [hasCaptions, setHasCaptions] = useState5(false);
|
806
860
|
const [currentSelectedQuality, setCurrentSelectedQuality] = useState5(null);
|
807
861
|
const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState5(false);
|
862
|
+
const [isSeekEnabled, setIsSeekEnabled] = useState5(false);
|
808
863
|
const [isPaused, setIsPaused] = useState5(false);
|
809
864
|
const [show, toggle] = useToggle(false);
|
810
865
|
const lastHlsUrl = usePrevious(hlsUrl);
|
@@ -819,7 +874,7 @@ var HLSView = () => {
|
|
819
874
|
const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
|
820
875
|
const showChat = !!(elements == null ? void 0 : elements.chat);
|
821
876
|
const isFullScreenSupported = screenfull.isEnabled;
|
822
|
-
const isMobile =
|
877
|
+
const isMobile = useMedia4(config.media.md);
|
823
878
|
const isLandscape = useIsLandscape();
|
824
879
|
const isFullScreen = useFullscreen(hlsViewRef, show, {
|
825
880
|
onClose: () => toggle(false)
|
@@ -905,7 +960,7 @@ var HLSView = () => {
|
|
905
960
|
const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || "Participant";
|
906
961
|
const toastID = ToastManager.addToast({
|
907
962
|
title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
|
908
|
-
action: /* @__PURE__ */
|
963
|
+
action: /* @__PURE__ */ React14.createElement(
|
909
964
|
Button,
|
910
965
|
{
|
911
966
|
onClick: () => togglePollView(pollId),
|
@@ -1000,41 +1055,56 @@ var HLSView = () => {
|
|
1000
1055
|
if (controlsTimerRef.current) {
|
1001
1056
|
clearTimeout(controlsTimerRef.current);
|
1002
1057
|
}
|
1003
|
-
controlsTimerRef.current = setTimeout(() => {
|
1004
|
-
setControlsVisible(false);
|
1005
|
-
}, 5e3);
|
1006
1058
|
}
|
1007
1059
|
if (!isFullScreen && controlsTimerRef.current) {
|
1008
1060
|
clearTimeout(controlsTimerRef.current);
|
1009
1061
|
}
|
1062
|
+
controlsTimerRef.current = setTimeout(() => {
|
1063
|
+
setControlsVisible(false);
|
1064
|
+
}, 5e3);
|
1010
1065
|
return () => {
|
1011
1066
|
if (controlsTimerRef.current) {
|
1012
1067
|
clearTimeout(controlsTimerRef.current);
|
1013
1068
|
}
|
1014
1069
|
};
|
1015
1070
|
}, [controlsVisible, isFullScreen, qualityDropDownOpen]);
|
1016
|
-
const
|
1071
|
+
const onSeekTo = useCallback2((seek) => {
|
1072
|
+
var _a2;
|
1073
|
+
hlsPlayer == null ? void 0 : hlsPlayer.seekTo(((_a2 = videoRef.current) == null ? void 0 : _a2.currentTime) + seek);
|
1074
|
+
}, []);
|
1075
|
+
const onDoubleClickHandler = useCallback2(
|
1017
1076
|
(event) => {
|
1018
|
-
|
1019
|
-
if (event.type === "ontouchstart" && controlsVisible) {
|
1020
|
-
setControlsVisible(false);
|
1021
|
-
return;
|
1022
|
-
}
|
1023
|
-
if (event.type === "ontouchstart" || qualityDropDownOpen) {
|
1024
|
-
setControlsVisible(true);
|
1077
|
+
if (!(isMobile || isLandscape)) {
|
1025
1078
|
return;
|
1026
1079
|
}
|
1027
|
-
|
1028
|
-
|
1029
|
-
|
1030
|
-
|
1031
|
-
|
1080
|
+
const sidePercentage = event.screenX * 100 / event.target.clientWidth;
|
1081
|
+
setIsSeekEnabled(true);
|
1082
|
+
if (sidePercentage < 45) {
|
1083
|
+
onSeekTo(-10);
|
1084
|
+
} else {
|
1085
|
+
onSeekTo(10);
|
1032
1086
|
}
|
1087
|
+
setTimeout(() => {
|
1088
|
+
setIsSeekEnabled(false);
|
1089
|
+
}, 200);
|
1033
1090
|
},
|
1034
|
-
[
|
1091
|
+
[isLandscape, isMobile, onSeekTo]
|
1035
1092
|
);
|
1093
|
+
const onClickHandler = useCallback2(() => {
|
1094
|
+
if (!(isMobile || isLandscape)) {
|
1095
|
+
return;
|
1096
|
+
}
|
1097
|
+
setControlsVisible((value) => !value);
|
1098
|
+
if (controlsTimerRef.current) {
|
1099
|
+
clearTimeout(controlsTimerRef.current);
|
1100
|
+
}
|
1101
|
+
}, [isLandscape, isMobile]);
|
1036
1102
|
const onHoverHandler = useCallback2(
|
1037
1103
|
(event) => {
|
1104
|
+
event.preventDefault();
|
1105
|
+
if (isMobile || isLandscape) {
|
1106
|
+
return;
|
1107
|
+
}
|
1038
1108
|
if (event.type === "mouseenter" || qualityDropDownOpen) {
|
1039
1109
|
setControlsVisible(true);
|
1040
1110
|
return;
|
@@ -1048,9 +1118,9 @@ var HLSView = () => {
|
|
1048
1118
|
}
|
1049
1119
|
}
|
1050
1120
|
},
|
1051
|
-
[controlsVisible, isFullScreen, qualityDropDownOpen]
|
1121
|
+
[controlsVisible, isFullScreen, isLandscape, isMobile, qualityDropDownOpen]
|
1052
1122
|
);
|
1053
|
-
return /* @__PURE__ */
|
1123
|
+
return /* @__PURE__ */ React14.createElement(
|
1054
1124
|
Flex,
|
1055
1125
|
{
|
1056
1126
|
key: "hls-viewer",
|
@@ -1058,11 +1128,12 @@ var HLSView = () => {
|
|
1058
1128
|
ref: hlsViewRef,
|
1059
1129
|
direction: isMobile || isLandscape ? "column" : "row",
|
1060
1130
|
css: {
|
1061
|
-
w: sidepane !== "" && isLandscape ? "
|
1062
|
-
h: sidepane !== "" && isMobile ? "36%" : "100%"
|
1131
|
+
w: sidepane !== "" && isLandscape ? "" : "100%",
|
1132
|
+
h: sidepane !== "" && isMobile ? "36%" : "100%",
|
1133
|
+
flex: "1 1 0"
|
1063
1134
|
}
|
1064
1135
|
},
|
1065
|
-
hlsUrl && !streamEnded ? /* @__PURE__ */
|
1136
|
+
hlsUrl && !streamEnded ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__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(
|
1066
1137
|
Flex,
|
1067
1138
|
{
|
1068
1139
|
id: "hls-player-container",
|
@@ -1073,8 +1144,8 @@ var HLSView = () => {
|
|
1073
1144
|
margin: "0 auto"
|
1074
1145
|
}
|
1075
1146
|
},
|
1076
|
-
/* @__PURE__ */
|
1077
|
-
showLoader && /* @__PURE__ */
|
1147
|
+
!(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
|
1148
|
+
showLoader && /* @__PURE__ */ React14.createElement(
|
1078
1149
|
Flex,
|
1079
1150
|
{
|
1080
1151
|
align: "center",
|
@@ -1083,56 +1154,68 @@ var HLSView = () => {
|
|
1083
1154
|
position: "absolute"
|
1084
1155
|
}
|
1085
1156
|
},
|
1086
|
-
/* @__PURE__ */
|
1157
|
+
/* @__PURE__ */ React14.createElement(Loading, { width: 72, height: 72 })
|
1087
1158
|
),
|
1088
|
-
/* @__PURE__ */
|
1159
|
+
/* @__PURE__ */ React14.createElement(
|
1089
1160
|
HMSVideoPlayer.Root,
|
1090
1161
|
{
|
1091
1162
|
ref: videoRef,
|
1092
1163
|
onMouseEnter: onHoverHandler,
|
1093
1164
|
onMouseMove: onHoverHandler,
|
1094
1165
|
onMouseLeave: onHoverHandler,
|
1095
|
-
|
1096
|
-
|
1166
|
+
onClick: onClickHandler,
|
1167
|
+
onDoubleClick: (e) => {
|
1168
|
+
onDoubleClickHandler(e);
|
1169
|
+
}
|
1097
1170
|
},
|
1098
|
-
/* @__PURE__ */
|
1099
|
-
|
1171
|
+
/* @__PURE__ */ React14.createElement(React14.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, !showLoader && /* @__PURE__ */ React14.createElement(
|
1172
|
+
Flex,
|
1100
1173
|
{
|
1174
|
+
align: "center",
|
1175
|
+
justify: "center",
|
1101
1176
|
css: {
|
1102
|
-
|
1103
|
-
top: "40%",
|
1104
|
-
left: "50%",
|
1105
|
-
transform: "translateY(-40%) translateX(-50%)",
|
1106
|
-
padding: "$4",
|
1177
|
+
bg: "#00000066",
|
1107
1178
|
display: "inline-flex",
|
1108
|
-
|
1109
|
-
gap: "$1",
|
1110
|
-
bg: "rgba(0, 0, 0, 0.6)",
|
1179
|
+
gap: "$2",
|
1111
1180
|
zIndex: 1,
|
1181
|
+
size: "100%",
|
1112
1182
|
visibility: controlsVisible ? `` : `hidden`,
|
1113
1183
|
opacity: controlsVisible ? `1` : "0"
|
1114
1184
|
}
|
1115
1185
|
},
|
1116
|
-
|
1117
|
-
|
1186
|
+
/* @__PURE__ */ React14.createElement(
|
1187
|
+
HMSVideoPlayer.Seeker,
|
1118
1188
|
{
|
1119
|
-
|
1120
|
-
|
1121
|
-
|
1122
|
-
|
1189
|
+
title: "backward",
|
1190
|
+
css: {
|
1191
|
+
visibility: isSeekEnabled ? `` : `hidden`,
|
1192
|
+
opacity: isSeekEnabled ? `1` : "0"
|
1193
|
+
}
|
1123
1194
|
},
|
1124
|
-
/* @__PURE__ */
|
1125
|
-
)
|
1126
|
-
|
1195
|
+
/* @__PURE__ */ React14.createElement(BackwardArrowIcon, { width: 32, height: 32 })
|
1196
|
+
),
|
1197
|
+
/* @__PURE__ */ React14.createElement(
|
1198
|
+
Box,
|
1127
1199
|
{
|
1128
|
-
|
1129
|
-
|
1130
|
-
|
1131
|
-
|
1200
|
+
css: {
|
1201
|
+
bg: "rgba(0, 0, 0, 0.6)",
|
1202
|
+
r: "$round"
|
1203
|
+
}
|
1204
|
+
},
|
1205
|
+
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused, width: 48, height: 48 })
|
1206
|
+
),
|
1207
|
+
/* @__PURE__ */ React14.createElement(
|
1208
|
+
HMSVideoPlayer.Seeker,
|
1209
|
+
{
|
1210
|
+
title: "forward",
|
1211
|
+
css: {
|
1212
|
+
visibility: isSeekEnabled ? `` : `hidden`,
|
1213
|
+
opacity: isSeekEnabled ? `1` : "0"
|
1214
|
+
}
|
1132
1215
|
},
|
1133
|
-
/* @__PURE__ */
|
1216
|
+
/* @__PURE__ */ React14.createElement(ForwardArrowIcon, { width: 32, height: 32 })
|
1134
1217
|
)
|
1135
|
-
), /* @__PURE__ */
|
1218
|
+
), /* @__PURE__ */ React14.createElement(
|
1136
1219
|
Flex,
|
1137
1220
|
{
|
1138
1221
|
ref: controlsRef,
|
@@ -1145,18 +1228,20 @@ var HLSView = () => {
|
|
1145
1228
|
left: "0",
|
1146
1229
|
width: "100%",
|
1147
1230
|
flexShrink: 0,
|
1231
|
+
zIndex: 1,
|
1148
1232
|
visibility: controlsVisible ? `` : `hidden`,
|
1149
1233
|
opacity: controlsVisible ? `1` : "0"
|
1150
1234
|
}
|
1151
1235
|
},
|
1152
|
-
/* @__PURE__ */
|
1236
|
+
/* @__PURE__ */ React14.createElement(
|
1153
1237
|
HMSVideoPlayer.Controls.Root,
|
1154
1238
|
{
|
1155
1239
|
css: {
|
1156
1240
|
p: "$4 $8"
|
1157
1241
|
}
|
1158
1242
|
},
|
1159
|
-
/* @__PURE__ */
|
1243
|
+
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType })),
|
1244
|
+
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ React14.createElement(ChatToggle, null), hasCaptions && !isHlsAutoplayBlocked && /* @__PURE__ */ React14.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !isHlsAutoplayBlocked ? /* @__PURE__ */ React14.createElement(
|
1160
1245
|
HLSQualitySelector,
|
1161
1246
|
{
|
1162
1247
|
layers: availableLayers,
|
@@ -1166,19 +1251,20 @@ var HLSView = () => {
|
|
1166
1251
|
onQualityChange: handleQuality,
|
1167
1252
|
isAuto: isUserSelectedAuto
|
1168
1253
|
}
|
1169
|
-
) : null)
|
1254
|
+
) : null, /* @__PURE__ */ React14.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }))
|
1170
1255
|
)
|
1171
|
-
)) : null, /* @__PURE__ */
|
1256
|
+
)) : null, /* @__PURE__ */ React14.createElement(
|
1172
1257
|
Flex,
|
1173
1258
|
{
|
1174
1259
|
ref: controlsRef,
|
1175
|
-
direction: "column",
|
1260
|
+
direction: isMobile ? "columnReverse" : "column",
|
1176
1261
|
justify: "end",
|
1177
1262
|
align: "start",
|
1178
1263
|
css: {
|
1179
1264
|
position: "absolute",
|
1180
1265
|
bottom: "0",
|
1181
1266
|
left: "0",
|
1267
|
+
zIndex: 1,
|
1182
1268
|
background: isMobile || isLandscape ? "" : `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,
|
1183
1269
|
width: "100%",
|
1184
1270
|
pt: "$8",
|
@@ -1188,23 +1274,33 @@ var HLSView = () => {
|
|
1188
1274
|
opacity: controlsVisible ? `1` : "0"
|
1189
1275
|
}
|
1190
1276
|
},
|
1191
|
-
|
1192
|
-
/* @__PURE__ */
|
1277
|
+
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Progress, { isDvr: ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR }),
|
1278
|
+
/* @__PURE__ */ React14.createElement(
|
1193
1279
|
HMSVideoPlayer.Controls.Root,
|
1194
1280
|
{
|
1195
1281
|
css: {
|
1196
1282
|
p: "$4 $8"
|
1197
1283
|
}
|
1198
1284
|
},
|
1199
|
-
/* @__PURE__ */
|
1200
|
-
HMSVideoPlayer.
|
1285
|
+
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
|
1286
|
+
HMSVideoPlayer.Seeker,
|
1201
1287
|
{
|
1202
|
-
onClick: () =>
|
1203
|
-
|
1204
|
-
}
|
1205
|
-
|
1206
|
-
}
|
1207
|
-
|
1288
|
+
onClick: () => {
|
1289
|
+
onSeekTo(-10);
|
1290
|
+
},
|
1291
|
+
title: "backward"
|
1292
|
+
},
|
1293
|
+
/* @__PURE__ */ React14.createElement(BackwardArrowIcon, { width: 20, height: 20 })
|
1294
|
+
), /* @__PURE__ */ React14.createElement(HMSVideoPlayer.PlayPauseButton, { isPaused }), /* @__PURE__ */ React14.createElement(
|
1295
|
+
HMSVideoPlayer.Seeker,
|
1296
|
+
{
|
1297
|
+
onClick: () => {
|
1298
|
+
onSeekTo(10);
|
1299
|
+
},
|
1300
|
+
title: "forward"
|
1301
|
+
},
|
1302
|
+
/* @__PURE__ */ React14.createElement(ForwardArrowIcon, { width: 20, height: 20 })
|
1303
|
+
), !isVideoLive ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Duration, null) : null, /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React14.createElement(
|
1208
1304
|
IconButton,
|
1209
1305
|
{
|
1210
1306
|
css: { px: "$2" },
|
@@ -1215,7 +1311,7 @@ var HLSView = () => {
|
|
1215
1311
|
key: "jump-to-live_btn",
|
1216
1312
|
"data-testid": "jump-to-live_btn"
|
1217
1313
|
},
|
1218
|
-
/* @__PURE__ */
|
1314
|
+
/* @__PURE__ */ React14.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ React14.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React14.createElement(
|
1219
1315
|
Box,
|
1220
1316
|
{
|
1221
1317
|
css: {
|
@@ -1225,7 +1321,7 @@ var HLSView = () => {
|
|
1225
1321
|
r: "$1"
|
1226
1322
|
}
|
1227
1323
|
}
|
1228
|
-
), /* @__PURE__ */
|
1324
|
+
), /* @__PURE__ */ React14.createElement(
|
1229
1325
|
Text,
|
1230
1326
|
{
|
1231
1327
|
variant: "$body1",
|
@@ -1236,8 +1332,8 @@ var HLSView = () => {
|
|
1236
1332
|
},
|
1237
1333
|
isVideoLive ? "LIVE" : "GO LIVE"
|
1238
1334
|
)))
|
1239
|
-
), (isMobile || isLandscape) && !isVideoLive ? /* @__PURE__ */
|
1240
|
-
/* @__PURE__ */
|
1335
|
+
), (isMobile || isLandscape) && !isVideoLive ? /* @__PURE__ */ React14.createElement(HMSVideoPlayer.Duration, null) : null),
|
1336
|
+
/* @__PURE__ */ React14.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React14.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React14.createElement(
|
1241
1337
|
HLSQualitySelector,
|
1242
1338
|
{
|
1243
1339
|
layers: availableLayers,
|
@@ -1247,16 +1343,15 @@ var HLSView = () => {
|
|
1247
1343
|
onQualityChange: handleQuality,
|
1248
1344
|
isAuto: isUserSelectedAuto
|
1249
1345
|
}
|
1250
|
-
) : null, isFullScreenSupported ? /* @__PURE__ */
|
1251
|
-
)
|
1252
|
-
(isMobile || isLandscape) && ((_c = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _c.playlist_type) === HLSPlaylistType.DVR ? /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Progress, null) : null
|
1346
|
+
) : null, isFullScreenSupported ? /* @__PURE__ */ React14.createElement(FullScreenButton, { isFullScreen, onToggle: toggle }) : null)
|
1347
|
+
)
|
1253
1348
|
))
|
1254
1349
|
)
|
1255
|
-
)), isMobile && !isFullScreen && /* @__PURE__ */
|
1350
|
+
)), isMobile && !isFullScreen && /* @__PURE__ */ React14.createElement(HLSViewTitle, null)) : /* @__PURE__ */ React14.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React14.createElement(Flex, { align: "center", gap: "2", css: { position: "absolute", left: "$4", top: "$4", zIndex: 1 } }, /* @__PURE__ */ React14.createElement(LeaveRoom, { screenType })), /* @__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"))
|
1256
1351
|
);
|
1257
1352
|
};
|
1258
1353
|
var HLSView_default = HLSView;
|
1259
1354
|
export {
|
1260
1355
|
HLSView_default as default
|
1261
1356
|
};
|
1262
|
-
//# sourceMappingURL=HLSView-
|
1357
|
+
//# sourceMappingURL=HLSView-53PDKIS2.js.map
|