Added option to add video/text comments

.github/workflows/lint.yml

@@ -4,6 +4,9 @@ jobs:
     build:
         name: Lint Run
         runs-on: ubuntu-latest
+        strategy:
+          matrix:
+            node-version: [18.20.3]
         steps:
             - uses: actions/checkout@v2
             - name: Use Node.js ${{ matrix.node-version }}

.github/workflows/test.yml

@@ -4,6 +4,9 @@ jobs:
     build:
         name: Tests
         runs-on: ubuntu-latest
+        strategy:
+          matrix:
+            node-version: [18.20.3]
         steps:
             - uses: actions/checkout@v2
             - name: Use Node.js ${{ matrix.node-version }}

renderer/src/components/EditorPage/VideoEditor/VerseContextMenu.jsx

@@ -11,6 +11,8 @@ const VerseContextMenu = ({
   isJoinedVerse,
   onJoinVerse,
   onDisjoinVerse,
+  onOpenComments,
+  canOpenComments,
   onClose,
 }) => {
   const { t } = useTranslation();
@@ -29,6 +31,11 @@ const VerseContextMenu = ({
     onClose();
   };
 
+  const handleOpenComments = () => {
+    onOpenComments(verse);
+    onClose();
+  };
+
   return (
     <>
       <div
@@ -92,6 +99,29 @@ const VerseContextMenu = ({
           </button>
         )}
 
+        {canOpenComments && (
+          <button
+            type="button"
+            onClick={handleOpenComments}
+            className="w-full text-left px-4 py-2 hover:bg-gray-100 text-sm text-gray-700 flex items-center gap-2"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 10h8M8 14h5m8-2a9 9 0 11-4.5-7.8L21 3v5h-5"
+              />
+            </svg>
+            {t('label-comments', { defaultValue: 'Comme' })}
+          </button>
+        )}
+
       </div>
     </>
   );
@@ -106,6 +136,13 @@ VerseContextMenu.propTypes = {
   isJoinedVerse: PropTypes.bool.isRequired,
   onJoinVerse: PropTypes.func.isRequired,
   onDisjoinVerse: PropTypes.func.isRequired,
+  onOpenComments: PropTypes.func.isRequired,
+  canOpenComments: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
 };
+
+VerseContextMenu.defaultProps = {
+  canOpenComments: false,
+};
+
 export default VerseContextMenu;