Initial Commit

resources/js/components/dredge/Feed/PostCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Avatar from '@/components/dredge/Avatar.vue';
+import PostVideo from './PostVideo.vue';
 import type { Post } from '@/types/dredge.types';
 import { usePauseOffscreen } from '@/composables/usePauseOffScreen';
 import { ComponentPublicInstance, ref } from 'vue';
@@ -76,20 +77,12 @@ usePauseOffscreen(videoRefs);
                 :style="{ '--slide-count': carouselSlides.length }"
             >
                 <v-carousel-item v-for="(slide, i) in carouselSlides" :key="i">
-                    <video
+                    <PostVideo
                         v-if="slide.video_url"
                         :src="slide.video_url"
                         :aria-label="slide.alt"
-                        :ref="registerVideo"
-                        controls
-                        autoplay
-                        muted
-                        preload="metadata"
-                        playsinline
-                        class="card__video"
-                    >
-                        Your browser doesn't support video playback.
-                    </video>
+                        :register-video="registerVideo"
+                    />
                     <v-img
                         v-else-if="slide.url"
                         :src="slide.url"
@@ -117,21 +110,13 @@ usePauseOffscreen(videoRefs);
             </v-carousel>
 
             <!-- Single video -->
-            <video
+            <PostVideo
                 v-else-if="post.is_video && post.video_url"
                 :src="post.video_url"
                 :aria-label="imageAlt"
-                :ref="registerVideo"
-                :poster="post.image_url ?? undefined"
-                controls
-                autoplay
-                muted
-                preload="metadata"
-                playsinline
-                class="card__video"
-            >
-                Your browser doesn't support video playback.
-            </video>
+                :poster="post.image_url"
+                :register-video="registerVideo"
+            />
 
             <!-- Single image -->
             <v-img
@@ -313,14 +298,6 @@ usePauseOffscreen(videoRefs);
     border-color: transparent;
 }
 
-.card__video {
-    width: 100%;
-    max-height: 600px;
-    object-fit: contain;
-    background: #000;
-    display: block;
-}
-
 /* Delimiter row: allow it to fit or scroll instead of clipping */
 :deep(.v-carousel__controls) {
     background: transparent;