fix CORS attribute missing bug

src/components/GalleryItem/GalleryItem.tsx

@@ -1,66 +1,75 @@
 import { GALLERY_ITEM_NO_PROVIDER_FLAG, GalleryItemProps } from "./GalleryItem.types";
-import { useContext, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import useGallery from "../Gallery/useGallery";
 import { CylinderGeometry, Mesh } from "three";
 import { CSG } from "three-csg-ts";
 import GalleryItemContext from "./GalleryItemContext";
+import GalleryItemMaterial from "../../core/GalleryItemMaterial";
 
-const GalleryItem = ({ material, children }: GalleryItemProps) => {
-  const itemData = useContext(GalleryItemContext);
-  if (itemData === GALLERY_ITEM_NO_PROVIDER_FLAG) {
-    throw new Error("GalleryItem must be a child of Gallery");
-  }
+const GalleryItem = React.forwardRef<GalleryItemMaterial, GalleryItemProps>(
+  ({ material, children }, ref) => {
+    const itemData = useContext(GalleryItemContext);
+    if (itemData === GALLERY_ITEM_NO_PROVIDER_FLAG) {
+      throw new Error("GalleryItem must be a child of Gallery");
+    }
 
-  const { outerRadius, height, radialSegments, heightSegments, sectionAngle, innerRadius } =
-    useGallery().item;
+    const { outerRadius, height, radialSegments, heightSegments, sectionAngle, innerRadius } =
+      useGallery().item;
 
-  const generatedMaterial = useMemo(() => {
-    return material.generate();
-  }, [material]);
+    const generatedMaterial = useMemo(() => {
+      return material.generate();
+    }, [material]);
 
-  const mesh = useMemo(() => {
-    const outerGeometry = new CylinderGeometry(
-      outerRadius,
+    useEffect(() => {
+      if (ref && typeof ref === "object" && "current" in ref) {
+        (ref as React.MutableRefObject<GalleryItemMaterial>).current = material;
+      }
+    }, [material]);
+
+    const mesh = useMemo(() => {
+      const outerGeometry = new CylinderGeometry(
+        outerRadius,
+        outerRadius,
+        height,
+        radialSegments,
+        heightSegments,
+        false,
+        itemData.itemIndex * sectionAngle,
+        sectionAngle,
+      );
+      const outerMesh = new Mesh(outerGeometry);
+
+      const innerGeometry = new CylinderGeometry(
+        innerRadius,
+        innerRadius,
+        height,
+        radialSegments,
+        heightSegments,
+        false,
+        itemData.itemIndex * sectionAngle,
+        sectionAngle,
+      );
+      const innerMesh = new Mesh(innerGeometry);
+      innerMesh.position.y = -0.01; // Offset to prevent z-fighting
+
+      // Perform CSG subtraction to hollow out the segment
+      const finalMesh = CSG.subtract(outerMesh, innerMesh);
+      finalMesh.material = generatedMaterial;
+
+      return finalMesh;
+    }, [
       outerRadius,
       height,
       radialSegments,
       heightSegments,
-      false,
-      itemData.itemIndex * sectionAngle,
       sectionAngle,
-    );
-    const outerMesh = new Mesh(outerGeometry);
-
-    const innerGeometry = new CylinderGeometry(
-      innerRadius,
       innerRadius,
-      height,
-      radialSegments,
-      heightSegments,
-      false,
-      itemData.itemIndex * sectionAngle,
-      sectionAngle,
-    );
-    const innerMesh = new Mesh(innerGeometry);
-    innerMesh.position.y = -0.01; // Offset to prevent z-fighting
-
-    // Perform CSG subtraction to hollow out the segment
-    const finalMesh = CSG.subtract(outerMesh, innerMesh);
-    finalMesh.material = generatedMaterial;
-
-    return finalMesh;
-  }, [
-    outerRadius,
-    height,
-    radialSegments,
-    heightSegments,
-    sectionAngle,
-    innerRadius,
-    material,
-    itemData.itemIndex,
-  ]);
+      material,
+      itemData.itemIndex,
+    ]);
 
-  return <primitive object={mesh}>{children}</primitive>;
-};
+    return <primitive object={mesh}>{children}</primitive>;
+  },
+);
 
 export default GalleryItem;

src/components/GalleryItem/GalleryItem.types.ts

@@ -24,4 +24,7 @@ export type ImageItemProps = PropsWithChildren<{
 export type VideoItemProps = PropsWithChildren<{
   src: string;
   autoplay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  crossOrigin?: "anonymous" | "use-credentials" | "" | null;
 }>;

src/components/GalleryItem/ImageItem.tsx

@@ -1,18 +1,24 @@
 import React, { useMemo } from "react";
 import { ImageItemProps } from "./GalleryItem.types";
-import { ImageItemMaterial } from "../../core";
+import { ImageItemMaterial, GalleryItemMaterial } from "../../core";
 import GalleryItem from "./GalleryItem";
 
-const ImageItem: React.FC<ImageItemProps> = ({ src, texture, children }) => {
-  if (!src && !texture) {
-    throw new Error("Either src or texture must be provided");
-  }
+const ImageItem = React.forwardRef<GalleryItemMaterial, ImageItemProps>(
+  ({ src, texture, children }, ref) => {
+    if (!src && !texture) {
+      throw new Error("Either src or texture must be provided");
+    }
 
-  const material = useMemo(() => {
-    return new ImageItemMaterial(texture ?? src!);
-  }, [src, texture]);
+    const material = useMemo(() => {
+      return new ImageItemMaterial(texture ?? src!);
+    }, [src, texture]);
 
-  return <GalleryItem material={material}>{children}</GalleryItem>;
-};
+    return (
+      <GalleryItem material={material} ref={ref}>
+        {children}
+      </GalleryItem>
+    );
+  },
+);
 
 export default ImageItem;

src/components/GalleryItem/SolidColorItem.tsx

@@ -1,14 +1,20 @@
 import React, { useMemo } from "react";
 import { SolidColorItemProps } from "./GalleryItem.types";
-import { SolidColorItemMaterial } from "../../core";
+import { SolidColorItemMaterial, GalleryItemMaterial } from "../../core";
 import GalleryItem from "./GalleryItem";
 
-const SolidColorItem: React.FC<SolidColorItemProps> = ({ color, children }) => {
-  const material = useMemo(() => {
-    return new SolidColorItemMaterial(color);
-  }, [color]);
+const SolidColorItem = React.forwardRef<GalleryItemMaterial, SolidColorItemProps>(
+  ({ color, children }, ref) => {
+    const material = useMemo(() => {
+      return new SolidColorItemMaterial(color);
+    }, [color]);
 
-  return <GalleryItem material={material}>{children}</GalleryItem>;
-};
+    return (
+      <GalleryItem material={material} ref={ref}>
+        {children}
+      </GalleryItem>
+    );
+  },
+);
 
 export default SolidColorItem;

src/components/GalleryItem/VideoItem.tsx

@@ -1,21 +1,33 @@
 import React, { useLayoutEffect, useMemo } from "react";
 import { VideoItemProps } from "./GalleryItem.types";
-import { VideoItemMaterial } from "../../core";
+import { VideoItemMaterial, GalleryItemMaterial } from "../../core";
 import GalleryItem from "./GalleryItem";
 
-const VideoItem: React.FC<VideoItemProps> = ({ src, children, autoplay = true }) => {
-  const material = useMemo(() => {
-    return new VideoItemMaterial(src);
-  }, [src]);
+const VideoItem = React.forwardRef<GalleryItemMaterial, VideoItemProps>(
+  ({ src, children, autoplay = true, muted = true, loop = true, crossOrigin }, ref) => {
+    const material = useMemo(() => {
+      return new VideoItemMaterial(src, crossOrigin ?? undefined);
+    }, [src, crossOrigin]);
 
-  useLayoutEffect(() => {
-    // Play video if autoplay is enabled
-    if (material.getVideo() && autoplay) {
-      material.getVideo()?.play();
-    }
-  }, [material]);
+    useLayoutEffect(() => {
+      if (material.getVideo()) {
+        const video = material.getVideo()!;
+        video.muted = muted;
+        video.loop = loop;
 
-  return <GalleryItem material={material}>{children}</GalleryItem>;
-};
+        if (autoplay) {
+          // Play video if autoplay is enabled
+          video.play();
+        }
+      }
+    }, [material]);
+
+    return (
+      <GalleryItem material={material} ref={ref}>
+        {children}
+      </GalleryItem>
+    );
+  },
+);
 
 export default VideoItem;

src/core/VideoItemMaterial.ts

@@ -5,9 +5,11 @@ class VideoItemMaterial implements GalleryItemMaterial {
   protected readonly source: string;
   protected texture: VideoTexture | undefined;
   protected video: HTMLVideoElement | undefined;
+  protected crossOrigin: string | undefined;
 
-  constructor(source: string) {
+  constructor(source: string, crossOrigin?: string) {
     this.source = source;
+    this.crossOrigin = crossOrigin;
   }
 
   protected initVideo(): void {
@@ -20,8 +22,10 @@ class VideoItemMaterial implements GalleryItemMaterial {
     }
 
     this.video.src = this.source;
-    this.video.loop = true;
-    this.video.muted = true;
+    if (this.crossOrigin) {
+      this.video.crossOrigin = this.crossOrigin;
+    }
+
     this.video.load();
   }
 

src/core/index.ts

@@ -1,4 +1,4 @@
-export * as GalleryItemMaterial from "./GalleryItemMaterial";
+export type { default as GalleryItemMaterial } from "./GalleryItemMaterial";
 export { default as ImageItemMaterial } from "./ImageItemMaterial";
 export { default as SolidColorItemMaterial } from "./SolidColorItemMaterial";
 export { default as VideoItemMaterial } from "./VideoItemMaterial";