Fix formatting of playerTheatreModeIsActive

materialious/src/lib/components/player/Player.svelte

@@ -27,7 +27,7 @@
 		playerProxyVideosStore,
 		playerSavePlaybackPositionStore,
 		playerState,
-		playertheatreModeIsActive,
+		playerTheatreModeIsActive,
 		playerYouTubeJsFallback,
 		rawMasterKeyStore,
 		sponsorBlockCategoriesStore,
@@ -113,7 +113,7 @@
 		step: 0.01
 	});
 
-	playertheatreModeIsActive.subscribe(async () => {
+	playerTheatreModeIsActive.subscribe(async () => {
 		await tick();
 		updateVideoPlayerHeight();
 	});

materialious/src/lib/i18n/locales/en.json

@@ -77,11 +77,6 @@
 	"newest": "Newest",
 	"oldest": "Oldest",
 	"popular": "Popular",
-	"syncParty": {
-		"userJoined": "User joined your watch party.",
-		"userLeft": "User left your watch party.",
-		"userOnPrivatePage": "User currently viewing a private page, syncing will resume shorty."
-	},
 	"videoTabs": {
 		"all": "All",
 		"videos": "Videos",
@@ -90,6 +85,9 @@
 		"shorts": "Shorts",
 		"streams": "Streams"
 	},
+	"watchParty": {
+		"start": "Start a watch party"
+	},
 	"subscriptions": {
 		"manageSubscriptions": "Manage subscriptions"
 	},
@@ -167,13 +165,8 @@
 		"interface": "Interface",
 		"star": "Star us on Github!",
 		"engine": "Backend engine",
-		"syncParty": "Sync party",
 		"about": "About",
 		"materialiousAccount": "Account",
-		"syncPartyWarning": "Please note your IP will be visible to users you invite.",
-		"startSyncParty": "Start sync party",
-		"endSyncParty": "End sync party",
-		"joinSyncParty": "Enter sync party URL",
 		"shareURL": "Share URL",
 		"notifications": "Notifications",
 		"noNewNotifications": "No new notifications here",

materialious/src/lib/store.ts

@@ -187,7 +187,7 @@ export interface PlayerState {
 }
 
 export const playerState: Writable<PlayerState | undefined> = writable(undefined);
-export const playertheatreModeIsActive = writable(false);
+export const playerTheatreModeIsActive = writable(false);
 
 export const returnYtDislikesStore = persist(writable(false), createStorage(), 'returnYtDislikes');
 export const returnYTDislikesInstanceStore: Writable<string | null | undefined> = persist(

materialious/src/routes/(app)/+layout.svelte

@@ -18,7 +18,7 @@
 		interfaceDefaultPage,
 		isAndroidTvStore,
 		playerState,
-		playertheatreModeIsActive,
+		playerTheatreModeIsActive,
 		rawMasterKeyStore,
 		themeColorStore,
 		backendInUseStore,
@@ -160,7 +160,7 @@
 		id="left-nav"
 		class="left m l surface-container"
 		class:tv-nav={$isAndroidTvStore}
-		class:hide={$playertheatreModeIsActive}
+		class:hide={$playerTheatreModeIsActive}
 	>
 		<header class="small-padding">
 			<a href={resolve($interfaceDefaultPage, {})} tabindex="-1" data-sveltekit-preload-data="off">
@@ -202,7 +202,7 @@
 	</nav>
 	{#if !$isAndroidTvStore}
 		<nav class="top" id="top-content" class:tv-nav={$isAndroidTvStore}>
-			{#if $playertheatreModeIsActive}
+			{#if $playerTheatreModeIsActive}
 				<header role="presentation" style="cursor: pointer;" tabindex="-1" class="small-padding">
 					<a href={resolve($interfaceDefaultPage, {})}>
 						<Logo />
@@ -323,8 +323,8 @@
 					class:pip={playerIsPip}
 					class:s12={!playerIsPip}
 					class:m12={!playerIsPip}
-					class:l12={$playertheatreModeIsActive && !playerIsPip}
-					class:l9={!$playertheatreModeIsActive && !playerIsPip}
+					class:l12={$playerTheatreModeIsActive && !playerIsPip}
+					class:l9={!$playerTheatreModeIsActive && !playerIsPip}
 				>
 					<div class="pip-info">
 						{#if playerIsPip}

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -20,7 +20,7 @@
 		playerPlaylistHistory,
 		playerState,
 		playerTheatreModeByDefaultStore,
-		playertheatreModeIsActive,
+		playerTheatreModeIsActive,
 		playlistCacheStore,
 		type PlayerState
 	} from '$lib/store';
@@ -51,7 +51,7 @@
 	let personalPlaylists: PlaylistPage[] | null = $state(null);
 	data.streamed.personalPlaylists?.then((streamPlaylists) => (personalPlaylists = streamPlaylists));
 
-	playertheatreModeIsActive.set(get(playerTheatreModeByDefaultStore));
+	playerTheatreModeIsActive.set(get(playerTheatreModeByDefaultStore));
 
 	let pauseTimerSeconds: number = $state(-1);
 
@@ -151,7 +151,7 @@
 			playerState.set(undefined);
 		}
 
-		playertheatreModeIsActive.set(false);
+		playerTheatreModeIsActive.set(false);
 	});
 
 	async function goToCurrentPlaylistItem() {
@@ -219,7 +219,7 @@
 	}
 
 	function toggleTheatreMode() {
-		playertheatreModeIsActive.set(!$playertheatreModeIsActive);
+		playerTheatreModeIsActive.set(!$playerTheatreModeIsActive);
 	}
 
 	let pauseTimeout: ReturnType<typeof setTimeout> | undefined = $state();
@@ -240,7 +240,7 @@
 </svelte:head>
 
 <div class="grid no-padding">
-	<div class={`s12 m12 l${$playertheatreModeIsActive ? '12' : '9'}`}>
+	<div class={`s12 m12 l${$playerTheatreModeIsActive ? '12' : '9'}`}>
 		<div style="display: flex;justify-content: center;">
 			{#if data.video.premiereTimestamp}
 				<article class="video-placeholder">
@@ -266,7 +266,7 @@
 					<button
 						onclick={toggleTheatreMode}
 						class="m l"
-						class:surface-container-highest={!$playertheatreModeIsActive}
+						class:surface-container-highest={!$playerTheatreModeIsActive}
 					>
 						<i>width_wide</i>
 						<div class="tooltip">{$_('player.theatreMode')}</div>
@@ -288,7 +288,7 @@
 					<button
 						onclick={() => (
 							(showTranscript = !showTranscript),
-							playertheatreModeIsActive.set(false)
+							playerTheatreModeIsActive.set(false)
 						)}
 						class:surface-container-highest={!showTranscript}
 					>
@@ -297,6 +297,12 @@
 							{$_('transcript')}
 						</div>
 					</button>
+					<button class="surface-container-highest">
+						<i>sync</i>
+						<div class="tooltip">
+							{$_('watchParty.start')}
+						</div>
+					</button>
 					<Share
 						includePromptText={$_('player.share.includeTimestamp')}
 						shares={[
@@ -452,7 +458,7 @@
 			</article>
 		{/if}
 	</div>
-	{#if !$playertheatreModeIsActive}
+	{#if !$playerTheatreModeIsActive}
 		<div class="s12 m12 l3 recommended">
 			{#if showTranscript}
 				<Transcript video={data.video} bind:currentTime={playerCurrentTime} />