Videos are now pulled directly from the file system instead of copying them

Author: deusprogrammer

release/app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dub-editor-electron",
-    "version": "1.3.1-alpha-preview",
+    "version": "1.4.0-beta",
     "description": "A dub editor for What the Dub and Rifftrax games by Wide Right Studios",
     "license": "MIT",
     "author": {

src/main/main.ts

@@ -92,9 +92,9 @@ const processVideo = (inputFilePath: string, outputFilePath: string, startTime:
     });
 }
 
-const trimAndWriteVideo = async (outputFilePath: string, startTime: number, endTime: number) => {
+const trimAndWriteVideo = async (inputFilePath: string, outputFilePath: string, startTime: number, endTime: number) => {
     try {
-        await processVideo(BATCH_VIDEO_TEMP_FILE, outputFilePath, startTime, endTime - startTime);
+        await processVideo(inputFilePath, outputFilePath, startTime, endTime - startTime);
     } catch (err) {
         console.error("Unable to trim video: " + err);
         throw new Error("Unable to trim video: " + err);
@@ -557,8 +557,16 @@ const createWindow = async () => {
         return { action: 'deny' };
     });
 
-    protocol.interceptFileProtocol('app', (request, callback) => {
-        let url = request.url.substring(6);
+    protocol.interceptFileProtocol('localfile', (request, callback) => {
+        let filePath = request.url.substring(12);
+        
+        console.log("FILE PATH: " + filePath);
+
+        callback(filePath);
+    });
+
+    protocol.interceptFileProtocol('game', (request, callback) => {
+        let url = request.url.substring(7);
         let pattern = /^(rifftrax|whatthedub)\/(.+)\.(mp4|srt)$/;
 
         if (url === "batch.tmp.mp4") {
@@ -667,6 +675,7 @@ ipcMain.handle('getConfig', () => {
 
 ipcMain.handle('storeBatch', async (event, { clips, video, title }) => {
     batchCache = {
+        video,
         title,
         clipNumber: 1,
         clips,
@@ -684,16 +693,15 @@ ipcMain.handle('hasBatch', (event) => {
 });
 
 ipcMain.handle('nextBatchClip', (event) => {
-    const {startTime, endTime} = batchCache.clips[0];
     return {
         title: batchCache.title,
         clipNumber: batchCache.clipNumber,
         clip: batchCache.clips[0],
-        video: batchCache.video + `#t=${startTime/1000},${endTime/1000}`
+        video: batchCache.video
     };
 });
 
-ipcMain.handle('processBatchClip', async (event, {subtitles, title, clipNumber, game}) => {
+ipcMain.handle('processBatchClip', async (event, {videoSource, subtitles, title, clipNumber, game}) => {
     console.log(
         `STORING ${title}-${clipNumber} for game ${game} with subtitles ${subtitles}`
     );
@@ -720,7 +728,7 @@ ipcMain.handle('processBatchClip', async (event, {subtitles, title, clipNumber,
         const subFilePath: string = `${subsDirectory}/${baseFileName}.srt`;
 
         // Write video clip
-        await trimAndWriteVideo(videoFilePath, clip.startTime, clip.endTime);
+        await trimAndWriteVideo(videoSource.replace("localfile://", ""), videoFilePath, clip.startTime, clip.endTime);
 
         // Write matching subtitles
         fs.writeFileSync(subFilePath, subtitles);
@@ -822,7 +830,7 @@ ipcMain.handle('getVideo', (event, { id, game }) => {
 
 ipcMain.handle(
     'storeVideo',
-    (event, { base64ByteStream, subtitles, title, clipNumber, game }) => {
+    (event, { videoSource, subtitles, title, clipNumber, game }) => {
         console.log(
             `STORING ${title}-${clipNumber} for game ${game} with subtitles ${subtitles}`
         );
@@ -849,10 +857,7 @@ ipcMain.handle(
 
         console.log('SAVING TO ' + videoFilePath + '\n' + subFilePath);
 
-        fs.writeFileSync(
-            videoFilePath,
-            Buffer.from(base64ByteStream, 'base64')
-        );
+        fs.copyFileSync(videoSource.replace("localfile://", ""), videoFilePath);
         fs.writeFileSync(subFilePath, subtitles);
 
         return baseFileName;
@@ -1031,6 +1036,17 @@ ipcMain.handle('openDialog', async () => {
     }
 });
 
+ipcMain.handle('openVideoFile', async () => {
+    const response = await dialog.showOpenDialog({
+        properties: ['openFile'],
+    });
+    if (!response.canceled) {
+        return response.filePaths[0];
+    } else {
+        return null;
+    }
+});
+
 ipcMain.handle('setActive', async (event, { id, game, isActive }) => {
     console.log('TOGGLING ' + id + ' in game ' + game + ' to ' + isActive);
 

src/main/preload.ts

@@ -30,6 +30,7 @@ contextBridge.exposeInMainWorld('api', {
             'exportCollection',
             'setActive',
             'openDialog',
+            'openVideoFile',
             'importZip',
         ];
         if (validChannels.includes(channel)) {

src/renderer/App.jsx

@@ -27,7 +27,7 @@ import { interstitialAtom } from './atoms/interstitial.atom';
 import './App.css';
 import 'react-toastify/dist/ReactToastify.css';
 
-const VERSION = 'v1.3.1-alpha-preview';
+const VERSION = 'v1.4.0-beta';
 
 let App = (props) => {
     const navigate = useNavigate();

src/renderer/api/VideoAPI.js

@@ -2,6 +2,11 @@ const storeTempVideo = async (videoArrayBuffer, type) => {
     return await window.api.send('storeTempVideo', {videoArrayBuffer , type});
 };
 
+const getVideoFile = async () => {
+    return await window.api.send('openVideoFile');
+};
+
 export default {
-    storeTempVideo
+    storeTempVideo,
+    getVideoFile
 };

src/renderer/routes/VideoView.jsx

@@ -27,7 +27,7 @@ let VideoView = (props) => {
                     <div>Name: {videoDetails.name}</div>
                     <div>
                         <WhatTheDubPlayer
-                            videoSource={`app://${params.game}/${params.id}.mp4`}
+                            videoSource={`game://${params.game}/${params.id}.mp4`}
                             isPlaying={false}
                             videoPosition={0}
                             subs={convertSrtToSubtitles(videoDetails.srtBase64)}

src/renderer/routes/editor/AdvancedEditor.jsx

@@ -77,7 +77,8 @@ let AdvancedEditor = () => {
             }
         );
         let { clip, video, title, clipNumber } = batchClip;
-        setVideoSource("app://batch.tmp.mp4");
+        console.log("DOG WATER: " + video);
+        setVideoSource(video);
         setVideoLength((clip.endTime - clip.startTime) / 1000);
         setBatchClip(batchClip);
         setStartTime(clip.startTime);
@@ -87,23 +88,9 @@ let AdvancedEditor = () => {
         setCurrentPosition(clip.startTime / 1000);
     };
 
-    let onFileOpen = (e) => {
-        let f = e.target.files[0];
-        let fr = new FileReader();
-        handleInterstitial(
-            new Promise((resolve, reject) => {
-                fr.onload = async () => {
-                    let url = await VideoAPI.storeTempVideo(fr.result, "clip");
-                    console.log("URL: " + url);
-                    setVideoSource(url);
-                    resolve();
-                };
-        }),
-        (isOpen) => {
-            setInterstitialState({ isOpen, message: 'Loading Video...' });
-        })
-
-        fr.readAsArrayBuffer(f);
+    let onFileOpen = async () => {
+        let filePath = await VideoAPI.getVideoFile();
+        setVideoSource(`localfile://${filePath}`);
     };
 
     let convertSecondsToTimestamp = (seconds) => {
@@ -142,7 +129,7 @@ let AdvancedEditor = () => {
         try {
             setButtonsDisabled(true);
             let videoId = await addVideo(
-                videoSource.substring(videoSource.indexOf(',') + 1),
+                videoSource,
                 subs,
                 videoName,
                 clipNumber,
@@ -333,7 +320,7 @@ let AdvancedEditor = () => {
                         length you want it. However you can use batch mode if
                         you want to cut up your video into smaller pieces.
                     </p>
-                    <input type="file" accept=".mp4" onChange={onFileOpen} />
+                    <button onClick={onFileOpen}>Open Video</button>
                     <Link to="/">
                         <button type="button">Cancel</button>
                     </Link>

src/renderer/routes/editor/ClipCutter.jsx

@@ -53,24 +53,9 @@ let ClipCutter = () => {
         setWindowSize({ width: window.innerWidth, height: window.innerHeight });
     };
 
-    let onFileOpen = (e) => {
-        let f = e.target.files[0];
-        let fr = new FileReader();
-
-        handleInterstitial(
-            new Promise((resolve, reject) => {
-                fr.onload = async () => {
-                    let url = await VideoAPI.storeTempVideo(fr.result, "batch");
-                    setVideoSource(url);
-                    resolve();
-                };
-            }),
-            (isOpen) => {
-                setInterstitialState({ isOpen, message: 'Loading Video...' });
-            }
-        );
-
-        fr.readAsArrayBuffer(f);
+    let onFileOpen = async () => {
+        let filePath = await VideoAPI.getVideoFile();
+        setVideoSource(`localfile://${filePath}`);
     };
 
     let convertSecondsToTimestamp = (seconds) => {
@@ -226,7 +211,7 @@ let ClipCutter = () => {
                     <p>
                         Please choose the video you wish to create clips from.
                     </p>
-                    <input type="file" accept=".mp4" onChange={onFileOpen} />
+                    <button onClick={onFileOpen}>Open Video</button>
                     <Link to="/">
                         <button type="button">Cancel</button>
                     </Link>

src/renderer/util/VideoTools.js

@@ -139,7 +139,7 @@ export let createWebVttDataUri = (subtitles, substitution, offset = 0) => {
 };
 
 export let addVideo = async (
-    base64ByteStream,
+    videoSource,
     subtitles,
     title,
     clipNumber = 1,
@@ -148,14 +148,15 @@ export let addVideo = async (
 ) => {
     if (isBatch) {
         return await window.api.send('processBatchClip', {
+            videoSource,
             subtitles: convertSubtitlesToSrt(subtitles, type),
             title,
             clipNumber,
             game: type,
         });
     }
     return await window.api.send('storeVideo', {
-        base64ByteStream,
+        videoSource,
         subtitles: convertSubtitlesToSrt(subtitles, type),
         title,
         clipNumber,