john-okeefe/Anitrack
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

moved user information into a userstore and updated code that touches it

Browse Source
This commit is contained in:
John O'Keefe
2025-12-24 11:45:59 -05:00
parent d70153064f
commit 18daf41bf9
26 changed files with 434 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/helperComponents/Anime.svelte
View File

@@ -1,14 +1,12 @@
<script lang="ts">
import {
aniListAnime,
aniListLoggedIn,
malAnime,
malLoggedIn,
simklAnime,
simklLoggedIn,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import {userStore} from "../helperFunctions/userStore"
import { push } from "svelte-spa-router";
import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
import type { AniListGetSingleAnime } from "../types/AniListCurrentUserWatchListType";
import Rating from "./Rating.svelte";
import {
convertAniListDateToString,
@@ -19,14 +17,14 @@
MALAnime,
MalListStatus,
MALUploadStatus,
} from "../mal/types/MALTypes";
import type { SimklAnime } from "../simkl/types/simklTypes";
} from "../types/MALTypes";
import type { SimklAnime } from "../types/simklTypes";
import { writable } from "svelte/store";
import type {
StatusOption,
StatusOptions,
} from "../helperTypes/StatusTypes";
import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
} from "../types/StatusTypes";
import type { AniListUpdateVariables } from "../types/AniListTypes";
import { convertDateToAniList } from "../helperFunctions/convertDateToAniList";
import {
AniListDeleteEntry,
@@ -39,14 +37,10 @@
SimklSyncStatus,
} from "../../wailsjs/go/main/App";
import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
import Datepicker from "./Datepicker.svelte";
import {Badge, Tooltip} from "flowbite-svelte";
const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
let isAniListLoggedIn: boolean;
let isMalLoggedIn: boolean;
let isSimklLoggedIn: boolean;
let currentAniListAnime: AniListGetSingleAnime;
let currentMalAnime: MALAnime;
let currentSimklAnime: SimklAnime;
@@ -54,9 +48,6 @@
let isSubmitting: boolean;
let submitSuccess = writable(false);
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
malLoggedIn.subscribe((value) => (isMalLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
aniListAnime.subscribe((value) => (currentAniListAnime = value));
malAnime.subscribe((value) => (currentMalAnime = value));
simklAnime.subscribe((value) => (currentSimklAnime = value));
@@ -90,7 +81,7 @@
currentAniListAnime.data.MediaList.completedAt,
);
if (isAniListLoggedIn)
if ($userStore.anilist.isLoggedIn)
AddAnimeServiceToTable({
id: `a-${currentAniListAnime.data.MediaList.mediaId}`,
title,
@@ -108,7 +99,7 @@
notes: currentAniListAnime.data.MediaList.notes,
});
if (isMalLoggedIn) {
if ($userStore.mal.isLoggedIn) {
let startDate = "";
let finishDate = "";
if (currentMalAnime.my_list_status.start_date !== "") {
@@ -137,7 +128,7 @@
});
}
if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0)
if ($userStore.simkl.isLoggedIn && Object.keys(currentSimklAnime).length > 0)
AddAnimeServiceToTable({
id: `s-${currentSimklAnime.show.ids.simkl}`,
title: currentSimklAnime.show.title,
@@ -198,7 +189,7 @@
}
if (
isAniListLoggedIn &&
$userStore.anilist.isLoggedIn &&
currentAniListAnime.data.MediaList.mediaId !== 0
) {
let body: AniListUpdateVariables = {
@@ -239,7 +230,7 @@
);
}
if (malLoggedIn && currentMalAnime.id !== 0) {
if ($userStore.mal.isLoggedIn && currentMalAnime.id !== 0) {
let body: MALUploadStatus = {
status: submitData.status.mal,
is_rewatching: submitData.repeat > 0,
@@ -295,7 +286,7 @@
);
}
if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
if ($userStore.simkl.isLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
if (
currentSimklAnime.watched_episodes_count !== submitData.episodes
) {
@@ -379,7 +370,7 @@
const deleteEntries = async () => {
submitting.set(true);
if (
isAniListLoggedIn &&
$userStore.anilist.isLoggedIn &&
currentAniListAnime.data.MediaList.mediaId !== 0
) {
await AniListDeleteEntry(currentAniListAnime.data.MediaList.id);
@@ -396,7 +387,7 @@
notes: "",
});
}
if (malLoggedIn && currentMalAnime.id !== 0) {
if ($userStore.mal.isLoggedIn && currentMalAnime.id !== 0) {
await DeleteMyAnimeListEntry(currentMalAnime.id);
AddAnimeServiceToTable({
id: `m-${currentMalAnime.id}`,
@@ -411,7 +402,7 @@
notes: "",
});
}
if (simklLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
if ($userStore.simkl.isLoggedIn && currentSimklAnime.show.ids.simkl !== 0) {
await SimklSyncRemove(currentSimklAnime);
AddAnimeServiceToTable({
id: `s-${currentSimklAnime.show.ids.simkl}`,
@@ -444,6 +435,14 @@
currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode -
1;
}
$: validProgress = currentAniListAnime.data && (
currentAniListAnime.data.MediaList.progress >= 0 &&
(currentAniListAnime.data.MediaList.media.episodes === 0 ||
currentAniListAnime.data.MediaList.progress <= currentAniListAnime.data.MediaList.media.episodes) &&
(currentAniListAnime.data.MediaList.media.nextAiringEpisode?.episode === 0 ||
currentAniListAnime.data.MediaList.progress <= currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode - 1)
);
</script>
<form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
@@ -517,20 +516,9 @@
{max}
id="episodes"
class="border border-x-0 p-2.5 h-11 text-center text-sm block w-full placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none
{currentAniListAnime.data.MediaList.progress < 0 ||
(currentAniListAnime.data.MediaList.media.episodes >
0 &&
currentAniListAnime.data.MediaList.progress >
currentAniListAnime.data.MediaList.media
.episodes) ||
(currentAniListAnime.data.MediaList.media
.nextAiringEpisode.episode > 0 &&
currentAniListAnime.data.MediaList.progress >
currentAniListAnime.data.MediaList.media
.nextAiringEpisode.episode -
1)
{validProgress
? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
: 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'} w-24"
: 'bg-gray-700 hover:bg-gray-600 border-gray-600 text-white focus:ring-blue-500 focus:border-blue-500'}"
bind:value={
currentAniListAnime.data.MediaList.progress
}
@@ -667,7 +655,7 @@
class="border {currentAniListAnime.data.MediaList
.repeat < 0
? 'border-red-500 border-[2px] text-rose-300 focus:ring-red-500 focus:border-red-500'
: 'border-gray-500 text-white focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400 text-white"
: 'border-gray-500 focus:ring-blue-500 focus:border-blue-500'} text-sm rounded-lg block w-24 p-2.5 bg-gray-600 placeholder-gray-400 text-white"
bind:value={currentAniListAnime.data.MediaList.repeat}
required
/>
@@ -701,9 +689,9 @@
<button
disabled={isSubmitting}
id="sync-button"
class="text-white {$submitSuccess
? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
class="text-white focus:ring-4 {$submitSuccess
? 'bg-green-600 hover:bg-green-700 focus:ring-green-800'
: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
type="submit"
>
<svg
@@ -733,7 +721,6 @@
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
hover:border-gray-600"
on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList();
return push("/");
}}
>
@@ -750,9 +737,9 @@
<button
disabled={isSubmitting}
id="delete-button"
class="text-white {$submitSuccess
? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
class="text-white focus:ring-4 {$submitSuccess
? 'bg-green-600 hover:bg-green-700 focus:ring-green-800'
: 'bg-red-600 hover:bg-red-700 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
on:click={deleteEntries}
>
<svg
@@ -784,9 +771,9 @@
<button
disabled={isSubmitting}
id="sync-button"
class="text-white {$submitSuccess
? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
class="text-white focus:ring-4 {$submitSuccess
? 'bg-green-600 hover:bg-green-700 focus:ring-green-800'
: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
type="submit"
>
<svg
@@ -816,7 +803,6 @@
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
hover:border-gray-600"
on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList();
return push("/");
}}
>

64
frontend/src/helperComponents/AvatarMenu.svelte
View File

@@ -1,39 +1,9 @@
<script lang="ts">
import { Avatar } from "flowbite-svelte";
import type { AniListUser } from "../anilist/types/AniListTypes";
import {
aniListLoggedIn,
aniListUser,
malUser,
simklUser,
malLoggedIn,
simklLoggedIn,
loginToAniList,
loginToMAL,
loginToSimkl,
logoutOfAniList,
logoutOfMAL,
logoutOfSimkl
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import {userStore} from "../helperFunctions/userStore"
import * as runtime from "../../wailsjs/runtime";
import type {MyAnimeListUser} from "../mal/types/MALTypes";
import type {SimklUser} from "../simkl/types/simklTypes";
import { ShowVersion } from "../../wailsjs/go/main/App";
let currentAniListUser: AniListUser;
let currentMALUser: MyAnimeListUser;
let currentSimklUser: SimklUser;
let isAniListLoggedIn: boolean;
let isSimklLoggedIn: boolean;
let isMALLoggedIn: boolean;
aniListUser.subscribe((value) => (currentAniListUser = value));
malUser.subscribe((value) => (currentMALUser = value))
simklUser.subscribe(value => currentSimklUser = value)
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
function dropdownUser(): void {
let dropdown = document.querySelector("#userDropdown");
dropdown.classList.toggle("hidden");
@@ -56,9 +26,9 @@
<div class="relative">
<button id="userDropdownButton" on:click={dropdownUser}>
{#if isAniListLoggedIn}
{#if $userStore.anilist.isLoggedIn}
<Avatar
src={currentAniListUser.data.Viewer.avatar.medium}
src={$userStore.anilist.user.data.Viewer.avatar.medium}
class="cursor-pointer"
dot={{ color: "green" }}
/>
@@ -71,8 +41,8 @@
class="absolute hidden right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 divide-y rounded-lg shadow w-44 bg-gray-700 divide-gray-600"
>
<div class="px-4 py-3 text-sm text-white">
{#if isAniListLoggedIn}
<div>{currentAniListUser.data.Viewer.name}</div>
{#if $userStore.anilist.isLoggedIn}
<div>{$userStore.anilist.user.data.Viewer.name}</div>
{:else}
<div>You are not logged into AniList</div>
{/if}
@@ -81,60 +51,60 @@
class="py-2 text-sm text-gray-200"
aria-labelledby="dropdownUserAvatarButton"
>
{#if isAniListLoggedIn}
{#if $userStore.anilist.isLoggedIn}
<li>
<button
on:click={logoutOfAniList}
on:click={() => userStore.logout("anilist")}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
>
<span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser.data.Viewer.name}
<span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {$userStore.anilist.user.data.Viewer.name}
</button>
</li>
{:else}
<li>
<button on:click={() => {
dropdownUser()
loginToAniList()
userStore.checkProvider("anilist")
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
<span class="maple-font text-lg mr-4">A</span>Login to AniList
</button>
</li>
{/if}
{#if isMALLoggedIn}
{#if $userStore.mal.isLoggedIn}
<li>
<button
on:click={logoutOfMAL}
on:click={() => userStore.logout("mal")}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
>
<span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
<span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {$userStore.mal.user.name}
</button>
</li>
{:else}
<li>
<button on:click={() => {
dropdownUser()
loginToMAL()
userStore.checkProvider("mal")
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
<span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
</button>
</li>
{/if}
{#if isSimklLoggedIn}
{#if $userStore.simkl.isLoggedIn}
<li>
<button
on:click={logoutOfSimkl}
on:click={() => userStore.logout("simkl")}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
>
<span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser.user.name}
<span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {$userStore.simkl.user.user.name}
</button>
</li>
{:else}
<li>
<button on:click={() => {
dropdownUser()
loginToSimkl()
userStore.checkProvider("simkl")
}}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
<span class="maple-font text-lg mr-4">S</span>Login to Simkl

27
frontend/src/helperComponents/Header.svelte
View File

@@ -1,23 +1,10 @@
<script lang="ts">
import Search from "./Search.svelte"
import {
aniListLoggedIn,
loginToAniList,
loginToMAL,
loginToSimkl,
malLoggedIn,
simklLoggedIn,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
import AvatarMenu from "./AvatarMenu.svelte";
import logo from "../assets/images/AniTrackLogo.svg"
import {userStore} from "../helperFunctions/userStore"
let isAniListLoggedIn: boolean
let isSimklLoggedIn: boolean
let isMALLoggedIn: boolean
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
malLoggedIn.subscribe((value) => isMALLoggedIn = value)
</script>
<nav class="border-gray-200 bg-gray-900">
@@ -47,22 +34,22 @@
<div class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-700 min-[950px]:border-0 bg-gray-800 min-[950px]:bg-transparent rounded-lg" id="navbar-user">
<ul class="flex flex-col font-medium pb-6 min-[950px]:p-0 mt-4 min-[950px]:space-x-8 rtl:space-x-reverse min-[950px]:flex-row min-[950px]:mt-0">
<li>
{#if !isAniListLoggedIn}
<button on:click={loginToAniList}>
{#if !$userStore.anilist.isLoggedIn}
<button on:click={() => userStore.checkProvider("anilist")}>
<!-- class="block py-2 px-3 w-full min-[950px]:w-auto rounded text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
AniList Login
</button>
{/if}
{#if !isMALLoggedIn}
<button on:click={loginToMAL}>
{#if !$userStore.mal.isLoggedIn}
<button on:click={() => userStore.checkProvider("mal")}>
<!-- class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
MyAnimeList Login
</button>
{/if}
</li>
<li>
{#if !isSimklLoggedIn}
<button on:click={loginToSimkl}>
{#if !$userStore.simkl.isLoggedIn}
<button on:click={() => userStore.checkProvider("simkl")}>
<!-- class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
Simkl Login
</button>

4
frontend/src/helperComponents/Pagination.svelte
View File

@@ -6,9 +6,9 @@
watchListPage,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
import type {AniListCurrentUserWatchList} from "../types/AniListCurrentUserWatchListType"
import {GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
import {MediaListSort} from "../anilist/types/AniListTypes";
import {MediaListSort} from "../types/AniListTypes";
let aniListWatchListLoaded: AniListCurrentUserWatchList
let page: number

2
frontend/src/helperComponents/Search.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import {AniListSearch} from "../../wailsjs/go/main/App";
import type {AniSearchList} from "../anilist/types/AniListTypes";
import type {AniSearchList} from "../types/AniListTypes";
import {push} from "svelte-spa-router";
let aniSearch = ""

71
frontend/src/helperComponents/WatchList.svelte
View File

@@ -1,68 +1,59 @@
<script lang="ts">
import {
aniListLoggedIn,
aniListWatchlist,
GetAnimeSingleItem,
loading,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import {push} from "svelte-spa-router";
import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
import type {AniListCurrentUserWatchList} from "../types/AniListCurrentUserWatchListType"
import {Rating} from "flowbite-svelte";
import loader from '../helperFunctions/loader'
let isAniListLoggedIn: boolean
let aniListWatchListLoaded: AniListCurrentUserWatchList
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
</script>
<div>
{#if isAniListLoggedIn}
<div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center">
<h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
<div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center">
<h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{#each aniListWatchListLoaded.data.Page.mediaList as media}
<div use:loader={loading} class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
<div class="flex flex-col items-center group">
<button on:click={() => {
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{#each aniListWatchListLoaded.data.Page.mediaList as media}
<div use:loader={loading}
class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
<div class="flex flex-col items-center group">
<button on:click={() => {
push(`#/anime/${media.media.id}`)
// loading.set(true)
// GetAniListSingleItem(media.media.id, true).then(() => {
// loading.set(false)
//
// })
}}
>
<img class="rounded-lg" src={media.media.coverImage.large} alt={
>
<img class="rounded-lg" src={media.media.coverImage.large} alt={
media.media.title.english === "" ?
media.media.title.romaji :
media.media.title.english
}/>
</button>
<Rating id="anime-rating" total={5} size={35} rating={media.score/2.0}/>
<button class="mt-4 text-md font-semibold text-white-700"
on:click={() => GetAnimeSingleItem(media.media.id, true)}>
{
media.media.title.english === "" ?
media.media.title.romaji :
media.media.title.english
}
</button>
<p class="mt-1 text-lg font-medium text-white-900">{media.progress}
/ {media.media.nextAiringEpisode.episode !== 0 ?
media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
{#if media.media.episodes > 0}
<p class="mt-1 text-lg font-medium text-white-900">Total
Episodes: {media.media.episodes}</p>
{/if}
</div>
</button>
<Rating id="anime-rating" total={5} size={35} rating={media.score/2.0}/>
<button class="mt-4 text-md font-semibold text-white-700"
on:click={() => GetAnimeSingleItem(media.media.id, true)}>
{
media.media.title.english === "" ?
media.media.title.romaji :
media.media.title.english
}
</button>
<p class="mt-1 text-lg font-medium text-white-900">{media.progress}
/ {media.media.nextAiringEpisode.episode !== 0 ?
media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
{#if media.media.episodes > 0}
<p class="mt-1 text-lg font-medium text-white-900">Total
Episodes: {media.media.episodes}</p>
{/if}
</div>
{/each}
</div>
</div>
{/each}
</div>
{/if}
</div>
</div>