From 60c11c078433546922f4fb2d1dde7a0b873c6d85 Mon Sep 17 00:00:00 2001
From: danielc-n <nicolas.condomitti@xenizo.fr>
Date: Wed, 16 Oct 2024 15:55:14 +0200
Subject: [PATCH] implemented caching for videos

---
 main/index.js                                 |  33 ++++++
 .../EditorPage/Reference/TranslationHelps.js  |   2 +
 .../Reference/TranslationHelpsImageCard.js    | 100 ++++++------------
 styles/globals.css                            |  18 +++-
 4 files changed, 83 insertions(+), 70 deletions(-)

diff --git a/main/index.js b/main/index.js
index 410e69c7..48850760 100755
--- a/main/index.js
+++ b/main/index.js
@@ -19,6 +19,39 @@ function isDev() {
   return process.argv[2] == '--dev';
 }
 
+const CACHE_DIR = path.join(app.getPath('userData'), 'video-cache');
+
+if (!fs.existsSync(CACHE_DIR)) {
+  fs.mkdirSync(CACHE_DIR);
+}
+
+// Handle requests to check if a video is cached
+ipcMain.handle('is-video-cached', (event, videoUrl) => {
+  const videoFileName = path.basename(videoUrl);
+  const localVideoPath = path.join(CACHE_DIR, videoFileName);
+  return fs.existsSync(localVideoPath) ? localVideoPath : null;
+});
+
+// Handle requests to download and cache the video
+ipcMain.handle('download-and-cache-video', async (event, videoUrl) => {
+  const videoFileName = path.basename(videoUrl);
+  const localVideoPath = path.join(CACHE_DIR, videoFileName);
+
+  const net = require('electron').net;
+  const request = net.request(videoUrl);
+
+  return new Promise((resolve, reject) => {
+    const fileStream = fs.createWriteStream(localVideoPath);
+    request.on('response', (response) => {
+      response.pipe(fileStream);
+      fileStream.on('finish', () => resolve(localVideoPath));
+    });
+
+    request.on('error', reject);
+    request.end();
+  });
+});
+
 async function setPermissions(chromePath) {
   try {
     fs.chmodSync(chromePath, '755');
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelps.js b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
index 0a0c1a8b..b04e789c 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelps.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelps.js
@@ -48,7 +48,9 @@ const TranslationHelps = ({
         const pathToIngredients = path.resolve(resourceDirPath, offlineResource.data.projectDir, 'ingredients');
         if (pathToIngredients) {
           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());
diff --git a/renderer/src/components/EditorPage/Reference/TranslationHelpsImageCard.js b/renderer/src/components/EditorPage/Reference/TranslationHelpsImageCard.js
index bbe686e5..584eafb4 100644
--- a/renderer/src/components/EditorPage/Reference/TranslationHelpsImageCard.js
+++ b/renderer/src/components/EditorPage/Reference/TranslationHelpsImageCard.js
@@ -2,17 +2,30 @@
 // import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import i18n from '../../../translations/i18n';
-const { net } = require('electron');
-// import {
-//   useContent,
-// } from 'translation-helps-rcl';
-// import localForage from 'localforage';
-// import LoadingScreen from '@/components/Loading/LoadingScreen';
-// import ReferenceCard from './ReferenceCard';
-// import * as logger from '../../../logger';
-// import packageInfo from '../../../../../package.json';
-// import TabSelector from './TabSelector';
-// import './TranslationHelpsImageCard.css'; // Include CSS styles
+
+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,
@@ -25,56 +38,7 @@ export default function TranslationHelpsImageCard({
 
   const convertToFileUrl = (path) => `file://${path}`;
 
-  const CACHE_DIR = path.join(folderPath);
-
-  const isVideoCached = (videoUrl) => {
-    const videoFileName = path.basename(videoUrl);
-    const localVideoPath = path.join(CACHE_DIR, videoFileName);
-    return fs.existsSync(localVideoPath) ? localVideoPath : null;
-  };
-
-  const downloadAndCacheVideo = (videoUrl) => {
-    return new Promise((resolve, reject) => {
-      const videoFileName = path.basename(videoUrl);
-      const localVideoPath = path.join(CACHE_DIR, videoFileName);
-  
-      const request = net.request(videoUrl);
-      const fileStream = fs.createWriteStream(localVideoPath);
-  
-      request.on('response', (response) => {
-        response.pipe(fileStream);
-        fileStream.on('finish', () => {
-          resolve(localVideoPath);
-        });
-      });
-  
-      request.on('error', (err) => {
-        reject(err);
-      });
-  
-      request.end();
-    });
-  };
-
-  const loadVideo = async (videoUrl) => {
-    // Check if video is already cached
-    let localVideoPath = isVideoCached(videoUrl);
-    
-    if (!localVideoPath) {
-      // If not cached, download and cache the video
-      console.log(`Downloading and caching video: ${videoUrl}`);
-      localVideoPath = await downloadAndCacheVideo(videoUrl);
-    }
-  
-    return localVideoPath;
-  };
-  
-  
-
-
-  if (!fs.existsSync(CACHE_DIR)) {
-    fs.mkdirSync(CACHE_DIR);
-  }
+  // const CACHE_DIR = path.join(folderPath, 'cached_videos');
 
   /**
    * Function to get image paths from a TSV file based on book code, chapter, and verse.
@@ -94,7 +58,6 @@ export default function TranslationHelpsImageCard({
       return [];
     }
     
-    
     // Read the TSV file
     const fileContent = fs.readFileSync(filePath, 'utf-8');
     
@@ -167,12 +130,13 @@ export default function TranslationHelpsImageCard({
               <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"
-                />
+                // <video
+                //   key={index}
+                //   src={imagePath[1]}
+                //   controls
+                //   className="gallery-video"
+                // />
+                <VideoPlayer key={index} videoUrl={imagePath[1]} />
               ) : (
                 <img
                   key={index}
diff --git a/styles/globals.css b/styles/globals.css
index 3241feed..9a2440b3 100755
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -869,13 +869,13 @@ Select scribe theme Start
 	transform: scale(1.05);
 }
 
-.gallery-video {
+/* .gallery-video {
 	width: 300px;
 	height: auto;
 	border-radius: 10px;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 	outline: none;
-}
+} */
 
 .zoomed-image-container {
 	position: fixed;
@@ -921,6 +921,20 @@ Select scribe theme Start
 	z-index: 1001;
 }
 
+.gallery-video {
+	width: 300px;
+	height: auto;
+	border-radius: 10px;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.video-wrapper.big-picture .gallery-video {
+	width: 800px;
+	/* Bigger size for Big Picture mode */
+	height: auto;
+	transition: width 0.3s ease-in-out;
+	/* Smooth transition */
+}
 
 /**
   END IMAGE DISPLAY SECTION