feat: Added support for new theme groups (#207)

* feat: Added support for new theme groups

* Anime pages no show themes from all groups by default.
* Playlist summary cards no longer show the visibility if a user is given.
* Removed usages of theme slug field.

src/components/bracket/BracketThemeSummaryCard.tsx

@@ -54,7 +54,7 @@ export function BracketThemeSummaryCard({ contestant, isVoted, isWinner, seed, v
 
         description = (
             <SummaryCard.Description>
-                <span>{theme.slug}</span>
+                <span>{theme.type + (theme.sequence || "")}</span>
                 <TextLink href={`/anime/${theme.anime.slug}`}>{theme.anime.name}</TextLink>
             </SummaryCard.Description>
         );

src/components/button/VideoButton.tsx

@@ -49,22 +49,27 @@ VideoButton.fragments = {
         }
     `,
     theme: gql`
+        ${createVideoSlug.fragments.theme}
+
         fragment VideoButtonTheme on Theme {
-            slug
+            ...createVideoSlugTheme
         }
     `,
     entry: gql`
+        ${createVideoSlug.fragments.entry}
+
         fragment VideoButtonEntry on Entry {
-            version
+            ...createVideoSlugEntry
         }
     `,
     video: gql`
+        ${createVideoSlug.fragments.video}
         ${VideoTags.fragments.video}
         
         fragment VideoButtonVideo on Video {
+            ...createVideoSlugVideo
             ...VideoTagsVideo
             id
-            tags
         }
     `,
 };

src/components/card/AnimeSummaryCard.tsx

@@ -8,7 +8,7 @@ import { SummaryCard } from "components/card";
 import styled from "styled-components";
 import useToggle from "hooks/useToggle";
 import theme from "theme";
-import { uniq } from "lodash-es";
+import { uniqBy } from "lodash-es";
 import { Collapse } from "components/utils";
 import { ThemeTable } from "components/table";
 import useMediaQuery from "hooks/useMediaQuery";
@@ -71,7 +71,7 @@ export function AnimeSummaryCard({ anime, expandable = false, ...props }: AnimeS
     const { smallCover } = extractImages(anime);
     const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.mobileMax})`);
 
-    const groups = uniq(anime.themes.map((theme) => theme.group));
+    const groups = uniqBy(anime.themes.map((theme) => theme.group), (group) => group?.slug);
 
     const animeLink = `/anime/${anime.slug}`;
 
@@ -137,11 +137,11 @@ export function AnimeSummaryCard({ anime, expandable = false, ...props }: AnimeS
                 <Collapse collapse={!isExpanded}>
                     <StyledThemeGroupContainer>
                         {groups.map((group) => (
-                            <Fragment key={group}>
+                            <Fragment key={group?.slug}>
                                 {!!group && (
-                                    <Text variant="h2">{group}</Text>
+                                    <Text variant="h2">{group.name}</Text>
                                 )}
-                                <ThemeTable themes={(anime as AnimeSummaryCardAnimeExpandableFragment).themes.filter((theme) => theme.group === group)}/>
+                                <ThemeTable themes={(anime as AnimeSummaryCardAnimeExpandableFragment).themes.filter((theme) => theme.group?.slug === group?.slug)}/>
                             </Fragment>
                         ))}
                     </StyledThemeGroupContainer>
@@ -163,7 +163,10 @@ AnimeSummaryCard.fragments = {
             season
             media_format
             themes {
-                group
+                group {
+                    name
+                    slug
+                }
             }
         }
     `,
@@ -173,7 +176,10 @@ AnimeSummaryCard.fragments = {
         fragment AnimeSummaryCardAnimeExpandable on Anime {
             themes {
                 ...ThemeTableTheme
-                group
+                group {
+                    name
+                    slug
+                }
             }
         }
     `

src/components/card/PlaylistSummaryCard.tsx

@@ -43,10 +43,11 @@ export default function PlaylistSummaryCard({ playlist, children, menu, showOwne
     const description = (
         <SummaryCard.Description>
             <span>Playlist</span>
-            <span>{playlist.visibility}</span>
             {showOwner ? (
                 <Text link>{playlist.user.name}</Text>
-            ) : null}
+            ) : (
+                <span>{playlist.visibility}</span>
+            )}
             <span>{playlist.tracks_count} theme{playlist.tracks_count !== 1 ? "s" : null}</span>
         </SummaryCard.Description>
     );

src/components/card/ThemeDetailCard.tsx

@@ -97,10 +97,12 @@ ThemeDetailCard.fragments = {
         
         fragment ThemeDetailCardTheme on Theme {
             ...ThemeMenuTheme
-            slug
             type
             sequence
-            group
+            group {
+                name
+                slug
+            }
             anime {
                 slug
                 name

src/components/card/ThemeSummaryCard.tsx

@@ -120,7 +120,7 @@ export function ThemeSummaryCard({ theme, artist, children, expandable, onPlay,
                         <Performances song={theme.song} artist={artist} />
                     </SummaryCard.Title>
                     <SummaryCard.Description>
-                        <span>{theme.type}{theme.sequence || null}{theme.group && ` (${theme.group})`}</span>
+                        <span>{theme.type}{theme.sequence || null}{theme.group && ` (${theme.group.name})`}</span>
                         <TextLink href={`/anime/${anime.slug}`}>{anime.name}</TextLink>
                     </SummaryCard.Description>
                 </SummaryCard.Body>
@@ -193,10 +193,12 @@ ThemeSummaryCard.fragments = {
         fragment ThemeSummaryCardTheme on Theme {
             ...createVideoSlugTheme
             ...ThemeMenuTheme
-            slug
             type
             sequence
-            group
+            group {
+                name
+                slug
+            }
             anime {
                 ...extractImagesResourceWithImages
                 slug

src/components/card/VideoSummaryCard.tsx

@@ -87,7 +87,7 @@ export const VideoSummaryCard = forwardRef(
                             <Performances song={theme.song} />
                         </SummaryCard.Title>
                         <SummaryCard.Description>
-                            <span>{videoSlug}{theme.group && ` (${theme.group})`}</span>
+                            <span>{videoSlug}{theme.group && ` (${theme.group.name})`}</span>
                             <TextLink href={`/anime/${anime.slug}`}>{anime.name}</TextLink>
                         </SummaryCard.Description>
                     </SummaryCard.Body>
@@ -118,10 +118,12 @@ export const VideoSummaryCardFragmentVideo = gql`
             theme {
                 ...createVideoSlugTheme
                 id
-                slug
                 type
                 sequence
-                group
+                group {
+                    name
+                    slug
+                }
                 anime {
                     ...extractImagesResourceWithImages
                     slug

src/components/filter/AnimeThemeFilter.tsx

@@ -2,27 +2,41 @@ import { memo, useMemo, useState } from "react";
 import { Column, Row } from "components/box";
 import { ThemeDetailCard } from "components/card";
 import { HorizontalScroll } from "components/utils";
-import { either, themeIndexComparator, themeTypeComparator } from "utils/comparators";
+import { either, themeGroupComparator, themeIndexComparator, themeTypeComparator } from "utils/comparators";
 import gql from "graphql-tag";
 import type { AnimeThemeFilterThemeFragment } from "generated/graphql";
 import { Listbox, ListboxOption } from "components/listbox/Listbox";
+import { Text } from "components/text/Text";
 
 interface AnimeThemeFilterProps {
     themes: Array<AnimeThemeFilterThemeFragment>
 }
 
 function AnimeThemeFilterInternal({ themes }: AnimeThemeFilterProps) {
+    const hasMultipleTypes = (
+        themes.some((theme) => theme.type === "OP") &&
+        themes.some((theme) => theme.type === "ED")
+    );
+    const [ filterType, setFilterType ] = useState<string | null>(null);
+
+    const filteredThemes = themes
+        .filter((theme) => !filterType || theme.type === filterType)
+        .sort(either(themeGroupComparator).or(themeTypeComparator).or(themeIndexComparator).chain());
+
     const groups = useMemo(
-        () => themes.reduce<{
+        () => filteredThemes.reduce<{
             name: string,
+            slug: string,
             themes: typeof themes
         }[]>(
             (groups, theme) => {
-                const groupName = theme.group || "Original";
+                const groupName = theme.group?.name || "Original";
+                const groupSlug = theme.group?.slug || "original";
                 const group = groups.find((group) => group.name === groupName);
                 if (!group) {
                     groups.push({
                         name: groupName,
+                        slug: groupSlug,
                         themes: [theme],
                     });
                 } else {
@@ -32,28 +46,22 @@ function AnimeThemeFilterInternal({ themes }: AnimeThemeFilterProps) {
             },
             []
         ),
-        [ themes ]
+        [ filteredThemes ]
     );
 
-    const [ activeGroup, setActiveGroup ] = useState(groups[0]?.name);
-    const activeThemes = groups.find((group) => group.name === activeGroup)?.themes ?? [];
-
-    const hasMultipleTypes = activeThemes.find((theme) => theme.type === "OP") && activeThemes.find((theme) => theme.type === "ED");
-    const [ filterType, setFilterType ] = useState<string | null>(null);
-
-    const filteredThemes = activeThemes
-        .filter((theme) => !filterType || theme.type === filterType)
-        .sort(either(themeTypeComparator).or(themeIndexComparator).chain());
+    const [ activeGroup, setActiveGroup ] = useState<string | null>(null);
+    const activeGroupThemes = groups.find((group) => group.slug === activeGroup)?.themes;
 
     return (
-        <Column style={{ "--gap": "16px" }}>
+        <Column style={{ "--gap": "24px" }}>
             {(groups.length > 1 || hasMultipleTypes) && (
                 <HorizontalScroll fixShadows>
                     <Row style={{ "--gap": "16px" }}>
                         {groups.length > 1 && (
-                            <Listbox value={activeGroup} onValueChange={setActiveGroup}>
+                            <Listbox value={activeGroup} onValueChange={setActiveGroup} defaultValue={null} resettable nullable highlightNonDefault>
+                                <ListboxOption value={null} hidden>All Groups</ListboxOption>
                                 {groups.map((group) => (
-                                    <ListboxOption key={group.name} value={group.name}>{group.name}</ListboxOption>
+                                    <ListboxOption key={group.slug} value={group.slug}>{group.name}</ListboxOption>
                                 ))}
                             </Listbox>
                         )}
@@ -67,9 +75,24 @@ function AnimeThemeFilterInternal({ themes }: AnimeThemeFilterProps) {
                     </Row>
                 </HorizontalScroll>
             )}
-            {filteredThemes.map((theme, index) => (
-                <ThemeDetailCard key={index} theme={theme} />
-            ))}
+            <Column style={{ "--gap": "48px" }}>
+                {activeGroupThemes ? (
+                    <Column style={{ "--gap": "16px" }}>
+                        {activeGroupThemes.map((theme) => (
+                            <ThemeDetailCard key={theme.id} theme={theme} />
+                        ))}
+                    </Column>
+                ) : groups.map((group) => (
+                    <Column key={group.slug} style={{ "--gap": "16px" }}>
+                        {groups.length > 1 && (
+                            <Text variant="h3">{group.name}</Text>
+                        )}
+                        {group.themes.map((theme) => (
+                            <ThemeDetailCard key={theme.id} theme={theme} />
+                        ))}
+                    </Column>
+                ))}
+            </Column>
         </Column>
     );
 }
@@ -81,7 +104,10 @@ AnimeThemeFilterInternal.fragments = {
         fragment AnimeThemeFilterTheme on Theme {
             ...ThemeDetailCardTheme
             type
-            group
+            group {
+                name
+                slug
+            }
         }
     `
 };

src/components/menu/ThemeMenu.tsx

@@ -63,10 +63,12 @@ ThemeMenu.fragments = {
         fragment ThemeMenuTheme on Theme {
             ...createVideoSlugTheme
             id
-            slug
             type
             sequence
-            group
+            group {
+                name
+                slug
+            }
             anime {
                 ...extractImagesResourceWithImages
                 slug

src/components/search/SearchGlobal.tsx

@@ -116,7 +116,7 @@ export function SearchGlobal({ searchQuery }: SearchGlobalProps) {
                 entity="theme"
                 title="Themes"
                 results={themeResults}
-                renderSummaryCard={(theme) => <ThemeSummaryCard key={theme.anime?.slug + theme.slug} theme={theme} expandable/>}
+                renderSummaryCard={(theme) => <ThemeSummaryCard key={`${theme.anime?.slug}-${theme.id}`} theme={theme} expandable/>}
             />
             <GlobalSearchSection
                 entity="artist"

src/components/search/SearchTheme.tsx

@@ -70,7 +70,7 @@ export function SearchTheme({ searchQuery }: SearchThemeProps) {
                 return data.searchTheme;
             }}
             renderResult={(theme) => (
-                <ThemeSummaryCard key={theme.anime?.slug + theme.slug} theme={theme} expandable/>
+                <ThemeSummaryCard key={`${theme.anime?.slug}-${theme.id}`} theme={theme} expandable/>
             )}
             filters={
                 <>

src/components/video-player/VideoPlayer.tsx

@@ -159,7 +159,7 @@ export function VideoPlayer({ video, background, children, overlay, ...props }:
     useEffect(() => {
         if (theme && smallCover && navigator.mediaSession) {
             navigator.mediaSession.metadata = new MediaMetadata({
-                title: `${theme.slug} • ${theme.song?.title || "T.B.A."}`,
+                title: `${theme.type + (theme.sequence || "")} • ${theme.song?.title || "T.B.A."}`,
                 artist: theme.song?.performances
                     ? theme.song.performances.map((performance) => performance.as || performance.artist.name).join(", ")
                     : undefined,

src/components/video-player/VideoPlayerBar.tsx

@@ -129,7 +129,7 @@ export function VideoPlayerBar() {
                 <Text color="text-muted" maxLines={1}>
                     <SongTitle song={theme.song} href={videoPagePath} />
                     <Text variant="small"> - </Text>
-                    <Text weight={600}>{theme.type}{theme.sequence || null}{theme.group && ` (${theme.group})`}</Text>
+                    <Text weight={600}>{theme.type}{theme.sequence || null}{theme.group && ` (${theme.group.name})`}</Text>
                     <Text variant="small"> from </Text>
                     <Link href={`/anime/${anime.slug}`} passHref legacyBehavior>
                         <Text as="a" link>{anime.name}</Text>

src/generated/graphql.ts

@@ -443,14 +443,19 @@ export type Synonym = {
 export type Theme = {
   anime: Anime;
   entries: Array<Entry>;
-  group: Maybe<Scalars['String']>;
+  group: Maybe<ThemeGroup>;
   id: Scalars['Int'];
   sequence: Maybe<Scalars['Int']>;
-  slug: Scalars['String'];
   song: Maybe<Song>;
   type: Scalars['String'];
 };
 
+export type ThemeGroup = {
+  id: Scalars['Int'];
+  name: Scalars['String'];
+  slug: Scalars['String'];
+};
+
 export type ThemeSearchResult = EntitySearchResult & {
   data: Array<Theme>;
   nextPage: Maybe<Scalars['Int']>;
@@ -540,19 +545,19 @@ export type Year = {
   value: Scalars['Int'];
 };
 
-export type BracketThemeSummaryCardConstestantFragment = { name: string, source: string, image: string, theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null };
+export type BracketThemeSummaryCardConstestantFragment = { name: string, source: string, image: string, theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null };
 
 export type VideoButtonAnimeFragment = { slug: string };
 
-export type VideoButtonThemeFragment = { slug: string };
+export type VideoButtonThemeFragment = { type: string, sequence: number | null, group: { slug: string } | null };
 
 export type VideoButtonEntryFragment = { version: number | null };
 
 export type VideoButtonVideoFragment = { id: number, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap };
 
-export type AnimeSummaryCardAnimeFragment = { slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ group: string | null }>, images: Array<{ link: string, facet: string | null }> };
+export type AnimeSummaryCardAnimeFragment = { slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ group: { name: string, slug: string } | null }>, images: Array<{ link: string, facet: string | null }> };
 
-export type AnimeSummaryCardAnimeExpandableFragment = { themes: Array<{ group: string | null, id: number, type: string, sequence: number | null, slug: string, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }> };
+export type AnimeSummaryCardAnimeExpandableFragment = { themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }> };
 
 export type ArtistSummaryCardArtistFragment = { slug: string, name: string, images: Array<{ link: string, facet: string | null }> };
 
@@ -560,28 +565,28 @@ export type PlaylistSummaryCardPlaylistFragment = { id: string, name: string, vi
 
 export type PlaylistSummaryCardShowOwnerFragment = { user: { name: string } };
 
-export type ThemeDetailCardThemeFragment = { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> };
+export type ThemeDetailCardThemeFragment = { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> };
 
-export type ThemeSummaryCardThemeFragment = { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> };
+export type ThemeSummaryCardThemeFragment = { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> };
 
 export type ThemeSummaryCardArtistFragment = { slug: string };
 
-export type ThemeSummaryCardThemeExpandableFragment = { id: number, type: string, sequence: number | null, slug: string, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null };
+export type ThemeSummaryCardThemeExpandableFragment = { id: number, type: string, sequence: number | null, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null, group: { slug: string } | null };
 
 export type ThemeSummaryCardQueryVariables = Exact<{
   themeId: Scalars['Int'];
 }>;
 
 
-export type ThemeSummaryCardQuery = { theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { year: number | null, season: string | null, slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null };
+export type ThemeSummaryCardQuery = { theme: { type: string, sequence: number | null, id: number, anime: { year: number | null, season: string | null, slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, group: { name: string, slug: string } | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null };
 
-export type VideoSummaryCardVideoFragment = { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } };
+export type VideoSummaryCardVideoFragment = { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } };
 
 export type PlaylistEditDialogPlaylistFragment = { id: string, name: string, visibility: PlaylistVisibility };
 
 export type PlaylistRemoveDialogPlaylistFragment = { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number };
 
-export type PlaylistTrackAddDialogVideoFragment = { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } };
+export type PlaylistTrackAddDialogVideoFragment = { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } };
 
 export type PlaylistTrackAddFormPlaylistQueryVariables = Exact<{
   filterVideoId: Scalars['Int'];
@@ -592,11 +597,11 @@ export type PlaylistTrackAddFormPlaylistQuery = { me: { playlistAll: Array<{ id:
 
 export type PlaylistTrackRemoveDialogPlaylistFragment = { id: string, name: string };
 
-export type PlaylistTrackRemoveDialogVideoFragment = { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } };
+export type PlaylistTrackRemoveDialogVideoFragment = { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } };
 
-export type FeaturedThemeThemeFragment = { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, entries: Array<{ version: number | null, videos: Array<{ basename: string, id: number, tags: string, audio: { basename: string } }> }>, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null };
+export type FeaturedThemeThemeFragment = { type: string, sequence: number | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, entries: Array<{ version: number | null, videos: Array<{ basename: string, id: number, tags: string, audio: { basename: string } }> }>, group: { name: string, slug: string } | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null };
 
-export type AnimeThemeFilterThemeFragment = { type: string, group: string | null, slug: string, sequence: number | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> };
+export type AnimeThemeFilterThemeFragment = { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> };
 
 type CoverImageResourceWithImages_Anime_Fragment = { images: Array<{ link: string, facet: string | null }> };
 
@@ -618,14 +623,14 @@ export type ProfileImageUserFragment = { name: string, email: string };
 
 export type StudioCoverImageStudioFragment = { images: Array<{ link: string, facet: string | null }>, anime: Array<{ name: string, images: Array<{ link: string, facet: string | null }> }> };
 
-export type ThemeMenuThemeFragment = { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> };
+export type ThemeMenuThemeFragment = { id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> };
 
 export type SearchAnimeQueryVariables = Exact<{
   args: SearchArgs;
 }>;
 
 
-export type SearchAnimeQuery = { searchAnime: { nextPage: number | null, data: Array<{ slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ group: string | null, id: number, type: string, sequence: number | null, slug: string, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }>, images: Array<{ link: string, facet: string | null }> }> } };
+export type SearchAnimeQuery = { searchAnime: { nextPage: number | null, data: Array<{ slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }>, images: Array<{ link: string, facet: string | null }> }> } };
 
 export type SearchArtistQueryVariables = Exact<{
   args: SearchArgs;
@@ -639,7 +644,7 @@ export type SearchGlobalQueryVariables = Exact<{
 }>;
 
 
-export type SearchGlobalQuery = { search: { anime: Array<{ slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ group: string | null, id: number, type: string, sequence: number | null, slug: string, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }>, images: Array<{ link: string, facet: string | null }> }>, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }>, artists: Array<{ slug: string, name: string, images: Array<{ link: string, facet: string | null }> }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }>, playlists: Array<{ id: string, name: string, visibility: PlaylistVisibility, tracks_count: number, user: { name: string } }> } };
+export type SearchGlobalQuery = { search: { anime: Array<{ slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }>, images: Array<{ link: string, facet: string | null }> }>, themes: Array<{ type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }>, artists: Array<{ slug: string, name: string, images: Array<{ link: string, facet: string | null }> }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }>, playlists: Array<{ id: string, name: string, visibility: PlaylistVisibility, tracks_count: number, user: { name: string } }> } };
 
 export type SearchPlaylistQueryVariables = Exact<{
   args: SearchArgs;
@@ -667,9 +672,9 @@ export type SearchThemeQueryVariables = Exact<{
 }>;
 
 
-export type SearchThemeQuery = { searchTheme: { nextPage: number | null, data: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } };
+export type SearchThemeQuery = { searchTheme: { nextPage: number | null, data: Array<{ type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } };
 
-export type ThemeTableThemeFragment = { id: number, type: string, sequence: number | null, slug: string, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null };
+export type ThemeTableThemeFragment = { id: number, type: string, sequence: number | null, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null, group: { slug: string } | null };
 
 export type ContentWarningTagsEntryFragment = { spoiler: boolean, nsfw: boolean };
 
@@ -711,7 +716,7 @@ export type RandomThemeQueryVariables = Exact<{
 }>;
 
 
-export type RandomThemeQuery = { searchTheme: { data: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ basename: string, id: number, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }>, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null }> } };
+export type RandomThemeQuery = { searchTheme: { data: Array<{ type: string, sequence: number | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ basename: string, id: number, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }>, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null }> } };
 
 export type DocumentPageQueryVariables = Exact<{
   pageSlug: Scalars['String'];
@@ -730,33 +735,33 @@ export type DumpIndexPageQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type DumpIndexPageQuery = { dumpAll: Array<{ path: string, link: string, created_at: string }> };
 
-export type VideoPageAnimeFragment = { name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }> } | null, entries: Array<{ episodes: string | null, nsfw: boolean, spoiler: boolean, version: number | null, videos: Array<{ id: number, basename: string, filename: string, lyrics: boolean, nc: boolean, overlap: VideoOverlap, resolution: number | null, source: VideoSource | null, subbed: boolean, uncen: boolean, tags: string, entries: Array<{ theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } }>, tracks: Array<{ playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number } }>, audio: { basename: string }, script: { link: string } | null }> }>, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }>, images: Array<{ facet: string | null, link: string }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }> };
+export type VideoPageAnimeFragment = { name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, type: string, sequence: number | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }> } | null, entries: Array<{ episodes: string | null, nsfw: boolean, spoiler: boolean, version: number | null, videos: Array<{ id: number, basename: string, filename: string, lyrics: boolean, nc: boolean, overlap: VideoOverlap, resolution: number | null, source: VideoSource | null, subbed: boolean, uncen: boolean, tags: string, entries: Array<{ theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } }>, tracks: Array<{ playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number } }>, audio: { basename: string }, script: { link: string } | null }> }>, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }>, images: Array<{ facet: string | null, link: string }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }> };
 
 export type VideoPageQueryVariables = Exact<{
   animeSlug: Scalars['String'];
 }>;
 
 
-export type VideoPageQuery = { anime: { name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }> } | null, entries: Array<{ episodes: string | null, nsfw: boolean, spoiler: boolean, version: number | null, videos: Array<{ id: number, basename: string, filename: string, lyrics: boolean, nc: boolean, overlap: VideoOverlap, resolution: number | null, source: VideoSource | null, subbed: boolean, uncen: boolean, tags: string, entries: Array<{ theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } }>, tracks: Array<{ playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number } }>, audio: { basename: string }, script: { link: string } | null }> }>, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }>, images: Array<{ facet: string | null, link: string }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }> } | null };
+export type VideoPageQuery = { anime: { name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, type: string, sequence: number | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }> } | null, entries: Array<{ episodes: string | null, nsfw: boolean, spoiler: boolean, version: number | null, videos: Array<{ id: number, basename: string, filename: string, lyrics: boolean, nc: boolean, overlap: VideoOverlap, resolution: number | null, source: VideoSource | null, subbed: boolean, uncen: boolean, tags: string, entries: Array<{ theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } }>, tracks: Array<{ playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number } }>, audio: { basename: string }, script: { link: string } | null }> }>, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }>, images: Array<{ facet: string | null, link: string }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }> } | null };
 
 export type VideoPageAllQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type VideoPageAllQuery = { animeAll: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }> } | null, entries: Array<{ episodes: string | null, nsfw: boolean, spoiler: boolean, version: number | null, videos: Array<{ id: number, basename: string, filename: string, lyrics: boolean, nc: boolean, overlap: VideoOverlap, resolution: number | null, source: VideoSource | null, subbed: boolean, uncen: boolean, tags: string, entries: Array<{ theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } }>, tracks: Array<{ playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number } }>, audio: { basename: string }, script: { link: string } | null }> }>, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }>, images: Array<{ facet: string | null, link: string }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }> }> };
+export type VideoPageAllQuery = { animeAll: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, type: string, sequence: number | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }> } | null, entries: Array<{ episodes: string | null, nsfw: boolean, spoiler: boolean, version: number | null, videos: Array<{ id: number, basename: string, filename: string, lyrics: boolean, nc: boolean, overlap: VideoOverlap, resolution: number | null, source: VideoSource | null, subbed: boolean, uncen: boolean, tags: string, entries: Array<{ theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } }>, tracks: Array<{ playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number } }>, audio: { basename: string }, script: { link: string } | null }> }>, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> } }>, images: Array<{ facet: string | null, link: string }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }> }> };
 
-export type AnimeDetailPageAnimeFragment = { slug: string, name: string, season: string | null, year: number | null, synopsis: string | null, media_format: string | null, synonyms: Array<{ text: string | null }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }>, resources: Array<{ site: string | null, link: string | null, as: string | null }>, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }>, images: Array<{ link: string, facet: string | null }> };
+export type AnimeDetailPageAnimeFragment = { slug: string, name: string, season: string | null, year: number | null, synopsis: string | null, media_format: string | null, synonyms: Array<{ text: string | null }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }>, resources: Array<{ site: string | null, link: string | null, as: string | null }>, themes: Array<{ type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }>, images: Array<{ link: string, facet: string | null }> };
 
 export type AnimeDetailPageQueryVariables = Exact<{
   animeSlug: Scalars['String'];
 }>;
 
 
-export type AnimeDetailPageQuery = { anime: { slug: string, name: string, season: string | null, year: number | null, synopsis: string | null, media_format: string | null, synonyms: Array<{ text: string | null }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }>, resources: Array<{ site: string | null, link: string | null, as: string | null }>, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }>, images: Array<{ link: string, facet: string | null }> } | null };
+export type AnimeDetailPageQuery = { anime: { slug: string, name: string, season: string | null, year: number | null, synopsis: string | null, media_format: string | null, synonyms: Array<{ text: string | null }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }>, resources: Array<{ site: string | null, link: string | null, as: string | null }>, themes: Array<{ type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }>, images: Array<{ link: string, facet: string | null }> } | null };
 
 export type AnimeDetailPageAllQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type AnimeDetailPageAllQuery = { animeAll: Array<{ slug: string, name: string, season: string | null, year: number | null, synopsis: string | null, media_format: string | null, synonyms: Array<{ text: string | null }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }>, resources: Array<{ site: string | null, link: string | null, as: string | null }>, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }>, images: Array<{ link: string, facet: string | null }> }> };
+export type AnimeDetailPageAllQuery = { animeAll: Array<{ slug: string, name: string, season: string | null, year: number | null, synopsis: string | null, media_format: string | null, synonyms: Array<{ text: string | null }>, series: Array<{ slug: string, name: string }>, studios: Array<{ slug: string, name: string }>, resources: Array<{ site: string | null, link: string | null, as: string | null }>, themes: Array<{ type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ filename: string, tags: string, id: number, basename: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }>, images: Array<{ link: string, facet: string | null }> }> };
 
 export type AnimeIndexPageQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -773,21 +778,21 @@ export type RevalidateAnimeQueryVariables = Exact<{
 }>;
 
 
-export type RevalidateAnimeQuery = { anime: { year: number | null, season: string | null, series: Array<{ slug: string }>, studios: Array<{ slug: string }>, themes: Array<{ slug: string, song: { performances: Array<{ artist: { slug: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ tags: string }> }> }> } | null };
+export type RevalidateAnimeQuery = { anime: { year: number | null, season: string | null, series: Array<{ slug: string }>, studios: Array<{ slug: string }>, themes: Array<{ type: string, sequence: number | null, song: { performances: Array<{ artist: { slug: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ tags: string }> }>, group: { slug: string } | null }> } | null };
 
-export type ArtistDetailPageArtistFragment = { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }>, members: Array<{ as: string | null, member: { slug: string, name: string } }>, groups: Array<{ as: string | null, group: { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }> } }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ facet: string | null, link: string }> };
+export type ArtistDetailPageArtistFragment = { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }>, members: Array<{ as: string | null, member: { slug: string, name: string } }>, groups: Array<{ as: string | null, group: { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }> } }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ facet: string | null, link: string }> };
 
 export type ArtistDetailPageQueryVariables = Exact<{
   artistSlug: Scalars['String'];
 }>;
 
 
-export type ArtistDetailPageQuery = { artist: { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }>, members: Array<{ as: string | null, member: { slug: string, name: string } }>, groups: Array<{ as: string | null, group: { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }> } }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ facet: string | null, link: string }> } | null };
+export type ArtistDetailPageQuery = { artist: { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }>, members: Array<{ as: string | null, member: { slug: string, name: string } }>, groups: Array<{ as: string | null, group: { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }> } }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ facet: string | null, link: string }> } | null };
 
 export type ArtistDetailPageAllQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type ArtistDetailPageAllQuery = { artistAll: Array<{ slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }>, members: Array<{ as: string | null, member: { slug: string, name: string } }>, groups: Array<{ as: string | null, group: { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, slug: string, group: string | null, type: string, sequence: number | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }> } }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ facet: string | null, link: string }> }> };
+export type ArtistDetailPageAllQuery = { artistAll: Array<{ slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }>, members: Array<{ as: string | null, member: { slug: string, name: string } }>, groups: Array<{ as: string | null, group: { slug: string, name: string, performances: Array<{ as: string | null, song: { id: number | null, title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }>, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, year: number | null, season: string | null, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ id: number, basename: string, tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap, audio: { basename: string } }> }> }> } }> } }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ facet: string | null, link: string }> }> };
 
 export type ArtistIndexPageQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -799,16 +804,16 @@ export type DocumentIndexPageQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type DocumentIndexPageQuery = { pageAll: Array<{ slug: string, name: string, created_at: string }> };
 
-export type CharacterFragmentFragment = { id: number, seed: number, name: string, source: string, image: string, theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null };
+export type CharacterFragmentFragment = { id: number, seed: number, name: string, source: string, image: string, theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null };
 
-export type RoundFragmentFragment = { tier: number, name: string | null, pairings: Array<{ order: number, group: number, votesA: number | null, votesB: number | null, characterA: { id: number, seed: number, name: string, source: string, image: string, theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null }, characterB: { id: number, seed: number, name: string, source: string, image: string, theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null } }> };
+export type RoundFragmentFragment = { tier: number, name: string | null, pairings: Array<{ order: number, group: number, votesA: number | null, votesB: number | null, characterA: { id: number, seed: number, name: string, source: string, image: string, theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null }, characterB: { id: number, seed: number, name: string, source: string, image: string, theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null } }> };
 
 export type BracketPageQueryVariables = Exact<{
   bracketSlug: Scalars['String'];
 }>;
 
 
-export type BracketPageQuery = { bracket: { name: string, currentGroup: number | null, currentRound: { tier: number, name: string | null, pairings: Array<{ order: number, group: number, votesA: number | null, votesB: number | null, characterA: { id: number, seed: number, name: string, source: string, image: string, theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null }, characterB: { id: number, seed: number, name: string, source: string, image: string, theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null } }> } | null, rounds: Array<{ tier: number, name: string | null, pairings: Array<{ order: number, group: number, votesA: number | null, votesB: number | null, characterA: { id: number, seed: number, name: string, source: string, image: string, theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null }, characterB: { id: number, seed: number, name: string, source: string, image: string, theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null } }> }> } | null };
+export type BracketPageQuery = { bracket: { name: string, currentGroup: number | null, currentRound: { tier: number, name: string | null, pairings: Array<{ order: number, group: number, votesA: number | null, votesB: number | null, characterA: { id: number, seed: number, name: string, source: string, image: string, theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null }, characterB: { id: number, seed: number, name: string, source: string, image: string, theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null } }> } | null, rounds: Array<{ tier: number, name: string | null, pairings: Array<{ order: number, group: number, votesA: number | null, votesB: number | null, characterA: { id: number, seed: number, name: string, source: string, image: string, theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null }, characterB: { id: number, seed: number, name: string, source: string, image: string, theme: { type: string, sequence: number | null, id: number, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ id: number, basename: string, tags: string, audio: { basename: string } }> }> } | null } }> }> } | null };
 
 export type BracketPageAllQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -820,7 +825,7 @@ export type AwardPageThemeQueryVariables = Exact<{
 }>;
 
 
-export type AwardPageThemeQuery = { theme: { id: number, slug: string, anime: { slug: string, name: string, images: Array<{ facet: string | null, link: string }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ basename: string, tags: string }> }> } | null };
+export type AwardPageThemeQuery = { theme: { id: number, type: string, sequence: number | null, anime: { slug: string, name: string, images: Array<{ facet: string | null, link: string }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null, entries: Array<{ version: number | null, videos: Array<{ basename: string, tags: string }> }>, group: { slug: string } | null } | null };
 
 export type EventPageQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -830,31 +835,31 @@ export type EventPageQuery = { bracketAll: Array<{ slug: string, name: string }>
 export type HomePageRecentlyAddedQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type HomePageRecentlyAddedQuery = { videoAll: Array<{ id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } }> };
+export type HomePageRecentlyAddedQuery = { videoAll: Array<{ id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } }> };
 
 export type HomePageMostViewedQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type HomePageMostViewedQuery = { videoAll: Array<{ id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } }> };
+export type HomePageMostViewedQuery = { videoAll: Array<{ id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } }> };
 
 export type HomePageQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type HomePageQuery = { featuredTheme: { entry: { theme: { slug: string, type: string, sequence: number | null, group: string | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, entries: Array<{ version: number | null, videos: Array<{ basename: string, id: number, tags: string, audio: { basename: string } }> }>, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } } | null } | null, announcementAll: Array<{ content: string }> };
+export type HomePageQuery = { featuredTheme: { entry: { theme: { type: string, sequence: number | null, id: number, anime: { slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, entries: Array<{ version: number | null, videos: Array<{ basename: string, id: number, tags: string, audio: { basename: string } }> }>, group: { name: string, slug: string } | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } } | null } | null, announcementAll: Array<{ content: string }> };
 
 export type PlaylistDetailPagePlaylistQueryVariables = Exact<{
   playlistId: Scalars['String'];
 }>;
 
 
-export type PlaylistDetailPagePlaylistQuery = { playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number, forward: Array<{ id: string, video: { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { year: number | null, season: string | null, slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } } }>, user: { name: string } } | null };
+export type PlaylistDetailPagePlaylistQuery = { playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number, forward: Array<{ id: string, video: { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, type: string, sequence: number | null, anime: { year: number | null, season: string | null, slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, group: { name: string, slug: string } | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } } }>, user: { name: string } } | null };
 
 export type PlaylistDetailPageMeQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type PlaylistDetailPageMeQuery = { me: { user: { name: string } | null } };
 
-export type PlaylistDetailPagePlaylistFragment = { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number, forward: Array<{ id: string, video: { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { year: number | null, season: string | null, slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } } }>, user: { name: string } };
+export type PlaylistDetailPagePlaylistFragment = { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number, forward: Array<{ id: string, video: { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, type: string, sequence: number | null, anime: { year: number | null, season: string | null, slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, group: { name: string, slug: string } | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } } }>, user: { name: string } };
 
 type PlaylistDetailPageUser_UserAuth_Fragment = { name: string };
 
@@ -867,7 +872,7 @@ export type PlaylistDetailPageQueryVariables = Exact<{
 }>;
 
 
-export type PlaylistDetailPageQuery = { playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number, forward: Array<{ id: string, video: { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, slug: string, type: string, sequence: number | null, group: string | null, anime: { year: number | null, season: string | null, slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } } }>, user: { name: string } } | null, me: { user: { name: string } | null } };
+export type PlaylistDetailPageQuery = { playlist: { id: string, name: string, visibility: PlaylistVisibility, tracks_count: number, forward: Array<{ id: string, video: { id: number, basename: string, tags: string, entries: Array<{ version: number | null, theme: { id: number, type: string, sequence: number | null, anime: { year: number | null, season: string | null, slug: string, name: string, images: Array<{ link: string, facet: string | null }> }, group: { name: string, slug: string } | null, song: { title: string | null, performances: Array<{ as: string | null, artist: { slug: string, name: string } }> } | null } }>, audio: { basename: string } } }>, user: { name: string } } | null, me: { user: { name: string } | null } };
 
 export type GalleryPageQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -888,38 +893,38 @@ export type ProfilePageQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ProfilePageQuery = { me: { user: { name: string, email: string, email_verified_at: string | null, created_at: string, roles: Array<{ name: string, color: string | null, priority: number | null, default: boolean }> } | null, playlistAll: Array<{ id: string, name: string, visibility: PlaylistVisibility, tracks_count: number }> | null } };
 
-export type SeriesDetailPageSeriesFragment = { slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }> };
+export type SeriesDetailPageSeriesFragment = { slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ type: string, sequence: number | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, group: { name: string, slug: string } | null, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }> };
 
 export type SeriesDetailPageQueryVariables = Exact<{
   seriesSlug: Scalars['String'];
 }>;
 
 
-export type SeriesDetailPageQuery = { series: { slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }> } | null };
+export type SeriesDetailPageQuery = { series: { slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ type: string, sequence: number | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, group: { name: string, slug: string } | null, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }> } | null };
 
 export type SeriesDetailPageAllQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type SeriesDetailPageAllQuery = { seriesAll: Array<{ slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }> }> };
+export type SeriesDetailPageAllQuery = { seriesAll: Array<{ slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ type: string, sequence: number | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, group: { name: string, slug: string } | null, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }> }> };
 
 export type SeriesIndexPageQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type SeriesIndexPageQuery = { seriesAll: Array<{ slug: string, name: string }> };
 
-export type StudioDetailPageStudioFragment = { slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ link: string, facet: string | null }> };
+export type StudioDetailPageStudioFragment = { slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ type: string, sequence: number | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, group: { name: string, slug: string } | null, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ link: string, facet: string | null }> };
 
 export type StudioDetailPageQueryVariables = Exact<{
   studioSlug: Scalars['String'];
 }>;
 
 
-export type StudioDetailPageQuery = { studio: { slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ link: string, facet: string | null }> } | null };
+export type StudioDetailPageQuery = { studio: { slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ type: string, sequence: number | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, group: { name: string, slug: string } | null, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ link: string, facet: string | null }> } | null };
 
 export type StudioDetailPageAllQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type StudioDetailPageAllQuery = { studioAll: Array<{ slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ slug: string, type: string, sequence: number | null, group: string | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ link: string, facet: string | null }> }> };
+export type StudioDetailPageAllQuery = { studioAll: Array<{ slug: string, name: string, anime: Array<{ name: string, slug: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ type: string, sequence: number | null, id: number, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, group: { name: string, slug: string } | null, anime: { slug: string }, song: { title: string | null } | null }>, images: Array<{ facet: string | null, link: string }> }>, resources: Array<{ link: string | null, site: string | null, as: string | null }>, images: Array<{ link: string, facet: string | null }> }> };
 
 export type StudioIndexPageQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -932,7 +937,7 @@ export type SeasonDetailPageQueryVariables = Exact<{
 }>;
 
 
-export type SeasonDetailPageQuery = { year: { value: number, seasons: Array<{ value: string }> } | null, season: { value: string, anime: Array<{ slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ group: string | null, id: number, type: string, sequence: number | null, slug: string, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }>, images: Array<{ link: string, facet: string | null }> }> } | null, yearAll: Array<{ value: number }> };
+export type SeasonDetailPageQuery = { year: { value: number, seasons: Array<{ value: string }> } | null, season: { value: string, anime: Array<{ slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }>, images: Array<{ link: string, facet: string | null }> }> } | null, yearAll: Array<{ value: number }> };
 
 export type SeasonDetailPageAllQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -944,7 +949,7 @@ export type YearDetailPageQueryVariables = Exact<{
 }>;
 
 
-export type YearDetailPageQuery = { year: { value: number, seasons: Array<{ value: string, anime: Array<{ slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ group: string | null, id: number, type: string, sequence: number | null, slug: string, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }>, images: Array<{ link: string, facet: string | null }> }> }> } | null, yearAll: Array<{ value: number }> };
+export type YearDetailPageQuery = { year: { value: number, seasons: Array<{ value: string, anime: Array<{ slug: string, name: string, year: number | null, season: string | null, media_format: string | null, themes: Array<{ id: number, type: string, sequence: number | null, group: { name: string, slug: string } | null, anime: { slug: string }, entries: Array<{ version: number | null, episodes: string | null, spoiler: boolean, nsfw: boolean, videos: Array<{ tags: string, resolution: number | null, nc: boolean, subbed: boolean, lyrics: boolean, uncen: boolean, source: VideoSource | null, overlap: VideoOverlap }> }>, song: { title: string | null } | null }>, images: Array<{ link: string, facet: string | null }> }> }> } | null, yearAll: Array<{ value: number }> };
 
 export type YearDetailPageAllQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -956,7 +961,7 @@ export type YearIndexPageQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type YearIndexPageQuery = { yearAll: Array<{ value: number, seasons: Array<{ value: string }> }> };
 
-export type CreateVideoSlugThemeFragment = { slug: string };
+export type CreateVideoSlugThemeFragment = { type: string, sequence: number | null, group: { slug: string } | null };
 
 export type CreateVideoSlugEntryFragment = { version: number | null };
 

src/lib/client/search.ts

@@ -100,11 +100,12 @@ export const searchResolvers = {
 
             // TODO: Hardcoded includes and fields should be generate dynamically by API resolver instead
             searchParams.append("include[anime]", "animethemes.animethemeentries.videos,animethemes.song,images");
-            searchParams.append("include[animetheme]", "animethemeentries.videos,anime.images,song.artists");
+            searchParams.append("include[animetheme]", "animethemeentries.videos,anime.images,song.artists,group");
             searchParams.append("include[artist]", "images,songs");
             searchParams.append("include[playlist]", "user");
             searchParams.append("fields[anime]", "name,slug,year,season");
-            searchParams.append("fields[animetheme]", "type,sequence,slug,group,id");
+            searchParams.append("fields[animetheme]", "type,sequence,id");
+            searchParams.append("fields[group]", "name,slug");
             searchParams.append("fields[animethemeentry]", "version,episodes,spoiler,nsfw");
             searchParams.append("fields[video]", "id,tags,resolution,nc,subbed,lyrics,uncen,source,overlap,basename");
             searchParams.append("fields[image]", "facet,link");

src/lib/common/animethemes/api.ts

@@ -22,6 +22,7 @@ export const INCLUDES = {
     },
     Theme: {
         song: "song",
+        group: "group",
         anime: "anime",
         entries: "animethemeentries"
     },
@@ -109,6 +110,7 @@ const ALLOWED_INCLUDES: Record<string, Array<string>> = {
         "series",
         "animethemes.song.artists",
         "animethemes.song.artists.images",
+        "animethemes.group",
         "images",
         "resources",
         "studios",
@@ -119,13 +121,15 @@ const ALLOWED_INCLUDES: Record<string, Array<string>> = {
         "animethemes.animethemeentries.videos.animethemeentries.animetheme.anime.images",
         "animethemes.animethemeentries.videos.animethemeentries.animetheme.animethemeentries.videos",
         "animethemes.animethemeentries.videos.animethemeentries.animetheme.animethemeentries.videos.audio",
-        "animethemes.animethemeentries.videos.animethemeentries.animetheme.song.artists"
+        "animethemes.animethemeentries.videos.animethemeentries.animetheme.song.artists",
+        "animethemes.animethemeentries.videos.animethemeentries.animetheme.group",
     ],
     Theme: [
         "anime.images",
         "animethemeentries.videos",
         "animethemeentries.videos.audio",
-        "song.artists"
+        "song.artists",
+        "group",
     ],
     Artist: [
         "songs.animethemes.anime",
@@ -136,6 +140,7 @@ const ALLOWED_INCLUDES: Record<string, Array<string>> = {
         "songs.artists",
         "songs.animethemes.song",
         "songs.animethemes.song.artists",
+        "songs.animethemes.group",
         "songs.animethemes.anime.images",
         "songs.animethemes.animethemeentries",
         "songs.animethemes.animethemeentries.videos",
@@ -145,13 +150,15 @@ const ALLOWED_INCLUDES: Record<string, Array<string>> = {
         "anime",
         "anime.images",
         "anime.animethemes.animethemeentries.videos",
-        "anime.animethemes.song"
+        "anime.animethemes.song",
+        "anime.animethemes.group",
     ],
     Studio: [
         "anime",
         "anime.images",
         "anime.animethemes.animethemeentries.videos",
         "anime.animethemes.song",
+        "anime.animethemes.group",
         "resources",
         "images"
     ],
@@ -162,6 +169,7 @@ const ALLOWED_INCLUDES: Record<string, Array<string>> = {
     Video: [
         "animethemeentries.animetheme.anime.images",
         "animethemeentries.animetheme.song.artists",
+        "animethemeentries.animetheme.group",
         "videoscript",
         "audio"
     ],
@@ -175,6 +183,7 @@ const ALLOWED_INCLUDES: Record<string, Array<string>> = {
     PlaylistTrack: [
         "video.animethemeentries.animetheme.anime.images",
         "video.animethemeentries.animetheme.song.artists",
+        "video.animethemeentries.animetheme.group",
         "video.audio",
     ],
     UserAuth: [
@@ -184,6 +193,7 @@ const ALLOWED_INCLUDES: Record<string, Array<string>> = {
     FeaturedTheme: [
         "animethemeentry.animetheme.anime.images",
         "animethemeentry.animetheme.song.artists",
+        "animethemeentry.animetheme.group",
         "user",
         "video",
     ]

src/lib/common/animethemes/resolvers.ts

@@ -180,6 +180,13 @@ const resolvers: IResolvers = {
             type: "Theme",
             baseInclude: INCLUDES.Theme.song
         }),
+        group: apiResolver({
+            endpoint: (theme) => `/animetheme/${theme.id}`,
+            field: "group",
+            extractor: (result) => result.animetheme.group,
+            type: "Theme",
+            baseInclude: INCLUDES.Theme.group
+        }),
         anime: apiResolver({
             endpoint: (theme) => `/animetheme/${theme.id}`,
             field: "anime",

src/lib/common/animethemes/type-defs.ts

@@ -71,14 +71,19 @@ const typeDefs = `
     
     type Theme {
         id: Int!
-        slug: String!
         type: String!
         sequence: Int
-        group: String
         song: Song
+        group: ThemeGroup
         anime: Anime!
         entries: [Entry!]!
     }
+    
+    type ThemeGroup {
+        id: Int!
+        name: String!
+        slug: String!
+    }
 
     type Entry {
         id: Int!

src/pages/_app.tsx

@@ -315,7 +315,7 @@ function createDefaultWatchList(pageProps: VideoPageProps): WatchListItem[] {
             const entry = themeIndex == index ? theme.entries[entryIndex] : theme.entries[0];
             const video = themeIndex == index ? entry?.videos[videoIndex] : entry?.videos[0];
 
-            if (!entry || !video || theme.group !== anime.themes[themeIndex].group) {
+            if (!entry || !video || theme.group?.slug !== anime.themes[themeIndex].group?.slug) {
                 return [];
             }
 

src/pages/anime/[animeSlug]/[videoSlug]/index.tsx

@@ -63,7 +63,7 @@ export default function VideoPage({ anime, themeIndex, entryIndex, videoIndex, l
     const [showMoreRelatedPlaylists, setShowMoreRelatedPlaylists] = useState(false);
 
     const relatedThemes = anime.themes
-        .filter((relatedTheme) => relatedTheme.slug !== theme.slug)
+        .filter((relatedTheme) => relatedTheme.id !== theme.id)
         .slice(0, showMoreRelatedThemes ? undefined : 3);
     const relatedPlaylists = video.tracks.map((track) => track.playlist);
 
@@ -72,8 +72,8 @@ export default function VideoPage({ anime, themeIndex, entryIndex, videoIndex, l
         .filter((otherTheme) => otherTheme?.anime && otherTheme.anime.slug !== anime.slug);
 
     const pageTitle = entry.version
-        ? `${songTitle} (${anime.name} ${theme.slug} v${entry.version})`
-        : `${songTitle} (${anime.name} ${theme.slug})`;
+        ? `${songTitle} (${anime.name} ${theme.type + (theme.sequence || "")} v${entry.version})`
+        : `${songTitle} (${anime.name} ${theme.type + (theme.sequence || "")})`;
 
     const pageDesc = (() => {
         // Generates and returns page description for SEO
@@ -89,7 +89,7 @@ export default function VideoPage({ anime, themeIndex, entryIndex, videoIndex, l
                 return str;
             }, " by ");
         }
-        return `Watch ${anime.name} ${theme.slug}${version}: ${songTitle}${artistStr} on AnimeThemes.`;
+        return `Watch ${anime.name} ${theme.type + (theme.sequence || "")}${version}: ${songTitle}${artistStr} on AnimeThemes.`;
     })();
 
     const videoUrl = `${VIDEO_URL}/${video.basename}`;
@@ -231,7 +231,7 @@ export default function VideoPage({ anime, themeIndex, entryIndex, videoIndex, l
                             <>
                                 <Text variant="h2">Related themes</Text>
                                 {relatedThemes.map((theme) => (
-                                    <ThemeSummaryCard key={theme.slug} theme={{ ...theme, anime }}/>
+                                    <ThemeSummaryCard key={theme.id} theme={{ ...theme, anime }}/>
                                 ))}
                                 {anime.themes.length > 4 ? (
                                     <Row style={{ "--justify-content": "center" }}>
@@ -268,7 +268,6 @@ VideoPage.fragments = {
             themes {
                 ...ThemeSummaryCardTheme
                 id
-                slug
                 song {
                     title
                     performances {

src/pages/artist/[artistSlug]/index.tsx

@@ -275,7 +275,7 @@ const ArtistThemes = memo(function ArtistThemes({ themes, artist }: ArtistThemes
 
     const themeCards = themes.map((theme, index) => (
         <ThemeSummaryCard
-            key={theme.anime?.slug + theme.slug + theme.group}
+            key={`${theme.anime?.slug}-${theme.id}`}
             theme={theme}
             artist={artist}
             expandable
@@ -313,8 +313,10 @@ ArtistDetailPage.fragements = {
                         ...ThemeSummaryCardTheme
                         ...ThemeSummaryCardThemeExpandable
                         id
-                        slug
-                        group
+                        group {
+                            name
+                            slug
+                        }
                         anime {
                             slug
                             year
@@ -350,8 +352,10 @@ ArtistDetailPage.fragements = {
                                 ...ThemeSummaryCardTheme
                                 ...ThemeSummaryCardThemeExpandable
                                 id
-                                slug
-                                group
+                                group {
+                                    name
+                                    slug
+                                }
                                 anime {
                                     slug
                                     year

src/pages/event/anime-awards.tsx

@@ -266,7 +266,7 @@ function AwardThemeSummaryCard({ theme, rank, votes, ...props }: AwardThemeSumma
 
     const description = (
         <SummaryCard.Description>
-            <span>{theme.slug}{(entry.version && entry.version > 1) ? `v${entry.version}` : null}</span>
+            <span>{theme.type + (theme.sequence || "")}{(entry.version && entry.version > 1) ? `v${entry.version}` : null}</span>
             <Link
                 href={`/anime/${theme.anime.slug}`}
                 passHref
@@ -353,10 +353,14 @@ export const getStaticProps: GetStaticProps<AnimeAwardsPage> = async () => {
 
 async function fetchTheme(themeId: number, version?: number) {
     const { data, apiRequests } = await fetchData<AwardPageThemeQuery>(gql`
+        ${createVideoSlug.fragments.theme}
+        ${createVideoSlug.fragments.entry}
+        ${createVideoSlug.fragments.video}
+        
         query AwardPageTheme($themeId: Int) {
             theme(id: $themeId) {
+                ...createVideoSlugTheme
                 id
-                slug
                 anime {
                     slug
                     name
@@ -376,8 +380,10 @@ async function fetchTheme(themeId: number, version?: number) {
                     }
                 }
                 entries {
+                    ...createVideoSlugEntry
                     version
                     videos {
+                        ...createVideoSlugVideo
                         basename
                         tags
                     }

src/pages/profile/playlist/index.tsx

@@ -149,7 +149,7 @@ export default function PlaylistPage() {
                         {sortBy === UNSORTED ? (
                             <Reorder.Group as="div" axis="y" values={themes} onReorder={setPlaylist}>
                                 {themes.map((theme) => (
-                                    <Reorder.Item as="div" key={theme.anime?.slug + theme.slug + theme.group} value={theme}>
+                                    <Reorder.Item as="div" key={`${theme.anime?.slug}-${theme.id}`} value={theme}>
                                         <ThemeSummaryCard theme={theme}/>
                                     </Reorder.Item>
                                 ))}
@@ -157,11 +157,10 @@ export default function PlaylistPage() {
                         ) : (
                             <div>
                                 {themes.map((theme) => (
-                                    <ThemeSummaryCard key={theme.anime?.slug + theme.slug + theme.group} theme={theme}/>
+                                    <ThemeSummaryCard key={`${theme.anime?.slug}-${theme.id}`} theme={theme}/>
                                 ))}
                             </div>
                         )}
-
                     </StyledReorderContainer>
                 </Column>
             </SidebarContainer>

src/pages/series/[seriesSlug]/index.tsx

@@ -106,7 +106,6 @@ SeriesDetailPage.fragments = {
                 year
                 season
                 themes {
-                    slug
                     type
                     sequence
                     entries {

src/pages/studio/[studioSlug]/index.tsx

@@ -144,7 +144,6 @@ StudioDetailPage.fragments = {
                 year
                 season
                 themes {
-                    slug
                     type
                     sequence
                     entries {

src/utils/comparators.ts

@@ -70,6 +70,8 @@ export const themeTypeComparator: Comparator<Pick<Theme, "type">> =
     nestedComparator((theme) => theme.type.toLowerCase(), enumComparator(themeTypeOrder));
 export const themeIndexComparator: Comparator<Pick<Theme, "sequence">> =
     nestedComparator((theme) => theme.sequence);
+export const themeGroupComparator: Comparator<{ group: { name: string } | null }> =
+    nestedComparator((theme) => theme.group?.name);
 export const studioNameComparator: Comparator<Pick<Studio, "name">> =
     nestedComparator((studio) => studio.name);
 export const seriesNameComparator: Comparator<Pick<Series, "name">> =

src/utils/createVideoSlug.ts

@@ -22,15 +22,19 @@ interface CreateVideoSlug {
 /**
  * Slug format is:
  *
- * `<OP|ED>[v#][-[Tags]]`
+ * `<OP|ED><#>[v#][-<Group>][-<Tags>]`
  */
 const createVideoSlug: CreateVideoSlug = (theme, entry, video) => {
-    let slug = theme.slug;
+    let slug = theme.type + (theme.sequence || 1);
 
     if (entry.version && entry.version !== 1) {
         slug += `v${entry.version}`;
     }
 
+    if (theme.group) {
+        slug += `-${theme.group.slug}`;
+    }
+
     if (video.tags) {
         slug += `-${video.tags}`;
     }
@@ -43,7 +47,11 @@ export default createVideoSlug;
 createVideoSlug.fragments = {
     theme: gql`
         fragment createVideoSlugTheme on Theme {
-            slug
+            type
+            sequence
+            group {
+                slug
+            }
         }
     `,
     entry: gql`