98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
'use client';
|
|
import React, { createContext, useContext, useState, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
import type { ReactNode } from 'react';
|
|
import type { Session } from '@supabase/supabase-js';
|
|
import { createClient } from '@/utils/supabase/client';
|
|
|
|
interface TVModeContextProps {
|
|
tvMode: boolean;
|
|
toggleTVMode: () => void;
|
|
}
|
|
|
|
const TVModeContext = createContext<TVModeContextProps | undefined>(undefined);
|
|
|
|
export const TVModeProvider = ({ children }: { children: ReactNode }) => {
|
|
const [tvMode, setTVMode] = useState(false);
|
|
|
|
const toggleTVMode = () => {
|
|
setTVMode((prev) => !prev);
|
|
};
|
|
|
|
return (
|
|
<TVModeContext.Provider value={{ tvMode, toggleTVMode }}>
|
|
{children}
|
|
</TVModeContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useTVMode = () => {
|
|
const context = useContext(TVModeContext);
|
|
if (!context) {
|
|
throw new Error('useTVMode must be used within a TVModeProvider');
|
|
}
|
|
return context;
|
|
};
|
|
|
|
export const TVToggle = () => {
|
|
const { tvMode, toggleTVMode } = useTVMode();
|
|
const supabase = createClient();
|
|
const [session, setSession] = useState<Session | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
// Function to fetch the session
|
|
async function fetchSession() {
|
|
try {
|
|
const {
|
|
data: { session },
|
|
} = await supabase.auth.getSession();
|
|
setSession(session);
|
|
} catch (error) {
|
|
console.error('Error fetching session:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
// Call the function
|
|
fetchSession().catch((error) => {
|
|
console.error('Error fetching session:', error);
|
|
});
|
|
|
|
// Set up auth state change listener
|
|
const {
|
|
data: { subscription },
|
|
} = supabase.auth.onAuthStateChange((_event, session) => {
|
|
setSession(session);
|
|
});
|
|
|
|
// Clean up the subscription when component unmounts
|
|
return () => {
|
|
subscription.unsubscribe();
|
|
};
|
|
}, [supabase]);
|
|
|
|
if (loading || !session) return <div />;
|
|
|
|
return (
|
|
<button onClick={toggleTVMode} className='mr-4 mt-1'>
|
|
{tvMode ? (
|
|
<Image
|
|
src='/images/exit_fullscreen.svg'
|
|
alt='Exit TV Mode'
|
|
width={25}
|
|
height={25}
|
|
/>
|
|
) : (
|
|
<Image
|
|
src='/images/fullscreen.svg'
|
|
alt='Enter TV Mode'
|
|
width={25}
|
|
height={25}
|
|
/>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|