Add GBA bios style intro animation component

README.md

@@ -28,6 +28,7 @@ _No ROMs are provided with wasmGBA. Users must supply their own backups of their
   - [ ] Add and remove cheats from active .cheats file
   - [ ] Activate and Deactivate cheats from active .cheats file
 - [ ] Gameplay
+  - [ ] Intro animation
   - [ ] Pause and unpause
   - [ ] Fast-forward
   - [ ] Audio
@@ -43,7 +44,7 @@ _No ROMs are provided with wasmGBA. Users must supply their own backups of their
 
 ## Usage
 
-A demo tracking this repository's `main` branch is hosted via [GitHub Pages](https://ethanl21.github.io/wasmGBA/).
+A demo tracking the latest tagged commit is hosted via [GitHub Pages](https://ethanl21.github.io/wasmGBA/).
 
 ### Building
 
@@ -75,3 +76,6 @@ wasmGBA is distributed under the MIT License. Additionally, the following open s
 | tailwindcss | MIT | https://github.com/tailwindlabs/tailwindcss |
 | shadcn/ui | MIT | https://github.com/shadcn/ui |
 | vite | MIT | https://github.com/vitejs/vite.git |
+
+#### Other
+- [Game Boy Advance Intro - After Effects Template Type Beat](https://www.youtube.com/watch?v=Hjax6bX2x2Q) by Cyranek, used for the intro animation [(archive.org 📸)](https://web.archive.org/web/20230418164951/https://www.youtube.com/watch?v=Hjax6bX2x2Q)

src/components/wasmgba/IntroAnimationPlayer.tsx

@@ -0,0 +1,37 @@
+import { forwardRef, useState } from "react";
+import BiosAnimation from "../../assets/bios_animation.mp4";
+
+interface IntroAnimationPlayerProps {
+  onVideoEnded?: () => void;
+}
+const IntroAnimationPlayerPlayer = forwardRef(function _introAnimationPlayer(
+  { onVideoEnded = () => {} }: IntroAnimationPlayerProps,
+  ref: React.Ref<HTMLVideoElement>
+) {
+  const [isVideoEnded, setIsVideoEnded] = useState(false);
+  const handleVideoEnded = () => {
+    setIsVideoEnded(true);
+    onVideoEnded();
+  };
+
+  return (
+    <>
+      <video
+        className={
+          isVideoEnded
+            ? "transition-opacity ease-out duration-700 opacity-0"
+            : "transition-opacity ease-in duration-100 opacity-100"
+        }
+        preload="auto"
+        ref={ref}
+        onEnded={handleVideoEnded}
+        onPlay={() => setIsVideoEnded(false)}
+      >
+        <source src={BiosAnimation} type="video/mp4" />
+        Your browser does not support HTML5 video.
+      </video>
+    </>
+  );
+});
+
+export default IntroAnimationPlayerPlayer;

src/stories/Components/IntroAnimationPlayer.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import IntroAnimationPlayer from "@/components/wasmgba/IntroAnimationPlayer";
+import { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+const meta: Meta<typeof IntroAnimationPlayer> = {
+  component: IntroAnimationPlayer,
+  argTypes: {
+    onVideoEnded: {
+      action: "videoEnded",
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    onVideoEnded: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col justify-center items-center space-y-2">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IntroAnimationPlayer>;
+export const Default: Story = {
+  render: ({ ...args }) => {
+    const playerRef = useRef<HTMLVideoElement | null>(null);
+
+    return (
+      <>
+      <span onClick={() => playerRef.current?.play()}
+      className="border-2">
+        <IntroAnimationPlayer
+          ref={playerRef}
+          onVideoEnded={args.onVideoEnded}
+        />
+        </span>
+        {/* <Button onClick={() => playerRef.current?.play()}>Play</Button> */}
+      </>
+    );
+  },
+};