Skeleton pages for library/filler/custom-shows

web2/src/pages/library/CustomShowsPage.tsx

@@ -0,0 +1,60 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import { Link } from 'react-router-dom';
+
+export default function CustomShowsPage() {
+  // Placeholder...
+  const customShows = [];
+  const getTableRows = () => {
+    if (customShows.length === 0) {
+      return (
+        <TableRow>
+          <TableCell sx={{ py: 3, textAlign: 'center' }} colSpan={3}>
+            No Custom Shows!
+          </TableCell>
+        </TableRow>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Box>
+      <Box display="flex" mb={2}>
+        <Typography flexGrow={1} variant="h4">
+          Custom Shows
+        </Typography>
+        <Button
+          component={Link}
+          to="/channels/new"
+          variant="contained"
+          startIcon={<AddCircleIcon />}
+        >
+          New
+        </Button>
+      </Box>
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell># Clips</TableCell>
+              <TableCell></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>{getTableRows()}</TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+}

web2/src/pages/library/FillerListsPage.tsx

@@ -0,0 +1,60 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import { Link } from 'react-router-dom';
+
+export default function FillerListsPage() {
+  // Placeholder...
+  const fillerLists = [];
+  const getTableRows = () => {
+    if (fillerLists.length === 0) {
+      return (
+        <TableRow>
+          <TableCell sx={{ py: 3, textAlign: 'center' }} colSpan={3}>
+            No Filler Lists!
+          </TableCell>
+        </TableRow>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Box>
+      <Box display="flex" mb={2}>
+        <Typography flexGrow={1} variant="h4">
+          Filler Lists
+        </Typography>
+        <Button
+          component={Link}
+          to="/channels/new"
+          variant="contained"
+          startIcon={<AddCircleIcon />}
+        >
+          New
+        </Button>
+      </Box>
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell># Clips</TableCell>
+              <TableCell></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>{getTableRows()}</TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+}

web2/src/pages/library/LibraryIndexPage.tsx

@@ -0,0 +1,39 @@
+import { Box, Paper, Stack, Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+export default function LibraryIndexPage() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Stack direction="column" spacing={2}>
+        <Paper
+          component={Link}
+          to="/library/filler"
+          sx={{ textDecoration: 'none' }}
+        >
+          <Typography variant="h5" mb={1}>
+            Filler&hellip;
+          </Typography>
+          <Typography variant="body1">
+            Filler lists are collections of videos that you may want to play
+            during 'flex' time segments. Flex is time within a channel that does
+            not have a program scheduled (usually used for padding).
+          </Typography>
+        </Paper>
+        <Paper
+          component={Link}
+          to="/library/custom-shows"
+          sx={{ textDecoration: 'none' }}
+        >
+          <Typography variant="h5" mb={1}>
+            Custom Shows&hellip;
+          </Typography>
+          <Typography variant="body1">
+            Custom Shows are sequences of videos that represent a episodes of a
+            virtual TV show. When you add these shows to a channel, the schedule
+            tools will treat the videos as if they belonged to a single TV show.
+          </Typography>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}

web2/src/router.tsx

@@ -10,8 +10,8 @@ import {
   editProgrammingLoader,
   newChannelLoader,
 } from './pages/channels/loaders.ts';
-import CustomShowsPage from './pages/custom-shows/CustomShowsPage.tsx';
-import FillerListsPage from './pages/filler/FillerListsPage.tsx';
+import CustomShowsPage from './pages/library/CustomShowsPage.tsx';
+import FillerListsPage from './pages/library/FillerListsPage.tsx';
 import GuidePage from './pages/guide/GuidePage.tsx';
 import FfmpegSettingsPage from './pages/settings/FfmpegSettingsPage.tsx';
 import PlexSettingsPage from './pages/settings/PlexSettingsPage.tsx';
@@ -20,6 +20,7 @@ import SettingsLayout from './pages/settings/SettingsLayout.tsx';
 import XmlTvSettingsPage from './pages/settings/XmlTvSettingsPage.tsx';
 import { queryCache } from './queryClient.ts';
 import GeneralSettingsPage from './pages/settings/GeneralSettingsPage.tsx';
+import LibraryIndexPage from './pages/library/LibraryIndexPage.tsx';
 
 const queryClient = new QueryClient({ queryCache });
 
@@ -84,6 +85,11 @@ export const router = createBrowserRouter([
       {
         path: '/library',
         children: [
+          {
+            path: '/library',
+            index: true,
+            element: <LibraryIndexPage />,
+          },
           {
             path: '/library/filler',
             element: <FillerListsPage />,