Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-04-12 22:00:21 +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",
"version": "6.0.15",
"version": "6.0.16",
"license": "BUSL-1.1",
"private": true,
"packageManager": "pnpm@9.14.4",

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

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

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

@ -2,8 +2,6 @@
import dompurify from 'dompurify'
import { marked } from 'marked'
import { dragScroll } from '$lib/modules/navigate'
marked.setOptions({
gfm: true,
breaks: true,
@ -57,4 +55,4 @@
export { className as class }
</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)
})
native.subtitles(this.selected.hash, this.selected.id, (subtitle: { text: string, time: number, duration: number, style?: string }, trackNumber) => {
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 => {
const tracks = native.tracks(this.selected.hash, this.selected.id).then(tracklist => {
for (const track of tracklist) {
const newtrack = this.track(track.number)
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 => {
for (const attachment of attachments) {
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>
</script>
{#if user}
{@const name = user.name}
{@const avatar = user.avatar?.medium ?? ''}
{@const banner = user.bannerImage ?? ''}
{@const bubble = user.donatorBadge}
<div class='flex'>
<Popover.Root>
<Popover.Trigger class='flex'>
<Avatar.Root class={className}>
<Avatar.Image src={avatar} alt={name} />
<Avatar.Fallback>{name}</Avatar.Fallback>
</Avatar.Root>
</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'}'>
<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')}>
{#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' />
{/if}
<Avatar.Root class='inline-block size-20'>
<Avatar.Image src={avatar} alt={name} />
<Avatar.Fallback>{name}</Avatar.Fallback>
</Avatar.Root>
<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'>
{name}
</div>
<div class='details text-neutral-200 flex text-[11px]'>
{#if user.isFollower}
<span class='text-nowrap flex items-center'>Follows you</span>
{/if}
<span class='text-nowrap flex items-center'>Joined {since(new Date((user.createdAt ?? 0) * 1000))}</span>
{@const name = user.name}
{@const avatar = user.avatar?.medium ?? ''}
{@const banner = user.bannerImage ?? ''}
{@const bubble = user.donatorBadge}
<div class='flex'>
<Popover.Root>
<Popover.Trigger class='flex'>
<Avatar.Root class={className}>
<Avatar.Image src={avatar} alt={name} />
<Avatar.Fallback>{name}</Avatar.Fallback>
</Avatar.Root>
</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'}'>
<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')}>
{#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' />
{/if}
<Avatar.Root class='inline-block size-20'>
<Avatar.Image src={avatar} alt={name} />
<Avatar.Fallback>{name}</Avatar.Fallback>
</Avatar.Root>
<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'>
{name}
</div>
<div class='details text-neutral-200 flex text-[11px]'>
{#if user.isFollower}
<span class='text-nowrap flex items-center'>Follows you</span>
{/if}
<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>
{#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>
{/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>
{/if}
</div>
</Popover.Content>
</Popover.Root>
</div>
{/if}
<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>
</Popover.Content>
</Popover.Root>
</div>
<style>
: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'>
{#if thread.user}
<Profile user={thread.user} class='size-8 mr-4' />
{thread.user.name ?? 'N/A'}
{thread.user.name}
{/if}
</div>
<div class='flex ml-2 text-[12.8px] leading-none mt-0.5'>