nominate animation

2025-08-03 13:56:41 +02:00
parent 80eb434cde
commit 5ee177e4cf
3 changed files with 41 additions and 29 deletions
@@ -1,6 +1,6 @@
 "use client";
 import "./style.css";
-import { useState } from "react";
+import { useState, createContext, useContext } from "react";
 import { AuthProvider } from "react-oidc-context";
 import { oidcConfig, userManager } from "muzak/config/auth";
 import { Source_Sans_3, Nunito } from "next/font/google";
@@ -8,10 +8,22 @@ import AuthStatus from "muzak/components/AuthStatus";
 import NavigationBar from "muzak/components/NavigationBar";
 import Quota from "muzak/components/Quota";

-const sourceSans = Source_Sans_3({
-  weight: ["400"],
-  subsets: ["latin"],
-});
+interface AnimationContextType {
+  isAnimate: boolean;
+  setIsAnimate: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const AnimationContext = createContext<AnimationContextType | undefined>(
+  undefined,
+);
+
+export const useAnimation = () => {
+  const context = useContext(AnimationContext);
+  if (context === undefined) {
+    throw new Error("useAnimation must be used within an AnimationProvider");
+  }
+  return context;
+};

 const nunito = Nunito({
  subsets: ["latin"],
@@ -52,16 +64,14 @@ export default function RootLayout({
    <html lang="en" className={nunito.className}>
      <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
        <AuthProvider {...oidcConfig}>
+          <AnimationContext.Provider value={{ isAnimate, setIsAnimate }}>
            <LayoutContent
              children={children}
              quota={quota}
              setQuota={setQuota}
            />
+          </AnimationContext.Provider>
        </AuthProvider>
-        <button
-          className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`}
-          onClick={toggleAnimation}
-        ></button>
      </body>
    </html>
  );
@@ -2,19 +2,26 @@
 import { useState } from "react";
 import { Nunito } from "next/font/google";
 import { api } from "muzak/data/fetcher";
+import { useAnimation } from "../layout";

 const nunito = Nunito({
  weight: "900",
  subsets: ["latin"],
 });

+export default function Nominations() {
+  const { isAnimate, setIsAnimate } = useAnimation();
+  const [songURL, setSongURL] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState("");
  async function nominate(spotifyLink: string) {
-  console.log(spotifyLink);
    try {
+      setIsAnimate(false);
      const response = await api.tracks.nominate({
        spotify_link: spotifyLink,
      });
      console.log("Nomination successful:", response);
+      setIsAnimate(true);
      return { success: true, data: response.data };
    } catch (error) {
      console.error("Nomination failed:", error);
@@ -22,11 +29,6 @@ async function nominate(spotifyLink: string) {
    }
  }

-export default function Nominations() {
-  const [songURL, setSongURL] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [message, setMessage] = useState("");
-
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1
@@ -15,7 +15,7 @@
 }

 .bg-game-show.animate {
-  animation: rotate_bg 5s cubic-bezier(0.55, 0.45, 0.45, 0.55) infinite;
+  animation: rotate_bg 1.5s ease-in-out;
 }

@keyframes rotate_bg {