From f815b666028171f45ffd2eb338207597460073c8 Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Sat, 10 Jul 2021 18:13:15 +0100
Subject: [PATCH 1/2] Don't use @extend

---
 src/styles/_general.scss  | 2 +-
 src/views/VideoEditor.vue | 8 ++------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/styles/_general.scss b/src/styles/_general.scss
index 9490d493..2c66f963 100644
--- a/src/styles/_general.scss
+++ b/src/styles/_general.scss
@@ -6,7 +6,7 @@
   text-transform: capitalize;
 }
 
-%m-l-all-not-first {
+.m-l-all-not-first {
   // Add margin between buttons
   & > *:not(:first-child) {
     margin-left: 5px;
diff --git a/src/views/VideoEditor.vue b/src/views/VideoEditor.vue
index f5e1b6ae..02c39948 100644
--- a/src/views/VideoEditor.vue
+++ b/src/views/VideoEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="videoExists" ref="videoEditor" class="videoEditor">
-    <div class="topBar">
+    <div class="topBar m-l-all-not-first">
       <Button icon="arrow" iconDirection="left" tooltip="Back To Videos" @click="$router.go(-1)" />
       <span>{{ require("path").basename(video.videoPath) }}</span>
     </div>
@@ -26,7 +26,7 @@
       <div ref="clipsBar" id="clipsBar" class="clipsBar"></div>
     </div>
 
-    <div class="controls">
+    <div class="controls m-l-all-not-first">
       <Button @click="playPause" :icon="playPauseBtnIcon" />
 
       <Button
@@ -699,8 +699,6 @@ export default class VideoPlayer extends Vue {
   overflow-x: hidden;
 
   .topBar {
-    @extend %m-l-all-not-first;
-
     display: flex;
     flex-flow: row;
     align-items: center;
@@ -719,8 +717,6 @@ export default class VideoPlayer extends Vue {
   }
 
   .controls {
-    @extend %m-l-all-not-first;
-
     display: flex;
     align-items: center;
     margin: 5px;

From e6e41bed04d92a0f60b91fe8722f283973e0254d Mon Sep 17 00:00:00 2001
From: IRHM <37304121+IRHM@users.noreply.github.com>
Date: Mon, 12 Jul 2021 00:41:54 +0100
Subject: [PATCH 2/2] Load more videos sooner

loadMoreRecordings => loadMoreVideos
---
 src/views/Videos.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/Videos.vue b/src/views/Videos.vue
index d007ce86..902fe32b 100644
--- a/src/views/Videos.vue
+++ b/src/views/Videos.vue
@@ -92,13 +92,13 @@ export default class extends Vue {
 
   mounted() {
     // Load initial set of recordings
-    this.loadMoreRecordings();
+    this.loadMoreVideos();
 
     let el = document.getElementById("main");
     el?.addEventListener("scroll", () => {
-      // If scrolled to bottom loadMoreRecordings
-      if (el?.scrollHeight! - el?.scrollTop! === el?.clientHeight!) {
-        this.loadMoreRecordings();
+      // If scrolled to bottom loadMoreVideos
+      if (el?.scrollHeight! - el?.scrollTop! - 200 <= el?.clientHeight!) {
+        this.loadMoreVideos();
       }
     });
   }
@@ -113,13 +113,13 @@ export default class extends Vue {
       this.videos = this.allClips;
     }
 
-    this.loadMoreRecordings();
+    this.loadMoreVideos();
   }
 
   /**
    * Load more recordings into view
    */
-  loadMoreRecordings() {
+  loadMoreVideos() {
     // How many videos to load in
     let videosToLoad = 8;