fix: improve media layout and video player responsiveness

Author: Abdallah-farag27

app/components/tweet/MediaItem.vue

@@ -1,25 +1,22 @@
 <script setup lang="ts">
 import type { TweetMedia } from '~~/shared/types/tweets';
 import { computed } from 'vue';
-
-// Import your new Video.js wrapper
 import VideoPlayer from '~/components/ui/VideoPlayer.vue';
 
 interface Props {
   media: TweetMedia;
 }
-
 const props = defineProps<Props>();
 
 const isVideo = computed(() => props.media.type === 'VIDEO');
 const isGif = computed(() => props.media.type === 'GIF');
 const isImage = computed(() => props.media.type === 'IMAGE' || isGif.value);
 
 const aspectStyle = computed(() => {
+  if (!isImage.value) return {}; // no aspect ratio for videos
+
   const { width, height } = props.media;
-  if (width > 10 && height > 10 && width < 10000 && height < 10000) {
-    return { aspectRatio: `${width} / ${height}` };
-  }
+  if (width && height) return { aspectRatio: `${width} / ${height}` };
   return {};
 });
 </script>
@@ -33,10 +30,9 @@ const aspectStyle = computed(() => {
       class="h-full w-full object-cover"
       :style="aspectStyle"
       format="webp"
-      loading="lazy"
     />
 
-    <div v-else-if="isVideo" class="w-full overflow-hidden rounded-xl" :style="aspectStyle">
+    <div v-else-if="isVideo" class="h-full w-full overflow-hidden rounded-xl">
       <VideoPlayer :src="props.media.url" :poster="props.media.altText" />
     </div>
   </div>

app/components/tweet/TweetMedia.vue

@@ -12,22 +12,23 @@ const media = ref(props.media || []);
 
 <template>
   <div class="w-full pt-2">
-    <!-- 0 media: placeholder 2x2 grid -->
-
     <!-- 1 media -->
     <div v-if="media.length === 1" class="grid overflow-hidden rounded-xl">
       <MediaItem :media="media[0]!" />
     </div>
 
     <!-- 2 media: side by side -->
-    <div v-else-if="media.length === 2" class="grid grid-cols-2 gap-0.5 overflow-hidden rounded-xl">
+    <div
+      v-else-if="media.length === 2"
+      class="border-border grid grid-cols-2 gap-0.5 overflow-hidden rounded-xl border-1"
+    >
       <MediaItem v-for="(m, i) in media" :key="i" :media="m" />
     </div>
 
     <!-- 3 media: first spans full height on left -->
     <div
       v-else-if="media.length === 3"
-      class="grid grid-cols-2 grid-rows-2 gap-0.5 overflow-hidden rounded-xl"
+      class="border-border grid grid-cols-2 grid-rows-2 gap-0.5 overflow-hidden rounded-xl border-1"
     >
       <div class="col-span-1 row-span-2"><MediaItem :media="media[0]!" /></div>
       <MediaItem :media="media[1]!" />
@@ -37,7 +38,7 @@ const media = ref(props.media || []);
     <!-- 4 media: uniform grid -->
     <div
       v-else-if="media.length === 4"
-      class="grid grid-cols-2 grid-rows-2 gap-0.5 overflow-hidden rounded-xl"
+      class="border-border grid grid-cols-2 grid-rows-2 gap-0.5 overflow-hidden rounded-xl border-1"
     >
       <MediaItem v-for="(m, i) in media" :key="i" :media="m!" />
     </div>

app/components/ui/VideoPlayer.vue

@@ -11,13 +11,13 @@ const props = defineProps<Props>();
 
 <template>
   <VideoPlayer
-    class="video-js vjs-default-skin overflow-hidden rounded-xl"
+    class="video-js vjs-default-skin h-full w-full overflow-hidden rounded-xl"
     :options="{
       controls: true,
       autoplay: false,
       preload: 'metadata',
       responsive: true,
-      fluid: true,
+      fluid: false,
       poster: props.poster,
       controlBar: { autoHide: false },
       sources: [
@@ -29,3 +29,15 @@ const props = defineProps<Props>();
     }"
   />
 </template>
+
+<style scoped>
+.video-js {
+  width: 100%;
+  height: 100%;
+}
+.video-js .vjs-tech {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>