Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-04-14 05:20:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: RSS Episode dimming

Browse source
This commit is contained in:
RockinChaos 2024-08-01 16:00:57 -07:00
parent 841fe721a4
commit 656e1ff514
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
common/components/cards/EpisodeCard.svelte
View file

@ -12,7 +12,7 @@
/** @type {import('@/modules/al.d.ts').Media | null} */
const media = data.media && anilistClient.mediaCache[data.media.id]
const episodeThumbnail = ((!media?.mediaListEntry?.status || !(media.mediaListEntry.status === 'CURRENT' && media.mediaListEntry.progress < data.episode)) && data.episodeData?.image) || media?.bannerImage || media?.coverImage.extraLarge || ' '
const episodeThumbnail = ((!media?.mediaListEntry?.status || !((media.mediaListEntry.status === 'CURRENT' || media.mediaListEntry.status === 'PAUSED' || media.mediaListEntry.status === 'DROPPED') && media.mediaListEntry.progress < data.episode)) && data.episodeData?.image) || media?.bannerImage || media?.coverImage.extraLarge || ' '
const view = getContext('view')
function viewMedia () {
@ -23,13 +23,15 @@
}
const progress = liveAnimeEpisodeProgress(media?.id, data?.episode)
const watched = media?.mediaListEntry?.status === 'COMPLETED'
const completed = !watched && media?.mediaListEntry?.progress >= data?.episode
</script>
<div class='d-flex p-20 pb-10 position-relative episode-card' use:hoverClick={[data.onclick || viewMedia, setHoverState]}>
{#if preview}
<EpisodePreviewCard {data} />
{/if}
<div class='item d-flex flex-column h-full pointer content-visibility-auto'>
<div class='item d-flex flex-column h-full pointer content-visibility-auto' class:opacity-half={completed}>
<div class='image h-200 w-full position-relative rounded overflow-hidden d-flex justify-content-between align-items-end text-white' class:bg-black={episodeThumbnail === ' '}>
<img loading='lazy' src={episodeThumbnail} alt='cover' class='cover-img w-full h-full position-absolute' style:--color={media?.coverImage?.color || '#1890ff'} />
{#if data.failed}

5
common/components/cards/EpisodePreviewCard.svelte
View file

@ -2,14 +2,17 @@
import { statusColorMap, formatMap } from '@/modules/anime.js'
import { since } from '@/modules/util'
import { liveAnimeEpisodeProgress } from '@/modules/animeprogress.js'
import { anilistClient } from "@/modules/anilist"
export let data
/** @type {import('@/modules/al.d.ts').Media | null} */
const media = data.media
const episodeThumbnail = ((!media?.mediaListEntry?.status || !(media.mediaListEntry.status === 'CURRENT' && media.mediaListEntry.progress < data.episode)) && data.episodeData?.image) || media?.bannerImage || media?.coverImage.extraLarge || ' '
const episodeThumbnail = ((!media?.mediaListEntry?.status || !((media.mediaListEntry.status === 'CURRENT' || media.mediaListEntry.status === 'PAUSED' || media.mediaListEntry.status === 'DROPPED') && media.mediaListEntry.progress < data.episode)) && data.episodeData?.image) || media?.bannerImage || media?.coverImage.extraLarge || ' '
let hide = true
const progress = liveAnimeEpisodeProgress(media?.id, data?.episode)
const watched = media?.mediaListEntry?.status === 'COMPLETED'
const completed = !watched && media?.mediaListEntry?.progress >= data?.episode
</script>
<div class='position-absolute w-400 mh-400 absolute-container top-0 m-auto bg-dark-light z-30 rounded overflow-hidden pointer d-flex flex-column'>