keystone-design-bootstrap 1.0.44 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/sections/social-media-grid.aman.tsx

@@ -1,14 +1,20 @@
 import { PhotoWithFallback } from '../elements';
+import { isVideoUrl } from '../../utils/photo-helpers';
 import type { SocialPost } from '../../types/api/social-post';
 
-/** Get display image URLs from post: image_urls (API) or photo_attachments (ordered) */
+/** Get display image URLs from post (excludes video URLs so img/PhotoWithFallback don't break) */
 function getPostImageUrls(post: SocialPost): string[] {
-  if (post.image_urls?.length) return post.image_urls;
+  const videoSet = post.video_urls?.length ? new Set(post.video_urls) : null;
+  const isVideo = (url: string) => isVideoUrl(url) || (videoSet !== null && videoSet.has(url));
+  if (post.image_urls?.length) {
+    return post.image_urls.filter((url) => !isVideo(url));
+  }
   const attachments = post.photo_attachments || [];
   const sorted = [...attachments].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
   return sorted
     .map((pa) => pa.photo?.large_url || pa.photo?.original_url || pa.photo?.medium_url || pa.photo?.thumbnail_url)
-    .filter((url): url is string => Boolean(url));
+    .filter((url): url is string => Boolean(url))
+    .filter((url) => !isVideo(url));
 }
 
 interface SocialMediaGridProps {

package/src/design_system/sections/social-media-grid.barelux.tsx

@@ -1,14 +1,20 @@
 import { PhotoWithFallback } from '../elements';
+import { isVideoUrl } from '../../utils/photo-helpers';
 import type { SocialPost } from '../../types/api/social-post';
 
-/** Get display image URLs from post: image_urls (API) or photo_attachments (ordered) */
+/** Get display image URLs from post (excludes video URLs so img/PhotoWithFallback don't break) */
 function getPostImageUrls(post: SocialPost): string[] {
-  if (post.image_urls?.length) return post.image_urls;
+  const videoSet = post.video_urls?.length ? new Set(post.video_urls) : null;
+  const isVideo = (url: string) => isVideoUrl(url) || (videoSet !== null && videoSet.has(url));
+  if (post.image_urls?.length) {
+    return post.image_urls.filter((url) => !isVideo(url));
+  }
   const attachments = post.photo_attachments || [];
   const sorted = [...attachments].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
   return sorted
     .map((pa) => pa.photo?.large_url || pa.photo?.original_url || pa.photo?.medium_url || pa.photo?.thumbnail_url)
-    .filter((url): url is string => Boolean(url));
+    .filter((url): url is string => Boolean(url))
+    .filter((url) => !isVideo(url));
 }
 
 interface SocialMediaGridProps {

package/src/design_system/sections/social-media-grid.tsx

@@ -6,16 +6,22 @@ import { ArrowLeft, ArrowRight } from '@untitledui/icons';
 import { Carousel } from '../elements/carousel/carousel-base';
 import { Button, PaginationPageMinimalCenter, PhotoWithFallback, RoundButton } from '../elements';
 import { cx } from '../../utils/cx';
+import { isVideoUrl } from '../../utils/photo-helpers';
 import type { SocialPost } from '../../types/api/social-post';
 
-/** Get display image URLs from post: image_urls (API) or photo_attachments (ordered) */
+/** Get display image URLs from post (excludes video URLs so img/PhotoWithFallback don't break) */
 function getPostImageUrls(post: SocialPost): string[] {
-  if (post.image_urls?.length) return post.image_urls;
+  const videoSet = post.video_urls?.length ? new Set(post.video_urls) : null;
+  const isVideo = (url: string) => isVideoUrl(url) || (videoSet !== null && videoSet.has(url));
+  if (post.image_urls?.length) {
+    return post.image_urls.filter((url) => !isVideo(url));
+  }
   const attachments = post.photo_attachments || [];
   const sorted = [...attachments].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
   return sorted
     .map((pa) => pa.photo?.large_url || pa.photo?.original_url || pa.photo?.medium_url || pa.photo?.thumbnail_url)
-    .filter((url): url is string => Boolean(url));
+    .filter((url): url is string => Boolean(url))
+    .filter((url) => !isVideo(url));
 }
 
 interface SocialMediaGridProps {

package/src/types/api/social-post.ts

@@ -11,6 +11,8 @@ export interface SocialPost {
   updated_at: string;
   /** Image URLs from photo_attachments (preferred for display) */
   image_urls?: string[];
+  /** Video URLs from photo_attachments (exclude these when choosing img src) */
+  video_urls?: string[];
   /** Photo attachments (same pattern as blog post, team member, etc.) */
   photo_attachments?: PhotoAttachment[];
   /** Legacy; prefer image_urls / photo_attachments */

package/src/utils/photo-helpers.ts

@@ -4,6 +4,19 @@
 
 import type { WebsitePhotos } from '../types/api/website-photos';
 
+/** Video file extensions treated as video (match backend ExternalPhotoService.video_url?) */
+const VIDEO_EXTENSIONS = ['.mp4', '.mov', '.webm', '.m4v', '.avi', '.mkv', '.flv', '.wmv'];
+
+/**
+ * True if the URL looks like a video by path extension. Used to avoid using video URLs in img src.
+ */
+export function isVideoUrl(url: string | null | undefined): boolean {
+  if (!url || typeof url !== 'string') return false;
+  const path = url.split('?')[0] ?? '';
+  const ext = path.slice(path.lastIndexOf('.')).toLowerCase();
+  return VIDEO_EXTENSIONS.includes(ext);
+}
+
 export interface PhotoAttachment {
   id: number;
   photo: {