Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-04-21 10:51:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: initial subtitle track styling

Browse source
This commit is contained in:
ThaUnknown 2025-04-27 17:31:35 +02:00
parent ef4303810f
commit 41994fe7fb
No known key found for this signature in database
6 changed files with 63 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "ui", "name": "ui",
"version": "6.0.15", "version": "6.0.16",
"license": "BUSL-1.1", "license": "BUSL-1.1",
"private": true, "private": true,
"packageManager": "pnpm@9.14.4", "packageManager": "pnpm@9.14.4",

4
src/lib/components/KeepAlive.svelte
View file

@ -27,16 +27,12 @@
export let id: string export let id: string
// eslint-disable-next-line no-unused-vars
type $$Props = HTMLAttributes<HTMLDivElement> & { id: string } type $$Props = HTMLAttributes<HTMLDivElement> & { id: string }
function mount (node: HTMLDivElement) { function mount (node: HTMLDivElement) {
const entry = keep.get(id) const entry = keep.get(id)
if (entry) node.appendChild(entry.node) if (entry) node.appendChild(entry.node)
} }
console.log($$props.$$slots)
</script> </script>
<div use:mount {...$$restProps} /> <div use:mount {...$$restProps} />

4
src/lib/components/Shadow.svelte
View file

@ -2,8 +2,6 @@
import dompurify from 'dompurify' import dompurify from 'dompurify'
import { marked } from 'marked' import { marked } from 'marked'
import { dragScroll } from '$lib/modules/navigate'
marked.setOptions({ marked.setOptions({
gfm: true, gfm: true,
breaks: true, breaks: true,
@ -57,4 +55,4 @@
export { className as class } export { className as class }
</script> </script>
<div use:shadow={html} class={className} use:dragScroll /> <div use:shadow={html} class={className} />

19
src/lib/components/ui/player/subtitles.ts
View file

@ -48,15 +48,7 @@ export default class Subtitles {
this.selectCaptions(value) this.selectCaptions(value)
}) })
native.subtitles(this.selected.hash, this.selected.id, (subtitle: { text: string, time: number, duration: number, style?: string }, trackNumber) => { const tracks = native.tracks(this.selected.hash, this.selected.id).then(tracklist => {
const { events, meta, styles } = this.track(trackNumber)
if (events.has(subtitle)) return
const event = this.constructSub(subtitle, meta.type !== 'ass', events.size, '' + (styles[subtitle.style ?? 'Default'] ?? 0))
events.add(subtitle, event)
if (Number(this.current.value) === trackNumber) this.renderer?.createEvent(event)
})
native.tracks(this.selected.hash, this.selected.id).then(tracklist => {
for (const track of tracklist) { for (const track of tracklist) {
const newtrack = this.track(track.number) const newtrack = this.track(track.number)
newtrack.styles.Default = 0 newtrack.styles.Default = 0
@ -89,6 +81,15 @@ export default class Subtitles {
} }
}) })
native.subtitles(this.selected.hash, this.selected.id, async (subtitle: { text: string, time: number, duration: number, style?: string }, trackNumber) => {
await tracks
const { events, meta, styles } = this.track(trackNumber)
if (events.has(subtitle)) return
const event = this.constructSub(subtitle, meta.type !== 'ass', events.size, '' + (styles[subtitle.style ?? 'Default'] ?? 0))
events.add(subtitle, event)
if (Number(this.current.value) === trackNumber) this.renderer?.createEvent(event)
})
native.attachments(this.selected.hash, this.selected.id).then(attachments => { native.attachments(this.selected.hash, this.selected.id).then(attachments => {
for (const attachment of attachments) { for (const attachment of attachments) {
if (fontRx.test(attachment.filename) || attachment.mimetype.toLowerCase().includes('font')) { if (fontRx.test(attachment.filename) || attachment.mimetype.toLowerCase().includes('font')) {

102
src/lib/components/ui/profile/Profile.svelte
View file

@ -18,61 +18,59 @@
export let user: ResultOf<typeof UserFrag> export let user: ResultOf<typeof UserFrag>
</script> </script>
{#if user} {@const name = user.name}
{@const name = user.name} {@const avatar = user.avatar?.medium ?? ''}
{@const avatar = user.avatar?.medium ?? ''} {@const banner = user.bannerImage ?? ''}
{@const banner = user.bannerImage ?? ''} {@const bubble = user.donatorBadge}
{@const bubble = user.donatorBadge} <div class='flex'>
<div class='flex'> <Popover.Root>
<Popover.Root> <Popover.Trigger class='flex'>
<Popover.Trigger class='flex'> <Avatar.Root class={className}>
<Avatar.Root class={className}> <Avatar.Image src={avatar} alt={name} />
<Avatar.Image src={avatar} alt={name} /> <Avatar.Fallback>{name}</Avatar.Fallback>
<Avatar.Fallback>{name}</Avatar.Fallback> </Avatar.Root>
</Avatar.Root> </Popover.Trigger>
</Popover.Trigger> <Popover.Content class='p-1 m-3 rounded-md shadow root-bg border-none w-auto' style='--theme-base-color: {user.options?.profileColor ?? '#000'}'>
<Popover.Content class='p-1 m-3 rounded-md shadow root-bg border-none w-auto' style='--theme-base-color: {user.options?.profileColor ?? '#000'}'> <div class='w-[300px] rounded core-bg gap-2 flex flex-col pb-2'>
<div class='w-[300px] rounded core-bg gap-2 flex flex-col pb-2'> <div class={cn('w-full h-[105px] relative p-3 flex items-end', !banner && 'bg-white/10')}>
<div class={cn('w-full h-[105px] relative p-3 flex items-end', !banner && 'bg-white/10')}> {#if banner}
{#if banner} <img src={banner} alt='banner' class='absolute top-0 left-0 w-full h-full rounded-t opacity-50 pointer-events-none object-cover' />
<img src={banner} alt='banner' class='absolute top-0 left-0 w-full h-full rounded-t opacity-50 pointer-events-none object-cover' /> {/if}
{/if} <Avatar.Root class='inline-block size-20'>
<Avatar.Root class='inline-block size-20'> <Avatar.Image src={avatar} alt={name} />
<Avatar.Image src={avatar} alt={name} /> <Avatar.Fallback>{name}</Avatar.Fallback>
<Avatar.Fallback>{name}</Avatar.Fallback> </Avatar.Root>
</Avatar.Root> <div class='min-w-0 flex flex-col pl-3 relative'>
<div class='min-w-0 flex flex-col pl-3 relative'> <div class='font-extrabold pb-0.5 text-2xl text-ellipsis overflow-clip pr-0.5'>
<div class='font-extrabold pb-0.5 text-2xl text-ellipsis overflow-clip pr-0.5'> {name}
{name} </div>
</div> <div class='details text-neutral-200 flex text-[11px]'>
<div class='details text-neutral-200 flex text-[11px]'> {#if user.isFollower}
{#if user.isFollower} <span class='text-nowrap flex items-center'>Follows you</span>
<span class='text-nowrap flex items-center'>Follows you</span> {/if}
{/if} <span class='text-nowrap flex items-center'>Joined {since(new Date((user.createdAt ?? 0) * 1000))}</span>
<span class='text-nowrap flex items-center'>Joined {since(new Date((user.createdAt ?? 0) * 1000))}</span> </div>
</div>
{#if bubble && bubble !== 'Donator'}
<div class='-left-5 -top-11 absolute text-sm'>
<div class='px-4 py-2 rounded-2xl bg-mix bubbles relative leading-tight'>
<span class='text-contrast'>
{bubble}
</span>
</div> </div>
</div> </div>
{#if bubble && bubble !== 'Donator'} {/if}
<div class='-left-5 -top-11 absolute text-sm'>
<div class='px-4 py-2 rounded-2xl bg-mix bubbles relative leading-tight'>
<span class='text-contrast'>
{bubble}
</span>
</div>
</div>
{/if}
</div>
<Shadow html={user.about ?? 'No user description'} class='w-full max-h-[200px] text-sm py-2 px-4 overflow-y-auto overflow-x-clip' />
<div class='details text-neutral-200 flex text-[11px] px-4'>
<span class='text-nowrap flex items-center'>{user.statistics?.anime?.count ?? 0} anime</span>
<span class='text-nowrap flex items-center'>{user.statistics?.anime?.episodesWatched ?? 0} episodes</span>
<span class='text-nowrap flex items-center'>{since(new Date(Date.now() - (user.statistics?.anime?.minutesWatched ?? 0) * 60 * 1000)).replace('ago', 'watched')}</span>
</div>
</div> </div>
</Popover.Content> <Shadow html={user.about ?? 'No user description'} class='w-full max-h-[200px] text-sm py-2 px-4 overflow-y-auto overflow-x-clip' />
</Popover.Root> <div class='details text-neutral-200 flex text-[11px] px-4'>
</div> <span class='text-nowrap flex items-center'>{user.statistics?.anime?.count ?? 0} anime</span>
{/if} <span class='text-nowrap flex items-center'>{user.statistics?.anime?.episodesWatched ?? 0} episodes</span>
<span class='text-nowrap flex items-center'>{since(new Date(Date.now() - (user.statistics?.anime?.minutesWatched ?? 0) * 60 * 1000)).replace('ago', 'watched')}</span>
</div>
</div>
</Popover.Content>
</Popover.Root>
</div>
<style> <style>
:global(.root-bg) { :global(.root-bg) {

2
src/routes/app/anime/[id]/thread/[threadId]/+page.svelte
View file

@ -48,7 +48,7 @@
<div class='font-bold mb-2 line-clamp-1 flex leading-none items-center'> <div class='font-bold mb-2 line-clamp-1 flex leading-none items-center'>
{#if thread.user} {#if thread.user}
<Profile user={thread.user} class='size-8 mr-4' /> <Profile user={thread.user} class='size-8 mr-4' />
{thread.user.name ?? 'N/A'} {thread.user.name}
{/if} {/if}
</div> </div>
<div class='flex ml-2 text-[12.8px] leading-none mt-0.5'> <div class='flex ml-2 text-[12.8px] leading-none mt-0.5'>