From e5ed01ee5392a91f7564a7e4f8456d5b034037c7 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Thu, 9 May 2024 01:03:03 +0530 Subject: [PATCH 01/18] feat: start/stop events for transcriptions --- packages/hms-video-store/src/IHMSActions.ts | 13 +++++++ .../hms-video-store/src/interfaces/hms.ts | 3 ++ .../hms-video-store/src/interfaces/index.ts | 1 + .../hms-video-store/src/interfaces/room.ts | 5 +++ .../src/interfaces/transcription-config.ts | 5 +++ .../src/interfaces/update-listener.ts | 1 + .../HMSNotificationMethod.ts | 1 + .../notification-manager/HMSNotifications.ts | 6 ++++ .../managers/RoomUpdateManager.ts | 20 ++++++++++- .../src/reactive-store/HMSSDKActions.ts | 8 +++++ .../src/reactive-store/adapter.ts | 4 ++- packages/hms-video-store/src/sdk/index.ts | 35 ++++++++++++++++++- .../src/signal/interfaces/superpowers.ts | 5 ++- .../src/signal/jsonrpc/index.ts | 9 +++++ .../src/signal/jsonrpc/models.ts | 2 ++ 15 files changed, 114 insertions(+), 4 deletions(-) create mode 100644 packages/hms-video-store/src/interfaces/transcription-config.ts diff --git a/packages/hms-video-store/src/IHMSActions.ts b/packages/hms-video-store/src/IHMSActions.ts index ccdd3635f4..625903f109 100644 --- a/packages/hms-video-store/src/IHMSActions.ts +++ b/packages/hms-video-store/src/IHMSActions.ts @@ -1,3 +1,4 @@ +import { TranscriptionConfig } from './interfaces/transcription-config'; import { HLSConfig, HLSTimedMetadata, @@ -371,6 +372,18 @@ export interface IHMSActions; + /** + * If you want to start transcriptions(Closed Caption). + * @param params.mode This is the mode which represent the type of transcription. Currently we have Caption mode only + */ + startTranscription(params: TranscriptionConfig): Promise; + + /** + * If you want to stop transcriptions(Closed Caption). + * @param params.mode This is the mode which represent the type of transcription you want to stop. Currently we have Caption mode only + */ + stopTranscription(params: TranscriptionConfig): Promise; + /** * @alpha * Used to define date range metadata in a media playlist. diff --git a/packages/hms-video-store/src/interfaces/hms.ts b/packages/hms-video-store/src/interfaces/hms.ts index 22bfe25ebc..14b983ab6c 100644 --- a/packages/hms-video-store/src/interfaces/hms.ts +++ b/packages/hms-video-store/src/interfaces/hms.ts @@ -12,6 +12,7 @@ import { HMSHLS, HMSRecording, HMSRTMP, HMSTranscriptionInfo } from './room'; import { RTMPRecordingConfig } from './rtmp-recording-config'; import { HMSInteractivityCenter, HMSSessionStore } from './session-store'; import { HMSScreenShareConfig } from './track-settings'; +import { TranscriptionConfig } from './transcription-config'; import { HMSAudioListener, HMSConnectionQualityListener, HMSUpdateListener } from './update-listener'; import { HMSAnalyticsLevel } from '../analytics/AnalyticsEventLevel'; import { IAudioOutputManager } from '../device-manager/AudioOutputManager'; @@ -61,6 +62,8 @@ export interface HMSInterface { */ startHLSStreaming(params?: HLSConfig): Promise; stopHLSStreaming(params?: HLSConfig): Promise; + startTranscription(params: TranscriptionConfig): Promise; + stopTranscription(params: TranscriptionConfig): Promise; getRecordingState(): HMSRecording | undefined; getRTMPState(): HMSRTMP | undefined; getHLSState(): HMSHLS | undefined; diff --git a/packages/hms-video-store/src/interfaces/index.ts b/packages/hms-video-store/src/interfaces/index.ts index 8bfb7576e5..f18940854f 100644 --- a/packages/hms-video-store/src/interfaces/index.ts +++ b/packages/hms-video-store/src/interfaces/index.ts @@ -19,3 +19,4 @@ export * from './webrtc-stats'; export * from './framework-info'; export * from './get-token'; export * from './session-store'; +export * from './transcription-config'; diff --git a/packages/hms-video-store/src/interfaces/room.ts b/packages/hms-video-store/src/interfaces/room.ts index 66c06dc19b..a67204ccde 100644 --- a/packages/hms-video-store/src/interfaces/room.ts +++ b/packages/hms-video-store/src/interfaces/room.ts @@ -133,4 +133,9 @@ export enum HMSTranscriptionMode { export interface HMSTranscriptionInfo { state?: HMSTranscriptionState; mode?: HMSTranscriptionMode; + initialised_at?: Date; + started_at?: Date; + updated_at?: Date; + stopped_at?: Date; + error?: HMSException; } diff --git a/packages/hms-video-store/src/interfaces/transcription-config.ts b/packages/hms-video-store/src/interfaces/transcription-config.ts new file mode 100644 index 0000000000..9294bfc851 --- /dev/null +++ b/packages/hms-video-store/src/interfaces/transcription-config.ts @@ -0,0 +1,5 @@ +import { HMSTranscriptionMode } from './room'; + +export interface TranscriptionConfig { + mode: HMSTranscriptionMode; +} diff --git a/packages/hms-video-store/src/interfaces/update-listener.ts b/packages/hms-video-store/src/interfaces/update-listener.ts index c870e29fec..ef1b385dc2 100644 --- a/packages/hms-video-store/src/interfaces/update-listener.ts +++ b/packages/hms-video-store/src/interfaces/update-listener.ts @@ -17,6 +17,7 @@ export enum HMSRoomUpdate { SERVER_RECORDING_STATE_UPDATED = 'SERVER_RECORDING_STATE_UPDATED', RTMP_STREAMING_STATE_UPDATED = 'RTMP_STREAMING_STATE_UPDATED', HLS_STREAMING_STATE_UPDATED = 'HLS_STREAMING_STATE_UPDATED', + TRANSCRIPTION_STATE_UPDATED = 'TRANSCRIPTION_STATE_UPDATED', ROOM_PEER_COUNT_UPDATED = 'ROOM_PEER_COUNT_UPDATED', } diff --git a/packages/hms-video-store/src/notification-manager/HMSNotificationMethod.ts b/packages/hms-video-store/src/notification-manager/HMSNotificationMethod.ts index 72c5d06921..28616e29da 100644 --- a/packages/hms-video-store/src/notification-manager/HMSNotificationMethod.ts +++ b/packages/hms-video-store/src/notification-manager/HMSNotificationMethod.ts @@ -28,6 +28,7 @@ export enum HMSNotificationMethod { RTMP_UPDATE = 'on-rtmp-update', RECORDING_UPDATE = 'on-record-update', HLS_UPDATE = 'on-hls-update', + TRANSCRIPTION_UPDATE = 'on-transcription-update', METADATA_CHANGE = 'on-metadata-change', POLL_START = 'on-poll-start', POLL_STOP = 'on-poll-stop', diff --git a/packages/hms-video-store/src/notification-manager/HMSNotifications.ts b/packages/hms-video-store/src/notification-manager/HMSNotifications.ts index 8130e93e2d..a30e663cbb 100644 --- a/packages/hms-video-store/src/notification-manager/HMSNotifications.ts +++ b/packages/hms-video-store/src/notification-manager/HMSNotifications.ts @@ -133,6 +133,12 @@ export interface PeerNotification { export interface TranscriptionNotification { state?: HMSTranscriptionState; mode?: HMSTranscriptionMode; + initialised_at?: number; + started_at?: number; + updated_at?: number; + stopped_at?: number; + peer?: PeerNotificationInfo; + error?: ServerError; } export interface RoomState { diff --git a/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts b/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts index 7f4c42b86b..f12733bee6 100644 --- a/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts +++ b/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts @@ -59,6 +59,9 @@ export class RoomUpdateManager { case HMSNotificationMethod.HLS_UPDATE: this.updateHLSStatus(notification as HLSNotification); break; + case HMSNotificationMethod.TRANSCRIPTION_UPDATE: + this.handleTranscriptionStatus([notification as TranscriptionNotification]); + break; default: break; } @@ -125,12 +128,18 @@ export class RoomUpdateManager { if (!transcriptions) { return []; } - return transcriptions.map((transcription: TranscriptionNotification) => { + const output = transcriptions.map((transcription: TranscriptionNotification) => { return { state: transcription.state, mode: transcription.mode, + initialised_at: convertDateNumToDate(transcription.initialised_at), + started_at: convertDateNumToDate(transcription.started_at), + stopped_at: convertDateNumToDate(transcription.stopped_at), + updated_at: convertDateNumToDate(transcription.updated_at), + error: this.toSdkError(transcription?.error), }; }); + return output; } private isRecordingRunning(state?: HMSRecordingState): boolean { if (!state) { @@ -200,6 +209,15 @@ export class RoomUpdateManager { this.listener?.onRoomUpdate(HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED, room); } + private handleTranscriptionStatus(notification: TranscriptionNotification[]) { + const room = this.store.getRoom(); + if (!room) { + HMSLogger.w(this.TAG, 'on transcription - room not present'); + return; + } + room.transcriptions = this.addTranscriptionDetail(notification) || []; + this.listener?.onRoomUpdate(HMSRoomUpdate.TRANSCRIPTION_STATE_UPDATED, room); + } private convertHls(hlsNotification?: HLSNotification) { const isInitialised = hlsNotification?.variants && hlsNotification.variants.length > 0 diff --git a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts index 57db483bad..fdc550e98a 100644 --- a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts +++ b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts @@ -701,6 +701,14 @@ export class HMSSDKActions { + await this.sdk.stopTranscription(params); + } + async sendHLSTimedMetadata(metadataList: sdkTypes.HLSTimedMetadata[]): Promise { await this.sdk.sendHLSTimedMetadata(metadataList); } diff --git a/packages/hms-video-store/src/reactive-store/adapter.ts b/packages/hms-video-store/src/reactive-store/adapter.ts index d16e75e830..84f84fb946 100644 --- a/packages/hms-video-store/src/reactive-store/adapter.ts +++ b/packages/hms-video-store/src/reactive-store/adapter.ts @@ -139,10 +139,11 @@ export class SDKToHMS { } static convertRoom(sdkRoom: sdkTypes.HMSRoom, sdkLocalPeerId?: string): Partial { - const { recording, rtmp, hls } = SDKToHMS.convertRecordingStreamingState( + const { recording, rtmp, hls, transcriptions } = SDKToHMS.convertRecordingStreamingState( sdkRoom?.recording, sdkRoom?.rtmp, sdkRoom?.hls, + sdkRoom?.transcriptions, ); return { id: sdkRoom.id, @@ -151,6 +152,7 @@ export class SDKToHMS { recording, rtmp, hls, + transcriptions, sessionId: sdkRoom.sessionId, startedAt: sdkRoom.startedAt, joinedAt: sdkRoom.joinedAt, diff --git a/packages/hms-video-store/src/sdk/index.ts b/packages/hms-video-store/src/sdk/index.ts index a89e83fa72..1110e4a4b1 100644 --- a/packages/hms-video-store/src/sdk/index.ts +++ b/packages/hms-video-store/src/sdk/index.ts @@ -48,7 +48,7 @@ import { HMSPreviewListener } from '../interfaces/preview-listener'; import { RTMPRecordingConfig } from '../interfaces/rtmp-recording-config'; import InitialSettings from '../interfaces/settings'; import { HMSAudioListener, HMSPeerUpdate, HMSTrackUpdate, HMSUpdateListener } from '../interfaces/update-listener'; -import { PlaylistManager } from '../internal'; +import { PlaylistManager, TranscriptionConfig } from '../internal'; import { HMSLocalStream } from '../media/streams/HMSLocalStream'; import { HMSLocalAudioTrack, @@ -70,6 +70,7 @@ import { HLSTimedMetadataParams, HLSVariant, StartRTMPOrRecordingRequestParams, + StartTranscriptionRequestParams, } from '../signal/interfaces'; import HMSTransport from '../transport'; import ITransportObserver from '../transport/ITransportObserver'; @@ -1010,6 +1011,38 @@ export class HMSSdk implements HMSInterface { await this.transport?.signal.stopHLSStreaming(); } + async startTranscription(params?: TranscriptionConfig) { + if (!this.localPeer) { + throw ErrorFactory.GenericErrors.NotConnected( + HMSAction.VALIDATION, + 'No local peer present, cannot start HLS streaming', + ); + } + if (!params) { + throw ErrorFactory.GenericErrors.Signalling(HMSAction.VALIDATION, 'No mode is passed to start the transcription'); + } + const transcriptionParams: StartTranscriptionRequestParams = { + mode: params.mode, + }; + await this.transport?.signal.startTranscription(transcriptionParams); + } + + async stopTranscription(params?: TranscriptionConfig) { + if (!this.localPeer) { + throw ErrorFactory.GenericErrors.NotConnected( + HMSAction.VALIDATION, + 'No local peer present, cannot stop HLS streaming', + ); + } + if (!params) { + throw ErrorFactory.GenericErrors.Signalling(HMSAction.VALIDATION, 'No mode is passed to stop the transcription'); + } + const transcriptionParams: StartTranscriptionRequestParams = { + mode: params.mode, + }; + await this.transport?.signal.stopTranscription(transcriptionParams); + } + async sendHLSTimedMetadata(metadataList: HLSTimedMetadata[]) { this.validateJoined('sendHLSTimedMetadata'); if (metadataList.length > 0) { diff --git a/packages/hms-video-store/src/signal/interfaces/superpowers.ts b/packages/hms-video-store/src/signal/interfaces/superpowers.ts index b96e5661bb..a72c602f0a 100644 --- a/packages/hms-video-store/src/signal/interfaces/superpowers.ts +++ b/packages/hms-video-store/src/signal/interfaces/superpowers.ts @@ -1,4 +1,4 @@ -import { HMSTrackSource } from '../..'; +import { HMSTrackSource, HMSTranscriptionMode } from '../..'; import { HLSTimedMetadata, RTMPRecordingResolution } from '../../interfaces'; /** @@ -57,6 +57,9 @@ export interface UpdatePeerRequestParams { data?: string; } +export interface StartTranscriptionRequestParams { + mode: HMSTranscriptionMode; +} export interface SetSessionMetadataParams { key?: string; data: any; diff --git a/packages/hms-video-store/src/signal/jsonrpc/index.ts b/packages/hms-video-store/src/signal/jsonrpc/index.ts index 014f725e43..a96909343d 100644 --- a/packages/hms-video-store/src/signal/jsonrpc/index.ts +++ b/packages/hms-video-store/src/signal/jsonrpc/index.ts @@ -60,6 +60,7 @@ import { SetSessionMetadataParams, SetSessionMetadataResponse, StartRTMPOrRecordingRequestParams, + StartTranscriptionRequestParams, Track, TrackUpdateRequestParams, UpdatePeerRequestParams, @@ -364,6 +365,14 @@ export default class JsonRpcSignal { await this.call(HMSSignalMethod.STOP_HLS_STREAMING, { ...params }); } + async startTranscription(params: StartTranscriptionRequestParams) { + await this.call(HMSSignalMethod.START_TRANSCRIPTION, { ...params }); + } + + async stopTranscription(params: StartTranscriptionRequestParams) { + await this.call(HMSSignalMethod.STOP_TRANSCRIPTION, { ...params }); + } + async sendHLSTimedMetadata(params?: HLSTimedMetadataParams): Promise { await this.call(HMSSignalMethod.HLS_TIMED_METADATA, { ...params }); } diff --git a/packages/hms-video-store/src/signal/jsonrpc/models.ts b/packages/hms-video-store/src/signal/jsonrpc/models.ts index 2344ec3e70..51f01d828a 100644 --- a/packages/hms-video-store/src/signal/jsonrpc/models.ts +++ b/packages/hms-video-store/src/signal/jsonrpc/models.ts @@ -39,6 +39,8 @@ export enum HMSSignalMethod { UPDATE_PEER_METADATA = 'peer-update', START_HLS_STREAMING = 'hls-start', STOP_HLS_STREAMING = 'hls-stop', + START_TRANSCRIPTION = 'transcription-start', + STOP_TRANSCRIPTION = 'transcription-stop', HLS_TIMED_METADATA = 'hls-timed-metadata', SET_METADATA = 'set-metadata', GET_METADATA = 'get-metadata', From 8ad774011bf4b3321868dd33e02a52049413c02f Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 14 May 2024 10:24:11 +0530 Subject: [PATCH 02/18] feat: start/stop ui for transcription --- .../MoreSettings/AdminCaptionContent.tsx | 85 +++++++++++++++++++ .../MoreSettings/AdminCaptionModal.tsx | 45 ++++++++++ .../SplitComponents/DesktopOptions.tsx | 53 +++++++++++- .../SplitComponents/MwebOptions.tsx | 37 +++++++- 4 files changed, 213 insertions(+), 7 deletions(-) create mode 100644 packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx create mode 100644 packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionModal.tsx diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx new file mode 100644 index 0000000000..0c8f1e7fae --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; +import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons'; +import { Button } from '../../../Button'; +import { Box, Flex } from '../../../Layout'; +import { Text } from '../../../Text'; + +export const AdminCaptionContent = ({ + isMobile, + onExit, + onBackClick, +}: { + isMobile: boolean; + onExit: () => void; + onBackClick: () => void; +}) => { + const actions = useHMSActions(); + const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); + + return ( + <> + + {isMobile ? : null} + {isCaptionEnabled ? 'Disable' : 'Enable'} Closed Caption (CC) for this session? + + + + + + This will {isCaptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You can + {isCaptionEnabled ? 'enable' : 'disable'} it later. + + + + {isMobile ? null : ( + + )} + + + + + ); +}; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionModal.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionModal.tsx new file mode 100644 index 0000000000..d6b548e273 --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionModal.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { useMedia } from 'react-use'; +import { config as cssConfig, Dialog } from '../../..'; +import { Sheet } from '../../../Sheet'; +import { AdminCaptionContent } from './AdminCaptionContent'; + +export const AdminCaptionModal = ({ + onOpenChange, + openParentSheet = undefined, +}: { + onOpenChange: (value: boolean) => void; + openParentSheet?: () => void; +}) => { + const isMobile = useMedia(cssConfig.media.md); + + const props = { + isMobile, + onExit: () => onOpenChange(false), + onBackClick: () => { + onOpenChange(false); + openParentSheet?.(); + }, + }; + + if (isMobile) { + return ( + + + + + + ); + } + + return ( + + + + + + + + + ); +}; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx index 49ea2c01de..0acd0eeb36 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useState } from 'react'; +import React, { Fragment, useEffect, useState } from 'react'; import { HMSHLSPlayer } from '@100mslive/hls-player'; import { ConferencingScreen, @@ -6,9 +6,23 @@ import { HLSLiveStreamingScreen_Elements, } from '@100mslive/types-prebuilt'; import { match } from 'ts-pattern'; -import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; -import { BrbIcon, CheckIcon, HamburgerMenuIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons'; -import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..'; +import { + selectAppData, + selectIsTranscriptionEnabled, + selectLocalPeerID, + useHMSActions, + useHMSStore, +} from '@100mslive/react-sdk'; +import { + BrbIcon, + CheckIcon, + HamburgerMenuIcon, + InfoIcon, + OpenCaptionIcon, + PipIcon, + SettingsIcon, +} from '@100mslive/react-icons'; +import { Checkbox, Dropdown, Flex, Switch, Text, Tooltip } from '../../../..'; import IconButton from '../../../IconButton'; // @ts-ignore: No implicit any import { PIP } from '../../PIP'; @@ -22,6 +36,7 @@ import SettingsModal from '../../Settings/SettingsModal'; import StartRecording from '../../Settings/StartRecording'; // @ts-ignore: No implicit any import { StatsForNerds } from '../../StatsForNerds'; +import { AdminCaptionModal } from '../AdminCaptionModal'; // @ts-ignore: No implicit any import { BulkRoleChangeModal } from '../BulkRoleChangeModal'; // @ts-ignore: No implicit any @@ -43,6 +58,7 @@ const MODALS = { BULK_ROLE_CHANGE: 'bulkRoleChange', MUTE_ALL: 'muteAll', EMBED_URL: 'embedUrl', + ADMIN_CAPTION: 'adminCaption', }; export const DesktopOptions = ({ @@ -59,9 +75,16 @@ export const DesktopOptions = ({ const { isBRBOn, toggleBRB } = useMyMetadata(); const isPipOn = PictureInPicture.isOn(); const isBRBEnabled = !!elements?.brb; + const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); + + const [adminCaptionEnabled, setAdminCaptionEnabled] = useState(false); useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' }); + useEffect(() => { + setAdminCaptionEnabled(isCaptionEnabled); + }, [isCaptionEnabled]); + const updateState = (modalName: string, value: boolean) => { setOpenModals(modals => { const copy = new Set(modals); @@ -115,6 +138,25 @@ export const DesktopOptions = ({ ) : null} + { + updateState(MODALS.ADMIN_CAPTION, true); + }} + > + + + Closed Caption + + { + setAdminCaptionEnabled(value); + }} + /> + {screenType !== 'hls_live_streaming' ? ( updateState(MODALS.SELF_ROLE_CHANGE, value)} /> )} + {openModals.has(MODALS.ADMIN_CAPTION) && ( + updateState(MODALS.ADMIN_CAPTION, value)} /> + )} {/* {openModals.has(MODALS.EMBED_URL) && ( updateState(MODALS.EMBED_URL, value)} /> )} */} diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index bf13d19d50..49a4a84e48 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useClickAway } from 'react-use'; import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt'; import { match } from 'ts-pattern'; @@ -29,7 +29,7 @@ import { SettingsIcon, VirtualBackgroundIcon, } from '@100mslive/react-icons'; -import { Box, Loading, Tooltip } from '../../../..'; +import { Box, Loading, Switch, Text, Tooltip } from '../../../..'; import { Sheet } from '../../../../Sheet'; // @ts-ignore: No implicit any import IconButton from '../../../IconButton'; @@ -43,6 +43,7 @@ import SettingsModal from '../../Settings/SettingsModal'; import { ToastManager } from '../../Toast/ToastManager'; // @ts-ignore: No implicit any import { ActionTile } from '../ActionTile'; +import { AdminCaptionModal } from '../AdminCaptionModal'; // @ts-ignore: No implicit any import { ChangeNameModal } from '../ChangeNameModal'; // @ts-ignore: No implicit any @@ -73,6 +74,7 @@ const MODALS = { BULK_ROLE_CHANGE: 'bulkRoleChange', MUTE_ALL: 'muteAll', EMBED_URL: 'embedUrl', + ADMIN_CAPTION: 'adminCaption', }; export const MwebOptions = ({ @@ -111,6 +113,12 @@ export const MwebOptions = ({ const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled(); useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' }); + const [adminCaptionEnabled, setAdminCaptionEnabled] = useState(false); + + useEffect(() => { + setAdminCaptionEnabled(isCaptionPresent); + }, [isCaptionPresent]); + const updateState = (modalName: string, value: boolean) => { setOpenModals(modals => { const copy = new Set(modals); @@ -193,6 +201,24 @@ export const MwebOptions = ({ {isHandRaised ? 'Lower' : 'Raise'} Hand ) : null} + { + updateState(MODALS.ADMIN_CAPTION, true); + }} + > + + + Closed Caption + + { + setAdminCaptionEnabled(value); + }} + /> + {isCaptionPresent && screenType !== 'hls_live_streaming' ? ( { @@ -323,7 +349,12 @@ export const MwebOptions = ({ openParentSheet={() => setOpenOptionsSheet(true)} /> )} - + {openModals.has(MODALS.ADMIN_CAPTION) && ( + updateState(MODALS.ADMIN_CAPTION, value)} + openParentSheet={() => setOpenOptionsSheet(true)} + /> + )} {showEmojiCard && ( Date: Wed, 15 May 2024 11:53:30 +0530 Subject: [PATCH 03/18] fix: added qa --- examples/prebuilt-react-integration/src/App.jsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/examples/prebuilt-react-integration/src/App.jsx b/examples/prebuilt-react-integration/src/App.jsx index e49ddcb9b1..062f3f4739 100644 --- a/examples/prebuilt-react-integration/src/App.jsx +++ b/examples/prebuilt-react-integration/src/App.jsx @@ -4,5 +4,16 @@ import { getRoomCodeFromUrl } from './utils'; export default function App() { const roomCode = getRoomCodeFromUrl(); - return ; + return ( + + ); } From 27c099fe7075a2d3d6ea6fdfe81acd23c5ecae31 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Fri, 17 May 2024 09:13:29 +0530 Subject: [PATCH 04/18] fix: added loading toast --- .../src/selectors/selectors.ts | 1 + .../MoreSettings/AdminCaptionContent.tsx | 47 +++++++++++++++++-- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/packages/hms-video-store/src/selectors/selectors.ts b/packages/hms-video-store/src/selectors/selectors.ts index ce91647ea6..fb276ff10c 100644 --- a/packages/hms-video-store/src/selectors/selectors.ts +++ b/packages/hms-video-store/src/selectors/selectors.ts @@ -452,6 +452,7 @@ export const selectPermissions = createSelector(selectLocalPeerRole, role => rol export const selectRecordingState = createSelector(selectRoom, room => room.recording); export const selectRTMPState = createSelector(selectRoom, room => room.rtmp); export const selectHLSState = createSelector(selectRoom, room => room.hls); +export const selectTranscriptionsState = createSelector(selectRoom, room => room.transcriptions); export const selectSessionId = createSelector(selectRoom, room => room.sessionId); export const selectRoomStartTime = createSelector(selectRoom, room => room.startedAt); export const selectIsLargeRoom = createSelector(selectRoom, room => !!room.isLargeRoom); diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx index 0c8f1e7fae..07c529900e 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx @@ -1,9 +1,20 @@ -import React from 'react'; -import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; -import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons'; +import React, { useEffect } from 'react'; +import { + HMSTranscriptionInfo, + HMSTranscriptionMode, + HMSTranscriptionState, + selectIsTranscriptionEnabled, + selectTranscriptionsState, + useHMSActions, + useHMSStore, +} from '@100mslive/react-sdk'; +import { AlertTriangleIcon, ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons'; import { Button } from '../../../Button'; import { Box, Flex } from '../../../Layout'; +import { Loading } from '../../../Loading'; import { Text } from '../../../Text'; +// @ts-ignore: No implicit Any +import { ToastManager } from '../Toast/ToastManager'; export const AdminCaptionContent = ({ isMobile, @@ -14,9 +25,27 @@ export const AdminCaptionContent = ({ onExit: () => void; onBackClick: () => void; }) => { + const DURATION = 2000; const actions = useHMSActions(); const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); + const transcriptionStates: HMSTranscriptionInfo[] = useHMSStore(selectTranscriptionsState); + + useEffect(() => { + if (transcriptionStates.length > 0) { + if ( + (transcriptionStates[0].state === HMSTranscriptionState.Stopped || + transcriptionStates[0].state === HMSTranscriptionState.Failed) && + transcriptionStates[0].error + ) { + ToastManager.addToast({ + title: `Failed to enable Closed Caption`, + variant: 'danger', + icon: , + }); + } + } + }, [transcriptionStates]); return ( <> , + }); onExit(); return; } await actions.startTranscription({ mode: HMSTranscriptionMode.CAPTION, }); + ToastManager.addToast({ + title: `Enabling Closed Caption for everyone.`, + variant: 'standard', + duration: DURATION, + icon: , + }); onExit(); }} > From aa8fc0621f5c3a6153b2135d895fa92ebcef1700 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Fri, 17 May 2024 09:21:09 +0530 Subject: [PATCH 05/18] fix: build error --- .../components/MoreSettings/AdminCaptionContent.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx index 07c529900e..68b13200c9 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx @@ -29,13 +29,13 @@ export const AdminCaptionContent = ({ const actions = useHMSActions(); const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); - const transcriptionStates: HMSTranscriptionInfo[] = useHMSStore(selectTranscriptionsState); + const transcriptionStates: HMSTranscriptionInfo[] | undefined = useHMSStore(selectTranscriptionsState); useEffect(() => { - if (transcriptionStates.length > 0) { + if (transcriptionStates && transcriptionStates.length > 0) { if ( - (transcriptionStates[0].state === HMSTranscriptionState.Stopped || - transcriptionStates[0].state === HMSTranscriptionState.Failed) && + (transcriptionStates[0].state === HMSTranscriptionState.STOPPED || + transcriptionStates[0].state === HMSTranscriptionState.FAILED) && transcriptionStates[0].error ) { ToastManager.addToast({ From b4b6186aeb9d86cd788f45b13e526c4027365626 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Fri, 17 May 2024 09:38:29 +0530 Subject: [PATCH 06/18] fix: handling mweb ui --- .../components/MoreSettings/AdminCaptionContent.tsx | 13 ++----------- .../components/MoreSettings/AdminCaptionModal.tsx | 12 ++---------- .../MoreSettings/SplitComponents/MwebOptions.tsx | 6 ++---- 3 files changed, 6 insertions(+), 25 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx index 68b13200c9..10cdd3f6fc 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx @@ -8,7 +8,7 @@ import { useHMSActions, useHMSStore, } from '@100mslive/react-sdk'; -import { AlertTriangleIcon, ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons'; +import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons'; import { Button } from '../../../Button'; import { Box, Flex } from '../../../Layout'; import { Loading } from '../../../Loading'; @@ -16,15 +16,7 @@ import { Text } from '../../../Text'; // @ts-ignore: No implicit Any import { ToastManager } from '../Toast/ToastManager'; -export const AdminCaptionContent = ({ - isMobile, - onExit, - onBackClick, -}: { - isMobile: boolean; - onExit: () => void; - onBackClick: () => void; -}) => { +export const AdminCaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit: () => void }) => { const DURATION = 2000; const actions = useHMSActions(); const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); @@ -58,7 +50,6 @@ export const AdminCaptionContent = ({ '@md': { px: '$8', borderBottom: '1px solid $border_default' }, }} > - {isMobile ? : null} {isCaptionEnabled ? 'Disable' : 'Enable'} Closed Caption (CC) for this session? void; - openParentSheet?: () => void; -}) => { +export const AdminCaptionModal = ({ onOpenChange }: { onOpenChange: (value: boolean) => void }) => { const isMobile = useMedia(cssConfig.media.md); const props = { isMobile, - onExit: () => onOpenChange(false), - onBackClick: () => { + onExit: () => { onOpenChange(false); - openParentSheet?.(); }, }; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index 49a4a84e48..12bb775739 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -203,6 +203,7 @@ export const MwebOptions = ({ ) : null} { + setOpenOptionsSheet(false); updateState(MODALS.ADMIN_CAPTION, true); }} > @@ -350,10 +351,7 @@ export const MwebOptions = ({ /> )} {openModals.has(MODALS.ADMIN_CAPTION) && ( - updateState(MODALS.ADMIN_CAPTION, value)} - openParentSheet={() => setOpenOptionsSheet(true)} - /> + updateState(MODALS.ADMIN_CAPTION, value)} /> )} {showEmojiCard && ( Date: Mon, 20 May 2024 05:54:18 +0530 Subject: [PATCH 07/18] fix: resolve pr comment --- .../src/notification-manager/managers/RoomUpdateManager.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts b/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts index f12733bee6..84ec21d0ac 100644 --- a/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts +++ b/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts @@ -128,7 +128,7 @@ export class RoomUpdateManager { if (!transcriptions) { return []; } - const output = transcriptions.map((transcription: TranscriptionNotification) => { + return transcriptions.map((transcription: TranscriptionNotification) => { return { state: transcription.state, mode: transcription.mode, @@ -139,7 +139,6 @@ export class RoomUpdateManager { error: this.toSdkError(transcription?.error), }; }); - return output; } private isRecordingRunning(state?: HMSRecordingState): boolean { if (!state) { From f8d4aa05c7f927eba3a3336c8fbb0eaa9a0a131c Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Tue, 21 May 2024 15:08:51 +0530 Subject: [PATCH 08/18] fix: added transcription initialized state --- packages/hms-video-store/src/interfaces/room.ts | 1 + .../src/notification-manager/HMSNotifications.ts | 1 + .../src/reactive-store/HMSSDKActions.ts | 4 ++-- packages/hms-video-store/src/sdk/index.ts | 11 ++++------- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/hms-video-store/src/interfaces/room.ts b/packages/hms-video-store/src/interfaces/room.ts index a67204ccde..db861e0725 100644 --- a/packages/hms-video-store/src/interfaces/room.ts +++ b/packages/hms-video-store/src/interfaces/room.ts @@ -123,6 +123,7 @@ export interface HLSVariant { Transcription related details */ export enum HMSTranscriptionState { + INITIALISED = 'initialised', STARTED = 'started', STOPPED = 'stopped', FAILED = 'failed', diff --git a/packages/hms-video-store/src/notification-manager/HMSNotifications.ts b/packages/hms-video-store/src/notification-manager/HMSNotifications.ts index a30e663cbb..34818e72e3 100644 --- a/packages/hms-video-store/src/notification-manager/HMSNotifications.ts +++ b/packages/hms-video-store/src/notification-manager/HMSNotifications.ts @@ -62,6 +62,7 @@ export enum HMSStreamingState { } export enum HMSTranscriptionState { + INITIALISED = 'initialised', STARTED = 'started', STOPPED = 'stopped', FAILED = 'failed', diff --git a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts index fdc550e98a..2fbff74954 100644 --- a/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts +++ b/packages/hms-video-store/src/reactive-store/HMSSDKActions.ts @@ -701,11 +701,11 @@ export class HMSSDKActions { + async stopTranscription(params: sdkTypes.TranscriptionConfig): Promise { await this.sdk.stopTranscription(params); } diff --git a/packages/hms-video-store/src/sdk/index.ts b/packages/hms-video-store/src/sdk/index.ts index 35bf656937..2e4679323f 100644 --- a/packages/hms-video-store/src/sdk/index.ts +++ b/packages/hms-video-store/src/sdk/index.ts @@ -1013,27 +1013,24 @@ export class HMSSdk implements HMSInterface { await this.transport?.signal.stopHLSStreaming(); } - async startTranscription(params?: TranscriptionConfig) { + async startTranscription(params: TranscriptionConfig) { if (!this.localPeer) { throw ErrorFactory.GenericErrors.NotConnected( HMSAction.VALIDATION, - 'No local peer present, cannot start HLS streaming', + 'No local peer present, cannot start transcriptions', ); } - if (!params) { - throw ErrorFactory.GenericErrors.Signalling(HMSAction.VALIDATION, 'No mode is passed to start the transcription'); - } const transcriptionParams: StartTranscriptionRequestParams = { mode: params.mode, }; await this.transport?.signal.startTranscription(transcriptionParams); } - async stopTranscription(params?: TranscriptionConfig) { + async stopTranscription(params: TranscriptionConfig) { if (!this.localPeer) { throw ErrorFactory.GenericErrors.NotConnected( HMSAction.VALIDATION, - 'No local peer present, cannot stop HLS streaming', + 'No local peer present, cannot stop transcriptions', ); } if (!params) { From e17f66da47aa320e3c5793e03fa218ed1869dc1f Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Wed, 22 May 2024 10:28:24 +0530 Subject: [PATCH 09/18] Update App.jsx --- examples/prebuilt-react-integration/src/App.jsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/examples/prebuilt-react-integration/src/App.jsx b/examples/prebuilt-react-integration/src/App.jsx index 062f3f4739..47560de72b 100644 --- a/examples/prebuilt-react-integration/src/App.jsx +++ b/examples/prebuilt-react-integration/src/App.jsx @@ -5,15 +5,6 @@ export default function App() { const roomCode = getRoomCodeFromUrl(); return ( - + ); } From 81cde416fb930298ba4c8b915258fe2e25cfedf8 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 22 May 2024 12:19:34 +0530 Subject: [PATCH 10/18] fix: added starting toast --- .../hms-video-store/src/utils/constants.ts | 2 +- .../MoreSettings/AdminCaptionContent.tsx | 33 ++----------- .../SplitComponents/DesktopOptions.tsx | 17 +------ .../SplitComponents/MwebOptions.tsx | 17 +------ .../components/VideoLayouts/GridLayout.tsx | 46 +++++++++++++++++++ 5 files changed, 55 insertions(+), 60 deletions(-) diff --git a/packages/hms-video-store/src/utils/constants.ts b/packages/hms-video-store/src/utils/constants.ts index 07f78bc0ee..5372663c7b 100644 --- a/packages/hms-video-store/src/utils/constants.ts +++ b/packages/hms-video-store/src/utils/constants.ts @@ -59,7 +59,7 @@ export const HMSEvents = { export const PROTOCOL_VERSION = '2.5'; -export const PROTOCOL_SPEC = '20240417'; +export const PROTOCOL_SPEC = '20240521'; export const HAND_RAISE_GROUP_NAME = '_handraise'; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx index ef64faf8e0..6412118f9d 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx @@ -1,13 +1,5 @@ -import React, { useEffect } from 'react'; -import { - HMSTranscriptionInfo, - HMSTranscriptionMode, - HMSTranscriptionState, - selectIsTranscriptionEnabled, - selectTranscriptionsState, - useHMSActions, - useHMSStore, -} from '@100mslive/react-sdk'; +import React from 'react'; +import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons'; import { Button } from '../../../Button'; import { Box, Flex } from '../../../Layout'; @@ -21,23 +13,6 @@ export const AdminCaptionContent = ({ isMobile, onExit }: { isMobile: boolean; o const actions = useHMSActions(); const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); - const transcriptionStates: HMSTranscriptionInfo[] | undefined = useHMSStore(selectTranscriptionsState); - - useEffect(() => { - if (transcriptionStates && transcriptionStates.length > 0) { - if ( - (transcriptionStates[0].state === HMSTranscriptionState.STOPPED || - transcriptionStates[0].state === HMSTranscriptionState.FAILED) && - transcriptionStates[0].error - ) { - ToastManager.addToast({ - title: `Failed to enable Closed Caption`, - variant: 'danger', - icon: , - }); - } - } - }, [transcriptionStates]); return ( <> , }); } diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx index 0acd0eeb36..d35430ee2d 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect, useState } from 'react'; +import React, { Fragment, useState } from 'react'; import { HMSHLSPlayer } from '@100mslive/hls-player'; import { ConferencingScreen, @@ -77,14 +77,8 @@ export const DesktopOptions = ({ const isBRBEnabled = !!elements?.brb; const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); - const [adminCaptionEnabled, setAdminCaptionEnabled] = useState(false); - useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' }); - useEffect(() => { - setAdminCaptionEnabled(isCaptionEnabled); - }, [isCaptionEnabled]); - const updateState = (modalName: string, value: boolean) => { setOpenModals(modals => { const copy = new Set(modals); @@ -148,14 +142,7 @@ export const DesktopOptions = ({ Closed Caption - { - setAdminCaptionEnabled(value); - }} - /> + {screenType !== 'hls_live_streaming' ? ( diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index 12bb775739..6c23f98c02 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useRef, useState } from 'react'; import { useClickAway } from 'react-use'; import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt'; import { match } from 'ts-pattern'; @@ -113,12 +113,6 @@ export const MwebOptions = ({ const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled(); useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' }); - const [adminCaptionEnabled, setAdminCaptionEnabled] = useState(false); - - useEffect(() => { - setAdminCaptionEnabled(isCaptionPresent); - }, [isCaptionPresent]); - const updateState = (modalName: string, value: boolean) => { setOpenModals(modals => { const copy = new Set(modals); @@ -211,14 +205,7 @@ export const MwebOptions = ({ Closed Caption - { - setAdminCaptionEnabled(value); - }} - /> + {isCaptionPresent && screenType !== 'hls_live_streaming' ? ( { + console.log('transcription state', transcriptionStates); + if (transcriptionStates && transcriptionStates.length > 0) { + match({ state: transcriptionStates[0].state, error: transcriptionStates[0].error }) + .when( + ({ error }) => error, + () => { + ToastManager.addToast({ + title: `Failed to enable Closed Caption`, + variant: 'danger', + icon: , + }); + }, + ) + .when( + ({ state }) => state === HMSTranscriptionState.Started, + () => { + ToastManager.addToast({ + title: `Failed to enable Closed Caption`, + variant: 'danger', + icon: , + }); + }, + ) + .when( + ({ state }) => state === HMSTranscriptionState.STOPPED || state === HMSTranscriptionState.FAILED, + () => { + ToastManager.addToast({ + title: `Failed to enable Closed Caption`, + variant: 'danger', + icon: , + }); + }, + ); + } + }, [transcriptionStates]); + useEffect(() => { if (mainPage !== 0) { return; From d0572f5c9d62259af176262ae3c974ad839af237 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 22 May 2024 16:06:45 +0530 Subject: [PATCH 11/18] fix: removed log --- .../src/Prebuilt/components/VideoLayouts/GridLayout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx index 90dc110e0b..30c0dfe0fa 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx @@ -104,7 +104,6 @@ export const GridLayout = ({ const transcriptionStates: HMSTranscriptionInfo[] | undefined = useHMSStore(selectTranscriptionsState); useEffect(() => { - console.log('transcription state', transcriptionStates); if (transcriptionStates && transcriptionStates.length > 0) { match({ state: transcriptionStates[0].state, error: transcriptionStates[0].error }) .when( From 844fa20fab6512de2094ff7141d977b5881b9edc Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 22 May 2024 16:09:58 +0530 Subject: [PATCH 12/18] fix: renaming --- .../MoreSettings/AdminCaptionContent.tsx | 16 ++++++++-------- .../SplitComponents/DesktopOptions.tsx | 4 ++-- .../MoreSettings/SplitComponents/MwebOptions.tsx | 6 +++--- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx index 6412118f9d..691ef4e674 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx @@ -11,7 +11,7 @@ import { ToastManager } from '../Toast/ToastManager'; export const AdminCaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit: () => void }) => { const DURATION = 2000; const actions = useHMSActions(); - const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); + const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled); return ( <> @@ -25,7 +25,7 @@ export const AdminCaptionContent = ({ isMobile, onExit }: { isMobile: boolean; o '@md': { px: '$8', borderBottom: '1px solid $border_default' }, }} > - {isCaptionEnabled ? 'Disable' : 'Enable'} Closed Caption (CC) for this session? + {isTranscriptionEnabled ? 'Disable' : 'Enable'} Closed Caption (CC) for this session? - This will {isCaptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You can - {isCaptionEnabled ? 'enable' : 'disable'} it later. + This will {isTranscriptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You can + {isTranscriptionEnabled ? 'enable' : 'disable'} it later. { try { - if (isCaptionEnabled) { + if (isTranscriptionEnabled) { await actions.stopTranscription({ mode: HMSTranscriptionMode.CAPTION, }); @@ -84,7 +84,7 @@ export const AdminCaptionContent = ({ isMobile, onExit }: { isMobile: boolean; o }); } catch (err) { ToastManager.addToast({ - title: `Failed to ${isCaptionEnabled ? 'disabled' : 'enabled'} closed caption`, + title: `Failed to ${isTranscriptionEnabled ? 'disabled' : 'enabled'} closed caption`, variant: 'error', icon: , }); @@ -92,7 +92,7 @@ export const AdminCaptionContent = ({ isMobile, onExit }: { isMobile: boolean; o onExit(); }} > - {isCaptionEnabled ? 'Disable' : 'Enable'} for Everyone + {isTranscriptionEnabled ? 'Disable' : 'Enable'} for Everyone diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx index d35430ee2d..63f2bed20f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx @@ -75,7 +75,7 @@ export const DesktopOptions = ({ const { isBRBOn, toggleBRB } = useMyMetadata(); const isPipOn = PictureInPicture.isOn(); const isBRBEnabled = !!elements?.brb; - const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled); + const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled); useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' }); @@ -142,7 +142,7 @@ export const DesktopOptions = ({ Closed Caption - + {screenType !== 'hls_live_streaming' ? ( diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index 6c23f98c02..60243792d8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -108,7 +108,7 @@ export const MwebOptions = ({ const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled); const { startRecording, isRecordingLoading } = useRecordingHandler(); - const isCaptionPresent = useHMSStore(selectIsTranscriptionEnabled); + const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled); const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled(); useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' }); @@ -205,9 +205,9 @@ export const MwebOptions = ({ Closed Caption - + - {isCaptionPresent && screenType !== 'hls_live_streaming' ? ( + {isTranscriptionEnabled && screenType !== 'hls_live_streaming' ? ( { setIsCaptionEnabled(!isCaptionEnabled); From 5fe9fe7ca263d5634083c45de374b7bdae1bb9be Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 22 May 2024 16:13:55 +0530 Subject: [PATCH 13/18] fix: renaming --- .../MoreSettings/SplitComponents/DesktopOptions.tsx | 8 ++++---- .../MoreSettings/SplitComponents/MwebOptions.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx index 63f2bed20f..7067ce6eed 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx @@ -58,7 +58,7 @@ const MODALS = { BULK_ROLE_CHANGE: 'bulkRoleChange', MUTE_ALL: 'muteAll', EMBED_URL: 'embedUrl', - ADMIN_CAPTION: 'adminCaption', + CAPTION: 'caption', }; export const DesktopOptions = ({ @@ -135,7 +135,7 @@ export const DesktopOptions = ({ { - updateState(MODALS.ADMIN_CAPTION, true); + updateState(MODALS.CAPTION, true); }} > @@ -240,8 +240,8 @@ export const DesktopOptions = ({ onOpenChange={(value: boolean) => updateState(MODALS.SELF_ROLE_CHANGE, value)} /> )} - {openModals.has(MODALS.ADMIN_CAPTION) && ( - updateState(MODALS.ADMIN_CAPTION, value)} /> + {openModals.has(MODALS.CAPTION) && ( + updateState(MODALS.CAPTION, value)} /> )} {/* {openModals.has(MODALS.EMBED_URL) && ( updateState(MODALS.EMBED_URL, value)} /> diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index 60243792d8..f20d65e5c3 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -74,7 +74,7 @@ const MODALS = { BULK_ROLE_CHANGE: 'bulkRoleChange', MUTE_ALL: 'muteAll', EMBED_URL: 'embedUrl', - ADMIN_CAPTION: 'adminCaption', + CAPTION: 'caption', }; export const MwebOptions = ({ @@ -198,7 +198,7 @@ export const MwebOptions = ({ { setOpenOptionsSheet(false); - updateState(MODALS.ADMIN_CAPTION, true); + updateState(MODALS.CAPTION, true); }} > @@ -337,8 +337,8 @@ export const MwebOptions = ({ openParentSheet={() => setOpenOptionsSheet(true)} /> )} - {openModals.has(MODALS.ADMIN_CAPTION) && ( - updateState(MODALS.ADMIN_CAPTION, value)} /> + {openModals.has(MODALS.CAPTION) && ( + updateState(MODALS.CAPTION, value)} /> )} {showEmojiCard && ( Date: Wed, 22 May 2024 16:27:06 +0530 Subject: [PATCH 14/18] fix: lint error --- .../src/Prebuilt/components/VideoLayouts/GridLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx index 30c0dfe0fa..66973c6924 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx @@ -117,7 +117,7 @@ export const GridLayout = ({ }, ) .when( - ({ state }) => state === HMSTranscriptionState.Started, + ({ state }) => state === HMSTranscriptionState.STARTED, () => { ToastManager.addToast({ title: `Failed to enable Closed Caption`, From 9a6ddf9de270ff75f9bd9c7c2b2a855820cd8462 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 22 May 2024 17:12:37 +0530 Subject: [PATCH 15/18] fix: added proper msg --- .../components/VideoLayouts/GridLayout.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx index 66973c6924..3dbacb506e 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx @@ -13,7 +13,7 @@ import { useHMSStore, useHMSVanillaStore, } from '@100mslive/react-sdk'; -import { AlertTriangleIcon } from '@100mslive/react-icons'; +import { AlertTriangleIcon, ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons'; // @ts-ignore: No implicit Any import { ToastManager } from '../Toast/ToastManager'; import { EqualProminence } from './EqualProminence'; @@ -105,13 +105,14 @@ export const GridLayout = ({ useEffect(() => { if (transcriptionStates && transcriptionStates.length > 0) { + console.log('state ', transcriptionStates[0].state); match({ state: transcriptionStates[0].state, error: transcriptionStates[0].error }) .when( - ({ error }) => error, + ({ error }) => !!error, () => { ToastManager.addToast({ title: `Failed to enable Closed Caption`, - variant: 'danger', + variant: 'error', icon: , }); }, @@ -120,9 +121,9 @@ export const GridLayout = ({ ({ state }) => state === HMSTranscriptionState.STARTED, () => { ToastManager.addToast({ - title: `Failed to enable Closed Caption`, - variant: 'danger', - icon: , + title: `Closed Captioning enabled for everyone`, + variant: 'standard', + icon: , }); }, ) @@ -130,9 +131,9 @@ export const GridLayout = ({ ({ state }) => state === HMSTranscriptionState.STOPPED || state === HMSTranscriptionState.FAILED, () => { ToastManager.addToast({ - title: `Failed to enable Closed Caption`, - variant: 'danger', - icon: , + title: `Closed Captioning disabled for everyone`, + variant: 'standard', + icon: , }); }, ); From 1255acefeaf551dc2dec73b491eb006d3c6049e9 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 22 May 2024 18:01:30 +0530 Subject: [PATCH 16/18] fix: added mobile view --- .../Prebuilt/components/AppData/AppData.tsx | 4 +- .../MoreSettings/AdminCaptionContent.tsx | 100 ------------------ .../MoreSettings/AdminCaptionModal.tsx | 37 ------- .../SplitComponents/DesktopOptions.tsx | 15 ++- .../SplitComponents/MwebOptions.tsx | 26 +---- .../components/VideoLayouts/GridLayout.tsx | 25 +---- 6 files changed, 19 insertions(+), 188 deletions(-) delete mode 100644 packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx delete mode 100644 packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionModal.tsx diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx index d781feebc8..35d3e0bf1c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx @@ -66,8 +66,8 @@ const initialAppData = { [POLL_STATE.pollInView]: '', [POLL_STATE.view]: '', }, - // by default off, so it will not appear in beam bots - [APP_DATA.caption]: false, + // by default on because of on demand now + [APP_DATA.caption]: true, }; export const AppData = React.memo(() => { diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx deleted file mode 100644 index 691ef4e674..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionContent.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react'; -import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; -import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons'; -import { Button } from '../../../Button'; -import { Box, Flex } from '../../../Layout'; -import { Loading } from '../../../Loading'; -import { Text } from '../../../Text'; -// @ts-ignore: No implicit Any -import { ToastManager } from '../Toast/ToastManager'; - -export const AdminCaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit: () => void }) => { - const DURATION = 2000; - const actions = useHMSActions(); - const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled); - - return ( - <> - - {isTranscriptionEnabled ? 'Disable' : 'Enable'} Closed Caption (CC) for this session? - - - - - - This will {isTranscriptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You can - {isTranscriptionEnabled ? 'enable' : 'disable'} it later. - - - - {isMobile ? null : ( - - )} - - - - - ); -}; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionModal.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionModal.tsx deleted file mode 100644 index b7d3de5813..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/AdminCaptionModal.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { useMedia } from 'react-use'; -import { config as cssConfig, Dialog } from '../../..'; -import { Sheet } from '../../../Sheet'; -import { AdminCaptionContent } from './AdminCaptionContent'; - -export const AdminCaptionModal = ({ onOpenChange }: { onOpenChange: (value: boolean) => void }) => { - const isMobile = useMedia(cssConfig.media.md); - - const props = { - isMobile, - onExit: () => { - onOpenChange(false); - }, - }; - - if (isMobile) { - return ( - - - - - - ); - } - - return ( - - - - - - - - - ); -}; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx index 7067ce6eed..f9f321849b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx @@ -36,9 +36,9 @@ import SettingsModal from '../../Settings/SettingsModal'; import StartRecording from '../../Settings/StartRecording'; // @ts-ignore: No implicit any import { StatsForNerds } from '../../StatsForNerds'; -import { AdminCaptionModal } from '../AdminCaptionModal'; // @ts-ignore: No implicit any import { BulkRoleChangeModal } from '../BulkRoleChangeModal'; +import { CaptionModal } from '../CaptionModal'; // @ts-ignore: No implicit any import { FullScreenItem } from '../FullScreenItem'; import { MuteAllModal } from '../MuteAllModal'; @@ -139,9 +139,14 @@ export const DesktopOptions = ({ }} > - - Closed Caption - + + + Closed Captions + + + {isTranscriptionEnabled ? 'Enabled' : 'Disabled'} + + {screenType !== 'hls_live_streaming' ? ( @@ -241,7 +246,7 @@ export const DesktopOptions = ({ /> )} {openModals.has(MODALS.CAPTION) && ( - updateState(MODALS.CAPTION, value)} /> + updateState(MODALS.CAPTION, value)} /> )} {/* {openModals.has(MODALS.EMBED_URL) && ( updateState(MODALS.EMBED_URL, value)} /> diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx index f20d65e5c3..bb43a68ab4 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx @@ -29,7 +29,7 @@ import { SettingsIcon, VirtualBackgroundIcon, } from '@100mslive/react-icons'; -import { Box, Loading, Switch, Text, Tooltip } from '../../../..'; +import { Box, Loading, Text, Tooltip } from '../../../..'; import { Sheet } from '../../../../Sheet'; // @ts-ignore: No implicit any import IconButton from '../../../IconButton'; @@ -43,7 +43,7 @@ import SettingsModal from '../../Settings/SettingsModal'; import { ToastManager } from '../../Toast/ToastManager'; // @ts-ignore: No implicit any import { ActionTile } from '../ActionTile'; -import { AdminCaptionModal } from '../AdminCaptionModal'; +import { CaptionModal } from '../CaptionModal'; // @ts-ignore: No implicit any import { ChangeNameModal } from '../ChangeNameModal'; // @ts-ignore: No implicit any @@ -110,7 +110,7 @@ export const MwebOptions = ({ const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled); - const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled(); + const [isCaptionEnabled] = useSetIsCaptionEnabled(); useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' }); const updateState = (modalName: string, value: boolean) => { @@ -201,27 +201,11 @@ export const MwebOptions = ({ updateState(MODALS.CAPTION, true); }} > - + {isTranscriptionEnabled && isCaptionEnabled ? : } Closed Caption - - {isTranscriptionEnabled && screenType !== 'hls_live_streaming' ? ( - { - setIsCaptionEnabled(!isCaptionEnabled); - }} - > - {isCaptionEnabled ? ( - - ) : ( - - )} - {isCaptionEnabled ? 'Hide Captions' : 'Captions Disabled'} - - ) : null} - {isLocalVideoEnabled && !!elements?.virtual_background ? ( { @@ -338,7 +322,7 @@ export const MwebOptions = ({ /> )} {openModals.has(MODALS.CAPTION) && ( - updateState(MODALS.CAPTION, value)} /> + updateState(MODALS.CAPTION, value)} /> )} {showEmojiCard && ( { if (transcriptionStates && transcriptionStates.length > 0) { - console.log('state ', transcriptionStates[0].state); match({ state: transcriptionStates[0].state, error: transcriptionStates[0].error }) .when( ({ error }) => !!error, @@ -117,26 +115,7 @@ export const GridLayout = ({ }); }, ) - .when( - ({ state }) => state === HMSTranscriptionState.STARTED, - () => { - ToastManager.addToast({ - title: `Closed Captioning enabled for everyone`, - variant: 'standard', - icon: , - }); - }, - ) - .when( - ({ state }) => state === HMSTranscriptionState.STOPPED || state === HMSTranscriptionState.FAILED, - () => { - ToastManager.addToast({ - title: `Closed Captioning disabled for everyone`, - variant: 'standard', - icon: , - }); - }, - ); + .otherwise(() => null); } }, [transcriptionStates]); From 958447b7583a7b492659805c75392ee78eb4279f Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 22 May 2024 18:01:50 +0530 Subject: [PATCH 17/18] fix: added content --- .../MoreSettings/CaptionContent.tsx | 132 ++++++++++++++++++ .../components/MoreSettings/CaptionModal.tsx | 37 +++++ 2 files changed, 169 insertions(+) create mode 100644 packages/roomkit-react/src/Prebuilt/components/MoreSettings/CaptionContent.tsx create mode 100644 packages/roomkit-react/src/Prebuilt/components/MoreSettings/CaptionModal.tsx diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/CaptionContent.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/CaptionContent.tsx new file mode 100644 index 0000000000..5a60f1ac38 --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/CaptionContent.tsx @@ -0,0 +1,132 @@ +import React from 'react'; +import { HMSTranscriptionMode, selectIsTranscriptionEnabled, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; +import { AlertTriangleIcon, CrossIcon } from '@100mslive/react-icons'; +import { Button } from '../../../Button'; +import { Box, Flex } from '../../../Layout'; +import { Loading } from '../../../Loading'; +import { Text } from '../../../Text'; +// @ts-ignore: No implicit Any +import { ToastManager } from '../Toast/ToastManager'; +// @ts-ignore: No implicit Any +import { useSetIsCaptionEnabled } from '../AppData/useUISettings'; + +export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit: () => void }) => { + const DURATION = 2000; + const actions = useHMSActions(); + const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled); + + const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled(); + return ( + <> + + {isTranscriptionEnabled ? 'Disable' : 'Enable'} Closed Caption (CC) for this session? + + + + + {!isMobile ? ( + + This will {isTranscriptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You can + {isTranscriptionEnabled ? 'enable' : 'disable'} it later. + + ) : null} + + + {isMobile ? null : ( + + )} + + {isMobile && isTranscriptionEnabled ? ( + + ) : null} + + + + {isMobile && ( + + This will {isTranscriptionEnabled ? 'disable' : 'enable'} Closed Captions for everyone in this room. You can + {isTranscriptionEnabled ? 'enable' : 'disable'} it later. + + )} + + ); +}; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/CaptionModal.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/CaptionModal.tsx new file mode 100644 index 0000000000..37684c6b0a --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/CaptionModal.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { useMedia } from 'react-use'; +import { config as cssConfig, Dialog } from '../../..'; +import { Sheet } from '../../../Sheet'; +import { CaptionContent } from './CaptionContent'; + +export const CaptionModal = ({ onOpenChange }: { onOpenChange: (value: boolean) => void }) => { + const isMobile = useMedia(cssConfig.media.md); + + const props = { + isMobile, + onExit: () => { + onOpenChange(false); + }, + }; + + if (isMobile) { + return ( + + + + + + ); + } + + return ( + + + + + + + + + ); +}; From eba3662f149c29a9b4ade263ef7fac408e03addc Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 22 May 2024 18:17:39 +0530 Subject: [PATCH 18/18] fix: error occured and match removed --- .../components/VideoLayouts/GridLayout.tsx | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx index c9eeab1fab..0abc46a6fe 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useMemo, useState } from 'react'; import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout'; -import { match } from 'ts-pattern'; import { HMSTranscriptionInfo, selectLocalPeerID, @@ -103,19 +102,12 @@ export const GridLayout = ({ const transcriptionStates: HMSTranscriptionInfo[] | undefined = useHMSStore(selectTranscriptionsState); useEffect(() => { - if (transcriptionStates && transcriptionStates.length > 0) { - match({ state: transcriptionStates[0].state, error: transcriptionStates[0].error }) - .when( - ({ error }) => !!error, - () => { - ToastManager.addToast({ - title: `Failed to enable Closed Caption`, - variant: 'error', - icon: , - }); - }, - ) - .otherwise(() => null); + if (transcriptionStates && transcriptionStates.length > 0 && transcriptionStates[0].error) { + ToastManager.addToast({ + title: `Failed to enable Closed Caption`, + variant: 'error', + icon: , + }); } }, [transcriptionStates]);