recordings is taken by nginx so refresh fails - change base to recording

web/src/App.jsx

@@ -29,7 +29,7 @@ export default function App() {
                   <AsyncRoute path="/cameras/:camera" getComponent={Routes.getCamera} />
                   <AsyncRoute path="/events/:eventId" getComponent={Routes.getEvent} />
                   <AsyncRoute path="/events" getComponent={Routes.getEvents} />
-                  <AsyncRoute path="/recordings/:camera/:date?/:hour?/:seconds?" getComponent={Routes.getRecording} />
+                  <AsyncRoute path="/recording/:camera/:date?/:hour?/:seconds?" getComponent={Routes.getRecording} />
                   <AsyncRoute path="/debug" getComponent={Routes.getDebug} />
                   <AsyncRoute path="/styleguide" getComponent={Routes.getStyleGuide} />
                   <Cameras default path="/" />

web/src/Sidebar.jsx

@@ -27,15 +27,15 @@ export default function Sidebar() {
           ) : null
         }
       </Match>
-      <Match path="/recordings/:camera/:date?/:hour?/:seconds?">
+      <Match path="/recording/:camera/:date?/:hour?/:seconds?">
         {({ matches }) =>
           matches ? (
             <Fragment>
               <Separator />
               {cameras.map((camera) => (
                 <Destination
-                  path={`/recordings/${camera}/:date?/:hour?/:seconds?`}
-                  href={`/recordings/${camera}`}
+                  path={`/recording/${camera}/:date?/:hour?/:seconds?`}
+                  href={`/recording/${camera}`}
                   text={camera}
                 />
               ))}

web/src/components/RecordingPlaylist.jsx

@@ -29,7 +29,7 @@ export default function RecordingPlaylist({ camera, recordings, selectedDate, se
               }`}
             >
               <div className="flex-1">
-                <Link href={`/recordings/${camera}/${recording.date}/${item.hour}`} type="text">
+                <Link href={`/recording/${camera}/${recording.date}/${item.hour}`} type="text">
                   {item.hour}:00
                 </Link>
               </div>
@@ -87,7 +87,7 @@ export function EventCard({ camera, event, delay }) {
   const duration = addSeconds(new Date(0), differenceInSeconds(end, start));
   const seconds = Math.max(differenceInSeconds(start, startOfHour(start)) - delay - 10, 0);
   return (
-    <Link className="" href={`/recordings/${camera}/${format(start, 'yyyy-MM-dd')}/${format(start, 'HH')}/${seconds}`}>
+    <Link className="" href={`/recording/${camera}/${format(start, 'yyyy-MM-dd')}/${format(start, 'HH')}/${seconds}`}>
       <div className="flex flex-row mb-2">
         <div className="w-28 mr-4">
           <img className="antialiased" src={`${apiHost}/api/events/${event.id}/thumbnail.jpg`} />

web/src/routes/Cameras.jsx

@@ -30,7 +30,7 @@ function Camera({ name }) {
   const href = `/cameras/${name}`;
   const buttons = useMemo(() => [
     { name: 'Events', href: `/events?camera=${name}` },
-    { name: 'Recordings', href: `/recordings/${name}` }
+    { name: 'Recordings', href: `/recording/${name}` }
   ], [name]);
   const icons = useMemo(
     () => [