communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
40 lines • 2.11 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { submitWithKeyboard } from '../utils/keyboardNavigation';
import { PictureInPictureInPicturePrimaryTile, PictureInPictureInPictureSecondaryTile } from './PictureInPictureInPictureTile';
/**
* Component that displays a video feed for use as a Picture-in-Picture style component.
* It contains a secondary video feed resulting in an inner Picture-in-Picture style feed.
*
* @remarks
* The double nature of the Picture-in-Picture styles is where this component gets its name; Picture-in-Picture-in-Picture.
*
* @internal
*/
export const _PictureInPictureInPicture = (props) => {
return (React.createElement(PictureInPictureInPictureContainer, { onClick: props.onClick, primaryView: React.createElement(PictureInPictureInPicturePrimaryTile, Object.assign({}, props.primaryTile)), secondaryView: props.secondaryTile && React.createElement(PictureInPictureInPictureSecondaryTile, Object.assign({}, props.secondaryTile)), ariaLabel: props.strings.rootAriaLabel }));
};
/**
* Container for the picture in picture in picture component.
* This governs positioning and floating of the secondary PiP.
*/
const PictureInPictureInPictureContainer = (props) => {
const onKeyPress = (e) => props.onClick && submitWithKeyboard(e, props.onClick);
return (React.createElement("aside", { style: tileContainerStyles, onClick: props.onClick, onKeyPress: onKeyPress, "aria-label": props.ariaLabel, tabIndex: props.onClick ? 0 : -1, "data-ui-id": "picture-in-picture-in-picture-root" },
props.primaryView,
React.createElement("div", { style: secondaryTileFloatingStyles }, props.secondaryView)));
};
const tileContainerStyles = {
display: 'flex',
width: 'min-content',
position: 'relative',
cursor: 'pointer'
};
const secondaryTileFloatingStyles = {
// The secondary tile should float above the primary tile, aligned to the bottom right.
position: 'absolute',
bottom: '0.125rem',
right: '0.125rem'
};
//# sourceMappingURL=PictureInPictureInPicture.js.map