Add JSON Editor Mode Switcher

CHANGELOG.md

@@ -4,9 +4,17 @@ 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.
+### 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

src/renderer/App.vue

@@ -25,7 +25,6 @@ html {
 html, body, #app {
   width: 100%;
   height: 100%;
-  overflow: scroll;
 }
 
 #app {

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) => {
 

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"
       >
@@ -117,6 +116,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
@@ -175,6 +178,7 @@ export default {
     .v-btn {
       border-radius: 0;
       margin: 0 0.09rem;
+      width: 50%;
     }
   }
 }

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': currentMode === 'code'}">
       <v-dialog v-model="saveErrorDialog" width="500">
         <v-card>
           <v-card-title class="error" primary-title>
@@ -83,10 +83,12 @@ export default {
       origin: 'JsonPreview',
       activeFile: '',
       fileNameMap: {},
+      currentMode: 'form',
       options: {
-        onChangeJSON: this.onEdit,
-        mode: 'form',
-        onEvent: this.onEvent
+        onChangeText: this.onEdit,
+        modes: [ 'form', 'code' ],
+        onEvent: this.onEvent,
+        onModeChange: this.onModeChange,
       },
     };
   },
@@ -143,11 +145,27 @@ export default {
      * Handles JSON Editor changes
      */
     onEdit($event) {
-      this.checkErrors($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', $event, this.origin);
+      EventBus.$emit('json_update', parsed, this.origin);
+    },
+    /**
+     * handles JSON viewer mode change (text or form)
+     */
+    onModeChange(newMode) {
+      this.currentMode = newMode;
     },
     /**
      * Handles the save caption event from app menu or keyboard shortcut
@@ -207,6 +225,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 +342,10 @@ export default {
 
         const file = json[key];
 
+        if (!file) {
+          return;
+        }
+
         if (!Array.isArray(file)) {
           return;
         }
@@ -376,6 +402,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;
@@ -404,8 +444,6 @@ $menu-height: 5.6rem;
   }
 
   &__errors {
-    position: relative;
-    top: 2.25rem;
     color: red;
   }
 
@@ -428,10 +466,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%;
       }