Fixed thumbnail widths on all card views. Added col-md sizes on thumbnails.…

Fixed thumbnail widths on all card views. Added col-md sizes on thumbnails. Refactored AddProject, LoadProjects, and RemoveProject (faster async calls). Added Project thumbnails. Changed Projects screen to use thumbnails, context menus. Added profile/presets option to new project modal.

src/components/Clips.vue

@@ -189,6 +189,7 @@ export default {
   }
   .clip-thumbnail {
     cursor: pointer;
+    width: 100%;
   }
   .clip-btn {
     float: right;

src/components/Files.vue

@@ -19,7 +19,7 @@
 
   <!-- Scrolling container for files -->
   <div class="row mb-3 gx-2 p-2 scrolling-container">
-    <div v-for="file in searchedFiles" :key="file.id" class="col-sm-12 col-lg-4" style="position: relative;">
+    <div v-for="file in searchedFiles" :key="file.id" class="col-sm-12 col-md-6 col-lg-4" style="position: relative;">
       <!-- Context Menu -->
       <div class="btn-group dropstart context-menu">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="dropdown-toggle bi bi-three-dots-vertical" data-bs-toggle="dropdown" aria-expanded="false" viewBox="0 0 16 16">
@@ -156,6 +156,7 @@ export default {
   }
   .file-thumbnail {
     cursor: pointer;
+    width: 100%;
   }
   .context-menu {
     color: #ffffff;

src/store/index.js

@@ -52,12 +52,24 @@ export default createStore({
     setUser(state, user) {
       state.user = user
     },
+    addProject(state, projectObj) {
+      state.projects.push(projectObj)
+    },
     setProjects(state, projects) {
       state.projects = projects
     },
     setProject(state, project) {
       state.project = project
     },
+    updateProjectThumbnail(state, payload) {
+      state.projects = [
+        ...state.projects = state.projects.filter(p => p.id != payload.obj.id),
+        payload.obj
+      ]
+    },
+    deleteProject(state, project_id) {
+      state.projects = state.projects.filter(p => p.id != project_id)
+    },
     setFiles(state, files) {
       state.files = files
     },
@@ -184,6 +196,9 @@ export default createStore({
     thumbnailedClips: state => {
       return state.clips.filter(clip => clip.thumbnail).sort((a, b) => a.position - b.position)
     },
+    thumbnailedProjects: state => {
+      return state.projects.filter(project => project.thumbnail).sort((a, b) => b.id - a.id)
+    },
     activeExports: state => {
       return state.exports.filter(e => e.status == "in-progress" || e.status == "pending").sort((a, b) => b.id - a.id)
     }
@@ -200,10 +215,16 @@ export default createStore({
         commit('addError', err.response.data)
       }
     },
-    async loadProjects({commit}) {
+    async loadProjects({commit, dispatch}) {
       try {
         const response = await instance.get('/projects/')
-        commit('setProjects', response.data.results)
+        // Sort all projects, and limit to X most recent
+        let sorted_projects = response.data.results.sort().reverse().slice(0, 12)
+        commit('setProjects', sorted_projects)
+        for (let p of response.data.results) {
+          let payload = { obj: p, frame: 1 }
+          dispatch('attachThumbnail', payload)
+        }
       } catch(err) {
         commit('addError', err.response.data)
       }
@@ -215,18 +236,20 @@ export default createStore({
         commit('addError', err.response.data)
       }
     },
-    async createProject({dispatch, commit}, payload) {
+    async createProject({commit, dispatch}, payload) {
       try {
-        await instance.post('/projects/', payload)
-        dispatch('loadProjects')
+        const response = await instance.post('/projects/', payload)
+        commit('addProject', response)
+        let thumbnail_payload = { obj: response.data, frame: 1 }
+        dispatch('attachThumbnail', thumbnail_payload)
       } catch(err) {
         commit('addError', err.response.data)
       }
     },
-    async deleteProject({commit, dispatch}, project_id) {
+    async deleteProject({commit}, project_id) {
       try {
         await instance.delete(`projects/${project_id}/`)
-        dispatch('loadProjects')
+        commit('deleteProject', project_id)
       } catch(err) {
         commit('addError', err.response.data)
       }
@@ -358,18 +381,20 @@ export default createStore({
       }
     },
     async attachThumbnail({commit}, payload) {
-      let fileObj = null
+      let Obj = payload.obj
       let objectType = null
       if (payload.obj.file) {
         // Clip passed in
-        fileObj = payload.obj.fileObj
+        Obj = payload.obj.fileObj
         objectType = 'clip'
-      } else {
+      } else if (payload.obj.media) {
         // File passed in
-        fileObj = payload.obj
         objectType = 'file'
+      } else {
+        // Project passed in
+        objectType = 'project'
       }
-      let sessionKey = `${objectType}-${fileObj.id}-frame${payload.frame}`
+      let sessionKey = `${objectType}-${Obj.id}-frame${payload.frame}`
 
       let data = {
         "frame_number": payload.frame,
@@ -390,7 +415,7 @@ export default createStore({
           }
         }
         if (!thumbnailUrl) {
-          const response = await instance.post(`${fileObj.url}thumbnail/`, data, { responseType: 'arraybuffer' })
+          const response = await instance.post(`${Obj.url}thumbnail/`, data, { responseType: 'arraybuffer' })
           let blob = new Blob(
               [response.data],
               { type: response.headers['content-type'] }
@@ -403,8 +428,10 @@ export default createStore({
         payload.obj.thumbnail = thumbnailUrl
         if (objectType == 'file') {
           commit('updateFileThumbnail', payload)
-        } else {
+        } else if (objectType == 'clip') {
           commit('updateClipThumbnail', payload)
+        } else {
+          commit('updateProjectThumbnail', payload)
         }
 
       } catch(err) {