From 6932610e86d7e6c01a31e5adc09ac5ccd607ddaf Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Sun, 12 Mar 2023 00:42:40 +0100 Subject: [PATCH] karusell --- .gitignore | 1 + package-lock.json | 56 ++++++++++++++ package.json | 1 + public/settings.js | 24 +++++- src/App.tsx | 15 +++- src/components/GalleryCarousel.tsx | 26 +++++++ .../{ImageGallery.tsx => ImageGalleryX.tsx} | 0 src/components/ImageViewer.tsx | 9 +++ src/components/VideoPlayer.tsx | 16 ++++ src/components/aaa.tsx | 74 +++++++++++++++++++ src/components/xxx.tsx | 43 +++++++++++ src/state.ts | 5 ++ 12 files changed, 266 insertions(+), 4 deletions(-) create mode 100644 src/components/GalleryCarousel.tsx rename src/components/{ImageGallery.tsx => ImageGalleryX.tsx} (100%) create mode 100644 src/components/ImageViewer.tsx create mode 100644 src/components/VideoPlayer.tsx create mode 100644 src/components/aaa.tsx create mode 100644 src/components/xxx.tsx diff --git a/.gitignore b/.gitignore index e40b2c6..6551b8e 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ .env.development.local .env.test.local .env.production.local +.metadata npm-debug.log* yarn-debug.log* diff --git a/package-lock.json b/package-lock.json index fbbcd97..4356a24 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f8328d8..655b1a2 100644 --- a/package.json +++ b/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", diff --git a/public/settings.js b/public/settings.js index c7f48c3..ef6029b 100644 --- a/public/settings.js +++ b/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" + ] + } }; \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 001bbb4..3dcd1f1 100644 --- a/src/App.tsx +++ b/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 (
}> - + uploads + item)} + photos={photos.map((item: string) => uploads + item)} + />
); diff --git a/src/components/GalleryCarousel.tsx b/src/components/GalleryCarousel.tsx new file mode 100644 index 0000000..4292602 --- /dev/null +++ b/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 = ({ videos, photos }): JSX.Element => { + return ( + + {photos.map((photo, index) => ( + + ))} + {videos.map((video, index) => ( + + ))} + + ); +}; + +export default GalleryCarousel; \ No newline at end of file diff --git a/src/components/ImageGallery.tsx b/src/components/ImageGalleryX.tsx similarity index 100% rename from src/components/ImageGallery.tsx rename to src/components/ImageGalleryX.tsx diff --git a/src/components/ImageViewer.tsx b/src/components/ImageViewer.tsx new file mode 100644 index 0000000..7bffcf8 --- /dev/null +++ b/src/components/ImageViewer.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +function ImageViewer({key, url}:{key:string, url:string}) { + return ( + + ) +} + +export default ImageViewer diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx new file mode 100644 index 0000000..b46c480 --- /dev/null +++ b/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 ( + +) +} + +export default VideoPlayer diff --git a/src/components/aaa.tsx b/src/components/aaa.tsx new file mode 100644 index 0000000..446d653 --- /dev/null +++ b/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 {item.alt}; +// } +// if (item.mediaType === "video") { +// return ( +// +// ); +// } +// 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 ( +//
+// +// } +// /> +//
+// ); +// }; + +// export default MantineCarousel +export{} \ No newline at end of file diff --git a/src/components/xxx.tsx b/src/components/xxx.tsx new file mode 100644 index 0000000..033fb29 --- /dev/null +++ b/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 = ({ mediaType }) => { +// const media = useSelector((state: RootState) => state.media); +// const filteredMedia = media.filter((m) => m.type === mediaType); + +// return ( +// +// {filteredMedia.map((m) => +// mediaType === 'video' ? ( +// +// ) : ( +// {m.title} +// ), +// )} +// +// ); +// }; + +// export default MediaCarousel +export{} \ No newline at end of file diff --git a/src/state.ts b/src/state.ts index f2c01fc..3b9ebc4 100644 --- a/src/state.ts +++ b/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;