Improve series support

web/src/features/file/FileBrowser.tsx

@@ -1,8 +1,8 @@
 import { Grid, Typography, styled } from "@mui/material";
 import React from "react";
 
-import { sortBy } from "lodash";
 import { FileAddressBar } from "./FileAddressBar";
+import { FileContentSeries } from "./FileContentSeries";
 import { FileListBrowser, FileListBrowserProps } from "./FileListBrowser";
 import { FileListItemCallbacks } from "./FileListItem";
 import { FileTree } from "./FileTree";
@@ -41,9 +41,19 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
   const entry = getFileEntryAt(root, dir, false);
   const entries =
     entry?.fetched &&
-    entry?.type !== "series" &&
+    entry.type !== "series" &&
     entry.children.toSorted(sortFileEntries);
 
+  if (entry?.type === "series") {
+    return (
+      <Grid container>
+        <Grid item xs={12}>
+          <FileContentSeries entry={entry} />
+        </Grid>
+      </Grid>
+    );
+  }
+
   return (
     <Grid container marginTop="1em">
       <Grid item xs={12}>

web/src/features/file/FileContentSeries.tsx

@@ -0,0 +1,58 @@
+import { Grid, Pagination } from "@mui/material";
+import { observer } from "mobx-react-lite";
+import React, { useState } from "react";
+import { useStores } from "../../hooks";
+import { MediaContentView } from "../media/MediaContentView";
+import { FileTreeEntry, sortFileEntries } from "./FileTreeEntry";
+
+interface FileContentSeriesProps {
+  entry: FileTreeEntry;
+}
+
+export const FileContentSeries: React.FC<FileContentSeriesProps> = observer(
+  ({ entry }) => {
+    const { authStore } = useStores();
+    const [index, setIndex] = useState(0);
+
+    if (!authStore.token || !entry.fetched) {
+      return null;
+    }
+
+    const children = entry.children.toSorted(sortFileEntries);
+
+    const handleClick = () => {
+      setIndex((prev) => Math.min(children.length - 1, prev + 1));
+      window.scrollTo(0, 0);
+    };
+
+    const handlePageChange = (
+      evt: React.ChangeEvent<unknown>,
+      page: number,
+    ) => {
+      setIndex(page - 1);
+      window.scrollTo(0, 0);
+    };
+
+    const selected = children[index];
+
+    return (
+      <Grid container direction="column" alignItems="center">
+        <Grid item>
+          <MediaContentView
+            entry={selected}
+            token={authStore.token}
+            onClick={handleClick}
+          />
+        </Grid>
+        <Grid item>
+          <Pagination
+            page={index + 1}
+            onChange={handlePageChange}
+            count={children.length}
+            sx={{ textAlign: "center" }}
+          />
+        </Grid>
+      </Grid>
+    );
+  },
+);

web/src/features/file/FileListItem.tsx

@@ -61,7 +61,7 @@ export const FileListItem: React.FC<FileListItemProps> = ({
   const [hover, setHover] = useState(false);
 
   const handleClick = () => {
-    if (entry.type === "directory") {
+    if (entry.type !== "file") {
       onDirChange(entry.path ?? "");
     } else {
       onFileOpen(entry);
@@ -83,7 +83,7 @@ export const FileListItem: React.FC<FileListItemProps> = ({
     <Grid
       container
       alignItems="center"
-      sx={entry.type === "directory" ? { cursor: "pointer" } : {}}
+      sx={entry.type !== "file" ? { cursor: "pointer" } : {}}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >

web/src/features/media/MediaBrowser.tsx

@@ -18,7 +18,6 @@ import { FileBrowser } from "../file/FileBrowser";
 import { FileTreeEntry, getFileEntryAt } from "../file/FileTreeEntry";
 import { RexLink } from "../utils/RexLink";
 import { MediaContentView } from "./MediaContentView";
-import { MediaSeries } from "./MediaSeries";
 
 export const mediaItemToEntry = ({ key, type }: IMediaItem): FileTreeEntry => ({
   fetched: type === IMediaItemType.File,
@@ -67,6 +66,9 @@ export const MediaBrowser: React.FC<MediaBrowserProps> = observer(({ dir }) => {
           throw new Error(`Key ${dir} does not exist`);
         }
         const entry = getFileEntryAt(root, dir, true);
+        if (mediaItem.type === IMediaItemType.Series) {
+          entry.type = "series";
+        }
         entry.children = children
           ?.filter((i) => !i.key.startsWith("."))
           .map((i) => cloneDeep(mediaItemToEntry(i)));
@@ -165,13 +167,10 @@ export const MediaBrowser: React.FC<MediaBrowserProps> = observer(({ dir }) => {
       dir={dir}
       root={root}
       content={
-        selected && authStore.token ? (
-          selected.type === "series" ? (
-            <MediaSeries entry={selected} />
-          ) : (
-            <MediaContentView entry={selected} token={authStore.token} />
-          )
-        ) : undefined
+        selected &&
+        authStore.token && (
+          <MediaContentView entry={selected} token={authStore.token} />
+        )
       }
       onDelete={(entry) => deleteFile(entry).catch(status.error)}
       onDirChange={changeDir}