Clips view

src/components/Nav.vue

@@ -2,16 +2,9 @@
   <nav>
     <ul>
       <li>
-        <router-link to="/recordings">
+        <router-link to="/videos">
           <Icon i="play" />
-          <span>Recordings</span>
-        </router-link>
-      </li>
-
-      <li>
-        <router-link to="/clips">
-          <Icon i="upload" />
-          <span>Clips</span>
+          <span>Videos</span>
         </router-link>
       </li>
 

src/libs/helpers/pathHelper.ts

@@ -23,7 +23,12 @@ export default class PathHelper {
    * @param name Name of file with extension
    */
   public static getFile(
-    name: "GeneralSettings.json" | "RecordingSettings.json" | "KeyBindingSettings.json" | "PastRecordings.json"
+    name:
+      | "GeneralSettings.json"
+      | "RecordingSettings.json"
+      | "KeyBindingSettings.json"
+      | "Recordings.json"
+      | "Clips.json"
   ) {
     let path: string[];
 
@@ -37,8 +42,11 @@ export default class PathHelper {
       case "KeyBindingSettings.json":
         path = ["Settings", "KeyBindingSettings.json"];
         break;
-      case "PastRecordings.json":
-        path = ["PastRecordings.json"];
+      case "Recordings.json":
+        path = ["Recordings.json"];
+        break;
+      case "Clips.json":
+        path = ["Clips.json"];
         break;
     }
 

src/libs/recorder/index.ts

@@ -35,7 +35,7 @@ export default class Recorder {
     // Wait for ffmpeg to exit
     await this.ffmpeg.kill();
 
-    // Add recording to pastRecordings
+    // Add recording to recordings file
     RecordingsManager.add((await this.args).videoPath);
   }
 

src/libs/recorder/recordingsManager.ts

@@ -17,12 +17,15 @@ export interface Recording {
 export default class RecordingsManager {
   /**
    * Get all user's past recordings.
+   * @param clips If should fetch clips, instead of recordings.
+   * @returns All recordings | clips.
    */
-  public static get(): Array<Recording> {
+  public static get(clips: boolean = false): Array<Recording> {
+    const file = this.getVideoFile(clips);
     const recordings = new Array<Recording>();
 
-    // Get all pastRecordings from json file
-    const data = fs.readFileSync(PathHelper.getFile("PastRecordings.json"), "utf8");
+    // Get all videos from appropriate json file
+    const data = fs.readFileSync(PathHelper.getFile(file), "utf8");
 
     // Parse JSON from file and assign it to recordings variable.
     // Because it is stored in a way so that we don't have to read the file
@@ -35,10 +38,11 @@ export default class RecordingsManager {
   }
 
   /**
-   * Add video to user's PastRecordings file
-   * @param videoPath Path to video that should be added
+   * Add video to user's recordings file.
+   * @param videoPath Path to video that should be added.
+   * @param isClip If adding a clip instead of a recording.
    */
-  public static async add(videoPath: string): Promise<void> {
+  public static async add(videoPath: string, isClip: boolean = false): Promise<void> {
     // Throw exception if video from videoPath does not exist
     if (!fs.existsSync(videoPath)) throw new Error("Can't add recording that doesn't exist!");
 
@@ -81,12 +85,12 @@ export default class RecordingsManager {
               }
             });
 
-          // Append recording to PastRecordings file
+          // Append recording to recordings file
           // JSON string is appended with a ',' at the end. If you are going to use
           // the data in this file, always remove the last letter (the ',') first.
           // This is done so that we don't have to read the whole file first to append it properly.
           fs.appendFile(
-            PathHelper.getFile("PastRecordings.json"),
+            PathHelper.getFile(this.getVideoFile(isClip)),
             `${JSON.stringify(recording, null, 2)},`,
             (err: any) => {
               if (err) throw err;
@@ -113,6 +117,11 @@ export default class RecordingsManager {
     return thumbPath;
   }
 
+  /**
+   * Clip a recording.
+   * @param videoPath Path to video being clipped.
+   * @param timestamps Timestamps from recording to clip.
+   */
   public static async clip(videoPath: string, timestamps: number[]) {
     // Make sure .processing folder exists and is hidden
     PathHelper.ensureExists(`${RecordingSettings.videoSaveFolder}/clips/.processing`, true, {
@@ -166,13 +175,25 @@ export default class RecordingsManager {
       `-f concat -safe 0 -i "${tmpOutFolder}/manifest.txt" -map 0 -avoid_negative_ts 1 -c copy "${clipOutPath}"`,
       "onExit",
       {
-        // After creating final clip, delete all temp files
+        // After creating final clip...
         onExitCallback: () => {
-          // Remove temp dir
+          // Remove temp dir and files inside it
           PathHelper.removeDir(tmpOutFolder);
           Notifications.deletePopup(popupName);
+
+          // Add clip to clips file
+          this.add(clipOutPath, true);
         }
       }
     );
   }
+
+  /**
+   * Get correct video file name.
+   * @param clips If should get clips file.
+   * @returns Name of file including videos.
+   */
+  private static getVideoFile(clips: boolean) {
+    return clips ? "Clips.json" : "Recordings.json";
+  }
 }

src/libs/settings.ts

@@ -92,7 +92,7 @@ export default class SettingsManager {
 export class AppSettings {
   // Pages in application
   public static get pages() {
-    return ["Recordings", "Uploads", "Settings", "Profile"];
+    return ["Videos", "Settings"];
   }
 
   // Supported recording formats
@@ -105,7 +105,7 @@ export class AppSettings {
  * General Settings
  */
 export class GeneralSettings {
-  private static _startupPage: string = "Recordings";
+  private static _startupPage: string = "Videos";
   private static _recordingStatusAlsoStopStartRecording: boolean = true;
   private static _recordingStatusDblClkToRecord: boolean = false;
 

src/router.ts

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import VueRouter, { RouteConfig } from "vue-router";
-import Recordings from "./views/Recordings.vue";
+import Videos from "./views/Videos.vue";
 import Settings from "./views/Settings.vue";
 import VideoPlayer from "./views/VideoPlayer.vue";
 import DesktopNotification from "./views/DesktopNotification.vue";
@@ -9,9 +9,9 @@ Vue.use(VueRouter);
 
 const routes: Array<RouteConfig> = [
   {
-    path: "/recordings",
-    name: "recordings",
-    component: Recordings
+    path: "/videos",
+    name: "videos",
+    component: Videos
   },
   {
     path: "/settings",

src/styles/_general.scss

@@ -0,0 +1,7 @@
+.hidden {
+  display: none !important;
+}
+
+.txt-capitalised {
+  text-transform: capitalize;
+}

src/styles/_norm.scss

@@ -28,10 +28,6 @@ a {
   text-decoration: none;
 }
 
-.hidden {
-  display: none !important;
-}
-
 // Default nouislider styling
 .noUi-target {
   border: unset;