Integrate text UI into Clip API

src/components/Clips.vue

@@ -27,10 +27,18 @@
               <li><a v-if="index > 0" class="dropdown-item" href="#" @click="moveClipBtn('up', clip, index, index - 1)">Move Up</a></li>
               <li><a v-if="index < clips.length - 1" class="dropdown-item" href="#" @click="moveClipBtn('down', clip, index, index + 1)">Move Down</a></li>
               <li><hr class="dropdown-divider"></li>
+              <li><a v-if="!clip.json.hasOwnProperty('text')" class="dropdown-item" href="#" @click="AddTextBtn(clip)">Add Text</a></li>
+              <li><a v-if="clip.json.hasOwnProperty('text')" class="dropdown-item" href="#" @click="RemoveTextBtn(clip)">Remove Text</a></li>
+              <li><hr class="dropdown-divider"></li>
               <li><a class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
             </ul>
           </div>
 
+          <!-- Clip text input -->
+          <div v-if="clip.json.hasOwnProperty('text')" class="mb-3 clip-text">
+            <input @blur="updateTextInput($event, clip)" type="text" class="form-control" placeholder="Enter text here" :value="clip.json.text">
+          </div>
+
           <!-- Clip length label -->
           <div ref="clip" class="clip-label">
             {{ (clip.end - clip.start).toFixed(1) }} Seconds
@@ -92,6 +100,21 @@ export default {
     }
   },
   methods: {
+    AddTextBtn(clipObj) {
+      clipObj.json.text = ""
+      let payload = { data: clipObj }
+      this.editClip(payload)
+    },
+    RemoveTextBtn(clipObj) {
+      delete clipObj.json.text
+      let payload = { data: clipObj }
+      this.editClip(payload)
+    },
+    updateTextInput(e, clipObj) {
+      clipObj.json.text = e.target.value
+      let payload = { data: clipObj }
+      this.editClip(payload)
+    },
     async startExport() {
       let payload = {
         "export_type": "video",
@@ -221,23 +244,30 @@ export default {
     padding: 3px;
     opacity: 75%;
   }
-  .export-btn {
-    float: right;
-  }
-  .dropdown-toggle {
-    filter: drop-shadow(0px 0px 2px #000000);
-  }
-  .clip-badge {
+  .clip-text {
     position: absolute;
-    bottom: 5%;
-    left: 5%;
-    padding: 8px;
-    opacity: 75%;
-    background-color: #000000;
-    border-radius: 4px;
-  }
-  video {
-    background-color: #000000;
-    width: 100%;
-  }
+    width: 96%;
+    opacity: 80%;
+    bottom: 10%;
+    padding: 10px;
+}
+.export-btn {
+  float: right;
+}
+.dropdown-toggle {
+  filter: drop-shadow(0px 0px 2px #000000);
+}
+.clip-badge {
+  position: absolute;
+  bottom: 5%;
+  left: 5%;
+  padding: 8px;
+  opacity: 75%;
+  background-color: #000000;
+  border-radius: 4px;
+}
+video {
+  background-color: #000000;
+  width: 100%;
+}
 </style>
\ No newline at end of file