Added the ability to add a clip to a collection

deusprogrammer · deusprogrammer · commit 8129edcf80fd · 2023-07-22T23:35:30.000-05:00
diff --git a/src/api/CollectionAPI.js b/src/api/CollectionAPI.js
@@ -0,0 +1,27 @@
+const getCollections = async (game) => {
+    return await window.api.send("getCollections", game);
+}
+
+const createNewCollection = async (collectionId, game) => {
+    return await window.api.send("createCollection", { game, collectionId });
+}
+
+const deleteCollection = async (collectionId, game, deleteFiles = false) => {
+    return await window.api.send("deleteCollection", { game, collectionId, deleteFiles });
+}
+
+const removeFromCollection = async (collectionId, game, videoId) => {
+    return collectionMap = await window.api.send("removeFromCollection", { game, collectionId, videoId });
+}
+
+const addToCollection = async (collectionId, game, videoId) => {
+    return collectionMap = await window.api.send("addToCollection", { game, collectionId, videoId });
+}
+
+export default {
+    getCollections,
+    createNewCollection,
+    deleteCollection,
+    removeFromCollection,
+    addToCollection
+}
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -501,6 +501,8 @@ ipcMain.handle('storeVideo', (event, { base64ByteStream, subtitles, title, clipN
 
     fs.writeFileSync(videoFilePath, Buffer.from(base64ByteStream, "base64"));
     fs.writeFileSync(subFilePath, subtitles);
+
+    return baseFileName;
 });
 
 ipcMain.handle('deleteVideo', (event, { id, game }) => {
diff --git a/src/renderer/App.jsx b/src/renderer/App.jsx
@@ -3,7 +3,7 @@ import React, {useEffect, useState} from 'react';
 import {Routes, Route, NavLink as Link, Navigate, useNavigate, useLocation} from 'react-router-dom';
 import {ToastContainer} from 'react-toastify';
 
-import AdvancedEditor from './routes/AdvancedEditor';
+import AdvancedEditor from './routes/editor/AdvancedEditor';
 import VideoList from './routes/VideoList';
 import VideoView from './routes/VideoView';
 import Launcher from './routes/Launcher';
@@ -12,10 +12,10 @@ import Config from './routes/Config';
 import About from './routes/About';
 
 import 'react-toastify/dist/ReactToastify.css';
-import ClipEditor from './routes/ClipEditor';
-import SimpleEditor from './routes/SimpleEditor';
+import ClipEditor from './routes/editor/ClipEditor';
+import SimpleEditor from './routes/editor/SimpleEditor';
 
-const VERSION = "v1.2.2-beta";
+const VERSION = "v1.2.3-beta";
 
 let App = (props) => {
     const navigate = useNavigate();
diff --git a/src/renderer/components/SubtitleList.jsx b/src/renderer/components/SubtitleList.jsx
@@ -1,3 +1,4 @@
+import CollectionAPI from 'api/CollectionAPI';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -12,8 +13,19 @@ let convertMillisecondsToTimestamp = (milliseconds) => {
 }
 
 export default ({ subs, currentSub, currentSliderPosition, game, onSubsChange, onSelectSub, onRemoveSub, onSave }) => {
-    let [clipTitle, setClipTitle] = useState("");
-    let [clipNumber, setClipNumber] = useState(1);
+    const [clipTitle, setClipTitle] = useState("");
+    const [clipNumber, setClipNumber] = useState(1);
+    const [collections, setCollections] = useState([]);
+    const [selectedCollection, setSelectedCollection] = useState("_none");
+
+    useEffect(() => {
+        getCollections();
+    }, []);
+
+    const getCollections = async () => {
+        let collections = await CollectionAPI.getCollections(game);
+        setCollections(collections);
+    }
 
     console.log("CURRENT SUB: " + currentSub);
 
@@ -31,8 +43,19 @@ export default ({ subs, currentSub, currentSliderPosition, game, onSubsChange, o
                         <td>Clip Number</td>
                         <td><input type="number" value={clipNumber} onChange={({ target: { value } }) => { setClipNumber(value) }} /></td>
                     </tr>
+                    <tr>
+                        <td>Collection</td>
+                        <td>
+                            <select value={selectedCollection} onChange={({target: {value}}) => {setSelectedCollection(value)}}>
+                                <option key="_none">None</option>
+                                {Object.keys(collections).map((collectionId) => (
+                                    <option>{collectionId}</option>
+                                ))}
+                            </select>
+                        </td>
+                    </tr>
                 </table>
-                <button onClick={() => { onSave(clipTitle, clipNumber) }}>Finalize Clip</button><br />
+                <button onClick={() => { onSave(clipTitle, clipNumber, selectedCollection) }}>Finalize Clip</button><br />
                 <Link to="/"><button>Cancel</button></Link>
             </div>
             <h3>Subtitles</h3>
diff --git a/src/renderer/routes/CollectionManager.jsx b/src/renderer/routes/CollectionManager.jsx
@@ -1,3 +1,4 @@
+import CollectionAPI from 'api/CollectionAPI';
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router';
 import { toast } from 'react-toastify';
@@ -21,25 +22,25 @@ export default () => {
     }
 
     const createNewCollection = async () => {
-        const collectionMap = await window.api.send("createCollection", {game, collectionId: newCollectionName});
+        const collectionMap = await CollectionAPI.createNewCollection(newCollectionName, game);
         setCollections(collectionMap);
         setNewCollectionName("");
         toast("Created new clip pack!", {type: "info"});
     }
 
     const deleteCollection = async (collectionId, deleteFiles = false) => {
-        const collectionMap = await window.api.send("deleteCollection", {game, collectionId, deleteFiles});
+        const collectionMap = await CollectionAPI.deleteCollection(collectionId, game, deleteFiles);
         setCollections(collectionMap);
         toast("Deleted clip pack!", {type: "info"});
     }
 
     const removeFromCollection = async (collectionId, videoId) => {
-        const collectionMap = await window.api.send("removeFromCollection", {game, collectionId, videoId});
+        const collectionMap = await CollectionAPI.removeFromCollection(collectionId, game, videoId);
         setCollections(collectionMap);
     }
 
     const addToCollection = async (collectionId, videoId) => {
-        const collectionMap = await window.api.send("addToCollection", {game, collectionId, videoId});
+        const collectionMap = await CollectionAPI.addToCollection(collectionId, game, videoId);
         setCollections(collectionMap);
     }
 
diff --git a/src/renderer/routes/editor/AdvancedEditor.jsx b/src/renderer/routes/editor/AdvancedEditor.jsx
@@ -1,20 +1,21 @@
-import React, {useState} from 'react';
-import {useParams, useNavigate} from 'react-router';
+import React, { useState } from 'react';
+import { useParams, useNavigate } from 'react-router';
 import { Link } from 'react-router-dom';
-import {toast} from 'react-toastify';
-import {addVideo} from '../util/VideoTools';
+import { toast } from 'react-toastify';
+import { addVideo } from '../../util/VideoTools';
 
-import {api} from '../util/Api';
+import { api } from '../../util/Api';
 
-import WhatTheDubPlayer from '../components/WhatTheDubPlayer';
-import TimeLine from '../components/TimeLine';
-import SubtitleList from '../components/SubtitleList';
+import WhatTheDubPlayer from '../../components/WhatTheDubPlayer';
+import TimeLine from '../../components/TimeLine';
+import SubtitleList from '../../components/SubtitleList';
+import CollectionAPI from 'api/CollectionAPI';
 
 let AdvancedEditor = () => {
     const params = useParams();
     const navigate = useNavigate();
 
-    const [windowSize, setWindowSize] = useState({width: window.innerWidth, height: window.innerHeight});
+    const [windowSize, setWindowSize] = useState({ width: window.innerWidth, height: window.innerHeight });
 
     const [error, setError] = useState(null);
     const [videoSource, setVideoSource] = useState("");
@@ -37,7 +38,7 @@ let AdvancedEditor = () => {
     }
 
     window.onresize = () => {
-        setWindowSize({width: window.innerWidth, height: window.innerHeight})
+        setWindowSize({ width: window.innerWidth, height: window.innerHeight })
     }
 
     let onFileOpen = (e) => {
@@ -65,12 +66,12 @@ let AdvancedEditor = () => {
         } else if (seconds > videoLength * 1000) {
             seconds = videoLength * 1000;
         }
-        setCurrentPosition(seconds/1000);
+        setCurrentPosition(seconds / 1000);
         setCurrentSliderPosition(seconds);
         setIsPlaying(false);
     }
 
-    let addVideoToGame = async (videoName, clipNumber) => {
+    let addVideoToGame = async (videoName, clipNumber, collectionId) => {
         if (await checkClipExists(videoName, clipNumber)) {
             setError("Clip with this name and number already exists");
             return;
@@ -80,19 +81,22 @@ let AdvancedEditor = () => {
 
         try {
             setButtonsDisabled(true);
-            await addVideo(videoSource.substring(videoSource.indexOf(',') + 1), subs, videoName, clipNumber, params.type);
+            let videoId = await addVideo(videoSource.substring(videoSource.indexOf(',') + 1), subs, videoName, clipNumber, params.type);
+            if (!collectionId.startsWith("_")) {
+                await CollectionAPI.addToCollection(collectionId, params.type, videoId);
+            }
             setButtonsDisabled(false);
 
-            toast(`Clip added successfully!`, {type: "info"});
+            toast(`Clip added successfully!`, { type: "info" });
             navigate('/');
         } catch (error) {
             console.error(error);
-            toast(`Clip add failed!`, {type: "error"});
+            toast(`Clip add failed!`, { type: "error" });
         }
     }
 
     let checkClipExists = async (title, clipNumber) => {
-        return await api.send("clipExists", {title, clipNumber, game: params.type});
+        return await api.send("clipExists", { title, clipNumber, game: params.type });
     }
 
     const subChangeHandler = (mode, sub) => {
@@ -152,8 +156,8 @@ let AdvancedEditor = () => {
 
     return (
         <div>
-            <div style={{color: "red"}}>{error}</div>
-            { videoSource ?
+            <div style={{ color: "red" }}>{error}</div>
+            {videoSource ?
                 <div className="editor-container">
                     <div className="top-pane">
                         <WhatTheDubPlayer
@@ -181,7 +185,7 @@ let AdvancedEditor = () => {
                             subs={subs}
                             onSubsChange={subChangeHandler}
                             onSelectSub={setCurrentSub}
-                            onSave={(title, number) => {addVideoToGame(title, number)}} />
+                            onSave={(title, number, collectionId) => { addVideoToGame(title, number, collectionId) }} />
                     </div>
                     <TimeLine
                         timelineWidth={windowSize.width * 0.9}
diff --git a/src/renderer/routes/editor/ClipEditor.jsx b/src/renderer/routes/editor/ClipEditor.jsx
diff --git a/src/renderer/routes/editor/SimpleEditor.jsx b/src/renderer/routes/editor/SimpleEditor.jsx
@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
-import WhatTheDubPlayer from '../components/WhatTheDubPlayer';
-import { addVideo } from '../util/VideoTools';
+import WhatTheDubPlayer from '../../components/WhatTheDubPlayer';
+import { addVideo } from '../../util/VideoTools';
 import { useParams, useNavigate } from 'react-router';
 import { Link } from 'react-router-dom';
+import CollectionAPI from 'api/CollectionAPI';
 
 let SimpleEditor = () => {
     const params = useParams();
@@ -17,6 +18,8 @@ let SimpleEditor = () => {
     const [currentSub, setCurrentSub] = useState(null);
     const [substitution, setSubstitution] = useState("");
     const [buttonsDisabled, setButtonsDisabled] = useState(false);
+    const [collections, setCollections] = useState([]);
+    const [selectedCollection, setSelectedCollection] = useState("_none");
 
     const [isPlaying, setIsPlaying] = useState(false);
     const [currentPosition, setCurrentPosition] = useState(0);
@@ -100,7 +103,8 @@ let SimpleEditor = () => {
     let addVideoToGame = async () => {
         try {
             setButtonsDisabled(true);
-            await addVideo(videoSource.substring(videoSource.indexOf(',') + 1), subs, videoName, clipNumber, params.type);
+            let videoId = await addVideo(videoSource.substring(videoSource.indexOf(',') + 1), subs, videoName, clipNumber, params.type);
+            CollectionAPI.addToCollection(selectedCollection, params.type, videoId);
             setButtonsDisabled(false);
 
             toast(`Clip added successfully!`, { type: "info" });
@@ -135,6 +139,15 @@ let SimpleEditor = () => {
         setError(null);
     }
 
+    useEffect(() => {
+        getCollections();
+    }, []);
+
+    const getCollections = async () => {
+        let collections = await CollectionAPI.getCollections(params.type);
+        setCollections(collections);
+    }
+
     return (
         <div>
             <h3>{game} Clip Editor</h3>
@@ -209,6 +222,17 @@ let SimpleEditor = () => {
                                     <tr>
                                         <td>Clip Number</td><td><input type="number" min={1} max={999} maxLength={3} value={clipNumber} onChange={(e) => { updateClipNumber(Math.min(e.target.value, 999)) }} /></td>
                                     </tr>
+                                    <tr>
+                                        <td>Collection</td>
+                                        <td>
+                                            <select value={selectedCollection} onChange={({ target: { value } }) => { setSelectedCollection(value) }}>
+                                                <option key="_none">None</option>
+                                                {Object.keys(collections).map((collectionId) => (
+                                                    <option>{collectionId}</option>
+                                                ))}
+                                            </select>
+                                        </td>
+                                    </tr>
                                 </table>
                             </div>
                             <div>
diff --git a/src/renderer/util/VideoTools.js b/src/renderer/util/VideoTools.js
@@ -110,5 +110,5 @@ export let createWebVttDataUri = (subtitles, substitution) => {
 }
 
 export let addVideo = async (base64ByteStream, subtitles, title, clipNumber = 1, type) => {
-    await window.api.send("storeVideo", {base64ByteStream, subtitles: convertSubtitlesToSrt(subtitles, type), title, clipNumber, game: type});
-}
+    return await window.api.send("storeVideo", {base64ByteStream, subtitles: convertSubtitlesToSrt(subtitles, type), title, clipNumber, game: type});
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import CollectionAPI from 'api/CollectionAPI';`
`1`	`2`	`import React, { useState, useEffect } from 'react';`
`2`	`3`	`import { useParams } from 'react-router';`
`3`	`4`	`import { toast } from 'react-toastify';`
`@@ -21,25 +22,25 @@ export default () => {`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`const createNewCollection = async () => {`
`24`		`- const collectionMap = await window.api.send("createCollection", {game, collectionId: newCollectionName});`
	`25`	`+ const collectionMap = await CollectionAPI.createNewCollection(newCollectionName, game);`
`25`	`26`	`setCollections(collectionMap);`
`26`	`27`	`setNewCollectionName("");`
`27`	`28`	`toast("Created new clip pack!", {type: "info"});`
`28`	`29`	`}`
`29`	`30`
`30`	`31`	`const deleteCollection = async (collectionId, deleteFiles = false) => {`
`31`		`- const collectionMap = await window.api.send("deleteCollection", {game, collectionId, deleteFiles});`
	`32`	`+ const collectionMap = await CollectionAPI.deleteCollection(collectionId, game, deleteFiles);`
`32`	`33`	`setCollections(collectionMap);`
`33`	`34`	`toast("Deleted clip pack!", {type: "info"});`
`34`	`35`	`}`
`35`	`36`
`36`	`37`	`const removeFromCollection = async (collectionId, videoId) => {`
`37`		`- const collectionMap = await window.api.send("removeFromCollection", {game, collectionId, videoId});`
	`38`	`+ const collectionMap = await CollectionAPI.removeFromCollection(collectionId, game, videoId);`
`38`	`39`	`setCollections(collectionMap);`
`39`	`40`	`}`
`40`	`41`
`41`	`42`	`const addToCollection = async (collectionId, videoId) => {`
`42`		`- const collectionMap = await window.api.send("addToCollection", {game, collectionId, videoId});`
	`43`	`+ const collectionMap = await CollectionAPI.addToCollection(collectionId, game, videoId);`
`43`	`44`	`setCollections(collectionMap);`
`44`	`45`	`}`
`45`	`46`
Original file line number	Diff line number	Diff line change
`@@ -110,5 +110,5 @@ export let createWebVttDataUri = (subtitles, substitution) => {`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`export let addVideo = async (base64ByteStream, subtitles, title, clipNumber = 1, type) => {`
`113`		`- await window.api.send("storeVideo", {base64ByteStream, subtitles: convertSubtitlesToSrt(subtitles, type), title, clipNumber, game: type});`
`114`		`-}`
	`113`	`+ return await window.api.send("storeVideo", {base64ByteStream, subtitles: convertSubtitlesToSrt(subtitles, type), title, clipNumber, game: type});`
	`114`	`+}`