+ show image alongside yt embed. +media Carousel

vantage-ola · Sep 22, 2024 · baf4f9c · baf4f9c
1 parent 60e1bc6
commit baf4f9c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 9 deletions.
diff --git a/tracknow/web/src/components/Post/MediaCarousel.tsx b/tracknow/web/src/components/Post/MediaCarousel.tsx
@@ -0,0 +1,58 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { GetUserLaptimesResponse } from "../../Types";
+import * as React from "react";
+import miscFunctions from "../../misc/miscFunctions";
+import { Box, Button } from "@chakra-ui/react";
+
+
+type MediaItem = {
+    type: 'youtube' | 'image';
+    content: string;
+};
+
+type MediaCarouselProps = {
+    youtubeLink?: string;
+    image?: string;
+};
+
+const MediaCarousel: React.FC<MediaCarouselProps> = ({ youtubeLink, image }) => {
+
+    const { LazyLoadYoutubeEmbed } = miscFunctions();
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const mediaItems: MediaItem[] = [
+        youtubeLink && { type: 'youtube', content: youtubeLink },
+        image && { type: 'image', content: image }
+    ].filter((item): item is MediaItem => Boolean(item));
+
+    const nextSlide = () => {
+        setCurrentIndex((prevIndex) => (prevIndex + 1) % mediaItems.length);
+    };
+
+    const prevSlide = () => {
+        setCurrentIndex((prevIndex) => (prevIndex - 1 + mediaItems.length) % mediaItems.length);
+    };
+
+    if (mediaItems.length === 0) return null;
+
+    return (
+        <Box position="relative">
+            {mediaItems[currentIndex].type === 'youtube' ? (
+                <LazyLoadYoutubeEmbed youtubeLink={mediaItems[currentIndex].content} />
+            ) : (
+                <Box as="img" src={mediaItems[currentIndex].content} alt="User uploaded image" width="100%" height="auto" objectFit="cover" />
+            )}
+            {mediaItems.length > 1 && (
+                <>
+                    <Button position="absolute" left="0" top="50%" transform="translateY(-50%)" onClick={prevSlide}>
+                        <ChevronLeftIcon />
+                    </Button>
+                    <Button position="absolute" right="0" top="50%" transform="translateY(-50%)" onClick={nextSlide}>
+                        <ChevronRightIcon />
+                    </Button>
+                </>
+            )}
+        </Box>
+    );
+};
+
+export default MediaCarousel;
diff --git a/tracknow/web/src/components/Post/Post.tsx b/tracknow/web/src/components/Post/Post.tsx
@@ -11,6 +11,7 @@ import miscFunctions from "../../misc/miscFunctions";
 import { useLaptimes } from "../../hooks/useLaptimes";
 import { useParams, useNavigate } from "react-router-dom";
 import { Link as ReactRouterLink } from 'react-router-dom';
+import MediaCarousel from "./MediaCarousel";
 
 type PostProps = {
     laptimes: GetUserLaptimesResponse[];
@@ -50,7 +51,7 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
             [id]: !prevState[id],
         }));
     };
-    const { LazyLoadYoutubeEmbed, formatTimeAgo } = miscFunctions();
+    const { formatTimeAgo } = miscFunctions();
     const textLimit = 100;
 
     if (laptimes.length === 0) {
@@ -59,7 +60,7 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
             <LoadingSpinner />
         )
     };
-
+    //console.log(laptimes)
     return (
         <>
             {laptimes.map((laptime, index) => (
@@ -98,9 +99,7 @@ export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore
 
                             </Flex>
                             <Box onClick={(event) => event.preventDefault()}>
-                                {laptime.youtube_link && (
-                                    <LazyLoadYoutubeEmbed youtubeLink={laptime.youtube_link} />
-                                )}
+                                <MediaCarousel youtubeLink={laptime.youtube_link} image={laptime.image} />
                             </Box>
 
                             <Box p={4} >
@@ -255,7 +254,7 @@ export const SelectedPost: React.FC = () => {
     const [laptime, setLaptime] = React.useState<GetUserLaptimesResponse | null>(null);
 
     const navigate = useNavigate();
-    const { LazyLoadYoutubeEmbed, formatTimeAgo } = miscFunctions();
+    const { formatTimeAgo } = miscFunctions();
 
     React.useEffect(() => {
         const fetchData = async () => {
@@ -309,9 +308,7 @@ export const SelectedPost: React.FC = () => {
                     </Flex>
 
                     <Box onClick={(event) => event.preventDefault()}>
-                        {laptime.youtube_link && (
-                            <LazyLoadYoutubeEmbed youtubeLink={laptime.youtube_link} />
-                        )}
+                        <MediaCarousel youtubeLink={laptime.youtube_link} image={laptime.image} />
                     </Box>
 
                     <Box p={4} >