@vertesia/ui 0.78.0 → 0.79.1

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, Spinner, useToast } from "@vertesia/ui/core";
+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;
@@ -18,15 +27,51 @@ export function ContentOverview({
     loadText,
     refetch,
 }: ContentOverviewProps) {
-    const { client, store } = useUserSession();
-    const [isLoadingText, setIsLoadingText] = useState(false);
-    const [text, setText] = useState<string | undefined>(object.text);
-    const [imageUrl, setImageUrl] = useState<string>();
-    const [isPropertiesModalOpen, setPropertiesModalOpen] = useState(false);
     const toast = useToast();
+
+    const handleCopyContent = async (
+        content: string,
+        type: "text" | "properties",
+    ) => {
+        try {
+            await navigator.clipboard.writeText(content);
+            toast({
+                status: "success",
+                title: `${type === "text" ? "Content" : "Properties"} copied`,
+                description: `Successfully copied ${type} to clipboard`,
+                duration: 2000,
+            });
+        } catch (err) {
+            console.error(`Failed to copy ${type}:`, err);
+            toast({
+                status: "error",
+                title: "Copy failed",
+                description: `Failed to copy ${type} to clipboard`,
+                duration: 5000,
+            });
+        }
+    };
+
+    return (
+        <>
+            <ResizablePanelGroup direction="horizontal" className="h-[calc(100vh-200px)]">
+                <ResizablePanel className="min-w-[100px]">
+                    <PropertiesPanel object={object} refetch={refetch ?? (() => Promise.resolve())} handleCopyContent={handleCopyContent} />
+                </ResizablePanel>
+                <ResizableHandle withHandle />
+
+                <ResizablePanel className="min-w-[100px]">
+                    <DataPanel object={object} loadText={loadText ?? false} handleCopyContent={handleCopyContent} />
+                </ResizablePanel>
+            </ResizablePanelGroup>
+
+        </>
+    );
+}
+
+function PropertiesPanel({ object, refetch, handleCopyContent }: { object: ContentObject, refetch: () => Promise<unknown>, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void> }) {
     const [viewCode, setViewCode] = useState(false);
-    const VIEW_JSON = "JSON";
-    const VIEW_TEXT = "Preview";
+    const [isPropertiesModalOpen, setPropertiesModalOpen] = useState(false);
 
     const handleOpenPropertiesModal = () => {
         setPropertiesModalOpen(true);
@@ -36,13 +81,119 @@ export function ContentOverview({
         setPropertiesModalOpen(false);
     };
 
+    return (
+        <>
+            <div className="flex justify-between items-center px-2">
+                <div className="flex items-center gap-1 bg-muted mb-2 p-1 rounded">
+                    <Button
+                        variant={`${viewCode ? "ghost" : "primary"}`}
+                        size="sm"
+                        alt="Preview properties"
+                        onClick={() => setViewCode(!viewCode)}
+                    >
+                        Properties
+                    </Button>
+                    <Button
+                        variant={`${viewCode ? "primary" : "ghost"}`}
+                        size="sm"
+                        alt="View in JSON format"
+                        onClick={() => setViewCode(!viewCode)}
+                    >
+                        JSON
+                    </Button>
+                </div>
+                <div className="flex items-center gap-2">
+                    {object.properties && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            title="Copy properties"
+                            onClick={() =>
+                                handleCopyContent(
+                                    JSON.stringify(
+                                        object.properties,
+                                        null,
+                                        2,
+                                    ),
+                                    "properties",
+                                )
+                            }
+                        >
+                            <Copy className="size-4" />
+                        </Button>
+                    )}
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={handleOpenPropertiesModal}
+                        title="Edit properties"
+                        className="flex items-center gap-2"
+                    >
+                        <SquarePen className="size-4" />
+                    </Button>
+                </div>
+            </div>
+
+            {
+                object.properties ? (
+                    <div className="h-[calc(100vh-220px)] overflow-auto px-2">
+                        <JSONDisplay
+                            value={object.properties}
+                            viewCode={viewCode}
+
+                        />
+                    </div>
+                ) : (
+                    <div className="h-[calc(100vh-220px)] overflow-auto px-2">
+                        <div>No properties defined</div>
+                    </div>
+                )
+            }
+            {/* Properties Editor Modal */}
+            <PropertiesEditorModal
+                isOpen={isPropertiesModalOpen}
+                onClose={handleClosePropertiesModal}
+                object={object}
+                refetch={refetch}
+            />
+        </>
+    );
+}
+
+function DataPanel({ object, loadText, handleCopyContent }: { object: ContentObject, loadText: boolean, handleCopyContent: (content: string, type: "text" | "properties") => Promise<void> }) {
+    const { store } = useUserSession();
+
+    const isImage = object?.metadata?.type === ContentNature.Image;
+    const isVideo = object?.metadata?.type === ContentNature.Video;
+
+    // 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) {
             setIsLoadingText(true);
             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);
@@ -53,30 +204,87 @@ export function ContentOverview({
         }
     }, [loadText]);
 
-    const handleCopyContent = async (
-        content: string,
-        type: "text" | "properties",
-    ) => {
-        try {
-            await navigator.clipboard.writeText(content);
-            toast({
-                status: "success",
-                title: `${type === "text" ? "Content" : "Properties"} copied`,
-                description: `Successfully copied ${type} to clipboard`,
-                duration: 2000,
-            });
-        } catch (err) {
-            console.error(`Failed to copy ${type}:`, err);
-            toast({
-                status: "error",
-                title: "Copy failed",
-                description: `Failed to copy ${type} to clipboard`,
-                duration: 5000,
-            });
-        }
-    };
+    return (
+        <>
+            <div className="flex justify-between items-center px-2">
+                <div className="flex items-center gap-1 bg-muted mb-2 p-1 rounded">
+                    {isImage &&
+                        <Button
+                            variant={currentPanel === PanelView.Image ? "primary" : "ghost"}
+                            size="sm"
+                            alt="View Image"
+                            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={currentPanel === PanelView.Text ? "primary" : "ghost"}
+                        size="sm"
+                        alt="View Text"
+                        onClick={() => setCurrentPanel(PanelView.Text)}
+                    >
+                        Text
+                    </Button>
+
+                </div>
+                {currentPanel === PanelView.Text && <TextActions object={object} text={text} handleCopyContent={handleCopyContent} />}
+            </div>
+            {
+                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} isTextCropped={isTextCropped} />
+                    )
+                )
+            }
+        </>
+    );
+}
+
+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 isMarkdown =
+        content &&
+        content.type &&
+        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, {
@@ -140,262 +348,323 @@ export function ContentOverview({
                 description: `Failed to export document to ${format.toUpperCase()} format`,
                 duration: 5000,
             });
+        } finally {
+            setLoadingFormat(null);
         }
     };
 
     const handleExportDocx = () => handleExportDocument("docx");
     const handleExportPdf = () => handleExportDocument("pdf");
+    return (
+        <div className="h-[41px] text-lg font-semibold flex justify-between items-center px-2">
+            <div className="flex items-center gap-2">
+                {text && (
+                    <Button variant="ghost" size="sm" title="Copy text" className="flex items-center gap-2" onClick={() => handleCopyContent(text, "text")}>
+                        <Copy className="size-4" />
+                    </Button>
+                )}
+                {isMarkdown && text && (
+                    <>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={handleExportDocx}
+                            disabled={loadingFormat !== null}
+                            className="flex items-center gap-2"
+                        >
+                            {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"
+                        >
+                            {loadingFormat === "pdf" ? (
+                                <Spinner size="sm" />
+                            ) : (
+                                <Download className="size-4" />
+                            )}
+                            PDF
+                        </Button>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
 
+const TextPanel = memo(({ object, text, isTextCropped }: { object: ContentObject, text: string | undefined, isTextCropped: boolean }) => {
     const content = object.content;
-    const isImage =
-        content &&
-        content.source &&
-        content.type &&
-        content.type.startsWith("image/");
+
+    // Check if content type is markdown or plain text
     const isMarkdownOrText =
         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("!["));
 
-    useEffect(() => {
-        if (isImage) {
-            client.objects
-                .getRendition(object.id, {
-                    format: ImageRenditionFormat.jpeg,
-                    generate_if_missing: false,
-                    sign_url: true,
-                })
-                .then((r) => {
-                    if (r.status === "found") {
-                        return r.renditions?.length ? r.renditions[0] : null;
-                    } else {
-                        return object;
-                    }
-                })
-                .catch(() => {
-                    return object;
-                })
-                .then(() => {
-                    client.files
-                        .getDownloadUrl(object.content.source!)
-                        .then((r) => {
-                            setImageUrl(r.url);
-                        });
-                });
-        }
-    }, []);
+    // 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("](")
+    );
 
-    return (
-        <div className="w-full">
-            <div className="flex flex-col lg:flex-row lg:gap-8">
-                <div className="w-full lg:w-1/2">
-                    <div className="h-[41px] text-lg font-semibold mb-4 border-b flex justify-between items-center">
-                        <div className="flex items-center gap-1">
-                            Properties
-                            <Button
-                                variant="outline"
-                                size="sm"
-                                alt={`${viewCode ? "Preview" : "View in JSON format"}`}
-                                onClick={() => setViewCode(!viewCode)}
-                            >
-                                {viewCode ? VIEW_TEXT : VIEW_JSON}
-                            </Button>
-                        </div>
-                        <div className="flex items-center gap-2">
-                            {object.properties && (
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    title="Copy properties"
-                                    onClick={() =>
-                                        handleCopyContent(
-                                            JSON.stringify(
-                                                object.properties,
-                                                null,
-                                                2,
-                                            ),
-                                            "properties",
-                                        )
-                                    }
-                                >
-                                    <Copy className="size-4" />
-                                </Button>
-                            )}
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={handleOpenPropertiesModal}
-                                title="Edit properties"
-                                className="flex items-center gap-2"
-                            >
-                                <SquarePen className="size-4" />
-                            </Button>
-                        </div>
-                    </div>
-                    {object.properties ? (
-                        <JSONDisplay
-                            value={object.properties}
-                            viewCode={viewCode}
-                        />
-                    ) : (
-                        <div>No properties defined</div>
-                    )}
-                    {isImage && (
-                        <div className="my-4">
-                            <div className="h-[41px] text-lg font-semibold mb-4 border-b flex justify-between items-center">
-                                <span className="py-1">Image</span>
-                            </div>
-                            {imageUrl ? (
-                                <img
-                                    src={imageUrl}
-                                    alt={object.name}
-                                    className="w-full object-contain"
-                                />
-                            ) : (
-                                <Spinner size="md" />
-                            )}
-                        </div>
-                    )}
-                </div>
+    // Render as markdown if it's markdown/text type OR if text looks like markdown
+    const shouldRenderAsMarkdown = isMarkdownOrText || seemsMarkdown;
 
-                <div className="w-full lg:w-1/2 mt-4 lg:mt-0">
-                    <div className="h-[41px] text-lg font-semibold mb-4 border-b flex justify-between items-center">
-                        <span className="py-1">Text</span>
-                        <div className="flex items-center gap-2">
-                            {text && (
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    title="Copy text"
-                                    onClick={() =>
-                                        handleCopyContent(text, "text")
-                                    }
-                                    className="flex items-center gap-2"
-                                >
-                                    <Copy className="h-4 w-4" />
-                                </Button>
-                            )}
-                            {(isMarkdownOrText || seemsMarkdown) && text && (
-                                <>
-                                    <Button
-                                        variant="ghost"
-                                        size="sm"
-                                        onClick={handleExportDocx}
-                                        className="flex items-center gap-2"
-                                    >
-                                        <Download className="h-4 w-4" />
-                                        DOCX
-                                    </Button>
-                                    <Button
-                                        variant="ghost"
-                                        size="sm"
-                                        onClick={handleExportPdf}
-                                        className="flex items-center gap-2"
-                                    >
-                                        <Download className="h-4 w-4" />
-                                        PDF
-                                    </Button>
-                                </>
-                            )}
+    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>
-                    {isLoadingText && <Spinner size="md" />}
-                    {text ? (
-                        <div className="border shadow-xs rounded-xs max-w-7xl">
-                            {seemsMarkdown ? (
-                                <div className="vprose prose-sm p-1">
-                                    <MarkdownRenderer
-                                        components={{
-                                            a: ({ node, ...props }: { node?: any; href?: string; children?: React.ReactNode }) => {
-                                                const href = props.href || "";
-                                                if (href.includes("/store/objects/")) {
-                                                    return (
-                                                        <NavLink
-                                                            topLevelNav
-                                                            href={href}
-                                                            className="text-info"
-                                                        >
-                                                            {props.children}
-                                                        </NavLink>
-                                                    );
+                )}
+                <div className="max-w-7xl px-2 h-[calc(100vh-210px)] overflow-auto">
+                    {shouldRenderAsMarkdown ? (
+                        <div className="vprose prose-sm p-1">
+                            <MarkdownRenderer
+                                components={{
+                                    a: ({ node, ...props }: { node?: any; href?: string; children?: React.ReactNode }) => {
+                                        const href = props.href || "";
+                                        if (href.includes("/store/objects/")) {
+                                            return (
+                                                <NavLink
+                                                    topLevelNav
+                                                    href={href}
+                                                    className="text-info"
+                                                >
+                                                    {props.children}
+                                                </NavLink>
+                                            );
+                                        }
+                                        return <a {...props} data-debug="test" target="_blank" rel="noopener noreferrer" />;
+                                    },
+                                    p: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                        <p {...props} className={`my-0`} />
+                                    ),
+                                    pre: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                        <pre {...props} className={`my-2 p-2 rounded`} />
+                                    ),
+                                    code: ({
+                                        node,
+                                        className,
+                                        children,
+                                        ...props
+                                    }: {
+                                        node?: any;
+                                        className?: string;
+                                        children?: React.ReactNode;
+                                    }) => {
+                                        const match = /language-(\w+)/.exec(className || "");
+                                        const isInline = !match;
+                                        return (
+                                            <code
+                                                {...props}
+                                                className={
+                                                    isInline
+                                                        ? `px-1.5 py-0.5 rounded`
+                                                        : "text-muted"
                                                 }
-                                                return <a {...props} data-debug="test" target="_blank" rel="noopener noreferrer" />;
-                                            },
-                                            p: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
-                                                <p {...props} className={`my-0`} />
-                                            ),
-                                            pre: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
-                                                <pre {...props} className={`my-2 p-2 rounded`} />
-                                            ),
-                                            code: ({
-                                                node,
-                                                className,
-                                                children,
-                                                ...props
-                                            }: {
-                                                node?: any;
-                                                className?: string;
-                                                children?: React.ReactNode;
-                                            }) => {
-                                                const match = /language-(\w+)/.exec(className || "");
-                                                const isInline = !match;
-                                                return (
-                                                    <code
-                                                        {...props}
-                                                        className={
-                                                            isInline
-                                                                ? `px-1.5 py-0.5 rounded`
-                                                                : "text-muted"
-                                                        }
-                                                    >
-                                                        {children}
-                                                    </code>
-                                                );
-                                            },
-                                            h1: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
-                                                <h1 {...props} className={`font-bold text-2xl my-2`} />
-                                            ),
-                                            h2: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
-                                                <h2 {...props} className={`font-bold text-xl my-2`} />
-                                            ),
-                                            h3: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
-                                                <h3 {...props} className={`font-bold text-lg my-2`} />
-                                            ),
-                                            li: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
-                                                <li {...props} />
-                                            ),
-                                        }}
-                                    >
-                                        {text}
-                                    </MarkdownRenderer>
-                                </div>
-                            ) : (
-                                <pre className="text-wrap bg-muted text-muted p-2">
-                                    {text}
-                                </pre>
-                            )}
+                                            >
+                                                {children}
+                                            </code>
+                                        );
+                                    },
+                                    h1: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                        <h1 {...props} className={`font-bold text-2xl my-2`} />
+                                    ),
+                                    h2: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                        <h2 {...props} className={`font-bold text-xl my-2`} />
+                                    ),
+                                    h3: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                        <h3 {...props} className={`font-bold text-lg my-2`} />
+                                    ),
+                                    li: ({ node, ...props }: { node?: any; children?: React.ReactNode }) => (
+                                        <li {...props} />
+                                    ),
+                                }}
+                            >
+                                {text}
+                            </MarkdownRenderer>
                         </div>
                     ) : (
-                        <div>No content</div>
+                        <pre className="text-wrap bg-muted text-muted p-2">
+                            {text}
+                        </pre>
                     )}
                 </div>
+            </>
+        ) :
+            <div className="px-2">
+                <div>No content</div>
             </div>
+    );
+});
 
-            {/* Properties Editor Modal */}
-            <PropertiesEditorModal
-                isOpen={isPropertiesModalOpen}
-                onClose={handleClosePropertiesModal}
-                object={object}
-                refetch={refetch}
-            />
+function ImagePanel({ object }: { object: ContentObject }) {
+    const { client } = useUserSession();
+    const [imageUrl, setImageUrl] = useState<string>();
+
+    const content = object.content;
+    const isImage = object.metadata && object.metadata.type === ContentNature.Image;
+
+    useEffect(() => {
+        if (isImage) {
+            const loadImage = async () => {
+                const webSupportedFormats = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
+                const isOriginalWebSupported = content?.type && webSupportedFormats.includes(content.type);
+
+                try {
+                    const rendition = await client.objects.getRendition(object.id, {
+                        format: ImageRenditionFormat.jpeg,
+                        generate_if_missing: false,
+                        sign_url: true,
+                    });
+
+                    if (rendition.status === "found" && rendition.renditions?.length) {
+                        // Use rendition URL directly
+                        setImageUrl(rendition.renditions[0]);
+                    } else if (isOriginalWebSupported) {
+                        // Fall back to original file only if web-supported
+                        const downloadUrl = await client.files.getDownloadUrl(object.content.source!);
+                        setImageUrl(downloadUrl.url);
+                    }
+                } catch (error) {
+                    // Fall back to original file only if web-supported
+                    if (isOriginalWebSupported) {
+                        const downloadUrl = await client.files.getDownloadUrl(object.content.source!);
+                        setImageUrl(downloadUrl.url);
+                    }
+                }
+            };
+
+            loadImage();
+        }
+    }, []);
+
+    return (
+        <div className="mb-4 px-2">
+            {imageUrl ? (
+                <img
+                    src={imageUrl}
+                    alt={object.name}
+                    className="w-full object-contain"
+                />
+            ) : (
+                <Spinner size="md" />
+            )}
         </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>
+    );
+}