- Introduced `AudioProvider` with context for managing global mute state and active video. - Added `useAudio` hook to access AudioContext conveniently.
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import type React from "react";
|
|
import { createContext, useCallback, useContext, useState } from "react";
|
|
|
|
interface AudioContextType {
|
|
isGlobalMuted: boolean;
|
|
activeVideoId: string | null;
|
|
toggleGlobalMute: () => void;
|
|
setActiveVideo: (id: string | null) => void;
|
|
}
|
|
|
|
const AudioContext = createContext<AudioContextType | undefined>(undefined);
|
|
|
|
export function AudioProvider({ children }: { children: React.ReactNode }) {
|
|
const [isGlobalMuted, setIsGlobalMuted] = useState(true);
|
|
const [activeVideoId, setActiveVideoId] = useState<string | null>(null);
|
|
|
|
const toggleGlobalMute = useCallback(() => {
|
|
setIsGlobalMuted((prev) => !prev);
|
|
}, []);
|
|
|
|
const setActiveVideo = useCallback((id: string | null) => {
|
|
setActiveVideoId(id);
|
|
if (id !== null) {
|
|
setIsGlobalMuted(false);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<AudioContext.Provider
|
|
value={{ isGlobalMuted, activeVideoId, toggleGlobalMute, setActiveVideo }}
|
|
>
|
|
{children}
|
|
</AudioContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useAudio() {
|
|
const context = useContext(AudioContext);
|
|
if (context === undefined) {
|
|
throw new Error("useAudio must be used within an AudioProvider");
|
|
}
|
|
return context;
|
|
}
|