Skip to main content

@pexip/media-components

This package provides the necessary building blocks for creating video apps.

Install

npm install @pexip/media-components

Package includes:

  • views (building blocks for the video app)
  • viewModels (some of the additional logic on top of the views)
  • hooks (common logic for video apps wrapped with the hook)
  • utils (more generic code that can be useful when building video app)
  • signals (to be deprecated, atm those signals helps communicating between the pkg and the app, ideally they should be inside the app itself)

Enumerations

EnumerationDescription
PreflightJoinDetailsToRender-
BlockedBrowserPermissionsInfoType-
InMeetingUIElements-
PresentationType-
PresentationEmphasis-
PresentationSize-
PresentationAction-
StreamStatus-
MuteStateindicate call mute state (not to be confused with member mute state)
ChatType-
StreamQuality-
VideoLayoutOptionValues-
NetworkState-
BreakoutRoomAssignmentMode-
BreakoutRoomsScreen-
BreakoutRoomVariant-
NewChatMessageAction-
MimeTypes-
Platform-
PanelAnimationTypes-
QualityNames-
InfoCardWidth-
InfoCardType-
TestYourMicStages-
TestId-

Interfaces

InterfaceDescription
Participant-
ControlsOverlap-
Preview-
DeviceStatusInfo-
InMeetingUI-
PresentationActivityState-
PresentationState-
ChatMessage-
MeetingParticipant-
InMeetingParticipant-
PreviewMediaInput-
NormalizedStats-
BreakoutAskingForHelpStatus-
MediaStore-
RecorderEvents-
Recorder-
UserAgentsDetailsData set of user agent details and and boolean properties for quick browser and device checks
TimerValues-

Type Aliases

Type AliasDescription
RoomID-
ParticipantID-
UseChatReturnType-
NewUnreadChatMessageState-
NewUnreadChatMessageActions-
InMeetingUIHookArgs-
PreviewControllerHandler-
RemoveParticipantSignal-
Orientation-
DeviceError-
DeviceErrors-
AudioMeterState-
AutoHideButtonCallbacks-
MeetingPanelType-
MeetingPanelsState-
InMeetingUIState-
InMeetingUIStateAPI-
PresentationEvent-
ChatActivityType-
ChatActivityMessageParticipants-
RemovedParticipant-
ChatMessageID-
DirectChatMessages-
UnseenUnreadDirectChatMessages-
CallDisplayName-
ParticipantCall-
EnableInMeetingUIAutoHideState-
SelfviewAspectRatios-
BreakoutRoomName-
BreakoutRoomId-
BreakoutParticipants-
BreakoutParticipantsIdentities-
BreakoutRoomNames-
BreakoutsEditPanelSave-
EpochTimeStampSeconds-
ParticipantList-
RoomTuple-
Unsubscribe-
OnChange-
Subscribe-
UserAgents-
SelfviewDisplayMode-
ShuffleBreakoutParticipants-
CallQualityVisualizerProps-
FrequencyBarsAudioMeterProps-
InMeetingInputControlProps-
InputControlToggleViewProps-
MeetingStageContainerProps-
DraggableMeetingVideoProps-
MeetingVideoRef-
MeetingVideoProps-
ParticipantRowProps-
ParticipantRowActionsProps-
ParticipantSidePanelWrapperProps-
ParticipantsToggleViewProps-
ParticipantsToggleButtonProps-
ResponsiveButtonProps-
SelfviewProps-

Variables

VariableDescription
CHARACTER_LIMIT-
MIN_VIEWPORT_WIDTH-
MIN_VIEWPORT_HEIGHT-
interfacesMargin-
sidePanelWidth-
desktopToolbarWidth-
sidePanelPlusDesktopToolbarWidth-
INITIAL_STREAM_QUALITY-
MainBreakoutRoomId-
KEYBOARD_EVENT_KEY-
DEFAULT_CHAT_INPUT_HEIGHT-
MESSAGES_BOTTOM_OFFSET-
UserMediaContext-
initialNewUnreadMessageState-
STATE_RESET_TIMER-
EASE_DURATION-
RESET_TIME-
selfviewAspectRatioValues-
AUDIO_OGG_OPUS-
AUDIO_WEBM_OPUS-
AUDIO_MP4-
isCurrentBrowserSupported-
isScreenShareSupported-
isFirefox-
browserVersion-
currentBrowserName-
GROUP_ACTIVITIES_TIME_WINDOW-
isMicrosoftSurface-
isPhone-
isTablet-
isCompatibleMobileDevice-
platform-
toTime-
BROWSER_NAME-
SYSTEM_NAME-
DEVICE_TYPE-
I_PAD-
AudioMeter-
BreakoutRoomsNameAndTimeLeft-
PresentationMeetingVideo-
AddParticipantButton-
AudioMeterView-
AudioOutputTestButton-
BreakoutEditPanel-
BreakoutPreviewPanel-
BreakoutRoom-
BreakoutRoomHeader-
BreakoutRoomsAskingForHelpRoomRow-
BreakoutRoomsGoBackToModeAssignmentModal-
BreakoutRoomsGoBackToOpenedRoomsModal-
OpenBreakoutRoomsErrorModal-
BreakoutRoomsModeAssignment-
BreakoutRoomsNameAndTimeLeftView-
BreakoutRoomsPanelToggleView-
BreakoutRoomsPanelWrapper-
BreakoutSetupPanel-
CallControlsDesktopView-
CallControlsTouchView-
FeccButtonView-
LeaveButtonDesktop-
LeaveButtonTouch-
MoreMenu-
PresentationButton-
RaiseHandButton-
ToolbarAriaMenu-
CallQualityVisualizer-
ChatDirectMessagePreview-
ChatActivityMessage-
ChatMessageView-
ChatPanelMessages-
ChatNewDirectMessage-
ChatPanelView-
ChatPanelContentWrapper-
ChatPanelInput-
ChatPanelInputButtons-
ChatPanelInputSendButton-
ChatPanelToggleView-
ChatTypeSwitcher-
DesktopMeetingToolbar-
DeviceDeniedTooltip-
DeviceSelect-
MissingDeviceAlert-
DevicesList-
Footer-
FrequencyBar-
FrequencyBars-
FrequencyBarsAudioMeter-
Header-
InMeetingDraggable-
InfoCard-
AudioMeterButton-
InMeetingInputControl-
BackgroundBlurInputControl-
InputControlToggleView-
PreflightInputControls-
ManualInvite-
InviteeResults-
InviteeSearch-
InvitationModal-
InvitationModalWithTransform-
InvitationSearchInput-
JoinCallDetailsMobile-
JoinCallDetails-
JoinCallDetailsWrapper-
JoinDetailsText-
JoinDetailsTextWrapper-
JoinMeetingButton-
JoinMeetingButtonWithOptions-
LinkCopy-
MeetingLayout-
MeetingScrim-
MeetingStageContainer-
DraggableMeetingVideo-
ExternalVideo-
MeetingVideo-
MeetingWrapper-
MicrophoneMonitorModal-
YouCanSayTitle-
MicrophoneMuteMessage-
MoveToRoomModalView-
NetworkAlert-
NewChatMessagePill-
PanelHeader-
PanelHeaderWrapper-
ParticipantsPanelFooter-
ParticipantRowWrapper-
BreakoutParticipantRow-
ParticipantRow-
ParticipantRowActions-
ParticipantSidePanelWrapper-
ParticipantsPanelToggleView-
PoppedOutEmptyPresentation-
PreflightContentMobile-
PreflightContent-
PreflightControlsWrapper-
PreflightMediaControls-
DevicesSelection-
QualityList-
RemoveUserConfirmation-
RequestAccess-
ResponsiveButton-
RoomSettingsModalView-
SearchRow-
SelfViewSettings-
AspectRatioSelfview-
DraggableFoldableInMeetingSelfview-
DraggableInMeetingSelfview-
FoldedSelfview-
PreflightSelfview-
Selfview-
SettingsModalBody-
SettingsPanel-
StatsModal-
StealPresentationModal-
TestYourMicLink-
ToastSpeakingWhileMuted-
UnreadIndicator-

Functions

FunctionDescription
useAnalyzerCreates and returns AnalyzerNodeInit based on the main media's rawStream.
useAssertedContext-
useAudioDetectionSubscribe onSilentDetected signal and set the notice info accordingly
useAudioMeterReturns the max frequency value from the current frequency data.
useBatteryStatusGets the battery status of a device
useBreakoutAddRoom-
useBreakoutAssignParticipantsByMode-
useBreakoutChangeParticipantRoom-
useBreakoutCloseAllRoomsConfirmationModal-
useBreakoutEdit-
useBreakoutParticipantDrag-
useBreakoutRemoveRoom-
useBreakoutRoomNameChange-
useBreakoutShuffleParticipants-
useBreakoutUpdateParticipants-
useBuildTranslatedActivityChatMessages-
useCallQuality-
useCallQualityToast-
useChat-
useNewChatMessageReducer-
newChatMessageReducer-
setIsLastMessageVisible-
setDisplayNewMessageToast-
updateNewMessagesCount-
updateLastNewMessageVisible-
isControlsOverlapTruthy-
useControlsRelativePosition-
useDeviceErrorMessageState-
useSubscribeToInputError-
buildErrorMessages-
getDeviceErrorMessageSetter-
useDeviceErrorMessageSets DeviceError when device is missing or its permissions are rejected.
useDeviceStatusInfo-
useFallbackDeviceNotifier-
createInMeetingUIHook-
useInputSuspendedInfo-
useInputsState-
useMedia-
useMediaInputs-
generateMediaSignalHooks-
useMeetingStageLayout-
useNetworkState-
usePreflightJoinDetailsToRender-
presentationReducer-
usePresentation-
usePresentationPoppedOut-
createPreviewHook-
usePreviewAnalyzer-
createPreviewAudioInputHook-
createPreviewAudioOutputHook-
createPreviewControllerHook-
usePreviewControllerHandler-
usePreviewErrorHandling-
createPreviewVideoInputHook-
isSpaceKeyboard-
initPushToTalkUI-
createPushToTalkHookUnmute call while the space keyboard is pressed. When released, the call is muted again.
createPushToTalkMuteToastHook-
useRemoveParticipant-
useResetCopyMeetingLink-
useSelectedInput-
isOverlappingSidePanel-
useSidePanelTransform-
createVADHook-
useWindowOrientation-
useUserMediaContext-
useSelectDeviceChangeHandler-
createUserMediaHooks-
setLogger-
appendGroupedParticipants-
buildGroupedActivityMessage-
calculateNewChatMessageActioncalculates wether the new chat messages Pill should be displayed
isLastMessageByCurrentUserDetect Whether the last message posted by current user
scrollToLastMessageScrolls to last chat message
getIsLastNewMessageVisibleFnReturn function to detect wether the last chat message is visible to the user.
calculateHowManyUnreadMessagescalculate how many unread chat messages
shouldEmitNewMessageCheck if we should ignore incoming message when it arrives
copyToClipboardItem-
copyTextToClipboard-
readTextFromClipboard-
statefulCopyLinkToClipboard-
getAudioMimeType-
createMediaRecorder-
createInMemoryMediaSourceStore-
extractVersionExtract browser version out of the provided user agent string.
isWebRTCBrowser-
isFirefoxWebRTC-
isChromiumWebRTCChrome, Chromium, Webview, Opera. Version matches Chrome/WebRTC version. Chrome 74 removed webkitGetUserMedia on http as well so we need the more complicated fallback to webkitRTCPeerConnection.
isSafariWebRTC-
supportUnifiedPlan-
detectBrowserBrowser detector from webrtc-adapter
getBrowserNamereturns the browser name based on given userAgent.
isBrowserSupportedDetects weather the current browser is supported
stopMouseEventPropagation-
randomNumber-
getClampLevelFn-
getAudioOutputSelects the saved audio output or a default if exist.
getPreferredAudioOutput-
isSameActivityType-
isActivityInTimeRange-
shouldAppendActivityMessage-
getGroupActivityMessages-
getInitialStreamQuality-
isMediaMuted-
isMediaLocked-
execRegex-
isTouchScreen-
isPortrait-
isSmallScreen-
getPlatform-
getIsMicrosoftSurface-
isMobileDevice-
togglePanel-
initMeetingUIStateInitializes InMeetingUIState and returns InMeetingUIStateAPI.
onDeviceSelectChange-
exitPiPexits PiP (picture-in-picture) mode if it supported by the browser and currently enabled
qualityToMediaConstraints-
calculateDisplayMode-
shouldResizeWindowReturns if the window should be resized for a feature to be available based on a minimum width and height.
shuffleBreakoutParticipantsShuffles the given map of breakout rooms.
getUserAgentDetailsReturns a data set of user agent details and properties for quick browser and device checks
createChangeOfMediaDevicesSubscription-
createChangeOfTrackSubscription-
createMediaActiveSubscription-
AVQualityStats-
Stats-
useInfoCardOrientation-
useInfoCardWidth-
isVideoActive-
isVideoMuted-
shouldShowErrorBorder-