vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert Facebook and YouTube preview refactors (video-only, no feature effect)

Browse source 
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.
This commit is contained in:
Paulo Castellano 2026-07-16 20:51:07 -03:00
parent 2722effba9
commit e1acdab2e3
2 changed files with 38 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
resources/js/components/posts/previews/FacebookPreview.vue
View file

@ -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">

30
resources/js/components/posts/previews/YouTubePreview.vue
View file

@ -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"