From 43525ca32a6cf170f672a895f5df5de3c04019d0 Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Sat, 27 Dec 2025 23:49:06 -0800
Subject: [PATCH] Moved RecordingList outside of DVRPage

Helps to prevent renders
---
 frontend/src/pages/DVR.jsx | 46 +++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/DVR.jsx b/frontend/src/pages/DVR.jsx
index b1cc1fe8..7bd6e07f 100644
--- a/frontend/src/pages/DVR.jsx
+++ b/frontend/src/pages/DVR.jsx
@@ -18,16 +18,29 @@ import useSettingsStore from '../store/settings';
 import useVideoStore from '../store/useVideoStore';
 import RecordingForm from '../components/forms/Recording';
 import {
-  isAfter, isBefore,
+  isAfter,
+  isBefore,
   useTimeHelpers,
 } from '../utils/dateTimeUtils.js';
-const RecordingDetailsModal = lazy(() => import('../components/forms/RecordingDetailsModal'));
+const RecordingDetailsModal = lazy(() =>
+  import('../components/forms/RecordingDetailsModal'));
 import RecurringRuleModal from '../components/forms/RecurringRuleModal.jsx';
 import RecordingCard from '../components/cards/RecordingCard.jsx';
 import { categorizeRecordings } from '../utils/pages/DVRUtils.js';
 import { getPosterUrl, getRecordingUrl, getShowVideoUrl } from '../utils/cards/RecordingCardUtils.js';
 import ErrorBoundary from '../components/ErrorBoundary.jsx';
 
+const RecordingList = ({ list, onOpenDetails, onOpenRecurring }) => {
+  return list.map((rec) => (
+    <RecordingCard
+      key={`rec-${rec.id}`}
+      recording={rec}
+      onOpenDetails={onOpenDetails}
+      onOpenRecurring={onOpenRecurring}
+    />
+  ));
+};
+
 const DVRPage = () => {
   const theme = useMantineTheme();
   const recordings = useChannelsStore((s) => s.recordings);
@@ -95,17 +108,6 @@ const DVRPage = () => {
     return categorizeRecordings(recordings, toUserTime, now);
   }, [recordings, now, toUserTime]);
 
-  const RecordingList = ({ list }) => {
-    return list.map((rec) => (
-      <RecordingCard
-        key={`rec-${rec.id}`}
-        recording={rec}
-        onOpenDetails={openDetails}
-        onOpenRecurring={openRuleModal}
-      />
-    ));
-  };
-
   const handleOnWatchLive = () => {
     const rec = detailsRecording;
     const now = userNow();
@@ -168,7 +170,11 @@ const DVRPage = () => {
               { maxWidth: '36rem', cols: 1 },
             ]}
           >
-            {<RecordingList list={inProgress} />}
+            {<RecordingList
+              list={inProgress}
+              onOpenDetails={openDetails}
+              onOpenRecurring={openRuleModal}
+            />}
             {inProgress.length === 0 && (
               <Text size="sm" c="dimmed">
                 Nothing recording right now.
@@ -190,7 +196,11 @@ const DVRPage = () => {
               { maxWidth: '36rem', cols: 1 },
             ]}
           >
-            {<RecordingList list={upcoming} />}
+            {<RecordingList
+              list={upcoming}
+              onOpenDetails={openDetails}
+              onOpenRecurring={openRuleModal}
+            />}
             {upcoming.length === 0 && (
               <Text size="sm" c="dimmed">
                 No upcoming recordings.
@@ -212,7 +222,11 @@ const DVRPage = () => {
               { maxWidth: '36rem', cols: 1 },
             ]}
           >
-            {<RecordingList list={completed} />}
+            {<RecordingList
+              list={completed}
+              onOpenDetails={openDetails}
+              onOpenRecurring={openRuleModal}
+            />}
             {completed.length === 0 && (
               <Text size="sm" c="dimmed">
                 No completed recordings yet.