Improved timeline trimming, integrated Clip API calls (create, load, delete),…

Improved timeline trimming, integrated Clip API calls (create, load, delete), fixed duplicate upload bug, made errors prettier / parse key/value, capitalize, and handle 404 on editor

src/App.vue

@@ -30,7 +30,7 @@
   <!--router content-->
   <div class="container">
     <!-- show any errors from vuex -->
-    <div v-for="error in errors" :key="error.id" class="alert alert-danger alert-dismissible fade show" role="alert">
+    <div v-for="error in errors" :key="error.id" class="error-message alert alert-danger alert-dismissible fade show" role="alert">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
         <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
       </svg>
@@ -68,7 +68,7 @@ export default {
       await this.login(auth)
       if (!this.isAuthenticated) {
         // login failed, show login page
-        this.$router.push('/login')
+        await this.$router.push('/login')
       }
     }
   }
@@ -79,4 +79,7 @@ export default {
 .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
   color: #ffffff;
 }
+.error-message {
+  text-transform: capitalize;
+}
 </style>

src/components/Clips.vue

 <template>
   <div class="row mb-3 p-2 scrolling-container">
-    <h3>Clips <button type="button" class="btn btn-secondary clip-btn">Add Clip</button></h3>
+    <h3>Clips</h3>
     <div class="col-12">
 
       <div class="row gy-2 gx-2 mb-2" v-for="clip in clips" :key="clip.id">
@@ -20,7 +20,7 @@
               <div class="d-grid gap-1 p-2">
                 <button type="button" class="btn btn-outline-primary">Move Up</button>
                 <button type="button" class="btn btn-outline-primary">Move Down</button>
-                <button type="button" class="btn btn-outline-primary">Delete</button>
+                <button type="button" class="btn btn-outline-primary" @click="deleteClipBtn(clip.id)">Delete</button>
                 </div>
             </div>
 
@@ -34,18 +34,25 @@
 </template>
 
 <script>
+import {mapActions, mapState} from "vuex"
+
 export default {
   name: "Clips.vue",
   props: ['project'],
   data() {
-    return {
-      clips: [
-        { 'id': 1, 'name': 'filename1.mp4', 'start': 0, 'end': 10 },
-        { 'id': 2, 'name': 'filename1.mp4', 'start': 3, 'end': 13 },
-        { 'id': 3, 'name': 'filename1.mp4', 'start': 0, 'end': 5 },
-        { 'id': 4, 'name': 'filename1.mp4', 'start': 10, 'end': 15 }
-      ]
-    }
+    return {}
+  },
+  methods: {
+    deleteClipBtn(clip_id) {
+      this.deleteClip(clip_id)
+    },
+    ...mapActions(['loadClips', 'createClip', 'deleteClip'])
+  },
+  computed: {
+    ...mapState(['clips'])
+  },
+  async mounted() {
+    await this.loadClips(this.project.id)
   }
 }
 </script>

src/components/Files.vue

@@ -38,8 +38,8 @@ export default {
     },
     async fileChanged(event) {
       let results = []
-      let data = new FormData();
       for (let file of event.target.files) {
+        let data = new FormData();
         data.append('media', file);
         data.append('project', this.project.url);
         data.append('json', "{}");
@@ -58,7 +58,11 @@ export default {
       this.$refs.fileUpload.value = null
     },
     toggleSelection(fileObject) {
-      this.setPreviewFile(fileObject)
+      if (fileObject != this.previewFile) {
+        this.setPreviewFile(fileObject)
+      } else {
+        this.setPreviewFile(null)
+      }
     },
     getSelectedClass(fileObject) {
       if (this.previewFile && fileObject.id == this.previewFile.id) {

src/components/Preview.vue

@@ -33,16 +33,17 @@
             <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
           </svg>
         </div>
-        <div ref="end" class="marker marker_right" @click="seekToMarker('end')" @mousedown="startDrag($event, 'end')" @touchstart="startDrag($event, 'end')" :style="{left: (markers.end - getMarkerWidth()) * 100.0 + '%'}">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="48" fill="currentColor" class="bi bi-grip-vertical" viewBox="1 0 16 16">
+        <div ref="end" class="marker marker_right" @click="seekToMarker('end')" @mousedown="startDrag($event, 'end')" @touchstart="startDrag($event, 'end')" :style="{left: (markers.end - marker_width_percent) * 100.0 + '%'}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="48" fill="currentColor" class="bi bi-grip-vertical" viewBox="3 0 16 16">
             <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
           </svg>
         </div>
+        <div class="clip" :style="{left: markers.start * 100.0 + '%', width: (markers.end - markers.start) * 100.0 + '%'}"></div>
       </div>
     </div>
     <div class="col-sm-1 d-flex flex-column p-1">
-      <button type="button" class="btn btn-secondary timeline-btn">
-        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus" viewBox="2 0 16 16">
+      <button type="button" class="btn btn-secondary 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">
           <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>
       </button>
@@ -58,7 +59,7 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import {mapState, mapActions} from "vuex";
 
 export default {
   name: "Preview.vue",
@@ -72,10 +73,28 @@ export default {
         start: 0.0,
         end: 1.0
       },
-      marker_width: 12
+      marker_width: 12,
+      marker_width_percent: 0.0
     }
   },
   methods: {
+    async createClipBtn() {
+      let data = {
+        "file": this.previewFile.url,
+        "position": 0.0,
+        "start": this.markers.start * this.previewFile.json.duration,
+        "end": this.markers.end * this.previewFile.json.duration,
+        "layer": 1,
+        "project": this.project.url,
+        "json": {}
+      }
+      let payload = {
+        project_id: this.project.id,
+        project_url: this.project.url,
+        data
+      }
+      await this.createClip(payload)
+    },
     togglePause() {
       this.is_paused = this.$refs.video.paused
     },
@@ -134,7 +153,6 @@ export default {
       } else {
         return 0.0
       }
-
     },
     getCursorPosition(e, x_offset=0) {
       let timeline_bounds = this.$refs.timeline.getBoundingClientRect()
@@ -159,7 +177,8 @@ export default {
       let relative_x = x - timeline_bounds.left
       let percent_x = (relative_x / timeline_bounds.width)
       return percent_x
-    }
+    },
+    ...mapActions(['createClip'])
   },
   computed: {
     ...mapState(['previewFile']),
@@ -179,6 +198,9 @@ export default {
       }
       return ''
     }
+  },
+  updated() {
+    this.marker_width_percent = this.getMarkerWidth()
   }
 }
 </script>
@@ -205,13 +227,21 @@ video {
   width: 12px;
   border-radius: 4px;
   position: absolute;
-  cursor: grab;
+  cursor: ew-resize;
+  z-index: 10;
+}
+.clip {
+  background-color: #0d6efd;
+  height:48px;
+  position: absolute;
+  opacity: 50%;
+  z-index: 0;
 }
 .marker_left {
-  border-left: #ffffff solid 1px;
+  border-left: rgba(255, 255, 255, 0.5) solid 1px;
 }
 .marker_right {
-  border-right: #ffffff solid 1px;
+  border-right: rgba(255, 255, 255, 0.5) solid 1px;
 }
 .playhead {
   background-color: #ffffff;

src/store/axios.js

@@ -14,16 +14,4 @@ instance.interceptors.request.use(function (config) {
     return config;
 });
 
-// Handle authorization errors
-instance.interceptors.response.use(
-response => {
-    return response;
-},
-error => {
-    if (error.response.status === 401) {
-        //store.commit('addError', 'Invalid username or password, please login again')
-    }
-    return Promise.reject(error)
-});
-
 export { instance };
\ No newline at end of file

src/store/index.js

@@ -7,6 +7,7 @@ export default createStore({
   state: {
     projects: [],
     files: [],
+    clips: [],
     user: null,
     errors: [],
     previewFile: null,
@@ -15,8 +16,17 @@ export default createStore({
 
   mutations: {
     addError(state, message) {
-      let error = {'id': uuidv4(), 'message': message}
-      state.errors.push(error)
+      if (typeof(message) == "object") {
+        // Loop through object keys (potentially multiple errors)
+        for (const key in message) {
+          let error = {'id': uuidv4(), 'message': `${key}: ${message[key]}`}
+          state.errors.push(error)
+        }
+      } else {
+        // Single error message
+        let error = {'id': uuidv4(), 'message': message}
+        state.errors.push(error)
+      }
     },
     removeError(state, error) {
       state.errors = state.errors.filter(err => err.id != error.id )
@@ -33,6 +43,12 @@ export default createStore({
     setFiles(state, files) {
       state.files = files
     },
+    setClips(state, clips) {
+      state.clips = clips
+    },
+    deleteClip(state, clip_id) {
+      state.clips = state.clips.filter(clip => clip.id != clip_id)
+    },
     setPreviewFile(state, file) {
       state.previewFile = file
     },
@@ -63,7 +79,7 @@ export default createStore({
         commit('setUser', user_object)
       } catch(err) {
         commit('setUser', null)
-        commit('addError', JSON.stringify(err.response.data))
+        commit('addError', err.response.data)
       }
     },
     async loadProjects({commit}) {
@@ -71,14 +87,14 @@ export default createStore({
         const response = await instance.get('/projects/')
         commit('setProjects', response.data.results)
       } catch(err) {
-        commit('addError', JSON.stringify(err.response.data))
+        commit('addError', err.response.data)
       }
     },
     async getProject({commit}, project_id) {
       try {
         return instance.get(`projects/${project_id}/`)
       } catch(err) {
-        commit('addError', JSON.stringify(err.response.data))
+        commit('addError', err.response.data)
       }
     },
     async createProject({dispatch, commit}, payload) {
@@ -86,7 +102,7 @@ export default createStore({
         await instance.post('/projects/', payload)
         dispatch('loadProjects')
       } catch(err) {
-        commit('addError', JSON.stringify(err.response.data))
+        commit('addError', err.response.data)
       }
     },
     async deleteProject({commit, dispatch}, project_id) {
@@ -94,7 +110,7 @@ export default createStore({
         await instance.delete(`projects/${project_id}/`)
         dispatch('loadProjects')
       } catch(err) {
-        commit('addError', JSON.stringify(err.response.data))
+        commit('addError', err.response.data)
       }
     },
     async loadFiles({commit}, project_id) {
@@ -102,7 +118,31 @@ export default createStore({
         const response = await instance.get(`projects/${project_id}/files/`)
         commit('setFiles', response.data.results)
       } catch(err) {
-        commit('addError', JSON.stringify(err.response.data))
+        commit('addError', err.response.data)
+      }
+    },
+    async loadClips({commit}, project_id) {
+      try {
+        const response = await instance.get(`projects/${project_id}/clips/`)
+        commit('setClips', response.data.results)
+      } catch(err) {
+        commit('addError', err.response.data)
+      }
+    },
+    async createClip({dispatch, commit}, payload) {
+      try {
+        await instance.post(`${payload.project_url}clips/`, payload.data)
+        dispatch('loadClips', payload.project_id)
+      } catch(err) {
+        commit('addError', err.response.data)
+      }
+    },
+    async deleteClip({commit}, clip_id) {
+      try {
+        await instance.delete(`clips/${clip_id}/`)
+        commit('deleteClip', clip_id)
+      } catch(err) {
+        commit('addError', err.response.data)
       }
     },
     async createFile({dispatch, commit}, payload) {
@@ -124,7 +164,7 @@ export default createStore({
         dispatch('loadFiles', payload.project_id)
       } catch(err) {
         commit('removeUpload', uploadID)
-        commit('addError', JSON.stringify(err.response.data))
+        commit('addError', err.response.data)
       }
     }
   },

src/views/Editor.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapMutations } from "vuex";
 import Files from "../components/Files";
 import Clips from "../components/Clips";
 import Preview from "../components/Preview";
@@ -25,7 +25,8 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['getProject'])
+    ...mapActions(['getProject']),
+    ...mapMutations(['addError'])
   },
   computed: {
     id() {
@@ -36,9 +37,16 @@ export default {
     Files, Clips, Preview
   },
   async mounted() {
-    let results = await this.getProject(this.$route.params.id)
-    this.project = results.data
-    this.hasData = true
+    try {
+      let results = await this.getProject(this.$route.params.id)
+      this.project = results.data
+      this.hasData = true
+    } catch(err) {
+      // Handle 404
+      this.addError(err.response.data)
+      await this.$router.push(`/`)
+    }
+
   }
 }
 </script>