Started implementing plugin for video support

Author: BluePixelDev

src/features/graph/index.ts

@@ -1 +1,2 @@
-export * from "./store/index"
+export * from "./store/index"
+export * from "./renderer"

src/features/graph/renderer/index.ts

@@ -1,5 +1,3 @@
-export { type IRenderer } from "./IRenderer"
-export { type IRendererRegistry } from "./IRenderer"
-export { rendererRegistry } from "./rendererRegistry"
-
+export { type IRenderer, type IRendererRegistry } from "./IRenderer"
+export { rendererRegistry, type NodeRenderer } from "./rendererRegistry"
 export { default as NodesRenderer } from "./components/NodesRenderer"

src/plugins/video/VideoImporter.ts

@@ -1,37 +1,55 @@
-import { addNode } from "@/redux/nodes/nodesSlice";
-import { Dispatch } from "@reduxjs/toolkit";
-import { createNode } from "@/utils/nodeUtils";
-import { IImporter } from "@/features/importing/IImporter";
+import { addNode } from "@/features/graph"
+import { IImporter, ImportEvent, ImportResult } from "@/features/importing"
+import { getFileFormat } from "@/utils"
+import { createNodeFromImportEvent } from "@/utils/nodeUtils"
+import { VideoNodeData } from "./types"
 
-export class VideoImporter extends IImporter {
-    importData(file: File, dispatch: Dispatch): void {
-        const videoUrl = URL.createObjectURL(file);
-        const video = document.createElement('video') as HTMLVideoElement;
-
-        video.onloadedmetadata = () => {
-            const newNode = createNode({
-                type: "video",
-                position: {
-                    x: 0,
-                    y: 0,
-                },
-                size: {
-                    width: video.videoWidth,
-                    height: video.videoHeight,
-                },
-                aspect: video.videoWidth / video.videoHeight,
-                data: {
-                    src: videoUrl,
-                    alt: file.name,
-                    type: file.type
-                }
-            })
-            dispatch(addNode(newNode));
+const VIDEO_FORMATS = ['mp4', 'webm', 'ogg']
+export class VideoImporter implements IImporter {
+    async canHandle(_file: File, content: ArrayBuffer): Promise<boolean> {
+        const fileType = await getFileFormat(content)
+        if (!fileType) {
+            return false
         }
-        video.src = videoUrl;
+
+        return Promise.resolve(VIDEO_FORMATS.includes(fileType))
     }
 
-    getSupportedFormats(): string[] {
-        return ['mp4', 'webm', 'ogg']
+    async importData(event: ImportEvent): Promise<ImportResult> {
+        try {
+            const videoUrl = URL.createObjectURL(event.file)
+            const video = document.createElement('video') as HTMLVideoElement
+            video.src = videoUrl 
+            
+            await new Promise<void>((resolve, reject) => {
+                video.onloadedmetadata = () => resolve()
+                video.onerror = () => reject(new Error("Failed to load video metadata"))
+            })
+
+            const file = event.file
+            const size = {
+                width: video.videoWidth,
+                height: video.videoHeight,
+            }
+
+            video.onloadedmetadata = () => {
+                const newNode = createNodeFromImportEvent<VideoNodeData>(event, size,
+                    {
+                        type: "video",
+                        data: {
+                            src: videoUrl,
+                            type: file.type
+                        }
+                    })
+                event.dispatch(addNode(newNode))
+            }
+            video.src = videoUrl
+            console.log("Video URL: ", videoUrl)
+
+            return { success: true, message: 'Image imported successfully.' }
+        } catch (error) {
+            const message = error instanceof Error ? error.message : String(error)
+            return { success: false, message: `Error importing image: ${message}` }
+        }
     }
 }

src/plugins/video/VideoNode.tsx

@@ -1,12 +1,9 @@
+import { GraphNodeData } from '@/features/graph';
 import './videoNode.style.css'
 import { GraphNode } from "@/features/graph/graphview";
+import { NodeRenderer } from '@/features/graph/renderer';
 import React from "react";
-import { type NodeRenderer } from "../../features/graph/renderer/RendererRegistry";
-
-type VideoNodeData = {
-    src: string;
-    type: string
-}
+import { VideoNodeData } from './types';
 
 const OptimizedVideo = React.memo(({ src, type }: { src: string; type: string }) => (
     <video
@@ -16,15 +13,18 @@ const OptimizedVideo = React.memo(({ src, type }: { src: string; type: string })
     >
         <source src={src} type={type} />
     </video>
-));
+))
+OptimizedVideo.displayName = 'VideoNode';
 
-const VideoNode: NodeRenderer<VideoNodeData> = ({ node }) => {
-    const { src, type } = node.data;
+const VideoNode: NodeRenderer<VideoNodeData> = ({ node }: { node: GraphNodeData<VideoNodeData> }) => {
+    const { src, type } = node.data
+    const { width, height } = node.size
+    const aspect = width / height;
 
     return (
         <GraphNode
             nodeId={node.id}
-            aspectRatio={node.aspect}
+            aspectRatio={aspect}
             className="video-node"
         >
             <OptimizedVideo src={src ?? "/fallback-image.png"} type={type} />

src/plugins/video/VideoNodeRenderer.tsx

@@ -0,0 +1,20 @@
+import { GraphNodeData } from "@/features/graph"
+import { IRenderer } from "@/features/graph/renderer"
+import { VideoNodeData } from "./types"
+import VideoNode from "./VideoNode"
+
+export class VideoNodeRenderer implements IRenderer<VideoNodeData> {
+    render = (node: GraphNodeData<unknown>): JSX.Element | null => {
+        const nodeData = node as GraphNodeData<VideoNodeData>
+        const data = nodeData.data
+
+        if (!nodeData) return null
+        if (!data || !data.src) {
+            return null
+        }
+
+        return (
+            <VideoNode node={node as GraphNodeData<VideoNodeData>} />
+        )
+    }
+}

src/plugins/video/index.ts

@@ -0,0 +1,25 @@
+import { PluginDefinition } from "@/features/plugins";
+import { VideoNodeRenderer } from "./VideoNodeRenderer";
+import { VideoImporter } from "./VideoImporter";
+import { rendererRegistry } from "@/features/graph";
+import { importerRegistry } from "@/features/importing";
+
+let renderer: VideoNodeRenderer
+let importer: VideoImporter
+
+export const pluginDefinition: PluginDefinition = {
+    name: "Video Plugin",
+    id: "core-video-plugin",
+    description: "A plugin that adds video support to the application.",
+    version: "1.0.0",
+    onRegister: () => {
+        renderer = new VideoNodeRenderer()
+        importer = new VideoImporter()
+        rendererRegistry.registerRenderer("video", renderer)
+        importerRegistry.registerImporter(importer)
+    },
+    onUnload: () => {
+        rendererRegistry.removeRenderer("video")
+        importerRegistry.unregisterImporter(importer)
+    },
+}

src/plugins/video/types.ts

@@ -0,0 +1,4 @@
+export type VideoNodeData = {
+    src: string;
+    type: string
+}