diff --git a/materialious/src/lib/SyncParty.svelte b/materialious/src/lib/SyncParty.svelte index 0e791d16..d21add1e 100644 --- a/materialious/src/lib/SyncParty.svelte +++ b/materialious/src/lib/SyncParty.svelte @@ -3,6 +3,7 @@ import { page } from '$app/stores'; import { peerJs, removeWindowQueryFlag, setWindowQueryFlag } from '$lib/misc'; import type { PlayerEvents } from '$lib/player'; + import ui from 'beercss'; import type { DataConnection } from 'peerjs'; import { onDestroy, onMount } from 'svelte'; import { _ } from 'svelte-i18n'; @@ -14,10 +15,19 @@ const events = data as PlayerEvents; const currentUrl = get(page).url; + const blockedPages = ['subscriptions', 'playlists', 'history']; + events.events.forEach((event) => { if (event.type === 'change-video' && event.videoId) { currentUrl.pathname = `/watch/${event.videoId}`; goto(currentUrl); + } else if (event.type === 'goto' && event.path && event.path !== $page.url.pathname) { + if (blockedPages.includes(event.path.replace('/', ''))) { + ui('#sync-party-private-page'); + } else { + currentUrl.pathname = event.path; + goto(currentUrl); + } } }); }); @@ -40,19 +50,15 @@ conn.on('open', async () => { await ui('#sync-party-connection-join'); - if ($page.url.pathname.startsWith('/watch')) { - const paths = $page.url.pathname.split('/'); - if (paths.length > 2) { - conn.send({ - events: [ - { - type: 'change-video', - videoId: paths[2] - } - ] - } as PlayerEvents); - } - } + conn.send({ + events: [ + { + type: 'goto', + path: $page.url.pathname + } + ] + } as PlayerEvents); + changeVideoEvent(conn); syncPartyConnectionsStore.set([...($syncPartyConnectionsStore || []), conn]); }); @@ -64,6 +70,21 @@ } } + page.subscribe((newPage) => { + if (!newPage.url.pathname.startsWith('/watch') && $syncPartyPeerStore) { + $syncPartyConnectionsStore?.forEach((conn) => { + conn.send({ + events: [ + { + type: 'goto', + path: newPage.url.pathname + } + ] + } as PlayerEvents); + }); + } + }); + onMount(async () => { const currentUrl = get(page).url; const syncId = currentUrl.searchParams.get('sync'); @@ -139,3 +160,8 @@ person_remove {$_('syncParty.userLeft')} + +
+ shield_person + {$_('syncParty.userOnPrivatePage')} +
diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json index f1937e8f..c3893959 100644 --- a/materialious/src/lib/i18n/locales/en.json +++ b/materialious/src/lib/i18n/locales/en.json @@ -23,7 +23,8 @@ "hideVideo": "Hide video", "syncParty": { "userJoined": "User joined your watch party.", - "userLeft": "User left your watch party." + "userLeft": "User left your watch party.", + "userOnPrivatePage": "User currently viewing a private page, syncing will resume shorty." }, "videoTabs": { "all": "All", diff --git a/materialious/src/lib/player.ts b/materialious/src/lib/player.ts index a7fed004..b2a8cd84 100644 --- a/materialious/src/lib/player.ts +++ b/materialious/src/lib/player.ts @@ -1,5 +1,6 @@ export interface PlayerEvent { - type: 'pause' | 'seek' | 'change-video' | 'play' | 'playlist'; + type: 'pause' | 'seek' | 'change-video' | 'play' | 'playlist' | 'goto'; + path?: string, time?: number; videoId?: string; playlistId?: string; diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte index 72008f05..f680c887 100644 --- a/materialious/src/routes/(app)/+layout.svelte +++ b/materialious/src/routes/(app)/+layout.svelte @@ -23,6 +23,7 @@ import { Browser } from '@capacitor/browser'; import { Capacitor } from '@capacitor/core'; import 'beercss'; + import ui from 'beercss'; import 'material-dynamic-colors'; import { onMount } from 'svelte'; import { _ } from 'svelte-i18n'; diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte index c7fec7d3..e3f048f5 100644 --- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte +++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte @@ -291,8 +291,8 @@ if ( get(playerMiniPlayerStore) && - !$syncPartyPeerStore && !player.paused && + !$syncPartyPeerStore && !data.video.hlsUrl && data.video.formatStreams && data.video.formatStreams.length > 0