From 310ad74ca5a463c36b91a7bd89fadea0186b2979 Mon Sep 17 00:00:00 2001
From: Sean Ryan <sean.ryan@redspace.com>
Date: Wed, 4 Aug 2021 13:14:53 -0300
Subject: [PATCH 1/8] add mode switcher to json preview

---
 src/renderer/class/CaptionManager.js            |  4 ++++
 .../components/caption-studio/JsonPreview.vue   | 17 +++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/renderer/class/CaptionManager.js b/src/renderer/class/CaptionManager.js
index 0e332b2..447050a 100644
--- a/src/renderer/class/CaptionManager.js
+++ b/src/renderer/class/CaptionManager.js
@@ -83,6 +83,10 @@ class CaptionManager {
 
         const current = this.data[key];
 
+        if (!current) {
+          this.addCaption(key, $origin);
+        }
+
         this.data[key][index] = {
           content: caption.content || current.content,
           end: 'number' === typeof caption.end ? caption.end : current.end,
diff --git a/src/renderer/components/caption-studio/JsonPreview.vue b/src/renderer/components/caption-studio/JsonPreview.vue
index df0a6ec..2dfd891 100644
--- a/src/renderer/components/caption-studio/JsonPreview.vue
+++ b/src/renderer/components/caption-studio/JsonPreview.vue
@@ -84,8 +84,9 @@ export default {
       activeFile: '',
       fileNameMap: {},
       options: {
-        onChangeJSON: this.onEdit,
-        mode: 'form',
+        //onChangeJSON: this.onEdit,
+        onChangeText: this.onEdit,
+        modes: [ 'form', 'text'],
         onEvent: this.onEvent
       },
     };
@@ -143,11 +144,11 @@ export default {
      * Handles JSON Editor changes
      */
     onEdit($event) {
-      this.checkErrors($event, this.origin);
+      this.checkErrors(JSON.parse($event), this.origin);
       if (this.jsonErrors) {
         return;
       }
-      EventBus.$emit('json_update', $event, this.origin);
+      EventBus.$emit('json_update', JSON.parse($event), this.origin);
     },
     /**
      * Handles the save caption event from app menu or keyboard shortcut
@@ -207,6 +208,10 @@ export default {
       const index = node.path[1];
       const indexDelta = index - this.currentIndex;
 
+      if (this.currentIndex === index) {
+        return;
+      }
+
       if (this.activeFile === node.path[0]) {
         EventBus.$emit('caption_move_index', indexDelta, this.origin);
         return;
@@ -320,6 +325,10 @@ export default {
 
         const file = json[key];
 
+        if (!file) {
+          return;
+        }
+
         if (!Array.isArray(file)) {
           return;
         }

From 15f95ae38a190731f7753441a7322d667ce311ac Mon Sep 17 00:00:00 2001
From: Sean Ryan <sean.ryan@redspace.com>
Date: Wed, 4 Aug 2021 13:29:20 -0300
Subject: [PATCH 2/8] fix small error when opening caption studio

---
 src/renderer/class/CaptionManager.js                      | 4 ----
 src/renderer/components/caption-studio/CaptionPreview.vue | 4 ++++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/class/CaptionManager.js b/src/renderer/class/CaptionManager.js
index 447050a..0e332b2 100644
--- a/src/renderer/class/CaptionManager.js
+++ b/src/renderer/class/CaptionManager.js
@@ -83,10 +83,6 @@ class CaptionManager {
 
         const current = this.data[key];
 
-        if (!current) {
-          this.addCaption(key, $origin);
-        }
-
         this.data[key][index] = {
           content: caption.content || current.content,
           end: 'number' === typeof caption.end ? caption.end : current.end,
diff --git a/src/renderer/components/caption-studio/CaptionPreview.vue b/src/renderer/components/caption-studio/CaptionPreview.vue
index 4f6d48b..a047c78 100644
--- a/src/renderer/components/caption-studio/CaptionPreview.vue
+++ b/src/renderer/components/caption-studio/CaptionPreview.vue
@@ -117,6 +117,10 @@ export default {
       }
       this.data = $event;
       this.captionPlayer.captions = CaptionFactory.createCaptionMap($event);
+
+      if (!this.name) {
+        return;
+      }
       this.captionPlayer.start(
         this.name,
         this.data[this.name][this.index].start

From fc9f56071c289f194ee71f59f7f235e0f2ad4a05 Mon Sep 17 00:00:00 2001
From: Sean Ryan <sean.ryan@redspace.com>
Date: Wed, 4 Aug 2021 14:51:10 -0300
Subject: [PATCH 3/8] switch mode from text to code and fix UI

---
 .../components/caption-studio/JsonPreview.vue | 54 ++++++++++++++++---
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/caption-studio/JsonPreview.vue b/src/renderer/components/caption-studio/JsonPreview.vue
index 2dfd891..64d92dc 100644
--- a/src/renderer/components/caption-studio/JsonPreview.vue
+++ b/src/renderer/components/caption-studio/JsonPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="json">
     <v-jsoneditor ref="jsonEditor" class="json__editor" :options="options" :plus="false" height="446px" />
-    <div class="json__button-group">
+    <div class="json__button-group" :class="{'--code': mode === 'code'}">
       <v-dialog v-model="saveErrorDialog" width="500">
         <v-card>
           <v-card-title class="error" primary-title>
@@ -83,11 +83,14 @@ export default {
       origin: 'JsonPreview',
       activeFile: '',
       fileNameMap: {},
+      mode: 'form',
       options: {
         //onChangeJSON: this.onEdit,
         onChangeText: this.onEdit,
-        modes: [ 'form', 'text'],
-        onEvent: this.onEvent
+        modes: [ 'form', 'code'],
+        onEvent: this.onEvent,
+        onModeChange: this.onModeChange,
+        onError: this.onError,
       },
     };
   },
@@ -144,11 +147,31 @@ export default {
      * Handles JSON Editor changes
      */
     onEdit($event) {
-      this.checkErrors(JSON.parse($event), this.origin);
+      let parsed;
+
+      //the code will work without this block, but the console.errors will fill up the console
+      try {
+        parsed = JSON.parse($event);
+      } catch {
+        return;
+      }
+      this.checkErrors(parsed, this.origin);
       if (this.jsonErrors) {
         return;
       }
-      EventBus.$emit('json_update', JSON.parse($event), this.origin);
+      EventBus.$emit('json_update', parsed, this.origin);
+    },
+    /**
+     * handles errors from jso editor
+     */
+    onError($event) {
+      console.log($event);
+    },
+    /**
+     * handles JSON viewer mode change (text or form)
+     */
+    onModeChange(newMode) {
+      this.mode = newMode;
     },
     /**
      * Handles the save caption event from app menu or keyboard shortcut
@@ -385,6 +408,20 @@ $menu-height: 5.6rem;
   &__editor {
     width: 100%;
   }
+  .jsoneditor-contextmenu {
+    .jsoneditor-menu {
+      border-radius: 10px;
+      color: white;
+
+      button {
+        color: $white;
+
+        &:hover {
+          color: $black;
+        }
+      }
+    }
+  }
 
   .jsoneditor-menu {
     background-color: $accent;
@@ -413,8 +450,6 @@ $menu-height: 5.6rem;
   }
 
   &__errors {
-    position: relative;
-    top: 2.25rem;
     color: red;
   }
 
@@ -437,10 +472,15 @@ $menu-height: 5.6rem;
     &-group {
       display: flex;
       width: 100%;
+      margin-top: 2.2rem;
       min-height: 3.6rem;
       align-items: center;
       border-radius: 2rem;
 
+      &.--code {
+        margin-top: 5.2rem;
+      }
+
       &>* {
         width: 50%;
       }

From 1dbd9d12c6d7cbb0bd85df540ca6451f3f087df6 Mon Sep 17 00:00:00 2001
From: Sean Ryan <sean.ryan@redspace.com>
Date: Wed, 4 Aug 2021 14:55:39 -0300
Subject: [PATCH 4/8] code clean up

---
 .../components/caption-studio/JsonPreview.vue      | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/caption-studio/JsonPreview.vue b/src/renderer/components/caption-studio/JsonPreview.vue
index 64d92dc..aa20005 100644
--- a/src/renderer/components/caption-studio/JsonPreview.vue
+++ b/src/renderer/components/caption-studio/JsonPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="json">
     <v-jsoneditor ref="jsonEditor" class="json__editor" :options="options" :plus="false" height="446px" />
-    <div class="json__button-group" :class="{'--code': mode === 'code'}">
+    <div class="json__button-group" :class="{'--code': currentMode === 'code'}">
       <v-dialog v-model="saveErrorDialog" width="500">
         <v-card>
           <v-card-title class="error" primary-title>
@@ -83,14 +83,12 @@ export default {
       origin: 'JsonPreview',
       activeFile: '',
       fileNameMap: {},
-      mode: 'form',
+      currentMode: 'form',
       options: {
-        //onChangeJSON: this.onEdit,
         onChangeText: this.onEdit,
         modes: [ 'form', 'code'],
         onEvent: this.onEvent,
         onModeChange: this.onModeChange,
-        onError: this.onError,
       },
     };
   },
@@ -161,17 +159,11 @@ export default {
       }
       EventBus.$emit('json_update', parsed, this.origin);
     },
-    /**
-     * handles errors from jso editor
-     */
-    onError($event) {
-      console.log($event);
-    },
     /**
      * handles JSON viewer mode change (text or form)
      */
     onModeChange(newMode) {
-      this.mode = newMode;
+      this.currentMode = newMode;
     },
     /**
      * Handles the save caption event from app menu or keyboard shortcut

From 133d56a75d14aa12deed60c906cdd84413dfc20f Mon Sep 17 00:00:00 2001
From: Sean Ryan <sean.ryan@redspace.com>
Date: Thu, 5 Aug 2021 10:30:12 -0300
Subject: [PATCH 5/8] update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e63394d..ec07058 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - unreleased
+### Added
+- JSON Editor mode switch. Allows toggling between 'code' and 'form' modes, for better usability.
+
 ## [1.0.0] - 2020-03-31
 ### Added
 - Unit tests added for caption studio components and classes

From 5e8cb5e9530f157f5695ddfadc189d471642a1a0 Mon Sep 17 00:00:00 2001
From: Sean Ryan <sean.ryan@redspace.com>
Date: Thu, 5 Aug 2021 15:23:12 -0300
Subject: [PATCH 6/8] fix caption preview buttons

---
 CHANGELOG.md                                              | 4 ++++
 src/renderer/components/caption-studio/CaptionPreview.vue | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec07058..7ae8c94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,10 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.1.0] - unreleased
 ### Added
 - JSON Editor mode switch. Allows toggling between 'code' and 'form' modes, for better usability.
+### Fixed
+- Overflow: scroll causing 3-4 scroll bar regions to show up when unecessary
+- Fixed styles for caption preview next/previous buttons so they properly show up side by side
 
 ## [1.0.0] - 2020-03-31
 ### Added
 - Unit tests added for caption studio components and classes
+
 ### Changed
 - Caption Studio now reads audio files directly from project root, or user specified audio directory
 - Caption studio now allows for saving/opening caption JSON files directly from projects
diff --git a/src/renderer/components/caption-studio/CaptionPreview.vue b/src/renderer/components/caption-studio/CaptionPreview.vue
index a047c78..fddf86c 100644
--- a/src/renderer/components/caption-studio/CaptionPreview.vue
+++ b/src/renderer/components/caption-studio/CaptionPreview.vue
@@ -6,7 +6,6 @@
       <v-btn
         color="accent"
         class="font-semi-bold font-16 capitalize"
-        :block="true"
         :disabled="atStart"
         @click="prev"
       >
@@ -15,7 +14,7 @@
       <v-btn
         color="accent"
         class="font-semi-bold font-16 capitalize"
-        :block="true"
+
         :disabled="atEnd"
         @click="next"
       >
@@ -179,6 +178,7 @@ export default {
     .v-btn {
       border-radius: 0;
       margin: 0 0.09rem;
+      width: 50%;
     }
   }
 }

From 3022cc6a31ff5e4a3985b2b5ae67374303ee015f Mon Sep 17 00:00:00 2001
From: Sean Ryan <sean.ryan@redspace.com>
Date: Thu, 5 Aug 2021 15:23:59 -0300
Subject: [PATCH 7/8] remove overflow:scroll from app, html, and body

---
 src/renderer/App.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 7815c55..2f20d4e 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -25,7 +25,6 @@ html {
 html, body, #app {
   width: 100%;
   height: 100%;
-  overflow: scroll;
 }
 
 #app {

From 128e35801f928b4a8de7e9e72185b51f0b7e32b9 Mon Sep 17 00:00:00 2001
From: Sean Ryan <sean.ryan@redspace.com>
Date: Thu, 12 Aug 2021 11:27:50 -0300
Subject: [PATCH 8/8] fix bug when deleting captions

---
 src/renderer/class/CaptionManager.js                   | 4 ++++
 src/renderer/components/caption-studio/JsonPreview.vue | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/renderer/class/CaptionManager.js b/src/renderer/class/CaptionManager.js
index 0e332b2..bfcceeb 100644
--- a/src/renderer/class/CaptionManager.js
+++ b/src/renderer/class/CaptionManager.js
@@ -74,6 +74,10 @@ class CaptionManager {
       store.dispatch('setIsUnsavedChanges', { isUnsavedChanges: true });
     }
 
+    // reset the data obect everytime the JSON updates rather than just update the captions that need it
+    // because otherwise when the editor is in "code" mode, any deletions will get overwritten
+    this.data = {};
+
     Object.keys($event).forEach((key) => {
       $event[key].forEach((caption, index) => {
 
diff --git a/src/renderer/components/caption-studio/JsonPreview.vue b/src/renderer/components/caption-studio/JsonPreview.vue
index aa20005..0b05b21 100644
--- a/src/renderer/components/caption-studio/JsonPreview.vue
+++ b/src/renderer/components/caption-studio/JsonPreview.vue
@@ -86,7 +86,7 @@ export default {
       currentMode: 'form',
       options: {
         onChangeText: this.onEdit,
-        modes: [ 'form', 'code'],
+        modes: [ 'form', 'code' ],
         onEvent: this.onEvent,
         onModeChange: this.onModeChange,
       },
@@ -153,7 +153,9 @@ export default {
       } catch {
         return;
       }
+
       this.checkErrors(parsed, this.origin);
+
       if (this.jsonErrors) {
         return;
       }