From 58645b5f0d83bbe0d2b1d6a3e2a258bd96f9f7a6 Mon Sep 17 00:00:00 2001
From: danielc-n <nicolas.condomitti@xenizo.fr>
Date: Fri, 18 Oct 2024 16:50:54 +0200
Subject: [PATCH] few bugfix, regarding juxtalinear editor and renaming the
 translationHelpImageCard to translationHelpMultimediaCard

---
 .../Navigation/reference/SelectBook.js        |   2 +-
 .../EditorPage/Reference/TranslationHelps.js  |   5 +-
 .../Reference/TranslationHelpsCard.js         |  24 ++-
 .../Reference/TranslationHelpsImageCard.js    | 177 ------------------
 .../EditorPage/TextEditor/index.jsx           |   2 +-
 5 files changed, 23 insertions(+), 187 deletions(-)
 delete mode 100644 renderer/src/components/EditorPage/Reference/TranslationHelpsImageCard.js

diff --git a/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js b/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js
index cb28054e..e4642727 100644
--- a/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js
+++ b/renderer/src/components/EditorPage/Navigation/reference/SelectBook.js
@@ -38,7 +38,7 @@ export default function SelectBook({
   function bookSelect(e, bookId) {
     e.preventDefault();
     onChangeBook(bookId, selectedBooks[0]);
-    setBook(bookId);
+    setBook && setBook(bookId);
     if (multiSelectBook === false) { selectBook(); }
   }
 
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelps.js b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
index b04e789c..5a45f9c5 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelps.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { ReferenceContext } from '@/components/context/ReferenceContext';
 import { debug } from '../../../logger';
 import TranslationHelpsCard from './TranslationHelpsCard';
-import TranslationHelpsImageCard from './TranslationHelpsImageCard';
+import TranslationHelpsMultimediaCard from './TranslationHelpsMultimediaCard';
 import ObsTnCard from './OBS/ObsTn';
 import ObsTwlCard from './OBS/ObsTwlCard';
 import packageInfo from '../../../../../package.json';
@@ -50,7 +50,6 @@ const TranslationHelps = ({
           const pathRelationFile = path.resolve(pathToIngredients, 'relation.txt');
           
           if (fs.existsSync(pathRelationFile)) {
-            console.log("HERE WHAT NOPE")
             setImagesPath(pathToIngredients);
             const relationFileContent = fs.readFileSync(pathRelationFile, 'utf8');
             const fileName = findFileByPartialName(fs, path.resolve(resourceDirPath), relationFileContent.trim());
@@ -93,7 +92,7 @@ const TranslationHelps = ({
           );
         case 'tir':
           return (
-            <TranslationHelpsImageCard
+            <TranslationHelpsMultimediaCard
               title={t('label-resource-tir')}
               verse={verse}
               chapter={chapter}
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js b/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
index c3143063..2a381a34 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelpsCard.js
@@ -108,12 +108,24 @@ export default function TranslationHelpsCard({
               let currentFile;
               if (isBurrito) {
                 const asArray = Object.entries(offlineResource?.data?.value?.ingredients);
-                currentFile = asArray.filter(([key, value]) => {
+                // currentFile = asArray.filter(([key, value]) => {
+                //   if (key.toLocaleLowerCase().indexOf(projectId.toLowerCase()) !== -1) {
+                //     console.log("key ==", key);
+                //     console.log("value ==", value);
+                //     return value;
+                //   }
+                //   return [];
+                // })[0];
+                console.log("projectId.toLowerCase() ==", projectId.toLowerCase());
+                for (let [key, value] of asArray) {
                   if (key.toLocaleLowerCase().indexOf(projectId.toLowerCase()) !== -1) {
-                    return value;
+                    console.log("key == ", key)
+                    console.log("value == ", value)
+                    currentFile = key;
+                    break;
                   }
-                  return [];
-                })[0];
+                }
+                console.log("currentFile IN IF", currentFile)
               } else {
                 currentFile = offlineResource?.data?.value?.projects.filter((item) => {
                   if (item?.identifier.toLowerCase() === projectId.toLowerCase()) {
@@ -122,9 +134,11 @@ export default function TranslationHelpsCard({
                   return null;
                 });
               }
+              console.log("currentFile OUT IF", currentFile)
               if (currentFile?.length > 0) {
                 // const filecontent = await fs.readFileSync(path.join(folder, projectName, currentFile[0].path), 'utf8');
-                const filecontent = await fs.readFileSync(path.join(folder, projectName, isBurrito ? currentFile[0] : currentFile[0].path), 'utf8');
+                const filecontent = await fs.readFileSync(path.join(folder, projectName, isBurrito ? currentFile : currentFile[0].path), 'utf8');
+                console.log("currentFile[0]", currentFile[0])
                 // convert tsv to json
                 const headerArr = filecontent.split('\n')[0].split('\t');
                 let noteName;
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelpsImageCard.js b/renderer/src/components/EditorPage/Reference/TranslationHelpsImageCard.js
deleted file mode 100644
index 6e21d114..00000000
--- a/renderer/src/components/EditorPage/Reference/TranslationHelpsImageCard.js
+++ /dev/null
@@ -1,177 +0,0 @@
-/* eslint-disable */
-// import PropTypes from 'prop-types';
-import React, { useEffect, useState } from 'react';
-import i18n from '../../../translations/i18n';
-
-const VideoPlayer = ({ videoUrl }) => {
-  const [videoSrc, setVideoSrc] = useState(videoUrl); // Default to remote video URL
-
-  useEffect(() => {
-    const loadVideo = async () => {
-      // Check if video is already cached
-      const cachedVideoPath = await global.ipcRenderer.invoke('is-video-cached', videoUrl);
-      if (cachedVideoPath) {
-        setVideoSrc(`file://${cachedVideoPath}`); // Use cached video path
-      } else {
-        // If not cached, download and cache the video
-        const downloadedPath = await global.ipcRenderer.invoke('download-and-cache-video', videoUrl);
-        setVideoSrc(`file://${downloadedPath}`); // Set downloaded video path
-      }
-    };
-
-    loadVideo();
-  }, [videoUrl]);
-
-  return (
-    <video src={videoSrc} controls className="gallery-video" />
-  );
-};
-
-export default function TranslationHelpsImageCard({
-  verse,
-  chapter,
-  projectId,
-  folderPath,
-  linkedFolderPath,
-}) {
-  const [imagePaths, setImagePaths] = useState([]);
-
-  const convertToFileUrl = (path) => `file://${path}`;
-
-  // const CACHE_DIR = path.join(folderPath, 'cached_videos');
-
-  /**
-   * Function to get image paths from a TSV file based on book code, chapter, and verse.
-   *
-   * @returns {Array<string>} - A list of image paths for the specified reference.
-   */
-  const getImagePathsFromTSV = () => {
-    const fs = window.require('fs');
-    const path = require('path');
-    const filePath = path.join(folderPath, `${projectId}.tsv`);
-    const reference = `${chapter}:${verse}`;
-    const finalImagePaths = [];
-
-    // Check if the file exists
-    if (!fs.existsSync(filePath)) {
-      return [];
-    }
-    
-    // Read the TSV file
-    const fileContent = fs.readFileSync(filePath, 'utf-8');
-    
-    // Split the content into lines
-    const lines = fileContent.trim().split('\n');
-    
-    let metadataJson;
-    let columns;
-    let realPath;
-    let dashedName;
-    let dashedNameSplited;
-    let localizedNameTmp;
-    if (linkedFolderPath === '') {
-      metadataJson = JSON.parse(fs.readFileSync(path.join(folderPath, '..', 'metadata.json')));
-      // Loop through each line, starting from 1 to skip the header
-      for (let i = 1; i < lines.length; i++) {
-        columns = lines[i].split('\t');
-        // Check if the reference matches
-        if (columns[0] === reference) {
-          // Add the last column (image path) to the list
-          dashedName = columns[columns.length - 1].split('/').at(-1).split('.')[0];
-          localizedNameTmp = metadataJson.localizedNames[dashedName]?.short[i18n.language] ?? '';
-          finalImagePaths.push([localizedNameTmp, columns[columns.length - 1]]);
-        }
-      }
-    } else {
-      metadataJson = JSON.parse(fs.readFileSync(path.join(linkedFolderPath, '..', 'metadata.json')));
-
-      // Loop through each line, starting from 1 to skip the header
-      for (let i = 1; i < lines.length; i++) {
-        columns = lines[i].split('\t');
-  
-        // Check if the reference matches
-        if (columns[0] === reference) {
-          // Add the last column (image path) to the list
-          dashedName = columns[columns.length - 1].split('images/')[1];
-          dashedNameSplited = dashedName.split('/')[1];
-          localizedNameTmp = metadataJson.localizedNames[dashedNameSplited];
-          realPath = convertToFileUrl(path.join(linkedFolderPath, `${dashedName }.jpg`));
-          if (localizedNameTmp) {
-            localizedNameTmp = localizedNameTmp.short[i18n.language] ?? localizedNameTmp.short.en ?? '';
-            finalImagePaths.push([localizedNameTmp, realPath]);
-          } else {
-            finalImagePaths.push([dashedNameSplited, realPath]);
-          }
-        }
-      }
-    }
-    return finalImagePaths;
-  };
-
-  useEffect(() => {
-    setImagePaths(getImagePathsFromTSV());
-  }, [chapter, verse, projectId, linkedFolderPath]);
-
-  const [zoomedImage, setZoomedImage] = useState(null);
-
-  const closeZoom = () => {
-    setZoomedImage(null);
-  };
-
-  const handleImageClick = (imageSrc, imageTitle) => {
-    setZoomedImage({ src: imageSrc, title: imageTitle });
-  };
-
-  return (
-    <div className="image-gallery">
-      <div className="image-scroll">
-        {imagePaths.length > 0 && imagePaths
-          .sort((a, b) => a[0].localeCompare(b[0]))  // Sort by name
-          .map((imagePath, index) => (
-            <div key={index} className="image-wrapper">
-              <div className="image-name">{imagePath[0]}</div>
-              {/* Check if the path is a video (e.g., ends with .mp4) */}
-              {imagePath[1].match(/\.(mp4|webm|ogg)$/i) ? (
-                // <video
-                //   key={index}
-                //   src={imagePath[1]}
-                //   controls
-                //   className="gallery-video"
-                // />
-                <VideoPlayer key={index} videoUrl={imagePath[1]} />
-              ) : (
-                <img
-                  key={index}
-                  src={imagePath[1]}
-                  alt={`Image ${index + 1}`}
-                  className="gallery-image"
-                  onClick={() => handleImageClick(imagePath[1], imagePath[0])}
-                />
-              )}
-            </div>
-          ))}
-        {imagePaths.length === 0 && "No resources image/video for this Chapter/Verse"}
-      </div>
-  
-      {zoomedImage && !zoomedImage.src.match(/\.(mp4|webm|ogg)$/i) && (
-        <div className="zoomed-image-container" onClick={closeZoom}>
-          <div className="zoomed-content">
-            <span className="close-zoom" onClick={closeZoom}>X</span>
-            <div className="zoomed-image-name">{zoomedImage.title}</div>
-            <img src={zoomedImage.src} alt="Zoomed" className="zoomed-image" />
-          </div>
-        </div>
-      )}
-  
-      {zoomedImage && zoomedImage.src.match(/\.(mp4|webm|ogg)$/i) && (
-        <div className="zoomed-image-container" onClick={closeZoom}>
-          <div className="zoomed-content">
-            <span className="close-zoom" onClick={closeZoom}>X</span>
-            <div className="zoomed-image-name">{zoomedImage.title}</div>
-            <video src={zoomedImage.src} controls className="zoomed-video" />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/renderer/src/components/EditorPage/TextEditor/index.jsx b/renderer/src/components/EditorPage/TextEditor/index.jsx
index 34573e64..595ca7e9 100644
--- a/renderer/src/components/EditorPage/TextEditor/index.jsx
+++ b/renderer/src/components/EditorPage/TextEditor/index.jsx
@@ -47,7 +47,7 @@ export default function TextEditor() {
     }
     const { usj } = cachedData;
     if (!usj && usj?.entries(usj).length === 0) { return; }
-    console.log(usj);
+    // console.log(usj);
     setUsjInput(usj);
   }, [book, cachedData]);