From 796a1542f3a435099f9ae2eaa6f11f24c2114954 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 13:26:07 +0100
Subject: [PATCH 01/11] Create viewToggler in Recordings view

to switch between clips and recordings
---
 src/libs/recorder/recordingsManager.ts |  8 ++++
 src/views/Recordings.vue               | 57 ++++++++++++++++++++++++--
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/libs/recorder/recordingsManager.ts b/src/libs/recorder/recordingsManager.ts
index aafe9a55..a99ce13d 100644
--- a/src/libs/recorder/recordingsManager.ts
+++ b/src/libs/recorder/recordingsManager.ts
@@ -34,6 +34,14 @@ export default class RecordingsManager {
     return recordings.reverse();
   }
 
+  public static getClips(): Array<Recording> {
+    const recordings = new Array<Recording>();
+
+    recordings.push({ videoPath: "", thumbPath: "", fileSize: 0, fps: "4", duration: 2 });
+
+    return recordings;
+  }
+
   /**
    * Add video to user's PastRecordings file
    * @param videoPath Path to video that should be added
diff --git a/src/views/Recordings.vue b/src/views/Recordings.vue
index 6e5f0e07..abe6d4f6 100644
--- a/src/views/Recordings.vue
+++ b/src/views/Recordings.vue
@@ -6,6 +6,17 @@
     @dragenter="handleDragEnter"
     @dragleave="handleDragEnd"
   >
+    <div class="viewToggler">
+      <span
+        v-for="page in subPages"
+        :key="page"
+        :class="{ active: page == activeSubPage }"
+        @click="activeSubPage = page"
+      >
+        {{ page }}
+      </span>
+    </div>
+
     <div class="thumbContainer" v-if="allRecordings.length > 0">
       <div class="thumb" v-for="vid in loadedRecordings" :key="vid.id">
         <div class="inner">
@@ -53,17 +64,24 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
+import { Vue, Component, Watch } from "vue-property-decorator";
 import Icon from "@/components/Icon.vue";
 import RecordingsManager from "@/libs/recorder/recordingsManager";
 import "@/libs/helpers/extensions";
 
+const subPages = ["recordings", "clips"] as const;
+type subPage = typeof subPages[number];
+
 @Component({
   components: {
     Icon
   }
 })
 export default class extends Vue {
+  subPages = subPages;
+  activeSubPage: subPage = "recordings";
+
+  // TODO: make better, .get func should have param to get certain number of videos
   allRecordings = RecordingsManager.get();
   loadedRecordings = new Array();
   dropZoneHidden = true;
@@ -82,6 +100,19 @@ export default class extends Vue {
     });
   }
 
+  @Watch("activeSubPage")
+  subPageChanged(val: subPage) {
+    this.loadedRecordings = [];
+
+    if (val == "recordings") {
+      this.allRecordings = RecordingsManager.get();
+    } else if (val == "clips") {
+      this.allRecordings = RecordingsManager.getClips();
+    }
+
+    this.loadMoreRecordings();
+  }
+
   /**
    * Load more recordings into view
    */
@@ -90,9 +121,9 @@ export default class extends Vue {
     let videosToLoad = 8;
 
     // Loop over allRecordings after removing currently loaded recordings adding to loadedRecordings
-    for (let [i, v] of this.$data.allRecordings.slice(this.$data.loadedRecordings.length).entries()) {
+    for (let [i, v] of this.allRecordings.slice(this.loadedRecordings.length).entries()) {
       // Add to loadedRecordings
-      this.$data.loadedRecordings.push(v);
+      this.loadedRecordings.push(v);
 
       // Stop for loop if index >= videosToLoad
       if (i >= videosToLoad) return;
@@ -168,6 +199,7 @@ export default class extends Vue {
 <style lang="scss">
 #recordings {
   display: flex;
+  flex-flow: column;
   justify-content: center;
   align-items: center;
 
@@ -179,6 +211,25 @@ export default class extends Vue {
     font-size: 32px;
   }
 
+  .viewToggler {
+    align-self: flex-start;
+    font-size: 28px;
+    margin: 10px 10px 0 20px;
+
+    span {
+      text-transform: capitalize;
+      cursor: pointer;
+
+      &:not(.active) {
+        color: $textPrimaryHover;
+      }
+
+      &:not(:first-child) {
+        margin-left: 15px;
+      }
+    }
+  }
+
   .thumbContainer {
     display: flex;
     flex-wrap: wrap;

From 781fc9f1c0872b630913700d488e3fa3b945d4f2 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 14:53:23 +0100
Subject: [PATCH 02/11] Load all clips and recordings once from file, instead
 of reading file every switch

Also remove getClips and integrate it into get func with param
---
 src/libs/helpers/pathHelper.ts         | 10 +++++++++-
 src/libs/recorder/recordingsManager.ts | 13 +++----------
 src/views/Recordings.vue               | 16 +++++++++-------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/libs/helpers/pathHelper.ts b/src/libs/helpers/pathHelper.ts
index 53a80e52..f58eea4b 100644
--- a/src/libs/helpers/pathHelper.ts
+++ b/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"
+      | "PastRecordings.json"
+      | "clips.json"
   ) {
     let path: string[];
 
@@ -40,6 +45,9 @@ export default class PathHelper {
       case "PastRecordings.json":
         path = ["PastRecordings.json"];
         break;
+      case "clips.json":
+        path = ["clips.json"];
+        break;
     }
 
     // Join `mainFolderPath` and `path` to create the
diff --git a/src/libs/recorder/recordingsManager.ts b/src/libs/recorder/recordingsManager.ts
index a99ce13d..2be993b1 100644
--- a/src/libs/recorder/recordingsManager.ts
+++ b/src/libs/recorder/recordingsManager.ts
@@ -18,11 +18,12 @@ export default class RecordingsManager {
   /**
    * Get all user's past recordings.
    */
-  public static get(): Array<Recording> {
+  public static get(clips: boolean = false): Array<Recording> {
+    const file = clips ? "clips.json" : "PastRecordings.json";
     const recordings = new Array<Recording>();
 
     // Get all pastRecordings from json file
-    const data = fs.readFileSync(PathHelper.getFile("PastRecordings.json"), "utf8");
+    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
@@ -34,14 +35,6 @@ export default class RecordingsManager {
     return recordings.reverse();
   }
 
-  public static getClips(): Array<Recording> {
-    const recordings = new Array<Recording>();
-
-    recordings.push({ videoPath: "", thumbPath: "", fileSize: 0, fps: "4", duration: 2 });
-
-    return recordings;
-  }
-
   /**
    * Add video to user's PastRecordings file
    * @param videoPath Path to video that should be added
diff --git a/src/views/Recordings.vue b/src/views/Recordings.vue
index abe6d4f6..7d147bf9 100644
--- a/src/views/Recordings.vue
+++ b/src/views/Recordings.vue
@@ -17,7 +17,7 @@
       </span>
     </div>
 
-    <div class="thumbContainer" v-if="allRecordings.length > 0">
+    <div class="thumbContainer" v-if="videos.length > 0">
       <div class="thumb" v-for="vid in loadedRecordings" :key="vid.id">
         <div class="inner">
           <!-- If thumbPath is an actual file display it, otherwise, display noThumb message -->
@@ -81,9 +81,11 @@ export default class extends Vue {
   subPages = subPages;
   activeSubPage: subPage = "recordings";
 
-  // TODO: make better, .get func should have param to get certain number of videos
   allRecordings = RecordingsManager.get();
+  allClips = RecordingsManager.get(true);
+  videos = this.allRecordings;
   loadedRecordings = new Array();
+
   dropZoneHidden = true;
   dragEnterTarget: EventTarget | null = null;
 
@@ -105,9 +107,9 @@ export default class extends Vue {
     this.loadedRecordings = [];
 
     if (val == "recordings") {
-      this.allRecordings = RecordingsManager.get();
-    } else if (val == "clips") {
-      this.allRecordings = RecordingsManager.getClips();
+      this.videos = this.allRecordings;
+    } else {
+      this.videos = this.allClips;
     }
 
     this.loadMoreRecordings();
@@ -120,8 +122,8 @@ export default class extends Vue {
     // How many videos to load in
     let videosToLoad = 8;
 
-    // Loop over allRecordings after removing currently loaded recordings adding to loadedRecordings
-    for (let [i, v] of this.allRecordings.slice(this.loadedRecordings.length).entries()) {
+    // Loop over videos after removing currently loaded recordings adding to loadedRecordings
+    for (let [i, v] of this.videos.slice(this.loadedRecordings.length).entries()) {
       // Add to loadedRecordings
       this.loadedRecordings.push(v);
 

From 1af49f2f90369d3e989cc4a34356b2f1ca87da43 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 14:56:08 +0100
Subject: [PATCH 03/11] Rename PastRecordings.json file to recordings.json

hope no one notices
---
 src/libs/helpers/pathHelper.ts         |  6 +++---
 src/libs/recorder/index.ts             |  2 +-
 src/libs/recorder/recordingsManager.ts | 18 +++++++-----------
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/libs/helpers/pathHelper.ts b/src/libs/helpers/pathHelper.ts
index f58eea4b..a2aee347 100644
--- a/src/libs/helpers/pathHelper.ts
+++ b/src/libs/helpers/pathHelper.ts
@@ -27,7 +27,7 @@ export default class PathHelper {
       | "GeneralSettings.json"
       | "RecordingSettings.json"
       | "KeyBindingSettings.json"
-      | "PastRecordings.json"
+      | "recordings.json"
       | "clips.json"
   ) {
     let path: string[];
@@ -42,8 +42,8 @@ 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"];
diff --git a/src/libs/recorder/index.ts b/src/libs/recorder/index.ts
index 81e65594..f192bca6 100644
--- a/src/libs/recorder/index.ts
+++ b/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);
   }
 
diff --git a/src/libs/recorder/recordingsManager.ts b/src/libs/recorder/recordingsManager.ts
index 2be993b1..ff78ab0c 100644
--- a/src/libs/recorder/recordingsManager.ts
+++ b/src/libs/recorder/recordingsManager.ts
@@ -19,10 +19,10 @@ export default class RecordingsManager {
    * Get all user's past recordings.
    */
   public static get(clips: boolean = false): Array<Recording> {
-    const file = clips ? "clips.json" : "PastRecordings.json";
+    const file = clips ? "clips.json" : "recordings.json";
     const recordings = new Array<Recording>();
 
-    // Get all pastRecordings from json file
+    // 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.
@@ -36,7 +36,7 @@ export default class RecordingsManager {
   }
 
   /**
-   * Add video to user's PastRecordings file
+   * Add video to user's recordings file
    * @param videoPath Path to video that should be added
    */
   public static async add(videoPath: string): Promise<void> {
@@ -82,17 +82,13 @@ 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"),
-            `${JSON.stringify(recording, null, 2)},`,
-            (err: any) => {
-              if (err) throw err;
-            }
-          );
+          fs.appendFile(PathHelper.getFile("recordings.json"), `${JSON.stringify(recording, null, 2)},`, (err: any) => {
+            if (err) throw err;
+          });
         }
       }
     );

From 6a2f92e754f84284842cf0237fd531b7e118c0f1 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 14:59:26 +0100
Subject: [PATCH 04/11] Follow file naming scheme and make new files use
 PascalCase

---
 src/libs/helpers/pathHelper.ts         | 12 ++++++------
 src/libs/recorder/recordingsManager.ts |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/libs/helpers/pathHelper.ts b/src/libs/helpers/pathHelper.ts
index a2aee347..8eb71905 100644
--- a/src/libs/helpers/pathHelper.ts
+++ b/src/libs/helpers/pathHelper.ts
@@ -27,8 +27,8 @@ export default class PathHelper {
       | "GeneralSettings.json"
       | "RecordingSettings.json"
       | "KeyBindingSettings.json"
-      | "recordings.json"
-      | "clips.json"
+      | "Recordings.json"
+      | "Clips.json"
   ) {
     let path: string[];
 
@@ -42,11 +42,11 @@ export default class PathHelper {
       case "KeyBindingSettings.json":
         path = ["Settings", "KeyBindingSettings.json"];
         break;
-      case "recordings.json":
-        path = ["recordings.json"];
+      case "Recordings.json":
+        path = ["Recordings.json"];
         break;
-      case "clips.json":
-        path = ["clips.json"];
+      case "Clips.json":
+        path = ["Clips.json"];
         break;
     }
 
diff --git a/src/libs/recorder/recordingsManager.ts b/src/libs/recorder/recordingsManager.ts
index ff78ab0c..53c0011b 100644
--- a/src/libs/recorder/recordingsManager.ts
+++ b/src/libs/recorder/recordingsManager.ts
@@ -19,7 +19,7 @@ export default class RecordingsManager {
    * Get all user's past recordings.
    */
   public static get(clips: boolean = false): Array<Recording> {
-    const file = clips ? "clips.json" : "recordings.json";
+    const file = clips ? "Clips.json" : "Recordings.json";
     const recordings = new Array<Recording>();
 
     // Get all videos from appropriate json file
@@ -86,7 +86,7 @@ export default class RecordingsManager {
           // 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("recordings.json"), `${JSON.stringify(recording, null, 2)},`, (err: any) => {
+          fs.appendFile(PathHelper.getFile("Recordings.json"), `${JSON.stringify(recording, null, 2)},`, (err: any) => {
             if (err) throw err;
           });
         }

From 07e9caf76e584b9423ae9c2c899e5dfc34d822d6 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 15:15:38 +0100
Subject: [PATCH 05/11] Add clip to clips file once done clipping

Also edit some comments for funcs in recordingsManager and create getVideoFile so we don't have to copy paste and if statement everywhere.
---
 src/libs/recorder/recordingsManager.ts | 42 ++++++++++++++++++++------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/libs/recorder/recordingsManager.ts b/src/libs/recorder/recordingsManager.ts
index 53c0011b..9880f5ce 100644
--- a/src/libs/recorder/recordingsManager.ts
+++ b/src/libs/recorder/recordingsManager.ts
@@ -17,9 +17,11 @@ 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(clips: boolean = false): Array<Recording> {
-    const file = clips ? "Clips.json" : "Recordings.json";
+    const file = this.getVideoFile(clips);
     const recordings = new Array<Recording>();
 
     // Get all videos from appropriate json file
@@ -36,10 +38,11 @@ export default class RecordingsManager {
   }
 
   /**
-   * Add video to user's recordings 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!");
 
@@ -86,9 +89,13 @@ export default class RecordingsManager {
           // 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("Recordings.json"), `${JSON.stringify(recording, null, 2)},`, (err: any) => {
-            if (err) throw err;
-          });
+          fs.appendFile(
+            PathHelper.getFile(this.getVideoFile(isClip)),
+            `${JSON.stringify(recording, null, 2)},`,
+            (err: any) => {
+              if (err) throw err;
+            }
+          );
         }
       }
     );
@@ -110,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, {
@@ -163,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";
+  }
 }

From 7571fee3d7ca2abe65f660b562988263654976fd Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 20:07:37 +0100
Subject: [PATCH 06/11] Put wrapper around viewtoggler and thumbs

So viewtoggler is also centered
---
 src/views/Recordings.vue | 358 ++++++++++++++++++++-------------------
 1 file changed, 186 insertions(+), 172 deletions(-)

diff --git a/src/views/Recordings.vue b/src/views/Recordings.vue
index 7d147bf9..3b92f701 100644
--- a/src/views/Recordings.vue
+++ b/src/views/Recordings.vue
@@ -6,54 +6,56 @@
     @dragenter="handleDragEnter"
     @dragleave="handleDragEnd"
   >
-    <div class="viewToggler">
-      <span
-        v-for="page in subPages"
-        :key="page"
-        :class="{ active: page == activeSubPage }"
-        @click="activeSubPage = page"
-      >
-        {{ page }}
-      </span>
-    </div>
+    <div class="wrapper">
+      <div class="viewToggler">
+        <span
+          v-for="page in subPages"
+          :key="page"
+          :class="{ active: page == activeSubPage }"
+          @click="activeSubPage = page"
+        >
+          {{ page }}
+        </span>
+      </div>
 
-    <div class="thumbContainer" v-if="videos.length > 0">
-      <div class="thumb" v-for="vid in loadedRecordings" :key="vid.id">
-        <div class="inner">
-          <!-- If thumbPath is an actual file display it, otherwise, display noThumb message -->
-          <img
-            v-if="require('fs').existsSync(vid.thumbPath)"
-            :src="'secfile://' + vid.thumbPath"
-            alt="Video Thumbnail"
-          />
-          <span v-else class="noThumb">No Thumbnail Found</span>
-
-          <div class="info">
-            <span class="fps">
-              {{ vid.fps }}
-              <p>FPS</p>
-            </span>
-
-            <router-link :to="{ name: 'videoPlayer', params: { videoPath: vid.videoPath } }" class="edit">
-              <Icon i="edit" :wh="25" />
-            </router-link>
-
-            <div class="bar">
-              <span class="title">
-                <p>{{ vid.videoPath }}</p>
+      <div class="thumbContainer" v-if="videos.length > 0">
+        <div class="thumb" v-for="vid in loadedRecordings" :key="vid.id">
+          <div class="inner">
+            <!-- If thumbPath is an actual file display it, otherwise, display noThumb message -->
+            <img
+              v-if="require('fs').existsSync(vid.thumbPath)"
+              :src="'secfile://' + vid.thumbPath"
+              alt="Video Thumbnail"
+            />
+            <span v-else class="noThumb">No Thumbnail Found</span>
+
+            <div class="info">
+              <span class="fps">
+                {{ vid.fps }}
+                <p>FPS</p>
               </span>
 
-              <div class="videoInfo">
-                <span v-if="vid.duration >= 0">{{ vid.duration.toReadableTimeFromSeconds() }}</span>
-                <span v-if="vid.fileSize >= 0">{{ vid.fileSize.toReadableFileSize() }}</span>
+              <router-link :to="{ name: 'videoPlayer', params: { videoPath: vid.videoPath } }" class="edit">
+                <Icon i="edit" :wh="25" />
+              </router-link>
+
+              <div class="bar">
+                <span class="title">
+                  <p>{{ vid.videoPath }}</p>
+                </span>
+
+                <div class="videoInfo">
+                  <span v-if="vid.duration >= 0">{{ vid.duration.toReadableTimeFromSeconds() }}</span>
+                  <span v-if="vid.fileSize >= 0">{{ vid.fileSize.toReadableFileSize() }}</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div v-else>
-      <span class="noRecordings">You Have No Recordings!</span>
+      <div v-else>
+        <span class="noRecordings">You Have No Recordings!</span>
+      </div>
     </div>
 
     <div :class="{ dropZone: true, hidden: dropZoneHidden }">
@@ -204,6 +206,7 @@ export default class extends Vue {
   flex-flow: column;
   justify-content: center;
   align-items: center;
+  margin: 10px 20px;
 
   .noRecordings {
     display: flex;
@@ -213,168 +216,188 @@ export default class extends Vue {
     font-size: 32px;
   }
 
-  .viewToggler {
-    align-self: flex-start;
-    font-size: 28px;
-    margin: 10px 10px 0 20px;
-
-    span {
-      text-transform: capitalize;
-      cursor: pointer;
+  .wrapper {
+    & > div:not(.dropZone) {
+      margin-bottom: 10px;
+    }
 
-      &:not(.active) {
-        color: $textPrimaryHover;
-      }
+    .viewToggler {
+      align-self: flex-start;
+      font-size: 28px;
 
-      &:not(:first-child) {
-        margin-left: 15px;
-      }
-    }
-  }
+      span {
+        text-transform: capitalize;
+        cursor: pointer;
 
-  .thumbContainer {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 10px;
-    max-width: 1600px;
-
-    .thumb {
-      flex-grow: 1;
-      width: 25%;
-      height: 250px;
-      margin: 10px;
-      background-color: $quaternaryColor;
-      border-radius: 4px;
-      overflow: hidden;
-
-      .inner {
-        position: relative;
-        height: 100%;
-
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
+        &:not(.active) {
+          color: $textPrimaryHover;
         }
 
-        .noThumb {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 100%;
-          height: 100%;
-          font-size: 25px;
+        &:not(:first-child) {
+          margin-left: 15px;
         }
+      }
+    }
+
+    .thumbContainer {
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 1600px;
 
-        .info {
-          position: absolute;
-          top: 0;
+      .thumb {
+        flex-grow: 1;
+        width: 25%;
+        height: 250px;
+        margin-bottom: 20px;
+        background-color: $quaternaryColor;
+        border-radius: 4px;
+        overflow: hidden;
+
+        .inner {
+          position: relative;
           height: 100%;
-          width: 100%;
-          cursor: pointer;
 
-          .fps {
-            display: inline-flex;
-            position: absolute;
-            right: 0;
-            padding: 10px;
-            text-shadow: 1px 1px black;
-            font-weight: bold;
-            font-style: italic;
-
-            * {
-              padding: 0 5px;
-            }
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
           }
 
-          .edit {
+          .noThumb {
             display: flex;
             justify-content: center;
             align-items: center;
-            position: absolute;
-            opacity: 0;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            transition: opacity 250ms ease-in-out;
-
-            svg {
-              fill: $textPrimary;
-              filter: drop-shadow(0 0 5px $primaryColor);
-            }
+            width: 100%;
+            height: 100%;
+            font-size: 25px;
           }
 
-          .bar {
+          .info {
             position: absolute;
-            bottom: 0;
-            right: 0;
+            top: 0;
+            height: 100%;
             width: 100%;
-            height: 40px;
-            padding: 0 10px;
-            line-height: 40px;
-            background-color: change-color($color: $darkAccentColor, $alpha: 0.5);
-            transition: background-color 250ms ease-in-out;
+            cursor: pointer;
 
-            .title {
-              display: flex;
-              width: 60%;
-              font-weight: 700;
-              transition: width 250ms ease-in-out;
-
-              p {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
+            .fps {
+              display: inline-flex;
+              position: absolute;
+              right: 0;
+              padding: 10px;
+              text-shadow: 1px 1px black;
+              font-weight: bold;
+              font-style: italic;
+
+              * {
+                padding: 0 5px;
               }
+            }
+
+            .edit {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              position: absolute;
+              opacity: 0;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              transition: opacity 250ms ease-in-out;
 
-              @media (max-width: 1370px) {
-                width: 50%;
+              svg {
+                fill: $textPrimary;
+                filter: drop-shadow(0 0 5px $primaryColor);
               }
+            }
 
-              @media (max-width: 1130px) {
-                width: 40%;
+            .bar {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              width: 100%;
+              height: 40px;
+              padding: 0 10px;
+              line-height: 40px;
+              background-color: change-color($color: $darkAccentColor, $alpha: 0.5);
+              transition: background-color 250ms ease-in-out;
+
+              .title {
+                display: flex;
+                width: 60%;
+                font-weight: 700;
+                transition: width 250ms ease-in-out;
+
+                p {
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                }
+
+                @media (max-width: 1370px) {
+                  width: 50%;
+                }
+
+                @media (max-width: 1130px) {
+                  width: 40%;
+                }
+
+                @media (max-width: 1000px) {
+                  width: 50%;
+                }
               }
 
-              @media (max-width: 1000px) {
-                width: 50%;
+              .videoInfo {
+                position: absolute;
+                bottom: 0;
+                right: 10px;
+
+                span {
+                  padding: 5px;
+                  font-size: 15px;
+                }
               }
             }
 
-            .videoInfo {
-              position: absolute;
-              bottom: 0;
-              right: 10px;
+            &:hover {
+              > .title {
+                background-color: $darkAccentColor;
+              }
 
-              span {
-                padding: 5px;
-                font-size: 15px;
+              > .edit {
+                opacity: 1;
               }
             }
           }
+        }
 
-          &:hover {
-            > .title {
-              background-color: $darkAccentColor;
-            }
+        @media (max-width: 800px) {
+          width: 100%;
+        }
 
-            > .edit {
-              opacity: 1;
-            }
+        @media (min-width: 800px) and (max-width: 1200px) {
+          width: 45%;
+
+          &:nth-child(odd):not(:only-child) {
+            margin-right: 20px;
           }
         }
-      }
 
-      @media (max-width: 800px) {
-        width: 50%;
-      }
+        @media (min-width: 1200px) {
+          width: 25%;
 
-      @media (min-width: 800px) and (max-width: 1000px) {
-        width: 33%;
-      }
+          &:not(:only-child) {
+            margin-left: 20px;
+          }
 
-      @media (min-width: 1200px) {
-        width: 25%;
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &:nth-child(3n + 4) {
+            margin-left: 0;
+          }
+        }
       }
     }
   }
@@ -398,13 +421,4 @@ export default class extends Vue {
     }
   }
 }
-
-.videoPlayerWrapper {
-  position: absolute;
-  top: 68px;
-  height: 100vh;
-  width: 100vw;
-  background-color: $quaternaryColor;
-  z-index: 999999999999;
-}
 </style>

From 27fe74c2aa5c3801a1180829dab2a069792507a3 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 20:23:02 +0100
Subject: [PATCH 07/11] Fix styling when noRecordings msg is showing

---
 src/views/Recordings.vue | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/views/Recordings.vue b/src/views/Recordings.vue
index 3b92f701..3eacc53a 100644
--- a/src/views/Recordings.vue
+++ b/src/views/Recordings.vue
@@ -53,9 +53,7 @@
           </div>
         </div>
       </div>
-      <div v-else>
-        <span class="noRecordings">You Have No Recordings!</span>
-      </div>
+      <span v-else class="noRecordings">You Have No Recordings!</span>
     </div>
 
     <div :class="{ dropZone: true, hidden: dropZoneHidden }">
@@ -208,19 +206,21 @@ export default class extends Vue {
   align-items: center;
   margin: 10px 20px;
 
-  .noRecordings {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: calc(100vh - 86px);
-    font-size: 32px;
-  }
-
   .wrapper {
+    width: 100%;
+    max-width: 1600px;
+
     & > div:not(.dropZone) {
       margin-bottom: 10px;
     }
 
+    .noRecordings {
+      display: flex;
+      justify-content: center;
+      margin-top: 35px;
+      font-size: 32px;
+    }
+
     .viewToggler {
       align-self: flex-start;
       font-size: 28px;
@@ -242,7 +242,6 @@ export default class extends Vue {
     .thumbContainer {
       display: flex;
       flex-wrap: wrap;
-      max-width: 1600px;
 
       .thumb {
         flex-grow: 1;

From 31153f5c67c36ad8e24b4d6e92b66dce0a2b5e6a Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 21:25:13 +0100
Subject: [PATCH 08/11] Make messages use activeSubPage where required

Create _general.scss file for general styles
---
 src/styles/_general.scss | 7 +++++++
 src/styles/_norm.scss    | 4 ----
 src/views/Recordings.vue | 6 +++---
 vue.config.js            | 1 +
 4 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 src/styles/_general.scss

diff --git a/src/styles/_general.scss b/src/styles/_general.scss
new file mode 100644
index 00000000..048243eb
--- /dev/null
+++ b/src/styles/_general.scss
@@ -0,0 +1,7 @@
+.hidden {
+  display: none !important;
+}
+
+.txt-capitalised {
+  text-transform: capitalize;
+}
diff --git a/src/styles/_norm.scss b/src/styles/_norm.scss
index 616f8053..99ff6483 100644
--- a/src/styles/_norm.scss
+++ b/src/styles/_norm.scss
@@ -28,10 +28,6 @@ a {
   text-decoration: none;
 }
 
-.hidden {
-  display: none !important;
-}
-
 // Default nouislider styling
 .noUi-target {
   border: unset;
diff --git a/src/views/Recordings.vue b/src/views/Recordings.vue
index 3eacc53a..6a0a6ace 100644
--- a/src/views/Recordings.vue
+++ b/src/views/Recordings.vue
@@ -53,12 +53,12 @@
           </div>
         </div>
       </div>
-      <span v-else class="noRecordings">You Have No Recordings!</span>
+      <span v-else class="noRecordings txt-capitalised">You Have No {{ activeSubPage }}!</span>
     </div>
 
     <div :class="{ dropZone: true, hidden: dropZoneHidden }">
       <Icon i="add" wh="36" />
-      <span>Add Files</span>
+      <span class="txt-capitalised">Add {{ activeSubPage }}</span>
     </div>
   </div>
 </template>
@@ -202,8 +202,8 @@ export default class extends Vue {
 #recordings {
   display: flex;
   flex-flow: column;
-  justify-content: center;
   align-items: center;
+  min-height: calc(100% - 20px);
   margin: 10px 20px;
 
   .wrapper {
diff --git a/vue.config.js b/vue.config.js
index 87436e9a..96c111ee 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,6 +7,7 @@ module.exports = {
           @use "./node_modules/nouislider/dist/nouislider.css";
           @import "./src/styles/_vars.scss";
           @import "./src/styles/_norm.scss";
+          @import "./src/styles/_general.scss";
         `
       }
     }

From 6184ade1f92e4d148cf12ee150ce9ec648b8d1ac Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 21:27:28 +0100
Subject: [PATCH 09/11] Use margin-left on thumbs to avoid having margin when
 not needed

---
 src/views/Recordings.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Recordings.vue b/src/views/Recordings.vue
index 6a0a6ace..672d115f 100644
--- a/src/views/Recordings.vue
+++ b/src/views/Recordings.vue
@@ -377,8 +377,8 @@ export default class extends Vue {
         @media (min-width: 800px) and (max-width: 1200px) {
           width: 45%;
 
-          &:nth-child(odd):not(:only-child) {
-            margin-right: 20px;
+          &:nth-child(even):not(:only-child) {
+            margin-left: 20px;
           }
         }
 

From c3760b6fa7c98c2cba9c18af5149cb42baa7e75e Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 21:31:45 +0100
Subject: [PATCH 10/11] Increase margin between divs on Recordings

---
 src/views/Recordings.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Recordings.vue b/src/views/Recordings.vue
index 672d115f..66d07c48 100644
--- a/src/views/Recordings.vue
+++ b/src/views/Recordings.vue
@@ -204,14 +204,14 @@ export default class extends Vue {
   flex-flow: column;
   align-items: center;
   min-height: calc(100% - 20px);
-  margin: 10px 20px;
+  margin: 12px 20px;
 
   .wrapper {
     width: 100%;
     max-width: 1600px;
 
     & > div:not(.dropZone) {
-      margin-bottom: 10px;
+      margin-bottom: 12px;
     }
 
     .noRecordings {

From bca3c7c0d7ba844b0f6c7b672b075326e7f985b7 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Wed, 7 Jul 2021 21:39:47 +0100
Subject: [PATCH 11/11] Rename Recordings view to Videos

---
 src/components/Nav.vue                   | 11 ++---------
 src/libs/settings.ts                     |  4 ++--
 src/router.ts                            |  8 ++++----
 src/views/{Recordings.vue => Videos.vue} |  0
 4 files changed, 8 insertions(+), 15 deletions(-)
 rename src/views/{Recordings.vue => Videos.vue} (100%)

diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index a161aa04..edf18155 100644
--- a/src/components/Nav.vue
+++ b/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>
 
diff --git a/src/libs/settings.ts b/src/libs/settings.ts
index 2fbf9bfb..13861687 100644
--- a/src/libs/settings.ts
+++ b/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;
 
diff --git a/src/router.ts b/src/router.ts
index 61fd017a..fe033c3f 100644
--- a/src/router.ts
+++ b/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",
diff --git a/src/views/Recordings.vue b/src/views/Videos.vue
similarity index 100%
rename from src/views/Recordings.vue
rename to src/views/Videos.vue