Refactored moveClip into Vuex action, and invoke this action on both 'Move Clip'…

Refactored moveClip into Vuex action, and invoke this action on both 'Move Clip' and 'Update Clip'... to fix all clip 'positions'

src/components/Clips.vue

@@ -20,8 +20,8 @@
               <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
             </svg>
             <ul class="dropdown-menu small-dropdown">
-              <li><a v-if="index > 0" class="dropdown-item" href="#" @click="moveClip('up', clip, index, index - 1)">Move Up</a></li>
-              <li><a v-if="index < clips.length - 1" class="dropdown-item" href="#" @click="moveClip('down', clip, index, index + 1)">Move Down</a></li>
+              <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 class="dropdown-item" href="#" @click="deleteClipBtn(clip.id)">Delete</a></li>
             </ul>
@@ -53,36 +53,9 @@ export default {
     deleteClipBtn(clip_id) {
       this.deleteClip(clip_id)
     },
-    moveClip(direction, clipObj, start_index, dest_index) {
-      let local_clips = [...this.thumbnailedClips]
-      let reordered_clips = this.reorder(local_clips, start_index, dest_index)
-
-      let pos = 0.0
-      for (let clip of reordered_clips) {
-        clip.position = pos
-        let payload = { data: clip, latest: false, thumbnail: false }
-        if (clip.id == clipObj.id) {
-          payload.latest = true
-        }
-        this.editClip(payload)
-        pos += (clip.end - clip.start)
-      }
-    },
-    reorder(array, sourceIndex, destinationIndex) {
-      const smallerIndex = Math.min(sourceIndex, destinationIndex)
-      const largerIndex = Math.max(sourceIndex, destinationIndex)
-
-      return [
-        ...array.slice(0, smallerIndex),
-        ...(sourceIndex < destinationIndex
-            ? array.slice(smallerIndex + 1, largerIndex + 1)
-            : []),
-        array[sourceIndex],
-        ...(sourceIndex > destinationIndex
-            ? array.slice(smallerIndex, largerIndex)
-            : []),
-        ...array.slice(largerIndex + 1),
-      ]
+    moveClipBtn(direction, clip, current, dest) {
+      let payload = {direction, clip, current, dest }
+      this.moveClip(payload)
     },
     toggleSelection(clipObj) {
       if (clipObj != this.preview.clip) {
@@ -108,14 +81,11 @@ export default {
         this.setScrollToClip(null)
       }
     },
-    ...mapActions(['loadClips', 'createClip', 'deleteClip', 'editClip']),
+    ...mapActions(['loadClips', 'createClip', 'deleteClip', 'editClip', 'moveClip']),
     ...mapMutations((['setPreviewClip', 'setClips', 'setScrollToClip']))
   },
   computed: {
-    thumbnailedClips() {
-      return this.clips.filter(clip => clip.thumbnail).sort((a, b) => a.position - b.position)
-    },
-    ...mapGetters(['totalClipDuration']),
+    ...mapGetters(['totalClipDuration', 'thumbnailedClips']),
     ...mapState(['clips', 'preview', 'scrollToClip'])
   },
   watch: {

src/components/Preview.vue

@@ -69,6 +69,7 @@
 
 <script>
 import {mapState, mapActions, mapGetters, mapMutations} from "vuex";
+import {fixImageDuration} from "../store/axios";
 
 export default {
   name: "Preview.vue",
@@ -86,21 +87,34 @@ export default {
   },
   methods: {
     async createClipBtn() {
+      if (!this.preview.clip) {
+        // Create new clip
         let data = {
           "file": this.preview.file.url,
           "position": this.totalClipDuration,
-        "start": this.preview.start * this.preview.file.json.duration,
-        "end": this.preview.end * this.preview.file.json.duration,
+          "start": this.preview.start * fixImageDuration(this.preview.file.json.duration),
+          "end": this.preview.end * fixImageDuration(this.preview.file.json.duration),
           "layer": 1,
           "project": this.project.url,
           "json": {}
         }
-      let payload = {
-        project_id: this.project.id,
-        project_url: this.project.url,
-        data
-      }
+        let payload = {project_id: this.project.id, project_url: this.project.url, data}
         await this.createClip(payload)
+      }
+      else
+      {
+        // Edit existing clip
+        let clipObj = this.preview.clip
+        clipObj.start = this.preview.start * fixImageDuration(this.preview.file.json.duration)
+        clipObj.end = this.preview.end * fixImageDuration(this.preview.file.json.duration)
+        let payload = { data: clipObj, latest: false, thumbnail: true }
+        await this.editClip(payload)
+
+        // Re-order clips (and fix 'position' to be valid again)
+        let move_payload = {direction: null, clip: clipObj, current: -1, dest: -1 }
+        await this.moveClip(move_payload)
+      }
+      this.setPreviewFile(null)
     },
     togglePause() {
       if (this.$refs.video) {
@@ -228,8 +242,8 @@ export default {
       let percent_x = (relative_x / timeline_bounds.width)
       return percent_x
     },
-    ...mapActions(['createClip']),
-    ...mapMutations(['setPreview', 'setPreviewPosition'])
+    ...mapActions(['createClip', 'editClip', 'moveClip']),
+    ...mapMutations(['setPreview', 'setPreviewPosition', 'setPreviewFile'])
   },
   computed: {
     ...mapState(['preview']),

src/store/axios.js

@@ -24,4 +24,21 @@ function fixImageDuration(duration) {
     }
 }
 
-export { instance, blob_instance, fixImageDuration };
\ No newline at end of file
+function reorderArray(array, sourceIndex, destinationIndex) {
+    const smallerIndex = Math.min(sourceIndex, destinationIndex)
+    const largerIndex = Math.max(sourceIndex, destinationIndex)
+
+    return [
+        ...array.slice(0, smallerIndex),
+        ...(sourceIndex < destinationIndex
+            ? array.slice(smallerIndex + 1, largerIndex + 1)
+            : []),
+        array[sourceIndex],
+        ...(sourceIndex > destinationIndex
+            ? array.slice(smallerIndex, largerIndex)
+            : []),
+        ...array.slice(largerIndex + 1),
+    ]
+}
+
+export { instance, blob_instance, fixImageDuration, reorderArray };
\ No newline at end of file

src/store/index.js

 import { createStore } from 'vuex'
 import { v4 as uuidv4 } from "uuid"
-import { instance, blob_instance, fixImageDuration } from "./axios"
+import { instance, blob_instance, fixImageDuration, reorderArray } from "./axios"
 
 
 export default createStore({
@@ -165,6 +165,9 @@ export default createStore({
     isAuthenticated: state => !!state.user,
     totalClipDuration: state => {
       return state.clips.map(clip => clip.end - clip.start).reduce((prev, curr) => prev + curr, 0.0)
+    },
+    thumbnailedClips: state => {
+      return state.clips.filter(clip => clip.thumbnail).sort((a, b) => a.position - b.position)
     }
   },
   actions: {
@@ -276,6 +279,23 @@ export default createStore({
         commit('addError', err.response.data)
       }
     },
+    async moveClip({dispatch, getters}, payload) {
+      let local_clips = [...getters.thumbnailedClips]
+      let reordered_clips = local_clips
+      if (payload.current != payload.dest) {
+        reordered_clips = reorderArray(local_clips, payload.current, payload.dest)
+      }
+      let pos = 0.0
+      for (let c of reordered_clips) {
+        c.position = pos
+        let edit_payload = { data: c, latest: false, thumbnail: false }
+        if (c.id == payload.clip.id) {
+          edit_payload.latest = true
+        }
+        dispatch('editClip', edit_payload)
+        pos += (c.end - c.start)
+      }
+    },
     async deleteClip({commit}, clip_id) {
       try {
         await instance.delete(`clips/${clip_id}/`)