@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.
Files changed (49) hide show
  1. package/dist/{HLSView-UIPDGADR.js → HLSView-53PDKIS2.js} +239 -144
  2. package/dist/HLSView-53PDKIS2.js.map +7 -0
  3. package/dist/Prebuilt/components/Chat/MwebChatOption.d.ts +1 -1
  4. package/dist/Prebuilt/components/HMSVideo/PlayPauseButton.d.ts +6 -0
  5. package/dist/Prebuilt/components/HMSVideo/SeekControls.d.ts +7 -0
  6. package/dist/Prebuilt/components/HMSVideo/VideoProgress.d.ts +3 -1
  7. package/dist/Prebuilt/components/HMSVideo/index.d.ts +10 -2
  8. package/dist/Prebuilt/layouts/SidePane.d.ts +1 -1
  9. package/dist/{chunk-J4NOQ2YL.js → chunk-2ZFAT7KY.js} +339 -218
  10. package/dist/chunk-2ZFAT7KY.js.map +7 -0
  11. package/dist/index.cjs.js +932 -708
  12. package/dist/index.cjs.js.map +4 -4
  13. package/dist/index.js +1 -1
  14. package/dist/meta.cjs.json +217 -78
  15. package/dist/meta.esbuild.json +227 -87
  16. package/package.json +7 -6
  17. package/src/Prebuilt/components/AppData/useSidepane.js +17 -2
  18. package/src/Prebuilt/components/AuthToken.jsx +1 -1
  19. package/src/Prebuilt/components/Chat/ChatFooter.tsx +1 -1
  20. package/src/Prebuilt/components/Chat/MwebChatOption.tsx +1 -1
  21. package/src/Prebuilt/components/ConferenceScreen.tsx +11 -14
  22. package/src/Prebuilt/components/Footer/RoleOptions.tsx +32 -15
  23. package/src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx +31 -1
  24. package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx +7 -1
  25. package/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx +27 -0
  26. package/src/Prebuilt/components/HMSVideo/SeekControls.tsx +22 -0
  27. package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx +4 -3
  28. package/src/Prebuilt/components/HMSVideo/VolumeControl.tsx +1 -1
  29. package/src/Prebuilt/components/HMSVideo/index.ts +4 -2
  30. package/src/Prebuilt/components/Header/StreamActions.tsx +1 -1
  31. package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +37 -31
  32. package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +5 -5
  33. package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx +2 -2
  34. package/src/Prebuilt/components/Notifications/PeerNotifications.tsx +1 -1
  35. package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx +19 -8
  36. package/src/Prebuilt/components/SidePaneTabs.tsx +27 -35
  37. package/src/Prebuilt/components/StatsForNerds.jsx +14 -6
  38. package/src/Prebuilt/components/Streaming/Common.jsx +1 -1
  39. package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx +2 -2
  40. package/src/Prebuilt/components/Toast/ToastBatcher.js +8 -1
  41. package/src/Prebuilt/components/Toast/ToastConfig.jsx +17 -0
  42. package/src/Prebuilt/layouts/HLSView.jsx +109 -69
  43. package/src/Prebuilt/layouts/SidePane.tsx +125 -67
  44. package/src/Prebuilt/layouts/VideoStreamingSection.tsx +2 -1
  45. package/src/Prebuilt/provider/roomLayoutProvider/index.tsx +1 -1
  46. package/src/Sheet/Sheet.tsx +4 -0
  47. package/dist/HLSView-UIPDGADR.js.map +0 -7
  48. package/dist/chunk-J4NOQ2YL.js.map +0 -7
  49. 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-J4NOQ2YL.js";
36
+ } from "./chunk-2ZFAT7KY.js";
36
37
 
37
38
  // src/Prebuilt/layouts/HLSView.jsx
38
39
  init_define_process_env();
39
- import React13, { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
40
- import { useFullscreen, useMedia as useMedia2, usePrevious, useToggle } from "react-use";
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 { ColoredHandIcon, GoLiveIcon, PauseIcon as PauseIcon2, PlayIcon as PlayIcon2 } from "@100mslive/react-icons";
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/PlayButton.tsx
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/PlayButton.tsx
230
- var PlayButton = ({
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 React5, { useEffect, useState } from "react";
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__ */ React5.createElement(Flex, { align: "center", css: { cursor: "pointer", h: "$2", alignSelf: "stretch" } }, /* @__PURE__ */ React5.createElement(
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__ */ React5.createElement(
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 React6, { useEffect as useEffect2, useState as useState2 } from "react";
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__ */ React6.createElement(
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 React7, { useState as useState3 } from "react";
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) || 0);
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__ */ React7.createElement(
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__ */ React7.createElement(
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__ */ React7.createElement(
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__ */ React7.createElement(VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
476
+ return /* @__PURE__ */ React8.createElement(VolumeZeroIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
457
477
  }
458
- return volume < 50 ? /* @__PURE__ */ React7.createElement(VolumeOneIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick }) : /* @__PURE__ */ React7.createElement(VolumeTwoIcon, { style: { cursor: "pointer", transition: "color 0.3s" }, onClick });
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
- PlayButton,
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 React8 from "react";
498
+ import React9 from "react";
478
499
  import { ExpandIcon, ShrinkIcon } from "@100mslive/react-icons";
479
500
  var FullScreenButton = ({ isFullScreen, onToggle }) => {
480
- return /* @__PURE__ */ React8.createElement(Tooltip, { title: `${isFullScreen ? "Exit" : "Go"} fullscreen`, side: "top" }, /* @__PURE__ */ React8.createElement(IconButton, { css: { margin: "0px" }, onClick: onToggle, key: "fullscreen_btn", "data-testid": "fullscreen_btn" }, /* @__PURE__ */ React8.createElement(Flex, null, isFullScreen ? /* @__PURE__ */ React8.createElement(ShrinkIcon, null) : /* @__PURE__ */ React8.createElement(ExpandIcon, null))));
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 React9 from "react";
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
- return /* @__PURE__ */ React9.createElement(
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__ */ React9.createElement(DialogContent, { title: "Attention", closeable: false }, /* @__PURE__ */ React9.createElement(DialogRow, null, /* @__PURE__ */ React9.createElement(Text, { variant: "md" }, 'The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to proceed.')), /* @__PURE__ */ React9.createElement(DialogRow, { justify: "end" }, /* @__PURE__ */ React9.createElement(
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 React10 from "react";
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__ */ React10.createElement(Tooltip, { title: "Subtitles/closed captions", side: "top" }, /* @__PURE__ */ React10.createElement(IconButton, { css: { p: "$2" }, onClick: () => hlsPlayer2 == null ? void 0 : hlsPlayer2.toggleCaption() }, isEnabled ? /* @__PURE__ */ React10.createElement(ClosedCaptionIcon, { width: "20", height: "20px" }) : /* @__PURE__ */ React10.createElement(OpenCaptionIcon, { width: "20", height: "20px" })));
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 React11 from "react";
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 = useMedia(config.media.md);
589
+ const isMobile = useMedia3(config.media.md);
536
590
  const isLandscape = useIsLandscape();
537
591
  if (isMobile || isLandscape) {
538
- return /* @__PURE__ */ React11.createElement(Sheet.Root, { open, onOpenChange }, /* @__PURE__ */ React11.createElement(Sheet.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React11.createElement(
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__ */ React11.createElement(SettingsIcon, null)
549
- )), layers.length > 0 && /* @__PURE__ */ React11.createElement(Sheet.Content, { css: { bg: "$surface_default", pb: "$1" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React11.createElement(
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__ */ React11.createElement(Sheet.Close, { css: { color: "$on_surface_high" }, onClick: () => onOpenChange(false) }, /* @__PURE__ */ React11.createElement(CrossIcon2, null))
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__ */ React11.createElement(
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__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
587
- /* @__PURE__ */ React11.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
588
- !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
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__ */ React11.createElement(
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__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
609
- isAuto && /* @__PURE__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
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__ */ React11.createElement(Dropdown.Root, { open, onOpenChange: (value) => onOpenChange(value) }, /* @__PURE__ */ React11.createElement(Dropdown.Trigger, { asChild: true, "data-testid": "quality_selector" }, /* @__PURE__ */ React11.createElement(
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__ */ React11.createElement(Tooltip, { title: "Select Quality", side: "top" }, /* @__PURE__ */ React11.createElement(Flex, { align: "center" }, /* @__PURE__ */ React11.createElement(
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__ */ React11.createElement(SettingsIcon, null)
634
- ), /* @__PURE__ */ React11.createElement(
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__ */ React11.createElement(React11.Fragment, null, "Auto", /* @__PURE__ */ React11.createElement(
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__ */ React11.createElement(
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__ */ React11.createElement(
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__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold" } }, getQualityText(layer)),
691
- /* @__PURE__ */ React11.createElement(Text, { variant: "caption", css: { flex: "1 1 0", c: "$on_surface_low", pl: "$2" } }, getBitrateText(layer)),
692
- !isAuto && layer.width === (selection == null ? void 0 : selection.width) && layer.height === (selection == null ? void 0 : selection.height) && /* @__PURE__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
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__ */ React11.createElement(
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__ */ React11.createElement(Text, { variant: "caption", css: { fontWeight: "$semiBold", flex: "1 1 0" } }, "Auto"),
711
- isAuto && /* @__PURE__ */ React11.createElement(CheckIcon, { width: "16px", height: "16px" })
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 React12, { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
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__ */ React12.createElement(
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__ */ React12.createElement(Logo, null),
770
- /* @__PURE__ */ React12.createElement(Flex, { direction: "column" }, /* @__PURE__ */ React12.createElement(Text, { variant: "sub2", css: { fontWeight: "$semiBold" } }, "Tech Talk"), /* @__PURE__ */ React12.createElement(Flex, { gap: "1" }, /* @__PURE__ */ React12.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, getFormattedCount(peerCount) + " watching"), /* @__PURE__ */ React12.createElement(
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__ */ React12.createElement(Text, { variant: "caption", css: { color: "$on_surface_medium" } }, "Started " + getTime(liveTime) + " ago")))
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, _c;
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 = useMedia2(config.media.md);
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__ */ React13.createElement(
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 onTouchHandler = useCallback2(
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
- event.preventDefault();
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
- if (isFullScreen && !controlsVisible && event.type === "touchmove") {
1028
- setControlsVisible(true);
1029
- if (controlsTimerRef.current) {
1030
- clearTimeout(controlsTimerRef.current);
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
- [controlsVisible, isFullScreen, qualityDropDownOpen]
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__ */ React13.createElement(
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 ? "55%" : "100%",
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__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(HMSPlayerContext.Provider, { value: { hlsPlayer } }, (hlsStatsState == null ? void 0 : hlsStatsState.url) && enablHlsStats && !(isMobile || isLandscape) ? /* @__PURE__ */ React13.createElement(HlsStatsOverlay, { hlsStatsState, onClose: sfnOverlayClose }) : null, /* @__PURE__ */ React13.createElement(
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__ */ React13.createElement(HLSAutoplayBlockedPrompt, { open: isHlsAutoplayBlocked, unblockAutoPlay }),
1077
- showLoader && /* @__PURE__ */ React13.createElement(
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__ */ React13.createElement(Loading, { width: 72, height: 72 })
1157
+ /* @__PURE__ */ React14.createElement(Loading, { width: 72, height: 72 })
1087
1158
  ),
1088
- /* @__PURE__ */ React13.createElement(
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
- onTouchStart: onTouchHandler,
1096
- onTouchMove: onTouchHandler
1166
+ onClick: onClickHandler,
1167
+ onDoubleClick: (e) => {
1168
+ onDoubleClickHandler(e);
1169
+ }
1097
1170
  },
1098
- /* @__PURE__ */ React13.createElement(React13.Fragment, null, isMobile || isLandscape ? /* @__PURE__ */ React13.createElement(React13.Fragment, null, !showLoader && /* @__PURE__ */ React13.createElement(
1099
- Box,
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
- position: "absolute",
1103
- top: "40%",
1104
- left: "50%",
1105
- transform: "translateY(-40%) translateX(-50%)",
1106
- padding: "$4",
1177
+ bg: "#00000066",
1107
1178
  display: "inline-flex",
1108
- r: "$round",
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
- isPaused ? /* @__PURE__ */ React13.createElement(
1117
- IconButton,
1186
+ /* @__PURE__ */ React14.createElement(
1187
+ HMSVideoPlayer.Seeker,
1118
1188
  {
1119
- onClick: () => __async(void 0, null, function* () {
1120
- yield hlsPlayer == null ? void 0 : hlsPlayer.play();
1121
- }),
1122
- "data-testid": "play_btn"
1189
+ title: "backward",
1190
+ css: {
1191
+ visibility: isSeekEnabled ? `` : `hidden`,
1192
+ opacity: isSeekEnabled ? `1` : "0"
1193
+ }
1123
1194
  },
1124
- /* @__PURE__ */ React13.createElement(PlayIcon2, { width: "48px", height: "48px" })
1125
- ) : /* @__PURE__ */ React13.createElement(
1126
- IconButton,
1195
+ /* @__PURE__ */ React14.createElement(BackwardArrowIcon, { width: 32, height: 32 })
1196
+ ),
1197
+ /* @__PURE__ */ React14.createElement(
1198
+ Box,
1127
1199
  {
1128
- onClick: () => __async(void 0, null, function* () {
1129
- yield hlsPlayer == null ? void 0 : hlsPlayer.pause();
1130
- }),
1131
- "data-testid": "pause_btn"
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__ */ React13.createElement(PauseIcon2, { width: "48px", height: "48px" })
1216
+ /* @__PURE__ */ React14.createElement(ForwardArrowIcon, { width: 32, height: 32 })
1134
1217
  )
1135
- ), /* @__PURE__ */ React13.createElement(
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__ */ React13.createElement(
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__ */ React13.createElement(HMSVideoPlayer.Controls.Right, null, isLandscape && /* @__PURE__ */ React13.createElement(ChatToggle, null), hasCaptions && /* @__PURE__ */ React13.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 ? /* @__PURE__ */ React13.createElement(
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__ */ React13.createElement(
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
- !(isMobile || isLandscape) && ((_b = hlsState == null ? void 0 : hlsState.variants[0]) == null ? void 0 : _b.playlist_type) === HLSPlaylistType.DVR && /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Progress, null),
1192
- /* @__PURE__ */ React13.createElement(
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__ */ React13.createElement(HMSVideoPlayer.Controls.Left, null, !(isMobile || isLandscape) && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
1200
- HMSVideoPlayer.PlayButton,
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: () => __async(void 0, null, function* () {
1203
- isPaused ? yield hlsPlayer == null ? void 0 : hlsPlayer.play() : hlsPlayer == null ? void 0 : hlsPlayer.pause();
1204
- }),
1205
- isPaused
1206
- }
1207
- ), !isVideoLive ? /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Duration, null) : null, /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Volume, null)), /* @__PURE__ */ React13.createElement(
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__ */ React13.createElement(Tooltip, { title: isVideoLive ? "Live" : "Go to Live", side: "top" }, /* @__PURE__ */ React13.createElement(Flex, { justify: "center", gap: 2, align: "center" }, /* @__PURE__ */ React13.createElement(
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__ */ React13.createElement(
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__ */ React13.createElement(HMSVideoPlayer.Duration, null) : null),
1240
- /* @__PURE__ */ React13.createElement(HMSVideoPlayer.Controls.Right, null, hasCaptions && !(isMobile || isLandscape) && /* @__PURE__ */ React13.createElement(HLSCaptionSelector, { isEnabled: isCaptionEnabled }), availableLayers.length > 0 && !(isMobile || isLandscape) ? /* @__PURE__ */ React13.createElement(
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__ */ React13.createElement(FullScreenButton, { isFullScreen, onToggle: toggle }) : null)
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__ */ React13.createElement(HLSViewTitle, null)) : /* @__PURE__ */ React13.createElement(Flex, { align: "center", justify: "center", direction: "column", css: { size: "100%", px: "$10" } }, /* @__PURE__ */ React13.createElement(Flex, { css: { c: "$on_surface_high", r: "$round", bg: "$surface_default", p: "$2" } }, streamEnded ? /* @__PURE__ */ React13.createElement(ColoredHandIcon, { height: 56, width: 56 }) : /* @__PURE__ */ React13.createElement(GoLiveIcon, { height: 56, width: 56 })), /* @__PURE__ */ React13.createElement(Text, { variant: "h5", css: { c: "$on_surface_high", mt: "$10", mb: 0, textAlign: "center" } }, streamEnded ? "Stream has ended" : "Stream yet to start"), /* @__PURE__ */ React13.createElement(Text, { variant: "md", css: { textAlign: "center", mt: "$4", c: "$on_surface_medium" } }, streamEnded ? "Have a nice day!" : "Sit back and relax"))
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-UIPDGADR.js.map
1357
+ //# sourceMappingURL=HLSView-53PDKIS2.js.map