├── .husky ├── .gitignore ├── pre-commit └── commit-msg ├── .gitattributes ├── packages ├── hms-video-store │ ├── src │ │ ├── test │ │ │ ├── integration │ │ │ │ └── .gitkeep │ │ │ ├── fakeStore │ │ │ │ └── index.ts │ │ │ └── setup.ts │ │ ├── sdk │ │ │ ├── store │ │ │ │ ├── index.ts │ │ │ │ └── StoreInterfaces.ts │ │ │ └── models │ │ │ │ └── peer │ │ │ │ ├── index.ts │ │ │ │ └── HMSRemotePeer.ts │ │ ├── plugins │ │ │ ├── index.ts │ │ │ ├── audio │ │ │ │ └── index.ts │ │ │ └── video │ │ │ │ ├── index.ts │ │ │ │ └── HMSMediaStreamPlugin.ts │ │ ├── device-manager │ │ │ └── index.ts │ │ ├── playlist-manager │ │ │ └── index.ts │ │ ├── audio-sink-manager │ │ │ └── index.ts │ │ ├── end-call-feedback │ │ │ └── index.ts │ │ ├── diagnostics │ │ │ └── index.ts │ │ ├── interfaces │ │ │ ├── internal.ts │ │ │ ├── types.ts │ │ │ ├── transcription-config.ts │ │ │ ├── error-listener.ts │ │ │ ├── peer-list-iterator.ts │ │ │ ├── get-token.ts │ │ │ ├── leave-room-request.ts │ │ │ ├── speaker.ts │ │ │ ├── peer │ │ │ │ ├── index.ts │ │ │ │ ├── hms-remote-peer.ts │ │ │ │ ├── hms-local-peer.ts │ │ │ │ └── connection-quality.ts │ │ │ ├── rtmp-recording-config.ts │ │ │ ├── role-change-request.ts │ │ │ ├── message.ts │ │ │ ├── session-store │ │ │ │ └── index.ts │ │ │ ├── framework-info.ts │ │ │ └── change-track-state.ts │ │ ├── media │ │ │ ├── tracks │ │ │ │ ├── HMSTrackType.ts │ │ │ │ ├── HMSTrackExceptionTrackType.ts │ │ │ │ ├── HMSRemoteAudioTrack.ts │ │ │ │ └── index.ts │ │ │ ├── settings │ │ │ │ └── index.ts │ │ │ └── streams │ │ │ │ ├── index.ts │ │ │ │ └── HMSMediaStream.ts │ │ ├── session-store │ │ │ └── interactivity-center │ │ │ │ └── index.ts │ │ ├── webrtc-stats │ │ │ ├── index.ts │ │ │ └── internal.ts │ │ ├── signal │ │ │ ├── ISignalSendParamsProvider.ts │ │ │ ├── interfaces │ │ │ │ ├── track.ts │ │ │ │ └── index.ts │ │ │ └── ISignalEventsObserver.ts │ │ ├── notification-manager │ │ │ ├── index.ts │ │ │ └── managers │ │ │ │ └── utils.ts │ │ ├── rtc-stats │ │ │ └── index.ts │ │ ├── analytics │ │ │ ├── AnalyticsEventDomains.ts │ │ │ ├── stats │ │ │ │ └── index.ts │ │ │ ├── IAnalyticsPropertiesProvider.ts │ │ │ ├── AnalyticsEventLevel.ts │ │ │ ├── IAnalyticsTransportProvider.ts │ │ │ └── signal-transport │ │ │ │ └── SignalAnalyticsTransport.ts │ │ ├── utils │ │ │ ├── id-factory.ts │ │ │ ├── date.ts │ │ │ ├── json.ts │ │ │ ├── math.ts │ │ │ ├── analytics-deviceId.ts │ │ │ ├── track.futuretest.ts │ │ │ ├── whiteboard.ts │ │ │ ├── ice-server-config.ts │ │ │ ├── network-info.ts │ │ │ ├── promise.ts │ │ │ └── queue.ts │ │ ├── common │ │ │ └── storeName.ts │ │ ├── selectors │ │ │ └── index.ts │ │ ├── reactive-store │ │ │ ├── common │ │ │ │ └── presence.ts │ │ │ ├── sdkUtils │ │ │ │ └── sdkUtils.ts │ │ │ └── internalTypes.ts │ │ ├── schema │ │ │ ├── role.ts │ │ │ ├── settings.ts │ │ │ ├── index.ts │ │ │ ├── session-store.ts │ │ │ ├── error.ts │ │ │ └── device-change.ts │ │ ├── feature-flags.d.ts │ │ ├── transport │ │ │ └── models │ │ │ │ ├── TransportState.ts │ │ │ │ ├── JoinParameters.ts │ │ │ │ └── TransportFailureCategory.ts │ │ ├── connection │ │ │ ├── model.ts │ │ │ ├── publish │ │ │ │ └── IPublishConnectionObserver.ts │ │ │ └── IConnectionObserver.ts │ │ └── error │ │ │ └── HMSAction.ts │ ├── images │ │ ├── store-graph.png │ │ ├── store-state.png │ │ └── architecture.png │ ├── internal-docs │ │ ├── Store-Comparator.md │ │ ├── API-Reference-Generation.md │ │ └── tech-debt.md │ ├── tsconfig.json │ ├── typedoc.json │ └── jest.config.js ├── roomkit-react │ ├── src │ │ ├── Input │ │ │ ├── index.tsx │ │ │ └── Input.stories.tsx │ │ ├── Label │ │ │ ├── index.ts │ │ │ └── Label.tsx │ │ ├── Prebuilt │ │ │ ├── index.ts │ │ │ ├── components │ │ │ │ ├── Header │ │ │ │ │ └── index.tsx │ │ │ │ ├── Notifications │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── DeviceChangeNotifications.tsx │ │ │ │ ├── hooks │ │ │ │ │ ├── useDropdownSelection.jsx │ │ │ │ │ ├── useAudioOutputTest.tsx │ │ │ │ │ └── useCloseScreenshareWhiteboard.tsx │ │ │ │ ├── Polls │ │ │ │ │ ├── common │ │ │ │ │ │ ├── constants.ts │ │ │ │ │ │ ├── Line.tsx │ │ │ │ │ │ ├── VoteCount.tsx │ │ │ │ │ │ └── utils.ts │ │ │ │ │ └── Voting │ │ │ │ │ │ └── StatisticBox.tsx │ │ │ │ ├── PIP │ │ │ │ │ ├── index.jsx │ │ │ │ │ ├── context.ts │ │ │ │ │ ├── usePIPWindow.tsx │ │ │ │ │ ├── PIPWindow.tsx │ │ │ │ │ └── PIPChatOption.tsx │ │ │ │ ├── TileMenu │ │ │ │ │ └── utils.ts │ │ │ │ ├── Settings │ │ │ │ │ └── common.ts │ │ │ │ ├── VideoLayouts │ │ │ │ │ └── interface.ts │ │ │ │ ├── Chat │ │ │ │ │ ├── utils.ts │ │ │ │ │ ├── useUnreadCount.ts │ │ │ │ │ ├── MwebChatOption.tsx │ │ │ │ │ └── StickIndicator.tsx │ │ │ │ ├── HMSVideo │ │ │ │ │ ├── PlayerContext.tsx │ │ │ │ │ ├── Controls.jsx │ │ │ │ │ ├── SeekControl.tsx │ │ │ │ │ ├── FullscreenButton.tsx │ │ │ │ │ └── HLSCaptionSelector.tsx │ │ │ │ ├── Toast │ │ │ │ │ └── Toast.jsx │ │ │ │ ├── MoreSettings │ │ │ │ │ ├── constants.ts │ │ │ │ │ └── FullScreenItem.tsx │ │ │ │ ├── ShareMenuIcon.jsx │ │ │ │ ├── Leave │ │ │ │ │ └── LeaveAtoms.tsx │ │ │ │ ├── AppData │ │ │ │ │ └── useChatState.js │ │ │ │ └── FullPageProgress.tsx │ │ │ ├── plugins │ │ │ │ ├── transcription │ │ │ │ │ └── index.jsx │ │ │ │ └── RemoteStopScreenshare.jsx │ │ │ ├── images │ │ │ │ ├── rtmp.png │ │ │ │ ├── ios-perm-0.png │ │ │ │ ├── pdf-share.png │ │ │ │ ├── screen-share.png │ │ │ │ └── android-perm-1.png │ │ │ ├── provider │ │ │ │ └── roomLayoutProvider │ │ │ │ │ └── hooks │ │ │ │ │ └── useInsetEnabled.ts │ │ │ ├── layouts │ │ │ │ └── Sheet.tsx │ │ │ └── IconButton.tsx │ │ ├── QRCode │ │ │ ├── index.tsx │ │ │ ├── QRCode.mdx │ │ │ └── QRCode.tsx │ │ ├── Tabs │ │ │ └── index.tsx │ │ ├── Toast │ │ │ ├── index.tsx │ │ │ └── Toast.mdx │ │ ├── Checkbox │ │ │ └── index.tsx │ │ ├── Dropdown │ │ │ └── index.tsx │ │ ├── Fieldset │ │ │ ├── index.tsx │ │ │ └── Fieldset.tsx │ │ ├── Sheet │ │ │ ├── index.ts │ │ │ └── Sheet.mdx │ │ ├── Text │ │ │ ├── index.tsx │ │ │ └── Text.stories.tsx │ │ ├── Button │ │ │ └── index.tsx │ │ ├── Collapsible │ │ │ └── index.tsx │ │ ├── Footer │ │ │ └── index.tsx │ │ ├── Modal │ │ │ ├── index.ts │ │ │ └── Dialog.mdx │ │ ├── RadioGroup │ │ │ └── index.tsx │ │ ├── Select │ │ │ └── index.ts │ │ ├── Slider │ │ │ ├── index.ts │ │ │ └── Slider.stories.tsx │ │ ├── Switch │ │ │ ├── index.ts │ │ │ └── Switch.mdx │ │ ├── Loading │ │ │ ├── index.ts │ │ │ └── Loading.mdx │ │ ├── TextArea │ │ │ └── index.tsx │ │ ├── Tooltip │ │ │ └── index.ts │ │ ├── ReactSelect │ │ │ └── index.ts │ │ ├── Video │ │ │ ├── index.tsx │ │ │ └── UseVideo.stories.tsx │ │ ├── Avatar │ │ │ └── index.ts │ │ ├── Diagnostics │ │ │ └── index.ts │ │ ├── IconButton │ │ │ └── index.tsx │ │ ├── TileMenu │ │ │ └── index.tsx │ │ ├── VideoTile │ │ │ └── index.tsx │ │ ├── Pagination │ │ │ └── index.tsx │ │ ├── utils │ │ │ ├── index.ts │ │ │ └── styles.ts │ │ ├── Divider │ │ │ └── index.ts │ │ ├── Layout │ │ │ ├── index.tsx │ │ │ └── Box.tsx │ │ ├── Theme │ │ │ ├── index.tsx │ │ │ ├── Theme.stories.mdx │ │ │ └── useSSR.tsx │ │ ├── Link │ │ │ ├── index.tsx │ │ │ └── Link.stories.tsx │ │ ├── Stats │ │ │ ├── index.tsx │ │ │ └── formatBytes.ts │ │ ├── VideoList │ │ │ ├── index.tsx │ │ │ └── videoListUtils.tsx │ │ ├── AudioLevel │ │ │ ├── index.ts │ │ │ └── audio-level.png │ │ ├── Popover │ │ │ └── Popover.mdx │ │ ├── Accordion │ │ │ └── index.ts │ │ ├── Icons │ │ │ ├── Icons.stories.mdx │ │ │ └── IconsList.jsx │ │ ├── fixtures │ │ │ └── tracks.ts │ │ ├── hooks │ │ │ └── useDialogContainerSelector.tsx │ │ ├── Introduction │ │ │ └── Introduction.stories.mdx │ │ ├── context │ │ │ └── DialogContext.tsx │ │ └── Progress │ │ │ └── index.tsx │ ├── .storybook │ │ └── global.css │ ├── .example.env │ ├── .babelrc.json │ └── tsconfig.json ├── react-sdk │ ├── src │ │ ├── utils │ │ │ └── isBrowser.ts │ │ ├── primitives │ │ │ └── types.ts │ │ └── hooks │ │ │ ├── types.ts │ │ │ └── useAudioMode.tsx │ └── tsconfig.json ├── hms-virtual-background │ ├── src │ │ ├── constants.ts │ │ ├── tflite │ │ │ ├── tflite.wasm │ │ │ └── tflite-simd.wasm │ │ ├── models │ │ │ ├── selfie_segmentation_landscape.tflite │ │ │ └── selfiesegmentation_mlkit-256x256-2021_01_19-v1215.f16.tflite │ │ ├── index.ts │ │ └── interfaces.ts │ └── tsconfig.json ├── hms-whiteboard │ ├── src │ │ ├── index.ts │ │ ├── index.css │ │ └── utils.ts │ └── tsconfig.json ├── hls-stats │ ├── src │ │ ├── index.ts │ │ ├── interfaces │ │ │ └── IHlsStats.ts │ │ └── adapters │ │ │ └── BaseAdapter.ts │ └── tsconfig.json ├── react-icons │ ├── assets │ │ ├── DividerIcon.svg │ │ ├── PauseIcon.svg │ │ ├── MinusIcon.svg │ │ ├── CardIcon.svg │ │ ├── TranscriptIcon.svg │ │ ├── StatsIcon.svg │ │ ├── ChevronRightIcon.svg │ │ ├── FlutterIcon.svg │ │ ├── BoltIcon.svg │ │ ├── FilterIcon.svg │ │ ├── MoneyIcon.svg │ │ ├── QuizIcon.svg │ │ ├── FacebookIcon.svg │ │ ├── TabletIcon.svg │ │ ├── TwitterXIcon.svg │ │ ├── AddIcon.svg │ │ ├── HorizontalMenuIcon.svg │ │ ├── ChevronDownIcon.svg │ │ ├── ChevronUpIcon.svg │ │ ├── CheckIcon.svg │ │ ├── ChevronLeftIcon.svg │ │ ├── FigmaIcon.svg │ │ ├── Solid CheckCircleIcon.svg │ │ ├── VerticalMenuIcon.svg │ │ ├── LayoutIcon.svg │ │ ├── CrossIcon.svg │ │ ├── MouseIcon.svg │ │ ├── NetworkIcon.svg │ │ ├── NoEntryIcon.svg │ │ ├── FlutterWIthColourIcon.svg │ │ ├── AppleIcon.svg │ │ ├── ActivityIcon.svg │ │ ├── ReplyGroupIcon.svg │ │ ├── RejectIcon.svg │ │ ├── RecordIcon.svg │ │ ├── HamburgerMenuIcon.svg │ │ ├── ReplyIcon.svg │ │ ├── ClockIcon.svg │ │ ├── FilterOneIcon.svg │ │ ├── PlayIcon.svg │ │ ├── ArrowRightIcon.svg │ │ └── PeopleIcon.svg │ ├── tsconfig.json │ └── src │ │ ├── DividerIcon.tsx │ │ ├── PauseIcon.tsx │ │ ├── MinusIcon.tsx │ │ ├── PrevIcon.tsx │ │ ├── StatsIcon.tsx │ │ ├── NextIcon.tsx │ │ ├── BackwardIcon.tsx │ │ ├── ForwardSolidIcon.tsx │ │ ├── MoneyIcon.tsx │ │ ├── ChevronRightIcon.tsx │ │ ├── FilterIcon.tsx │ │ ├── PlaySolidIcon.tsx │ │ ├── ReplyGroupIcon.tsx │ │ ├── BoltIcon.tsx │ │ ├── PauseSolidIcon.tsx │ │ ├── HamburgerMenuIcon.tsx │ │ ├── NetworkIcon.tsx │ │ ├── NoEntryIcon.tsx │ │ ├── TabletIcon.tsx │ │ ├── CardIcon.tsx │ │ ├── PinIcon.tsx │ │ ├── SearchIcon.tsx │ │ ├── FlutterIcon.tsx │ │ ├── FigmaIcon.tsx │ │ ├── NightIcon.tsx │ │ ├── ChevronUpIcon.tsx │ │ ├── ClockIcon.tsx │ │ ├── QuizIcon.tsx │ │ ├── AddIcon.tsx │ │ ├── ChevronDownIcon.tsx │ │ ├── ChevronLeftIcon.tsx │ │ ├── CheckIcon.tsx │ │ ├── TranscriptIcon.tsx │ │ ├── UnpinIcon.tsx │ │ ├── FacebookIcon.tsx │ │ ├── MouseIcon.tsx │ │ ├── CalculatorIconsIcon.tsx │ │ ├── DoorIcon.tsx │ │ ├── HorizontalMenuIcon.tsx │ │ ├── ZoomOutIcon.tsx │ │ ├── BookmarkIcon.tsx │ │ ├── ForwardIcon.tsx │ │ ├── LayoutIcon.tsx │ │ ├── AnnouncementIcon.tsx │ │ ├── InformationIcon.tsx │ │ ├── PlayCircleIcon.tsx │ │ ├── SolidCheckCircleIcon.tsx │ │ ├── VerticalMenuIcon.tsx │ │ ├── ActivityIcon.tsx │ │ ├── PauseCircleIcon.tsx │ │ ├── CheckCircleIcon.tsx │ │ ├── CrossIcon.tsx │ │ ├── ReplyIcon.tsx │ │ ├── AddCircleIcon.tsx │ │ ├── InfoIcon.tsx │ │ ├── ZoomInIcon.tsx │ │ ├── MaximizeIcon.tsx │ │ ├── BranchIcon.tsx │ │ ├── TwitterXIcon.tsx │ │ ├── CropIcon.tsx │ │ ├── PersonIcon.tsx │ │ ├── RecordIcon.tsx │ │ ├── ZapIcon.tsx │ │ ├── ArrowRightIcon.tsx │ │ ├── FilterOneIcon.tsx │ │ ├── TargetIcon.tsx │ │ ├── AwardIcon.tsx │ │ ├── AppleIcon.tsx │ │ ├── PeopleRemoveIcon.tsx │ │ ├── PlayIcon.tsx │ │ ├── AddSolidIcon.tsx │ │ ├── JoinIcon.tsx │ │ ├── GridFourIcon.tsx │ │ ├── SaveIcon.tsx │ │ ├── UploadIcon.tsx │ │ ├── ArrowTopDownIcon.tsx │ │ ├── MinimizeIcon.tsx │ │ ├── SendIcon.tsx │ │ └── CrossCircleIcon.tsx ├── hls-player │ ├── src │ │ ├── interfaces │ │ │ └── IHMSHLSLayer.ts │ │ ├── utilies │ │ │ └── type.ts │ │ └── index.ts │ └── tsconfig.json └── roomkit-web │ └── src │ └── index.js ├── CODEOWNERS ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ └── feature_request.yml └── workflows │ └── sync-alpha-to-main.yml ├── prebuilt-banner.png ├── project-settings.png ├── .prettierrc ├── examples └── prebuilt-react-integration │ ├── public │ └── favicon.ico │ ├── vercel.json │ ├── src │ ├── main.jsx │ ├── utils.js │ ├── App.jsx │ └── main.css │ ├── README.md │ ├── .gitignore │ ├── index.html │ └── .eslintrc.cjs ├── tsconfig.json ├── scripts ├── update-versions.sh └── constants.js ├── nx.json ├── commitlint.config.js ├── .gitignore └── lerna.json /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | package.json linguist-generated=true 2 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/test/integration/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @raviteja83 @eswarclynn @amar-1995 @KaustubhKumar05 -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | @raviteja83 2 | @KaustubhKumar05 3 | @hdz-666 4 | @ygit -------------------------------------------------------------------------------- /packages/roomkit-react/src/Input/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Input'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Label/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Label'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/index.ts: -------------------------------------------------------------------------------- 1 | export * from './App'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/QRCode/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './QRCode'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Tabs/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Tabs'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Toast/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Toast'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Checkbox/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Checkbox'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Dropdown/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Dropdown'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Fieldset/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Fieldset'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Sheet/index.ts: -------------------------------------------------------------------------------- 1 | export { Sheet } from './Sheet'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Text/index.tsx: -------------------------------------------------------------------------------- 1 | export { Text } from './Text'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Button/index.tsx: -------------------------------------------------------------------------------- 1 | export { Button } from './Button'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Collapsible/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Collapsible'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | export { Footer } from './Footer'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Modal/index.ts: -------------------------------------------------------------------------------- 1 | export { Dialog } from './Dialog'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/RadioGroup/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './RadioGroup'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Select/index.ts: -------------------------------------------------------------------------------- 1 | export { Select } from './Select'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Slider/index.ts: -------------------------------------------------------------------------------- 1 | export { Slider } from './Slider'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Switch/index.ts: -------------------------------------------------------------------------------- 1 | export { Switch } from './Switch'; 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged -------------------------------------------------------------------------------- /packages/hms-video-store/src/sdk/store/index.ts: -------------------------------------------------------------------------------- 1 | export { Store } from './Store'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Loading/index.ts: -------------------------------------------------------------------------------- 1 | export { Loading } from './Loading'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/TextArea/index.tsx: -------------------------------------------------------------------------------- 1 | export { TextArea } from './TextArea'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export { Tooltip } from './Tooltip'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/.storybook/global.css: -------------------------------------------------------------------------------- 1 | #storybook-root { 2 | height: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/ReactSelect/index.ts: -------------------------------------------------------------------------------- 1 | export { Select } from './ReactSelect'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Video/index.tsx: -------------------------------------------------------------------------------- 1 | export { StyledVideo, Video } from './Video'; 2 | -------------------------------------------------------------------------------- /prebuilt-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/prebuilt-banner.png -------------------------------------------------------------------------------- /packages/roomkit-react/src/Avatar/index.ts: -------------------------------------------------------------------------------- 1 | export { Avatar, StyledAvatar } from './Avatar'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Diagnostics/index.ts: -------------------------------------------------------------------------------- 1 | export { Diagnostics } from './Diagnostics'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/IconButton/index.tsx: -------------------------------------------------------------------------------- 1 | export { IconButton } from './IconButton'; 2 | -------------------------------------------------------------------------------- /project-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/project-settings.png -------------------------------------------------------------------------------- /packages/hms-video-store/src/plugins/index.ts: -------------------------------------------------------------------------------- 1 | export * from './video'; 2 | export * from './audio'; 3 | -------------------------------------------------------------------------------- /packages/react-sdk/src/utils/isBrowser.ts: -------------------------------------------------------------------------------- 1 | export const isBrowser = typeof window !== 'undefined'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Header/index.tsx: -------------------------------------------------------------------------------- 1 | export { Header } from './Header'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/TileMenu/index.tsx: -------------------------------------------------------------------------------- 1 | export { StyledMenuTile } from './StyledMenuTile'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/VideoTile/index.tsx: -------------------------------------------------------------------------------- 1 | export { StyledVideoTile } from './StyledVideoTile'; 2 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/device-manager/index.ts: -------------------------------------------------------------------------------- 1 | export { DeviceManager } from './DeviceManager'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Pagination/index.tsx: -------------------------------------------------------------------------------- 1 | export { StyledPagination } from './StyledPagination'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './animations'; 2 | export * from './styles'; 3 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit "$1" 5 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/playlist-manager/index.ts: -------------------------------------------------------------------------------- 1 | export { PlaylistManager } from './PlaylistManager'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Divider/index.ts: -------------------------------------------------------------------------------- 1 | export { HorizontalDivider, VerticalDivider } from './Divider'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Layout/index.tsx: -------------------------------------------------------------------------------- 1 | export { Flex } from './Flex'; 2 | export { Box } from './Box'; 3 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/audio-sink-manager/index.ts: -------------------------------------------------------------------------------- 1 | export { AudioSinkManager } from './AudioSinkManager'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Theme/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './stitches.config'; 2 | export * from './ThemeProvider'; 3 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/end-call-feedback/index.ts: -------------------------------------------------------------------------------- 1 | export * from './interface'; 2 | export * from './feedback'; 3 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Link/index.tsx: -------------------------------------------------------------------------------- 1 | export { Link } from './Link'; 2 | export type { LinkProps } from './Link'; 3 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Notifications/index.tsx: -------------------------------------------------------------------------------- 1 | export { Notifications } from './Notifications'; 2 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Layout/Box.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../Theme'; 2 | 3 | export const Box = styled('div', {}); 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/test/fakeStore/index.ts: -------------------------------------------------------------------------------- 1 | export * from './fakeHMSStore'; 2 | export * from './fakeHMSStatsStore'; 3 | -------------------------------------------------------------------------------- /packages/hms-virtual-background/src/constants.ts: -------------------------------------------------------------------------------- 1 | export const EFFECTS_SDK_ASSETS = 'https://assets.100ms.live/effectsdk/3.5.9/'; 2 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/diagnostics/index.ts: -------------------------------------------------------------------------------- 1 | export { Diagnostics } from './HMSDiagnostics'; 2 | export * from './interfaces'; 3 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/internal.ts: -------------------------------------------------------------------------------- 1 | export interface ServerError { 2 | code: number; 3 | message?: string; 4 | } 5 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Stats/index.tsx: -------------------------------------------------------------------------------- 1 | export { VideoTileStats } from './Stats'; 2 | export { formatBytes } from './formatBytes'; 3 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/media/tracks/HMSTrackType.ts: -------------------------------------------------------------------------------- 1 | export enum HMSTrackType { 2 | AUDIO = 'audio', 3 | VIDEO = 'video', 4 | } 5 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/session-store/interactivity-center/index.ts: -------------------------------------------------------------------------------- 1 | export { InteractivityCenter } from './HMSInteractivityCenter'; 2 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/webrtc-stats/index.ts: -------------------------------------------------------------------------------- 1 | export { HMSStats } from './HMSStats'; 2 | export { selectHMSStats } from './selectors'; 3 | -------------------------------------------------------------------------------- /packages/hms-whiteboard/src/index.ts: -------------------------------------------------------------------------------- 1 | export type { WhiteboardProps } from './Whiteboard'; 2 | export { Whiteboard } from './Whiteboard'; 3 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/plugins/transcription/index.jsx: -------------------------------------------------------------------------------- 1 | export { TranscriptionButton as default } from './TranscriptionButton'; 2 | -------------------------------------------------------------------------------- /packages/hms-video-store/images/store-graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/hms-video-store/images/store-graph.png -------------------------------------------------------------------------------- /packages/hms-video-store/images/store-state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/hms-video-store/images/store-state.png -------------------------------------------------------------------------------- /packages/hms-video-store/src/signal/ISignalSendParamsProvider.ts: -------------------------------------------------------------------------------- 1 | export interface ISignalParamsProvider { 2 | toSignalParams(): T; 3 | } 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/images/architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/hms-video-store/images/architecture.png -------------------------------------------------------------------------------- /packages/roomkit-react/src/VideoList/index.tsx: -------------------------------------------------------------------------------- 1 | export { getLeft } from './videoListUtils'; 2 | export { StyledVideoList } from './StyledVideoList'; 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "trailingComma": "all", 4 | "singleQuote": true, 5 | "semi": true, 6 | "arrowParens": "avoid" 7 | } 8 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/AudioLevel/index.ts: -------------------------------------------------------------------------------- 1 | export { useBorderAudioLevel } from './useBorderAudioLevel'; 2 | export { AudioLevel } from './AudioLevel'; 3 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/images/rtmp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/roomkit-react/src/Prebuilt/images/rtmp.png -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/examples/prebuilt-react-integration/public/favicon.ico -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/types.ts: -------------------------------------------------------------------------------- 1 | export enum HMSMode { 2 | PUBLISH_AND_SUBSCRIBE, 3 | ONLY_PUBLISH, 4 | ONLY_SUBSCRIBE, 5 | AUTO, 6 | } 7 | -------------------------------------------------------------------------------- /packages/hms-virtual-background/src/tflite/tflite.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/hms-virtual-background/src/tflite/tflite.wasm -------------------------------------------------------------------------------- /packages/roomkit-react/src/AudioLevel/audio-level.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/roomkit-react/src/AudioLevel/audio-level.png -------------------------------------------------------------------------------- /packages/hms-video-store/src/notification-manager/index.ts: -------------------------------------------------------------------------------- 1 | export { HMSNotificationMethod } from './HMSNotificationMethod'; 2 | export * from './HMSNotifications'; 3 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/rtc-stats/index.ts: -------------------------------------------------------------------------------- 1 | export { HMSWebrtcInternals } from './HMSWebrtcInternals'; 2 | export { HMSWebrtcStats } from './HMSWebrtcStats'; 3 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/hooks/useDropdownSelection.jsx: -------------------------------------------------------------------------------- 1 | export const useDropdownSelection = () => { 2 | return '$surface_bright'; 3 | }; 4 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/images/ios-perm-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/roomkit-react/src/Prebuilt/images/ios-perm-0.png -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/images/pdf-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/roomkit-react/src/Prebuilt/images/pdf-share.png -------------------------------------------------------------------------------- /packages/hms-video-store/src/analytics/AnalyticsEventDomains.ts: -------------------------------------------------------------------------------- 1 | export enum DomainCategory { 2 | CUSTOM = 'CUSTOM', 3 | LOCAL = 'LOCAL', 4 | HMS = 'HMS', 5 | } 6 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/webrtc-stats/internal.ts: -------------------------------------------------------------------------------- 1 | // this is to fix the cyclic dependency 2 | export { HMSReactiveStore } from '../reactive-store/HMSReactiveStore'; 3 | -------------------------------------------------------------------------------- /packages/hms-virtual-background/src/tflite/tflite-simd.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/hms-virtual-background/src/tflite/tflite-simd.wasm -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Polls/common/constants.ts: -------------------------------------------------------------------------------- 1 | export enum PollStage { 2 | DRAFT = 'DRAFT', 3 | LIVE = 'LIVE', 4 | ENDED = 'ENDED', 5 | } 6 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/images/screen-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/roomkit-react/src/Prebuilt/images/screen-share.png -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/images/android-perm-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/roomkit-react/src/Prebuilt/images/android-perm-1.png -------------------------------------------------------------------------------- /packages/hms-video-store/src/media/settings/index.ts: -------------------------------------------------------------------------------- 1 | export * from './HMSAudioTrackSettings'; 2 | export * from './HMSVideoTrackSettings'; 3 | export * from './HMSTrackSettings'; 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/id-factory.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuidv4 } from 'uuid'; 2 | 3 | export default class HMSIdFactory { 4 | static makePeerId = () => uuidv4(); 5 | } 6 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/date.ts: -------------------------------------------------------------------------------- 1 | export const convertDateNumToDate = (dateNum?: number): Date | undefined => { 2 | return dateNum ? new Date(dateNum) : undefined; 3 | }; 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/sdk/models/peer/index.ts: -------------------------------------------------------------------------------- 1 | export { HMSPeer } from './HMSPeer'; 2 | export { HMSLocalPeer } from './HMSLocalPeer'; 3 | export { HMSRemotePeer } from './HMSRemotePeer'; 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/transcription-config.ts: -------------------------------------------------------------------------------- 1 | import { HMSTranscriptionMode } from './room'; 2 | 3 | export interface TranscriptionConfig { 4 | mode: HMSTranscriptionMode; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs 3 | "composite": true, 4 | "extends": "./tsconfig.base.json", 5 | "compilerOptions": {} 6 | } 7 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/error-listener.ts: -------------------------------------------------------------------------------- 1 | import { HMSException } from '../error/HMSException'; 2 | 3 | export interface IErrorListener { 4 | onError(error: HMSException): void; 5 | } 6 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/peer-list-iterator.ts: -------------------------------------------------------------------------------- 1 | export interface HMSPeerListIteratorOptions { 2 | role?: string; 3 | group?: string; 4 | peerIds?: string[]; 5 | limit?: number; 6 | } 7 | -------------------------------------------------------------------------------- /packages/roomkit-react/.example.env: -------------------------------------------------------------------------------- 1 | STORYBOOK_ROOM_LAYOUT_ENDPOINT= 2 | STORYBOOK_TOKEN_BY_ROOM_CODE_ENDPOINT= 3 | STORYBOOK_INIT_API_ENDPOINT= 4 | STORYBOOK_EVENT_API_ENDPOINT= 5 | STORYBOOK_SAMPLE_ROOM_CODE= -------------------------------------------------------------------------------- /packages/hls-stats/src/index.ts: -------------------------------------------------------------------------------- 1 | export { HlsStats } from './controllers/HlsStats'; 2 | export type { IHlsStats } from './interfaces/IHlsStats'; 3 | export type { HlsPlayerStats } from './interfaces/index'; 4 | -------------------------------------------------------------------------------- /packages/hms-virtual-background/src/models/selfie_segmentation_landscape.tflite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/hms-virtual-background/src/models/selfie_segmentation_landscape.tflite -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [ 3 | { 4 | "source": "/(.*)", 5 | "destination": "/index.html" 6 | } 7 | ], 8 | "outputDirectory": "dist" 9 | } 10 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/media/streams/index.ts: -------------------------------------------------------------------------------- 1 | export { HMSLocalStream } from './HMSLocalStream'; 2 | export { HMSRemoteStream } from './HMSRemoteStream'; 3 | export { HMSMediaStream } from './HMSMediaStream'; 4 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Theme/Theme.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs'; 2 | import ThemeStory from './ThemeStory'; 3 | 4 | 5 | 6 | ## Theme 7 | 8 | 9 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/get-token.ts: -------------------------------------------------------------------------------- 1 | export interface TokenRequest { 2 | roomCode: string; 3 | userId?: string; 4 | } 5 | 6 | export interface TokenRequestOptions { 7 | endpoint?: string; 8 | } 9 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/analytics/stats/index.ts: -------------------------------------------------------------------------------- 1 | export * from './interfaces'; 2 | export { PublishStatsAnalytics } from './PublishStatsAnalytics'; 3 | export { SubscribeStatsAnalytics } from './SubscribeStatsAnalytics'; 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/media/tracks/HMSTrackExceptionTrackType.ts: -------------------------------------------------------------------------------- 1 | export enum HMSTrackExceptionTrackType { 2 | AUDIO = 'audio', 3 | VIDEO = 'video', 4 | AUDIO_VIDEO = 'audio, video', 5 | SCREEN = 'screen', 6 | } 7 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Popover/Popover.mdx: -------------------------------------------------------------------------------- 1 | ## Popover 2 | 3 | Displays rich content in a portal, triggered by a button. 4 | 5 | - [Example](#example) 6 | 7 | ### Example 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/QRCode/QRCode.mdx: -------------------------------------------------------------------------------- 1 | ## QRCode 2 | 3 | QRCode component displays a scannable QR code for the given value. 4 | 5 | ## Usage 6 | 7 | ```jsx 8 | 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/common/storeName.ts: -------------------------------------------------------------------------------- 1 | import { isBrowser } from '../internal'; 2 | 3 | export const storeNameWithTabTitle = (storeName: string) => { 4 | return isBrowser ? `${storeName} ${document.title}` : storeName; 5 | }; 6 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/leave-room-request.ts: -------------------------------------------------------------------------------- 1 | import { HMSPeer } from '../sdk/models/peer'; 2 | 3 | export interface HMSLeaveRoomRequest { 4 | requestedBy?: HMSPeer; 5 | reason: string; 6 | roomEnded: boolean; 7 | } 8 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/selectors/index.ts: -------------------------------------------------------------------------------- 1 | export * from './selectors'; 2 | export * from './playlistselectors'; 3 | export * from './selectorsByID'; 4 | export * from './derivedSelectors'; 5 | export * from './selectorsByReference'; 6 | -------------------------------------------------------------------------------- /packages/react-icons/assets/DividerIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/PIP/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PIPComponent from './PIPComponent'; 3 | 4 | export const PIP = ({ content = null }) => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/analytics/IAnalyticsPropertiesProvider.ts: -------------------------------------------------------------------------------- 1 | import AnalyticsEvent from './AnalyticsEvent'; 2 | 3 | export interface IAnalyticsPropertiesProvider { 4 | toAnalyticsProperties: () => AnalyticsEvent['properties']; 5 | } 6 | -------------------------------------------------------------------------------- /packages/hls-stats/src/interfaces/IHlsStats.ts: -------------------------------------------------------------------------------- 1 | import { HlsPlayerStats } from '.'; 2 | 3 | export interface IHlsStats { 4 | subscribe(callback: (state: HlsPlayerStats) => void, interval: number): () => void; 5 | getState(): HlsPlayerStats; 6 | } 7 | -------------------------------------------------------------------------------- /packages/hms-virtual-background/src/models/selfiesegmentation_mlkit-256x256-2021_01_19-v1215.f16.tflite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/100mslive/web-sdks/HEAD/packages/hms-virtual-background/src/models/selfiesegmentation_mlkit-256x256-2021_01_19-v1215.f16.tflite -------------------------------------------------------------------------------- /packages/hms-video-store/src/analytics/AnalyticsEventLevel.ts: -------------------------------------------------------------------------------- 1 | export enum HMSAnalyticsLevel { 2 | VERBOSE, 3 | INFO, 4 | ERROR, 5 | OFF, 6 | } 7 | 8 | export enum AnalyticsEventLevel { 9 | VERBOSE, 10 | INFO, 11 | ERROR, 12 | OFF, 13 | } 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Polls/common/Line.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Flex } from '../../../../Layout'; 3 | 4 | export const Line = () => ; 5 | -------------------------------------------------------------------------------- /scripts/update-versions.sh: -------------------------------------------------------------------------------- 1 | lerna version $1 --no-git-tag-version --exact --yes --no-private 2 | lerna add @100mslive/hms-video-store --peer --scope=@100mslive/hms-virtual-background --exact 3 | lerna add @100mslive/roomkit-react --scope=prebuilt-react-integration --exact -------------------------------------------------------------------------------- /nx.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "nx/presets/npm.json", 3 | "tasksRunnerOptions": { 4 | "default": { 5 | "runner": "nx/tasks-runners/default", 6 | "options": { 7 | "cacheableOperations": ["build", "lint"] 8 | } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/hms-video-store/internal-docs/Store-Comparator.md: -------------------------------------------------------------------------------- 1 | # Internal SDK Store and Comparator 2 | 3 | TODO 4 | 5 | ## Comparator 6 | 7 | - Comparator is a separate class injected in store. Usage: `this.store.getComparator().getTrackComparators().screenShare(trackA, trackB)`. 8 | -------------------------------------------------------------------------------- /packages/react-icons/assets/PauseIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/analytics/IAnalyticsTransportProvider.ts: -------------------------------------------------------------------------------- 1 | import AnalyticsEvent from './AnalyticsEvent'; 2 | 3 | export interface IAnalyticsTransportProvider { 4 | readonly TAG: string; 5 | isConnected: boolean; 6 | sendEvent: (event: AnalyticsEvent) => void; 7 | } 8 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/speaker.ts: -------------------------------------------------------------------------------- 1 | import { HMSAudioTrack } from '../media/tracks/HMSAudioTrack'; 2 | import { HMSPeer } from '../sdk/models/peer'; 3 | 4 | export interface HMSSpeaker { 5 | peer: HMSPeer; 6 | track: HMSAudioTrack; 7 | audioLevel: number; 8 | } 9 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Label/Label.tsx: -------------------------------------------------------------------------------- 1 | import * as LabelPrimitive from '@radix-ui/react-label'; 2 | import { styled } from '../Theme'; 3 | 4 | export const Label = styled(LabelPrimitive.Root, { 5 | fontFamily: '$sans', 6 | fontSize: '$md', 7 | color: '$on_primary_high', 8 | }); 9 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/reactive-store/common/presence.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Check only for presence(not truthy) of a value. 3 | * Use in places where 0, false need to be considered valid. 4 | */ 5 | export function isPresent(value: any) { 6 | return value !== undefined && value !== null; 7 | } 8 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/schema/role.ts: -------------------------------------------------------------------------------- 1 | import type { HMSRole } from '../interfaces'; 2 | 3 | export type HMSRoleName = string; 4 | 5 | export interface HMSPublishAllowed { 6 | video: boolean; 7 | audio: boolean; 8 | screen: boolean; 9 | } 10 | 11 | export type { HMSRole }; 12 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/feature-flags.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | HMS?: { 3 | PING_INTERVAL?: number; 4 | PING_TIMEOUT?: number; 5 | GAIN_VALUE: 10; 6 | ON_SFU_STATS: (params: any) => void; 7 | NETWORK_TEST: boolean; 8 | CLIENT_EVENTS: boolean; 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/reactive-store/sdkUtils/sdkUtils.ts: -------------------------------------------------------------------------------- 1 | import { HMSRemoteAudioTrack, HMSRemoteVideoTrack, HMSTrack } from '../../internal'; 2 | 3 | export function isRemoteTrack(track: HMSTrack) { 4 | return track instanceof HMSRemoteAudioTrack || track instanceof HMSRemoteVideoTrack; 5 | } 6 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Accordion/index.ts: -------------------------------------------------------------------------------- 1 | import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot } from './Accordion'; 2 | 3 | export const Accordion = { 4 | Root: AccordionRoot, 5 | Item: AccordionItem, 6 | Content: AccordionContent, 7 | Header: AccordionHeader, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/TileMenu/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Add __cancel-drag-event for the menu to open on touch devices on the draggdable element 3 | * 4 | */ 5 | export const getDragClassName = () => { 6 | return navigator?.maxTouchPoints > 0 ? '__cancel-drag-event' : ''; 7 | }; 8 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/QRCode/QRCode.tsx: -------------------------------------------------------------------------------- 1 | import React, { ComponentProps } from 'react'; 2 | import { QRCodeSVG } from 'qrcode.react'; 3 | 4 | export const QRCode = (props: ComponentProps) => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Icons/Icons.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs'; 2 | import IconsList from './IconsList'; 3 | 4 | 5 | 6 | ## Iconography 7 | 8 | World's first Video-first Icon Library 😎 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/transport/models/TransportState.ts: -------------------------------------------------------------------------------- 1 | export enum TransportState { 2 | Disconnected = 'Disconnected', 3 | Connecting = 'Connecting', 4 | Joined = 'Joined', 5 | Preview = 'Preview', 6 | Failed = 'Failed', 7 | Reconnecting = 'Reconnecting', 8 | Leaving = 'Leaving', 9 | } 10 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/sdk/store/StoreInterfaces.ts: -------------------------------------------------------------------------------- 1 | import { HMSRole } from '../../interfaces'; 2 | import { TrackState } from '../../notification-manager'; 3 | 4 | export type KnownRoles = { [role: string]: HMSRole }; 5 | export interface TrackStateEntry { 6 | peerId: string; 7 | trackInfo: TrackState; 8 | } 9 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/connection/model.ts: -------------------------------------------------------------------------------- 1 | // Sent in trickle messages as target - biz understands only 0 and 1 2 | export enum HMSConnectionRole { 3 | Publish = 0, 4 | Subscribe = 1, 5 | } 6 | 7 | export interface HMSTrickle { 8 | candidate: RTCIceCandidateInit; 9 | target: HMSConnectionRole; 10 | } 11 | -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './main.css'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/peer/index.ts: -------------------------------------------------------------------------------- 1 | export type { HMSPeer } from './hms-peer'; 2 | export type { HMSLocalPeer } from './hms-local-peer'; 3 | export type { HMSRemotePeer } from './hms-remote-peer'; 4 | export type { HMSConnectionQuality } from './connection-quality'; 5 | export { HMSPeerType } from './hms-peer'; 6 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/plugins/audio/index.ts: -------------------------------------------------------------------------------- 1 | export type { HMSAudioPlugin } from './HMSAudioPlugin'; 2 | export { HMSAudioPluginType, HMSPluginUnsupportedTypes } from './HMSAudioPlugin'; 3 | export type { HMSPluginSupportResult } from './HMSAudioPlugin'; 4 | export { HMSAudioPluginsManager } from './HMSAudioPluginsManager'; 5 | -------------------------------------------------------------------------------- /packages/hms-video-store/internal-docs/API-Reference-Generation.md: -------------------------------------------------------------------------------- 1 | # Generating API Reference 2 | 3 | - Run `yarn docs` in root directory - this should produce a **docs** directory in root. 4 | - Copy the contents of `./docs/` to **'docs/api-references/javascript/v2'** of the [100ms Docs Repo](https://github.com/100mslive/100ms-docs). 5 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/fixtures/tracks.ts: -------------------------------------------------------------------------------- 1 | import { HMSVideoTrack } from '@100mslive/hms-video-store'; 2 | 3 | let counter = 100; 4 | 5 | export const makeFakeVideoTrack = (): HMSVideoTrack => { 6 | return { 7 | enabled: false, 8 | id: String(counter++), 9 | type: 'video', 10 | } as HMSVideoTrack; 11 | }; 12 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/plugins/video/index.ts: -------------------------------------------------------------------------------- 1 | export type { HMSVideoPlugin } from './HMSVideoPlugin'; 2 | export { HMSVideoPluginType, HMSVideoPluginCanvasContextType } from './HMSVideoPlugin'; 3 | export { HMSVideoPluginsManager } from './HMSVideoPluginsManager'; 4 | export type { HMSMediaStreamPlugin } from './HMSMediaStreamPlugin'; 5 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/hooks/useDialogContainerSelector.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { DialogContainerContext } from '../context/DialogContext'; 3 | 4 | export function useDialogContainerSelector() { 5 | const dialogContainerSelector = useContext(DialogContainerContext); 6 | return dialogContainerSelector; 7 | } 8 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/rtmp-recording-config.ts: -------------------------------------------------------------------------------- 1 | export interface RTMPRecordingConfig { 2 | meetingURL?: string; 3 | rtmpURLs?: Array; 4 | record: boolean; 5 | resolution?: RTMPRecordingResolution; 6 | } 7 | 8 | export interface RTMPRecordingResolution { 9 | width: number; 10 | height: number; 11 | } 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/.babelrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceType": "unambiguous", 3 | "presets": [ 4 | [ 5 | "@babel/preset-env", 6 | { 7 | "targets": { 8 | "chrome": 100 9 | } 10 | } 11 | ], 12 | "@babel/preset-typescript", 13 | "@babel/preset-react" 14 | ], 15 | "plugins": [] 16 | } -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | rules: { 4 | 'header-min-length': [2, 'always', 5], 5 | 'type-enum': [ 6 | 2, 7 | 'always', 8 | ['build', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'lint'], 9 | ], 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /packages/hls-player/src/interfaces/IHMSHLSLayer.ts: -------------------------------------------------------------------------------- 1 | import { LevelParsed } from 'hls.js'; 2 | 3 | export declare interface HMSHLSLayer extends Partial { 4 | readonly bitrate: number; 5 | readonly height?: number; 6 | readonly id?: number; 7 | readonly width?: number; 8 | url: string; 9 | resolution?: string; 10 | } 11 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Fieldset/Fieldset.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../Theme'; 2 | 3 | const StyledFieldset = styled('fieldset', { 4 | display: 'flex', 5 | alignItems: 'center', 6 | justifyContent: 'space-between', 7 | border: 'none', 8 | backgroundColor: 'transparent', 9 | }); 10 | 11 | export const Fieldset = StyledFieldset; 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Loading/Loading.mdx: -------------------------------------------------------------------------------- 1 | import { Story, Preview, Props } from '@storybook/addon-docs'; 2 | 3 | import { Loading } from '.'; 4 | 5 | # Loading 6 | 7 | ## Overview 8 | 9 | This is some random overview text of the item. 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Switch/Switch.mdx: -------------------------------------------------------------------------------- 1 | import { Story } from '@storybook/addon-docs'; 2 | 3 | ## Switch 4 | 5 | Switch is the primary component. It has 2 possible states i.e. on and off. It accepts states as checked prop and event listener of onCheckedChange. 6 | 7 | - [Index](#index) 8 | 9 | ### Index 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/README.md: -------------------------------------------------------------------------------- 1 | ![Banner](https://github.com/100mslive/web-sdks/blob/06c65259912db6ccd8617f2ecb6fef51429251ec/prebuilt-banner.png) 2 | 3 | # 100ms Prebuilt - React Example 4 | 5 | ### How to run locally? 6 | 7 | - Run `yarn && yarn build` at the root level of the repo (./web-sdks) 8 | - Then, navigate to this folder and run `yarn dev` 9 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/reactive-store/internalTypes.ts: -------------------------------------------------------------------------------- 1 | import { PartialState, State } from 'zustand/vanilla'; 2 | 3 | export type NamedSetState = { 4 | ( 5 | partial: PartialState, 6 | name: string, 7 | ): void; 8 | }; 9 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/json.ts: -------------------------------------------------------------------------------- 1 | export const stringifyMediaStreamTrack = (track: MediaStreamTrack) => { 2 | if (!track) { 3 | return ''; 4 | } 5 | return `{ 6 | trackId: ${track.id}; 7 | kind: ${track.kind}; 8 | enabled: ${track.enabled}; 9 | muted: ${track.muted}; 10 | readyState: ${track.readyState}; 11 | }`; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/react-sdk/src/primitives/types.ts: -------------------------------------------------------------------------------- 1 | import { EqualityChecker, StateSelector } from 'zustand'; 2 | import { HMSStatsStore, HMSStore, IStoreReadOnly } from '@100mslive/hms-video-store'; 3 | 4 | export interface IHMSReactStore extends IStoreReadOnly { 5 | (selector: StateSelector, equalityFn?: EqualityChecker): U; 6 | } 7 | -------------------------------------------------------------------------------- /packages/hls-stats/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "composite": false, 6 | "incremental": false, 7 | "declarationMap": false, 8 | "sourceMap": false, 9 | "emitDeclarationOnly": true 10 | }, 11 | "include": ["src/**/*.ts"], 12 | "exclude": ["node_modules"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/hls-player/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "composite": false, 6 | "incremental": false, 7 | "declarationMap": false, 8 | "sourceMap": false, 9 | "emitDeclarationOnly": true 10 | }, 11 | "include": ["src/**/*.ts"], 12 | "exclude": ["node_modules"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/signal/interfaces/track.ts: -------------------------------------------------------------------------------- 1 | import { HMSTrackSource } from '../../media/tracks'; 2 | 3 | /** 4 | * interface for track server sends/receives 5 | */ 6 | export interface Track { 7 | mute: boolean; 8 | type: 'audio' | 'video'; 9 | source: HMSTrackSource; 10 | description: string; 11 | track_id: string; 12 | stream_id: string; 13 | } 14 | -------------------------------------------------------------------------------- /packages/hms-virtual-background/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './HMSVirtualBackgroundPlugin'; 2 | export { HMSVBPlugin } from './HMSVBPlugin'; 3 | export { HMSVirtualBackgroundTypes } from './interfaces'; 4 | export type { HMSVirtualBackground } from './interfaces'; 5 | export { HMSEffectsPlugin } from './HMSEffectsPlugin'; 6 | export type { HMSEffectsBackground } from './HMSEffectsPlugin'; 7 | -------------------------------------------------------------------------------- /packages/react-icons/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "composite": false, 6 | "incremental": false, 7 | "declarationMap": false, 8 | "sourceMap": false, 9 | "emitDeclarationOnly": true 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["node_modules", "dist"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-icons/assets/MinusIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/role-change-request.ts: -------------------------------------------------------------------------------- 1 | import { HMSRole } from './role'; 2 | import { HMSPeer } from '../sdk/models/peer'; 3 | 4 | /** 5 | * This interface represents the role change request that is 6 | * sent to the users of the SDK. 7 | */ 8 | export interface HMSRoleChangeRequest { 9 | requestedBy?: HMSPeer; 10 | role: HMSRole; 11 | token: string; 12 | } 13 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/math.ts: -------------------------------------------------------------------------------- 1 | export class RunningAverage { 2 | private total = 0; 3 | private count = 0; 4 | 5 | add(item: number) { 6 | this.count++; 7 | this.total += item; 8 | } 9 | 10 | getAvg(): number { 11 | return Math.floor(this.total / this.count); 12 | } 13 | 14 | reset() { 15 | this.total = 0; 16 | this.count = 0; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/hms-virtual-background/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "composite": false, 6 | "incremental": false, 7 | "declarationMap": false, 8 | "sourceMap": false, 9 | "emitDeclarationOnly": true 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["node_modules", "build"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/hls-player/src/utilies/type.ts: -------------------------------------------------------------------------------- 1 | import { HMSHLSException } from '../error/HMSHLSException'; 2 | 3 | declare global { 4 | interface Window { 5 | __hms: 6 | | { 7 | sdk: 8 | | { 9 | sendHLSAnalytics: (error: HMSHLSException) => void; 10 | } 11 | | undefined; 12 | } 13 | | undefined; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/media/tracks/HMSRemoteAudioTrack.ts: -------------------------------------------------------------------------------- 1 | import { HMSAudioTrack } from './HMSAudioTrack'; 2 | 3 | export class HMSRemoteAudioTrack extends HMSAudioTrack { 4 | async setEnabled(value: boolean): Promise { 5 | if (value === this.enabled) { 6 | return; 7 | } 8 | await super.setEnabled(value); 9 | await this.subscribeToAudio(value); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/DividerIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgDividerIcon = (props: SVGProps) => ( 4 | 5 | 6 | 7 | ); 8 | export default SvgDividerIcon; 9 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Settings/common.ts: -------------------------------------------------------------------------------- 1 | import { css } from '../../..'; 2 | 3 | export const settingOverflow = css({ 4 | flex: '1 1 0', 5 | pr: '$12', 6 | mr: '-$12', 7 | overflowY: 'auto', 8 | }); 9 | 10 | export const settingContent = css({ 11 | display: 'flex', 12 | flexDirection: 'column', 13 | '&[hidden]': { 14 | display: 'none', 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/VideoLayouts/interface.ts: -------------------------------------------------------------------------------- 1 | import { HMSPeer } from '@100mslive/react-sdk'; 2 | 3 | export interface LayoutProps { 4 | isInsetEnabled?: boolean; 5 | edgeToEdge?: boolean; 6 | prominentRoles?: string[]; 7 | hasSidebar?: boolean; 8 | peers: HMSPeer[]; 9 | onPageChange?: (page: number) => void; 10 | onPageSize?: (size: number) => void; 11 | } 12 | -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/PIP/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export type PIPContextType = { 4 | isSupported: boolean; 5 | pipWindow: Window | null; 6 | requestPipWindow: (width: number, height: number) => Promise; 7 | closePipWindow: () => void; 8 | }; 9 | 10 | export const PIPContext = createContext(undefined); 11 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/plugins/video/HMSMediaStreamPlugin.ts: -------------------------------------------------------------------------------- 1 | export interface HMSMediaStreamPlugin { 2 | /** 3 | * The name is meant to uniquely specify a plugin instance. This will be used to track number of plugins 4 | * added to the track, and same name won't be allowed twice. 5 | */ 6 | getName(): string; 7 | 8 | apply(stream: MediaStream): MediaStream; 9 | 10 | stop(): void; 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-icons/assets/CardIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/peer/hms-remote-peer.ts: -------------------------------------------------------------------------------- 1 | import { HMSPeer } from './hms-peer'; 2 | import { HMSRemoteAudioTrack, HMSRemoteTrack, HMSRemoteVideoTrack } from '../../media/tracks'; 3 | 4 | export interface HMSRemotePeer extends HMSPeer { 5 | audioTrack?: HMSRemoteAudioTrack; 6 | videoTrack?: HMSRemoteVideoTrack; 7 | auxiliaryTracks: HMSRemoteTrack[]; 8 | fromRoomState: boolean; 9 | } 10 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/schema/settings.ts: -------------------------------------------------------------------------------- 1 | import { HMSAudioMode } from '../interfaces'; 2 | 3 | export interface HMSMediaSettings { 4 | audioInputDeviceId: string; 5 | videoInputDeviceId: string; 6 | audioOutputDeviceId?: string; 7 | audioMode?: HMSAudioMode; 8 | } 9 | 10 | export interface DebugInfo { 11 | websocketURL?: string; 12 | enabledFlags?: string[]; 13 | initEndpoint?: string; 14 | } 15 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/PIP/usePIPWindow.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { PIPContext, PIPContextType } from './context'; 3 | 4 | export const usePIPWindow = (): PIPContextType => { 5 | const context = useContext(PIPContext); 6 | 7 | if (context === undefined) { 8 | throw new Error('usePIPWindow must be used within a PIPContext'); 9 | } 10 | 11 | return context; 12 | }; 13 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/hooks/useInsetEnabled.ts: -------------------------------------------------------------------------------- 1 | import { useRoomLayout } from '..'; 2 | 3 | export const useInsetEnabled = (): boolean => { 4 | const layout = useRoomLayout(); 5 | const { enable_local_tile_inset = true } = 6 | //@ts-ignore 7 | layout?.screens?.conferencing?.default?.elements?.video_tile_layout?.grid || {}; 8 | 9 | return enable_local_tile_inset; 10 | }; 11 | -------------------------------------------------------------------------------- /packages/react-icons/src/PauseIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPauseIcon = (props: SVGProps) => ( 4 | 5 | 6 | 7 | ); 8 | export default SvgPauseIcon; 9 | -------------------------------------------------------------------------------- /packages/react-sdk/src/hooks/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * use this to control how errors are handled within a function exposed by a hook. By default this 3 | * only logs the error to the console, and can be overridden for any other behaviour. For example 4 | * `(err) => throw err;` will ensure that any error is thrown back to the caller when the function is called. 5 | */ 6 | export type hooksErrHandler = (err: Error, method?: string) => void; 7 | -------------------------------------------------------------------------------- /packages/react-sdk/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "composite": false, 6 | "incremental": false, 7 | "declarationMap": false, 8 | "sourceMap": false, 9 | "declaration": true, 10 | "emitDeclarationOnly": true 11 | }, 12 | "include": ["src/**/*", "types"], 13 | "exclude": ["node_modules", "dist", "**/*.test.ts"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/roomkit-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "composite": false, 6 | "incremental": false, 7 | "declarationMap": false, 8 | "sourceMap": false, 9 | "emitDeclarationOnly": true 10 | }, 11 | "include": ["src/**/*"], 12 | "exclude": ["node_modules", "dist", "**/*.stories.tsx", "src/store/**", "**/*.mdx"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/signal/interfaces/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Interfaces for serialized objects to be sent and received through the signal 3 | * 4 | * TODO: Add HMSMessage and Analytics Event 5 | */ 6 | 7 | export * from './track'; 8 | export * from './superpowers'; 9 | export * from './responses'; 10 | export * from './polls'; 11 | 12 | export type { HMSWhiteboardCreateOptions } from '../../interfaces/session-store/whiteboard'; 13 | -------------------------------------------------------------------------------- /packages/hms-video-store/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "composite": false, 6 | "incremental": false, 7 | "declarationMap": false, 8 | "sourceMap": false, 9 | "emitDeclarationOnly": true 10 | }, 11 | "include": ["src/**/*", "types"], 12 | "exclude": ["node_modules", "dist", "**/*.test.ts", "internal-docs", "docs", "images"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Chat/utils.ts: -------------------------------------------------------------------------------- 1 | export const formatTime = (date: Date) => { 2 | if (!(date instanceof Date)) { 3 | return ''; 4 | } 5 | const hours = date.getHours(); 6 | const minutes = date.getMinutes(); 7 | const suffix = hours > 11 ? 'PM' : 'AM'; 8 | return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes} ${suffix}`; 9 | }; 10 | 11 | export const CHAT_MESSAGE_LIMIT = 2000; 12 | -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 100ms Prebuilt Integration 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/src/utils.js: -------------------------------------------------------------------------------- 1 | function isRoomCode(str) { 2 | const regex = /^[A-Za-z]*(-[A-Za-z]*){2}$/; 3 | return regex.test(str); 4 | } 5 | 6 | export const getRoomCodeFromUrl = () => { 7 | const path = window.location.pathname; 8 | const regex = /(\/streaming)?(\/(preview|meeting))?\/(?[^/]+)/; 9 | const roomCode = path.match(regex)?.groups?.code || null; 10 | return isRoomCode(roomCode) ? roomCode : null; 11 | }; 12 | -------------------------------------------------------------------------------- /packages/hms-whiteboard/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "composite": false, 6 | "incremental": false, 7 | "declarationMap": false, 8 | "sourceMap": false, 9 | "emitDeclarationOnly": true, 10 | "noImplicitReturns": false, 11 | "noUnusedParameters": false 12 | }, 13 | "include": ["src/**/*"], 14 | "exclude": ["node_modules", "dist"] 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | dist 5 | .idea 6 | .vscode 7 | *.pyc 8 | *.tgz 9 | coverage 10 | .env 11 | .nyc_output 12 | cy-coverage 13 | tsconfig.tsbuildinfo 14 | docs 15 | .cache 16 | .nx 17 | .dccache* 18 | storybook-static 19 | ConfigurationsTest/allure-report 20 | ConfigurationsTest/playwright-report 21 | build 22 | test-results/ 23 | playwright-report/ 24 | slackMessage.json 25 | package-lock.json 26 | slackMessage.txt 27 | .DS_Store -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { HMSPrebuilt, Diagnostics } from '@100mslive/roomkit-react'; 2 | import { getRoomCodeFromUrl } from './utils'; 3 | 4 | export default function App() { 5 | const roomCode = getRoomCodeFromUrl(); 6 | const isDiagnostics = location.pathname.startsWith('/diagnostics'); 7 | 8 | if (isDiagnostics) { 9 | return ; 10 | } 11 | 12 | return ; 13 | } 14 | -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/src/main.css: -------------------------------------------------------------------------------- 1 | @import url('@100mslive/roomkit-react/index.css'); 2 | 3 | html, 4 | body, 5 | #root { 6 | height: 100%; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | padding: env(safe-area-inset); 12 | } 13 | 14 | #root { 15 | overscroll-behavior-y: none; 16 | position: fixed; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | margin: 0; 21 | } 22 | 23 | .tl-container { 24 | border-radius: 0.75rem; 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-icons/assets/TranscriptIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*", "examples/*"], 3 | "useWorkspaces": true, 4 | "useNx": true, 5 | "version": "independent", 6 | "npmClient": "yarn", 7 | "command": { 8 | "version": { 9 | "message": "build: update version" 10 | }, 11 | "publish": { 12 | "access": "public", 13 | "registry": "https://registry.npmjs.org/" 14 | } 15 | }, 16 | "$schema": "node_modules/lerna/schemas/lerna-schema.json" 17 | } 18 | -------------------------------------------------------------------------------- /packages/hms-video-store/internal-docs/tech-debt.md: -------------------------------------------------------------------------------- 1 | ### Tech Debt 2 | 3 | - tsdx is becoming an issue, the jest version with tsdx is pretty old and also 4 | links to a vulnerable node-modifier package. Some discussion here - https://github.com/formium/tsdx/issues/1068 5 | - node-notifier is force updated using yarn resolutions to handle dependabot alerts 6 | 7 | - an optimization focused review needs to be done on core parts to handle thousands 8 | of peers at a time 9 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/schema/index.ts: -------------------------------------------------------------------------------- 1 | export * from './schema'; 2 | export * from './room'; 3 | export * from './peer'; 4 | export * from './message'; 5 | export * from './settings'; 6 | export * from './notification'; 7 | export * from './role'; 8 | export * from './error'; 9 | export * from './requests'; 10 | export * from './device-change'; 11 | export * from './playlist'; 12 | export * from './session-store'; 13 | export * from './playlist-selectors'; 14 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/test/setup.ts: -------------------------------------------------------------------------------- 1 | // Setup for Jest tests 2 | 3 | // Mock Performance API properly for Jest 29 4 | global.performance = { 5 | mark: jest.fn(), 6 | measure: jest.fn(() => ({ duration: 0 } as PerformanceMeasure)), 7 | clearMarks: jest.fn(), 8 | clearMeasures: jest.fn(), 9 | getEntriesByName: jest.fn(() => []), 10 | getEntriesByType: jest.fn(() => []), 11 | now: jest.fn(() => Date.now()), 12 | } as any; 13 | 14 | export {}; 15 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/analytics-deviceId.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuid } from 'uuid'; 2 | import { LocalStorage } from './local-storage'; 3 | 4 | export const getAnalyticsDeviceId = () => { 5 | let id; 6 | const storage = new LocalStorage('hms-analytics-deviceId'); 7 | const storageId = storage.get(); 8 | if (storageId) { 9 | id = storageId; 10 | } else { 11 | id = uuid(); 12 | storage.set(id); 13 | } 14 | return id; 15 | }; 16 | -------------------------------------------------------------------------------- /packages/hls-player/src/index.ts: -------------------------------------------------------------------------------- 1 | import { HlsPlayerStats } from '@100mslive/hls-stats'; 2 | import { HMSHLSPlayer } from './controllers/HMSHLSPlayer'; 3 | import { HMSHLSException } from './error/HMSHLSException'; 4 | import { HMSHLSLayer } from './interfaces/IHMSHLSLayer'; 5 | import { HLSPlaybackState, HMSHLSPlayerEvents } from './utilies/constants'; 6 | export type { HMSHLSLayer, HMSHLSException, HlsPlayerStats }; 7 | export { HMSHLSPlayer, HLSPlaybackState, HMSHLSPlayerEvents }; 8 | -------------------------------------------------------------------------------- /packages/roomkit-web/src/index.js: -------------------------------------------------------------------------------- 1 | import r2wc from '@r2wc/react-to-web-component'; 2 | import { HMSPrebuilt } from '@100mslive/roomkit-react'; 3 | 4 | const HMSPrebuiltWebComponent = r2wc(HMSPrebuilt, { 5 | props: { 6 | roomCode: 'string', 7 | authToken: 'string', 8 | roomId: 'string', 9 | role: 'string', 10 | options: 'json', 11 | onLeave: 'function', 12 | }, 13 | }); 14 | 15 | customElements.define('hms-prebuilt', HMSPrebuiltWebComponent); 16 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/analytics/signal-transport/SignalAnalyticsTransport.ts: -------------------------------------------------------------------------------- 1 | import { LocalStorageEvents } from './LocalStoageEvents'; 2 | import JsonRpcSignal from '../../signal/jsonrpc'; 3 | import { AnalyticsTransport } from '../AnalyticsTransport'; 4 | 5 | export class SignalAnalyticsTransport extends AnalyticsTransport { 6 | failedEvents = new LocalStorageEvents(); 7 | 8 | constructor(public transportProvider: JsonRpcSignal) { 9 | super(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/peer/hms-local-peer.ts: -------------------------------------------------------------------------------- 1 | import { HMSPeer } from './hms-peer'; 2 | import { HMSLocalAudioTrack, HMSLocalTrack, HMSLocalVideoTrack } from '../../media/tracks'; 3 | import { HMSRole } from '../role'; 4 | 5 | export interface HMSLocalPeer extends HMSPeer { 6 | asRole?: HMSRole; 7 | audioTrack?: HMSLocalAudioTrack; 8 | videoTrack?: HMSLocalVideoTrack; 9 | auxiliaryTracks: HMSLocalTrack[]; 10 | 11 | isInPreview: () => boolean; 12 | } 13 | -------------------------------------------------------------------------------- /packages/hms-virtual-background/src/interfaces.ts: -------------------------------------------------------------------------------- 1 | export type HMSBackgroundInput = HTMLImageElement | HTMLVideoElement | HTMLCanvasElement; 2 | export enum HMSVirtualBackgroundTypes { 3 | BLUR = 'blur', 4 | NONE = 'none', 5 | GIF = 'gif', 6 | IMAGE = 'image', 7 | VIDEO = 'video', 8 | CANVAS = 'canvas', 9 | } 10 | 11 | export type HMSVirtualBackground = 12 | | string 13 | | HMSVirtualBackgroundTypes.BLUR 14 | | HMSVirtualBackgroundTypes.NONE 15 | | HMSBackgroundInput; 16 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Introduction/Introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs'; 2 | 3 | 4 | 5 | # Getting Started 6 | 7 | - [Basic Concepts](https://www.100ms.live/docs/javascript/v2/foundation/basics) 8 | - [Template and Roles](https://www.100ms.live/docs/javascript/v2/foundation/templates-and-roles) 9 | - [Authentication and Tokens](https://www.100ms.live/docs/javascript/v2/foundation/security-and-tokens) 10 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/PIP/PIPWindow.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createPortal } from 'react-dom'; 3 | 4 | type PIPWindowProps = { 5 | pipWindow: Window; 6 | children: React.ReactNode; 7 | }; 8 | 9 | export const PIPWindow = ({ pipWindow, children }: PIPWindowProps) => { 10 | pipWindow.document.body.style.margin = '0'; 11 | pipWindow.document.body.style.overflow = 'clip'; 12 | return createPortal(children, pipWindow.document.body); 13 | }; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/context/DialogContext.tsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, ReactNode } from 'react'; 2 | 3 | export const DialogContainerContext = createContext(''); 4 | 5 | export function DialogContainerProvider({ 6 | children, 7 | dialogContainerSelector, 8 | }: { 9 | children: ReactNode; 10 | dialogContainerSelector: string; 11 | }) { 12 | return {children}; 13 | } 14 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/transport/models/JoinParameters.ts: -------------------------------------------------------------------------------- 1 | import { HMSICEServer } from '../../interfaces'; 2 | 3 | export class JoinParameters { 4 | constructor( 5 | public authToken: string, 6 | public peerId: string, 7 | public peerName: string = '', 8 | public data: string = '', 9 | public endpoint: string = 'https://prod-init.100ms.live/init', 10 | public autoSubscribeVideo: boolean = false, 11 | public iceServers?: HMSICEServer[], 12 | ) {} 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-icons/assets/StatsIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/message.ts: -------------------------------------------------------------------------------- 1 | import { HMSRole } from './role'; 2 | import { HMSPeer } from '../sdk/models/peer'; 3 | 4 | export interface HMSMessageInput { 5 | recipientPeer?: HMSPeer; 6 | recipientRoles?: HMSRole[]; 7 | type?: string; 8 | message: string; 9 | } 10 | export interface HMSMessage { 11 | sender?: HMSPeer; 12 | recipientPeer?: HMSPeer; 13 | recipientRoles?: HMSRole[]; 14 | time: Date; 15 | type?: string; 16 | message: any; 17 | id?: string; 18 | } 19 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/HMSVideo/PlayerContext.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { HMSHLSPlayer } from '@100mslive/hls-player'; 3 | 4 | type IHMSPlayerContext = { 5 | hlsPlayer?: HMSHLSPlayer; 6 | }; 7 | 8 | export const HMSPlayerContext = React.createContext({ 9 | hlsPlayer: undefined, 10 | }); 11 | 12 | export const useHMSPlayerContext = () => { 13 | const context = useContext(HMSPlayerContext); 14 | return context; 15 | }; 16 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/track.futuretest.ts: -------------------------------------------------------------------------------- 1 | // this doesn't really work in nodejs environment, keeping it for future browser testing or till 2 | // we figure out a way to make it work in node 3 | // describe('empty track', () => { 4 | // it('gives an empty disabled but ready video track', () => { 5 | // const track = getEmptyVideoTrack(); 6 | // expect(track.readyState).toBe('live'); 7 | // expect(track.enabled).toBe(false); 8 | // track.stop(); 9 | // }); 10 | // }); 11 | export {}; 12 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/whiteboard.ts: -------------------------------------------------------------------------------- 1 | import { WHITEBOARD_ORIGIN, WHITEBOARD_QA_ORIGIN } from './constants'; 2 | import { ENV } from './support'; 3 | 4 | export const constructWhiteboardURL = (token: string, addr: string, env?: ENV) => { 5 | const origin = env === ENV.QA ? WHITEBOARD_QA_ORIGIN : WHITEBOARD_ORIGIN; 6 | 7 | const url = new URL(origin); 8 | url.searchParams.set('endpoint', `https://${addr}`); 9 | url.searchParams.set('token', token); 10 | 11 | return url.toString(); 12 | }; 13 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Icons/IconsList.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { IconGallery, IconItem } from '@storybook/addon-docs'; 3 | import * as icons from '@100mslive/react-icons'; 4 | 5 | const IconsList = () => { 6 | return ( 7 | 8 | {Object.entries(icons).map(([name, Component]) => ( 9 | 10 | 11 | 12 | ))} 13 | 14 | ); 15 | }; 16 | 17 | export default IconsList; 18 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ChevronRightIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Progress/index.tsx: -------------------------------------------------------------------------------- 1 | import { Indicator, Root } from '@radix-ui/react-progress'; 2 | import { styled } from '../Theme'; 3 | 4 | const StyledIndicator = styled(Indicator, { h: '$4', backgroundColor: '$primary_default' }); 5 | 6 | const StyledRoot = styled(Root, { 7 | w: '100%', 8 | h: '$4', 9 | borderRadius: '$round', 10 | backgroundColor: '$secondary_dim', 11 | overflow: 'hidden', 12 | }); 13 | 14 | export const Progress = { 15 | Root: StyledRoot, 16 | Content: StyledIndicator, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/react-icons/assets/FlutterIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/schema/session-store.ts: -------------------------------------------------------------------------------- 1 | export interface IHMSSessionStoreActions { 2 | set(key: K, value?: T[K]): Promise; 3 | /** 4 | * observe a particular key or set of keys to receive updates of its latest value when its changed 5 | */ 6 | observe(keys: keyof T | Array): Promise; 7 | /** 8 | * unobserve a particular key or set of keys to stop receiving updates of its latest value 9 | */ 10 | unobserve(keys: keyof T | Array): Promise; 11 | } 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Polls/common/VoteCount.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Flex, Text } from '../../../../'; 3 | 4 | export const VoteCount = ({ voteCount }: { voteCount: number }) => { 5 | return ( 6 | 7 | {voteCount ? ( 8 | 9 | {voteCount}  10 | {voteCount === 1 ? 'vote' : 'votes'} 11 | 12 | ) : null} 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/ice-server-config.ts: -------------------------------------------------------------------------------- 1 | import { HMSICEServer } from '../interfaces'; 2 | 3 | export const transformIceServerConfig = (defaultConfig?: RTCIceServer[], iceServers?: HMSICEServer[]) => { 4 | if (!iceServers || iceServers.length === 0) { 5 | return defaultConfig; 6 | } 7 | const transformedIceServers = iceServers.map(server => { 8 | return { urls: server.urls, credentialType: 'password', credential: server.password, username: server.userName }; 9 | }); 10 | return transformedIceServers; 11 | }; 12 | -------------------------------------------------------------------------------- /packages/react-icons/assets/BoltIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: Feature request 2 | description: File a feature request 3 | title: '[Feature]: ' 4 | labels: ['enhancement'] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Have an idea for a feature or change in 100ms sdk/prebuilt? 10 | - type: textarea 11 | id: description 12 | attributes: 13 | label: What's the feature? 14 | description: Describe the feature, who it would help, and link to any examples from other apps. 15 | validations: 16 | required: true -------------------------------------------------------------------------------- /packages/react-icons/src/MinusIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgMinusIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgMinusIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/assets/FilterIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/PrevIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPrevIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgPrevIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/StatsIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgStatsIcon = (props: SVGProps) => ( 4 | 5 | 12 | 13 | ); 14 | export default SvgStatsIcon; 15 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/connection/publish/IPublishConnectionObserver.ts: -------------------------------------------------------------------------------- 1 | import IConnectionObserver from '../IConnectionObserver'; 2 | 3 | export interface IPublishConnectionObserver extends IConnectionObserver { 4 | /** Triggered when renegotiation is necessary. 5 | * - A new local track/stream is added/removed 6 | * - A new data-channel is added/removed 7 | */ 8 | onRenegotiationNeeded(): Promise; 9 | 10 | onDTLSTransportStateChange: (state?: RTCDtlsTransportState) => void; 11 | 12 | onDTLSTransportError: (error: Error) => void; 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/NextIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgNextIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgNextIcon; 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/VideoList/videoListUtils.tsx: -------------------------------------------------------------------------------- 1 | export const getLeft = (index: number, currentPageIndex: number) => { 2 | //active slide 3 | if (index === currentPageIndex) { 4 | return 0; 5 | } 6 | //prev slide 7 | if (index + 1 === currentPageIndex) { 8 | return '-100%'; 9 | } 10 | //next slide 11 | if (index - 1 === currentPageIndex) { 12 | return '100%'; 13 | } 14 | //all slides before prev 15 | if (index < currentPageIndex) { 16 | return '-200%'; 17 | } 18 | //all slides after next 19 | return '200%'; 20 | }; 21 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/media/streams/HMSMediaStream.ts: -------------------------------------------------------------------------------- 1 | import { HMSTrack } from '../tracks'; 2 | 3 | export class HMSMediaStream { 4 | readonly nativeStream: MediaStream; 5 | id: string; 6 | 7 | readonly tracks = new Array(); 8 | 9 | constructor(nativeStream: MediaStream) { 10 | this.nativeStream = nativeStream; 11 | this.id = nativeStream.id; 12 | } 13 | 14 | /** 15 | * This is only used when onDemandTracks flag is enabled in Init 16 | * @param id 17 | */ 18 | updateId(id: string) { 19 | this.id = id; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/schema/error.ts: -------------------------------------------------------------------------------- 1 | import { HMSTrackExceptionTrackType } from '../media/tracks/HMSTrackExceptionTrackType'; 2 | 3 | /** 4 | * any mid call error notification will be in this format 5 | */ 6 | export interface HMSException { 7 | code: number; 8 | action: string; 9 | name: string; 10 | message: string; 11 | description: string; 12 | isTerminal: boolean; 13 | timestamp: Date; 14 | nativeError?: Error; 15 | } 16 | 17 | export interface HMSTrackException extends HMSException { 18 | trackType: HMSTrackExceptionTrackType; 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-icons/src/BackwardIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgBackwardIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgBackwardIcon; 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Link/Link.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentMeta, ComponentStory } from '@storybook/react'; 3 | import { Link } from '.'; 4 | 5 | export default { 6 | title: 'UI Components/Link', 7 | component: Link, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = props => { 11 | return ( 12 | 13 | Link Text 14 | 15 | ); 16 | }; 17 | 18 | export const Multiple = Template.bind({}); 19 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/session-store/index.ts: -------------------------------------------------------------------------------- 1 | import { HMSPeer } from '../peer'; 2 | 3 | export interface HMSSessionStore { 4 | set(key: string, value: any): Promise<{ value: any; updatedAt?: Date }>; 5 | observe(key: string[]): Promise; 6 | unobserve(key: string[]): Promise; 7 | } 8 | 9 | export interface SessionStoreUpdate { 10 | value: any; 11 | key: string; 12 | updatedAt?: Date; 13 | updatedBy?: HMSPeer; 14 | } 15 | 16 | export * from './polls'; 17 | export * from './whiteboard'; 18 | export * from './interactivity-center'; 19 | -------------------------------------------------------------------------------- /packages/react-icons/src/ForwardSolidIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgForwardSolidIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgForwardSolidIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/MoneyIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgMoneyIcon = (props: SVGProps) => ( 4 | 5 | 12 | 13 | ); 14 | export default SvgMoneyIcon; 15 | -------------------------------------------------------------------------------- /packages/react-icons/assets/MoneyIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/assets/QuizIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Toast/Toast.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Toast as ToastPrimitive } from '../../../Toast'; 3 | 4 | export const Toast = ({ title, description, close = true, open, duration, onOpenChange, icon, ...props }) => { 5 | return ( 6 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/react-icons/assets/FacebookIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/hls-stats/src/adapters/BaseAdapter.ts: -------------------------------------------------------------------------------- 1 | import Hls from 'hls.js'; 2 | import { HlsPlayerStats } from '../interfaces'; 3 | export abstract class BaseAdapter { 4 | hlsInstance: Hls; 5 | videoEl: HTMLVideoElement; 6 | hlsStatsState: HlsPlayerStats; 7 | constructor(hlsInstance: Hls, videoEl: HTMLVideoElement) { 8 | this.hlsInstance = hlsInstance; 9 | this.videoEl = videoEl; 10 | this.hlsStatsState = {}; 11 | } 12 | abstract startGatheringStats(): void; 13 | abstract finishGatheringStats(): void; 14 | getState() { 15 | return this.hlsStatsState; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/signal/ISignalEventsObserver.ts: -------------------------------------------------------------------------------- 1 | import { HMSTrickle } from '../connection/model'; 2 | import { HMSException } from '../error/HMSException'; 3 | 4 | export interface ISignalEventsObserver { 5 | onOffer(jsep: RTCSessionDescriptionInit): void; 6 | 7 | onTrickle(trickle: HMSTrickle): void; 8 | 9 | onNotification(message: any): void; 10 | 11 | onServerError(error: HMSException): void; 12 | 13 | onFailure(exception: HMSException): void; 14 | 15 | onOffline(reason: string): void; 16 | 17 | onOnline(): void; 18 | 19 | onNetworkOnline(): void; 20 | } 21 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Stats/formatBytes.ts: -------------------------------------------------------------------------------- 1 | export const formatBytes = (bytes?: number, unit = 'B', decimals = 2) => { 2 | if (bytes === 0) { 3 | return `0 ${unit}`; 4 | } 5 | if (!bytes) { 6 | return '-'; 7 | } 8 | 9 | const k = 1024; 10 | const dm = decimals < 0 ? 0 : decimals; 11 | const sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'].map(size => size + unit); 12 | 13 | let i = Math.floor(Math.log(bytes) / Math.log(k)); 14 | 15 | // B to KB 16 | i === 0 && i++; 17 | 18 | return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`; 19 | }; 20 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/peer/connection-quality.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The connection quality will store the details regarding the network status of 3 | * a peer in the room. The downlink score will be a number between 0-100 quantifying 4 | * the download bitrate the peer has compared against that required for a good 5 | * experience in the session. 6 | * Note that this is not an absolute measure, a bandwidth of 1 MBPs may be good 7 | * for a 1:1 call but poor for a large call. 8 | */ 9 | export interface HMSConnectionQuality { 10 | peerID: string; 11 | downlinkQuality: number; 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-icons/assets/TabletIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/react-icons/assets/TwitterXIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/network-info.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import { isBrowser } from './support'; 3 | 4 | export const getNetworkInfo = () => { 5 | if (!isBrowser || typeof navigator.connection === 'undefined') { 6 | return; 7 | } 8 | 9 | const connection = navigator.connection; 10 | const networkInfo = { 11 | downlink: connection.downlink, 12 | downlinkMax: connection.downlinkMax, 13 | effectiveType: connection.effectiveType, 14 | rtt: connection.rtt, 15 | saveData: connection.saveData, 16 | type: connection.type, 17 | }; 18 | return networkInfo; 19 | }; 20 | -------------------------------------------------------------------------------- /packages/react-icons/src/ChevronRightIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgChevronRightIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgChevronRightIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/assets/AddIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/assets/HorizontalMenuIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /packages/react-icons/src/FilterIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgFilterIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgFilterIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/PlaySolidIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPlaySolidIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgPlaySolidIcon; 12 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/connection/IConnectionObserver.ts: -------------------------------------------------------------------------------- 1 | export interface RTCIceCandidatePair { 2 | local?: RTCIceCandidate; 3 | remote?: RTCIceCandidate; 4 | } 5 | 6 | export default interface IConnectionObserver { 7 | onIceConnectionChange(newState: RTCIceConnectionState): void; 8 | 9 | // @TODO(eswar): Remove this. Use iceconnectionstate change with interval and threshold. 10 | onConnectionStateChange(newState: RTCPeerConnectionState): void; 11 | 12 | onIceCandidate(candidate: RTCIceCandidate): void; 13 | 14 | onSelectedCandidatePairChange(candidatePair: RTCIceCandidatePair): void; 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ChevronDownIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ChevronUpIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/MoreSettings/constants.ts: -------------------------------------------------------------------------------- 1 | export const trackSourceOptions = [ 2 | { label: 'All Track Sources', value: '' }, 3 | { label: 'regular', value: 'regular' }, 4 | { label: 'screen', value: 'screen' }, 5 | { label: 'audioplaylist', value: 'audioplaylist' }, 6 | { label: 'videoplaylist', value: 'videoplaylist' }, 7 | ]; 8 | export const trackTypeOptions = [ 9 | { label: 'All Track Types', value: '' }, 10 | { label: 'audio', value: 'audio' }, 11 | { label: 'video', value: 'video' }, 12 | ]; 13 | 14 | export const DEFAULT_TILES_IN_VIEW = { MWEB: 4, DESKTOP: 9 }; 15 | -------------------------------------------------------------------------------- /scripts/constants.js: -------------------------------------------------------------------------------- 1 | const dependencyMapping = { 2 | 'hms-video-web': [ 3 | 'hms-video-web', 4 | 'hms-video-store', 5 | 'hms-noise-suppression', 6 | 'hms-virtual-background', 7 | 'react-sdk', 8 | 'react-ui', 9 | 'roomkit-react', 10 | ], 11 | 'hms-video-store': ['hms-video-store', 'react-sdk', 'react-ui', 'roomkit-react'], 12 | 'react-sdk': ['react-sdk', 'react-ui', 'roomkit-react'], 13 | 'react-icons': ['react-icons', 'react-ui', 'roomkit-react'], 14 | 'react-ui': ['react-ui'], 15 | 'roomkit-react': ['roomkit-react'], 16 | }; 17 | 18 | module.exports = { dependencyMapping }; 19 | -------------------------------------------------------------------------------- /packages/react-icons/assets/CheckIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ChevronLeftIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/ReplyGroupIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgReplyGroupIcon = (props: SVGProps) => ( 4 | 5 | 6 | 7 | 8 | 9 | 10 | ); 11 | export default SvgReplyGroupIcon; 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/HMSVideo/Controls.jsx: -------------------------------------------------------------------------------- 1 | import { Flex, styled } from '../../..'; 2 | 3 | export const VideoControls = styled(Flex, { 4 | justifyContent: 'center', 5 | alignItems: 'center', 6 | alignSelf: 'stretch', 7 | width: '100%', 8 | gap: '$2', 9 | }); 10 | 11 | export const LeftControls = styled(Flex, { 12 | justifyContent: 'flex-start', 13 | alignItems: 'center', 14 | width: '100%', 15 | gap: '$4', 16 | }); 17 | export const RightControls = styled(Flex, { 18 | justifyContent: 'flex-end', 19 | alignItems: 'center', 20 | width: '100%', 21 | gap: '$4', 22 | }); 23 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/layouts/Sheet.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { selectAppData, useHMSStore } from '@100mslive/react-sdk'; 3 | import { RoomDetailsSheet } from '../components/RoomDetails/RoomDetailsSheet'; 4 | import { Box } from '../../Layout'; 5 | import { APP_DATA, SHEET_OPTIONS } from '../common/constants'; 6 | 7 | export const Sheet = () => { 8 | const sheet = useHMSStore(selectAppData(APP_DATA.sheet)); 9 | let ViewComponent; 10 | if (sheet === SHEET_OPTIONS.ROOM_DETAILS) { 11 | ViewComponent = ; 12 | } 13 | return {ViewComponent}; 14 | }; 15 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/promise.ts: -------------------------------------------------------------------------------- 1 | export interface PromiseCallbacks { 2 | resolve: (value: T) => void; 3 | reject: (reason?: any) => void; 4 | metadata?: K; 5 | } 6 | 7 | export class PromiseWithCallbacks { 8 | promise: Promise; 9 | resolve!: (value: T) => void; 10 | reject!: (reason?: any) => void; 11 | 12 | constructor(cb: (resolve: (value: T) => void, reject: (reason?: any) => void) => any) { 13 | this.promise = new Promise((resolve, reject) => { 14 | this.resolve = resolve; 15 | this.reject = reject; 16 | cb(resolve, reject); 17 | }); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/hms-video-store/typedoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "entryPoints": ["./src/index.ts"], 3 | "out": "docs", 4 | "plugin": ["../../scripts/typedocNavigationPlugin.js", "typedoc-plugin-markdown"], 5 | "disableSources": true, 6 | "excludeInternal": true, 7 | "excludePrivate": true, 8 | "excludeProtected": true, 9 | "excludeTags": ["@privateRemarks"], 10 | "hideBreadcrumbs": true, 11 | "hideInPageTOC": true, 12 | "hidePageTitle": true, 13 | "packageDocsPath": "packages/hms-video-store/docs", 14 | "publicPath": "/api-reference/javascript/v2/", 15 | "githubPages": false, 16 | "pagesPattern": "(? 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/BoltIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgBoltIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgBoltIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/PauseSolidIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPauseSolidIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgPauseSolidIcon; 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/utils/styles.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Flex based centering helper styles 3 | */ 4 | export const flexCenter = { 5 | display: 'flex', 6 | justifyContent: 'center', 7 | alignItems: 'center', 8 | }; 9 | 10 | /** 11 | * Gives styles for text ellipsis, with given width as maxWidth. 12 | * A number in pixels or css width string value can be passed 13 | * @param {number|string} width 14 | * @returns 15 | */ 16 | export const textEllipsis = (width: number | string) => ({ 17 | maxWidth: width, 18 | overflow: 'hidden', 19 | textOverflow: 'ellipsis', 20 | whiteSpace: 'nowrap', 21 | minWidth: 0, 22 | }); 23 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/error/HMSAction.ts: -------------------------------------------------------------------------------- 1 | export enum HMSAction { 2 | NONE = 'NONE', 3 | TRACK = 'TRACK', 4 | INIT = 'INIT', 5 | GET_TOKEN = 'GET_TOKEN', 6 | PUBLISH = 'PUBLISH', 7 | UNPUBLISH = 'UNPUBLISH', 8 | JOIN = 'JOIN', 9 | SUBSCRIBE = 'SUBSCRIBE', 10 | DATA_CHANNEL_SEND = 'DATA_CHANNEL_SEND', 11 | RESTART_ICE = 'RESTART_ICE', 12 | VIDEO_PLUGINS = 'VIDEO_PLUGINS', 13 | AUDIO_PLUGINS = 'AUDIO_PLUGINS', 14 | AUTOPLAY = 'AUTOPLAY', 15 | RECONNECT_SIGNAL = 'RECONNECT_SIGNAL', 16 | VALIDATION = 'VALIDATION', 17 | PLAYLIST = 'PLAYLIST', 18 | PREVIEW = 'PREVIEW', 19 | FEEDBACK = 'FEEDBACK', 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-icons/assets/Solid CheckCircleIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/assets/VerticalMenuIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/HamburgerMenuIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgHamburgerMenuIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgHamburgerMenuIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/NetworkIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgNetworkIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgNetworkIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/NoEntryIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgNoEntryIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgNoEntryIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/TabletIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgTabletIcon = (props: SVGProps) => ( 4 | 5 | 12 | 13 | ); 14 | export default SvgTabletIcon; 15 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Theme/useSSR.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | const isBrowser = (): boolean => { 4 | return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement); 5 | }; 6 | 7 | export type SSRState = { 8 | isBrowser: boolean; 9 | isServer: boolean; 10 | }; 11 | 12 | const useSSR = (): SSRState => { 13 | const [browser, setBrowser] = useState(false); 14 | useEffect(() => { 15 | setBrowser(isBrowser()); 16 | }, []); 17 | 18 | return { 19 | isBrowser: browser, 20 | isServer: !browser, 21 | }; 22 | }; 23 | 24 | export default useSSR; 25 | -------------------------------------------------------------------------------- /packages/react-icons/src/CardIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgCardIcon = (props: SVGProps) => ( 4 | 5 | 13 | 14 | ); 15 | export default SvgCardIcon; 16 | -------------------------------------------------------------------------------- /packages/react-sdk/src/hooks/useAudioMode.tsx: -------------------------------------------------------------------------------- 1 | import { HMSAudioMode, selectLocalMediaSettings } from '@100mslive/hms-video-store'; 2 | import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider'; 3 | 4 | export const useAudioMode = () => { 5 | const hmsActions = useHMSActions(); 6 | const { audioMode } = useHMSStore(selectLocalMediaSettings); 7 | const isMusicModeEnabled = audioMode === HMSAudioMode.MUSIC; 8 | const toggleMusicMode = async () => 9 | await hmsActions.setAudioSettings({ audioMode: isMusicModeEnabled ? HMSAudioMode.VOICE : HMSAudioMode.MUSIC }); 10 | return { toggleMusicMode, isMusicModeEnabled }; 11 | }; 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/HMSVideo/SeekControl.tsx: -------------------------------------------------------------------------------- 1 | import React, { MouseEventHandler } from 'react'; 2 | import { IconButton, Tooltip } from '../../..'; 3 | 4 | export const SeekControl = ({ 5 | title, 6 | onClick, 7 | children, 8 | css, 9 | }: { 10 | title: string; 11 | onClick?: MouseEventHandler; 12 | css?: any; 13 | children: React.ReactNode; 14 | }) => { 15 | return ( 16 | 17 | 18 | {children} 19 | 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/plugins/RemoteStopScreenshare.jsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from 'react'; 2 | import { useCustomEvent, useHMSActions } from '@100mslive/react-sdk'; 3 | import { REMOTE_STOP_SCREENSHARE_TYPE } from '../common/constants'; 4 | 5 | export function RemoteStopScreenshare() { 6 | const actions = useHMSActions(); 7 | 8 | const onRemoteStopScreenshare = useCallback(async () => { 9 | await actions.setScreenShareEnabled(false); 10 | }, [actions]); 11 | 12 | useCustomEvent({ 13 | type: REMOTE_STOP_SCREENSHARE_TYPE, 14 | onEvent: onRemoteStopScreenshare, 15 | }); 16 | 17 | return <>; 18 | } 19 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Sheet/Sheet.mdx: -------------------------------------------------------------------------------- 1 | # Replacing DocsPage with custom `MDX` content 2 | 3 | This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage). 4 | 5 | It can be further expanded with your own code snippets and include specific information related to your stories. 6 | 7 | For example: 8 | 9 | import { Story } from '@storybook/addon-docs'; 10 | 11 | ## Sheet 12 | 13 | Sheet is an hover component used to have a focus-mode like UI for users. 14 | 15 | - [Example](#example) 16 | 17 | ### Example 18 | 19 | 20 | -------------------------------------------------------------------------------- /examples/prebuilt-react-integration/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/notification-manager/managers/utils.ts: -------------------------------------------------------------------------------- 1 | import { HMSRemotePeer } from '../../sdk/models/peer'; 2 | import { Store } from '../../sdk/store'; 3 | import { PeerNotificationInfo } from '../HMSNotifications'; 4 | 5 | export const createRemotePeer = (notifPeer: PeerNotificationInfo, store: Store) => { 6 | return new HMSRemotePeer({ 7 | peerId: notifPeer.peer_id, 8 | name: notifPeer.info.name, 9 | role: store.getPolicyForRole(notifPeer.role), 10 | customerUserId: notifPeer.info.user_id, 11 | metadata: notifPeer.info.data, 12 | groups: notifPeer.groups, 13 | type: notifPeer.info.type, 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/react-icons/src/PinIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPinIcon = (props: SVGProps) => ( 4 | 5 | 12 | 13 | ); 14 | export default SvgPinIcon; 15 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Modal/Dialog.mdx: -------------------------------------------------------------------------------- 1 | # Replacing DocsPage with custom `MDX` content 2 | 3 | This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage). 4 | 5 | It can be further expanded with your own code snippets and include specific information related to your stories. 6 | 7 | For example: 8 | 9 | import { Story } from '@storybook/addon-docs'; 10 | 11 | ## Dialog 12 | 13 | Dialog is an hover component used to have a focus-mode like UI for users. 14 | 15 | - [Example](#example) 16 | 17 | ### Example 18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Toast/Toast.mdx: -------------------------------------------------------------------------------- 1 | # Replacing DocsPage with custom `MDX` content 2 | 3 | This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage). 4 | 5 | It can be further expanded with your own code snippets and include specific information related to your stories. 6 | 7 | For example: 8 | 9 | import { Story } from '@storybook/addon-docs'; 10 | 11 | ## Dialog 12 | 13 | Dialog is an hover component used to have a focus-mode like UI for users. 14 | 15 | - [Example](#example) 16 | 17 | ### Example 18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/react-icons/src/SearchIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgSearchIcon = (props: SVGProps) => ( 4 | 5 | 12 | 13 | ); 14 | export default SvgSearchIcon; 15 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/framework-info.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Used in the user agent sent to INIT, BIZ and in offline cached events. 3 | */ 4 | export interface HMSFrameworkInfo { 5 | type: 'js' | 'react-web'; 6 | /** 7 | * version of the framework being used, that is, version of react 8 | * optional since there's no framework version required for JS SDK usage 9 | */ 10 | version?: string; 11 | /** 12 | * version of the SDK being used, that is, version of hms-video-store or react-sdk 13 | */ 14 | sdkVersion: string; 15 | /** 16 | * true when any Prebuilt Kit on any framework is used 17 | */ 18 | isPrebuilt?: boolean; 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-icons/src/FlutterIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgFlutterIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgFlutterIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/assets/LayoutIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/FigmaIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgFigmaIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgFigmaIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Notifications/DeviceChangeNotifications.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk'; 3 | // @ts-ignore: No implicit Any 4 | import { ToastManager } from '../Toast/ToastManager'; 5 | 6 | export const DeviceChangeNotifications = () => { 7 | const notification = useHMSNotifications(HMSNotificationTypes.DEVICE_CHANGE_UPDATE); 8 | 9 | useEffect(() => { 10 | if (notification) { 11 | ToastManager.addToast({ 12 | title: notification.message, 13 | }); 14 | } 15 | }, [notification]); 16 | 17 | return null; 18 | }; 19 | -------------------------------------------------------------------------------- /packages/react-icons/src/NightIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgNightIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgNightIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/ChevronUpIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgChevronUpIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgChevronUpIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/ClockIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgClockIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgClockIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/assets/CrossIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/QuizIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgQuizIcon = (props: SVGProps) => ( 4 | 5 | 6 | 13 | 14 | ); 15 | export default SvgQuizIcon; 16 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Text/Text.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentMeta, ComponentStory } from '@storybook/react'; 3 | import { Text, textVariants } from './Text'; 4 | 5 | export default { 6 | title: 'UI Components/Text', 7 | component: Text, 8 | argTypes: { 9 | variant: { 10 | control: { 11 | type: 'select', 12 | options: Object.keys(textVariants), 13 | }, 14 | }, 15 | }, 16 | } as ComponentMeta; 17 | 18 | const Template: ComponentStory = args => The Evil Rabbit jumps.; 19 | 20 | export const Playground = Template.bind({}); 21 | Playground.storyName = 'Text'; 22 | -------------------------------------------------------------------------------- /packages/react-icons/src/AddIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgAddIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgAddIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/ChevronDownIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgChevronDownIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgChevronDownIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/ChevronLeftIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgChevronLeftIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgChevronLeftIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/assets/MouseIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/assets/NetworkIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/CheckIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgCheckIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgCheckIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/TranscriptIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgTranscriptIcon = (props: SVGProps) => ( 4 | 5 | 6 | 7 | 8 | 9 | ); 10 | export default SvgTranscriptIcon; 11 | -------------------------------------------------------------------------------- /packages/react-icons/src/UnpinIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgUnpinIcon = (props: SVGProps) => ( 4 | 5 | 12 | 13 | ); 14 | export default SvgUnpinIcon; 15 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/HMSVideo/FullscreenButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons'; 3 | import { Flex, IconButton, Tooltip } from '../../..'; 4 | 5 | export const FullScreenButton = ({ isFullScreen, onToggle }: { isFullScreen: boolean; onToggle: () => void }) => { 6 | return ( 7 | 8 | 9 | {isFullScreen ? : } 10 | 11 | 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/FacebookIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgFacebookIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgFacebookIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/MouseIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgMouseIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgMouseIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/CalculatorIconsIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgCalculatorIconsIcon = (props: SVGProps) => ( 4 | 5 | 12 | 13 | ); 14 | export default SvgCalculatorIconsIcon; 15 | -------------------------------------------------------------------------------- /packages/react-icons/src/DoorIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgDoorIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgDoorIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/PIP/PIPChatOption.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ExternalLinkIcon } from '@100mslive/react-icons'; 3 | import { Dropdown } from '../../../Dropdown'; 4 | import { Text } from '../../../Text'; 5 | 6 | export const PIPChatOption = ({ openChat, showPIPChat }: { openChat: () => void; showPIPChat: boolean }) => { 7 | if (!showPIPChat) { 8 | return <>; 9 | } 10 | return ( 11 | 12 | 13 | 14 | Pop out Chat 15 | 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /packages/react-icons/assets/NoEntryIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/HorizontalMenuIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgHorizontalMenuIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgHorizontalMenuIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/ZoomOutIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgZoomOutIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgZoomOutIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Chat/useUnreadCount.ts: -------------------------------------------------------------------------------- 1 | import { 2 | selectMessagesUnreadCountByPeerID, 3 | selectMessagesUnreadCountByRole, 4 | selectUnreadHMSMessagesCount, 5 | useHMSStore, 6 | } from '@100mslive/react-sdk'; 7 | 8 | export const useUnreadCount = ({ role, peerId }: { role?: string; peerId?: string }) => { 9 | let unreadCountSelector; 10 | if (role) { 11 | unreadCountSelector = selectMessagesUnreadCountByRole(role); 12 | } else if (peerId) { 13 | unreadCountSelector = selectMessagesUnreadCountByPeerID(peerId); 14 | } else { 15 | unreadCountSelector = selectUnreadHMSMessagesCount; 16 | } 17 | 18 | return useHMSStore(unreadCountSelector); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/ShareMenuIcon.jsx: -------------------------------------------------------------------------------- 1 | import { styled } from '../../Theme'; 2 | import IconButton from '../IconButton'; 3 | 4 | export const ScreenShareButton = styled(IconButton, { 5 | h: '$14', 6 | px: '$8', 7 | r: '$1', 8 | borderTopRightRadius: 0, 9 | borderBottomRightRadius: 0, 10 | '@md': { 11 | px: '$4', 12 | mx: 0, 13 | }, 14 | }); 15 | 16 | export const ShareMenuIcon = styled(ScreenShareButton, { 17 | borderTopLeftRadius: 0, 18 | borderBottomLeftRadius: 0, 19 | borderTopRightRadius: '$1', 20 | borderBottomRightRadius: '$1', 21 | borderLeftWidth: 0, 22 | w: '$4', 23 | '@md': { 24 | w: 'unset', 25 | px: '$2', 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /packages/react-icons/assets/FlutterWIthColourIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.github/workflows/sync-alpha-to-main.yml: -------------------------------------------------------------------------------- 1 | name: Update publish-alpha 2 | on: 3 | pull_request: 4 | types: [closed] 5 | branches: 6 | - dev 7 | 8 | jobs: 9 | pull-request: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v4 13 | - name: pull-request 14 | uses: repo-sync/pull-request@v2 15 | if: github.event.pull_request.merged == true 16 | with: 17 | github_token: ${{ secrets.GITHUB_TOKEN }} 18 | source_branch: 'dev' 19 | destination_branch: 'publish-alpha' 20 | pr_title: 'Update publish-alpha' 21 | pr_body: ':robot: Automated PR from dev to publish-alpha' 22 | pr_label: 'auto-pr' 23 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/IconButton.tsx: -------------------------------------------------------------------------------- 1 | import { IconButton as BaseIconButton } from '../IconButton'; 2 | import { styled } from '../Theme'; 3 | 4 | const IconButton = styled(BaseIconButton, { 5 | width: '$14', 6 | height: '$14', 7 | border: '1px solid $border_bright', 8 | bg: '$background_dim', 9 | r: '$1', 10 | '&[disabled]': { 11 | opacity: 0.5, 12 | cursor: 'not-allowed', 13 | backgroundColor: '$secondary_dim', 14 | color: '$on_primary_high', 15 | }, 16 | variants: { 17 | active: { 18 | true: { 19 | color: '$on_surface_high', 20 | backgroundColor: 'transparent', 21 | }, 22 | }, 23 | }, 24 | }); 25 | 26 | export default IconButton; 27 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/schema/device-change.ts: -------------------------------------------------------------------------------- 1 | import { HMSException } from './error'; 2 | import { DeviceMap } from '../interfaces'; 3 | 4 | export type { DeviceMap }; 5 | 6 | /** 7 | * Test fails when adding InputDeviceInfo[error TS2304: Cannot find name 'InputDeviceInfo'.] 8 | * InputDeviceInfo extends MediaDeviceInfo. See https://w3c.github.io/mediacapture-main/#input-specific-device-info 9 | * So, `selection?: MediaDeviceInfo` instead of `selection?: InputDeviceInfo | MediaDeviceInfo` is valid 10 | */ 11 | export interface HMSDeviceChangeEvent { 12 | error?: HMSException; 13 | devices?: DeviceMap; 14 | selection?: Partial; 15 | type: 'audioOutput' | 'audioInput' | 'video'; 16 | } 17 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/transport/models/TransportFailureCategory.ts: -------------------------------------------------------------------------------- 1 | export enum TransportFailureCategory { 2 | ConnectFailed, 3 | SignalDisconnect, 4 | JoinWSMessageFailed, 5 | PublishIceConnectionFailed, 6 | SubscribeIceConnectionFailed, 7 | } 8 | 9 | export const Dependencies = { 10 | [TransportFailureCategory.ConnectFailed]: [], 11 | [TransportFailureCategory.SignalDisconnect]: [], 12 | [TransportFailureCategory.JoinWSMessageFailed]: [TransportFailureCategory.SignalDisconnect], 13 | [TransportFailureCategory.PublishIceConnectionFailed]: [TransportFailureCategory.SignalDisconnect], 14 | [TransportFailureCategory.SubscribeIceConnectionFailed]: [TransportFailureCategory.SignalDisconnect], 15 | }; 16 | -------------------------------------------------------------------------------- /packages/react-icons/src/BookmarkIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgBookmarkIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgBookmarkIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/ForwardIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgForwardIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgForwardIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/LayoutIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgLayoutIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgLayoutIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Chat/MwebChatOption.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Flex } from '../../../Layout'; 3 | import { Text } from '../../../Text'; 4 | 5 | export const MwebChatOption = ({ 6 | icon, 7 | text, 8 | onClick, 9 | color = '$on_surface_high', 10 | }: { 11 | icon: React.ReactNode; 12 | text: string; 13 | onClick: () => void | Promise; 14 | color?: string; 15 | }) => { 16 | return ( 17 | 18 | {icon} 19 | 20 | {text} 21 | 22 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-icons/src/AnnouncementIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgAnnouncementIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgAnnouncementIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/InformationIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgInformationIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgInformationIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/PlayCircleIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPlayCircleIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgPlayCircleIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/SolidCheckCircleIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgSolidCheckCircleIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgSolidCheckCircleIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/assets/AppleIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/VerticalMenuIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgVerticalMenuIcon = (props: SVGProps) => ( 4 | 5 | 10 | 11 | ); 12 | export default SvgVerticalMenuIcon; 13 | -------------------------------------------------------------------------------- /packages/hms-whiteboard/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); 2 | @import url('@tldraw/tldraw/tldraw.css'); 3 | 4 | .tlui-navigation-zone, 5 | .tlui-navigation-panel { 6 | display: none; 7 | } 8 | 9 | .transparent-canvas { 10 | --color-background: rgba(0, 0, 0, 0); 11 | } 12 | 13 | .tl-container { 14 | --layer-background: 4; /* 100 */ 15 | --layer-grid: 5; /* 150 */ 16 | --layer-canvas: 6; /* 200 */ 17 | --layer-shapes: 7; /* 300 */ 18 | --layer-overlays: 8; /* 400 */ 19 | --layer-following-indicator: 12; /* 1000 */ 20 | 21 | --layer-panels: 7; 22 | --layer-menus: 8; 23 | --layer-overlays: 9; 24 | --layer-toasts: 10; 25 | --layer-cursor: 11; 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ActivityIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/ActivityIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgActivityIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgActivityIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/PauseCircleIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPauseCircleIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgPauseCircleIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/CheckCircleIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgCheckCircleIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgCheckCircleIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/CrossIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgCrossIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgCrossIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/ReplyIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgReplyIcon = (props: SVGProps) => ( 4 | 5 | 12 | 19 | 20 | ); 21 | export default SvgReplyIcon; 22 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Chat/StickIndicator.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box, Flex } from '../../../Layout'; 3 | 4 | export const StickIndicator = ({ total, index }: { total: number; index: number }) => { 5 | const sticksCount = Math.min(3, total); 6 | 7 | if (total < 2) { 8 | return null; 9 | } 10 | 11 | return ( 12 | 13 | {[...Array(sticksCount)].map((_, i) => ( 14 | 21 | ))} 22 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Slider/Slider.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentMeta, ComponentStory } from '@storybook/react'; 3 | import { Box } from '..'; 4 | import { Slider } from './Slider'; 5 | 6 | export default { 7 | title: 'UI Components/Slider', 8 | component: Slider, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = () => { 12 | const [volume, setVolume] = React.useState(25); 13 | return ( 14 | 15 | setVolume(e[0])} /> 16 | 17 | ); 18 | }; 19 | 20 | export const Primary = Template.bind({}); 21 | Primary.storyName = 'Slider'; 22 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ReplyGroupIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/react-icons/src/AddCircleIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgAddCircleIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgAddCircleIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/InfoIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgInfoIcon = (props: SVGProps) => ( 4 | 5 | 12 | 13 | ); 14 | export default SvgInfoIcon; 15 | -------------------------------------------------------------------------------- /packages/react-icons/src/ZoomInIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgZoomInIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgZoomInIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Leave/LeaveAtoms.tsx: -------------------------------------------------------------------------------- 1 | import { IconButton } from '../../../IconButton'; 2 | import { styled } from '../../../Theme'; 3 | 4 | export const LeaveIconButton = styled(IconButton, { 5 | color: '$on_primary_high', 6 | h: '$14', 7 | px: '$4', 8 | r: '$1', 9 | bg: '$alert_error_default', 10 | '&:not([disabled]):hover': { 11 | bg: '$alert_error_bright', 12 | }, 13 | '&:not([disabled]):active': { 14 | bg: '$alert_error_default', 15 | }, 16 | '@md': { 17 | mx: 0, 18 | }, 19 | }); 20 | 21 | export const MenuTriggerButton = styled(LeaveIconButton, { 22 | borderLeft: '1px solid $alert_error_dim', 23 | borderTopLeftRadius: 0, 24 | borderBottomLeftRadius: 0, 25 | px: '$2', 26 | }); 27 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/interfaces/change-track-state.ts: -------------------------------------------------------------------------------- 1 | import { HMSRemotePeer } from './peer'; 2 | import { HMSRole } from './role'; 3 | import { HMSLocalTrack, HMSTrackSource } from '../media/tracks'; 4 | 5 | export interface HMSChangeTrackStateRequest { 6 | requestedBy?: HMSRemotePeer; 7 | track: HMSLocalTrack; 8 | enabled: boolean; 9 | } 10 | 11 | export interface HMSChangeMultiTrackStateParams { 12 | enabled: boolean; 13 | roles?: HMSRole[]; 14 | type?: 'audio' | 'video'; 15 | source?: HMSTrackSource; 16 | } 17 | 18 | export interface HMSChangeMultiTrackStateRequest { 19 | requestedBy?: HMSRemotePeer; 20 | tracks: HMSLocalTrack[]; 21 | enabled: boolean; 22 | type?: 'audio' | 'video'; 23 | source?: HMSTrackSource; 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-icons/assets/RejectIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/hms-video-store/jest.config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | transform: { 5 | '^.+\\.tsx?$': [ 6 | 'ts-jest', 7 | { 8 | tsconfig: { 9 | esModuleInterop: true, 10 | }, 11 | }, 12 | ], 13 | }, 14 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], 15 | collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'], 16 | testMatch: ['/src/**/*.(test).{ts,tsx,js,jsx}'], 17 | setupFiles: ['jest-canvas-mock', 'jsdom-worker', '/src/test/setup.ts'], 18 | transformIgnorePatterns: ['node_modules/(?!(uuid)/)'], 19 | moduleNameMapper: { 20 | '^uuid$': require.resolve('uuid'), 21 | }, 22 | }; 23 | 24 | module.exports = config; 25 | -------------------------------------------------------------------------------- /packages/react-icons/src/MaximizeIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgMaximizeIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgMaximizeIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/AppData/useChatState.js: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react'; 2 | import { selectAppData, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; 3 | import { APP_DATA } from '../../common/constants'; 4 | 5 | export const useChatDraftMessage = () => { 6 | const hmsActions = useHMSActions(); 7 | let chatDraftMessage = useHMSStore(selectAppData(APP_DATA.chatDraft)); 8 | if (chatDraftMessage === undefined || chatDraftMessage === null) { 9 | chatDraftMessage = ''; 10 | } 11 | const setDraftMessage = useCallback( 12 | message => { 13 | hmsActions.setAppData(APP_DATA.chatDraft, message, true); 14 | }, 15 | [hmsActions], 16 | ); 17 | return [chatDraftMessage, setDraftMessage]; 18 | }; 19 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/hooks/useAudioOutputTest.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from 'react'; 2 | 3 | export const useAudioOutputTest = ({ deviceId }: { deviceId: string }) => { 4 | const audioRef = useRef(null); 5 | const [playing, setPlaying] = useState(false); 6 | useEffect(() => { 7 | if (audioRef.current && deviceId) { 8 | try { 9 | // @ts-ignore 10 | if (typeof audioRef.current.setSinkId !== 'undefined') { 11 | // @ts-ignore 12 | audioRef.current.setSinkId(deviceId); 13 | } 14 | } catch (error) { 15 | console.log(error); 16 | } 17 | } 18 | }, [deviceId]); 19 | return { playing, setPlaying, audioRef }; 20 | }; 21 | -------------------------------------------------------------------------------- /packages/react-icons/assets/RecordIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/BranchIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgBranchIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgBranchIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/TwitterXIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgTwitterXIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgTwitterXIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { selectPeerScreenSharing, useHMSStore, useWhiteboard } from '@100mslive/react-sdk'; 3 | 4 | /** 5 | * close existing whiteboard when a screen is shared 6 | */ 7 | export const useCloseScreenshareWhiteboard = () => { 8 | const peerSharing = useHMSStore(selectPeerScreenSharing); 9 | const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = useWhiteboard(); 10 | 11 | // if both screenshare and whiteboard are open, close the whiteboard 12 | useEffect(() => { 13 | if (isWhiteboardOwner && peerSharing) { 14 | toggleWhiteboard?.(); 15 | } 16 | }, [isWhiteboardOwner, toggleWhiteboard, peerSharing]); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/media/tracks/index.ts: -------------------------------------------------------------------------------- 1 | import { HMSLocalAudioTrack } from './HMSLocalAudioTrack'; 2 | import { HMSLocalVideoTrack } from './HMSLocalVideoTrack'; 3 | import { HMSRemoteAudioTrack } from './HMSRemoteAudioTrack'; 4 | import { HMSRemoteVideoTrack } from './HMSRemoteVideoTrack'; 5 | 6 | export type HMSRemoteTrack = HMSRemoteAudioTrack | HMSRemoteVideoTrack; 7 | export type HMSLocalTrack = HMSLocalAudioTrack | HMSLocalVideoTrack; 8 | 9 | export * from './HMSTrack'; 10 | export * from './HMSAudioTrack'; 11 | export * from './HMSLocalAudioTrack'; 12 | export * from './HMSRemoteAudioTrack'; 13 | export * from './HMSVideoTrack'; 14 | export * from './HMSLocalVideoTrack'; 15 | export * from './HMSRemoteVideoTrack'; 16 | export * from './HMSTrackType'; 17 | -------------------------------------------------------------------------------- /packages/react-icons/src/CropIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgCropIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgCropIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/PersonIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPersonIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgPersonIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/RecordIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgRecordIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgRecordIcon; 12 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons'; 3 | import { IconButton, Tooltip } from '../../../'; 4 | import { useHMSPlayerContext } from './PlayerContext'; 5 | 6 | export function HLSCaptionSelector({ isEnabled }: { isEnabled: boolean }) { 7 | const { hlsPlayer } = useHMSPlayerContext(); 8 | return ( 9 | 10 | hlsPlayer?.toggleCaption()}> 11 | {isEnabled ? : } 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-icons/assets/HamburgerMenuIcon.svg: -------------------------------------------------------------------------------- 1 | 8 | 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/ZapIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgZapIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgZapIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/FullPageProgress.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Flex } from '../../Layout'; 3 | import { Loading } from '../../Loading'; 4 | import { Text } from '../../Text'; 5 | import { CSS } from '../../Theme'; 6 | 7 | const FullPageProgress = ({ 8 | loaderColor = '$primary_default', 9 | text = '', 10 | css = {}, 11 | }: { 12 | loaderColor?: string; 13 | text?: string; 14 | css?: CSS; 15 | }) => ( 16 | 17 | 18 | {text ? {text} : null} 19 | 20 | ); 21 | 22 | export default FullPageProgress; 23 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ReplyIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/react-icons/src/ArrowRightIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgArrowRightIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgArrowRightIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/FilterOneIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgFilterOneIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgFilterOneIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/TargetIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgTargetIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgTargetIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Video/UseVideo.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useVideo } from '@100mslive/react-sdk'; 3 | import UseVideoDocs from './UseVideo.mdx'; 4 | import { StyledVideo } from './Video'; 5 | 6 | const VideoHook = () => { 7 | const { videoRef } = useVideo({ 8 | trackId: '1', 9 | }); 10 | return ; 11 | }; 12 | 13 | const VideoStories = { 14 | title: 'Rendering Video/useVideo hook', 15 | component: VideoHook, 16 | // More on argTypes: https://storybook.js.org/docs/react/api/argtypes 17 | parameters: { 18 | docs: { 19 | page: UseVideoDocs, 20 | }, 21 | }, 22 | }; 23 | 24 | export default VideoStories; 25 | 26 | export const UseVideoHook = VideoHook.bind({}); 27 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ClockIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/assets/FilterOneIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/assets/PlayIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/AwardIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgAwardIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgAwardIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Polls/common/utils.ts: -------------------------------------------------------------------------------- 1 | export const getFormattedTime = (milliseconds: number | undefined, precise = true) => { 2 | if (!milliseconds) return '-'; 3 | 4 | const totalSeconds = milliseconds / 1000; 5 | const hours = Math.floor(totalSeconds / 3600); 6 | const minutes = Math.floor((totalSeconds % 3600) / 60); 7 | const seconds = totalSeconds % 60; 8 | 9 | let formattedTime = ''; 10 | if (hours) { 11 | formattedTime += `${hours}h `; 12 | } 13 | if (minutes || hours) { 14 | formattedTime += `${minutes}m `; 15 | } 16 | if (!precise && (hours || minutes)) { 17 | return formattedTime; 18 | } 19 | formattedTime += `${precise ? seconds.toFixed(3) : Math.floor(seconds)}s`; 20 | 21 | return formattedTime; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/react-icons/assets/ArrowRightIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/react-icons/src/AppleIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgAppleIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgAppleIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/PeopleRemoveIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPeopleRemoveIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgPeopleRemoveIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/PlayIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgPlayIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgPlayIcon; 12 | -------------------------------------------------------------------------------- /packages/hms-whiteboard/src/utils.ts: -------------------------------------------------------------------------------- 1 | export default function decodeJWT(token?: string) { 2 | if (!token || token.length === 0) { 3 | throw Error('Token cannot be an empty string or undefined or null'); 4 | } 5 | 6 | const parts = token.split('.'); 7 | if (parts.length !== 3) { 8 | throw Error(`Expected 3 '.' separate fields - header, payload and signature respectively`); 9 | } 10 | 11 | const payloadStr = atob(parts[1]); 12 | try { 13 | return JSON.parse(payloadStr); 14 | } catch (err) { 15 | throw Error(`couldn't parse to json - ${(err as Error).message}`); 16 | } 17 | } 18 | 19 | export const CURRENT_PAGE_KEY = 'currentPage'; 20 | export const SHAPES_THROTTLE_TIME = 11; 21 | export const PAGES_DEBOUNCE_TIME = 200; 22 | export const OPEN_WAIT_TIMEOUT = 1000; 23 | -------------------------------------------------------------------------------- /packages/react-icons/src/AddSolidIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgAddSolidIcon = (props: SVGProps) => ( 4 | 5 | 9 | 10 | ); 11 | export default SvgAddSolidIcon; 12 | -------------------------------------------------------------------------------- /packages/react-icons/src/JoinIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgJoinIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgJoinIcon; 14 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/sdk/models/peer/HMSRemotePeer.ts: -------------------------------------------------------------------------------- 1 | import { HMSPeer, HMSPeerInit } from './HMSPeer'; 2 | import { HMSRemotePeer as IHMSRemotePeer } from '../../../interfaces/peer'; 3 | import { HMSRemoteAudioTrack, HMSRemoteTrack, HMSRemoteVideoTrack } from '../../../media/tracks'; 4 | 5 | type HMSRemotePeerInit = Omit; 6 | 7 | export class HMSRemotePeer extends HMSPeer implements IHMSRemotePeer { 8 | isLocal = false; 9 | declare audioTrack?: HMSRemoteAudioTrack; 10 | declare videoTrack?: HMSRemoteVideoTrack; 11 | auxiliaryTracks: HMSRemoteTrack[] = []; 12 | fromRoomState = false; 13 | 14 | constructor(peerData: HMSRemotePeerInit) { 15 | super({ ...peerData, isLocal: false }); 16 | this.fromRoomState = !!peerData.fromRoomState; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/hms-video-store/src/utils/queue.ts: -------------------------------------------------------------------------------- 1 | export interface IQueue { 2 | size(): number; 3 | enqueue(item: T): void; 4 | dequeue(): T | undefined; 5 | } 6 | 7 | export class Queue implements IQueue { 8 | protected storage: T[] = []; 9 | 10 | constructor(private capacity: number = Infinity) {} 11 | 12 | size() { 13 | return this.storage.length; 14 | } 15 | 16 | toList() { 17 | return this.storage.slice(0); 18 | } 19 | 20 | enqueue(item: T) { 21 | if (this.size() === this.capacity) { 22 | this.dequeue(); 23 | } 24 | this.storage.push(item); 25 | } 26 | 27 | dequeue() { 28 | return this.storage.shift(); 29 | } 30 | 31 | aggregate(aggregationFn: (values: T[]) => R): R { 32 | return aggregationFn(this.storage); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/react-icons/src/GridFourIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgGridFourIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgGridFourIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/SaveIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgSaveIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgSaveIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/UploadIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgUploadIcon = (props: SVGProps) => ( 4 | 5 | 12 | 19 | 20 | ); 21 | export default SvgUploadIcon; 22 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Input/Input.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentMeta, ComponentStory } from '@storybook/react'; 3 | import { Input } from '.'; 4 | 5 | export default { 6 | title: 'UI Components/Input', 7 | component: Input, 8 | argTypes: { 9 | ref: { table: { disable: true } }, 10 | as: { table: { disable: true } }, 11 | placeholder: { control: { type: 'text' } }, 12 | error: { control: { type: 'boolean' } }, 13 | }, 14 | args: { 15 | error: false, 16 | placeholder: 'This is a placeholder', 17 | }, 18 | } as ComponentMeta; 19 | 20 | const Template: ComponentStory = args => { 21 | return ; 22 | }; 23 | 24 | export const Example = Template.bind({}); 25 | Example.storyName = 'Input'; 26 | -------------------------------------------------------------------------------- /packages/react-icons/assets/PeopleIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/react-icons/src/ArrowTopDownIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgArrowTopDownIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgArrowTopDownIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/MinimizeIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgMinimizeIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgMinimizeIcon; 14 | -------------------------------------------------------------------------------- /packages/react-icons/src/SendIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgSendIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgSendIcon; 14 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ExpandIcon } from '@100mslive/react-icons'; 3 | import { Dropdown, Text } from '../../..'; 4 | import { useFullscreen } from '../hooks/useFullscreen'; 5 | 6 | export const FullScreenItem = () => { 7 | const { allowed, isFullscreen, toggleFullscreen } = useFullscreen(); 8 | 9 | if (!allowed) { 10 | return null; 11 | } 12 | 13 | return ( 14 | { 16 | toggleFullscreen(); 17 | }} 18 | data-testid="full_screen_btn" 19 | > 20 | 21 | 22 | {isFullscreen ? 'Exit ' : 'Go '}Fullscreen 23 | 24 | 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /packages/roomkit-react/src/Prebuilt/components/Polls/Voting/StatisticBox.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box } from '../../../../Layout'; 3 | import { Text } from '../../../../Text'; 4 | 5 | export const StatisticBox = ({ title, value = 0 }: { title: string; value: string | number | undefined }) => { 6 | if (!value && !(typeof value === 'number')) { 7 | return <>; 8 | } 9 | return ( 10 | 11 | 15 | {title} 16 | 17 | {value} 18 | 19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /packages/react-icons/src/CrossCircleIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SVGProps } from 'react'; 3 | const SvgCrossCircleIcon = (props: SVGProps) => ( 4 | 5 | 11 | 12 | ); 13 | export default SvgCrossCircleIcon; 14 | --------------------------------------------------------------------------------