@100mslive/roomkit-react 0.2.6-alpha.4 → 0.2.6-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{HLSView-H6Q2FEMZ.js → HLSView-4B4DD2HF.js} +3 -3
- package/dist/{HLSView-H6Q2FEMZ.js.map → HLSView-4B4DD2HF.js.map} +1 -1
- package/dist/Prebuilt/components/Chat/ChatBody.d.ts +2 -1
- package/dist/{chunk-HRUQKLGN.js → chunk-EMFS7SME.js} +60 -52
- package/dist/{chunk-HRUQKLGN.js.map → chunk-EMFS7SME.js.map} +3 -3
- package/dist/index.cjs.js +60 -52
- package/dist/index.cjs.js.map +3 -3
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +10 -10
- package/dist/meta.esbuild.json +17 -17
- package/package.json +6 -6
- package/src/Prebuilt/components/Chat/ChatBody.tsx +3 -3
- package/src/Prebuilt/components/Chat/PinnedMessage.tsx +2 -4
- package/src/Prebuilt/components/HMSVideo/VideoProgress.jsx +1 -1
- package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx +8 -1
|
@@ -23,7 +23,7 @@ import {
|
|
|
23
23
|
styled,
|
|
24
24
|
usePollViewToggle,
|
|
25
25
|
useTheme
|
|
26
|
-
} from "./chunk-
|
|
26
|
+
} from "./chunk-EMFS7SME.js";
|
|
27
27
|
|
|
28
28
|
// src/Prebuilt/layouts/HLSView.jsx
|
|
29
29
|
init_define_process_env();
|
|
@@ -270,7 +270,7 @@ var VideoProgress = ({ onValueChange, hlsPlayer: hlsPlayer2 }) => {
|
|
|
270
270
|
Flex,
|
|
271
271
|
{
|
|
272
272
|
ref: progressRootRef,
|
|
273
|
-
css: { cursor: "pointer", h: "$
|
|
273
|
+
css: { cursor: "pointer", h: "$2", alignSelf: "stretch" },
|
|
274
274
|
onClick: onProgressChangeHandler
|
|
275
275
|
},
|
|
276
276
|
/* @__PURE__ */ React4.createElement(
|
|
@@ -992,4 +992,4 @@ var HLSView_default = HLSView;
|
|
|
992
992
|
export {
|
|
993
993
|
HLSView_default as default
|
|
994
994
|
};
|
|
995
|
-
//# sourceMappingURL=HLSView-
|
|
995
|
+
//# sourceMappingURL=HLSView-4B4DD2HF.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/Prebuilt/layouts/HLSView.jsx", "../src/Prebuilt/components/HlsStatsOverlay.jsx", "../src/Prebuilt/components/HMSVideo/index.js", "../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/FullscreenButton.jsx", "../src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.jsx", "../src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx", "../src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useFullscreen, useMedia, usePrevious, useToggle } from 'react-use';\nimport { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';\nimport screenfull from 'screenfull';\nimport {\n HMSNotificationTypes,\n selectAppData,\n selectHLSState,\n selectPeerNameByID,\n selectPollByID,\n useHMSActions,\n useHMSNotifications,\n useHMSStore,\n useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { ColoredHandIcon, ExpandIcon, GoLiveIcon, PlayIcon, 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 { HLSCaptionSelector } from '../components/HMSVideo/HLSCaptionSelector';\nimport { HLSQualitySelector } from '../components/HMSVideo/HLSQualitySelector';\nimport { ToastManager } from '../components/Toast/ToastManager';\nimport { Button } from '../../Button';\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 { usePollViewToggle } from '../components/AppData/useSidepane';\nimport { APP_DATA, EMOJI_REACTION_TYPE } from '../common/constants';\n\nlet hlsPlayer;\nconst toastMap = {};\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 notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);\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 [isCaptionEnabled, setIsCaptionEnabled] = useState(true);\n const [hasCaptions, setHasCaptions] = useState(false);\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 const lastHlsUrl = usePrevious(hlsUrl);\n const togglePollView = usePollViewToggle();\n const vanillaStore = useHMSVanillaStore();\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 // 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 useEffect(() => {\n if (streamEnded && lastHlsUrl !== hlsUrl) {\n setStreamEnded(false);\n }\n }, [hlsUrl, streamEnded, lastHlsUrl]);\n\n useEffect(() => {\n if (!notification) return;\n const toastID = toastMap?.[notification.data.id];\n if (toastID) {\n ToastManager.removeToast(toastMap[notification.data.id]);\n delete toastMap[notification.data.id];\n }\n }, [notification]);\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 setHasCaptions(hlsPlayer?.hasCaptions());\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 const duration = rest.duration;\n const parsedPayload = parsePayload(payload);\n // check if poll happened\n if (parsedPayload.startsWith('poll:')) {\n const pollId = parsedPayload.substr(parsedPayload.indexOf(':') + 1);\n const poll = vanillaStore.getState(selectPollByID(pollId));\n const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || 'Participant';\n // launch poll\n const toastID = ToastManager.addToast({\n title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,\n action: (\n <Button\n onClick={() => togglePollView(pollId)}\n variant=\"standard\"\n css={{\n backgroundColor: '$surface_bright',\n fontWeight: '$semiBold',\n color: '$on_surface_high',\n p: '$xs $md',\n }}\n >\n {poll.type === 'quiz' ? 'Answer' : 'Vote'}\n </Button>\n ),\n duration: Infinity,\n });\n toastMap[pollId] = toastID;\n return;\n }\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 const captionEnabledEventHandler = isCaptionEnabled => {\n setIsCaptionEnabled(isCaptionEnabled);\n };\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.CAPTION_ENABLED, captionEnabledEventHandler);\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.CAPTION_ENABLED, captionEnabledEventHandler);\n\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 {isMobile && isPaused && (\n <Box\n css={{\n position: 'absolute',\n top: '40%',\n left: '50%',\n transform: 'translateY(-40%) translateX(-50%)',\n padding: '$8 14px $8 18px',\n display: 'inline-flex',\n r: '50%',\n gap: '$1',\n bg: '$primary_default',\n zIndex: 21,\n }}\n >\n <IconButton onClick={async () => await hlsPlayer?.play()} data-testid=\"play_btn\">\n <PlayIcon width=\"60px\" height=\"60px\" />\n </IconButton>\n </Box>\n )}\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 <Flex direction=\"column\">\n <Box>\n {hlsPlayer && (\n <HMSVideoPlayer.Progress\n hlsPlayer={hlsPlayer}\n onValueChange={time => {\n hlsPlayer.seekTo(time);\n }}\n />\n )}\n </Box>\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 {hasCaptions && (\n <HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />\n )}\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 </Flex>\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} /> : <GoLiveIcon 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 { CrossIcon } 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 <CrossIcon />\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 { 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 { 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\n data-testid=\"hms-video\"\n css={{\n size: '100%',\n position: 'relative',\n '& video::cue': {\n color: 'white',\n // textShadow: '0px 0px 4px #000',\n whiteSpace: 'pre-line',\n fontSize: '$lg',\n fontStyle: 'normal',\n fontWeight: '$semiBold',\n lineHeight: '$sm',\n letterSpacing: '0.5px',\n },\n '& video::-webkit-media-text-track-display': {\n padding: '0 $4',\n },\n '& video::-webkit-media-text-track-container': {\n fontSize: '$space$10 !important',\n },\n }}\n direction=\"column\"\n {...props}\n >\n <video\n style={{\n flex: '1 1 0',\n margin: '0 auto',\n minHeight: '0',\n }}\n ref={videoRef}\n playsInline\n />\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 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 { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';\nimport { IconButton, Tooltip } from '../../../';\n\nexport function HLSCaptionSelector({ isEnabled, onClick }: { isEnabled: boolean; onClick: () => void }) {\n return (\n <Tooltip title=\"Subtitles/closed captions\" side=\"top\">\n <IconButton css={{ p: '$2' }} onClick={() => onClick()}>\n {isEnabled ? <ClosedCaptionIcon width=\"20\" height=\"20px\" /> : <OpenCaptionIcon width=\"20\" height=\"20px\" />}\n </IconButton>\n </Tooltip>\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"],
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useFullscreen, useMedia, usePrevious, useToggle } from 'react-use';\nimport { HLSPlaybackState, HMSHLSPlayer, HMSHLSPlayerEvents } from '@100mslive/hls-player';\nimport screenfull from 'screenfull';\nimport {\n HMSNotificationTypes,\n selectAppData,\n selectHLSState,\n selectPeerNameByID,\n selectPollByID,\n useHMSActions,\n useHMSNotifications,\n useHMSStore,\n useHMSVanillaStore,\n} from '@100mslive/react-sdk';\nimport { ColoredHandIcon, ExpandIcon, GoLiveIcon, PlayIcon, 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 { HLSCaptionSelector } from '../components/HMSVideo/HLSCaptionSelector';\nimport { HLSQualitySelector } from '../components/HMSVideo/HLSQualitySelector';\nimport { ToastManager } from '../components/Toast/ToastManager';\nimport { Button } from '../../Button';\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 { usePollViewToggle } from '../components/AppData/useSidepane';\nimport { APP_DATA, EMOJI_REACTION_TYPE } from '../common/constants';\n\nlet hlsPlayer;\nconst toastMap = {};\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 notification = useHMSNotifications(HMSNotificationTypes.POLL_STOPPED);\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 [isCaptionEnabled, setIsCaptionEnabled] = useState(true);\n const [hasCaptions, setHasCaptions] = useState(false);\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 const lastHlsUrl = usePrevious(hlsUrl);\n const togglePollView = usePollViewToggle();\n const vanillaStore = useHMSVanillaStore();\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 // 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 useEffect(() => {\n if (streamEnded && lastHlsUrl !== hlsUrl) {\n setStreamEnded(false);\n }\n }, [hlsUrl, streamEnded, lastHlsUrl]);\n\n useEffect(() => {\n if (!notification) return;\n const toastID = toastMap?.[notification.data.id];\n if (toastID) {\n ToastManager.removeToast(toastMap[notification.data.id]);\n delete toastMap[notification.data.id];\n }\n }, [notification]);\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 setHasCaptions(hlsPlayer?.hasCaptions());\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 const duration = rest.duration;\n const parsedPayload = parsePayload(payload);\n // check if poll happened\n if (parsedPayload.startsWith('poll:')) {\n const pollId = parsedPayload.substr(parsedPayload.indexOf(':') + 1);\n const poll = vanillaStore.getState(selectPollByID(pollId));\n const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || 'Participant';\n // launch poll\n const toastID = ToastManager.addToast({\n title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,\n action: (\n <Button\n onClick={() => togglePollView(pollId)}\n variant=\"standard\"\n css={{\n backgroundColor: '$surface_bright',\n fontWeight: '$semiBold',\n color: '$on_surface_high',\n p: '$xs $md',\n }}\n >\n {poll.type === 'quiz' ? 'Answer' : 'Vote'}\n </Button>\n ),\n duration: Infinity,\n });\n toastMap[pollId] = toastID;\n return;\n }\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 const captionEnabledEventHandler = isCaptionEnabled => {\n setIsCaptionEnabled(isCaptionEnabled);\n };\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.CAPTION_ENABLED, captionEnabledEventHandler);\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.CAPTION_ENABLED, captionEnabledEventHandler);\n\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 {isMobile && isPaused && (\n <Box\n css={{\n position: 'absolute',\n top: '40%',\n left: '50%',\n transform: 'translateY(-40%) translateX(-50%)',\n padding: '$8 14px $8 18px',\n display: 'inline-flex',\n r: '50%',\n gap: '$1',\n bg: '$primary_default',\n zIndex: 21,\n }}\n >\n <IconButton onClick={async () => await hlsPlayer?.play()} data-testid=\"play_btn\">\n <PlayIcon width=\"60px\" height=\"60px\" />\n </IconButton>\n </Box>\n )}\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 <Flex direction=\"column\">\n <Box>\n {hlsPlayer && (\n <HMSVideoPlayer.Progress\n hlsPlayer={hlsPlayer}\n onValueChange={time => {\n hlsPlayer.seekTo(time);\n }}\n />\n )}\n </Box>\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 {hasCaptions && (\n <HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />\n )}\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 </Flex>\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} /> : <GoLiveIcon 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 { CrossIcon } 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 <CrossIcon />\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 { 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 { 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\n data-testid=\"hms-video\"\n css={{\n size: '100%',\n position: 'relative',\n '& video::cue': {\n color: 'white',\n // textShadow: '0px 0px 4px #000',\n whiteSpace: 'pre-line',\n fontSize: '$lg',\n fontStyle: 'normal',\n fontWeight: '$semiBold',\n lineHeight: '$sm',\n letterSpacing: '0.5px',\n },\n '& video::-webkit-media-text-track-display': {\n padding: '0 $4',\n },\n '& video::-webkit-media-text-track-container': {\n fontSize: '$space$10 !important',\n },\n }}\n direction=\"column\"\n {...props}\n >\n <video\n style={{\n flex: '1 1 0',\n margin: '0 auto',\n minHeight: '0',\n }}\n ref={videoRef}\n playsInline\n />\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: '$2', 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 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 { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';\nimport { IconButton, Tooltip } from '../../../';\n\nexport function HLSCaptionSelector({ isEnabled, onClick }: { isEnabled: boolean; onClick: () => void }) {\n return (\n <Tooltip title=\"Subtitles/closed captions\" side=\"top\">\n <IconButton css={{ p: '$2' }} onClick={() => onClick()}>\n {isEnabled ? <ClosedCaptionIcon width=\"20\" height=\"20px\" /> : <OpenCaptionIcon width=\"20\" height=\"20px\" />}\n </IconButton>\n </Tooltip>\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"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["React", "useEffect", "useRef", "useState", "HMSHLSPlayerEvents", "PlayIcon", "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", "React", "React", "useRef", "useState", "useEffect", "showLoader", "_a", "React", "isCaptionEnabled", "HMSHLSPlayerEvents", "PlayIcon"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { VariableSizeList } from 'react-window';
|
|
3
|
-
export declare const AnnotisedMessage: ({ message }: {
|
|
3
|
+
export declare const AnnotisedMessage: ({ message, length }: {
|
|
4
4
|
message: string;
|
|
5
|
+
length?: number | undefined;
|
|
5
6
|
}) => React.JSX.Element;
|
|
6
7
|
export declare const ChatBody: React.ForwardRefExoticComponent<{
|
|
7
8
|
scrollToBottom: (count: number) => void;
|