Adding help and redesigning clip pack editting to include interstitials and an; albeit ugly, menu

Author: deusprogrammer

release/app/package.json

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

src/main/main.ts

@@ -50,17 +50,17 @@ const HOME: string =
     process.platform === 'darwin'
         ? process.env.HOME || '/'
         : `${process.env.HOMEDRIVE}${process.env.HOMEPATH}/AppData/Local/DubEditor`;
-const CONFIG_FILE: string =             `${HOME}/.dub-editor-config.json`;
-const COLLECTIONS_FILE: string =        '.dub-editor-collections.json';
-const BATCH_CACHE_FILE: string =        '.dub-editor-batch-cache.json';
+const CONFIG_FILE: string =             `${HOME}/.dub-editor-config.v2.json`;
+const COLLECTIONS_FILE: string =        '.dub-editor-collections.v2.json';
+const BATCH_CACHE_FILE: string =        '.dub-editor-batch-cache.v2.json';
 
-const BATCH_VIDEO_TEMP_FILE: string =   '.dub-editor-data/dub-editor-batch-tmp.mp4';
-const CLIP_VIDEO_TEMP_FILE: string =    '.dub-editor-data/dub-editor-clip-tmp.mp4';
+const BATCH_VIDEO_TEMP_FILE: string =   '.dub-editor-data.v2/dub-editor-batch-tmp.mp4';
+const CLIP_VIDEO_TEMP_FILE: string =    '.dub-editor-data.v2/dub-editor-clip-tmp.mp4';
 
-const VIDEO_SUB_DIRECTORY =             '_VideoClips';
-const SUBTITLE_SUB_DIRECTORY =          '_Subtitles';
-const THUMBNAIL_SUB_DIRECTORY =         '_ThumbNails';
-const PREVIEW_IMAGE_SUB_DIRECTORY =     '_PreviewImages';
+const VIDEO_SUB_DIRECTORY =             'VideoClips';
+const SUBTITLE_SUB_DIRECTORY =          'Subtitles';
+const THUMBNAIL_SUB_DIRECTORY =         'ThumbNails';
+const PREVIEW_IMAGE_SUB_DIRECTORY =     'PreviewImages';
 
 export default class AppUpdater {
     constructor() {

src/renderer/App.css

@@ -92,6 +92,11 @@ li {
     color: white !important;
 }
 
+button.selected {
+    background-color: black !important;
+    color: white !important;
+}
+
 .subtitle,
 .resize-left,
 .resize-right {
@@ -198,4 +203,4 @@ li {
 
 .preview-image {
     width: 800px;
-}
+}

src/renderer/App.jsx

@@ -27,7 +27,9 @@ import { interstitialAtom } from './atoms/interstitial.atom';
 import './App.css';
 import 'react-toastify/dist/ReactToastify.css';
 
-const VERSION = 'v2.0.0-beta';
+import { version } from '../../release/app/package.json';
+
+const VERSION = version;
 
 let App = (props) => {
     const navigate = useNavigate();
@@ -127,6 +129,7 @@ let App = (props) => {
                     >
                         About
                     </Link>
+                    |
                     <a
                         href="https://ko-fi.com/michaelcmain52278"
                         target="_blank"

src/renderer/components/HelpButton.css

@@ -0,0 +1,25 @@
+.help-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: teal;
+    color: white;
+    padding: 10px;
+}
+
+.hidden {
+    display: none;
+}
+
+.help-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    border-radius: 25px;
+    color: white;
+    background-color: teal;
+}

src/renderer/components/HelpButton.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './HelpButton.css';
+
+export default ({ helpText }) => {
+    const ref = React.createRef();
+
+    const toggleHelp = () => {
+        if (ref.current.classList.contains('hidden')) {
+            ref.current.classList.remove('hidden');
+        } else {
+            ref.current.classList.add('hidden');
+        }
+    };
+
+    return (
+        <>
+            <div className="help-text hidden" ref={ref}>
+                {helpText}
+                <button className="help-text-close" onClick={toggleHelp}>
+                    Close
+                </button>
+            </div>
+            <span className="help-button" onClick={toggleHelp}>
+                ?
+            </span>
+        </>
+    );
+};