@azure/communication-react 1.4.2-alpha-202211240014.0 → 1.4.2-alpha-202211260013.0

package/dist/communication-react.d.ts

@@ -8343,6 +8343,10 @@ export declare interface VideoTileProps {
      */
     participantState?: ParticipantState;
     strings?: VideoTileStrings;
+    /**
+     * Callback triggered by video tile on touch and hold.
+     */
+    onLongTouch?: () => void;
 }
 
 /**

package/dist/dist-cjs/communication-react/index.js

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.2-alpha-202211240014.0';
+var telemetryVersion = '1.4.2-alpha-202211260013.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -8043,6 +8043,93 @@ const getVideoTileOverrideColor = (isVideoRendered, theme, color) => {
     return { color: isVideoRendered ? react.DefaultPalette[color] : theme.palette[color] };
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+function useLongPress(props) {
+    const { onClick, onLongPress, touchEventsOnly = false } = props;
+    const timerRef = React.useRef();
+    const [isLongPress, setIsLongPress] = React.useState(false);
+    const [action, setAction] = React.useState(false);
+    React.useEffect(() => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, [onClick, onLongPress, touchEventsOnly]);
+    const startPressTimer = React.useCallback(() => {
+        setIsLongPress(false);
+        timerRef.current = setTimeout(() => {
+            setIsLongPress(true);
+            onLongPress();
+        }, 500);
+    }, [onLongPress]);
+    const handleOnClick = React.useCallback(() => {
+        if (touchEventsOnly || !onClick) {
+            return;
+        }
+        if (!isLongPress) {
+            onClick();
+        }
+    }, [isLongPress, onClick, touchEventsOnly]);
+    const handleOnKeyDown = React.useCallback(() => {
+        if (touchEventsOnly) {
+            return;
+        }
+        if (action) {
+            setAction(false);
+            startPressTimer();
+        }
+    }, [action, startPressTimer, touchEventsOnly]);
+    const handleOnKeyUp = React.useCallback(() => {
+        if (touchEventsOnly) {
+            return;
+        }
+        setAction(true);
+        timerRef.current && clearTimeout(timerRef.current);
+    }, [touchEventsOnly]);
+    const handleOnMouseDown = React.useCallback(() => {
+        if (touchEventsOnly) {
+            return;
+        }
+        startPressTimer();
+    }, [startPressTimer, touchEventsOnly]);
+    const handleOnMouseUp = React.useCallback(() => {
+        if (touchEventsOnly) {
+            return;
+        }
+        timerRef.current && clearTimeout(timerRef.current);
+    }, [touchEventsOnly]);
+    const handleOnTouchStart = React.useCallback(() => {
+        startPressTimer();
+    }, [startPressTimer]);
+    const handleOnTouchEnd = React.useCallback(() => {
+        timerRef.current && clearTimeout(timerRef.current);
+    }, []);
+    return React.useMemo(() => ({
+        onClick: handleOnClick,
+        onMouseDown: handleOnMouseDown,
+        onMouseUp: handleOnMouseUp,
+        onTouchStart: handleOnTouchStart,
+        onTouchEnd: handleOnTouchEnd,
+        onKeyDown: handleOnKeyDown,
+        onKeyUp: handleOnKeyUp
+    }), [
+        handleOnClick,
+        handleOnKeyDown,
+        handleOnKeyUp,
+        handleOnMouseDown,
+        handleOnMouseUp,
+        handleOnTouchEnd,
+        handleOnTouchStart
+    ]);
+}
+
 // Copyright (c) Microsoft Corporation.
 // Coin max size is set to PersonaSize.size100
 const DEFAULT_PERSONA_MAX_SIZE_PX = 100;
@@ -8095,6 +8182,26 @@ const VideoTile = (props) => {
         const currentObserver = observer.current;
         return () => currentObserver.disconnect();
     }, [observer, videoTileRef]);
+    /* @conditional-compile-remove(pinned-participants) */
+    const useLongPressProps = React.useMemo(() => {
+        return {
+            onLongPress: () => {
+                var _a;
+                (_a = props.onLongTouch) === null || _a === void 0 ? void 0 : _a.call(props);
+            },
+            touchEventsOnly: true
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.onLongTouch]);
+    /* @conditional-compile-remove(pinned-participants) */
+    const longPressHandlers = useLongPress(useLongPressProps);
+    const longPressHandlersTrampoline = React.useMemo(() => {
+        /* @conditional-compile-remove(pinned-participants) */
+        return longPressHandlers;
+    }, [
+        /* @conditional-compile-remove(pinned-participants) */
+        longPressHandlers
+    ]);
     const placeholderOptions = {
         userId,
         text: initialsName || displayName,
@@ -8109,7 +8216,7 @@ const VideoTile = (props) => {
     const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));
     const participantStateString = participantStateStringTrampoline(props, locale);
     return (React__default['default'].createElement(reactNorthstar.Ref, { innerRef: videoTileRef },
-        React__default['default'].createElement(react.Stack, { "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
+        React__default['default'].createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
                 background: theme.palette.neutralLighter,
                 borderRadius: theme.effects.roundedCorner4
             }, isSpeaking && {
@@ -8122,7 +8229,7 @@ const VideoTile = (props) => {
                     width: '100%',
                     height: '100%'
                 }
-            }, styles === null || styles === void 0 ? void 0 : styles.root) },
+            }, styles === null || styles === void 0 ? void 0 : styles.root) }, longPressHandlersTrampoline),
             isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles), style: { opacity: participantStateString ? 0.4 : 1 } }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             (canShowLabel || participantStateString) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
                 React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
@@ -11161,69 +11268,6 @@ const formatPhoneNumber = (phoneNumber) => {
     return `${countryCodeNA}(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, phoneNumber.length)}`;
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-function useLongPress(onClick, onLongPress, isMobile) {
-    const timerRef = React.useRef();
-    const [isLongPress, setIsLongPress] = React.useState(false);
-    const [action, setAction] = React.useState(false);
-    function startPressTimer() {
-        setIsLongPress(false);
-        timerRef.current = setTimeout(() => {
-            setIsLongPress(true);
-        }, 500);
-    }
-    function handleOnClick() {
-        // when it's mobile use ontouchstart and ontouchend to fire onclick and onlongpress event
-        if (isMobile) {
-            return;
-        }
-        onClick();
-        if (isLongPress) {
-            onLongPress();
-            return;
-        }
-    }
-    function handleOnKeyDown() {
-        if (action) {
-            setAction(false);
-            startPressTimer();
-        }
-    }
-    function handleOnKeyUp() {
-        setAction(true);
-        timerRef.current && clearTimeout(timerRef.current);
-    }
-    function handleOnMouseDown() {
-        startPressTimer();
-    }
-    function handleOnMouseUp() {
-        timerRef.current && clearTimeout(timerRef.current);
-    }
-    function handleOnTouchStart() {
-        startPressTimer();
-    }
-    function handleOnTouchEnd() {
-        if (isMobile) {
-            isLongPress ? onLongPress() : onClick();
-        }
-        timerRef.current && clearTimeout(timerRef.current);
-    }
-    return {
-        handlers: {
-            onClick: handleOnClick,
-            onMouseDown: handleOnMouseDown,
-            onMouseUp: handleOnMouseUp,
-            onTouchStart: handleOnTouchStart,
-            onTouchEnd: handleOnTouchEnd,
-            onKeyDown: handleOnKeyDown,
-            onKeyUp: handleOnKeyUp
-        }
-    };
-}
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -11267,14 +11311,17 @@ const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
     const { digit, index, onClick, onLongPress, isMobile = false } = props;
-    const clickFunction = React.useCallback(() => __awaiter$j(void 0, void 0, void 0, function* () {
-        onClick(digit, index);
-    }), [digit, index, onClick]);
-    const longPressFunction = React.useCallback(() => __awaiter$j(void 0, void 0, void 0, function* () {
-        onLongPress(digit, index);
-    }), [digit, index, onLongPress]);
-    const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);
-    return (React__default['default'].createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, handlers),
+    const useLongPressProps = React__default['default'].useMemo(() => ({
+        onClick: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            onClick(digit, index);
+        }),
+        onLongPress: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            onLongPress(digit, index);
+        }),
+        touchEventsOnly: isMobile
+    }), [digit, index, isMobile, onClick, onLongPress]);
+    const longPressHandlers = useLongPress(useLongPressProps);
+    return (React__default['default'].createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, longPressHandlers),
         React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(letterStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.letter) }, (_d = props.letter) !== null && _d !== void 0 ? _d : ' '))));