@100mslive/roomkit-react 0.1.6-alpha.0 → 0.1.6-alpha.2

package/dist/HLSView-QMU5JK7U.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/layouts/HLSView.jsx", "../src/Prebuilt/components/HlsStatsOverlay.jsx", "../src/Prebuilt/components/HMSVideo/Controls.jsx", "../src/Prebuilt/components/HMSVideo/HMSVideo.jsx", "../src/Prebuilt/components/HMSVideo/PlayButton.jsx", "../src/Prebuilt/components/HMSVideo/VideoProgress.jsx", "../src/Prebuilt/components/HMSVideo/HMSVIdeoUtils.js", "../src/Prebuilt/components/HMSVideo/VideoTime.jsx", "../src/Prebuilt/components/HMSVideo/VolumeControl.jsx", "../src/Prebuilt/components/HMSVideo/index.js", "../src/Prebuilt/components/HMSVideo/FullscreenButton.jsx", "../src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.jsx", "../src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useFullscreen, useMedia, useToggle } from 'react-use';\nimport { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';\nimport screenfull from 'screenfull';\nimport { selectAppData, selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';\nimport { ColoredHandIcon, ExpandIcon, RadioIcon, ShrinkIcon } from '@100mslive/react-icons';\nimport { HlsStatsOverlay } from '../components/HlsStatsOverlay';\nimport { HMSVideoPlayer } from '../components/HMSVideo';\nimport { FullScreenButton } from '../components/HMSVideo/FullscreenButton';\nimport { HLSAutoplayBlockedPrompt } from '../components/HMSVideo/HLSAutoplayBlockedPrompt';\nimport { HLSQualitySelector } from '../components/HMSVideo/HLSQualitySelector';\nimport { ToastManager } from '../components/Toast/ToastManager';\nimport { IconButton } from '../../IconButton';\nimport { Box, Flex } from '../../Layout';\nimport { Loading } from '../../Loading';\nimport { Text } from '../../Text';\nimport { config, useTheme } from '../../Theme';\nimport { Tooltip } from '../../Tooltip';\nimport { APP_DATA, EMOJI_REACTION_TYPE } from '../common/constants';\n\nlet hlsPlayer;\n\nconst HLSView = () => {\n  const videoRef = useRef(null);\n  const hlsViewRef = useRef(null);\n  const hlsState = useHMSStore(selectHLSState);\n  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));\n  const hmsActions = useHMSActions();\n  const { themeType, theme } = useTheme();\n  const [streamEnded, setStreamEnded] = useState(false);\n  let [hlsStatsState, setHlsStatsState] = useState(null);\n  const hlsUrl = hlsState.variants[0]?.url;\n  const [availableLayers, setAvailableLayers] = useState([]);\n  const [isVideoLive, setIsVideoLive] = useState(true);\n  const [isUserSelectedAuto, setIsUserSelectedAuto] = useState(true);\n  const [currentSelectedQuality, setCurrentSelectedQuality] = useState(null);\n  const [isHlsAutoplayBlocked, setIsHlsAutoplayBlocked] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const isFullScreenSupported = screenfull.isEnabled;\n  const [show, toggle] = useToggle(false);\n  const [controlsVisible, setControlsVisible] = useState(true);\n  const controlsRef = useRef();\n  const controlsTimerRef = useRef();\n  const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);\n\n  const isMobile = useMedia(config.media.md);\n  const isFullScreen = useFullscreen(hlsViewRef, show, {\n    onClose: () => toggle(false),\n  });\n  const [showLoader, setShowLoader] = useState(false);\n\n  // FIXME: move this logic to player controller in next release\n  useEffect(() => {\n    /**\n     * @type {HTMLVideoElement} videoEl\n     */\n    const videoEl = videoRef.current;\n    const showLoader = () => setShowLoader(true);\n    const hideLoader = () => setShowLoader(false);\n    videoEl?.addEventListener('playing', hideLoader);\n    videoEl?.addEventListener('waiting', showLoader);\n    return () => {\n      videoEl?.removeEventListener('playing', hideLoader);\n      videoEl?.removeEventListener('waiting', showLoader);\n    };\n  }, []);\n\n  useEffect(() => {\n    const videoElem = videoRef.current;\n    const setStreamEndedCallback = () => {\n      setStreamEnded(true);\n      // no point keeping the callback attached once the streaming is ended\n      videoElem?.removeEventListener('ended', setStreamEndedCallback);\n    };\n    videoElem?.addEventListener('ended', setStreamEndedCallback);\n    return () => {\n      videoElem?.removeEventListener('ended', setStreamEndedCallback);\n    };\n  }, [hlsUrl]);\n\n  /**\n   * initialize HMSHLSPlayer and add event listeners.\n   */\n  useEffect(() => {\n    let videoEl = videoRef.current;\n    const manifestLoadedHandler = ({ layers }) => {\n      setAvailableLayers(layers);\n    };\n    const layerUpdatedHandler = ({ layer }) => {\n      setCurrentSelectedQuality(layer);\n    };\n    const metadataLoadedHandler = ({ payload, ...rest }) => {\n      const parsePayload = str => {\n        try {\n          return JSON.parse(str);\n        } catch (e) {\n          return str;\n        }\n      };\n      // parse payload and extract start_time and payload\n      const duration = rest.duration;\n      const parsedPayload = parsePayload(payload);\n      switch (parsedPayload.type) {\n        case EMOJI_REACTION_TYPE:\n          window.showFlyingEmoji?.({ emojiId: parsedPayload?.emojiId, senderId: parsedPayload?.senderId });\n          break;\n        default: {\n          const toast = {\n            title: `Payload from timed Metadata ${parsedPayload}`,\n            duration: duration || 3000,\n          };\n          console.debug('Added toast ', JSON.stringify(toast));\n          ToastManager.addToast(toast);\n          break;\n        }\n      }\n    };\n    const handleError = data => {\n      console.error('[HLSView] error in hls', `${data}`);\n    };\n    const handleNoLongerLive = ({ isLive }) => {\n      setIsVideoLive(isLive);\n    };\n\n    const playbackEventHandler = data => setIsPaused(data.state === HLSPlaybackState.paused);\n\n    const handleAutoplayBlock = data => setIsHlsAutoplayBlocked(!!data);\n    if (videoEl && hlsUrl) {\n      hlsPlayer = new HMSHLSPlayer(hlsUrl, videoEl);\n      hlsPlayer.on(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);\n      hlsPlayer.on(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, metadataLoadedHandler);\n      hlsPlayer.on(HMSHLSPlayerEvents.ERROR, handleError);\n      hlsPlayer.on(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);\n      hlsPlayer.on(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);\n\n      hlsPlayer.on(HMSHLSPlayerEvents.MANIFEST_LOADED, manifestLoadedHandler);\n      hlsPlayer.on(HMSHLSPlayerEvents.LAYER_UPDATED, layerUpdatedHandler);\n      return () => {\n        hlsPlayer.off(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);\n        hlsPlayer.off(HMSHLSPlayerEvents.ERROR, handleError);\n        hlsPlayer.off(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, metadataLoadedHandler);\n        hlsPlayer.off(HMSHLSPlayerEvents.PLAYBACK_STATE, playbackEventHandler);\n        hlsPlayer.off(HMSHLSPlayerEvents.AUTOPLAY_BLOCKED, handleAutoplayBlock);\n        hlsPlayer.off(HMSHLSPlayerEvents.MANIFEST_LOADED, manifestLoadedHandler);\n        hlsPlayer.off(HMSHLSPlayerEvents.LAYER_UPDATED, layerUpdatedHandler);\n        hlsPlayer.reset();\n        hlsPlayer = null;\n      };\n    }\n  }, [hlsUrl]);\n\n  /**\n   * initialize and subscribe to hlsState\n   */\n  useEffect(() => {\n    const onHLSStats = state => setHlsStatsState(state);\n    if (enablHlsStats) {\n      hlsPlayer?.on(HMSHLSPlayerEvents.STATS, onHLSStats);\n    } else {\n      hlsPlayer?.off(HMSHLSPlayerEvents.STATS, onHLSStats);\n    }\n    return () => {\n      hlsPlayer?.off(HMSHLSPlayerEvents.STATS, onHLSStats);\n    };\n  }, [enablHlsStats]);\n\n  const unblockAutoPlay = async () => {\n    try {\n      await hlsPlayer.play();\n      setIsHlsAutoplayBlocked(false);\n    } catch (error) {\n      console.error('Tried to unblock Autoplay failed with', error.message);\n    }\n  };\n\n  const handleQuality = useCallback(\n    quality => {\n      if (hlsPlayer) {\n        setIsUserSelectedAuto(quality.height.toString().toLowerCase() === 'auto');\n        hlsPlayer.setLayer(quality);\n      }\n    },\n    [availableLayers], //eslint-disable-line\n  );\n\n  const sfnOverlayClose = () => {\n    hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats);\n  };\n\n  useEffect(() => {\n    if (controlsVisible && isFullScreen && !qualityDropDownOpen) {\n      if (controlsTimerRef.current) {\n        clearTimeout(controlsTimerRef.current);\n      }\n      controlsTimerRef.current = setTimeout(() => {\n        setControlsVisible(false);\n      }, 5000);\n    }\n    if (!isFullScreen && controlsTimerRef.current) {\n      clearTimeout(controlsTimerRef.current);\n    }\n    return () => {\n      if (controlsTimerRef.current) {\n        clearTimeout(controlsTimerRef.current);\n      }\n    };\n  }, [controlsVisible, isFullScreen, qualityDropDownOpen]);\n\n  const onHoverHandler = useCallback(\n    event => {\n      if (event.type === 'mouseenter' || qualityDropDownOpen) {\n        setControlsVisible(true);\n        return;\n      }\n      if (event.type === 'mouseleave') {\n        setControlsVisible(false);\n      } else if (isFullScreen && !controlsVisible && event.type === 'mousemove') {\n        setControlsVisible(true);\n        if (controlsTimerRef.current) {\n          clearTimeout(controlsTimerRef.current);\n        }\n      }\n    },\n    [controlsVisible, isFullScreen, qualityDropDownOpen],\n  );\n\n  return (\n    <Flex\n      key=\"hls-viewer\"\n      id={`hls-viewer-${themeType}`}\n      ref={hlsViewRef}\n      css={{\n        size: '100%',\n      }}\n    >\n      {hlsStatsState?.url && enablHlsStats ? (\n        <HlsStatsOverlay hlsStatsState={hlsStatsState} onClose={sfnOverlayClose} />\n      ) : null}\n      {hlsUrl && !streamEnded ? (\n        <Flex\n          id=\"hls-player-container\"\n          align=\"center\"\n          justify=\"center\"\n          css={{\n            width: '100%',\n            margin: '0 auto',\n            height: '100%',\n          }}\n        >\n          <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />\n          {showLoader && (\n            <Flex\n              align=\"center\"\n              justify=\"center\"\n              css={{\n                position: 'absolute',\n              }}\n            >\n              <Loading width={72} height={72} />\n            </Flex>\n          )}\n          <HMSVideoPlayer.Root\n            ref={videoRef}\n            onMouseEnter={onHoverHandler}\n            onMouseMove={onHoverHandler}\n            onMouseLeave={onHoverHandler}\n          >\n            <Flex\n              ref={controlsRef}\n              direction=\"column\"\n              justify=\"flex-end\"\n              align=\"flex-start\"\n              css={{\n                position: 'absolute',\n                bottom: '0',\n                left: '0',\n                background: `linear-gradient(180deg, ${theme.colors.background_dim.value}00 29.46%, ${theme.colors.background_dim.value}A3 100%);`,\n                width: '100%',\n                pt: '$8',\n                flexShrink: 0,\n                transition: 'visibility 0s 0.5s, opacity 0.5s linear',\n                visibility: controlsVisible ? `` : `hidden`,\n                opacity: controlsVisible ? `1` : '0',\n              }}\n            >\n              {!isMobile && (\n                <HMSVideoPlayer.Controls.Root\n                  css={{\n                    p: '$4 $8',\n                  }}\n                >\n                  <HMSVideoPlayer.Controls.Left>\n                    <HMSVideoPlayer.PlayButton\n                      onClick={async () => {\n                        isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();\n                      }}\n                      isPaused={isPaused}\n                    />\n                    <HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />\n                    <HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />\n                    <IconButton\n                      variant=\"standard\"\n                      css={{ px: '$2' }}\n                      onClick={async () => {\n                        await hlsPlayer.seekToLivePosition();\n                        setIsVideoLive(true);\n                      }}\n                      key=\"jump-to-live_btn\"\n                      data-testid=\"jump-to-live_btn\"\n                    >\n                      <Tooltip title=\"Go to Live\" side=\"top\">\n                        <Flex justify=\"center\" gap={2} align=\"center\">\n                          <Box\n                            css={{\n                              height: '$4',\n                              width: '$4',\n                              background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',\n                              r: '$1',\n                            }}\n                          />\n                          <Text\n                            variant={{\n                              '@sm': 'xs',\n                            }}\n                            css={{\n                              c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',\n                            }}\n                          >\n                            {isVideoLive ? 'LIVE' : 'GO LIVE'}\n                          </Text>\n                        </Flex>\n                      </Tooltip>\n                    </IconButton>\n                  </HMSVideoPlayer.Controls.Left>\n\n                  <HMSVideoPlayer.Controls.Right>\n                    {availableLayers.length > 0 ? (\n                      <HLSQualitySelector\n                        layers={availableLayers}\n                        onOpen={setQualityDropDownOpen}\n                        open={qualityDropDownOpen}\n                        selection={currentSelectedQuality}\n                        onQualityChange={handleQuality}\n                        isAuto={isUserSelectedAuto}\n                      />\n                    ) : null}\n                    {isFullScreenSupported ? (\n                      <FullScreenButton\n                        isFullScreen={isFullScreen}\n                        onToggle={toggle}\n                        icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}\n                      />\n                    ) : null}\n                  </HMSVideoPlayer.Controls.Right>\n                </HMSVideoPlayer.Controls.Root>\n              )}\n            </Flex>\n          </HMSVideoPlayer.Root>\n        </Flex>\n      ) : (\n        <Flex align=\"center\" justify=\"center\" direction=\"column\" css={{ size: '100%', px: '$10' }}>\n          <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>\n            {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <RadioIcon height={56} width={56} />}\n          </Flex>\n          <Text variant=\"h5\" css={{ c: '$on_surface_high', mt: '$10', mb: 0, textAlign: 'center' }}>\n            {streamEnded ? 'Stream has ended' : 'Stream yet to start'}\n          </Text>\n          <Text variant=\"md\" css={{ textAlign: 'center', mt: '$4', c: '$on_surface_medium' }}>\n            {streamEnded ? 'Have a nice day!' : 'Sit back and relax'}\n          </Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nexport default HLSView;\n", "import React, { memo } from 'react';\nimport { CloseIcon } from '@100mslive/react-icons';\nimport { Flex } from '../../Layout';\nimport { Text } from '../../Text';\nimport IconButton from '../IconButton';\n\nexport function HlsStatsOverlay({ hlsStatsState, onClose }) {\n  return (\n    <Flex\n      css={{\n        position: 'absolute',\n        width: '$80',\n        marginLeft: '$8',\n        padding: '$8 $8 $10',\n        zIndex: 10,\n        backgroundColor: '$surface_brighter',\n        borderRadius: '$1',\n      }}\n      direction=\"column\"\n    >\n      <IconButton css={{ position: 'absolute', top: '$2', right: '$2' }} onClick={onClose}>\n        <CloseIcon />\n      </IconButton>\n      <HlsStatsRow label=\"URL\">\n        <Flex align=\"center\">\n          <a\n            style={{ cursor: 'pointer', textDecoration: 'underline' }}\n            href={hlsStatsState?.url}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            Stream url\n          </a>\n        </Flex>\n      </HlsStatsRow>\n      <HlsStatsRow label=\"Video size\">\n        {` ${hlsStatsState?.videoSize?.width}x${hlsStatsState?.videoSize?.height}`}\n      </HlsStatsRow>\n      <HlsStatsRow label=\"Buffer duration\">{hlsStatsState?.bufferedDuration?.toFixed(2)} </HlsStatsRow>\n      <HlsStatsRow label=\"Connection speed\">\n        {`${(hlsStatsState?.bandwidthEstimate / (1000 * 1000)).toFixed(2)} Mbps`}\n      </HlsStatsRow>\n      <HlsStatsRow label=\"Bitrate\">{`${(hlsStatsState?.bitrate / (1000 * 1000)).toFixed(2)} Mbps`}</HlsStatsRow>\n      <HlsStatsRow label=\"distance from live\">\n        {getDurationFromSeconds(hlsStatsState.distanceFromLive / 1000)}\n      </HlsStatsRow>\n      <HlsStatsRow label=\"Dropped frames\">{hlsStatsState?.droppedFrames}</HlsStatsRow>\n    </Flex>\n  );\n}\n\n/**\n * Extracted from HLS new Player PR.\n * TODO: remove this and use HMSVideoUtils.js\n * when that code is merged\n */\nexport function getDurationFromSeconds(timeInSeconds) {\n  let time = Math.floor(timeInSeconds);\n  const hours = Math.floor(time / 3600);\n  time = time - hours * 3600;\n  const minutes = Math.floor(time / 60);\n  const seconds = Math.floor(time - minutes * 60);\n\n  const prefixedMinutes = `${minutes < 10 ? '0' + minutes : minutes}`;\n  const prefixedSeconds = `${seconds < 10 ? '0' + seconds : seconds}`;\n\n  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;\n  if (hours) {\n    const prefixedHours = `${hours < 10 ? '0' + hours : hours}`;\n    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;\n  }\n  return videoTimeStr;\n}\n\nconst HlsStatsRow = memo(({ label, children }) => {\n  return (\n    <Flex gap={4} justify=\"center\" css={{ width: '100%' }}>\n      <Text\n        css={{\n          width: '50%',\n          '@md': { fontSize: '$md' },\n          '@sm': { fontSize: '$sm' },\n          // textAlign: \"right\",\n        }}\n      >\n        {label}\n      </Text>\n      <Text\n        css={{\n          '@md': { fontSize: '$md' },\n          '@sm': { fontSize: '$sm' },\n          width: '50%',\n          overflowWrap: 'break-word',\n          // textAlign: \"left\",\n        }}\n      >\n        {children}\n      </Text>\n    </Flex>\n  );\n});\n", "import { Flex, styled } from '../../../';\n\nexport const VideoControls = styled(Flex, {\n  justifyContent: 'center',\n  alignItems: 'center',\n  alignSelf: 'stretch',\n  width: '100%',\n  gap: '$2',\n});\n\nexport const LeftControls = styled(Flex, {\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n  width: '100%',\n  gap: '$4',\n});\nexport const RightControls = styled(Flex, {\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  width: '100%',\n  gap: '$4',\n});\n", "import React, { forwardRef } from 'react';\nimport { Flex } from '../../../';\n\nexport const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {\n  return (\n    <Flex data-testid=\"hms-video\" css={{ size: '100%', position: 'relative' }} direction=\"column\" {...props}>\n      <video style={{ flex: '1 1 0', margin: '0 auto', minHeight: '0' }} ref={videoRef} playsInline />\n      {children}\n    </Flex>\n  );\n});\n", "import React from 'react';\nimport { PauseIcon, PlayIcon } from '@100mslive/react-icons';\nimport { IconButton, Tooltip } from '../../../';\n\nexport const PlayButton = ({ onClick, isPaused }) => {\n  return (\n    <Tooltip title={isPaused ? 'Play' : 'Pause'} side=\"top\">\n      <IconButton onClick={onClick} data-testid=\"play_pause_btn\">\n        {isPaused ? <PlayIcon width={20} height={20} /> : <PauseIcon width={20} height={20} />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n", "import React, { useEffect, useRef, useState } from 'react';\nimport { Box, Flex } from '../../../';\nimport { getPercentage } from './HMSVIdeoUtils';\n\nexport const VideoProgress = ({ onValueChange, hlsPlayer }) => {\n  const [videoProgress, setVideoProgress] = useState(0);\n  const [bufferProgress, setBufferProgress] = useState(0);\n  const progressRootRef = useRef();\n\n  useEffect(() => {\n    const videoEl = hlsPlayer.getVideoElement();\n    const timeupdateHandler = () => {\n      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));\n      let bufferProgress = 0;\n      if (videoEl.buffered.length > 0) {\n        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), videoEl.duration));\n      }\n\n      setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);\n      setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);\n    };\n    if (videoEl) {\n      videoEl.addEventListener('timeupdate', timeupdateHandler);\n    }\n    return function cleanup() {\n      if (videoEl) {\n        videoEl.removeEventListener('timeupdate', timeupdateHandler);\n      }\n    };\n  }, [hlsPlayer]);\n\n  const onProgressChangeHandler = e => {\n    const userClickedX = e.clientX - progressRootRef.current.offsetLeft;\n    const progressBarWidth = progressRootRef.current.offsetWidth;\n    const progress = Math.floor(getPercentage(userClickedX, progressBarWidth));\n    const videoEl = hlsPlayer.getVideoElement();\n    const currentTime = (progress * videoEl.duration) / 100;\n\n    if (onValueChange) {\n      onValueChange(currentTime);\n    }\n  };\n\n  return hlsPlayer.getVideoElement() ? (\n    <Flex\n      ref={progressRootRef}\n      css={{ cursor: 'pointer', h: '$4', alignSelf: 'stretch' }}\n      onClick={onProgressChangeHandler}\n    >\n      <Box\n        id=\"video-actual\"\n        css={{\n          display: 'inline',\n          width: `${videoProgress}%`,\n          background: '$primary_default',\n        }}\n      />\n      <Box\n        id=\"video-buffer\"\n        css={{\n          width: `${bufferProgress - videoProgress}%`,\n          background: '$on_surface_high',\n          opacity: '25%',\n        }}\n      />\n      <Box\n        id=\"video-rest\"\n        css={{\n          width: `${100 - bufferProgress}%`,\n          background: '$on_surface_high',\n          opacity: '10%',\n        }}\n      />\n    </Flex>\n  ) : null;\n};\n", "export function getPercentage(a, b) {\n  return (a / b) * 100;\n}\n\n/**\n *\n * @param {number} timeInSeconds - if given as floating point value, it is floored.\n * @returns  a string representing timeInSeconds in HH:MM:SS format.\n * (e.g) getDurationFromSeconds(3910) returns \"1:05:10\"\n */\nexport function getDurationFromSeconds(timeInSeconds) {\n  let time = Math.floor(timeInSeconds);\n  const hours = Math.floor(time / 3600);\n  time = time - hours * 3600;\n  const minutes = Math.floor(time / 60);\n  const seconds = Math.floor(time - minutes * 60);\n\n  const prefixedMinutes = `${minutes < 10 ? `0${minutes}` : minutes}`;\n  const prefixedSeconds = `${seconds < 10 ? `0${seconds}` : seconds}`;\n\n  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;\n  if (hours) {\n    const prefixedHours = `${hours < 10 ? `0${hours}` : hours}`;\n    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;\n  }\n  return videoTimeStr;\n}\n", "import React, { useEffect, useState } from 'react';\nimport { HMSHLSPlayerEvents } from '@100mslive/hls-player';\nimport { Text } from '../../../';\nimport { getDurationFromSeconds } from './HMSVIdeoUtils';\n\nexport const VideoTime = ({ hlsPlayer }) => {\n  const [videoTime, setVideoTime] = useState('');\n\n  useEffect(() => {\n    const timeupdateHandler = currentTime => setVideoTime(getDurationFromSeconds(currentTime));\n    if (hlsPlayer) {\n      hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);\n    }\n    return function cleanup() {\n      if (hlsPlayer) {\n        hlsPlayer.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);\n      }\n    };\n  }, [hlsPlayer]);\n\n  return hlsPlayer ? (\n    <Text\n      css={{\n        minWidth: '$16',\n        c: '$on_surface_medium',\n        display: 'flex',\n        justifyContent: 'center',\n      }}\n    >\n      {videoTime}\n    </Text>\n  ) : null;\n};\n", "import React, { useState } from 'react';\nimport { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from '@100mslive/react-icons';\nimport { Flex, Slider } from '../../../';\n\nexport const VolumeControl = ({ hlsPlayer }) => {\n  const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);\n  const [showSlider, setShowSlider] = useState(false);\n\n  return (\n    <Flex\n      align=\"center\"\n      css={{ color: '$on_surface_high' }}\n      onMouseOver={event => {\n        event.stopPropagation();\n        setShowSlider(true);\n      }}\n      onMouseLeave={event => {\n        event.stopPropagation();\n        setShowSlider(false);\n      }}\n    >\n      <VolumeIcon\n        volume={volume}\n        onClick={() => {\n          if (volume > 0) {\n            setVolume(0);\n            hlsPlayer?.setVolume(0);\n          } else {\n            setVolume(100);\n            hlsPlayer?.setVolume(100);\n          }\n        }}\n      />\n      <Slider\n        css={{\n          mx: '$4',\n          w: '$20',\n          cursor: 'pointer',\n          '@sm': { w: '$14' },\n          '@xs': { w: '$14' },\n          opacity: showSlider ? '1' : '0',\n          display: showSlider ? '' : 'none',\n          transition: `all .2s ease .5s`,\n        }}\n        min={0}\n        max={100}\n        step={1}\n        value={[volume]}\n        onValueChange={volume => {\n          hlsPlayer.setVolume(volume[0]);\n          setVolume(volume[0]);\n        }}\n        thumbStyles={{ w: '$6', h: '$6' }}\n      />\n    </Flex>\n  );\n};\n\nconst VolumeIcon = ({ volume, onClick }) => {\n  if (volume === 0) {\n    return <VolumeZeroIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />;\n  }\n  return volume < 50 ? (\n    <VolumeOneIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />\n  ) : (\n    <VolumeTwoIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />\n  );\n};\n", "import { LeftControls, RightControls, VideoControls } from './Controls';\nimport { HMSVideo } from './HMSVideo';\nimport { PlayButton } from './PlayButton';\nimport { VideoProgress } from './VideoProgress';\nimport { VideoTime } from './VideoTime';\nimport { VolumeControl } from './VolumeControl';\n\nexport const HMSVideoPlayer = {\n  Root: HMSVideo,\n  PlayButton: PlayButton,\n  Progress: VideoProgress,\n  Duration: VideoTime,\n  Volume: VolumeControl,\n  Controls: {\n    Root: VideoControls,\n    Left: LeftControls,\n    Right: RightControls,\n  },\n};\n", "import React from 'react';\nimport { Flex, IconButton, Tooltip } from '../../../';\n\nexport const FullScreenButton = ({ isFullScreen, icon, onToggle }) => {\n  return (\n    <Tooltip title={`${isFullScreen ? 'Exit' : 'Go'} fullscreen`} side=\"top\">\n      <IconButton\n        variant=\"standard\"\n        css={{ margin: '0px' }}\n        onClick={onToggle}\n        key=\"fullscreen_btn\"\n        data-testid=\"fullscreen_btn\"\n      >\n        <Flex>{icon}</Flex>\n      </IconButton>\n    </Tooltip>\n  );\n};\n", "import React from 'react';\nimport { Button, Dialog, Text } from '../../../';\nimport { DialogContent, DialogRow } from '../../primitives/DialogContent';\n\nexport function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {\n  return (\n    <Dialog.Root\n      open={open}\n      onOpenChange={value => {\n        if (!value) {\n          unblockAutoPlay();\n        }\n      }}\n    >\n      <DialogContent title=\"Attention\" closeable={false}>\n        <DialogRow>\n          <Text variant=\"md\">\n            The browser wants us to get a confirmation for playing the HLS Stream. Please click \"play stream\" to\n            proceed.\n          </Text>\n        </DialogRow>\n        <DialogRow justify=\"end\">\n          <Button\n            variant=\"primary\"\n            onClick={() => {\n              unblockAutoPlay();\n            }}\n          >\n            Play stream\n          </Button>\n        </DialogRow>\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n", "import React from 'react';\nimport { CheckIcon, SettingsIcon } from '@100mslive/react-icons';\nimport { Box, Dropdown, Flex, Text, Tooltip } from '../../../';\n\nexport function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection, isAuto }) {\n  return (\n    <Dropdown.Root open={open} onOpenChange={value => onOpen(value)}>\n      <Dropdown.Trigger asChild data-testid=\"quality_selector\">\n        <Flex\n          css={{\n            color: '$on_primary_high',\n            r: '$1',\n            cursor: 'pointer',\n            p: '$2',\n          }}\n        >\n          <Tooltip title=\"Select Quality\" side=\"top\">\n            <Flex align=\"center\">\n              <Box\n                css={{\n                  w: '$9',\n                  h: '$9',\n                  display: 'inline-flex',\n                  alignItems: 'center',\n                  c: '$on_surface_high',\n                }}\n              >\n                <SettingsIcon />\n              </Box>\n              <Text\n                variant={{\n                  '@md': 'sm',\n                  '@sm': 'xs',\n                  '@xs': 'tiny',\n                }}\n                css={{ display: 'flex', alignItems: 'center', ml: '$2', c: '$on_surface_medium' }}\n              >\n                {isAuto && (\n                  <>\n                    Auto\n                    <Box\n                      css={{\n                        mx: '$2',\n                        w: '$2',\n                        h: '$2',\n                        background: '$on_surface_medium',\n                        r: '$1',\n                      }}\n                    />\n                  </>\n                )}\n                {selection && Math.min(selection.width, selection.height)}p\n              </Text>\n            </Flex>\n          </Tooltip>\n        </Flex>\n      </Dropdown.Trigger>\n      {layers.length > 0 && (\n        <Dropdown.Content\n          sideOffset={5}\n          align=\"end\"\n          css={{\n            height: 'auto',\n            maxHeight: '$52',\n            w: '$40',\n            bg: '$surface_bright',\n            py: '$4',\n            gap: '$4',\n            display: 'grid',\n          }}\n        >\n          {layers.map(layer => {\n            return (\n              <Dropdown.Item\n                onClick={() => onQualityChange(layer)}\n                key={layer.width}\n                css={{\n                  bg:\n                    !isAuto && layer.width === selection?.width && layer.height === selection?.height\n                      ? '$surface_default'\n                      : '$surface_bright',\n                  '&:hover': {\n                    bg: '$surface_brighter',\n                  },\n                  p: '$2 $4 $2 $8',\n                  h: '$12',\n                  gap: '$2',\n                }}\n              >\n                <Text variant=\"caption\" css={{ fontWeight: '$semiBold' }}>\n                  {getQualityText(layer)}\n                </Text>\n                <Text variant=\"caption\" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>\n                  {getBitrateText(layer)}\n                </Text>\n                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (\n                  <CheckIcon width=\"16px\" height=\"16px\" />\n                )}\n              </Dropdown.Item>\n            );\n          })}\n          <Dropdown.Item\n            onClick={() => onQualityChange({ height: 'auto' })}\n            key=\"auto\"\n            css={{\n              bg: !isAuto ? '$surface_bright' : '$surface_default',\n              '&:hover': {\n                bg: '$surface_brighter',\n              },\n              p: '$2 $4 $2 $8',\n              h: '$12',\n              gap: '$2',\n            }}\n          >\n            <Text variant=\"caption\" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>\n              Auto\n            </Text>\n            {isAuto && <CheckIcon width=\"16px\" height=\"16px\" />}\n          </Dropdown.Item>\n        </Dropdown.Content>\n      )}\n    </Dropdown.Root>\n  );\n}\n\nconst getQualityText = layer => `${Math.min(layer.height, layer.width)}p `;\nconst getBitrateText = layer => `(${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;\n"],
+  "mappings": "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",
+  "names": ["React", "useEffect", "useRef", "useState", "HMSHLSPlayerEvents", "React", "React", "React", "React", "React", "getDurationFromSeconds", "hlsPlayer", "videoProgress", "bufferProgress", "React", "React", "useEffect", "useState", "hlsPlayer", "useState", "useEffect", "getDurationFromSeconds", "React", "React", "useState", "hlsPlayer", "useState", "React", "volume", "React", "React", "React", "React", "React", "React", "useRef", "useState", "useEffect", "showLoader", "_a", "HMSHLSPlayerEvents", "React"]
+}

package/dist/Prebuilt/AppContext.d.ts

@@ -5,7 +5,7 @@ declare type HMSPrebuiltContextType = {
     role?: string;
     userName?: string;
     userId?: string;
-    endpoints?: object;
+    endpoints?: Record<string, string>;
     onLeave?: () => void;
 };
 export declare const HMSPrebuiltContext: React.Context<HMSPrebuiltContextType>;

package/dist/Prebuilt/components/Chat/ChatFooter.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+export declare const ChatFooter: ({ role, peerId, onSend, children, }: {
+    role: any;
+    peerId: string;
+    onSend: any;
+    children: ReactNode;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Connection/ConnectionIndicator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ConnectionIndicator: ({ peerId, isTile, hideBg, }: {
+    peerId: string;
+    isTile?: boolean | undefined;
+    hideBg?: boolean | undefined;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/Connection/TileConnection.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const TileConnection: ({ name, peerId, hideLabel, width, spotlighted, pinned, }: {
+    name: string;
+    peerId: string;
+    hideLabel: boolean;
+    width?: number | undefined;
+    spotlighted?: boolean | undefined;
+    pinned?: boolean | undefined;
+}) => React.JSX.Element;
+export default TileConnection;

package/dist/Prebuilt/components/Footer/ChatToggle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ChatToggle: () => React.JSX.Element;

package/dist/Prebuilt/components/Footer/RoleAccordion.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { HMSPeer } from '@100mslive/react-sdk';
+interface ItemData {
+    peerList: HMSPeer[];
+    isConnected: boolean;
+}
+export declare const RoleAccordion: ({ peerList, roleName, isConnected, filter, isHandRaisedAccordion, }: ItemData & {
+    roleName: string;
+    isHandRaisedAccordion?: boolean | undefined;
+    filter?: {
+        search: string;
+    } | undefined;
+}) => React.JSX.Element | null;
+export {};

package/dist/Prebuilt/components/Footer/RoleOptions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HMSPeer } from '@100mslive/react-sdk';
+export declare const RoleOptions: ({ roleName, peerList }: {
+    roleName: string;
+    peerList: HMSPeer[];
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/Header/StreamActions.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const LiveStatus: () => React.JSX.Element | null;
+export declare const RecordingStatus: () => React.JSX.Element | null;
+/**
+ * @description only start recording button will be shown.
+ */
+export declare const StreamActions: () => React.JSX.Element;
+export declare const StopRecordingInSheet: ({ onStopRecording, onClose, }: {
+    onStopRecording: () => void;
+    onClose: () => void;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Leave/DesktopLeaveRoom.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
-export declare const DesktopLeaveRoom: ({ leaveRoom, stopStream, screenType, }: {
-    leaveRoom: () => void;
-    stopStream: () => Promise<void>;
+export declare const DesktopLeaveRoom: ({ leaveRoom, screenType, }: {
+    leaveRoom: (args: {
+        endstream: boolean;
+    }) => void;
     screenType: keyof ConferencingScreen;
 }) => React.JSX.Element | null;

package/dist/Prebuilt/components/Leave/EndSessionContent.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-export declare const EndSessionContent: ({ setShowEndStreamAlert, stopStream, leaveRoom, isModal, isStreamingOn, }: {
+export declare const EndSessionContent: ({ setShowEndStreamAlert, leaveRoom, isModal, isStreamingOn, }: {
     setShowEndStreamAlert: (value: boolean) => void;
-    stopStream: () => Promise<void>;
-    leaveRoom: () => void;
+    leaveRoom: (args: {
+        endstream: boolean;
+    }) => void;
     isModal?: boolean | undefined;
     isStreamingOn: boolean;
 }) => React.JSX.Element;

package/dist/Prebuilt/components/Leave/LeaveCard.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import { CSS } from '../../../Theme';
-export declare const LeaveCard: ({ icon, title, subtitle, onClick, bg, titleColor, subtitleColor, css, }: {
+export declare const LeaveCard: ({ icon, title, subtitle, onClick, bg, titleColor, css, }: {
     icon: React.JSX.Element;
     title: string;
     subtitle: string;
     onClick: () => void;
     titleColor: string;
-    subtitleColor: string;
     bg: string;
     css?: CSS | undefined;
 }) => React.JSX.Element;

package/dist/Prebuilt/components/Leave/LeaveSessionContent.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 export declare const LeaveSessionContent: ({ setShowLeaveRoomAlert, leaveRoom, isModal, }: {
     setShowLeaveRoomAlert: (value: boolean) => void;
-    leaveRoom: () => void;
+    leaveRoom: (args: {
+        endstream: boolean;
+    }) => void;
     isModal?: boolean | undefined;
 }) => React.JSX.Element;

package/dist/Prebuilt/components/Leave/MwebLeaveRoom.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
-export declare const MwebLeaveRoom: ({ leaveRoom, stopStream, screenType, }: {
-    leaveRoom: () => void;
-    stopStream: () => Promise<void>;
+export declare const MwebLeaveRoom: ({ leaveRoom, screenType, }: {
+    leaveRoom: (args: {
+        endstream: boolean;
+    }) => void;
     screenType: keyof ConferencingScreen;
 }) => React.JSX.Element | null;

package/dist/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+export declare const MwebOptions: ({ elements, screenType, }: {
+    elements: DefaultConferencingScreen_Elements;
+    screenType: keyof ConferencingScreen;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Preview/PreviewContainer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PreviewContainer: () => React.JSX.Element;
+export default PreviewContainer;

package/dist/Prebuilt/components/Preview/PreviewJoin.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare const PreviewJoin: ({ onJoin, skipPreview, initialName, asRole, }: {
+    onJoin: () => void;
+    skipPreview?: boolean | undefined;
+    initialName?: string | undefined;
+    asRole?: string | undefined;
+}) => React.JSX.Element;
+export declare const PreviewTile: ({ name, error }: {
+    name: string;
+    error?: boolean | undefined;
+}) => React.JSX.Element;
+export declare const PreviewControls: ({ hideSettings }: {
+    hideSettings: boolean;
+}) => React.JSX.Element;
+export declare const PreviewSettings: React.MemoExoticComponent<() => React.JSX.Element>;
+export default PreviewJoin;

package/dist/Prebuilt/components/RoleChangeRequestModal.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RoleChangeRequestModal: () => React.JSX.Element | null;

package/dist/Prebuilt/components/SecondaryTiles.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { LayoutProps } from './VideoLayouts/interface';
-export declare const SecondaryTiles: ({ peers, onPageChange, onPageSize }: LayoutProps) => React.JSX.Element;
+export declare const SecondaryTiles: ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => React.JSX.Element;

package/dist/Prebuilt/components/SidePaneTabs.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ConferencingScreen } from '@100mslive/types-prebuilt';
+export declare const SidePaneTabs: React.NamedExoticComponent<{
+    active: 'Participants | Chat';
+    screenType: keyof ConferencingScreen;
+    hideControls?: boolean | undefined;
+}>;

package/dist/Prebuilt/components/VideoLayouts/EqualProminence.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { LayoutProps } from './interface';
-export declare function EqualProminence({ isInsetEnabled, peers, onPageChange, onPageSize }: LayoutProps): React.JSX.Element;
+export declare function EqualProminence({ isInsetEnabled, peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps): React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/Grid.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
 export declare const Grid: React.ForwardRefExoticComponent<{
     tiles: TrackWithPeerAndDimensions[];
+    edgeToEdge?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/Prebuilt/components/VideoLayouts/GridLayout.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
-export declare type GridLayoutProps = GridVideoTileLayout & {
+export declare type TileCustomisationProps = {
     hide_participant_name_on_tile: boolean;
-    hide_audio_level_on_tile: boolean;
     rounded_video_tile: boolean;
     hide_audio_mute_on_tile: boolean;
     video_object_fit: 'contain' | 'cover';
+    edge_to_edge: boolean;
+    hide_metadata_on_tile: boolean;
 };
-export declare const GridLayout: ({ enable_local_tile_inset: isInsetEnabled, prominent_roles: prominentRoles, enable_spotlighting_peer, hide_participant_name_on_tile, rounded_video_tile, hide_audio_mute_on_tile, video_object_fit, }: GridLayoutProps) => React.JSX.Element;
+export declare type GridLayoutProps = GridVideoTileLayout & TileCustomisationProps;
+export declare const GridLayout: ({ enable_local_tile_inset: isInsetEnabled, prominent_roles: prominentRoles, enable_spotlighting_peer, hide_participant_name_on_tile, rounded_video_tile, hide_audio_mute_on_tile, video_object_fit, edge_to_edge, hide_metadata_on_tile, }: GridLayoutProps) => React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/ProminenceLayout.d.ts

@@ -2,11 +2,14 @@ import React from 'react';
 import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
 import { CSS } from '../../../Theme';
 export declare const ProminenceLayout: {
-    Root: ({ children }: React.PropsWithChildren) => React.JSX.Element;
+    Root: ({ children, edgeToEdge }: React.PropsWithChildren<{
+        edgeToEdge?: boolean | undefined;
+    }>) => React.JSX.Element;
     ProminentSection: ({ children, css }: React.PropsWithChildren<{
         css?: CSS | undefined;
     }>) => React.JSX.Element;
-    SecondarySection: ({ tiles, children }: React.PropsWithChildren<{
+    SecondarySection: ({ tiles, children, edgeToEdge, }: React.PropsWithChildren<{
         tiles: TrackWithPeerAndDimensions[];
-    }>) => React.JSX.Element;
+        edgeToEdge?: boolean | undefined;
+    }>) => React.JSX.Element | null;
 };

package/dist/Prebuilt/components/VideoLayouts/RoleProminence.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { LayoutProps } from './interface';
-export declare function RoleProminence({ isInsetEnabled, prominentRoles, peers, onPageChange, onPageSize, }: LayoutProps): React.JSX.Element;
+export declare function RoleProminence({ isInsetEnabled, prominentRoles, peers, onPageChange, onPageSize, edgeToEdge, }: LayoutProps): React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/ScreenshareLayout.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { LayoutProps } from './interface';
-export declare const ScreenshareLayout: ({ peers, onPageChange, onPageSize }: LayoutProps) => React.JSX.Element;
+export declare const ScreenshareLayout: ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => React.JSX.Element;

package/dist/Prebuilt/components/VideoLayouts/interface.d.ts

@@ -1,6 +1,7 @@
 import { HMSPeer } from '@100mslive/react-sdk';
 export interface LayoutProps {
     isInsetEnabled?: boolean;
+    edgeToEdge?: boolean;
     prominentRoles?: string[];
     peers: HMSPeer[];
     onPageChange?: (page: number) => void;

package/dist/Prebuilt/components/hooks/useAutoStartStreaming.d.ts

@@ -0,0 +1 @@
+export declare const useAutoStartStreaming: () => void;

package/dist/Prebuilt/components/hooks/useRedirectToLeave.d.ts

@@ -0,0 +1,3 @@
+export declare const useRedirectToLeave: () => {
+    redirectToLeave: (timeout?: number) => void;
+};

package/dist/Prebuilt/components/hooks/useTileLayout.d.ts

@@ -3,9 +3,10 @@ export declare const usePagesWithTiles: ({ peers, maxTileCount }: {
     peers: HMSPeer[];
     maxTileCount: number;
 }) => TrackWithPeerAndDimensions[][];
-export declare const useTileLayout: ({ pageList, maxTileCount, }: {
+export declare const useTileLayout: ({ pageList, maxTileCount, edgeToEdge, }: {
     pageList: TrackWithPeerAndDimensions[][];
     maxTileCount: number;
+    edgeToEdge?: boolean | undefined;
 }) => {
     pagesWithTiles: TrackWithPeerAndDimensions[][];
     ref: import("react-use/lib/useMeasure").UseMeasureRef<HTMLDivElement>;

package/dist/Prebuilt/components/hooks/useVideoTileLayout.d.ts

@@ -4,7 +4,9 @@ declare type TileContextType = {
     hideParticipantNameOnTile?: boolean;
     roundedVideoTile?: boolean;
     hideAudioMuteOnTile?: boolean;
+    hideAudioLevelOnTile?: boolean;
     objectFit?: 'cover' | 'contain';
+    hideMetadataOnTile?: boolean;
 };
 export declare const VideoTileContext: React.Context<TileContextType>;
 export declare const useVideoTileContext: () => TileContextType;

package/dist/Prebuilt/layouts/SidePane.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
-declare const SidePane: ({ screenType }: {
+import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
+declare const SidePane: ({ screenType, tileProps, hideControls, }: {
     screenType: keyof ConferencingScreen;
+    tileProps: TileCustomisationProps;
+    hideControls: boolean;
 }) => React.JSX.Element | null;
 export default SidePane;

package/dist/Prebuilt/layouts/VideoStreamingSection.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ConferencingScreen, DefaultConferencingScreen_Elements, HLSLiveStreamingScreen_Elements } from '@100mslive/types-prebuilt';
-export declare const VideoStreamingSection: ({ screenType, elements, }: {
+export declare const VideoStreamingSection: ({ screenType, elements, hideControls, }: {
     screenType: keyof ConferencingScreen;
     elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
+    hideControls: boolean;
 }) => React.JSX.Element | null;

package/dist/{VirtualBackground-AYDHYLIZ.js → VirtualBackground-37FXUPYO.js}

@@ -1,18 +1,18 @@
 import {
   ActionTile
-} from "./chunk-E2M2ZSOL.js";
+} from "./chunk-ZKE2N5LH.js";
 import {
   IconButton_default,
   Loading,
   Tooltip,
   __async
-} from "./chunk-GQD2AGWW.js";
+} from "./chunk-KBVIZGYW.js";
 
 // src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
 import React, { useEffect, useRef, useState } from "react";
 import { HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes2 } from "@100mslive/hms-virtual-background";
 import {
-  selectIsAllowedToPublish,
+  selectIsLocalVideoEnabled,
   selectIsLocalVideoPluginPresent,
   selectLocalPeerRole,
   selectLocalVideoTrackID,
@@ -82,8 +82,8 @@ var VirtualBackground = ({
 }) => {
   const pluginRef = useRef(null);
   const hmsActions = useHMSActions();
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
   const role = useHMSStore(selectLocalPeerRole);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const [isVBLoading, setIsVBLoading] = useState(false);
   const [isVBSupported, setIsVBSupported] = useState(false);
   const [isVBOn, setIsVBOn] = useState(false);
@@ -129,7 +129,7 @@ var VirtualBackground = ({
       }
     });
   }
-  if (!isAllowedToPublish.video || !isVBSupported) {
+  if (!isVBSupported || !isVideoOn) {
     return null;
   }
   if (asActionTile) {
@@ -174,4 +174,4 @@ export {
   VirtualBackground,
   VirtualBackground_default as default
 };
-//# sourceMappingURL=VirtualBackground-AYDHYLIZ.js.map
+//# sourceMappingURL=VirtualBackground-37FXUPYO.js.map

package/dist/VirtualBackground-37FXUPYO.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx", "../src/Prebuilt/plugins/VirtualBackground/vbutils.js"],
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nimport {\n  selectIsLocalVideoEnabled,\n  selectIsLocalVideoPluginPresent,\n  selectLocalPeerRole,\n  selectLocalVideoTrackID,\n  useHMSActions,\n  useHMSStore,\n} from '@100mslive/react-sdk';\nimport { VirtualBackgroundIcon } from '@100mslive/react-icons';\nimport { ActionTile } from '../../components/MoreSettings/ActionTile';\nimport { Loading } from '../../../Loading';\nimport { Tooltip } from '../../../Tooltip';\nimport IconButton from '../../IconButton';\nimport { getRandomVirtualBackground } from './vbutils';\n\nexport const VirtualBackground = ({\n  asActionTile = false,\n  onVBClick = () => {\n    return;\n  },\n}) => {\n  const pluginRef = useRef(null);\n  const hmsActions = useHMSActions();\n  const role = useHMSStore(selectLocalPeerRole);\n  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);\n  const [isVBLoading, setIsVBLoading] = useState(false);\n  const [isVBSupported, setIsVBSupported] = useState(false);\n  const [isVBOn, setIsVBOn] = useState(false);\n  const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);\n  const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB'));\n\n  async function createPlugin() {\n    if (!pluginRef.current) {\n      const { HMSVBPlugin } = await import('@100mslive/hms-virtual-background');\n      pluginRef.current = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);\n    }\n  }\n  useEffect(() => {\n    if (!localPeerVideoTrackID) {\n      return;\n    }\n    createPlugin().then(() => {\n      //check support of plugin\n      const pluginSupport = hmsActions.validateVideoPluginSupport(pluginRef.current);\n      setIsVBSupported(pluginSupport.isSupported);\n    });\n  }, [hmsActions, localPeerVideoTrackID]);\n\n  async function addPlugin() {\n    setIsVBLoading(true);\n    try {\n      await createPlugin();\n      window.HMS.virtualBackground = pluginRef.current;\n      const { background, backgroundType } = getRandomVirtualBackground();\n      await pluginRef.current.setBackground(background, backgroundType);\n      await hmsActions.addPluginToVideoTrack(pluginRef.current, Math.floor(role.publishParams.video.frameRate / 2));\n    } catch (err) {\n      console.error('add virtual background plugin failed', err);\n    }\n    setIsVBLoading(false);\n  }\n\n  async function removePlugin() {\n    if (pluginRef.current) {\n      await hmsActions.removePluginFromVideoTrack(pluginRef.current);\n      pluginRef.current = null;\n    }\n  }\n\n  if (!isVBSupported || !isVideoOn) {\n    return null;\n  }\n  if (asActionTile) {\n    return (\n      <ActionTile.Root\n        data-testid=\"virtual_bg_btn\"\n        active={isVBPresent}\n        disabled={isVBLoading}\n        onClick={() => {\n          setIsVBOn(!isVBOn);\n          !isVBPresent ? addPlugin() : removePlugin();\n          onVBClick();\n        }}\n      >\n        <VirtualBackgroundIcon />\n        <ActionTile.Title>Virtual Background</ActionTile.Title>\n      </ActionTile.Root>\n    );\n  }\n\n  return (\n    <Tooltip\n      boxCss={{ zIndex: '100' }}\n      title={isVBLoading ? 'Adding virtual background' : `Turn ${!isVBPresent ? 'on' : 'off'} virtual background`}\n    >\n      <IconButton\n        active={!isVBPresent}\n        disabled={isVBLoading}\n        onClick={() => {\n          !isVBPresent ? addPlugin() : removePlugin();\n        }}\n        data-testid=\"virtual_bg_btn\"\n      >\n        {isVBLoading ? <Loading /> : <VirtualBackgroundIcon />}\n      </IconButton>\n    </Tooltip>\n  );\n};\n\nexport default VirtualBackground;\n", "/* eslint-disable no-case-declarations */\nimport { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';\nexport function getRandomVirtualBackground() {\n  const backgroundList = [\n    {\n      background: HMSVirtualBackgroundTypes.BLUR,\n      backgroundType: HMSVirtualBackgroundTypes.BLUR,\n    },\n  ];\n\n  const images = [\n    'https://www.100ms.live/images/vb-1.jpeg',\n    'https://www.100ms.live/images/vb-2.jpg',\n    'https://www.100ms.live/images/vb-3.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms1.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms2.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms3.png',\n    'https://d2qi07yyjujoxr.cloudfront.net/webapp/vb/hms4.png',\n  ].map(url => ({\n    background: url,\n    backgroundType: HMSVirtualBackgroundTypes.IMAGE,\n  }));\n\n  backgroundList.push(...images);\n\n  /* \n   //TODO: update with a better quality gif.\n  const gifList = [\n    {\n      background: \"https://www.100ms.live/images/vb-1.gif\",\n      backgroundType: HMSVirtualBackgroundTypes.GIF,\n    },\n  ];\n  backgroundList.push(...gifList); \n  */\n\n  const videoList = [\n    'https://www.100ms.live/images/video-1.mp4',\n    'https://www.100ms.live/images/video-2.mp4',\n    'https://www.100ms.live/images/video-5.mp4',\n    'https://www.100ms.live/images/video-7.mp4',\n    'https://www.100ms.live/images/video-8.mp4',\n  ].map(url => ({\n    background: url,\n    backgroundType: HMSVirtualBackgroundTypes.VIDEO,\n  }));\n  backgroundList.push(...videoList);\n\n  const randomIdx = Math.floor(Math.random() * backgroundList.length);\n  const virtualBackground = backgroundList[randomIdx];\n  switch (virtualBackground.backgroundType) {\n    case HMSVirtualBackgroundTypes.IMAGE:\n      const img = document.createElement('img');\n      img.alt = 'VB';\n      img.src = backgroundList[randomIdx].background;\n      virtualBackground.background = img;\n      return virtualBackground;\n    case HMSVirtualBackgroundTypes.VIDEO:\n      const videoEl = document.createElement('video');\n      videoEl.src = backgroundList[randomIdx].background;\n      virtualBackground.background = videoEl;\n      return virtualBackground;\n    default:\n      return virtualBackground;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["HMSVirtualBackgroundTypes", "HMSVirtualBackgroundTypes"]
+}