@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
69 lines • 3.86 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { createRef, useCallback, useEffect, useMemo } from 'react';
import { useIsParticularSidePaneOpen } from './SidePaneProvider';
import { SidePaneHeader } from '../../../common/SidePaneHeader';
import { useLocale } from '../../../localization';
import { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';
import { useSelector } from '../../hooks/useSelector';
import { getVideoBackgroundImages } from '../../selectors/baseSelectors';
/** @private */
export const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';
/** @private */
export const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
/** @private */
export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, onDismissError, cameraButtonRef) => {
const closePane = useCallback(() => {
var _a;
updateSidePaneRenderer(undefined);
(_a = cameraButtonRef === null || cameraButtonRef === void 0 ? void 0 : cameraButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, [cameraButtonRef, updateSidePaneRenderer]);
const locale = useLocale();
const onRenderHeader = useCallback(() => {
var _a, _b;
return React.createElement(SidePaneHeader, { onClose: closePane, headingText: locale.strings.call.videoEffectsPaneTitle, dismissSidePaneButtonAriaLabel: (_b = (_a = locale.strings.call.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : locale.strings.callWithChat.dismissSidePaneButtonLabel) !== null && _b !== void 0 ? _b : 'Close', mobileView: mobileView });
}, [closePane, locale.strings, mobileView]);
const latestVideoEffectError = latestErrors.find(error => error.type === 'unableToStartVideoEffect');
const updateFocusHandle = useMemo(() => createRef(), []);
const backgroundImages = useSelector(getVideoBackgroundImages);
const onRenderContent = useCallback(() => {
return React.createElement(VideoEffectsPaneContent, { onDismissError: onDismissError, activeVideoEffectError: latestVideoEffectError, activeVideoEffectChange: () => {
// Clear any existing video effects error when the user clicks on a new video effect
if (latestVideoEffectError) {
onDismissError === null || onDismissError === void 0 ? void 0 : onDismissError(latestVideoEffectError);
}
}, updateFocusHandle: updateFocusHandle, backgroundImages: backgroundImages });
}, [latestVideoEffectError, onDismissError, updateFocusHandle, backgroundImages]);
const sidePaneRenderer = useMemo(() => ({
headerRenderer: onRenderHeader,
contentRenderer: onRenderContent,
id: VIDEO_EFFECTS_SIDE_PANE_ID
}), [onRenderContent, onRenderHeader]);
const openPane = useCallback(() => {
updateSidePaneRenderer(sidePaneRenderer);
// Run in a setTimeout as it must be called only once the imperative handle is available
setTimeout(() => { var _a; return (_a = updateFocusHandle.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
}, [sidePaneRenderer, updateSidePaneRenderer, updateFocusHandle]);
const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);
// Update pane renderer if it is open and the openPane dep changes
useEffect(() => {
if (isOpen) {
openPane();
}
}, [isOpen, openPane]);
const togglePane = useCallback(() => {
if (isOpen) {
closePane();
}
else {
openPane();
}
}, [closePane, isOpen, openPane]);
return {
openVideoEffectsPane: openPane,
closeVideoEffectsPane: closePane,
toggleVideoEffectsPane: togglePane,
isVideoEffectsPaneOpen: isOpen
};
};
//# sourceMappingURL=useVideoEffectsPane.js.map