Enhance video player

renderer/src/components/EditorPage/VideoEditor/VideoEditor.js

@@ -5,7 +5,7 @@ import { SnackBar } from '@/components/SnackBar';
 import { readFile } from '@/core/editor/readFile';
 import { isElectron } from '@/core/handleElectron';
 import { useState, useEffect, useContext } from 'react';
-import { useVerseJoining } from '@/hooks/useVerseJoining';
+import { useVerseJoining } from '@/hooks/video/useVerseJoining';
 import EmptyScreen from '@/components/Loading/EmptySrceen';
 import { readRefMeta } from '@/core/reference/readRefMeta';
 import LoadingScreen from '@/components/Loading/LoadingScreen';

renderer/src/components/EditorPage/VideoEditor/VideoPlayer.js

@@ -37,7 +37,6 @@ const VideoPlayer = ({
   const [showVideoRecorder, setShowVideoRecorder] = useState(false);
   const [currentRecordingVerse, setCurrentRecordingVerse] = useState(null);
   const [recorderMode, setRecorderMode] = useState('record');
-  const [isRecorderVisible, setIsRecorderVisible] = useState(true);
   const [contextMenu, setContextMenu] = useState({
     visible: false,
     x: 0,
@@ -107,10 +106,13 @@ const VideoPlayer = ({
     e.stopPropagation();
     const fs = window.require('fs');
     const path = window.require('path');
-    const filename = `${chapter}_${verseNumber}.webm`;
-    const filePath = path.join(location, filename);
+    const videoExists = ['webm', 'mp4'].some((ext) => fs.existsSync(path.join(location, `${chapter}_${verseNumber}.${ext}`)));
+
+    if (videoExists) {
+      const ext = ['webm', 'mp4'].find((ext) => fs.existsSync(path.join(location, `${chapter}_${verseNumber}.${ext}`)));
+      const filename = `${chapter}_${verseNumber}.${ext}`;
+      const filePath = path.join(location, filename);
 
-    if (fs.existsSync(filePath)) {
       setOpenModal({
         openModel: true,
         title: t('modal-title-re-record-video'),
@@ -158,9 +160,14 @@ const VideoPlayer = ({
     onChangeVerse(newVerseNumber.toString(), verse);
   };
 
-  const handleDeleteVideo = (e, verseNumber, videoFileName) => {
+  const handleDeleteVideo = (e, verseNumber) => {
     e.stopPropagation();
 
+    const fs = window.require('fs');
+    const path = window.require('path');
+    const ext = ['webm', 'mp4'].find((ext) => fs.existsSync(path.join(location, `${chapter}_${verseNumber}.${ext}`)));
+    const videoFileName = ext ? `${chapter}_${verseNumber}.${ext}` : null;
+
     setOpenModal({
       openModel: true,
       title: t('modal-title-delete-video'),
@@ -177,11 +184,7 @@ const VideoPlayer = ({
   const fs = window.require('fs');
   const path = window.require('path');
 
-  const doesVideoExistForVerse = (verseNumber) => {
-    const filename = `${chapter}_${verseNumber}.webm`;
-    const filePath = path.join(location, filename);
-    return fs.existsSync(filePath);
-  };
+  const doesVideoExistForVerse = (verseNumber) => ['webm', 'mp4'].some((ext) => fs.existsSync(path.join(location, `${chapter}_${verseNumber}.${ext}`)));
 
   return (
     <div className="bg-white rounded-md overflow-hidden">
@@ -253,7 +256,7 @@ const VideoPlayer = ({
 
                     <button
                       type="button"
-                      onClick={(e) => handleDeleteVideo(e, verseNum, `${chapter}_${verseNum}.webm`)}
+                      onClick={(e) => handleDeleteVideo(e, verseNum)}
                       className="flex items-center justify-center p-2 rounded-full border-2 border-error text-error hover:bg-error hover:text-white transition-all duration-200"
                       title="Delete recorded video"
                     >
@@ -300,11 +303,9 @@ const VideoPlayer = ({
           onClose={() => {
             setShowVideoRecorder(false);
             setCurrentRecordingVerse(null);
-            setIsRecorderVisible;
           }}
           onVerseChange={handleVerseChangeInRecorder}
           setOpenModal={setOpenModal}
-          isVisible={isRecorderVisible}
           setNotify={setNotify}
           setSnackText={setSnackText}
           setOpenSnackBar={setOpenSnackBar}