@flamingo-stack/openframe-frontend-core 0.0.584 → 0.0.585-1985.5484.1

package/dist/utils/media-type.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Media type — THE single source of truth for the `media_type` discriminator
+ * on media rows (ai_media, program media, vendor media). Zero imports (a leaf),
+ * so every consumer reads the same predicate instead of scattering
+ * `=== 'video'` literals. `MediaType` (types/marketing.ts) is the row union;
+ * these are the two values a post can publish.
+ */
+export declare const MEDIA_TYPE: {
+    readonly IMAGE: "image";
+    readonly VIDEO: "video";
+};
+/** The two media types a post can publish. */
+export type PublishableMediaType = (typeof MEDIA_TYPE)[keyof typeof MEDIA_TYPE];
+interface MediaTyped {
+    media_type?: string | null;
+}
+export declare function isVideoMedia(media: MediaTyped | null | undefined): boolean;
+export declare function isImageMedia(media: MediaTyped | null | undefined): boolean;
+export declare function isPublishableMediaType(mediaType: string | null | undefined): mediaType is PublishableMediaType;
+/** Split a media list into its videos and images, preserving order. */
+export declare function partitionMediaByType<T extends MediaTyped>(media: readonly T[]): {
+    videos: T[];
+    images: T[];
+};
+export {};
+//# sourceMappingURL=media-type.d.ts.map

package/dist/utils/media-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-type.d.ts","sourceRoot":"","sources":["../../src/utils/media-type.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX,8CAA8C;AAC9C,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAEhF,UAAU,UAAU;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAE1E;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAE1E;AAED,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,IAAI,oBAAoB,CAE9G;AAED,uEAAuE;AACvE,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,EAAE,GAAG;IAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IAAC,MAAM,EAAE,CAAC,EAAE,CAAA;CAAE,CAK5G"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.584",
+  "version": "0.0.585-1985.5484.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/entity-cards/program-card.tsx

@@ -26,6 +26,7 @@ import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
 import { cn } from '../../../utils/cn';
 import { formatDurationCompact, formatTimeWithTimezone, formatDurationFromRange } from '../../../utils/format';
+import { isImageMedia } from '../../../utils/media-type';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { SquareAvatar } from '../../ui/square-avatar';
@@ -51,7 +52,6 @@ import {
 import { EntityPortraitCard } from './entity-portrait-card';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
-
 type CardSize = 'default' | 'sm' | 'portrait';
 
 /**
@@ -273,7 +273,7 @@ export function ProgramCard<T extends BaseProgramItem>({
     aspect: size === 'sm' ? 'square' : 'wide',
   });
   const coverImage = item.cover_url;
-  const images = media.filter(m => m.media_type === 'image');
+  const images = media.filter(m => isImageMedia(m));
   const hosts = getHosts(item.hosts);
   const accentColor = 'var(--color-accent-primary)';
   // `status` / `duration_seconds` / `location_name` / `start_at` … live on the

package/src/components/features/media-gallery-manager.tsx

@@ -4,9 +4,10 @@ import { Upload, Image as ImageIcon, Video as VideoIcon, Trash2, Loader2, GripVe
 import type React from 'react';
 import { useState, useRef, useCallback } from 'react';
 import Image from '../../embed-shims/next-image';
+import { isVideoMedia } from '../../utils/media-type';
 import { Button, Card } from '../ui';
-import { Video } from './video';
 
+import { Video } from './video';
 export interface MediaItem {
   id?: string | number; // Optional for new items
   media_type: 'image' | 'video' | 'screenshot' | 'demo';
@@ -157,7 +158,7 @@ export function MediaGalleryManager({
 
           {/* Media Content */}
           <div className="relative aspect-video overflow-hidden rounded-lg bg-ods-bg">
-            {mediaItem.media_type === 'video' || mediaItem.media_type === 'demo' ? (
+            {isVideoMedia(mediaItem) || mediaItem.media_type === 'demo' ? (
               // <Video> SSOT (MuxPlayer) — plays Mux HLS + MP4 alike;
               // fit="cover" crops to the aspect-video cell.
               <Video kind="file" url={mediaItem.media_url} fit="cover" className="h-full w-full" />
@@ -175,7 +176,7 @@ export function MediaGalleryManager({
           {/* Media Info */}
           <div className="p-3">
             <div className="mb-1 flex items-center gap-2">
-              {mediaItem.media_type === 'video' || mediaItem.media_type === 'demo' ? (
+              {isVideoMedia(mediaItem) || mediaItem.media_type === 'demo' ? (
                 <VideoIcon className="h-4 w-4 text-ods-text-secondary" />
               ) : (
                 <ImageIcon className="h-4 w-4 text-ods-text-secondary" />

package/src/components/features/push-button-selector.tsx

@@ -7,8 +7,11 @@ import { UnifiedSkeleton } from '../loading';
 import { Badge, Input } from '../ui';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 
-export interface SelectableOption {
-  id: string; // Selection ID (UUID for platforms, value for others)
+/** Option ids are whatever the consumer keys its rows by — string (UUID / enum value) or numeric row id. */
+export type SelectableOptionId = string | number;
+
+export interface SelectableOption<Id extends SelectableOptionId = string> {
+  id: Id; // Selection ID (UUID / value for platforms, numeric row id for DB-keyed rows)
   name: string; // Primary identifier (platform enum or item name)
   displayName?: string; // Optional display name (for platforms)
   description?: string;
@@ -51,10 +54,10 @@ export interface PushButtonSelectorLazyLoad {
   maxHeight?: string;
 }
 
-interface PushButtonSelectorProps {
-  options: SelectableOption[];
-  selectedIds: string[];
-  onSelectionChange: (selectedIds: string[]) => void;
+interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
+  options: SelectableOption<Id>[];
+  selectedIds: Id[];
+  onSelectionChange: (selectedIds: Id[]) => void;
   multiSelect?: boolean;
   title?: string;
   helpText?: string;
@@ -116,7 +119,7 @@ function PushButtonSelectorError({ message, title }: { message: string; title?:
   );
 }
 
-export function PushButtonSelector({
+export function PushButtonSelector<Id extends SelectableOptionId = string>({
   options,
   selectedIds,
   onSelectionChange,
@@ -134,7 +137,7 @@ export function PushButtonSelector({
   lazyLoad,
   emptyMessage,
   footer,
-}: PushButtonSelectorProps) {
+}: PushButtonSelectorProps<Id>) {
   // Lazy-load sentinel: observe within the scroll viewport so onLoadMore
   // fires as the user approaches the bottom. Hooks run unconditionally
   // (before the early returns) per the rules of hooks. Pass a STABLE
@@ -209,7 +212,7 @@ export function PushButtonSelector({
     console.warn('[PushButtonSelector] Invalid selected IDs filtered:', invalidIds);
   }
 
-  const toggleSelection = (optionId: string) => {
+  const toggleSelection = (optionId: Id) => {
     if (multiSelect) {
       const isSelected = validSelectedIds.includes(optionId);
       if (isSelected) {
@@ -226,7 +229,7 @@ export function PushButtonSelector({
   const getSelectedOptions = () => options.filter(option => validSelectedIds.includes(option.id));
 
   // Helper to render a single option
-  const renderOption = (option: SelectableOption) => {
+  const renderOption = (option: SelectableOption<Id>) => {
     const isSelected = validSelectedIds.includes(option.id);
 
     const optionEl = (
@@ -297,8 +300,8 @@ export function PushButtonSelector({
     }
 
     // Group options by section
-    const optionsBySection = new Map<string, SelectableOption[]>();
-    const ungroupedOptions: SelectableOption[] = [];
+    const optionsBySection = new Map<string, SelectableOption<Id>[]>();
+    const ungroupedOptions: SelectableOption<Id>[] = [];
 
     options.forEach(option => {
       if (option.section) {

package/src/components/features/release-media-manager.tsx

@@ -4,9 +4,10 @@ import { Trash2, Plus, Image as ImageIcon, Video as VideoIcon, Upload, Loader2,
 import { useState, useRef } from 'react';
 import type { ChangeEvent, DragEvent } from 'react';
 import Image from '../../embed-shims/next-image';
+import { isVideoMedia } from '../../utils/media-type';
 import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui';
-import { Video } from './video';
 
+import { Video } from './video';
 export interface ReleaseMediaItem {
   media_type: 'image' | 'video' | 'screenshot' | 'demo';
   media_url: string;
@@ -199,7 +200,7 @@ export function ReleaseMediaManager({ media, onChange, onUpload, className = ''
                 {/* Media Preview */}
                 {item.media_url && (
                   <div className="relative aspect-video bg-ods-bg">
-                    {item.media_type === 'video' || item.media_type === 'demo' ? (
+                    {isVideoMedia(item) || item.media_type === 'demo' ? (
                       // <Video> SSOT (MuxPlayer) — plays Mux HLS + MP4 alike;
                       // fit="cover" crops to the aspect-video cell.
                       <Video kind="file" url={item.media_url} fit="cover" className="h-full w-full" />

package/src/components/features/video.tsx

@@ -34,6 +34,7 @@ import MuxPlayer from '@mux/mux-player-react';
 import type React from 'react';
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useAuthedAssetSrc } from '../../hooks/use-authed-asset-src';
+import { useNearViewport } from '../../hooks/use-near-viewport';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
 import { Button } from '../ui/button';
 import { useIosNativeVideoFullscreen } from './use-ios-native-video-fullscreen';
@@ -396,6 +397,14 @@ interface VideoCommonProps {
   className?: string;
   /** Accessible label (used as YT facade title; ignored for file branch). */
   title?: string;
+  /**
+   * Mount the player only once its box comes near the viewport (shared
+   * fire-once IntersectionObserver, `NEAR_VIEWPORT_ROOT_MARGIN` lookahead).
+   * Until then the box shows the poster (or nothing) — the caller's container
+   * still owns the size, so nothing shifts when the player mounts. For grids
+   * of players: a library of 20 clips costs 20 posters, not 20 players.
+   */
+  lazy?: boolean;
   /**
    * YouTube-only: hide YT player chrome (controls, info, fullscreen, related
    * videos, keyboard shortcuts). Used for marketing/landing-page embeds that
@@ -552,12 +561,31 @@ export type VideoProps = VideoFileProps | VideoYouTubeProps | VideoAutoProps;
 // =============================================================================
 
 export function Video(props: VideoProps): React.ReactElement | null {
+  // Hooks run unconditionally; the gate only applies when `lazy` is set.
+  const { ref: nearRef, isNear } = useNearViewport<HTMLDivElement>();
   const url = props.url;
   if (!url) return null;
 
   const effectiveKind = resolveKind(props, url);
   const layout = props.layout ?? 'native';
 
+  if (props.lazy && !isNear) {
+    // Same box, poster only: the observer target IS the reserved space.
+    return wrapWithLayout(
+      <div
+        ref={nearRef}
+        className={props.className}
+        style={
+          props.poster
+            ? { backgroundImage: `url(${props.poster})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+            : undefined
+        }
+        aria-hidden="true"
+      />,
+      layout,
+    );
+  }
+
   const inner =
     effectiveKind === 'youtube' ? (
       <YouTubeFacade

package/src/components/loading/__tests__/unified-skeleton.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { UnifiedSkeleton } from '../unified-skeleton';
+
+describe('UnifiedSkeleton sizing', () => {
+  it('applies the default height when nothing sizes the box', () => {
+    const { container } = render(<UnifiedSkeleton className="w-full" />);
+    expect(container.firstElementChild?.className).toMatch(/\bh-4\b/);
+  });
+
+  it('lets an aspect-* utility size the box instead of the default height', () => {
+    const { container } = render(<UnifiedSkeleton className="aspect-video w-full" />);
+    expect(container.firstElementChild?.className).not.toMatch(/\bh-4\b/);
+    expect(container.firstElementChild?.className).toMatch(/aspect-video/);
+  });
+});

package/src/components/loading/unified-skeleton.tsx

@@ -60,6 +60,10 @@ export function UnifiedSkeleton({
 
   const animationClasses = animate ? 'animate-pulse motion-reduce:animate-none' : '';
 
+  // An `aspect-*` utility sizes the box itself; a default height would win
+  // over it (explicit height beats aspect-ratio) and collapse the box to 16px.
+  const sizedByAspect = /(?:^|\s)aspect-/.test(className ?? '');
+
   const style: React.CSSProperties = {
     width: width,
     height: height,
@@ -70,7 +74,7 @@ export function UnifiedSkeleton({
       className={cn(
         baseClasses,
         variantClasses[variant],
-        !height && !style.height && defaultHeights[variant],
+        !height && !style.height && !sizedByAspect && defaultHeights[variant],
         !width && !style.width && variant !== 'circular' && 'w-full',
         animationClasses,
         className,

package/src/components/ui/__tests__/lazy-mount.test.tsx

@@ -0,0 +1,46 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { LazyMount } from '../lazy-mount';
+
+type IOCallback = (entries: Array<{ isIntersecting: boolean; intersectionRatio: number; target: Element }>) => void;
+
+describe('LazyMount', () => {
+  let callbacks: IOCallback[];
+  let observed: Element[];
+  beforeEach(() => {
+    callbacks = [];
+    observed = [];
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        constructor(cb: IOCallback) {
+          callbacks.push(cb);
+        }
+        observe(el: Element) {
+          observed.push(el);
+        }
+        unobserve() {}
+        disconnect() {}
+      },
+    );
+  });
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('renders the placeholder until the box intersects, then the content, and stays mounted', () => {
+    render(
+      <LazyMount rootMargin="1px" placeholder={<span>placeholder</span>}>
+        <span>player</span>
+      </LazyMount>,
+    );
+    expect(screen.getByText('placeholder')).toBeTruthy();
+    expect(screen.queryByText('player')).toBeNull();
+    // The observed element IS the wrapper the hook registered — no DOM walking.
+    const target = observed[observed.length - 1];
+    const fire = callbacks[callbacks.length - 1];
+    act(() => fire([{ isIntersecting: false, intersectionRatio: 0, target }]));
+    expect(screen.queryByText('player')).toBeNull();
+    act(() => fire([{ isIntersecting: true, intersectionRatio: 1, target }]));
+    expect(screen.getByText('player')).toBeTruthy();
+    expect(screen.queryByText('placeholder')).toBeNull();
+  });
+});

package/src/components/ui/index.ts

@@ -218,3 +218,6 @@ export * from './ticket-notes-section';
 export * from './marquee-wall';
 export * from './markdown';
 export * from './filter-pill-row';
+
+// Viewport-gated mounting for heavy previews (players, large images)
+export { LazyMount, type LazyMountProps } from './lazy-mount';

package/src/components/ui/lazy-mount.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import type { CSSProperties, ReactNode } from 'react';
+import { useNearViewport, NEAR_VIEWPORT_ROOT_MARGIN } from '../../hooks/use-near-viewport';
+
+export interface LazyMountProps {
+  /** Mounted the first time the box comes within `rootMargin` of the viewport; never unmounted after. */
+  children: ReactNode;
+  /** What fills the box until then. The box itself must already have its final size (aspect-ratio / min-height). */
+  placeholder?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  /** Lookahead — defaults to the shared `NEAR_VIEWPORT_ROOT_MARGIN`. */
+  rootMargin?: string;
+}
+
+/**
+ * Sized box whose CONTENT mounts only near the viewport (shared fire-once
+ * IntersectionObserver via `useNearViewport`). The box owns the layout —
+ * pass the aspect-ratio / min-height on it — so lazy mounting never shifts
+ * anything: the content appears inside a space that was already reserved.
+ * Grids of players or large images render their chrome immediately and pay
+ * for each preview only when it is about to be seen.
+ */
+export function LazyMount({
+  children,
+  placeholder = null,
+  className,
+  style,
+  rootMargin = NEAR_VIEWPORT_ROOT_MARGIN,
+}: LazyMountProps) {
+  const { ref, isNear } = useNearViewport<HTMLDivElement>(rootMargin);
+  return (
+    <div ref={ref} className={className} style={style}>
+      {isNear ? children : placeholder}
+    </div>
+  );
+}

package/src/types/.marketing.md

@@ -51,7 +51,6 @@ const generatedPost: Partial<AIContent> = {
   status: 'draft',
   social_account_id: 7,
   url_injection_preference: 'as_comment',
-  selected_for_publish: false,
 };
 
 const provider: MediaProvider = 'flux-pro';

package/src/types/marketing.ts

@@ -109,6 +109,7 @@ export interface CreateAIContentInput {
 // AI Media Types
 // =============================================================================
 
+/** Row union. Compare through `utils/media-type` (`isVideoMedia` / `isImageMedia` / `MEDIA_TYPE`), never a literal. */
 export type MediaType = 'image' | 'video' | 'figma_export';
 export type MediaProvider =
   | 'dalle'
@@ -155,8 +156,9 @@ export interface AIMedia {
   social_account_id: number | null; // FK to social_accounts table - primary source of truth
   created_at: string;
   updated_at: string;
-  // Publishing & Override fields
-  selected_for_publish: boolean;
+  // Override fields. NOTE: there is no `selected_for_publish` on media — a
+  // media item is "selected" by being ATTACHED to a post that is selected
+  // (`ai_content_media`); consumers derive the flag in their DAL.
   override_url: string | null;
   override_at: string | null;
   override_by: string | null;

package/src/utils/__tests__/media-type.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { MEDIA_TYPE, isImageMedia, isPublishableMediaType, isVideoMedia, partitionMediaByType } from '../media-type';
+
+describe('media-type', () => {
+  it('predicates read the discriminator and tolerate missing rows', () => {
+    expect(isVideoMedia({ media_type: MEDIA_TYPE.VIDEO })).toBe(true);
+    expect(isImageMedia({ media_type: MEDIA_TYPE.VIDEO })).toBe(false);
+    expect(isVideoMedia(null)).toBe(false);
+    expect(isImageMedia(undefined)).toBe(false);
+  });
+
+  it('only image and video are publishable', () => {
+    expect(isPublishableMediaType('image')).toBe(true);
+    expect(isPublishableMediaType('video')).toBe(true);
+    expect(isPublishableMediaType('figma_export')).toBe(false);
+    expect(isPublishableMediaType(null)).toBe(false);
+  });
+
+  it('partitions in order', () => {
+    const rows = [
+      { id: 1, media_type: 'video' },
+      { id: 2, media_type: 'image' },
+      { id: 3, media_type: 'video' },
+      { id: 4, media_type: 'logo' },
+    ];
+    const { videos, images } = partitionMediaByType(rows);
+    expect(videos.map(r => r.id)).toEqual([1, 3]);
+    expect(images.map(r => r.id)).toEqual([2]);
+  });
+});

package/src/utils/index.ts

@@ -365,3 +365,6 @@ export * from './embed-url-converters';
 export * from './hubspot-meetings-convention';
 export * from './page-header-constants';
 export * from './first-touch-attribution';
+
+// Media type SSOT — `media_type` discriminator predicates (leaf, zero imports)
+export * from './media-type';

package/src/utils/media-type.ts

@@ -0,0 +1,39 @@
+/**
+ * Media type — THE single source of truth for the `media_type` discriminator
+ * on media rows (ai_media, program media, vendor media). Zero imports (a leaf),
+ * so every consumer reads the same predicate instead of scattering
+ * `=== 'video'` literals. `MediaType` (types/marketing.ts) is the row union;
+ * these are the two values a post can publish.
+ */
+
+export const MEDIA_TYPE = {
+  IMAGE: 'image',
+  VIDEO: 'video',
+} as const;
+
+/** The two media types a post can publish. */
+export type PublishableMediaType = (typeof MEDIA_TYPE)[keyof typeof MEDIA_TYPE];
+
+interface MediaTyped {
+  media_type?: string | null;
+}
+
+export function isVideoMedia(media: MediaTyped | null | undefined): boolean {
+  return media?.media_type === MEDIA_TYPE.VIDEO;
+}
+
+export function isImageMedia(media: MediaTyped | null | undefined): boolean {
+  return media?.media_type === MEDIA_TYPE.IMAGE;
+}
+
+export function isPublishableMediaType(mediaType: string | null | undefined): mediaType is PublishableMediaType {
+  return mediaType === MEDIA_TYPE.VIDEO || mediaType === MEDIA_TYPE.IMAGE;
+}
+
+/** Split a media list into its videos and images, preserving order. */
+export function partitionMediaByType<T extends MediaTyped>(media: readonly T[]): { videos: T[]; images: T[] } {
+  return {
+    videos: media.filter(m => isVideoMedia(m)),
+    images: media.filter(m => isImageMedia(m)),
+  };
+}

package/src/utils/vendor-media-stub.ts

@@ -1,8 +1,8 @@
 // Vendor media utilities for UI kit
 // Real implementation copied from main project
 
+import { isImageMedia, isVideoMedia } from './media-type';
 import { fixSupabaseStorageUrl } from './url-fix';
-
 export interface VendorMedia {
   media_type: 'logo' | 'image' | 'video';
   media_url: string;
@@ -44,7 +44,7 @@ export function getVendorLogo(vendor: VendorWithMedia): string | null {
  * Get the main image URL from vendor_media array
  */
 export function getVendorImage(vendor: VendorWithMedia): string | null {
-  const imageMedia = vendor.vendor_media?.find(m => m.media_type === 'image');
+  const imageMedia = vendor.vendor_media?.find(m => isImageMedia(m));
   return imageMedia?.media_url ? fixSupabaseStorageUrl(imageMedia.media_url) : null;
 }
 
@@ -52,7 +52,7 @@ export function getVendorImage(vendor: VendorWithMedia): string | null {
  * Get the video URL from vendor_media array
  */
 export function getVendorVideo(vendor: VendorWithMedia): string | null {
-  const videoMedia = vendor.vendor_media?.find(m => m.media_type === 'video');
+  const videoMedia = vendor.vendor_media?.find(m => isVideoMedia(m));
   return videoMedia?.media_url ? fixSupabaseStorageUrl(videoMedia.media_url) : null;
 }
 
@@ -75,8 +75,8 @@ export function getVendorMediaGrouped(vendor: VendorWithMedia): {
 
   return {
     logos: media.filter(m => m.media_type === 'logo').map(m => fixSupabaseStorageUrl(m.media_url)),
-    images: media.filter(m => m.media_type === 'image').map(m => fixSupabaseStorageUrl(m.media_url)),
-    videos: media.filter(m => m.media_type === 'video').map(m => fixSupabaseStorageUrl(m.media_url)),
+    images: media.filter(m => isImageMedia(m)).map(m => fixSupabaseStorageUrl(m.media_url)),
+    videos: media.filter(m => isVideoMedia(m)).map(m => fixSupabaseStorageUrl(m.media_url)),
   };
 }
 
@@ -115,8 +115,8 @@ export function getVendorMediaCount(vendor: VendorWithMedia): {
   const media = vendor.vendor_media || [];
 
   const logos = media.filter(m => m.media_type === 'logo').length;
-  const images = media.filter(m => m.media_type === 'image').length;
-  const videos = media.filter(m => m.media_type === 'video').length;
+  const images = media.filter(m => isImageMedia(m)).length;
+  const videos = media.filter(m => isVideoMedia(m)).length;
 
   return {
     logos,