communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
51 lines • 3.1 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { ContextualMenu, Stack } from '@fluentui/react';
import { _convertRemToPx } from "../../../../acs-ui-common/src";
import React, { useMemo } from 'react';
import { useTheme } from '../../theming';
import { _ModalClone } from '../ModalClone/ModalClone';
import { floatingLocalVideoModalStyle, floatinglocalVideoModalInitialPositionGapRem } from './styles/FloatingLocalVideo.styles';
import { useLocale } from '../../localization';
const DRAG_OPTIONS = {
moveMenuItemText: 'Move',
closeMenuItemText: 'Close',
menu: ContextualMenu,
keepInBounds: true
};
// Manually override the max position used to keep the modal in the bounds of its container.
// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
// position the modal can be dragged to.
const modalMaxDragPosition = {
x: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
y: _convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
};
/**
* @private
*/
export const FloatingLocalVideo = (props) => {
var _a;
const { localVideoComponent, layerHostId, localVideoSizeRem, parentWidth, parentHeight } = props;
const theme = useTheme();
const strings = useLocale().strings.videoGallery;
// The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
// to be dragged offscreen and these are the top and left bounds of that calculation.
const modalMinDragPosition = useMemo(() => parentWidth && parentHeight
? {
// We use -parentWidth/Height because our modal is positioned to start in the bottom right,
// hence (0,0) is the bottom right of the video gallery.
x: -parentWidth +
_convertRemToPx(localVideoSizeRem.width) +
_convertRemToPx(floatinglocalVideoModalInitialPositionGapRem),
y: -parentHeight +
_convertRemToPx(localVideoSizeRem.height) +
_convertRemToPx(floatinglocalVideoModalInitialPositionGapRem)
}
: undefined, [parentHeight, parentWidth, localVideoSizeRem.width, localVideoSizeRem.height]);
const modalStyles = useMemo(() => floatingLocalVideoModalStyle(theme, localVideoSizeRem), [theme, localVideoSizeRem]);
const layerProps = useMemo(() => ({ hostId: layerHostId }), [layerHostId]);
return (React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStyles, layerProps: layerProps, maxDragPosition: modalMaxDragPosition, minDragPosition: modalMinDragPosition, dataUiId: "floating-local-video-host" },
React.createElement(Stack, { "aria-label": (_a = strings.localVideoMovementAriaLabel) !== null && _a !== void 0 ? _a : strings.localVideoMovementLabel, tabIndex: 0, role: 'dialog', style: { pointerEvents: 'auto' } }, localVideoComponent)));
};
//# sourceMappingURL=FloatingLocalVideo.js.map