Change right-click video menu to left-click (#10548)

* Change right-click video menu to left-click * Update e2e test
replayio · May 31, 2024 · c8d7a65 · c8d7a65
1 parent cb4ae84
commit c8d7a65
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 16 deletions.
diff --git a/packages/e2e-tests/helpers/comments.ts b/packages/e2e-tests/helpers/comments.ts
@@ -163,6 +163,11 @@ export async function addVisualComment(
     async () => {
       const element = page.locator("#graphics");
       await element.click({ position: { x, y } });
+
+      await selectContextMenuItem(page, {
+        contextMenuItemTestName: "ContextMenuItem-AddComment",
+        contextMenuTestId: "ContextMenu-Video",
+      });
     },
     "visual",
     text

diff --git a/src/ui/components/Video/Video.tsx b/src/ui/components/Video/Video.tsx
@@ -100,15 +100,7 @@ export default function Video() {
   const dispatch = useAppDispatch();
   const panel = useAppSelector(getSelectedPrimaryPanel);
 
-  const { addComment, contextMenu, onContextMenu } = useVideoContextMenu();
-
-  const onClick = (event: MouseEvent) => {
-    dispatch(stopPlayback());
-
-    if (nodePickerStatus == "disabled") {
-      addComment(event);
-    }
-  };
+  const { contextMenu, onContextMenu: onClick } = useVideoContextMenu();
 
   const showBeforeAfterTestStepToggles = panel === "cypress";
 
@@ -124,7 +116,7 @@ export default function Video() {
         <ReplayLogo size="sm" color="gray" />
       </div>
 
-      <img className={styles.Image} id="graphics" onClick={onClick} onContextMenu={onContextMenu} />
+      <img className={styles.Image} id="graphics" onClick={onClick} />
 
       {/* Graphics that are relative to the rendered screenshot go here; this container is automatically positioned to align with the screenshot */}
       <div className={styles.Graphics} id="overlay-graphics">

diff --git a/src/ui/components/Video/useVideoContextMenu.tsx b/src/ui/components/Video/useVideoContextMenu.tsx
@@ -156,12 +156,6 @@ export default function useVideoContextMenu() {
   }, [contextMenu, hideMenu, isPlaying]);
 
   return {
-    addComment: (e: React.MouseEvent) =>
-      addComment({
-        pageX: e.pageX,
-        pageY: e.pageY,
-        position: getPositionForAddingComment(e),
-      }),
     contextMenu,
     onContextMenu,
   };