@fils/sanity-components 0.0.9 → 0.1.0

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 })] }) }))] }));
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Video File Schema
+ * Document type for uploaded video files with thumbnail generation
+ */
+export declare const VideoFile: {
+    type: "document";
+    name: "videoFile";
+} & Omit<import("sanity").DocumentDefinition, "preview"> & {
+    preview?: import("sanity").PreviewConfig<{
+        video: string;
+        media: string;
+    }, Record<"media" | "video", any>> | undefined;
+};
+/**
+ * Video URL Schema
+ * Document type for external video URLs (e.g., Vimeo, YouTube)
+ */
+export declare const VideoURL: {
+    type: "document";
+    name: "videoUrl";
+} & Omit<import("sanity").DocumentDefinition, "preview"> & {
+    preview?: import("sanity").PreviewConfig<{
+        video: string;
+        media: string;
+    }, Record<"media" | "video", any>> | undefined;
+};
+/**
+ * Video File Object Schema
+ * Object type for use as a field in other schemas
+ */
+export declare const VideoFileObject: {
+    type: "object";
+    name: "videoFileObject";
+} & Omit<import("sanity").ObjectDefinition, "preview"> & {
+    preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
+};
+/**
+ * Video URL Object Schema
+ * Object type for use as a field in other schemas (URL version)
+ */
+export declare const VideoURLObject: {
+    type: "object";
+    name: "videoUrlObject";
+} & Omit<import("sanity").ObjectDefinition, "preview"> & {
+    preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
+};
+export declare const VideoFileNoThumb: {
+    type: "object";
+    name: "videoFileNoThumb";
+} & Omit<import("sanity").ObjectDefinition, "preview"> & {
+    preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
+};
+export declare const VideoURLNoThumb: {
+    type: "object";
+    name: "videoFileNoThumb";
+} & Omit<import("sanity").ObjectDefinition, "preview"> & {
+    preview?: import("sanity").PreviewConfig<Record<string, string>, Record<never, any>> | undefined;
+};

package/lib/components/video/VideoSchemas.js

@@ -0,0 +1,197 @@
+import { LinkIcon, PlayIcon, VideoIcon } from "@sanity/icons";
+import { defineField, defineType } from "sanity";
+import { createVideoInput } from "./CreateVideoInput";
+/**
+ * Video File Schema
+ * Document type for uploaded video files with thumbnail generation
+ */
+export const VideoFile = defineType({
+    name: 'videoFile',
+    type: 'document',
+    title: 'Video File',
+    description: 'Video File + Thumbnail',
+    icon: VideoIcon,
+    fields: [
+        defineField({
+            name: 'video',
+            type: 'file',
+            options: {
+                accept: "video/mp4, video/webm"
+            },
+            icon: PlayIcon,
+            description: 'Video File. Supported formats: MP4 & WebM',
+            validation: Rule => Rule.required()
+        }),
+        defineField({
+            name: 'image',
+            title: 'Video Thumbnail',
+            type: 'image',
+            validation: Rule => Rule.required()
+        })
+    ],
+    components: {
+        input: createVideoInput({
+            inputType: 'file',
+            enableThumbnailGeneration: true
+        })
+    },
+    preview: {
+        select: {
+            video: 'video',
+            media: 'image'
+        },
+        prepare(selected) {
+            const { video, media } = selected;
+            // Just use the original filename from the asset if available
+            const filename = video?.asset?._ref
+                ? video.asset._ref.split('-').slice(1, -1).join('-')
+                : 'No video';
+            return {
+                title: filename,
+                media
+            };
+        }
+    }
+});
+/**
+ * Video URL Schema
+ * Document type for external video URLs (e.g., Vimeo, YouTube)
+ */
+export const VideoURL = defineType({
+    name: 'videoUrl',
+    type: 'document',
+    title: 'Video URL',
+    description: 'External video URL + Thumbnail',
+    icon: VideoIcon,
+    fields: [
+        defineField({
+            name: 'video',
+            type: 'url',
+            icon: LinkIcon,
+            description: 'Video URL (e.g., Vimeo, YouTube)',
+            validation: Rule => Rule.required().uri({
+                scheme: ['http', 'https']
+            })
+        }),
+        defineField({
+            name: 'image',
+            title: 'Video Thumbnail',
+            type: 'image',
+            validation: Rule => Rule.required()
+        })
+    ],
+    components: {
+        input: createVideoInput({
+            inputType: 'url',
+            enableThumbnailGeneration: false // Can't generate from external URLs
+        })
+    },
+    preview: {
+        select: {
+            video: 'video',
+            media: 'image'
+        },
+        prepare(selected) {
+            const { video, media } = selected;
+            return {
+                title: video || 'No URL',
+                media
+            };
+        }
+    }
+});
+/**
+ * Video File Object Schema
+ * Object type for use as a field in other schemas
+ */
+export const VideoFileObject = defineType({
+    name: 'videoFileObject',
+    type: 'object',
+    title: 'Video with Thumbnail',
+    fields: [
+        defineField({
+            name: 'video',
+            type: 'file',
+            options: {
+                accept: "video/mp4, video/webm"
+            }
+        }),
+        defineField({
+            name: 'image',
+            title: 'Thumbnail',
+            type: 'image'
+        })
+    ],
+    components: {
+        input: createVideoInput({
+            inputType: 'file',
+            enableThumbnailGeneration: true
+        })
+    }
+});
+/**
+ * Video URL Object Schema
+ * Object type for use as a field in other schemas (URL version)
+ */
+export const VideoURLObject = defineType({
+    name: 'videoUrlObject',
+    type: 'object',
+    title: 'Video URL with Thumbnail',
+    fields: [
+        defineField({
+            name: 'video',
+            type: 'url'
+        }),
+        defineField({
+            name: 'image',
+            title: 'Thumbnail',
+            type: 'image'
+        })
+    ],
+    components: {
+        input: createVideoInput({
+            inputType: 'url',
+            enableThumbnailGeneration: false
+        })
+    }
+});
+export const VideoFileNoThumb = defineType({
+    name: 'videoFileNoThumb',
+    type: 'object',
+    title: 'Video File',
+    fields: [
+        defineField({
+            name: 'video',
+            type: 'file',
+            options: {
+                accept: 'video/mp4, video/webm'
+            }
+        })
+    ],
+    components: {
+        input: createVideoInput({
+            inputType: 'file',
+            enableThumbnailGeneration: false
+        })
+    }
+});
+export const VideoURLNoThumb = defineType({
+    name: 'videoFileNoThumb',
+    type: 'object',
+    title: 'Video URL',
+    fields: [
+        defineField({
+            name: 'video',
+            type: 'file',
+            options: {
+                accept: 'video/mp4, video/webm'
+            }
+        })
+    ],
+    components: {
+        input: createVideoInput({
+            inputType: 'url',
+            enableThumbnailGeneration: false
+        })
+    }
+});

package/lib/main.d.ts

@@ -2,3 +2,4 @@ export * from './components/core/SEOImage';
 export * from './components/core/SEO';
 export * from './validators/utils';
 export * from './components/ui/DeployButton';
+export * from './components/video/VideoSchemas';

package/lib/main.js

@@ -3,3 +3,4 @@ export * from './components/core/SEO';
 // export * from './config/utils';
 export * from './validators/utils';
 export * from './components/ui/DeployButton';
+export * from './components/video/VideoSchemas';

package/package.json

@@ -1,19 +1,26 @@
 {
   "name": "@fils/sanity-components",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "Fil's Components for Sanity Back-Ends",
-  "main": "lib/main.js",
   "repository": "git@github.com:fil-studio/fils.git",
   "author": "Fil Studio <hello@fil.studio>",
   "license": "Apache-2.0",
   "private": false,
   "scripts": {
-    "prepare": "yarn build",
+    "prepublishOnly": "yarn build",
     "build": "tsc"
   },
-  "files": [
-    "lib"
-  ],
+  "main": "./lib/main.js",
+  "types": "./lib/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/main.js",
+      "types": "./lib/main.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "@sanity/dashboard": "^4.1.3",
     "sanity": "^3.85.1",

package/src/components/core/SEO.ts

@@ -0,0 +1,36 @@
+import { defineField, defineType } from "sanity";
+import { SEOImage } from "./SEOImage";
+
+export const SEO = defineType({
+    name: 'seo',
+    title: "SEO",
+    type: "object",
+    fields: [
+        defineField({
+            name: 'title',
+            type: 'string'
+        }),
+        defineField({
+            name: 'description',
+            type: 'text'
+        }),
+        SEOImage
+    ]
+});
+
+export const LocalizedSEO = defineType({
+    name: 'localseo',
+    title: "SEO",
+    type: "object",
+    fields: [
+        defineField({
+            name: 'title',
+            type: 'internationalizedArrayString'
+        }),
+        defineField({
+            name: 'description',
+            type: 'internationalizedArrayText'
+        }),
+        SEOImage
+    ]
+});

package/src/components/core/SEOImage.ts

@@ -0,0 +1,8 @@
+import { defineField } from "sanity";
+
+export const SEOImage = defineField({
+	name: 'card',
+	type: 'image',
+	title: 'Sharing Image',
+	description: "Used on site embedding preview. Optimal size is at 1200px x 600px"
+});