@100mslive/roomkit-react 0.3.7-alpha.0 → 0.3.7-alpha.1

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