@100mslive/roomkit-react 0.3.3-alpha.0 → 0.3.3-alpha.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. package/dist/Accordion/Accordion.d.ts +1 -0
  2. package/dist/Accordion/index.d.ts +1 -0
  3. package/dist/{HLSView-NVF25XHT.js → HLSView-SYFDABFO.js} +331 -166
  4. package/dist/HLSView-SYFDABFO.js.map +7 -0
  5. package/dist/IconButton/IconButton.d.ts +1 -1
  6. package/dist/Modal/Dialog.d.ts +1 -1
  7. package/dist/Prebuilt/IconButton.d.ts +2 -3
  8. package/dist/Prebuilt/components/Footer/ChatToggle.d.ts +3 -1
  9. package/dist/Prebuilt/components/HMSVideo/PlayPauseButton.d.ts +2 -2
  10. package/dist/Prebuilt/components/HMSVideo/PlayPauseSeekControls.d.ts +14 -0
  11. package/dist/Prebuilt/components/HMSVideo/{SeekControls.d.ts → SeekControl.d.ts} +2 -2
  12. package/dist/Prebuilt/components/HMSVideo/index.d.ts +15 -11
  13. package/dist/Prebuilt/components/Leave/LeaveAtoms.d.ts +2 -2
  14. package/dist/Prebuilt/components/VideoLayouts/WhiteboardLayout.d.ts +3 -0
  15. package/dist/Sheet/Sheet.d.ts +1 -1
  16. package/dist/{chunk-2V7F62FX.js → chunk-HIJ2DH6Q.js} +423 -404
  17. package/dist/chunk-HIJ2DH6Q.js.map +7 -0
  18. package/dist/index.cjs.js +1130 -931
  19. package/dist/index.cjs.js.map +4 -4
  20. package/dist/index.js +1 -1
  21. package/dist/meta.cjs.json +208 -124
  22. package/dist/meta.esbuild.json +222 -137
  23. package/package.json +7 -7
  24. package/src/Accordion/Accordion.tsx +4 -4
  25. package/src/IconButton/IconButton.tsx +2 -7
  26. package/src/Prebuilt/IconButton.tsx +6 -10
  27. package/src/Prebuilt/components/Chat/ChatBody.tsx +10 -0
  28. package/src/Prebuilt/components/Footer/ChatToggle.tsx +2 -2
  29. package/src/Prebuilt/components/Footer/ParticipantList.tsx +4 -1
  30. package/src/Prebuilt/components/Footer/RoleAccordion.tsx +6 -6
  31. package/src/Prebuilt/components/Footer/WhiteboardToggle.tsx +17 -3
  32. package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx +1 -0
  33. package/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx +2 -2
  34. package/src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx +158 -0
  35. package/src/Prebuilt/components/HMSVideo/{SeekControls.tsx → SeekControl.tsx} +2 -2
  36. package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx +7 -3
  37. package/src/Prebuilt/components/HMSVideo/index.ts +5 -4
  38. package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx +9 -9
  39. package/src/Prebuilt/components/VideoLayouts/GridLayout.tsx +27 -4
  40. package/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx +95 -0
  41. package/src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx +13 -5
  42. package/src/Prebuilt/layouts/HLSView.jsx +115 -78
  43. package/src/Prebuilt/layouts/VideoStreamingSection.tsx +1 -17
  44. package/dist/HLSView-NVF25XHT.js.map +0 -7
  45. package/dist/Prebuilt/layouts/WhiteboardView.d.ts +0 -2
  46. package/dist/chunk-2V7F62FX.js.map +0 -7
  47. package/src/Prebuilt/layouts/WhiteboardView.tsx +0 -69
@@ -1,69 +0,0 @@
1
- import React, { useEffect, useMemo } from 'react';
2
- import { useMedia } from 'react-use';
3
- import { selectPeers, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
4
- import { SecondaryTiles } from '../components/SecondaryTiles';
5
- import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
6
- import { config as cssConfig } from '../../';
7
- import { Box } from '../../Layout';
8
- // @ts-ignore: No implicit Any
9
- import { useSetAppDataByKey } from '../components/AppData/useUISettings';
10
- import { APP_DATA } from '../common/constants';
11
-
12
- const EmbedComponent = () => {
13
- const isMobile = useMedia(cssConfig.media.md);
14
- const { iframeRef } = useWhiteboard(isMobile);
15
-
16
- return (
17
- <Box
18
- css={{
19
- mx: '$8',
20
- flex: '3 1 0',
21
- '@lg': {
22
- flex: '2 1 0',
23
- display: 'flex',
24
- alignItems: 'center',
25
- },
26
- }}
27
- >
28
- <iframe
29
- title="Whiteboard View"
30
- ref={iframeRef}
31
- style={{
32
- width: '100%',
33
- height: '100%',
34
- border: 0,
35
- borderRadius: '0.75rem',
36
- }}
37
- allow="autoplay; clipboard-write;"
38
- referrerPolicy="no-referrer"
39
- />
40
- </Box>
41
- );
42
- };
43
-
44
- export const WhiteboardView = () => {
45
- const peers = useHMSStore(selectPeers);
46
- const whiteboard = useHMSStore(selectWhiteboard);
47
- const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
48
-
49
- const smallTilePeers = useMemo(() => {
50
- const smallTilePeers = peers.filter(peer => peer.id !== whiteboard?.owner);
51
- return smallTilePeers;
52
- }, [peers, whiteboard?.owner]);
53
-
54
- useEffect(() => {
55
- setActiveScreenSharePeer(whiteboard?.owner || '');
56
- return () => {
57
- setActiveScreenSharePeer('');
58
- };
59
- }, [whiteboard?.owner, setActiveScreenSharePeer]);
60
-
61
- return (
62
- <ProminenceLayout.Root>
63
- <ProminenceLayout.ProminentSection>
64
- <EmbedComponent />
65
- </ProminenceLayout.ProminentSection>
66
- <SecondaryTiles peers={smallTilePeers} />
67
- </ProminenceLayout.Root>
68
- );
69
- };