From 5ee177e4cf8f0a0b4af83c910260515b46277ca9 Mon Sep 17 00:00:00 2001 From: Mark Hoekveen Date: Sun, 3 Aug 2025 13:56:41 +0200 Subject: [PATCH] nominate animation --- frontend/src/app/layout.tsx | 38 +++++++++++++++++---------- frontend/src/app/nominations/page.tsx | 30 +++++++++++---------- frontend/src/app/style.css | 2 +- 3 files changed, 41 insertions(+), 29 deletions(-) diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 6695f55..7017628 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -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>; +} + +const AnimationContext = createContext( + 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({ - + + + - ); diff --git a/frontend/src/app/nominations/page.tsx b/frontend/src/app/nominations/page.tsx index b8e5772..7be6f5c 100644 --- a/frontend/src/app/nominations/page.tsx +++ b/frontend/src/app/nominations/page.tsx @@ -2,30 +2,32 @@ 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"], }); -async function nominate(spotifyLink: string) { - console.log(spotifyLink); - try { - const response = await api.tracks.nominate({ - spotify_link: spotifyLink, - }); - console.log("Nomination successful:", response); - return { success: true, data: response.data }; - } catch (error) { - console.error("Nomination failed:", error); - return { success: false, error }; - } -} - 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) { + 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); + return { success: false, error }; + } + } return (
diff --git a/frontend/src/app/style.css b/frontend/src/app/style.css index 4d21f84..9dbb716 100644 --- a/frontend/src/app/style.css +++ b/frontend/src/app/style.css @@ -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 {