From e67ce56da47d63cc78a1c3551302878311a3fb28 Mon Sep 17 00:00:00 2001
From: Rajesh Kumar <rajeshtezu90@gmail.com>
Date: Tue, 25 Jul 2023 22:54:26 +0530
Subject: [PATCH] fix(WebexRemoteMedia): make remote video draggable

---
 package-lock.json                             | 38 ++++++-----
 package.json                                  |  3 +-
 .../WebexInMeeting.stories.storyshot          | 64 ++++++++++++-------
 .../WebexMeeting.stories.storyshot            | 16 +++--
 .../WebexRemoteMedia/WebexRemoteMedia.jsx     | 11 ++--
 .../WebexRemoteMedia.stories.storyshot        | 32 ++++++----
 src/storyshots.test.js                        |  2 +
 7 files changed, 103 insertions(+), 63 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 35846e678..58888a10e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9704,10 +9704,9 @@
       }
     },
     "clsx": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
-      "dev": true
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
     },
     "co": {
       "version": "4.6.0",
@@ -17484,8 +17483,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "3.13.1",
@@ -18195,7 +18193,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -21543,8 +21540,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -23118,13 +23114,24 @@
       "dev": true
     },
     "react-draggable": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz",
-      "integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==",
-      "dev": true,
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
       "requires": {
         "clsx": "^1.1.1",
-        "prop-types": "^15.6.0"
+        "prop-types": "^15.8.1"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          }
+        }
       }
     },
     "react-element-to-jsx-string": {
@@ -23184,8 +23191,7 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-lifecycles-compat": {
       "version": "3.0.4",
diff --git a/package.json b/package.json
index d3d12dadf..0b26c4458 100644
--- 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
index bc901d6aa..d7d868c6e 100644
--- 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
index a8c448309..74fa0c13b 100644
--- 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
index a941d2d6a..f32de2a6f 100644
--- 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
index 2f3059605..4f9da4ab4 100644
--- 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
index 622f7ec02..551e05be5 100644
--- 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.
  *