From f1d82a2955fdd0c526c777aa7ed7b27e28548e49 Mon Sep 17 00:00:00 2001
From: vantage-ola <vantageola4@gmail.com>
Date: Mon, 19 Aug 2024 17:33:22 +0100
Subject: [PATCH] complete: bug fixes

---
 tracknow/web/package-lock.json            | 10 ++++++++++
 tracknow/web/package.json                 |  1 +
 tracknow/web/src/components/Post/Post.tsx |  3 +--
 tracknow/web/src/misc/miscFunctions.tsx   | 23 ++++++++---------------
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/tracknow/web/package-lock.json b/tracknow/web/package-lock.json
index 3d792db..939a8ab 100644
--- a/tracknow/web/package-lock.json
+++ b/tracknow/web/package-lock.json
@@ -28,6 +28,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",
@@ -18752,6 +18753,15 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
+        "node_modules/react-lite-youtube-embed": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz",
+            "integrity": "sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ==",
+            "peerDependencies": {
+                "react": ">=18.2.0",
+                "react-dom": ">=18.2.0"
+            }
+        },
         "node_modules/react-refresh": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
diff --git a/tracknow/web/package.json b/tracknow/web/package.json
index ece843c..acafc0b 100644
--- 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
index c409892..3712fb6 100644
--- 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
index 4f0b6ac..9eeb8fb 100644
--- 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>