complete: bug fixes

vantage-ola · Aug 19, 2024 · f1d82a2 · f1d82a2
1 parent d82b603
commit f1d82a2
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/tracknow/web/package-lock.json b/tracknow/web/package-lock.json
diff --git a/tracknow/web/package.json b/tracknow/web/package.json
@@ -23,6 +23,7 @@
         "react-dom": "^18.3.1",
         "react-icons": "^3.11.0",
         "react-infinite-scroll-component": "^6.1.0",
+        "react-lite-youtube-embed": "^2.4.0",
         "react-router-dom": "^6.23.1",
         "react-scripts": "5.0.1",
         "react-slick": "^0.30.2",

diff --git a/tracknow/web/src/components/Post/Post.tsx b/tracknow/web/src/components/Post/Post.tsx
@@ -4,8 +4,6 @@ import { GetUserLaptimesResponse } from "../../Types";
 import { RiComputerLine, RiMapPinLine, RiTimerFlashLine } from "react-icons/ri";
 import { FaCar } from "react-icons/fa";
 import miscFunctions from "../../misc/miscFunctions";
-import InfiniteScroll from "react-infinite-scroll-component";
-import { BeatLoader } from "react-spinners";
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { LoadingSpinner } from "../Loading/LoadingSpinner";
 
@@ -20,6 +18,7 @@ type PostProps = {
 export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore }) => {
 
     // intersection observation api instead of the bad infinite scroll component
+    // when the user reach the end of the page, its going to fetch more data
     const observer = React.useRef<IntersectionObserver | null>(null);
     const lastLaptimeRef = React.useCallback((node: HTMLDivElement | null) => {
         if (observer.current) observer.current.disconnect();

diff --git a/tracknow/web/src/misc/miscFunctions.tsx b/tracknow/web/src/misc/miscFunctions.tsx
@@ -1,5 +1,7 @@
 import { AspectRatio, Box } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 
 // get logged in username function
 const useMiscFunctions = () => {
@@ -34,23 +36,14 @@ const useMiscFunctions = () => {
         const youtubeID = getYouTubeId(youtubeLink);
 
         return (
-            <Box mt={1}  >
+            <Box mt={1} style={roundframe}>
 
                 <AspectRatio ratio={16 / 9}>
-                    <iframe
-                        title={`Youtube VideoID: ${youtubeID}`}
-                        style={roundframe}
-                        src={`https://www.youtube.com/embed/${youtubeID}`
-                        }
-                        srcDoc={`<style>
-                            *{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,
-                            span{position:absolute;width:100%;top:0;bottom:0;margin:auto}
-                            span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}
-                            </style>
-                            <a href=https://www.youtube.com/embed/${youtubeID}?autoplay=1>
-                            <img src=https://img.youtube.com/vi/${youtubeID}/hqdefault.jpg><span>▶</span></a>"`}
-                        allowFullScreen
-                    />
+
+                    <LiteYouTubeEmbed
+
+                        id={`${youtubeID}`}
+                        title={`Youtube VideoID: ${youtubeID}`} />
                 </AspectRatio>
 
             </Box>