fix(WebexRemoteMedia): make remote video draggable

webex · Jul 27, 2023 · e67ce56 · e67ce56
1 parent 3583b0d
commit e67ce56
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,8 @@
     "adaptivecards-templating": "^2.2.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.15.0",
-    "markdown-it": "^12.3.2"
+    "markdown-it": "^12.3.2",
+    "react-draggable": "^4.4.5"
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",

diff --git a/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.stories.storyshot b/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.stories.storyshot
@@ -22,12 +22,16 @@ Array [
       <div
         className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting wxc-remote-media--remote-video-n-share"
       >
-        <video
-          autoPlay={true}
-          className="wxc-remote-media__video wxc-remote-media__remote-video"
-          muted={true}
-          playsInline={true}
-        />
+        <Draggable
+          bounds="parent"
+        >
+          <video
+            autoPlay={true}
+            className="wxc-remote-media__video wxc-remote-media__remote-video"
+            muted={true}
+            playsInline={true}
+          />
+        </Draggable>
         <video
           autoPlay={true}
           className="wxc-remote-media__video wxc-remote-media__remote-share"
@@ -288,12 +292,16 @@ Array [
       <div
         className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
       >
-        <video
-          autoPlay={true}
-          className="wxc-remote-media__video wxc-remote-media__remote-video"
-          muted={true}
-          playsInline={true}
-        />
+        <Draggable
+          bounds="parent"
+        >
+          <video
+            autoPlay={true}
+            className="wxc-remote-media__video wxc-remote-media__remote-video"
+            muted={true}
+            playsInline={true}
+          />
+        </Draggable>
         <audio
           autoPlay={true}
         />
@@ -374,12 +382,16 @@ Array [
       <div
         className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting wxc-remote-media--remote-video-n-share"
       >
-        <video
-          autoPlay={true}
-          className="wxc-remote-media__video wxc-remote-media__remote-video"
-          muted={true}
-          playsInline={true}
-        />
+        <Draggable
+          bounds="parent"
+        >
+          <video
+            autoPlay={true}
+            className="wxc-remote-media__video wxc-remote-media__remote-video"
+            muted={true}
+            playsInline={true}
+          />
+        </Draggable>
         <video
           autoPlay={true}
           className="wxc-remote-media__video wxc-remote-media__remote-share"
@@ -466,12 +478,16 @@ Array [
       <div
         className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
       >
-        <video
-          autoPlay={true}
-          className="wxc-remote-media__video wxc-remote-media__remote-video"
-          muted={true}
-          playsInline={true}
-        />
+        <Draggable
+          bounds="parent"
+        >
+          <video
+            autoPlay={true}
+            className="wxc-remote-media__video wxc-remote-media__remote-video"
+            muted={true}
+            playsInline={true}
+          />
+        </Draggable>
       </div>
       <div
         className="wxc wxc-local-media wxc-in-meeting__local-media-in-meeting wxc-local-media--no-media"

diff --git a/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot b/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot
@@ -66,12 +66,16 @@ Array [
           <div
             className="wxc wxc-remote-media wxc-in-meeting__remote-media-in-meeting"
           >
-            <video
-              autoPlay={true}
-              className="wxc-remote-media__video wxc-remote-media__remote-video"
-              muted={true}
-              playsInline={true}
-            />
+            <Draggable
+              bounds="parent"
+            >
+              <video
+                autoPlay={true}
+                className="wxc-remote-media__video wxc-remote-media__remote-video"
+                muted={true}
+                playsInline={true}
+              />
+            </Draggable>
             <audio
               autoPlay={true}
             />

diff --git a/src/components/WebexRemoteMedia/WebexRemoteMedia.jsx b/src/components/WebexRemoteMedia/WebexRemoteMedia.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import React, {useContext, useEffect} from 'react';
+import Draggable from 'react-draggable';
 import PropTypes from 'prop-types';
 import Badge from '../generic/Badge/Badge';
 import Icon from '../generic/Icon/Icon';
@@ -84,10 +85,12 @@ export default function WebexRemoteMedia({
   } else if (hasMedia && hasOtherMembers) {
     remoteDisplay = (
       <>
-        {remoteVideo
-          && <video className={`${sc('video')} ${sc('remote-video')}`} ref={videoRef} muted playsInline autoPlay />}
-        {remoteShare
-          && <video className={`${sc('video')} ${sc('remote-share')}`} ref={shareRef} muted playsInline autoPlay />}
+        {remoteVideo && (
+          <Draggable bounds="parent">
+            <video className={`${sc('video')} ${sc('remote-video')}`} ref={videoRef} muted playsInline autoPlay />
+          </Draggable>
+        )}
+        {remoteShare && <video className={`${sc('video')} ${sc('remote-share')}`} ref={shareRef} muted playsInline autoPlay />}
         {remoteAudio && <audio ref={audioRef} autoPlay />}
       </>
     );

diff --git a/src/components/WebexRemoteMedia/__snapshots__/WebexRemoteMedia.stories.storyshot b/src/components/WebexRemoteMedia/__snapshots__/WebexRemoteMedia.stories.storyshot
@@ -11,12 +11,16 @@ Array [
       }
     }
   >
-    <video
-      autoPlay={true}
-      className="wxc-remote-media__video wxc-remote-media__remote-video"
-      muted={true}
-      playsInline={true}
-    />
+    <Draggable
+      bounds="parent"
+    >
+      <video
+        autoPlay={true}
+        className="wxc-remote-media__video wxc-remote-media__remote-video"
+        muted={true}
+        playsInline={true}
+      />
+    </Draggable>
     <video
       autoPlay={true}
       className="wxc-remote-media__video wxc-remote-media__remote-share"
@@ -230,12 +234,16 @@ Array [
       }
     }
   >
-    <video
-      autoPlay={true}
-      className="wxc-remote-media__video wxc-remote-media__remote-video"
-      muted={true}
-      playsInline={true}
-    />
+    <Draggable
+      bounds="parent"
+    >
+      <video
+        autoPlay={true}
+        className="wxc-remote-media__video wxc-remote-media__remote-video"
+        muted={true}
+        playsInline={true}
+      />
+    </Draggable>
   </div>,
   <video
     autoPlay={true}

diff --git a/src/storyshots.test.js b/src/storyshots.test.js
@@ -22,6 +22,8 @@ jest.mock('./util', () => ({
   uniqueId: () => 'wxc-0',
 }));
 
+jest.mock('react-draggable', () => 'Draggable');
+
 /**
  * Returns a mock DOM ref object for use of snapshot tests.
  *