FEATURE: Add a comment to a film extract (closes #45).

Co-authored-by: Enzo SIMONOVICI <[email protected]>
Hypertopic · Jun 11, 2024 · c79b22d · c79b22d
1 parent b5072da
commit c79b22d
Show file tree

Hide file tree

Showing 8 changed files with 234 additions and 95 deletions.
diff --git a/features/step_definitions/event.rb b/features/step_definitions/event.rb
@@ -42,9 +42,8 @@
 end
 
 Quand("j’ajoute un timecode dans la glose ouverte") do
-  Capybara.using_wait_time(20) do
-    click_on_element('.timecode-ready', '[CTRL + SPACE] Appuyer pour marquer le début')
-  end
+  expect(page).to have_content('Appuyer')
+  click_on_element('.timecode-ready', '[CTRL + SPACE] Appuyer pour marquer le début')
   find("body").send_keys([:control, :space])
   find("body").send_keys([:control, :space])
-end
+end
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,7 @@
     "react-markdown": "^8.0.4",
     "react-notifications": "^1.7.4",
     "react-router-dom": "^6.4.3",
+    "react-youtube": "^10.1.0",
     "remark-definition-list": "^2.0.0",
     "remark-unwrap-images": "^4.0.0",
     "uuid": "^9.0.0",

diff --git a/frontend/src/components/EditableText.js b/frontend/src/components/EditableText.js
@@ -3,13 +3,19 @@ import '../styles/EditableText.css';
 import { useState, useEffect } from 'react';
 import FormattedText from './FormattedText';
 
-function EditableText({id, text, rubric, backend, setLastUpdate}) {
+function EditableText({id, text, rubric, backend, setLastUpdate, comment}) {
   const [beingEdited, setBeingEdited] = useState(false);
   const [editedDocument, setEditedDocument] = useState({
     text: (rubric) ? `{${rubric}} ${text}` : text
   });
   const PASSAGE = new RegExp(`\\{${rubric}} ?([^{]+)`);
 
+  useEffect(() => {
+    if (comment != '') {
+      handleTimecode();
+    }
+  }, [comment]);
+
   let handleClick = () => {
     setBeingEdited(true);
     backend.getDocument(id)
@@ -18,6 +24,17 @@ function EditableText({id, text, rubric, backend, setLastUpdate}) {
       });
   };
 
+  let handleTimecode = () => {
+    backend.getDocument(id)
+      .then((editedDocument) => {
+        setBeingEdited(true);
+        let editedText = (rubric)
+          ? editedDocument.text.replace(PASSAGE, `{${rubric}} ${editedDocument.text + comment}`)
+          : editedDocument.text + comment;
+        setEditedDocument({ ...editedDocument, text: editedText });
+      });
+  };
+
   let handleChange = (event) => {
     let editedText = (rubric)
       ? editedDocument.text.replace(PASSAGE, `{${rubric}} ${event.target.value}`)

diff --git a/frontend/src/components/FormattedText.js b/frontend/src/components/FormattedText.js
@@ -3,13 +3,17 @@ import remarkUnwrapImages from 'remark-unwrap-images';
 import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';
 import CroppedImage from './CroppedImage';
 import VideoComment from './VideoComment';
+import TimecodeBuilder from './TimecodeBuilder';
+import YouTube from 'react-youtube';
+import { useState } from 'react';
+
+function FormattedText({children, addComment}) {
 
-function FormattedText({children}) {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkDefinitionList, remarkUnwrapImages]}
       components={{
-        img: (x) => embedVideo(x) || CroppedImage(x),
+        img: (x) => embedVideo({...x, addComment}) || CroppedImage(x),
         p: (x) => VideoComment(x) || <p>{x.children}</p>,
         a: ({children, href}) => <a href={href}>{children}</a>
       }}
@@ -28,12 +32,37 @@ function getId(text) {
   return match ? match[1] : null;
 }
 
-function embedVideo({src}) {
+function embedVideo({src, addComment}) {
   const videoId = getId(src);
+  const [player, setPlayer] = useState(null);
+
+  let resetCount = 0;
+
   if (videoId) {
-    const embedLink = `https://www.youtube.com/embed/${videoId}`;
+
+    const opts = {
+      height: '300',
+      width: '80%',
+      playerVars: {
+        autoplay: 0,
+        allowFullScreen: 1
+      },
+    };
+
+    let onPlayerReady = (event) => {
+      if (event.target.g) {
+        if (resetCount == 1) {
+          setPlayer(event.target);
+        }
+        resetCount++;
+      }
+    };
+
     return (
-      <iframe width="80%" height="300" src={embedLink} frameBorder="0" allowFullScreen></iframe>
+      <div key={videoId} >
+        <YouTube videoId={videoId} opts={opts} onReady={onPlayerReady}/>
+        <TimecodeBuilder player={player} addComment={addComment}></TimecodeBuilder>
+      </div>
     );
   }
   return null;

diff --git a/frontend/src/components/OpenedDocuments.js b/frontend/src/components/OpenedDocuments.js
@@ -6,7 +6,15 @@ import Metadata from './Metadata';
 import Type, { TypeBadge } from './Type';
 import Passage from './Passage';
 
+import { useState } from 'react';
+
 function OpenedDocuments({backend, lectern, metadata, sourceMetadata, margin, setLastUpdate}) {
+  let [comment, setComment] = useState('');
+
+  function addComment(newText) {
+    setComment(newText);
+  }
+
   return (
     <Col className="lectern">
       <Row className ="runningHead">
@@ -17,7 +25,7 @@ function OpenedDocuments({backend, lectern, metadata, sourceMetadata, margin, se
       </Row>
       {lectern.map(({rubric, source, scholia}, i) =>
         <Passage key={rubric || i}
-          {...{source, rubric, scholia, margin, backend, setLastUpdate}}
+          {...{source, rubric, scholia, margin, backend, setLastUpdate, comment, addComment}}
         />)
       }
     </Col>