From e1acdab2e35772e559ec374a35dc8c75f29e641c Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Thu, 16 Jul 2026 20:51:07 -0300
Subject: [PATCH] Revert Facebook and YouTube preview refactors (video-only, no
 feature effect)

These previews are video-only, so routing them through VerticalMediaCanvas changed nothing; keep the shared canvas on Instagram (Story) and TikTok (Photo) where it actually fits off-ratio images.
---
 .../posts/previews/FacebookPreview.vue        | 37 ++++++++++---------
 .../posts/previews/YouTubePreview.vue         | 30 +++++++++------
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/resources/js/components/posts/previews/FacebookPreview.vue b/resources/js/components/posts/previews/FacebookPreview.vue
index 9227cd52..f0302ae2 100644
--- a/resources/js/components/posts/previews/FacebookPreview.vue
+++ b/resources/js/components/posts/previews/FacebookPreview.vue
@@ -3,7 +3,6 @@ import { IconDots, IconPhoto } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
 import PostMediaPreview from '@/components/posts/previews/PostMediaPreview.vue';
-import VerticalMediaCanvas from '@/components/posts/previews/VerticalMediaCanvas.vue';
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -215,15 +214,17 @@ const displayName = computed(() => props.socialAccount.display_name || props.soc
 
         <!-- ==================== REELS ==================== -->
         <template v-else-if="isReel">
-            <div class="relative flex-1 overflow-hidden">
+            <div class="relative flex-1 bg-black overflow-hidden">
                 <!-- Video/Media - Full screen -->
-                <VerticalMediaCanvas :media="media">
-                    <template #placeholder>
-                        <div class="flex h-full w-full items-center justify-center bg-[#18191a]">
-                            <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
-                        </div>
-                    </template>
-                </VerticalMediaCanvas>
+                <div class="absolute inset-0">
+                    <PostMediaPreview
+                        :media="media"
+                        :placeholder-icon="IconPhoto"
+                        :show-arrows="false"
+                        :show-dots="false"
+                        placeholder-class="w-full h-full flex items-center justify-center bg-[#18191a]"
+                    />
+                </div>
 
                 <!-- Gradient overlay -->
                 <div v-if="media.length > 0"
@@ -352,15 +353,17 @@ const displayName = computed(() => props.socialAccount.display_name || props.soc
 
         <!-- ==================== STORIES ==================== -->
         <template v-else-if="isStory">
-            <div class="relative flex-1 overflow-hidden">
+            <div class="relative flex-1 bg-black overflow-hidden">
                 <!-- Media - Full screen -->
-                <VerticalMediaCanvas :media="media">
-                    <template #placeholder>
-                        <div class="flex h-full w-full items-center justify-center bg-gradient-to-b from-[#1877f2]/50 to-[#833ab4]/50">
-                            <IconPhoto class="h-12 w-12 text-muted-foreground/40" />
-                        </div>
-                    </template>
-                </VerticalMediaCanvas>
+                <div class="absolute inset-0">
+                    <PostMediaPreview
+                        :media="media"
+                        :placeholder-icon="IconPhoto"
+                        :show-arrows="false"
+                        :show-dots="false"
+                        placeholder-class="w-full h-full flex items-center justify-center bg-gradient-to-b from-[#1877f2]/50 to-[#833ab4]/50"
+                    />
+                </div>
 
                 <!-- Progress Bars -->
                 <div v-if="media.length > 0" class="absolute top-1 left-2 right-2 flex gap-0.5 z-10">
diff --git a/resources/js/components/posts/previews/YouTubePreview.vue b/resources/js/components/posts/previews/YouTubePreview.vue
index 985da55c..9882b3b2 100644
--- a/resources/js/components/posts/previews/YouTubePreview.vue
+++ b/resources/js/components/posts/previews/YouTubePreview.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import VerticalMediaCanvas from '@/components/posts/previews/VerticalMediaCanvas.vue';
+import VideoPreview from "@/components/posts/previews/VideoPreview.vue";
+import { isVideoMedia } from '@/composables/useMedia';
 import type { MediaItem } from '@/types/media';
 
 interface SocialAccount {
@@ -37,17 +38,22 @@ const username = computed(() => props.socialAccount.username || props.socialAcco
 <template>
     <div class="w-full h-full bg-[#0f0f0f] text-white overflow-hidden flex flex-col relative">
         <!-- Video/Media Area - Full screen -->
-        <VerticalMediaCanvas :media="media">
-            <template #placeholder>
-                <div class="flex h-full w-full items-center justify-center bg-[#0f0f0f]">
-                    <!-- YouTube Shorts icon -->
-                    <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
-                        <path
-                            d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33c-.77-.32-1.2-.5-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25z" />
-                    </svg>
-                </div>
-            </template>
-        </VerticalMediaCanvas>
+        <div class="absolute inset-0">
+            <!-- Video content -->
+            <div v-if="media.length > 0 && isVideoMedia(media[0])" class="w-full h-full">
+                <VideoPreview :src="media[0].url" />
+            </div>
+            <div v-else-if="media.length > 0" class="w-full h-full">
+                <img :src="media[0].url" :alt="media[0].original_filename" class="w-full h-full object-cover" />
+            </div>
+            <div v-else class="w-full h-full flex items-center justify-center bg-[#0f0f0f]">
+                <!-- YouTube Shorts icon -->
+                <svg class="h-12 w-12 text-white/20" viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                        d="M10 14.65v-5.3L15 12l-5 2.65zm7.77-4.33c-.77-.32-1.2-.5-1.2-.5L18 9.06c1.84-.96 2.53-3.23 1.56-5.06s-3.24-2.53-5.07-1.56L6 6.94c-1.29.68-2.07 2.04-2 3.49.07 1.42.93 2.67 2.22 3.25.03.01 1.2.5 1.2.5L6 14.93c-1.83.97-2.53 3.24-1.56 5.07.97 1.83 3.24 2.53 5.07 1.56l8.5-4.5c1.29-.68 2.06-2.04 1.99-3.49-.07-1.42-.94-2.68-2.23-3.25z" />
+                </svg>
+            </div>
+        </div>
 
         <!-- Top Header -->
         <div v-if="media.length > 0"