bug/bug-fixes (#424)

* fix image write/caching

* Caddyfile Caching header

* more aggressive caching

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/api/recipe.js

@@ -146,16 +146,16 @@ export const recipeAPI = {
     return response.data;
   },
 
-  recipeImage(recipeSlug) {
-    return `/api/media/recipes/${recipeSlug}/images/original.webp`;
+  recipeImage(recipeSlug, version = null, key = null) {
+    return `/api/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
   },
 
-  recipeSmallImage(recipeSlug) {
-    return `/api/media/recipes/${recipeSlug}/images/min-original.webp`;
+  recipeSmallImage(recipeSlug, version = null, key = null) {
+    return `/api/media/recipes/${recipeSlug}/images/min-original.webp?&rnd=${key}&version=${version}`;
   },
 
-  recipeTinyImage(recipeSlug) {
-    return `/api/media/recipes/${recipeSlug}/images/tiny-original.webp`;
+  recipeTinyImage(recipeSlug, version = null, key = null) {
+    return `/api/media/recipes/${recipeSlug}/images/tiny-original.webp?&rnd=${key}&version=${version}`;
   },
 
   recipeAssetPath(recipeSlug, assetName) {

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -209,10 +209,6 @@ export default {
       }
     },
 
-    getImage(image) {
-      return api.recipes.recipeSmallImage(image);
-    },
-
     formatDate(date) {
       if (!date) return null;
 

frontend/src/components/Recipe/CardImage.vue

@@ -42,6 +42,9 @@ export default {
     slug: {
       default: null,
     },
+    imageVersion: {
+      default: null,
+    },
     height: {
       default: 200,
     },
@@ -65,14 +68,14 @@ export default {
     };
   },
   methods: {
-    getImage(image) {
+    getImage(slug) {
       switch (this.imageSize) {
         case "tiny":
-          return api.recipes.recipeTinyImage(image);
+          return api.recipes.recipeTinyImage(slug, this.imageVersion);
         case "small":
-          return api.recipes.recipeSmallImage(image);
+          return api.recipes.recipeSmallImage(slug, this.imageVersion);
         case "large":
-          return api.recipes.recipeImage(image);
+          return api.recipes.recipeImage(slug, this.imageVersion);
       }
     },
   },

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -59,8 +59,8 @@ export default {
     };
   },
   methods: {
-    getImage(image) {
-      return api.recipes.recipeSmallImage(image);
+    getImage(slug) {
+      return api.recipes.recipeSmallImage(slug, this.image);
     },
   },
 };

frontend/src/components/Recipe/RecipeCard.vue

@@ -7,7 +7,7 @@
       @click="$emit('click')"
       min-height="275"
     >
-      <CardImage icon-size="200" :slug="slug">
+      <CardImage icon-size="200" :slug="slug" :image-version="image">
         <v-expand-transition v-if="description">
           <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal  " style="height: 100%;">
             <v-card-text class="v-card--text-show white--text">
@@ -65,8 +65,8 @@ export default {
     };
   },
   methods: {
-    getImage(image) {
-      return api.recipes.recipeSmallImage(image);
+    getImage(slug) {
+      return api.recipes.recipeSmallImage(slug, this.image);
     },
   },
 };

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -155,9 +155,9 @@ export default {
       this.recipeDetails = await api.recipes.requestDetails(this.currentRecipe);
       this.skeleton = false;
     },
-    getImage(image) {
-      if (image) {
-        return api.recipes.recipeImage(image) + "?&rnd=" + this.imageKey;
+    getImage(slug) {
+      if (slug) {
+        return api.recipes.recipeImage(slug, this.imageKey, this.recipeDetails.image);
       }
     },
     async deleteRecipe() {
@@ -175,7 +175,9 @@ export default {
     },
     async saveImage(overrideSuccessMsg = false) {
       if (this.fileObject) {
-        if (api.recipes.updateImage(this.recipeDetails.slug, this.fileObject, overrideSuccessMsg)) {
+        const newVersion = await api.recipes.updateImage(this.recipeDetails.slug, this.fileObject, overrideSuccessMsg);
+        if (newVersion) {
+          this.recipeDetails.image = newVersion.data.version;
           this.imageKey += 1;
         }
       }
@@ -192,6 +194,7 @@ export default {
         if (slug != this.recipeDetails.slug) {
           this.$router.push(`/recipe/${slug}`);
         }
+        window.URL.revokeObjectURL(this.getImage(this.recipeDetails.slug));
       }
     },
     printPage() {