@fils/sanity-components 0.0.8 → 0.1.0

package/lib/components/ui/DeployButton.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Fil's Hosted Deploy Button
+ * Dependencies: React, @sanity/ui, @sanity/icons, @sanity/studio-secrets
+ * Recommended to use inside the dashboard
+ * Uses studio secrets to store Github token
+ */
+interface DeployButtonConfig {
+    owner: string;
+    repo: string;
+    token?: string;
+    branch?: string;
+    eventType?: string;
+}
+interface DeployButtonProps {
+    config: DeployButtonConfig;
+    title?: string;
+    deploymentUrl?: string;
+    environment?: string;
+    secretsNamespace?: string;
+    secretKey?: string;
+}
+declare const DeployButton: ({ config, title, deploymentUrl, environment, secretsNamespace, secretKey }: DeployButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DeployButton;

package/lib/components/ui/DeployButton.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Button, Card, Stack, Text, Spinner, Flex } from '@sanity/ui';
+import { PlayIcon, CheckmarkIcon, CloseIcon } from '@sanity/icons';
+import { useSecrets, SettingsView } from '@sanity/studio-secrets';
+const DeployButton = ({ config, title = "🚀 Site Deployment", deploymentUrl, environment = "production", secretsNamespace = "deployButton", secretKey = "github_token" }) => {
+    // ... rest of code
+    // ALL HOOKS MUST BE CALLED FIRST - NEVER CONDITIONALLY
+    const [deployState, setDeployState] = useState('idle');
+    const [message, setMessage] = useState('');
+    const [showSettings, setShowSettings] = useState(false);
+    const intervalRef = useRef(null);
+    const monitoringRef = useRef(false);
+    // Use Sanity secrets - ALWAYS call this hook
+    const { secrets } = useSecrets(secretsNamespace);
+    const token = secrets?.[secretKey];
+    // Get the effective token (secrets take priority over config)
+    const effectiveToken = token || config?.token;
+    // Only show settings if we don't have a token AND we have valid config
+    useEffect(() => {
+        if (!effectiveToken && config?.owner && config?.repo && !showSettings) {
+            setShowSettings(true);
+        }
+        else if (effectiveToken && showSettings) {
+            // Close settings if we now have a token
+            setShowSettings(false);
+        }
+    }, [effectiveToken, config?.owner, config?.repo, showSettings]);
+    // Clean up on unmount
+    useEffect(() => {
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, []);
+    // Plugin config for secrets
+    const pluginConfigKeys = [
+        {
+            key: secretKey,
+            title: `GitHub Token for ${environment}`,
+            description: `Personal access token for ${config?.owner}/${config?.repo} deployment`,
+            type: 'string',
+            inputType: 'password'
+        }
+    ];
+    // Poll workflow status
+    const pollWorkflowStatus = async (runId) => {
+        try {
+            console.log('Polling workflow:', runId);
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs/${runId}`, {
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json'
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const run = await response.json();
+            console.log('Run status:', run.status, 'conclusion:', run.conclusion);
+            if (run.status === 'completed') {
+                // Stop polling
+                if (intervalRef.current) {
+                    clearInterval(intervalRef.current);
+                    intervalRef.current = null;
+                }
+                monitoringRef.current = false;
+                if (run.conclusion === 'success') {
+                    setDeployState('success');
+                    setMessage('🎉 Deployment completed successfully!');
+                }
+                else {
+                    setDeployState('error');
+                    setMessage(`❌ Deployment failed: ${run.conclusion}`);
+                }
+            }
+            else if (run.status === 'in_progress' || run.status === 'queued') {
+                const startTime = new Date(run.run_started_at || run.created_at);
+                const elapsed = Math.floor((Date.now() - startTime.getTime()) / 1000);
+                setDeployState('deploying');
+                setMessage(`🔄 Deployment running... (${elapsed}s)`);
+            }
+        }
+        catch (error) {
+            console.error('Polling error:', error);
+        }
+    };
+    // Find the workflow run
+    const findWorkflowRun = async () => {
+        try {
+            console.log('Looking for workflow run...');
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs?per_page=10`, {
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json'
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('Found runs:', data.workflow_runs.length);
+            // Find the most recent run (within last 90 seconds)
+            const recentRun = data.workflow_runs.find(run => {
+                const ageInSeconds = (Date.now() - new Date(run.created_at).getTime()) / 1000;
+                console.log(`Run ${run.id}: age ${ageInSeconds}s, event: ${run.event}, status: ${run.status}`);
+                return ageInSeconds < 90;
+            });
+            if (recentRun) {
+                console.log('Found recent run:', recentRun.id, 'Event:', recentRun.event);
+                setDeployState('deploying');
+                setMessage('🚀 Deployment started...');
+                // Start polling every 5 seconds
+                intervalRef.current = setInterval(() => {
+                    pollWorkflowStatus(recentRun.id);
+                }, 5000);
+                // Initial poll
+                pollWorkflowStatus(recentRun.id);
+            }
+            else {
+                console.log('No recent workflow found');
+                setDeployState('error');
+                setMessage('❌ Could not find workflow run - check if workflow exists');
+            }
+        }
+        catch (error) {
+            console.error('Error finding workflow:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            setDeployState('error');
+            setMessage(`❌ Error finding workflow: ${errorMessage}`);
+        }
+    };
+    const triggerDeploy = async () => {
+        // Prevent multiple deployments
+        if (deployState !== 'idle' && deployState !== 'success' && deployState !== 'error')
+            return;
+        setDeployState('triggering');
+        setMessage('⚡ Triggering deployment...');
+        try {
+            console.log('Triggering deployment...');
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/dispatches`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    event_type: config.eventType || 'deploy-site',
+                    client_payload: {
+                        environment: environment,
+                        triggered_by: 'sanity_studio',
+                        timestamp: new Date().toISOString()
+                    }
+                })
+            });
+            if (response.ok) {
+                console.log('Deployment triggered successfully');
+                setMessage('✅ Deployment triggered! Looking for workflow...');
+                // Wait 5 seconds then look for the workflow
+                setTimeout(() => {
+                    if (!monitoringRef.current) {
+                        monitoringRef.current = true;
+                        findWorkflowRun();
+                    }
+                }, 5000);
+            }
+            else {
+                const error = await response.json();
+                throw new Error(error.message || `HTTP ${response.status}`);
+            }
+        }
+        catch (error) {
+            console.error('Deploy trigger failed:', error);
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            setDeployState('error');
+            setMessage(`❌ Failed to trigger: ${errorMessage}`);
+        }
+    };
+    const getButtonProps = () => {
+        switch (deployState) {
+            case 'triggering':
+                return { tone: 'primary', disabled: true, icon: Spinner, text: 'Triggering...' };
+            case 'deploying':
+                return { tone: 'primary', disabled: true, icon: Spinner, text: 'Deploying...' };
+            case 'success':
+                return { tone: 'positive', disabled: false, icon: CheckmarkIcon, text: 'Deploy Again' };
+            case 'error':
+                return { tone: 'critical', disabled: false, icon: CloseIcon, text: 'Try Again' };
+            default:
+                return { tone: 'primary', disabled: false, icon: PlayIcon, text: 'Deploy Site' };
+        }
+    };
+    // NOW WE CAN HANDLE CONDITIONAL RENDERING AFTER ALL HOOKS
+    // Check for missing config
+    if (!config || !config.owner || !config.repo) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "critical", children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: "\u274C Deploy Button Configuration Error" }), _jsx(Text, { size: 1, children: "Missing required config: owner and repo are required" })] }) }));
+    }
+    // If showing settings, render the settings view
+    if (showSettings && !effectiveToken) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsxs(Text, { size: 2, weight: "semibold", children: ["\uD83D\uDD10 ", title, " - Setup Required"] }), _jsx(Text, { size: 1, muted: true, children: "Please configure your GitHub token to enable deployments." }), _jsx(SettingsView, { title: `${title} Configuration`, namespace: secretsNamespace, keys: pluginConfigKeys, onClose: () => {
+                            setShowSettings(false);
+                        } })] }) }));
+    }
+    // Check for missing token after settings
+    if (!effectiveToken) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "critical", children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: "\u274C Authentication Required" }), _jsx(Text, { size: 1, children: "No GitHub token configured." }), _jsx(Button, { tone: "primary", mode: "ghost", size: 1, onClick: () => setShowSettings(true), children: "Configure Token" })] }) }));
+    }
+    const buttonProps = getButtonProps();
+    return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: title }), _jsx(Flex, { justify: "flex-start", children: _jsx(Button, { tone: buttonProps.tone, disabled: buttonProps.disabled, onClick: triggerDeploy, size: 3, style: {
+                            width: '100%',
+                            maxWidth: '360px',
+                        }, children: _jsxs(Flex, { align: "center", justify: "center", style: {
+                                gap: '6px',
+                                padding: '16px 0px 16px 0px'
+                            }, children: [buttonProps.icon && (_jsx("span", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        fontSize: '16px',
+                                        lineHeight: '1'
+                                    }, children: _jsx(buttonProps.icon, {}) })), _jsx(Text, { size: 2, weight: "medium", style: { lineHeight: '1' }, children: buttonProps.text })] }) }) }), message && (_jsx(Card, { padding: 3, radius: 1, tone: deployState === 'error' ? 'critical' : deployState === 'success' ? 'positive' : 'primary', children: _jsx(Text, { size: 1, children: message }) })), deploymentUrl && deployState === 'success' && (_jsx(Button, { as: "a", href: deploymentUrl, target: "_blank", rel: "noopener noreferrer", tone: "primary", mode: "ghost", size: 3, children: "\uD83C\uDF10 View Live Site" })), _jsxs(Text, { size: 1, muted: true, children: ["Deploys from ", config.branch || 'main', " branch to ", environment] })] }) }));
+};
+export default DeployButton;

package/lib/components/ui/DeployButton.jsx.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Fil's Hosted Deploy Button
+ * Dependencies: React, @sanity/ui, @sanity/icons, @sanity/studio-secrets
+ * Recommended to use inside the dashboard
+ * Uses studio secrets to store Github token
+ */
+declare const DeployButton: ({ config, title, deploymentUrl, environment, secretsNamespace, secretKey }: {
+    config: any;
+    title?: string | undefined;
+    deploymentUrl: any;
+    environment?: string | undefined;
+    secretsNamespace?: string | undefined;
+    secretKey?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DeployButton;

package/lib/components/ui/DeployButton.jsx.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Fil's Hosted Deploy Button
+ * Dependencies: React, @sanity/ui, @sanity/icons, @sanity/studio-secrets
+ * Recommended to use inside the dashboard
+ * Uses studio secrets to store Github token
+ */
+//@ts-ignore
+import React, { useState, useEffect, useRef } from 'react';
+import { Button, Card, Stack, Text, Spinner, Flex } from '@sanity/ui';
+import { PlayIcon, CheckmarkIcon, CloseIcon } from '@sanity/icons';
+import { useSecrets, SettingsView } from '@sanity/studio-secrets';
+const DeployButton = ({ 
+//@ts-ignore
+config, title = "🚀 Site Deployment", 
+//@ts-ignore
+deploymentUrl, environment = "production", secretsNamespace = "deployButton", secretKey = "github_token" }) => {
+    // ALL HOOKS MUST BE CALLED FIRST - NEVER CONDITIONALLY
+    const [deployState, setDeployState] = useState('idle');
+    const [message, setMessage] = useState('');
+    const [showSettings, setShowSettings] = useState(false);
+    const intervalRef = useRef(null);
+    const monitoringRef = useRef(false);
+    // Use Sanity secrets - ALWAYS call this hook
+    const { secrets } = useSecrets(secretsNamespace);
+    //@ts-ignore
+    const token = secrets?.[secretKey];
+    // Get the effective token (secrets take priority over config)
+    const effectiveToken = token || config?.token;
+    // Only show settings if we don't have a token AND we have valid config
+    useEffect(() => {
+        if (!effectiveToken && config?.owner && config?.repo && !showSettings) {
+            setShowSettings(true);
+        }
+        else if (effectiveToken && showSettings) {
+            // Close settings if we now have a token
+            setShowSettings(false);
+        }
+    }, [effectiveToken, config?.owner, config?.repo, showSettings]);
+    // Clean up on unmount
+    useEffect(() => {
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, []);
+    // Plugin config for secrets
+    const pluginConfigKeys = [
+        {
+            key: secretKey,
+            title: `GitHub Token for ${environment}`,
+            description: `Personal access token for ${config?.owner}/${config?.repo} deployment`,
+            type: 'string',
+            inputType: 'password' // This should hide the token
+        }
+    ];
+    // Poll workflow status
+    //@ts-ignore
+    const pollWorkflowStatus = async (runId) => {
+        try {
+            console.log('Polling workflow:', runId);
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs/${runId}`, {
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json'
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const run = await response.json();
+            console.log('Run status:', run.status, 'conclusion:', run.conclusion);
+            if (run.status === 'completed') {
+                // Stop polling
+                if (intervalRef.current) {
+                    clearInterval(intervalRef.current);
+                    intervalRef.current = null;
+                }
+                monitoringRef.current = false;
+                if (run.conclusion === 'success') {
+                    setDeployState('success');
+                    setMessage('🎉 Deployment completed successfully!');
+                }
+                else {
+                    setDeployState('error');
+                    setMessage(`❌ Deployment failed: ${run.conclusion}`);
+                }
+            }
+            else if (run.status === 'in_progress' || run.status === 'queued') {
+                const startTime = new Date(run.run_started_at || run.created_at);
+                const elapsed = Math.floor((Date.now() - startTime.getTime()) / 1000);
+                setDeployState('deploying');
+                setMessage(`🔄 Deployment running... (${elapsed}s)`);
+            }
+        }
+        catch (error) {
+            console.error('Polling error:', error);
+        }
+    };
+    // Find the workflow run
+    const findWorkflowRun = async () => {
+        try {
+            console.log('Looking for workflow run...');
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/actions/runs?per_page=10`, {
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json'
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('Found runs:', data.workflow_runs.length);
+            // Find the most recent run (within last 90 seconds)
+            //@ts-ignore
+            const recentRun = data.workflow_runs.find(run => {
+                const ageInSeconds = (Date.now() - new Date(run.created_at).getTime()) / 1000;
+                console.log(`Run ${run.id}: age ${ageInSeconds}s, event: ${run.event}, status: ${run.status}`);
+                return ageInSeconds < 90;
+            });
+            if (recentRun) {
+                console.log('Found recent run:', recentRun.id, 'Event:', recentRun.event);
+                setDeployState('deploying');
+                setMessage('🚀 Deployment started...');
+                // Start polling every 5 seconds
+                //@ts-ignore
+                intervalRef.current = setInterval(() => {
+                    pollWorkflowStatus(recentRun.id);
+                }, 5000);
+                // Initial poll
+                pollWorkflowStatus(recentRun.id);
+            }
+            else {
+                console.log('No recent workflow found');
+                setDeployState('error');
+                setMessage('❌ Could not find workflow run - check if workflow exists');
+            }
+        }
+        catch (error) {
+            console.error('Error finding workflow:', error);
+            setDeployState('error');
+            //@ts-ignore
+            setMessage(`❌ Error finding workflow: ${error.message}`);
+        }
+    };
+    const triggerDeploy = async () => {
+        // Prevent multiple deployments
+        if (deployState !== 'idle' && deployState !== 'success' && deployState !== 'error')
+            return;
+        setDeployState('triggering');
+        setMessage('⚡ Triggering deployment...');
+        try {
+            console.log('Triggering deployment...');
+            const response = await fetch(`https://api.github.com/repos/${config.owner}/${config.repo}/dispatches`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `token ${effectiveToken}`,
+                    'Accept': 'application/vnd.github.v3+json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    event_type: config.eventType || 'deploy-site',
+                    client_payload: {
+                        environment: environment,
+                        triggered_by: 'sanity_studio',
+                        timestamp: new Date().toISOString()
+                    }
+                })
+            });
+            if (response.ok) {
+                console.log('Deployment triggered successfully');
+                setMessage('✅ Deployment triggered! Looking for workflow...');
+                // Wait 5 seconds then look for the workflow
+                setTimeout(() => {
+                    if (!monitoringRef.current) {
+                        monitoringRef.current = true;
+                        findWorkflowRun();
+                    }
+                }, 5000);
+            }
+            else {
+                const error = await response.json();
+                throw new Error(error.message || `HTTP ${response.status}`);
+            }
+        }
+        catch (error) {
+            console.error('Deploy trigger failed:', error);
+            setDeployState('error');
+            //@ts-ignore
+            setMessage(`❌ Failed to trigger: ${error.message}`);
+        }
+    };
+    const getButtonProps = () => {
+        switch (deployState) {
+            case 'triggering':
+                return { tone: 'primary', disabled: true, icon: Spinner, text: 'Triggering...' };
+            case 'deploying':
+                return { tone: 'primary', disabled: true, icon: Spinner, text: 'Deploying...' };
+            case 'success':
+                return { tone: 'positive', disabled: false, icon: CheckmarkIcon, text: 'Deploy Again' };
+            case 'error':
+                return { tone: 'critical', disabled: false, icon: CloseIcon, text: 'Try Again' };
+            default:
+                return { tone: 'primary', disabled: false, icon: PlayIcon, text: 'Deploy Site' };
+        }
+    };
+    // NOW WE CAN HANDLE CONDITIONAL RENDERING AFTER ALL HOOKS
+    // Check for missing config
+    if (!config || !config.owner || !config.repo) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "critical", children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: "\u274C Deploy Button Configuration Error" }), _jsx(Text, { size: 1, children: "Missing required config: owner and repo are required" })] }) }));
+    }
+    // If showing settings, render the settings view
+    if (showSettings && !effectiveToken) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsxs(Text, { size: 2, weight: "semibold", children: ["\uD83D\uDD10 ", title, " - Setup Required"] }), _jsx(Text, { size: 1, muted: true, children: "Please configure your GitHub token to enable deployments." }), _jsx(SettingsView, { title: `${title} Configuration`, namespace: secretsNamespace, keys: pluginConfigKeys, onClose: () => {
+                            setShowSettings(false);
+                        } })] }) }));
+    }
+    // Check for missing token after settings
+    if (!effectiveToken) {
+        return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, tone: "critical", children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: "\u274C Authentication Required" }), _jsx(Text, { size: 1, children: "No GitHub token configured." }), _jsx(Button, { tone: "primary", mode: "ghost", 
+                        //@ts-ignore
+                        size: "small", onClick: () => setShowSettings(true), children: "Configure Token" })] }) }));
+    }
+    const buttonProps = getButtonProps();
+    return (_jsx(Card, { padding: 4, radius: 2, shadow: 1, children: _jsxs(Stack, { space: 3, children: [_jsx(Text, { size: 2, weight: "semibold", children: title }), _jsx(Flex, { justify: "flex-start", children: _jsx(Button
+                    //@ts-ignore
+                    , { 
+                        //@ts-ignore
+                        tone: buttonProps.tone, disabled: buttonProps.disabled, onClick: triggerDeploy, 
+                        //@ts-ignore
+                        size: "large", style: {
+                            width: '100%',
+                            maxWidth: '360px',
+                        }, children: _jsxs(Flex, { align: "center", justify: "center", style: {
+                                gap: '6px',
+                                padding: '16px 0px 16px 0px'
+                            }, children: [buttonProps.icon && (_jsx("span", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        fontSize: '16px',
+                                        lineHeight: '1'
+                                    }, children: React.createElement(buttonProps.icon) })), _jsx(Text, { size: 2, weight: "medium", style: { lineHeight: '1' }, children: buttonProps.text })] }) }) }), message && (_jsx(Card, { padding: 3, radius: 1, tone: deployState === 'error' ? 'critical' : deployState === 'success' ? 'positive' : 'primary', children: _jsx(Text, { size: 1, children: message }) })), deploymentUrl && deployState === 'success' && (_jsx(Button, { as: "a", href: deploymentUrl, target: "_blank", rel: "noopener noreferrer", tone: "primary", mode: "ghost", 
+                    //@ts-ignore
+                    size: "small", children: "\uD83C\uDF10 View Live Site" })), _jsxs(Text, { size: 1, muted: true, children: ["Deploys from ", config.branch || 'main', " branch to ", environment] })] }) }));
+};
+export default DeployButton;

package/lib/components/video/CreateVideoInput.d.ts

@@ -0,0 +1,8 @@
+import { FileInputProps, ObjectInputProps } from 'sanity';
+export interface VideoInputOptions {
+    /** Enable thumbnail generation feature */
+    enableThumbnailGeneration?: boolean;
+    /** Support URL input instead of file upload */
+    inputType?: 'file' | 'url';
+}
+export declare function createVideoInput(options?: VideoInputOptions): (props: FileInputProps | ObjectInputProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/video/CreateVideoInput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VideoAndThumb } from './VideoAndThumb';
+export function createVideoInput(options = {}) {
+    const { enableThumbnailGeneration = true, inputType = 'file' } = options;
+    return function VideoInput(props) {
+        return (_jsx(VideoAndThumb, { props: props, isURL: inputType === 'url', enableThumbnailGeneration: enableThumbnailGeneration }));
+    };
+}

package/lib/components/video/VideoAndThumb.d.ts

@@ -0,0 +1,7 @@
+import { ObjectInputProps } from 'sanity';
+export interface VideoAndThumbProperties {
+    props: ObjectInputProps;
+    isURL: boolean;
+    enableThumbnailGeneration?: boolean;
+}
+export declare function VideoAndThumb(params: VideoAndThumbProperties): import("react/jsx-runtime").JSX.Element;

package/lib/components/video/VideoAndThumb.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon, DropIcon, WarningOutlineIcon } from '@sanity/icons';
+import { Button, Card, Flex, Stack, Text } from '@sanity/ui';
+import { useRef, useState } from 'react';
+import { set, useClient } from 'sanity';
+import { buildFileUrl, getFile } from '@sanity/asset-utils';
+export function VideoAndThumb(params) {
+    const { props, isURL, enableThumbnailGeneration = true } = params;
+    const client = useClient({ apiVersion: '2024-01-01' });
+    // Get config from the client
+    const sanityConfig = {
+        projectId: client.config().projectId,
+        dataset: client.config().dataset
+    };
+    const [isOpen, setIsOpen] = useState(false);
+    const videoRef = useRef(null);
+    const [warning, setWarning] = useState(null);
+    let url;
+    const videoMsg = isURL ? 'video URL' : 'video file';
+    if (isURL) {
+        //@ts-ignore
+        url = props.value ? props.value.video : "";
+    }
+    else {
+        // is file
+        const file = props.value && props.value.video && props.value.video.asset
+            ? getFile(props.value.video.asset, sanityConfig)
+            : null;
+        url = file ? buildFileUrl(file.asset, sanityConfig) : "";
+    }
+    // Get all field members
+    const fieldMembers = props.members.filter(member => member.kind === 'field');
+    // URL/File Field
+    const videoField = fieldMembers.filter(member => member.name === 'video');
+    // Thumbnail Image Field
+    const thumb = fieldMembers.filter(member => member.name === 'image');
+    const generateFrame = async (video) => {
+        // Clear any existing warnings
+        setWarning(null);
+        if (video.videoWidth && video.videoHeight) {
+            try {
+                const can = document.createElement('canvas');
+                can.width = video.videoWidth;
+                can.height = video.videoHeight;
+                const ctx = can.getContext('2d');
+                ctx?.drawImage(video, 0, 0);
+                can.toBlob(async (blob) => {
+                    if (!blob) {
+                        setWarning('Failed to generate image from video frame');
+                        return;
+                    }
+                    try {
+                        // Use the studio's authenticated client
+                        const asset = await client.assets.upload('image', blob, {
+                            filename: `video-frame-${Date.now()}.png`,
+                            title: 'Generated from video frame'
+                        });
+                        // Create image reference
+                        const imageReference = {
+                            _type: 'image',
+                            asset: {
+                                _type: 'reference',
+                                _ref: asset._id
+                            }
+                        };
+                        // Update your object with the new image
+                        props.onChange([
+                            set(imageReference, ['image'])
+                        ]);
+                    }
+                    catch (uploadError) {
+                        console.error('Failed to upload image:', uploadError);
+                        setWarning('Failed to upload generated frame to Sanity');
+                    }
+                }, "image/png");
+            }
+            catch (error) {
+                console.error('Error generating frame:', error);
+                setWarning('Failed to generate frame from video');
+            }
+        }
+        else {
+            setWarning(`Video has no image data. Please make sure a ${videoMsg} is properly set and preview image is visible.`);
+        }
+    };
+    const handleGenerateFromFrame = () => {
+        if (videoRef.current) {
+            generateFrame(videoRef.current);
+        }
+        else {
+            setWarning(`Video element not found. Please make sure a ${videoMsg} is set and video preview unfolded.`);
+        }
+    };
+    return (_jsxs(Stack, { space: 1, children: [_jsx("style", { children: ` video { width: 100%; } ` }), _jsx(_Fragment, { children: props.renderDefault({
+                    ...props,
+                    members: videoField
+                }) }), url && (_jsx(Card, { children: _jsxs(Stack, { space: 2, children: [_jsx(Button, { mode: "bleed", justify: "flex-start", onClick: () => setIsOpen(!isOpen), padding: 2, children: _jsxs(Flex, { align: "center", gap: 2, children: [isOpen ? _jsx(ChevronDownIcon, {}) : _jsx(ChevronRightIcon, {}), _jsx(Text, { size: 1, weight: "medium", children: isOpen ? 'Hide Preview' : 'Show Preview' })] }) }), isOpen && (_jsx(Card, { padding: 2, border: true, children: _jsx("video", { ref: videoRef, src: url, muted: true, loop: true, autoPlay: true, controls: true, crossOrigin: "anonymous" }) }))] }) })), _jsx(_Fragment, { children: props.renderDefault({
+                    ...props,
+                    members: thumb
+                }) }), enableThumbnailGeneration && (_jsx(Button, { fontSize: [2, 2, 3], icon: DropIcon, mode: "ghost", tone: "positive", text: "Generate from Video Frame", onClick: handleGenerateFromFrame })), warning && (_jsx(Card, { padding: 3, tone: "caution", border: true, children: _jsxs(Stack, { space: 2, children: [_jsxs(Text, { size: 1, weight: "medium", children: [_jsx(WarningOutlineIcon, { style: { marginRight: '8px' } }), "Warning"] }), _jsx(Text, { size: 1, children: warning })] }) }))] }));
+}