diff options
Diffstat (limited to 'src/lib/Hololive/Stream.svelte')
| -rw-r--r-- | src/lib/Hololive/Stream.svelte | 290 |
1 files changed, 145 insertions, 145 deletions
diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte index cde3be68..12681acb 100644 --- a/src/lib/Hololive/Stream.svelte +++ b/src/lib/Hololive/Stream.svelte @@ -1,153 +1,153 @@ <script lang="ts"> - import ParallaxImage from '$lib/Image/ParallaxImage.svelte'; - import root from '$lib/Utility/root'; - import identity from '$stores/identity'; - import locale from '$stores/locale'; - import Icon from '@iconify/svelte'; - - export let live: any; - export let pinStream: (streamer: string) => void; - export let pinnedStreams: string[]; - export let icon: string; + import ParallaxImage from '$lib/Image/ParallaxImage.svelte'; + import root from '$lib/Utility/root'; + import identity from '$stores/identity'; + import locale from '$stores/locale'; + import Icon from '@iconify/svelte'; + + export let live: any; + export let pinStream: (streamer: string) => void; + export let pinnedStreams: string[]; + export let icon: string; </script> <div class="stream card"> - {#if $identity.id !== -2} - <div class="pin-icon"> - <a - href={'#'} - on:click={(e) => { - e.preventDefault(); - pinStream(live.streamer); - }} - > - <Icon - icon={`pajamas:thumbtack${pinnedStreams.includes(live.streamer) ? '-solid' : ''}`} - width="1em" - /> - </a> - </div> - {/if} - - <p class="stream-heading"> - {#if live.streaming} - <b class="live">{$locale().hololive.live}</b - >{: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} - <span class="opaque">|</span> - {#if icon} - <a href={root(`/hololive/${encodeURIComponent(live.streamer)}`)}> - <img src={icon} alt="Avatar" class="stream-icon" /> - </a> - {/if} - <a href={root(`/hololive/${encodeURIComponent(live.streamer)}`)} class="streamer-link"> - <b>{live.streamer}</b> - </a> - <br /> - {$locale().hololive.dateFormatter(new Date(live.time))} - {#if live.guests.length > 0} - {$locale().hololive.with}{live.guests - .join($locale().hololive.comma) - .replace( - new RegExp(`${$locale().hololive.comma}([^${$locale().hololive.commaNoSpace}]+)$`, 'g'), - `${$locale().hololive.comma}${$locale().hololive.ampersand}$1` - )} - {/if} - </p> - - <a href={live.link} class="preview" target="_blank"> - <span class="preview-image"> - <ParallaxImage - source={live.livePreviewImage} - alternativeText="Stream Thumbnail" - limit={12.5} - duration={2750} - /> - </span> - </a> + {#if $identity.id !== -2} + <div class="pin-icon"> + <a + href={'#'} + on:click={(e) => { + e.preventDefault(); + pinStream(live.streamer); + }} + > + <Icon + icon={`pajamas:thumbtack${pinnedStreams.includes(live.streamer) ? '-solid' : ''}`} + width="1em" + /> + </a> + </div> + {/if} + + <p class="stream-heading"> + {#if live.streaming} + <b class="live">{$locale().hololive.live}</b + >{: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} + <span class="opaque">|</span> + {#if icon} + <a href={root(`/hololive/${encodeURIComponent(live.streamer)}`)}> + <img src={icon} alt="Avatar" class="stream-icon" /> + </a> + {/if} + <a href={root(`/hololive/${encodeURIComponent(live.streamer)}`)} class="streamer-link"> + <b>{live.streamer}</b> + </a> + <br /> + {$locale().hololive.dateFormatter(new Date(live.time))} + {#if live.guests.length > 0} + {$locale().hololive.with}{live.guests + .join($locale().hololive.comma) + .replace( + new RegExp(`${$locale().hololive.comma}([^${$locale().hololive.commaNoSpace}]+)$`, 'g'), + `${$locale().hololive.comma}${$locale().hololive.ampersand}$1` + )} + {/if} + </p> + + <a href={live.link} class="preview" target="_blank"> + <span class="preview-image"> + <ParallaxImage + source={live.livePreviewImage} + alternativeText="Stream Thumbnail" + limit={12.5} + duration={2750} + /> + </span> + </a> </div> <style lang="scss"> - $transition: transform 0.3s ease; - - .preview { - // margin: 0.15rem; - - :global(img) { - border-radius: 8px; - height: 20vh; - object-fit: cover; - } - - .preview-image { - transition: $transition; - } - - &:hover { - .preview-image { - position: relative; - z-index: 2; - transition: $transition; - transform: scale(1.025) !important; - } - } - - display: flex; - justify-content: center; - align-items: center; - } - - .live { - color: var(--base0F); - } - - .upcoming { - color: var(--base0C); - } - - .ended { - color: var(--base0D); - } - - .pin-icon { - position: absolute; - right: 0; - top: 0; - padding: 0.75rem; - } - - .stream { - position: relative; - } - - .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); - } - } - - .streamer-link { - color: var(--fg); - text-decoration: none; - } + $transition: transform 0.3s ease; + + .preview { + // margin: 0.15rem; + + :global(img) { + border-radius: 8px; + height: 20vh; + object-fit: cover; + } + + .preview-image { + transition: $transition; + } + + &:hover { + .preview-image { + position: relative; + z-index: 2; + transition: $transition; + transform: scale(1.025) !important; + } + } + + display: flex; + justify-content: center; + align-items: center; + } + + .live { + color: var(--base0F); + } + + .upcoming { + color: var(--base0C); + } + + .ended { + color: var(--base0D); + } + + .pin-icon { + position: absolute; + right: 0; + top: 0; + padding: 0.75rem; + } + + .stream { + position: relative; + } + + .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); + } + } + + .streamer-link { + color: var(--fg); + text-decoration: none; + } </style> |