chore: add settings saving

components/ModalOpenMedia.tsx

@@ -2,7 +2,9 @@ import { Modal, Group, Button, SimpleGrid, FileInput, Select } from '@mantine/co
 import { useForm } from '@mantine/form'
 import { useDisclosure } from '@mantine/hooks'
 import ISO6391 from 'iso-639-1'
+import { useEffect } from 'react'
 
+import { useLatestRef } from '@/hooks/useLatestRef'
 import { usePlayerStore } from '@/stores/usePlayerStore'
 import { convertToVTT } from '@/utils/convertToVTT'
 
@@ -26,8 +28,8 @@ export function ModalOpenMedia() {
 		initialValues: {
 			video: null,
 			subtitle: null,
-			userLanguage: content.userLanguage,
-			subtitleLanguage: content.subtitleLanguage,
+			userLanguage: '',
+			subtitleLanguage: '',
 		},
 		validate: {
 			video: value => (value ? null : 'You should choose video'),
@@ -36,6 +38,15 @@ export function ModalOpenMedia() {
 		},
 	})
 
+	const latestFormRef = useLatestRef(form)
+
+	useEffect(() => {
+		latestFormRef.current.setValues({
+			userLanguage: content.userLanguage,
+			subtitleLanguage: content.subtitleLanguage,
+		})
+	}, [content.subtitleLanguage, content.userLanguage, latestFormRef])
+
 	return (
 		<>
 			<Modal opened={opened} onClose={close} title="Open media" centered>

hooks/useLatestRef.ts

@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export function useLatestRef<T>(value: T) {
+	const ref = React.useRef(value)
+	React.useEffect(() => {
+		ref.current = value
+	})
+	return ref
+}

pages/_app.tsx

@@ -3,15 +3,22 @@ import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core
 import { useLocalStorage } from '@mantine/hooks'
 import { Notifications } from '@mantine/notifications'
 import type { AppProps } from 'next/app'
+import { useEffect } from 'react'
 
 import { Layout } from '@/components/Layout'
+import { usePlayerStore } from '@/stores/usePlayerStore'
 
 export default function App({ Component, pageProps }: AppProps) {
+	useEffect(() => {
+		usePlayerStore.persist.rehydrate()
+	}, [])
+
 	const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
 		key: 'mantine-color-scheme',
 		defaultValue: 'dark',
 		getInitialValueInEffect: true,
 	})
+
 	const toggleColorScheme = (value?: ColorScheme) =>
 		setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'))
 

stores/usePlayerStore.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
 
 interface ContentPlayer {
 	video: string | null
@@ -12,27 +13,42 @@ interface PlayerStore {
 	setPlayerContent: (content: ContentPlayer) => void
 }
 
-export const usePlayerStore = create<PlayerStore>()((set, get) => ({
-	content: {
-		video: null,
-		subtitle: null,
-		userLanguage: '',
-		subtitleLanguage: '',
-	},
-	setPlayerContent: content =>
-		set(state => {
-			const prevVideo = get().content.video
-			const prevSubtitle = get().content.subtitle
+export const usePlayerStore = create<PlayerStore>()(
+	persist(
+		(set, get) => ({
+			content: {
+				video: null,
+				subtitle: null,
+				userLanguage: '',
+				subtitleLanguage: '',
+			},
+			setPlayerContent: content =>
+				set(state => {
+					const prevVideo = get().content.video
+					const prevSubtitle = get().content.subtitle
 
-			if (prevVideo) URL.revokeObjectURL(prevVideo)
+					if (prevVideo) URL.revokeObjectURL(prevVideo)
 
-			if (prevSubtitle) URL.revokeObjectURL(prevSubtitle)
+					if (prevSubtitle) URL.revokeObjectURL(prevSubtitle)
 
-			return {
+					return {
+						content: {
+							...state.content,
+							...content,
+						},
+					}
+				}),
+		}),
+		{
+			name: 'player-storage',
+			skipHydration: true,
+			partialize: (store: PlayerStore) => ({
 				content: {
-					...state.content,
-					...content,
+					userLanguage: store.content.userLanguage,
+					subtitleLanguage: store.content.subtitleLanguage,
 				},
-			}
-		}),
-}))
+			}),
+			storage: createJSONStorage(() => localStorage),
+		},
+	),
+)