65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
'use client';
|
|
import React, { createContext, useContext, useState } from 'react';
|
|
import Image from 'next/image';
|
|
import type { ReactNode } from 'react';
|
|
|
|
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;
|
|
};
|
|
|
|
type TVToggleProps = {
|
|
width?: number;
|
|
height?: number;
|
|
};
|
|
|
|
export const TVToggle = ({
|
|
width = 25,
|
|
height = 25,
|
|
}: TVToggleProps) => {
|
|
const { tvMode, toggleTVMode } = useTVMode();
|
|
return (
|
|
<button onClick={toggleTVMode} className='mr-4 mt-1'>
|
|
{tvMode ? (
|
|
<Image
|
|
src='/images/exit_fullscreen.svg'
|
|
alt='Exit TV Mode'
|
|
width={width}
|
|
height={height}
|
|
/>
|
|
) : (
|
|
<Image
|
|
src='/images/fullscreen.svg'
|
|
alt='Enter TV Mode'
|
|
width={width}
|
|
height={height}
|
|
/>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|