@vertesia/ui 0.79.0 → 0.79.2

package/src/features/store/objects/components/ContentOverview.tsx

@@ -1,13 +1,22 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, memo } from "react";
 
 import { useUserSession } from "@vertesia/ui/session";
 import { Button, ResizableHandle, ResizablePanel, ResizablePanelGroup, Spinner, useToast } from "@vertesia/ui/core";
 import { JSONDisplay, MarkdownRenderer } from "@vertesia/ui/widgets";
-import { ContentObject, ImageRenditionFormat } from "@vertesia/common";
-import { Copy, Download, SquarePen } from "lucide-react";
+import { ContentNature, ContentObject, ImageRenditionFormat, VideoMetadata, POSTER_RENDITION_NAME } from "@vertesia/common";
+import { Copy, Download, SquarePen, AlertTriangle } from "lucide-react";
 import { PropertiesEditorModal } from "./PropertiesEditorModal";
 import { NavLink } from "@vertesia/ui/router";
 
+// Maximum text size before cropping (128K characters)
+const MAX_TEXT_DISPLAY_SIZE = 128 * 1024;
+
+enum PanelView {
+    Text = "text",
+    Image = "image",
+    Video = "video"
+}
+
 interface ContentOverviewProps {
     object: ContentObject;
     loadText?: boolean;
@@ -154,15 +163,21 @@ function PropertiesPanel({ object, refetch, handleCopyContent }: { object: Conte
 function DataPanel({ object, loadText, handleCopyContent }: { object: ContentObject, loadText: boolean, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void> }) {
     const { store } = useUserSession();
 
-    const content = object.content;
-    const isImage =
-        content && content.type && content.type.startsWith("image/");
+    const isImage = object?.metadata?.type === ContentNature.Image;
+    const isVideo = object?.metadata?.type === ContentNature.Video;
 
-    const [viewImage, setViewImage] = useState(isImage);
+    // Determine initial panel view
+    const getInitialView = (): PanelView => {
+        if (isVideo) return PanelView.Video;
+        if (isImage) return PanelView.Image;
+        return PanelView.Text;
+    };
 
+    const [currentPanel, setCurrentPanel] = useState<PanelView>(getInitialView());
 
     const [text, setText] = useState<string | undefined>(object.text);
     const [isLoadingText, setIsLoadingText] = useState<boolean>(false);
+    const [isTextCropped, setIsTextCropped] = useState<boolean>(false);
 
     useEffect(() => {
         if (loadText && !text) {
@@ -170,7 +185,15 @@ function DataPanel({ object, loadText, handleCopyContent }: { object: ContentObj
             store.objects
                 .getObjectText(object.id)
                 .then((res) => {
-                    setText(res.text);
+                    if (res.text.length > MAX_TEXT_DISPLAY_SIZE) {
+                        // Crop the text to 128K characters
+                        const croppedText = res.text.substring(0, MAX_TEXT_DISPLAY_SIZE);
+                        setText(croppedText);
+                        setIsTextCropped(true);
+                    } else {
+                        setText(res.text);
+                        setIsTextCropped(false);
+                    }
                 })
                 .catch((err) => {
                     console.error("Failed to load text", err);
@@ -187,36 +210,48 @@ function DataPanel({ object, loadText, handleCopyContent }: { object: ContentObj
                 <div className="flex items-center gap-1 bg-muted mb-2 p-1 rounded">
                     {isImage &&
                         <Button
-                            variant={`${viewImage ? "primary" : "ghost"}`}
+                            variant={currentPanel === PanelView.Image ? "primary" : "ghost"}
                             size="sm"
                             alt="View Image"
-                            onClick={() => setViewImage(true)}
+                            onClick={() => setCurrentPanel(PanelView.Image)}
                         >
                             Image
                         </Button>
                     }
+                    {isVideo &&
+                        <Button
+                            variant={currentPanel === PanelView.Video ? "primary" : "ghost"}
+                            size="sm"
+                            alt="View Video"
+                            onClick={() => setCurrentPanel(PanelView.Video)}
+                        >
+                            Video
+                        </Button>
+                    }
                     <Button
-                        variant={`${viewImage ? "ghost" : "primary"}`}
+                        variant={currentPanel === PanelView.Text ? "primary" : "ghost"}
                         size="sm"
                         alt="View Text"
-                        onClick={() => setViewImage(false)}
+                        onClick={() => setCurrentPanel(PanelView.Text)}
                     >
                         Text
                     </Button>
 
                 </div>
-                {!viewImage && <TextActions object={object} text={text} handleCopyContent={handleCopyContent} />}
+                {currentPanel === PanelView.Text && <TextActions object={object} text={text} handleCopyContent={handleCopyContent} />}
             </div>
             {
-                viewImage ? (
+                currentPanel === PanelView.Image ? (
                     <ImagePanel object={object} />
+                ) : currentPanel === PanelView.Video ? (
+                    <VideoPanel object={object} />
                 ) : (
                     isLoadingText ? (
                         <div className="flex justify-center items-center h-[calc(100vh-260px)]">
                             <Spinner size="lg" />
                         </div>
                     ) : (
-                        <TextPanel object={object} text={text} />
+                        <TextPanel object={object} text={text} isTextCropped={isTextCropped} />
                     )
                 )
             }
@@ -227,24 +262,29 @@ function DataPanel({ object, loadText, handleCopyContent }: { object: ContentObj
 function TextActions({ object, text, handleCopyContent }: { object: ContentObject, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void>, text: string | undefined }) {
     const { client } = useUserSession();
     const toast = useToast();
+    const [loadingFormat, setLoadingFormat] = useState<"docx" | "pdf" | null>(null);
 
     const content = object.content;
 
-    const isMarkdownOrText =
+    const isMarkdown =
         content &&
         content.type &&
-        (content.type === "text/markdown" || content.type === "text/plain");
-
-    // Check for markdown indicators, ignoring any HTML comments
-    const seemsMarkdown =
-        text &&
-        // Look for markdown indicators
-        (text.includes("\n#") ||
-            text.includes("\n*") ||
-            text.includes("\n+") ||
-            text.includes("!["));
+        content.type === "text/markdown";
 
     const handleExportDocument = async (format: "docx" | "pdf") => {
+        // Prevent multiple concurrent exports
+        if (loadingFormat) return;
+
+        setLoadingFormat(format);
+
+        // Show immediate feedback
+        toast({
+            status: "info",
+            title: `Preparing ${format.toUpperCase()}`,
+            description: "Fetching your document...",
+            duration: 2000,
+        });
+
         try {
             // Request document rendition from the server
             const response = await client.objects.getRendition(object.id, {
@@ -308,6 +348,8 @@ function TextActions({ object, text, handleCopyContent }: { object: ContentObjec
                 description: `Failed to export document to ${format.toUpperCase()} format`,
                 duration: 5000,
             });
+        } finally {
+            setLoadingFormat(null);
         }
     };
 
@@ -321,24 +363,34 @@ function TextActions({ object, text, handleCopyContent }: { object: ContentObjec
                         <Copy className="size-4" />
                     </Button>
                 )}
-                {(isMarkdownOrText || seemsMarkdown) && text && (
+                {isMarkdown && text && (
                     <>
                         <Button
                             variant="ghost"
                             size="sm"
                             onClick={handleExportDocx}
+                            disabled={loadingFormat !== null}
                             className="flex items-center gap-2"
                         >
-                            <Download className="size-4" />
+                            {loadingFormat === "docx" ? (
+                                <Spinner size="sm" />
+                            ) : (
+                                <Download className="size-4" />
+                            )}
                             DOCX
                         </Button>
                         <Button
                             variant="ghost"
                             size="sm"
                             onClick={handleExportPdf}
+                            disabled={loadingFormat !== null}
                             className="flex items-center gap-2"
                         >
-                            <Download className="size-4" />
+                            {loadingFormat === "pdf" ? (
+                                <Spinner size="sm" />
+                            ) : (
+                                <Download className="size-4" />
+                            )}
                             PDF
                         </Button>
                     </>
@@ -348,91 +400,43 @@ function TextActions({ object, text, handleCopyContent }: { object: ContentObjec
     );
 }
 
-function TextPanel({ object, text }: { object: ContentObject, text: string | undefined }) {
-    const toast = useToast();
-    const { client } = useUserSession();
-
-    // Check for markdown indicators, ignoring any HTML comments
-    const seemsMarkdown =
-        text &&
-        // Look for markdown indicators
-        (text.includes("\n#") ||
-            text.includes("\n*") ||
-            text.includes("\n+") ||
-            text.includes("!["));
-
-    const handleExportDocument = async (format: "docx" | "pdf") => {
-        try {
-            // Request document rendition from the server
-            const response = await client.objects.getRendition(object.id, {
-                format: format as any, // We're extending the format type
-                generate_if_missing: true,
-                sign_url: true,
-            });
-
-            if (response.status === "generating") {
-                toast({
-                    status: "info",
-                    title: "Generating document",
-                    description: `Please wait while we prepare your ${format.toUpperCase()} file...`,
-                    duration: 5000,
-                });
-
-                // Poll for completion
-                setTimeout(() => handleExportDocument(format), 3000);
-                return;
-            }
-
-            if (response.status === "failed") {
-                throw new Error("Document generation failed");
-            }
+const TextPanel = memo(({ object, text, isTextCropped }: { object: ContentObject, text: string | undefined, isTextCropped: boolean }) => {
+    const content = object.content;
 
-            // Download the generated file or open in new window
-            if (response.renditions && response.renditions.length > 0) {
-                const downloadUrl = response.renditions[0];
+    // Check if content type is markdown or plain text
+    const isMarkdownOrText =
+        content &&
+        content.type &&
+        (content.type === "text/markdown" || content.type === "text/plain");
 
-                if (format === 'pdf') {
-                    // Open PDF in new window
-                    window.open(downloadUrl, '_blank');
-                    toast({
-                        status: "success",
-                        title: "PDF opened",
-                        description: "PDF document opened in a new window",
-                        duration: 2000,
-                    });
-                } else {
-                    // Download DOCX file
-                    const link = document.createElement("a");
-                    link.href = downloadUrl;
-                    link.download = `${object.name || "document"}.${format}`;
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
+    // Check if text content looks like markdown
+    const seemsMarkdown = text && (
+        text.includes("\n# ") ||
+        text.includes("\n## ") ||
+        text.includes("\n### ") ||
+        text.includes("\n* ") ||
+        text.includes("\n- ") ||
+        text.includes("\n+ ") ||
+        text.includes("![") ||
+        text.includes("](")
+    );
 
-                    toast({
-                        status: "success",
-                        title: "Document exported",
-                        description: `Successfully exported to ${format.toUpperCase()} format`,
-                        duration: 2000,
-                    });
-                }
-            }
-        } catch (err) {
-            console.error(`Failed to export document as ${format}:`, err);
-            toast({
-                status: "error",
-                title: "Export failed",
-                description: `Failed to export document to ${format.toUpperCase()} format`,
-                duration: 5000,
-            });
-        }
-    };
+    // Render as markdown if it's markdown/text type OR if text looks like markdown
+    const shouldRenderAsMarkdown = isMarkdownOrText || seemsMarkdown;
 
     return (
         text ? (
             <>
+                {isTextCropped && (
+                    <div className="px-2 py-2 bg-attention/10 border-l-4 border-attention mx-2 mb-2 rounded">
+                        <div className="flex items-center gap-2 text-attention">
+                            <AlertTriangle className="size-4" />
+                            <span className="text-sm font-semibold">Showing first 128K characters only</span>
+                        </div>
+                    </div>
+                )}
                 <div className="max-w-7xl px-2 h-[calc(100vh-210px)] overflow-auto">
-                    {seemsMarkdown ? (
+                    {shouldRenderAsMarkdown ? (
                         <div className="vprose prose-sm p-1">
                             <MarkdownRenderer
                                 components={{
@@ -511,16 +515,14 @@ function TextPanel({ object, text }: { object: ContentObject, text: string | und
                 <div>No content</div>
             </div>
     );
-}
+});
 
 function ImagePanel({ object }: { object: ContentObject }) {
     const { client } = useUserSession();
     const [imageUrl, setImageUrl] = useState<string>();
 
-
     const content = object.content;
-    const isImage =
-        content && content.type && content.type.startsWith("image/");
+    const isImage = object.metadata && object.metadata.type === ContentNature.Image;
 
     useEffect(() => {
         if (isImage) {
@@ -569,4 +571,100 @@ function ImagePanel({ object }: { object: ContentObject }) {
             )}
         </div>
     );
+}
+
+function VideoPanel({ object }: { object: ContentObject }) {
+    const { client } = useUserSession();
+    const [videoUrl, setVideoUrl] = useState<string>();
+    const [posterUrl, setPosterUrl] = useState<string>();
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+
+    const content = object.content;
+    const isVideo = object.metadata?.type === ContentNature.Video;
+
+    // Check if there are mp4 or webm renditions available in metadata
+    const metadata = object.metadata as VideoMetadata;
+    const renditions = metadata?.renditions || [];
+
+    // Find mp4 or webm rendition by mime type, preferring mp4
+    const webRendition = renditions.find(r => r.content.type === 'video/mp4') ||
+                         renditions.find(r => r.content.type === 'video/webm');
+
+    // Check if original file is web-compatible
+    const webSupportedFormats = ['video/mp4', 'video/webm'];
+    const isOriginalWebSupported = content?.type && webSupportedFormats.includes(content.type);
+
+    // Get poster
+    const poster = renditions.find(r => r.name === POSTER_RENDITION_NAME);
+
+    useEffect(() => {
+        const loadPoster = async () => {
+            if (poster?.content?.source) {
+                try {
+                    const response = await client.files.getDownloadUrl(poster.content.source);
+                    setPosterUrl(response.url);
+                } catch (error) {
+                    console.error("Failed to load poster image", error);
+                }
+            }
+        };
+        loadPoster();
+    }, [poster, client]);
+
+    useEffect(() => {
+        if (isVideo && (webRendition?.content?.source || isOriginalWebSupported)) {
+            const loadVideoUrl = async () => {
+                try {
+                    let downloadUrl;
+                    if (webRendition?.content?.source) {
+                        // Use rendition if available
+                        downloadUrl = await client.files.getDownloadUrl(webRendition.content.source);
+                    } else if (isOriginalWebSupported && content?.source) {
+                        // Fall back to original file if web-supported
+                        downloadUrl = await client.files.getDownloadUrl(content.source);
+                    }
+                    if (downloadUrl) {
+                        setVideoUrl(downloadUrl.url);
+                    }
+                } catch (error) {
+                    console.error("Failed to get video URL", error);
+                } finally {
+                    setIsLoading(false);
+                }
+            };
+            loadVideoUrl();
+        } else {
+            setIsLoading(false);
+        }
+    }, [isVideo, webRendition, isOriginalWebSupported, content?.source, client]);
+
+    return (
+        <div className="mb-4 px-2">
+            {!webRendition && !isOriginalWebSupported ? (
+                <div className="flex justify-center items-center h-[400px] text-muted">
+                    <div className="text-center">
+                        <p>No web-compatible video rendition available</p>
+                        <p className="text-sm mt-2">MP4 or WebM format required</p>
+                    </div>
+                </div>
+            ) : isLoading ? (
+                <div className="flex justify-center items-center h-[400px]">
+                    <Spinner size="md" />
+                </div>
+            ) : videoUrl ? (
+                <video
+                    src={videoUrl}
+                    poster={posterUrl}
+                    controls
+                    className="w-full max-h-[calc(100vh-260px)] object-contain"
+                >
+                    Your browser does not support the video tag.
+                </video>
+            ) : (
+                <div className="flex justify-center items-center h-[400px] text-muted">
+                    Failed to load video
+                </div>
+            )}
+        </div>
+    );
 }

package/src/features/store/objects/components/DocumentIcon.tsx

@@ -4,7 +4,6 @@ import { retrieveRendition } from '../../../utils'
 
 import { ContentObjectItem } from '@vertesia/common'
 import { Button, Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core"
-import { NavLink } from "@vertesia/ui/router"
 import { useUserSession } from "@vertesia/ui/session"
 import { DocumentSelection } from '../DocumentSelectionProvider'
 import { Eye } from 'lucide-react'
@@ -14,6 +13,8 @@ interface DocumentIconProps {
     onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
     selection: DocumentSelection;
     onRowClick?: (object: ContentObjectItem) => void;
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
 }
 
 export function DocumentIconSkeleton({ isLoading = false, counts = 6 }: { isLoading?: boolean, counts?: number }) {
@@ -45,7 +46,7 @@ export function DocumentIconSkeleton({ isLoading = false, counts = 6 }: { isLoad
     )
 }
 
-export function DocumentIcon({ selection, document, onSelectionChange, onRowClick }: Readonly<DocumentIconProps>) {
+export function DocumentIcon({ selection, document, onSelectionChange, onRowClick, previewObject, selectedObject }: Readonly<DocumentIconProps>) {
     const { client } = useUserSession()
 
     const [renditionUrl, setRenditionUrl] = useState<string | undefined>(undefined)
@@ -67,7 +68,7 @@ export function DocumentIcon({ selection, document, onSelectionChange, onRowClic
     }, [document])
 
     return (
-        <Card className="relative flex flex-col border h-fit" onClick={() => (onRowClick && onRowClick(document))}>
+        <Card className={`relative flex flex-col border h-fit ${selectedObject?.id === document.id ? 'border-attention border-4' : ''}`} onClick={() => (onRowClick && onRowClick(document))}>
             {
                 selection && (
                     <div
@@ -85,16 +86,14 @@ export function DocumentIcon({ selection, document, onSelectionChange, onRowClic
             <div
                 className="absolute top-1 right-1 z-10 flex flex-col items-center"
             >
-                <NavLink
-                    topLevelNav
-                    href={`/store/objects/${document.id}`}
+                <Button
+                    variant="ghost" size="sm" title="Preivew Object" onClick={(e) => {
+                        e.stopPropagation();
+                        previewObject?.(document.id);
+                    }}
                 >
-                    <Button
-                        variant="ghost" size="sm" title="Open Object"
-                    >
-                        <Eye className={`size-4 ${renditionStatus === 'ready' ? 'text-muted' : 'text-white'}`} />
-                    </Button>
-                </NavLink>
+                    <Eye className={`size-4 ${renditionStatus === 'ready' ? 'text-muted' : 'text-white'}`} />
+                </Button>
             </div>
 
             {

package/src/features/store/objects/components/SaveVersionConfirmModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
     Button,
     Modal,
@@ -65,10 +65,20 @@ export function SaveVersionConfirmModal({ isOpen, onClose, onConfirm, isLoading,
         }
     ];
 
-    const [selectedOption, setSelectedOption] = useState<SaveOptionType | undefined>(saveOptions[0]);
+    // Default to "create new version" when replacing a file, "update current version" when editing properties
+    const defaultOption = uploadedFileName ? saveOptions[1] : saveOptions[0];
+    const [selectedOption, setSelectedOption] = useState<SaveOptionType | undefined>(defaultOption);
     const [versionLabel, setVersionLabel] = useState('');
     const optionAdapter = new SaveOptionAdapter();
 
+    // Reset to default when modal opens or uploadedFileName changes
+    useEffect(() => {
+        if (isOpen) {
+            setSelectedOption(defaultOption);
+            setVersionLabel('');
+        }
+    }, [isOpen, uploadedFileName]);
+
     const createVersion = selectedOption?.id === "new-version";
 
     const handleOptionChange = (option: SaveOptionType) => {

package/src/features/store/objects/layout/DocumentTableColumn.tsx

@@ -37,9 +37,11 @@ export class DocumentTableColumn {
     renderer: (value: any, index: number) => React.ReactNode = defaultRenderer;
     path: string[];
     fallbackPath?: string[];
-    constructor(public layout: ExtendedColumnLayout) {
+    previewObject?: (objectId: string) => void;
+    constructor(public layout: ExtendedColumnLayout, previewObject?: (objectId: string) => void) {
         this.path = splitPath(layout.field || '');
         this.fallbackPath = layout.fallback ? splitPath(layout.fallback) : undefined;
+        this.previewObject = previewObject;
 
         // If there's a custom render function, use it
         if (layout.render) {
@@ -78,6 +80,19 @@ export class DocumentTableColumn {
         if (this.layout.render) {
             return <td key={index} className="whitespace-nowrap px-3 py-4 text-sm">{this.layout.render(object)}</td>;
         }
+        
+        const type = this.layout.type || 'string';
+        const baseType = type.indexOf('?') > 0 ? type.substring(0, type.indexOf('?')) : type;
+        
+        if (baseType === 'objectId' && this.previewObject) {
+            const i = type.indexOf('?');
+            const params = i > 0 ? new URLSearchParams(type.substring(i + 1)) : undefined;
+            const objectIdRenderer = renderers.objectId(params, (_id: string) => {
+                this.previewObject!(object.id);
+            });
+            return objectIdRenderer(object, index);
+        }
+        
         // Otherwise use the type-based renderer with the resolved value
         return this.renderer(this.resolveValue(object), index);
     }

package/src/features/store/objects/layout/documentLayout.tsx

@@ -10,13 +10,15 @@ interface ViewProps {
     isLoading: boolean;
     layout?: ColumnLayout[];
     onRowClick?: (object: ContentObjectItem) => void;
+    previewObject?: (objectId: string) => void;
+    selectedObject?: ContentObjectItem | null;
     onSelectionChange: ((object: ContentObjectItem, ev: ChangeEvent<HTMLInputElement>) => void);
     selection: DocumentSelection;
     toggleAll?: (ev: ChangeEvent<HTMLInputElement>) => void;
     columns: DocumentTableColumn[];
 }
 
-export function DocumentTableView({ objects, selection, isLoading, onRowClick, columns, toggleAll, onSelectionChange }: ViewProps) {
+export function DocumentTableView({ objects, selection, isLoading, columns, onRowClick, selectedObject, toggleAll, onSelectionChange }: ViewProps) {
     return (
         <Table className="w-full border-t">
             <thead>
@@ -31,12 +33,12 @@ export function DocumentTableView({ objects, selection, isLoading, onRowClick, c
                 {
                     objects?.map((obj: ContentObjectItem) => {
                         return (
-                            <tr key={obj.id} className='cursor-pointer hover:bg-muted' onClick={() => {
+                            <tr key={obj.id} className={`cursor-pointer hover:bg-muted group ${selectedObject?.id === obj.id ? 'bg-muted' : ''}`} onClick={() => {
                                 onRowClick && onRowClick(obj)
                             }}>
                                 {selection &&
                                     <td onClick={ev => ev.stopPropagation()}>
-                                        <input checked={selection.isSelected(obj.id)} type="checkbox"
+                                        <input checked={selection.isSelected(obj.id)} type="checkbox" className={`${!selection.isSelected(obj.id) ? 'hidden group-hover:block' : ''}`}
                                             onChange={(ev: ChangeEvent<HTMLInputElement>) => onSelectionChange(obj, ev)} />
                                     </td>
                                 }
@@ -51,13 +53,13 @@ export function DocumentTableView({ objects, selection, isLoading, onRowClick, c
     )
 }
 
-export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick }: ViewProps) {
+export function DocumentGridView({ objects, selection, isLoading, onSelectionChange, onRowClick, previewObject, selectedObject }: ViewProps) {
     return (
         <>
             <DocumentIconSkeleton isLoading={isLoading} />
             <div className="w-full gap-2 grid lg:grid-cols-6">
                 {objects.map((document) => (
-                    <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} />
+                    <DocumentIcon key={document.id} document={document} selection={selection} onSelectionChange={onSelectionChange} onRowClick={onRowClick} previewObject={previewObject} selectedObject={selectedObject} />
                 ))}
             </div>
         </>