diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Hololive/hololive.ts | 2 | ||||
| -rw-r--r-- | src/routes/hololive/+page.svelte | 4 | ||||
| -rw-r--r-- | src/routes/user/[user]/+page.svelte | 121 |
3 files changed, 99 insertions, 28 deletions
diff --git a/src/lib/Hololive/hololive.ts b/src/lib/Hololive/hololive.ts index 6ad97430..4b9ed25e 100644 --- a/src/lib/Hololive/hololive.ts +++ b/src/lib/Hololive/hololive.ts @@ -12,3 +12,5 @@ export interface ParseResult { lives: Live[]; dict: Record<string, string>; } + +export const typeSchedule = (schedule: object) => schedule as ParseResult; diff --git a/src/routes/hololive/+page.svelte b/src/routes/hololive/+page.svelte index 866fc105..109fbc42 100644 --- a/src/routes/hololive/+page.svelte +++ b/src/routes/hololive/+page.svelte @@ -9,7 +9,7 @@ import root from '$lib/Utility/root'; import identity from '$stores/identity'; import Lives from '$lib/Hololive/Lives.svelte'; - import type { ParseResult } from '$lib/Hololive/hololive'; + import { typeSchedule } from '$lib/Hololive/hololive'; let schedulePromise: Promise<Response>; let pinnedStreams: string[] = []; @@ -43,8 +43,6 @@ setSchedule(); }; - - const typeSchedule = (schedule: any) => schedule as ParseResult; </script> <HeadTitle route="hololive Schedule" path="/hololive" /> diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte index 910a99e2..0d98c9ce 100644 --- a/src/routes/user/[user]/+page.svelte +++ b/src/routes/user/[user]/+page.svelte @@ -1,4 +1,5 @@ <script lang="ts"> + import { typeSchedule, type ParseResult } from '$lib/Hololive/hololive'; import { user, type User } from '$lib/Data/AniList/user'; import HeadTitle from '$lib/Home/HeadTitle.svelte'; import Message from '$lib/Loading/Message.svelte'; @@ -8,15 +9,20 @@ import locale from '$stores/locale.js'; import { onMount } from 'svelte'; import authorisedUsers from '$lib/Data/Static/authorised.json'; - import tooltip from '$lib/Tooltip/tooltip.js'; + import tooltip from '$lib/Tooltip/tooltip'; import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte'; import identity from '$stores/identity'; import SettingHint from '$lib/Settings/SettingHint.svelte'; + import proxy from '$lib/Utility/proxy'; + import { parseScheduleHtml } from '$lib/Data/hololive'; + import type { UserPreferences } from '$lib/Database/userPreferences.js'; export let data; let userData: User | undefined = undefined; let error = false; + let schedule: ParseResult | undefined = undefined; + let preferences: UserPreferences | undefined = undefined; $: displayBadges = (username: string, badges: number | string) => $locale({ @@ -32,6 +38,26 @@ .catch(() => (error = true)); }); + onMount(async () => { + schedule = typeSchedule( + parseScheduleHtml( + await ( + await fetch(proxy('https://schedule.hololive.tv'), { + headers: { + Cookie: 'timezone=Asia/Tokyo' + } + }) + ).text() + ) + ); + }); + + $: if (userData && userData.id === $identity.id) { + fetch(root(`/api/preferences?id=${userData.id}`)) + .then((rawPreferences) => rawPreferences.json()) + .then((JSONpreferences) => (preferences = JSONpreferences)); + } + // 8.5827814569536423841e0 </script> @@ -117,39 +143,62 @@ {:catch} {displayBadges(userData.name, '?')} {/await} + + {#if schedule && preferences && preferences.pinned_hololive_streams.length > 0} + <p /> + + <div class="hololive-badges"> + {#each preferences.pinned_hololive_streams as stream} + {@const avatar = schedule.dict[stream]} + + {#if avatar} + <a + href={`https://www.youtube.com/results?search_query=${encodeURIComponent( + stream + )}`} + target="_blank" + > + <img + src={avatar} + alt="Avatar" + class="user-grid-hololive-badges" + title={stream} + use:tooltip + /> + </a> + {/if} + {/each} + </div> + {/if} </div> </div> </div> {/if} </div> - {#if userData && userData.id === $identity.id} - {#await fetch(root(`/api/preferences?id=${userData.id}`)) then rawPreferences} - {#await rawPreferences.json() then preferences} - <p /> - - <details open> - <summary>{$locale().user.preferences.title}</summary> - - <input - type="checkbox" - on:change={() => { - if (userData) - fetch(root(`/api/preferences?id=${userData.id}&toggleHideMissingBadges`), { - method: 'PUT' - }); - }} - checked={preferences.hide_missing_badges} - /> - {$locale().user.preferences.hideMissingBadges.title} - <SettingHint lineBreak>{$locale().user.preferences.hideMissingBadges.hint}</SettingHint> - </details> - {/await} - {/await} + {#if preferences} + <p /> + + <details open> + <summary>{$locale().user.preferences.title}</summary> + + <input + type="checkbox" + on:change={() => { + if (userData) + fetch(root(`/api/preferences?id=${userData.id}&toggleHideMissingBadges`), { + method: 'PUT' + }); + }} + checked={preferences.hide_missing_badges} + /> + {$locale().user.preferences.hideMissingBadges.title} + <SettingHint lineBreak>{$locale().user.preferences.hideMissingBadges.hint}</SettingHint> + </details> {/if} {/if} -<style> +<style lang="scss"> #user-grid-content { display: flex; flex-wrap: wrap; @@ -185,4 +234,26 @@ visibility: hidden; height: 4.5em; } + + .user-grid-hololive-badges { + $transition: transform 0.3s ease; + $size: 2em; + + border-radius: 8px; + width: $size; + height: $size; + object-fit: cover; + transition: $transition; + + &:hover { + z-index: 2; + transition: $transition; + transform: scale(1.1); + } + } + + .hololive-badges { + display: flex; + gap: 0.75em; + } </style> |