From 8a0e5dc356964f737ed9dcf8fd9f0d141e00a5b7 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sat, 3 Aug 2024 21:49:18 +1000
Subject: [PATCH] fixed video bugs

---
 src/components/sections/MoreProjects.svelte   | 191 ++++++++++++++++++
 .../sections/ProjectsComponent.svelte         |  17 +-
 src/pages/projects.astro                      | 162 +++------------
 3 files changed, 226 insertions(+), 144 deletions(-)
 create mode 100644 src/components/sections/MoreProjects.svelte

diff --git a/src/components/sections/MoreProjects.svelte b/src/components/sections/MoreProjects.svelte
new file mode 100644
index 0000000..a6a9719
--- /dev/null
+++ b/src/components/sections/MoreProjects.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        const videos = document.querySelectorAll<HTMLVideoElement>(".playable");
+
+        videos.forEach((video) => {
+            // Ensure the video element supports play and pause methods
+            if (
+                typeof video.play === "function" &&
+                typeof video.pause === "function"
+            ) {
+                video.addEventListener("mouseenter", () => {
+                    video.play();
+                });
+
+                video.addEventListener("mouseleave", () => {
+                    video.pause();
+                    video.currentTime = 0;
+                });
+            }
+
+            videos.forEach((video) => {
+                if (window.innerWidth < 1025) {
+                    video.muted = true;
+                    video.play();
+                }
+            });
+        });
+
+        // On screen size change
+        window.addEventListener("resize", () => {
+            videos.forEach((video) => {
+                if (window.innerWidth < 1025) {
+                    video.muted = true;
+                    video.play();
+                }
+            });
+        });
+    });
+</script>
+
+<div class="h-fit pt-20 [perspective:1000px] flex flex-col items-center">
+    <div class="w-full max-w-[1440px]">
+        <div
+            class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
+        >
+            <div
+                class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
+            >
+                <!-- svelte-ignore a11y-media-has-caption -->
+                <video
+                    class="absolute max-w-full
+                    top-1/2 left-1/2
+                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
+                    border-2 border-solid border-white rounded-xl"
+                    width="700"
+                >
+                    <source
+                        src="/videos/chess_opencv_demo.webm"
+                        type="video/webm"
+                    />
+                </video>
+                <!-- svelte-ignore a11y-media-has-caption -->
+                <video
+                    width="700"
+                    class="playable absolute max-w-full
+							top-1/2 left-1/2
+							[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
+							border-2 border-solid border-white rounded-xl"
+                >
+                    <source
+                        src="/videos/chess_opencv_demo.webm"
+                        type="video/webm"
+                    />
+                </video>
+            </div>
+            <div
+                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
+            >
+                <h2 class="text-3xl font-bold mb-5 text-center lg:text-left">
+                    Computer Vision Chess bot
+                </h2>
+                <p
+                    class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
+                >
+                    A script that plays against opponents on lichess. Uses
+                    OpenCV to detect the board and pieces, and the Stockfish
+                    chess engine to determine the best moves. Then uses
+                    PyAutoGUI to play the moves on the browser.
+                </p>
+                <div
+                    class="w-full flex flex-row flex-wrap lg:justify-start justify-center mt-5"
+                >
+                    <div
+                        class="w-fit bg-[#3776AB] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+                    >
+                        Python
+                    </div>
+                    <div
+                        class="w-fit bg-[#3178C6] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+                    >
+                        OpenCV
+                    </div>
+                    <div
+                        class="w-fit bg-black text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+                    >
+                        PyAutoGUI
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
+        >
+            <div
+                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
+            >
+                <h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
+                    Computer Vision AimLab Bot
+                </h2>
+                <p
+                    class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
+                >
+                    A script that plays AimLab, a game that helps improve your
+                    aim in FPS games. Uses OpenCV to detect the targets and
+                    win32API to move the mouse and click.
+                </p>
+                <div
+                    class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
+                >
+                    <div
+                        class="w-fit bg-[#3776AB] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+                    >
+                        Python
+                    </div>
+                    <div
+                        class="w-fit bg-[#0078D4] text-white
+                                rounded-full px-3 py-1 mr-1 my-1
+                                transition-colors duration-300"
+                    >
+                        win32API
+                    </div>
+                </div>
+            </div>
+            <div
+                class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
+            >
+                <!-- svelte-ignore a11y-media-has-caption -->
+                <video
+                    src="/videos/aim_lab_demo.webm"
+                    class="absolute max-w-full
+                    top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
+                    border-2 border-solid border-white rounded-xl"
+                    width="700"
+                >
+                    <source src="/videos/aim_lab_demo.webm" /></video
+                >
+                <!-- svelte-ignore a11y-media-has-caption -->
+                <video
+                    width="700"
+                    class="playable absolute max-w-full
+                    top-1/2 left-1/2
+                    [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1
+                    border-2 border-solid border-white rounded-xl"
+                    ><source src="/videos/aim_lab_demo.webm" /></video
+                >
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .image-container video {
+        transition: transform 0.5s ease-in-out;
+    }
+    @media (min-width: 1025px) {
+        .image-container:hover > video {
+            transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
+                translateX(-50%) translateY(-50%);
+        }
+    }
+</style>
diff --git a/src/components/sections/ProjectsComponent.svelte b/src/components/sections/ProjectsComponent.svelte
index e804dcd..cbc9fcc 100644
--- a/src/components/sections/ProjectsComponent.svelte
+++ b/src/components/sections/ProjectsComponent.svelte
@@ -295,7 +295,9 @@
                     range of topics from tips on how to get started with setting
                     up stream to how to grow your audience!
                 </p>
-                <div class="w-full flex flex-row flex-wrap mt-5">
+                <div
+                    class="w-full flex flex-row flex-wrap justify-center lg:justify-left mt-5"
+                >
                     <div
                         class="w-fit bg-white text-black
                                 rounded-full px-3 py-1 mr-1 my-1
@@ -337,7 +339,9 @@
                     Easy to setup and the customization possibilities are
                     endless!
                 </p>
-                <div class="w-full flex flex-row flex-wrap justify-end mt-5">
+                <div
+                    class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
+                >
                     <div
                         class="w-fit bg-[#E34F26] text-white
                                 rounded-full px-3 py-1 mr-1 my-1
@@ -558,7 +562,9 @@
                     receive instant feedback! Built with Next.JS, TailwindCSS
                     and TypeScript.
                 </p>
-                <div class="w-full flex flex-row flex-wrap justify-start mt-5">
+                <div
+                    class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
+                >
                     <div
                         class="w-fit bg-black text-white
                                 rounded-full px-3 py-1 mr-1 my-1
@@ -600,7 +606,9 @@
                     and the Python program will trigger the corresponding
                     keypresses.
                 </p>
-                <div class="w-full flex flex-row flex-wrap justify-end mt-5">
+                <div
+                    class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
+                >
                     <div
                         class="w-fit bg-[#3776AB] text-white
                                 rounded-full px-3 py-1 mr-1 my-1
@@ -624,7 +632,6 @@
                     class="
                         px-5 py-3 bg-blue-500 rounded-xl opacity-1
                         font-bold
-                        hidden lg:block
                         transition-colors duration-300
                         hover:bg-white hover:text-blue-500
                         ">View repository</a
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 2fa228b..c99a1cb 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -2,6 +2,7 @@
 import NavBar from "../components/sections/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
+import MoreProjects from "../components/sections/MoreProjects.svelte";
 ---
 
 <Layout title="Projects" description="View what projects RythonDev has made">
@@ -9,145 +10,11 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
 	<div id="projects" class="pt-20">
 		<h1 class="text-5xl text-center mt-10">Projects</h1>
 		<!-- other projects -->
-		<div
-			class="h-fit pt-20 [perspective:1000px] flex flex-col items-center"
-		>
-			<div class="w-full max-w-[1440px]">
-				<div
-					class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
-				>
-					<div
-						class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
-					>
-						<video
-							class="absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
-                    border-2 border-solid border-white rounded-xl"
-							width="700"
-						>
-							<source
-								src="/videos/chess_opencv_demo.webm"
-								type="video/webm"
-							/></video
-						>
-						<video
-							width="700"
-							class="playable absolute max-w-full
-							top-1/2 left-1/2
-							[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
-							border-2 border-solid border-white rounded-xl"
-						>
-							<source
-								src="/videos/chess_opencv_demo.webm"
-								type="video/webm"
-							/>
-						</video>
-					</div>
-					<div
-						class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
-					>
-						<h2
-							class="text-3xl font-bold mb-5 text-center lg:text-left"
-						>
-							Computer Vision Chess bot
-						</h2>
-						<p
-							class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
-						>
-							A script that plays against opponents on lichess.
-							Uses OpenCV to detect the board and pieces, and the
-							Stockfish chess engine to determine the best moves.
-							Then uses PyAutoGUI to play the moves on the
-							browser.
-						</p>
-						<div class="w-full flex flex-row flex-wrap mt-5">
-							<div
-								class="w-fit bg-[#3776AB] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-							>
-								Python
-							</div>
-							<div
-								class="w-fit bg-[#3178C6] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-							>
-								OpenCV
-							</div>
-							<div
-								class="w-fit bg-black text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-							>
-								PyAutoGUI
-							</div>
-						</div>
-					</div>
-				</div>
-				<div
-					class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
-				>
-					<div
-						class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
-					>
-						<h2
-							class="text-3xl font-bold mb-5 lg:text-right text-center"
-						>
-							Computer Vision AimLab Bot
-						</h2>
-						<p
-							class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
-						>
-							A script that plays AimLab, a game that helps
-							improve your aim in FPS games. Uses OpenCV to detect
-							the targets and win32API to move the mouse and
-							click.
-						</p>
-						<div
-							class="w-full flex flex-row flex-wrap justify-end mt-5"
-						>
-							<div
-								class="w-fit bg-[#3776AB] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-							>
-								Python
-							</div>
-							<div
-								class="w-fit bg-[#0078D4] text-white
-                                rounded-full px-3 py-1 mr-1 my-1
-                                transition-colors duration-300"
-							>
-								win32API
-							</div>
-						</div>
-					</div>
-					<div
-						class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
-					>
-						<video
-							src="/videos/aim_lab_demo.webm"
-							class="absolute max-w-full
-                    top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
-                    border-2 border-solid border-white rounded-xl"
-							width="700"></video>
-						<video
-							src="/videos/aim_lab_demo.webm"
-							width="700"
-							class="playable absolute max-w-full
-                    top-1/2 left-1/2
-                    [transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1
-                    border-2 border-solid border-white rounded-xl"
-						></video>
-					</div>
-				</div>
-			</div>
-		</div>
+		<MoreProjects client:load />
+	</div>
+	<div class="pb-20">
+		<ProjectsComponent client:load />
 	</div>
-
-	<ProjectsComponent />
 </Layout>
 
 <style>
@@ -198,7 +65,7 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
 	}
 </style>
 
-<script is:inline lang="ts">
+<script is:inline>
 	document.addEventListener("DOMContentLoaded", () => {
 		const videos = document.querySelectorAll(".playable");
 
@@ -217,6 +84,23 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
 					video.currentTime = 0;
 				});
 			}
+
+			videos.forEach((video) => {
+				if (window.innerWidth < 1025) {
+					video.muted = true;
+					video.play();
+				}
+			});
+		});
+
+		// on screensize change
+		window.addEventListener("resize", () => {
+			videos.forEach((video) => {
+				if (window.innerWidth < 1025) {
+					video.muted = true;
+					// video.play();
+				}
+			});
 		});
 	});
 </script>