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,13 +244,20 @@ export default {
     padding: 3px;
     opacity: 75%;
   }
-  .export-btn {
+  .clip-text {
+    position: absolute;
+    width: 96%;
+    opacity: 80%;
+    bottom: 10%;
+    padding: 10px;
+}
+.export-btn {
   float: right;
-  }
-  .dropdown-toggle {
+}
+.dropdown-toggle {
   filter: drop-shadow(0px 0px 2px #000000);
-  }
-  .clip-badge {
+}
+.clip-badge {
   position: absolute;
   bottom: 5%;
   left: 5%;
@@ -235,9 +265,9 @@ export default {
   opacity: 75%;
   background-color: #000000;
   border-radius: 4px;
-  }
-  video {
+}
+video {
   background-color: #000000;
   width: 100%;
-  }
+}
 </style>
\ No newline at end of file