karusell

.gitignore

@@ -16,6 +16,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.metadata
 
 npm-debug.log*
 yarn-debug.log*

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@emotion/react": "^11.10.6",
+        "@mantine/carousel": "^6.0.1",
         "@mantine/core": "^6.0.1",
         "@mantine/hooks": "^6.0.1",
         "@types/jest": "^27.5.2",
@@ -3130,6 +3131,20 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@mantine/carousel": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@mantine/carousel/-/carousel-6.0.1.tgz",
+      "integrity": "sha512-ARwb/Ov4I7zH+3NA42YjSNnv+Tt9dX2BPsmbXaZXhwVTRi2eJZUyLQNsMh8FutlGXbrjtoWrf1DnI96v9CBkpg==",
+      "dependencies": {
+        "@mantine/utils": "6.0.1"
+      },
+      "peerDependencies": {
+        "@mantine/core": "6.0.1",
+        "@mantine/hooks": "6.0.1",
+        "embla-carousel-react": "^7.0.0",
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@mantine/core": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.1.tgz",
@@ -6624,6 +6639,24 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.320.tgz",
       "integrity": "sha512-h70iRscrNluMZPVICXYl5SSB+rBKo22XfuIS1ER0OQxQZpKTnFpuS6coj7wY9M/3trv7OR88rRMOlKmRvDty7Q=="
     },
+    "node_modules/embla-carousel": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-7.1.0.tgz",
+      "integrity": "sha512-Bh8Pa8NWzgugLkf8sAGexQlBCNDFaej5BXiKgQdRJ1mUC9NWBrw9Z23YVPVGkguWoz5LMjZXXFVGCobl3UPt/Q==",
+      "peer": true
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-7.1.0.tgz",
+      "integrity": "sha512-tbYRPRZSDNd2QLNqYDcArAakGIxtUbhS7tkP0dGXktXHGgcX+3ji3VrOUTOftBiujZrMV8kRxtrRUe/1soloIQ==",
+      "peer": true,
+      "dependencies": {
+        "embla-carousel": "7.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -19332,6 +19365,14 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@mantine/carousel": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@mantine/carousel/-/carousel-6.0.1.tgz",
+      "integrity": "sha512-ARwb/Ov4I7zH+3NA42YjSNnv+Tt9dX2BPsmbXaZXhwVTRi2eJZUyLQNsMh8FutlGXbrjtoWrf1DnI96v9CBkpg==",
+      "requires": {
+        "@mantine/utils": "6.0.1"
+      }
+    },
     "@mantine/core": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.1.tgz",
@@ -21910,6 +21951,21 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.320.tgz",
       "integrity": "sha512-h70iRscrNluMZPVICXYl5SSB+rBKo22XfuIS1ER0OQxQZpKTnFpuS6coj7wY9M/3trv7OR88rRMOlKmRvDty7Q=="
     },
+    "embla-carousel": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-7.1.0.tgz",
+      "integrity": "sha512-Bh8Pa8NWzgugLkf8sAGexQlBCNDFaej5BXiKgQdRJ1mUC9NWBrw9Z23YVPVGkguWoz5LMjZXXFVGCobl3UPt/Q==",
+      "peer": true
+    },
+    "embla-carousel-react": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-7.1.0.tgz",
+      "integrity": "sha512-tbYRPRZSDNd2QLNqYDcArAakGIxtUbhS7tkP0dGXktXHGgcX+3ji3VrOUTOftBiujZrMV8kRxtrRUe/1soloIQ==",
+      "peer": true,
+      "requires": {
+        "embla-carousel": "7.1.0"
+      }
+    },
     "emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.10.6",
+    "@mantine/carousel": "^6.0.1",
     "@mantine/core": "^6.0.1",
     "@mantine/hooks": "^6.0.1",
     "@types/jest": "^27.5.2",

public/settings.js

@@ -41,5 +41,27 @@ window.globalThis= {
             "original": "IMG_20230305_164923_912.jpg",
             "thumbnail": "thumb-IMG_20230305_164923_912.jpg"
         }
+    ],
+    "gallery2": 
+    {
+        "photos":
+        [
+            "IMG_20230217_161150_331.jpg",
+            "IMG_20230218_182608_079.jpg",
+            "IMG_20230218_182625_867.jpg",
+            "IMG_20230218_184359_940.jpg",
+            "IMG_20230218_184429_386.jpg",
+            "IMG_20230305_164907_552.jpg",
+            "IMG_20230305_164913_285.jpg",
+            "IMG_20230305_164919_797.jpg",
+            "IMG_20230305_164921_376.jpg",
+            "IMG_20230305_164923_912.jpg"
+        ],
+        "videos":
+        [
+            "VID_20230226_000317.mp4",
+            "VID_20230303_182143.mp4",
+            "VID_20230305_230139.mp4"
         ]
+    }
   };

src/App.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
-import ImageGalleryX from './components/ImageGallery';
+import ImageGalleryX from './components/ImageGalleryX';
 import './App.css';
 import { AppShell } from '@mantine/core';
 import HeaderX from './components/HeaderX';
+import {photos, videos} from './state';
+import GalleryCarousel from './components/GalleryCarousel';
+
+function App() 
+{
+  const root: string = process.env.REACT_APP_WWW_ROOT!;
+  const uploads: string = root + 'uploads/';
 
-function App() {
   return (
   <div className="App">
     <AppShell header={<HeaderX />}>
-      <ImageGalleryX />
+      <GalleryCarousel 
+        videos={videos.map((item: string) => uploads + item)} 
+        photos={photos.map((item: string) => uploads + item)} 
+      />
     </AppShell>
   </div>
   );

src/components/GalleryCarousel.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Carousel } from '@mantine/carousel';
+import VideoPlayer from "./VideoPlayer"; // assuming VideoPlayer and ImageViewer are custom components to display videos and photos
+import ImageViewer from "./ImageViewer"; // assuming VideoPlayer and ImageViewer are custom components to display videos and photos
+
+type Props = {
+  videos: string[];
+  photos: string[];
+};
+
+const GalleryCarousel: React.FC<Props> = ({ videos, photos }): JSX.Element => {
+  return (
+    <Carousel
+      variant="light"
+    >
+      {photos.map((photo, index) => (
+        <ImageViewer key={`gallery-photo-${index}`} url={photo} />
+        ))}
+      {videos.map((video, index) => (
+        <VideoPlayer key={`gallery-video-${index}`} url={video} />
+      ))}
+    </Carousel>
+  );
+};
+
+export default GalleryCarousel;

src/components/ImageViewer.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ImageViewer({key, url}:{key:string, url:string}) {
+  return (
+      <img key={key} src={url} />  
+      )
+}
+
+export default ImageViewer

src/components/VideoPlayer.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Text } from '@mantine/core'; 
+
+function VideoPlayer({key, url}:{key:string, url:string}) 
+{
+  return (
+    <video key={key} controls>
+      <source src={url} type="video/mp4" />
+      <Text >
+        Sorry, your browser does not support embedded videos.
+      </Text>
+    </video>
+)
+}
+
+export default VideoPlayer

src/components/aaa.tsx

@@ -0,0 +1,74 @@
+// import React, { useState } from "react";
+// import { useMantineTheme } from "@mantine/core";
+// import { createUseStyles } from "react-jss";
+// import Carousel, { CarouselControls, CarouselProps } from "@mantine/carousel";
+// import VideoPlayer from "../VideoPlayer";
+// import Image from "../Image";
+// import { useAppStore } from "../../store";
+
+// const useStyles = createUseStyles({
+//   carouselWrapper: {
+//     marginTop: 20,
+//     marginBottom: 20,
+//   },
+// });
+
+// const MantineCarousel: React.FC = () => {
+//   const [index, setIndex] = useState(0);
+//   const appStore = useAppStore();
+//   const classes = useStyles();
+ 
+
+//   const items = appStore.items.map((item) => {
+//     if (item.mediaType === "image") {
+//       return <Image key={item.id} src={item.src} alt={item.alt} />;
+//     }
+//     if (item.mediaType === "video") {
+//       return (
+//         <VideoPlayer
+//           key={item.id}
+//           src={item.src}
+//           poster={item.poster}
+//           alt={item.alt}
+//         />
+//       );
+//     }
+//     return null;
+//   });
+
+//   const handleIndexChange = (newIndex: number) => {
+//     setIndex(newIndex);
+//   };
+//   const theme = useMantineTheme();
+
+//   const responsiveConfig: CarouselProps["responsive"] = {
+//     "@sm": {
+//       slidesPerView: 3,
+//       spacing: "md",
+//     },
+//     "@lg": {
+//       slidesPerView: 5,
+//       spacing: "xl",
+//     },
+//   };
+//   return (
+//     <div className={classes.carouselWrapper}>
+//       <Carousel
+//         height={300}
+//         items={items}
+//         current={index}
+//         onChange={handleIndexChange}
+//         responsive={responsiveConfig}
+//         controls={
+//           <CarouselControls
+//             color={theme.colorScheme === "dark" ? "white" : "gray"}
+//             variant="overlay"
+//           />
+//         }
+//       />
+//     </div>
+//   );
+// };
+
+// export default MantineCarousel
+export{}

src/components/xxx.tsx

@@ -0,0 +1,43 @@
+// import React from 'react';
+// import { Carousel, TextCarousel } from '@mantine/core';
+// import { useSelector } from 'react-redux';
+
+// import { RootState } from '../../app/store';
+
+// interface MediaCarouselProps {
+//   mediaType: 'video' | 'photo';
+// }
+
+// const MediaCarousel: React.FC<MediaCarouselProps> = ({ mediaType }) => {
+//   const media = useSelector((state: RootState) => state.media);
+//   const filteredMedia = media.filter((m) => m.type === mediaType);
+
+//   return (
+//     <Carousel
+//       withControls
+//       transition="fade"
+//       offset={5}
+//       effect="fade"
+//       color="gray"
+//       radius={5}
+//       height={300}
+//       style={{ marginTop: '2rem' }}
+//     >
+//       {filteredMedia.map((m) =>
+//         mediaType === 'video' ? (
+//           <video key={m.id} controls>
+//             <source src={m.url} type="video/mp4" />
+//             <TextCarousel delay={3000} transition="fade">
+//               Sorry, your browser does not support embedded videos.
+//             </TextCarousel>
+//           </video>
+//         ) : (
+//           <img key={m.id} src={m.url} alt={m.title} />
+//         ),
+//       )}
+//     </Carousel>
+//   );
+// };
+
+// export default MediaCarousel
+export{}

src/state.ts

@@ -2,4 +2,9 @@ import { ReactImageGalleryItem } from 'react-image-gallery';
 const {gallery} = window.globalThis as any;
 console.log(gallery);
 
+const {gallery2} = window.globalThis as any;
+console.log(gallery2);
+
 export const imageGalleryItems: ReactImageGalleryItem[] = gallery;
+export const {photos} = gallery2;
+export const {videos} = gallery2;