diff options
| author | Fuwn <[email protected]> | 2024-01-02 02:14:22 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-02 02:14:22 -0800 |
| commit | 1bf5e3fe55defe95114c9df69b62cc1b40761a0b (patch) | |
| tree | c8f1269696769201156799bb136dd06243270bda /src/lib/Media/Cover/HoverCover.svelte | |
| parent | fix(hovercover): no hover null (diff) | |
| download | due.moe-1bf5e3fe55defe95114c9df69b62cc1b40761a0b.tar.xz due.moe-1bf5e3fe55defe95114c9df69b62cc1b40761a0b.zip | |
refactor(media): move hover cover
Diffstat (limited to 'src/lib/Media/Cover/HoverCover.svelte')
| -rw-r--r-- | src/lib/Media/Cover/HoverCover.svelte | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte new file mode 100644 index 00000000..b0c15fc5 --- /dev/null +++ b/src/lib/Media/Cover/HoverCover.svelte @@ -0,0 +1,34 @@ +<script lang="ts"> + import type { Media } from '$lib/AniList/media'; + import type { SubsPleaseEpisode } from '../Anime/Airing/Subtitled/subsPlease'; + + export let hovering = false; + export let hoveredItem: SubsPleaseEpisode | null = null; + export let hoveredMedia: Media | null = null; + export let imageStyle = ''; +</script> + +{#if hovering} + <img + class="hover-image show" + src={hoveredMedia + ? hoveredMedia.coverImage.extraLarge + : `https://subsplease.org${hoveredItem?.image_url}`} + alt="Media Cover" + style={imageStyle} + /> +{/if} + +<style> + .hover-image { + position: fixed; + z-index: 1000; + width: 300px; + height: auto; + display: none; + } + + .show { + display: block; + } +</style> |