updated video or image option both in video section

components/Collection/Video.js

 import React, { useRef, useEffect, useState } from "react";
 import React, { useRef, useEffect, useState } from "react";
-import { Container } from "react-bootstrap";
+import Image from "next/image";
 import { cleanImage } from "../services/imageHandling";
 import { cleanImage } from "../services/imageHandling";
 
 
-const Video = ({productData}) => {
-
-  const videoRef = useRef(null);
+const Video = ({ productData }) => {
+  const mediaRef = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
 
 
+  const media = productData?.video;
+
+  const isVideo = media?.mime?.startsWith("video/");
+  const isImage = media?.mime?.startsWith("image/");
+
   useEffect(() => {
   useEffect(() => {
     const observer = new IntersectionObserver(
     const observer = new IntersectionObserver(
       ([entry]) => {
       ([entry]) => {
         if (entry.isIntersecting) {
         if (entry.isIntersecting) {
           setIsVisible(true);
           setIsVisible(true);
-
-        // 👇 Stop observing after first visibility
           observer.unobserve(entry.target);
           observer.unobserve(entry.target);
         }
         }
       },
       },
       { threshold: 0.5 }
       { threshold: 0.5 }
     );
     );
 
 
-  if (videoRef.current) observer.observe(videoRef.current);
+    if (mediaRef.current) observer.observe(mediaRef.current);
 
 
     return () => {
     return () => {
-    if (videoRef.current) observer.unobserve(videoRef.current);
+      if (mediaRef.current) observer.unobserve(mediaRef.current);
     };
     };
-}, []);
+  }, []);
+
+  if (!media?.url) return null;
 
 
   return (
   return (
     <section className="video_sec">
     <section className="video_sec">
       <div className="custom_containers">
       <div className="custom_containers">
+
+        {/* VIDEO */}
+        {isVideo && (
           <video
           <video
-          ref={videoRef}
+            ref={mediaRef}
             autoPlay
             autoPlay
             muted
             muted
             loop
             loop
             playsInline
             playsInline
             className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
             className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
           >
           >
-          <source src={cleanImage(productData?.video?.url)} type="video/mp4" />
+            <source src={cleanImage(media?.url)} type={media?.mime || "video/mp4"} />
             Your browser does not support the video tag.
             Your browser does not support the video tag.
           </video>
           </video>
+        )}
+
+        {/* IMAGE */}
+        {isImage && (
+          <div
+            ref={mediaRef}
+            className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
+          >
+            <Image
+              src={cleanImage(media?.url)}
+              alt={media?.alternativeText || media?.name || "Media"}
+              width={media?.width || 868}
+              height={media?.height || 560}
+              className="w-100"
+              style={{ objectFit: "cover" }}
+            />
+          </div>
+        )}
+
       </div>
       </div>
     </section>
     </section>
   );
   );

styles/globals.css

@@ -345,6 +345,9 @@ button.cust-swiper-button-next {
 .video-visible {
 .video-visible {
   transform: scale(1.1);
   transform: scale(1.1);
 }
 }
+.video-visible img{
+  height: 100%;
+}
   .video_sec{
   .video_sec{
     overflow: hidden;
     overflow: hidden;
   }
   }