feat: compression 8

src/pages/assets/compress-videos.tsx

@@ -29,6 +29,7 @@ import toast from 'react-hot-toast'
 
 const PAGE_SIZE = 50
 const QUEUE_STORAGE_KEY = 'videoCompressionQueue'
+const FILTER_STORAGE_KEY = 'videoCompressionFilters'
 
 const formatMB = (bytes?: number | null) => {
   if (bytes == null) return 'Unknown'
@@ -56,6 +57,7 @@ export default function CompressVideosPage() {
   const [appliedMaxSizeMb, setAppliedMaxSizeMb] = useState('')
   const [sortBy, setSortBy] = useState<'date' | 'size'>('date')
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
+  const [filtersLoaded, setFiltersLoaded] = useState(false)
 
   const [queue, setQueue] = useState<IQueueItem[]>([])
   const [queueLoaded, setQueueLoaded] = useState(false)
@@ -122,8 +124,46 @@ export default function CompressVideosPage() {
   }
 
   useEffect(() => {
+    if (!filtersLoaded) return
     loadVideos()
-  }, [page, appliedMinSizeMb, appliedMaxSizeMb, sortBy, sortOrder])
+  }, [page, appliedMinSizeMb, appliedMaxSizeMb, sortBy, sortOrder, filtersLoaded])
+
+  useEffect(() => {
+    try {
+      const storedFilters = localStorage.getItem(FILTER_STORAGE_KEY)
+      if (storedFilters) {
+        const parsed = JSON.parse(storedFilters) as {
+          minSizeMb?: string
+          maxSizeMb?: string
+          sortBy?: 'date' | 'size'
+          sortOrder?: 'asc' | 'desc'
+        }
+
+        const storedMinSizeMb = parsed.minSizeMb ?? ''
+        const storedMaxSizeMb = parsed.maxSizeMb ?? ''
+        setMinSizeMb(storedMinSizeMb)
+        setMaxSizeMb(storedMaxSizeMb)
+        setAppliedMinSizeMb(storedMinSizeMb)
+        setAppliedMaxSizeMb(storedMaxSizeMb)
+        if (parsed.sortBy === 'date' || parsed.sortBy === 'size') setSortBy(parsed.sortBy)
+        if (parsed.sortOrder === 'asc' || parsed.sortOrder === 'desc') setSortOrder(parsed.sortOrder)
+      }
+    } catch {
+      localStorage.removeItem(FILTER_STORAGE_KEY)
+    } finally {
+      setFiltersLoaded(true)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!filtersLoaded) return
+    localStorage.setItem(FILTER_STORAGE_KEY, JSON.stringify({
+      minSizeMb: appliedMinSizeMb,
+      maxSizeMb: appliedMaxSizeMb,
+      sortBy,
+      sortOrder,
+    }))
+  }, [appliedMinSizeMb, appliedMaxSizeMb, sortBy, sortOrder, filtersLoaded])
 
   useEffect(() => {
     loadCompressed()