Add theme & tvmode

src/components/context/TVMode.tsx

@@ -0,0 +1,59 @@
+'use client';
+import React, { createContext, useContext, useState } from 'react';
+import Image from 'next/image';
+import type { ReactNode } from 'react';
+//import { useSession } from 'next-auth/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;
+};
+
+export const TVToggle = () => {
+  const { tvMode, toggleTVMode } = useTVMode();
+  //const { data: session } = useSession();
+  //if (!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>
+  );
+};