@100mslive/roomkit-react 0.2.5 → 0.2.6-alpha.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{HLSView-DGYWEXWO.js → HLSView-3P77BW5S.js} +13 -5
- package/dist/{HLSView-DGYWEXWO.js.map → HLSView-3P77BW5S.js.map} +2 -2
- package/dist/Prebuilt/IconButton.d.ts +883 -0
- package/dist/Prebuilt/components/VirtualBackground/VBToggle.d.ts +2 -0
- package/dist/{chunk-GBUA63QN.js → chunk-54M5AZBC.js} +35 -30
- package/dist/chunk-54M5AZBC.js.map +7 -0
- package/dist/index.cjs.js +41 -30
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +38 -38
- package/dist/meta.esbuild.json +48 -48
- package/package.json +6 -6
- package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +14 -9
- package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx +15 -25
- package/src/Prebuilt/components/Preview/PreviewJoin.tsx +1 -1
- package/src/Prebuilt/components/VirtualBackground/{VBToggle.jsx → VBToggle.tsx} +1 -0
- package/src/Prebuilt/layouts/HLSView.jsx +85 -71
- package/dist/chunk-GBUA63QN.js.map +0 -7
- /package/src/Prebuilt/{IconButton.jsx → IconButton.tsx} +0 -0
|
@@ -308,7 +308,8 @@ const HLSView = () => {
|
|
|
308
308
|
align="center"
|
|
309
309
|
justify="center"
|
|
310
310
|
css={{
|
|
311
|
-
width:
|
|
311
|
+
width:
|
|
312
|
+
videoRef.current && videoRef.current.clientWidth <= 720 ? `${videoRef.current.clientWidth}px` : '100%',
|
|
312
313
|
margin: '0 auto',
|
|
313
314
|
height: '100%',
|
|
314
315
|
}}
|
|
@@ -351,6 +352,7 @@ const HLSView = () => {
|
|
|
351
352
|
</IconButton>
|
|
352
353
|
</Box>
|
|
353
354
|
)}
|
|
355
|
+
|
|
354
356
|
<Flex
|
|
355
357
|
ref={controlsRef}
|
|
356
358
|
direction="column"
|
|
@@ -370,78 +372,90 @@ const HLSView = () => {
|
|
|
370
372
|
}}
|
|
371
373
|
>
|
|
372
374
|
{!isMobile && (
|
|
373
|
-
<
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
|
|
382
|
-
}}
|
|
383
|
-
isPaused={isPaused}
|
|
384
|
-
/>
|
|
385
|
-
<HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />
|
|
386
|
-
<HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />
|
|
387
|
-
<IconButton
|
|
388
|
-
variant="standard"
|
|
389
|
-
css={{ px: '$2' }}
|
|
390
|
-
onClick={async () => {
|
|
391
|
-
await hlsPlayer.seekToLivePosition();
|
|
392
|
-
setIsVideoLive(true);
|
|
393
|
-
}}
|
|
394
|
-
key="jump-to-live_btn"
|
|
395
|
-
data-testid="jump-to-live_btn"
|
|
396
|
-
>
|
|
397
|
-
<Tooltip title="Go to Live" side="top">
|
|
398
|
-
<Flex justify="center" gap={2} align="center">
|
|
399
|
-
<Box
|
|
400
|
-
css={{
|
|
401
|
-
height: '$4',
|
|
402
|
-
width: '$4',
|
|
403
|
-
background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
|
|
404
|
-
r: '$1',
|
|
405
|
-
}}
|
|
406
|
-
/>
|
|
407
|
-
<Text
|
|
408
|
-
variant={{
|
|
409
|
-
'@sm': 'xs',
|
|
410
|
-
}}
|
|
411
|
-
css={{
|
|
412
|
-
c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
|
|
413
|
-
}}
|
|
414
|
-
>
|
|
415
|
-
{isVideoLive ? 'LIVE' : 'GO LIVE'}
|
|
416
|
-
</Text>
|
|
417
|
-
</Flex>
|
|
418
|
-
</Tooltip>
|
|
419
|
-
</IconButton>
|
|
420
|
-
</HMSVideoPlayer.Controls.Left>
|
|
421
|
-
|
|
422
|
-
<HMSVideoPlayer.Controls.Right>
|
|
423
|
-
{hasCaptions && (
|
|
424
|
-
<HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />
|
|
425
|
-
)}
|
|
426
|
-
{availableLayers.length > 0 ? (
|
|
427
|
-
<HLSQualitySelector
|
|
428
|
-
layers={availableLayers}
|
|
429
|
-
onOpen={setQualityDropDownOpen}
|
|
430
|
-
open={qualityDropDownOpen}
|
|
431
|
-
selection={currentSelectedQuality}
|
|
432
|
-
onQualityChange={handleQuality}
|
|
433
|
-
isAuto={isUserSelectedAuto}
|
|
375
|
+
<Flex direction="column">
|
|
376
|
+
<Box>
|
|
377
|
+
{hlsPlayer && (
|
|
378
|
+
<HMSVideoPlayer.Progress
|
|
379
|
+
hlsPlayer={hlsPlayer}
|
|
380
|
+
onValueChange={time => {
|
|
381
|
+
hlsPlayer.seekTo(time);
|
|
382
|
+
}}
|
|
434
383
|
/>
|
|
435
|
-
)
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
384
|
+
)}
|
|
385
|
+
</Box>
|
|
386
|
+
<HMSVideoPlayer.Controls.Root
|
|
387
|
+
css={{
|
|
388
|
+
p: '$4 $8',
|
|
389
|
+
}}
|
|
390
|
+
>
|
|
391
|
+
<HMSVideoPlayer.Controls.Left>
|
|
392
|
+
<HMSVideoPlayer.PlayButton
|
|
393
|
+
onClick={async () => {
|
|
394
|
+
isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
|
|
395
|
+
}}
|
|
396
|
+
isPaused={isPaused}
|
|
441
397
|
/>
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
398
|
+
<HMSVideoPlayer.Duration hlsPlayer={hlsPlayer} />
|
|
399
|
+
<HMSVideoPlayer.Volume hlsPlayer={hlsPlayer} />
|
|
400
|
+
<IconButton
|
|
401
|
+
variant="standard"
|
|
402
|
+
css={{ px: '$2' }}
|
|
403
|
+
onClick={async () => {
|
|
404
|
+
await hlsPlayer.seekToLivePosition();
|
|
405
|
+
setIsVideoLive(true);
|
|
406
|
+
}}
|
|
407
|
+
key="jump-to-live_btn"
|
|
408
|
+
data-testid="jump-to-live_btn"
|
|
409
|
+
>
|
|
410
|
+
<Tooltip title="Go to Live" side="top">
|
|
411
|
+
<Flex justify="center" gap={2} align="center">
|
|
412
|
+
<Box
|
|
413
|
+
css={{
|
|
414
|
+
height: '$4',
|
|
415
|
+
width: '$4',
|
|
416
|
+
background: isVideoLive ? '$alert_error_default' : '$on_primary_medium',
|
|
417
|
+
r: '$1',
|
|
418
|
+
}}
|
|
419
|
+
/>
|
|
420
|
+
<Text
|
|
421
|
+
variant={{
|
|
422
|
+
'@sm': 'xs',
|
|
423
|
+
}}
|
|
424
|
+
css={{
|
|
425
|
+
c: isVideoLive ? '$on_surface_high' : '$on_surface_medium',
|
|
426
|
+
}}
|
|
427
|
+
>
|
|
428
|
+
{isVideoLive ? 'LIVE' : 'GO LIVE'}
|
|
429
|
+
</Text>
|
|
430
|
+
</Flex>
|
|
431
|
+
</Tooltip>
|
|
432
|
+
</IconButton>
|
|
433
|
+
</HMSVideoPlayer.Controls.Left>
|
|
434
|
+
|
|
435
|
+
<HMSVideoPlayer.Controls.Right>
|
|
436
|
+
{hasCaptions && (
|
|
437
|
+
<HLSCaptionSelector onClick={() => hlsPlayer?.toggleCaption()} isEnabled={isCaptionEnabled} />
|
|
438
|
+
)}
|
|
439
|
+
{availableLayers.length > 0 ? (
|
|
440
|
+
<HLSQualitySelector
|
|
441
|
+
layers={availableLayers}
|
|
442
|
+
onOpen={setQualityDropDownOpen}
|
|
443
|
+
open={qualityDropDownOpen}
|
|
444
|
+
selection={currentSelectedQuality}
|
|
445
|
+
onQualityChange={handleQuality}
|
|
446
|
+
isAuto={isUserSelectedAuto}
|
|
447
|
+
/>
|
|
448
|
+
) : null}
|
|
449
|
+
{isFullScreenSupported ? (
|
|
450
|
+
<FullScreenButton
|
|
451
|
+
isFullScreen={isFullScreen}
|
|
452
|
+
onToggle={toggle}
|
|
453
|
+
icon={isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}
|
|
454
|
+
/>
|
|
455
|
+
) : null}
|
|
456
|
+
</HMSVideoPlayer.Controls.Right>
|
|
457
|
+
</HMSVideoPlayer.Controls.Root>
|
|
458
|
+
</Flex>
|
|
445
459
|
)}
|
|
446
460
|
</Flex>
|
|
447
461
|
</HMSVideoPlayer.Root>
|