communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
141 lines • 6.91 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React from 'react';
import { useCallback, useMemo } from 'react';
import { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';
import { useLocale } from '../localization';
import { _VideoBackgroundEffectsPicker } from "../../../../react-components/src";
import { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';
import { useSelector } from '../CallComposite/hooks/useSelector';
import { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';
import { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';
/**
* Pane that is used to show video effects button
* @private
*/
/** @beta */
export const VideoEffectsPaneContent = (props) => {
var _a;
const { onDismissError, activeVideoEffectError, activeVideoEffectChange } = props;
const locale = useLocale();
const adapter = useAdapter();
const strings = locale.strings.call;
const activeVideoEffects = (_a = useSelector(localVideoSelector).activeVideoEffects) === null || _a === void 0 ? void 0 : _a.activeEffects;
const selectableVideoEffects = useMemo(() => {
const videoEffects = [
{
itemKey: 'none',
iconProps: {
iconName: 'RemoveVideoBackgroundEffect'
},
title: strings.removeBackgroundEffectButtonLabel,
tooltipProps: {
content: strings.removeBackgroundTooltip
}
},
{
itemKey: 'blur',
iconProps: {
iconName: 'BlurVideoBackground'
},
title: strings.blurBackgroundEffectButtonLabel,
tooltipProps: {
content: strings.blurBackgroundTooltip
}
}
];
if (props.backgroundImages) {
props.backgroundImages.forEach((img) => {
var _a;
videoEffects.push({
itemKey: img.key,
backgroundProps: {
url: img.url
},
tooltipProps: {
content: (_a = img.tooltipText) !== null && _a !== void 0 ? _a : ''
}
});
});
}
return videoEffects;
}, [
strings.removeBackgroundEffectButtonLabel,
strings.removeBackgroundTooltip,
strings.blurBackgroundEffectButtonLabel,
strings.blurBackgroundTooltip,
props.backgroundImages
]);
const onEffectChange = useCallback((effectKey) => __awaiter(void 0, void 0, void 0, function* () {
if (effectKey === 'blur') {
const blurEffect = {
effectName: effectKey
};
activeVideoEffectChange({
type: 'blur',
timestamp: new Date(Date.now())
});
yield adapter.startVideoBackgroundEffect(blurEffect);
adapter.updateSelectedVideoBackgroundEffect(blurEffect);
}
else if (effectKey === 'none') {
const noneEffect = {
effectName: effectKey
};
yield adapter.stopVideoBackgroundEffects();
adapter.updateSelectedVideoBackgroundEffect(noneEffect);
}
else {
const backgroundImg = selectableVideoEffects.find((effect) => {
return effect.itemKey === effectKey;
});
if (backgroundImg && backgroundImg.backgroundProps) {
const replaceEffect = {
effectName: 'replacement',
key: effectKey,
backgroundImageUrl: backgroundImg.backgroundProps.url
};
activeVideoEffectChange({
type: 'replacement',
timestamp: new Date(Date.now())
});
yield adapter.startVideoBackgroundEffect(replaceEffect);
adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
}
}
}), [adapter, activeVideoEffectChange, selectableVideoEffects]);
if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {
const noneEffect = {
effectName: 'none'
};
adapter.updateSelectedVideoBackgroundEffect(noneEffect);
}
return VideoEffectsPaneTrampoline(onDismissError, props.updateFocusHandle, activeVideoEffectError, selectableVideoEffects, onEffectChange);
};
const VideoEffectsPaneTrampoline = (onDismissError, updateFocusHandle, activeVideoEffectError, selectableVideoEffects, onEffectChange) => {
const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);
const isCameraOn = useSelector(localVideoSelector).isAvailable;
const showWarning = !isCameraOn && selectedEffect !== 'none';
const locale = useLocale();
return (React.createElement(Stack, { tokens: { childrenGap: '0.75rem' }, className: mergeStyles({ paddingLeft: '0.5rem' }) },
activeVideoEffectError && isCameraOn && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError), role: "alert", "aria-live": "assertive" }, locale.strings.call.unableToStartVideoEffect)),
showWarning && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning, role: "alert", "aria-live": "assertive" }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect, componentRef: updateFocusHandle })));
};
const backgroundPickerStyles = {
label: {
fontSize: '0.75rem',
lineHeight: '0.5rem',
fontWeight: '400'
}
};
//# sourceMappingURL=VideoEffectsPane.js.map