From f797e6fff5f6f98ffa0497536098db2519d0ff57 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Thu, 11 Sep 2025 11:00:47 -0500
Subject: [PATCH] Persist page size in localStorage and update page size change
 handler in VODsPage component

---
 frontend/src/pages/VODs.jsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/VODs.jsx b/frontend/src/pages/VODs.jsx
index 13755ba9..16d43a9a 100644
--- a/frontend/src/pages/VODs.jsx
+++ b/frontend/src/pages/VODs.jsx
@@ -274,6 +274,20 @@ const VODsPage = () => {
   const setFilters = useVODStore((s) => s.setFilters);
   const setPage = useVODStore((s) => s.setPage);
   const setPageSize = useVODStore((s) => s.setPageSize);
+
+  // Persist page size in localStorage
+  useEffect(() => {
+    const stored = localStorage.getItem('vodsPageSize');
+    if (stored && !isNaN(Number(stored)) && Number(stored) !== pageSize) {
+      setPageSize(Number(stored));
+    }
+    // eslint-disable-next-line
+  }, []);
+
+  const handlePageSizeChange = (value) => {
+    setPageSize(Number(value));
+    localStorage.setItem('vodsPageSize', value);
+  };
   const fetchMovies = useVODStore((s) => s.fetchMovies);
   const fetchSeries = useVODStore((s) => s.fetchSeries);
   const fetchCategories = useVODStore((s) => s.fetchCategories);
@@ -434,7 +448,7 @@ const VODsPage = () => {
           <Select
             label="Page Size"
             value={String(pageSize)}
-            onChange={(value) => setPageSize(Number(value))}
+            onChange={handlePageSizeChange}
             data={['12', '24', '48', '96'].map((v) => ({
               value: v,
               label: v,