Disable the selectivity of a text in video gallery for long touch to function properly (#2790)

* disable the selectivity of a text in video gallery for long touch to function properly

* Change files

* Duplicate change files for beta release

Author: prabhjot-msft

change-beta/@azure-communication-react-b3573c06-f7c3-42a4-a963-9a49eeb23b0c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "disable the selectivity of a text in video gallery for long touch to function properly",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-b3573c06-f7c3-42a4-a963-9a49eeb23b0c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "disable the selectivity of a text in video gallery for long touch to function properly",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoGallery.tsx

@@ -42,6 +42,18 @@ import { useId } from '@fluentui/react-hooks';
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 export const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+
+/**
+ * @private
+ * Styles to disable the selectivity of a text in video gallery
+ */
+export const unselectable = {
+  '-webkit-user-select': 'none',
+  '-webkit-touch-callout': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none'
+};
 /**
  * @private
  * Set aside only 6 dominant speakers for remaining audio participants
@@ -568,7 +580,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
       id={drawerMenuHostIdFromProp ? undefined : drawerMenuHostId}
       data-ui-id={ids.videoGallery}
       ref={containerRef}
-      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root)}
+      className={mergeStyles(videoGalleryOuterDivStyle, styles?.root, unselectable)}
     >
       {videoGalleryLayout}
       {