(chore): initial MVP release v0.1.0

src/providers/appContextProvider.tsx

@@ -0,0 +1,21 @@
+import { DownloadState } from '@/types/download';
+import { RawVideoInfo } from '@/types/video';
+import { createContext, useContext } from 'react';
+
+interface AppContextType {
+  fetchVideoMetadata: (url: string, formatId?: string) => Promise<RawVideoInfo | null>;
+  startDownload: (url: string, selectedFormat: string, selectedSubtitles?: string | null, resumeState?: DownloadState, playlistItems?: string) => Promise<void>;
+  pauseDownload: (state: DownloadState) => Promise<void>;
+  resumeDownload: (state: DownloadState) => Promise<void>;
+  cancelDownload: (state: DownloadState) => Promise<void>;
+}
+
+export const AppContext = createContext<AppContextType>({
+  fetchVideoMetadata: async () => (null),
+  startDownload: async () => {},
+  pauseDownload: async () => {},
+  resumeDownload: async () => {},
+  cancelDownload: async () => {}
+});
+
+export const useAppContext = () => useContext(AppContext);

src/providers/tanstackProvider.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+const TanstackProvider = ({children}: {children: React.ReactNode}) => {
+  const queryClient = new QueryClient();
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
+
+export default TanstackProvider

src/providers/themeProvider.tsx

@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}