ShokoAnime · revam · Mar 11, 2025 · Mar 17, 2025 · Mar 17, 2025 · Mar 23, 2025
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -21,6 +21,9 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
+  "globals": {
+    "WEBUI_PREFIX": true
+  },
   "settings": {
     "import/resolver": {
       "typescript": {}
@@ -30,6 +33,9 @@
     }
   },
   "rules": {
+    "@typescript-eslint/comma-dangle": "off", // deprecated rule https://typescript-eslint.io/rules/comma-dangle/
+    "function-paren-newline": "off", // deprecated rule https://eslint.org/docs/latest/rules/function-paren-newline
+    "operator-linebreak": "off", // deprecated rule https://eslint.org/docs/latest/rules/operator-linebreak
     "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/indent": "off",
     "@typescript-eslint/no-floating-promises": [
@@ -93,6 +99,7 @@
       "error",
       { "allow": ["warn", "error"] }
     ],
+    "no-continue": "off",
     "no-param-reassign": [
       "error",
       { "props": true, "ignorePropertyModificationsFor": ["sliceState", "immerState", "draftState", "draftState2", "reduceResult"] }

diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <script>globalThis.WEBUI_PREFIX='/webui';if(!WEBUI_PREFIX.endsWith('/'))WEBUI_PREFIX+='/';</script>
     <meta charset="utf-8">
 <!--     <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
     <title>Shoko</title>

diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "@stylistic/stylelint-plugin": "^3.1.1",
     "@tanstack/eslint-plugin-query": "^5.62.1",
     "@types/format-thousands": "^2.0.3",
+    "@types/json-schema": "^7.0.15",
     "@types/lodash": "^4.17.13",
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Collection/CollectionTitle.tsx b/src/components/Collection/CollectionTitle.tsx
@@ -27,7 +27,7 @@ const CollectionTitle = React.memo(({ count, filterActive, filterName, groupName
   return (
     <div className="flex min-w-0 items-center gap-x-2 text-xl font-semibold">
       <Link
-        to="/webui/collection"
+        to="/collection"
         className={cx((filterName ?? groupName ?? filterActive) ? 'text-panel-text-primary' : 'pointer-events-none')}
       >
         Collection
@@ -36,7 +36,7 @@ const CollectionTitle = React.memo(({ count, filterActive, filterName, groupName
         <>
           <Icon className="flex-none" path={mdiChevronRight} size={1} />
           <Link
-            to={`/webui/collection/group/${groupId}`}
+            to={`/collection/group/${groupId}`}
             className={cx(
               (filterName ?? filterActive) ? 'text-panel-text-primary' : 'pointer-events-none',
               'truncate',

diff --git a/src/components/Collection/DisplaySettingsModal.tsx b/src/components/Collection/DisplaySettingsModal.tsx
@@ -42,7 +42,7 @@ const DisplaySettingsModal = ({ onClose, show }: Props) => {
   });
 
   const handleSave = useEventCallback(() => {
-    patchSettings({ newSettings }, {
+    patchSettings(newSettings, {
       onSuccess: () => onClose(),
     });
   });

diff --git a/src/components/Collection/Episode/EpisodeFiles.tsx b/src/components/Collection/Episode/EpisodeFiles.tsx
@@ -9,7 +9,7 @@ import {
   mdiTrashCanOutline,
 } from '@mdi/js';
 import { Icon } from '@mdi/react';
-import { get, map } from 'lodash';
+import { map } from 'lodash';
 
 import DeleteFilesModal from '@/components/Dialogs/DeleteFilesModal';
 import FileInfo from '@/components/FileInfo';
@@ -92,8 +92,7 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId, seriesId }: Prop
   return (
     <div className="flex flex-col gap-y-6 p-6 pt-4">
       {map(episodeFiles, (file) => {
-        const ReleaseGroupID = get(file, 'AniDB.ReleaseGroup.ID', 0);
-        const ReleaseGroupName = get(file, 'AniDB.ReleaseGroup.Name', null);
+        const releaseGroup = file.Release?.Group;
 
         return (
           <div className="flex flex-col gap-y-6" key={file.ID}>
@@ -141,24 +140,24 @@ const EpisodeFiles = ({ anidbSeriesId, episodeFiles, episodeId, seriesId }: Prop
                   />
                   Copy ShokoID
                 </div>
-                {file.AniDB && (
-                  <a href={`https://anidb.net/file/${file.AniDB.ID}`} target="_blank" rel="noopener noreferrer">
+                {file.Release?.ReleaseURI?.startsWith('https://anidb.net/file/') && (
+                  <a href={file.Release.ReleaseURI} target="_blank" rel="noopener noreferrer">
                     <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
                       <div className="metadata-link-icon AniDB" />
                       AniDB
                       <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                     </div>
                   </a>
                 )}
-                {ReleaseGroupID > 0 && (
+                {releaseGroup && releaseGroup.Source === 'AniDB' && (
                   <a
-                    href={`https://anidb.net/group/${ReleaseGroupID}/anime/${anidbSeriesId}`}
+                    href={`https://anidb.net/group/${releaseGroup.ID}/anime/${anidbSeriesId}`}
                     target="_blank"
                     rel="noopener noreferrer"
                   >
                     <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
                       <div className="metadata-link-icon AniDB" />
-                      {ReleaseGroupName ?? 'Unknown'}
+                      {releaseGroup.Name}
                       &nbsp;(AniDB)
                       <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                     </div>

diff --git a/src/components/Collection/Episode/EpisodeSummary.tsx b/src/components/Collection/Episode/EpisodeSummary.tsx
@@ -96,7 +96,7 @@ const EpisodeSummary = React.memo(
 
     const episodeFilesQuery = useEpisodeFilesQuery(
       episodeId,
-      { includeDataFrom: ['AniDB'], include: ['AbsolutePaths', 'MediaInfo'] },
+      { include: ['AbsolutePaths', 'ReleaseInfo', 'MediaInfo'] },
       open,
     );
     const { isPending: markWatchedPending, mutate: markWatched } = useWatchEpisodeMutation(seriesId, page, nextUp);

diff --git a/src/components/Collection/Series/EditSeriesTabs/DeleteActionsTab.tsx b/src/components/Collection/Series/EditSeriesTabs/DeleteActionsTab.tsx
@@ -14,7 +14,7 @@ const DeleteActionsTab = ({ seriesId }: Props) => {
 
   const { mutate: deleteSeries } = useDeleteSeriesMutation();
 
-  const navigateToCollection = () => navigate('/webui/collection');
+  const navigateToCollection = () => navigate('/collection');
 
   return (
     <div className="flex grow flex-col gap-y-4 overflow-y-auto">

diff --git a/src/components/Collection/SeriesInfo.tsx b/src/components/Collection/SeriesInfo.tsx
@@ -58,7 +58,7 @@ const SeriesInfo = ({ series }: SeriesInfoProps) => {
     const [season, year] = overview.FirstAirSeason.split(' ');
     addFilterCriteriaToStore('InSeason').then(() => {
       dispatch(setFilterValues({ InSeason: [`${year}: ${season}`] }));
-      navigate('/webui/collection/filter/live');
+      navigate('/collection/filter/live');
     }).catch(console.error);
   });
 

diff --git a/src/components/Collection/TagButton.tsx b/src/components/Collection/TagButton.tsx
@@ -23,7 +23,7 @@ const TagButton = React.memo(({ tagType, text, type }: Props) => {
     dispatch(resetFilter());
     addFilterCriteriaToStore('HasTag').then(() => {
       dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] }));
-      navigate('/webui/collection/filter/live');
+      navigate('/collection/filter/live');
     }).catch(console.error);
   });
 

diff --git a/src/components/Collection/Tags/TagDetailsModal.tsx b/src/components/Collection/Tags/TagDetailsModal.tsx
@@ -16,7 +16,7 @@ import type { TagType } from '@/core/types/api/tags';
 
 const SeriesLink = React.memo(({ extraPadding, series }: { series: SeriesType, extraPadding: boolean }) => (
   <Link
-    to={`/webui/collection/series/${series.IDs.ID}`}
+    to={`/collection/series/${series.IDs.ID}`}
     className={cx(
       'flex justify-between align-middle hover:text-panel-text-primary transition-colors',
       extraPadding && ('pr-4'),

diff --git a/src/components/Collection/TimelineSidebar.tsx b/src/components/Collection/TimelineSidebar.tsx
@@ -11,13 +11,13 @@ import type { SeriesType } from '@/core/types/api/series';
 
 const TimelineItem = ({ series }: { series: SeriesType }) => {
   const mainPoster = useMainPoster(series);
-  const seriesType = series.AniDB?.Type === SeriesTypeEnum.TVSpecial
-    ? 'TV Special'
-    : series.AniDB?.Type;
+  let seriesType = series.AniDB?.Type as string | undefined;
+  if (seriesType === SeriesTypeEnum.TVSpecial) seriesType = 'TV Special';
+  else if (seriesType === SeriesTypeEnum.MusicVideo) seriesType = 'Music Video';
 
   return (
     <div className="flex gap-x-3" key={series.IDs.ID}>
-      <Link to={`/webui/collection/series/${series.IDs.ID}`}>
+      <Link to={`/collection/series/${series.IDs.ID}`}>
         <BackgroundImagePlaceholderDiv
           image={mainPoster}
           className="group h-24 w-[4.4375rem] shrink-0 rounded-lg border border-panel-border drop-shadow-md"
@@ -33,7 +33,7 @@ const TimelineItem = ({ series }: { series: SeriesType }) => {
         </div>
         <div className="line-clamp-2">
           <Link
-            to={`/webui/collection/series/${series.IDs.ID}`}
+            to={`/collection/series/${series.IDs.ID}`}
             className="transition-colors hover:text-panel-text-primary"
             data-tooltip-id="tooltip"
             data-tooltip-content={series.Name}

diff --git a/src/components/Collection/Tmdb/TopPanel.tsx b/src/components/Collection/Tmdb/TopPanel.tsx
@@ -86,7 +86,7 @@ const TopPanel = (props: Props) => {
           buttonType="secondary"
           buttonSize="normal"
           className="flex flex-row flex-wrap items-center gap-x-2 py-3"
-          onClick={() => navigate(`/webui/collection/series/${seriesId}`)}
+          onClick={() => navigate(`/collection/series/${seriesId}`)}
         >
           Cancel
         </Button>