From d8c2a25a34b6fde8cd2e0b2d5e1b4a49110c625f Mon Sep 17 00:00:00 2001 From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com> Date: Sun, 15 Jun 2025 20:47:54 +0200 Subject: [PATCH] fix: w2g initial sync state, chat bug on message send feat: message toasts for w2g --- package.json | 2 +- .../components/ui/chat/MessageToast.svelte | 24 +++++++++++++++++++ src/lib/components/ui/chat/Messages.svelte | 13 ++-------- src/lib/components/ui/chat/UserList.svelte | 2 +- src/lib/components/ui/chat/index.ts | 1 + src/lib/modules/w2g/index.ts | 17 +++++++++---- src/routes/+layout.svelte | 2 +- src/routes/app/w2g/+page.ts | 5 +++- src/routes/app/w2g/[id]/+page.svelte | 4 +++- 9 files changed, 50 insertions(+), 20 deletions(-) create mode 100644 src/lib/components/ui/chat/MessageToast.svelte diff --git a/package.json b/package.json index 59d6ace..fe0efb3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ui", - "version": "6.3.59", + "version": "6.3.60", "license": "BUSL-1.1", "private": true, "packageManager": "pnpm@9.14.4", diff --git a/src/lib/components/ui/chat/MessageToast.svelte b/src/lib/components/ui/chat/MessageToast.svelte new file mode 100644 index 0000000..b3ac735 --- /dev/null +++ b/src/lib/components/ui/chat/MessageToast.svelte @@ -0,0 +1,24 @@ + + +
+ ProfilePicture +
+
+
+ {user.name} +
+
+ {date.toLocaleTimeString()} +
+
+
+ {message} +
+
+
diff --git a/src/lib/components/ui/chat/Messages.svelte b/src/lib/components/ui/chat/Messages.svelte index e9ed10a..9d51d9e 100644 --- a/src/lib/components/ui/chat/Messages.svelte +++ b/src/lib/components/ui/chat/Messages.svelte @@ -21,8 +21,8 @@ {#each groupMessages($messages) as { type, user, date, messages }, i (i)} {@const incoming = type === 'incoming'} -
- ProfilePicture +
+ ProfilePicture
@@ -42,12 +42,3 @@
{/each} - - diff --git a/src/lib/components/ui/chat/UserList.svelte b/src/lib/components/ui/chat/UserList.svelte index 72931e5..445c2af 100644 --- a/src/lib/components/ui/chat/UserList.svelte +++ b/src/lib/components/ui/chat/UserList.svelte @@ -18,7 +18,7 @@
{#each processed as [key, user] (key)}
- ProfilePicture + ProfilePicture
{user.name}
diff --git a/src/lib/components/ui/chat/index.ts b/src/lib/components/ui/chat/index.ts index 693062a..92a34e6 100644 --- a/src/lib/components/ui/chat/index.ts +++ b/src/lib/components/ui/chat/index.ts @@ -12,3 +12,4 @@ export interface ChatMessage { export { default as UserList } from './UserList.svelte' export { default as Messages } from './Messages.svelte' +export { default as MessageToast } from './MessageToast.svelte' diff --git a/src/lib/modules/w2g/index.ts b/src/lib/modules/w2g/index.ts index bb0455c..2616dac 100644 --- a/src/lib/modules/w2g/index.ts +++ b/src/lib/modules/w2g/index.ts @@ -3,13 +3,15 @@ import { EventEmitter } from 'events' import Debug from 'debug' import P2PT, { type Peer } from 'p2pt' import { writable } from 'simple-store-svelte' +import { toast } from 'svelte-sonner' import client from '../anilist/client.js' import { server } from '../torrent' import Event, { type MediaState, type PlayerState, type W2GEvents } from './events.js' -import type { ChatMessage, ChatUser } from '$lib/components/ui/chat' +import { page } from '$app/state' +import { MessageToast, type ChatMessage, type ChatUser } from '$lib/components/ui/chat' const debug = Debug('ui:w2g') @@ -58,11 +60,11 @@ export class W2GClient extends EventEmitter<{index: [number], player: [PlayerSta return `https://hayas.ee/w2g/${this.code}` } - constructor (code: string, isHost: boolean) { + constructor (code: string, isHost: boolean, media?: MediaState) { super() this.isHost = isHost - this.code = code + this.media = media debug(`W2GClient: ${this.code}, ${this.isHost}`) @@ -192,7 +194,14 @@ export class W2GClient extends EventEmitter<{index: [number], player: [PlayerSta break } case 'message': { - this.messages.update(messages => [...messages, ({ message: data.payload, user: this.peers.value[peer.id]!.user, type: 'incoming', date: new Date() })]) + const msg: ChatMessage = { message: data.payload, user: this.peers.value[peer.id]!.user, type: 'incoming', date: new Date() } + if (page.route.id !== '/app/w2g/[id]') { + toast.custom(MessageToast, { + classes: { toast: '!bg-transparent w-full !shadow-none h-auto flex' }, + componentProps: { msg } + }) + } + this.messages.update(messages => [...messages, msg]) break } default: diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c20b8c0..e4aec6f 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -26,7 +26,7 @@
- + diff --git a/src/routes/app/w2g/+page.ts b/src/routes/app/w2g/+page.ts index d167cdc..8a9eb47 100644 --- a/src/routes/app/w2g/+page.ts +++ b/src/routes/app/w2g/+page.ts @@ -1,10 +1,13 @@ import { redirect } from '@sveltejs/kit' +import { get } from 'svelte/store' +import { server } from '$lib/modules/torrent' import { generateRandomHexCode, W2GClient } from '$lib/modules/w2g' import { w2globby } from '$lib/modules/w2g/lobby' export function load () { - w2globby.value ??= new W2GClient(generateRandomHexCode(16), true) + const lastVal = get(server.last) + w2globby.value ??= new W2GClient(generateRandomHexCode(16), true, lastVal?.media.id ? { mediaId: lastVal.media.id, episode: lastVal.episode, torrent: lastVal.id } : undefined) redirect(302, '/app/w2g/' + w2globby.value.code) } diff --git a/src/routes/app/w2g/[id]/+page.svelte b/src/routes/app/w2g/[id]/+page.svelte index 1da9afa..8f416d5 100644 --- a/src/routes/app/w2g/[id]/+page.svelte +++ b/src/routes/app/w2g/[id]/+page.svelte @@ -29,11 +29,13 @@ function sendMessage () { $w2globby?.message(message.trim()) message = '' + rows = 1 } async function checkInput (e: KeyboardEvent) { if (e.key === 'Enter' && !e.shiftKey && message.trim()) { sendMessage() + e.preventDefault() } else { rows = message.split('\n').length || 1 } @@ -58,7 +60,7 @@
-
+