Improvements to sync party, sync visited pages

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 @@
 	<i>person_remove</i>
 	<span>{$_('syncParty.userLeft')}</span>
 </div>
+
+<div class="snackbar" id="sync-party-private-page">
+	<i>shield_person</i>
+	<span>{$_('syncParty.userOnPrivatePage')}</span>
+</div>

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",

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;

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';

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