diff options
| author | Fuwn <[email protected]> | 2024-02-18 05:56:20 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-02-18 05:56:20 -0800 |
| commit | 752ed6a56716dc66d75d5e9c9fab8827c64c3d11 (patch) | |
| tree | c6c14892480d8285e6fd9e3195bd8fcf31ee0fba | |
| parent | fix(user): user correct localstorage key (diff) | |
| download | due.moe-752ed6a56716dc66d75d5e9c9fab8827c64c3d11.tar.xz due.moe-752ed6a56716dc66d75d5e9c9fab8827c64c3d11.zip | |
feat(stream): avatars
| -rw-r--r-- | src/lib/Hololive/Lives.svelte | 6 | ||||
| -rw-r--r-- | src/lib/Hololive/Stream.svelte | 29 |
2 files changed, 30 insertions, 5 deletions
diff --git a/src/lib/Hololive/Lives.svelte b/src/lib/Hololive/Lives.svelte index ca263c56..25d5b0dd 100644 --- a/src/lib/Hololive/Lives.svelte +++ b/src/lib/Hololive/Lives.svelte @@ -62,7 +62,7 @@ <div class="container"> {#each categorisedStreams.live as live} - <Stream {live} {pinStream} {pinnedStreams} /> + <Stream {live} {pinStream} {pinnedStreams} icon={schedule.dict[live.streamer]} /> {/each} </div> @@ -70,7 +70,7 @@ <div class="container"> {#each categorisedStreams.upcoming as live} - <Stream {live} {pinStream} {pinnedStreams} /> + <Stream {live} {pinStream} {pinnedStreams} icon={schedule.dict[live.streamer]} /> {/each} </div> @@ -78,7 +78,7 @@ <div class="container"> {#each categorisedStreams.ended as live} - <Stream {live} {pinStream} {pinnedStreams} /> + <Stream {live} {pinStream} {pinnedStreams} icon={schedule.dict[live.streamer]} /> {/each} </div> diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte index 3d59fd72..22a3edb4 100644 --- a/src/lib/Hololive/Stream.svelte +++ b/src/lib/Hololive/Stream.svelte @@ -6,6 +6,7 @@ export let live: any; export let pinStream: (streamer: string) => void; export let pinnedStreams: string[]; + export let icon: string; </script> <div class="stream card"> @@ -32,6 +33,7 @@ >{:else if new Date(live.time).getTime() < Date.now()} <span class="ended">{$locale().hololive.ended}</span>{:else} <span class="upcoming">{$locale().hololive.upcoming}</span>{/if}] + <img src={icon} alt="Profile" class="stream-icon" /> <b>{live.streamer}</b> <span class="opaque">|</span> {$locale().hololive.dateFormatter(new Date(live.time))} {#if live.guests.length > 0} @@ -53,6 +55,8 @@ </div> <style lang="scss"> + $transition: transform 0.3s ease; + .preview { // margin: 0.15rem; @@ -60,14 +64,14 @@ border-radius: 8px; height: 20vh; object-fit: cover; - transition: transform 0.3s ease; + transition: $transition; } &:hover { img { position: relative; z-index: 2; - transition: transform 0.3s ease; + transition: $transition; transform: scale(1.05); } } @@ -102,5 +106,26 @@ .stream-heading { padding-right: 2em; + padding-left: 2.5em; + } + + .stream-icon { + $size: 2em; + + position: absolute; + top: 0; + left: 0; + border-radius: 8px; + width: $size; + height: $size; + margin: 0.75rem; + object-fit: cover; + transition: $transition; + + &:hover { + z-index: 2; + transition: $transition; + transform: scale(1.1); + } } </style> |