Updating "Preview" label to be dynamic: "Add Clip" or "Edit Clip", and the save…

Updating "Preview" label to be dynamic: "Add Clip" or "Edit Clip", and the save button to be different in both cases.

src/components/Preview.vue

@@ -2,7 +2,7 @@
   <!-- Preview header -->
   <div class="row">
     <div class="col-xs-12">
-      <h3>Preview</h3>
+      <h3>{{ previewHeading }}</h3>
     </div>
   </div>
 
@@ -61,10 +61,13 @@
 
     <!-- Add Clip button -->
     <div class="col-sm-1 d-flex flex-column p-1">
-      <button title="Add Clip" type="button" class="btn btn-primary timeline-btn" @click="createClipBtn">
-        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
+      <button :title="actionButtonTitle" type="button" class="btn btn-primary timeline-btn d-flex flex-column justify-content-center align-items-center" @click="createClipBtn">
+        <svg v-if="!isEditingClip" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
           <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
         </svg>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+          <path d="M13.485 1.431a1 1 0 0 1 .084 1.41l-7 8a1 1 0 0 1-1.497.05l-3-3a1 1 0 0 1 1.414-1.414l2.235 2.236 6.356-7.272a1 1 0 0 1 1.408-.01z"/>
+        </svg>
       </button>
     </div>
   </div>
@@ -341,6 +344,18 @@ export default {
   computed: {
     ...mapState(['preview']),
     ...mapGetters(['totalClipDuration']),
+    isEditingClip() {
+      return !!this.preview.clip
+    },
+    actionButtonTitle() {
+      return this.isEditingClip ? 'Save Clip' : 'Add Clip'
+    },
+    previewHeading() {
+      if (!this.hasPreviewFile) {
+        return 'Preview'
+      }
+      return this.isEditingClip ? 'Edit Clip' : 'Create Clip'
+    },
     hasPreviewFile() {
       if (this.preview.file) {
         return true