From 4bcf7c73d3b0b54217fab05e24a8ca752cb9d622 Mon Sep 17 00:00:00 2001
From: Marcel Hellkamp <marc@gsites.de>
Date: Tue, 15 Aug 2023 16:13:49 +0200
Subject: [PATCH] Trigger re-layout on media load events

Loading media changes dimensions of the containing cards,
so we need to re-layout the grid.
---
 src/App.vue             | 16 +++++++++-------
 src/components/Card.vue |  8 +++++---
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7b8e3ea..5c826f8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, ref, watch } from 'vue';
 import { createFilterWrapper, debounceFilter, useDocumentVisibility, usePreferredDark, useWindowSize } from '@vueuse/core'
 
 import { type Config, type Post } from '@/types';
@@ -42,12 +42,14 @@ watch(visibilityState, () => {
 })
 
 // Fix Masonry layout on updates, config changes or window resize events
-const fixLayout = inject('redrawVueMasonry') as () => void
-const windowSize = useWindowSize()
-const layoutDebounce = debounceFilter(500, { maxWait: 500 })
-const doFixLayoput = createFilterWrapper(layoutDebounce, () => fixLayout())
-watch([windowSize.width, config, allPosts], doFixLayoput, { deep: true })
-onUpdated(doFixLayoput)
+const fixLayoutNow = inject('redrawVueMasonry') as () => void
+const fixLayout = createFilterWrapper(debounceFilter(500, { maxWait: 500 }), ()=>{
+  console.debug("Updating masonry layout")
+  fixLayoutNow()
+})
+provide("fixLayout", fixLayout)
+onUpdated(fixLayout)
+watch([useWindowSize().width, config, allPosts], fixLayout, { deep: true })
 
 // Watch for a theme changes
 const isDarkPrefered = usePreferredDark()
diff --git a/src/components/Card.vue b/src/components/Card.vue
index d0b090c..f5b57c8 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useElementVisibility, useIntervalFn } from '@vueuse/core'
-import { computed, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 import moment from 'moment'
 import { type Config, type Post } from '@/types';
 
@@ -25,6 +25,8 @@ const playVideo = computed(() => {
   return media.value?.type === "video" && props.config.playVideos && videoIsVisible.value
 })
 
+const onMediaLoad = inject('fixLayout', () => undefined)
+
 </script>
 
 <template>
@@ -42,9 +44,9 @@ const playVideo = computed(() => {
       </div>
       <div class="card-body">
         <div v-if="config.showMedia" class="wall-media mb-3">
-          <img v-if="media?.type === 'image'" :src="media.url" :alt="media.alt" :title="media.alt">
+          <img v-if="media?.type === 'image'" :src="media.url" :alt="media.alt" :title="media.alt" @load="onMediaLoad">
           <video v-else-if="media?.type === 'video'" ref="videoElement" muted loop :autoplay="playVideo"
-            :poster="media.preview" :alt="media.alt" :title="media.alt">
+            :poster="media.preview" :alt="media.alt" :title="media.alt" @loadedmetadata="onMediaLoad">
             <source v-if="playVideo" :src="media.url">
           </video>
         </div>