mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

nominate animation

Browse Source
This commit is contained in:
Mark Hoekveen
2025-08-03 13:56:41 +02:00
parent 80eb434cde
commit 5ee177e4cf
3 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/layout.tsx
+19 -9
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import "./style.css"; import "./style.css";
import { useState } from "react"; import { useState, createContext, useContext } from "react";
import { AuthProvider } from "react-oidc-context"; import { AuthProvider } from "react-oidc-context";
import { oidcConfig, userManager } from "muzak/config/auth"; import { oidcConfig, userManager } from "muzak/config/auth";
import { Source_Sans_3, Nunito } from "next/font/google"; 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 NavigationBar from "muzak/components/NavigationBar";
import Quota from "muzak/components/Quota"; import Quota from "muzak/components/Quota";
const sourceSans = Source_Sans_3({ interface AnimationContextType {
weight: ["400"], isAnimate: boolean;
subsets: ["latin"], 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({ const nunito = Nunito({
subsets: ["latin"], subsets: ["latin"],
@@ -52,16 +64,14 @@ export default function RootLayout({
<html lang="en" className={nunito.className}> <html lang="en" className={nunito.className}>
<body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}> <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
<AuthProvider {...oidcConfig}> <AuthProvider {...oidcConfig}>
<AnimationContext.Provider value={{ isAnimate, setIsAnimate }}>
<LayoutContent <LayoutContent
children={children} children={children}
quota={quota} quota={quota}
setQuota={setQuota} setQuota={setQuota}
/> />
</AnimationContext.Provider>
</AuthProvider> </AuthProvider>
<button
className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`}
onClick={toggleAnimation}
></button>
</body> </body>
</html> </html>
); );
frontend/src/app/nominations/page.tsx
+8 -6
View File
@@ -2,19 +2,26 @@
import { useState } from "react"; import { useState } from "react";
import { Nunito } from "next/font/google"; import { Nunito } from "next/font/google";
import { api } from "muzak/data/fetcher"; import { api } from "muzak/data/fetcher";
import { useAnimation } from "../layout";
const nunito = Nunito({ const nunito = Nunito({
weight: "900", weight: "900",
subsets: ["latin"], 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) { async function nominate(spotifyLink: string) {
console.log(spotifyLink);
try { try {
setIsAnimate(false);
const response = await api.tracks.nominate({ const response = await api.tracks.nominate({
spotify_link: spotifyLink, spotify_link: spotifyLink,
}); });
console.log("Nomination successful:", response); console.log("Nomination successful:", response);
setIsAnimate(true);
return { success: true, data: response.data }; return { success: true, data: response.data };
} catch (error) { } catch (error) {
console.error("Nomination failed:", 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 ( return (
<main className="flex min-h-screen flex-col items-center justify-between p-24"> <main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1 <h1
frontend/src/app/style.css
+1 -1
View File
@@ -15,7 +15,7 @@
} }
.bg-game-show.animate { .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 { @keyframes rotate_bg {