Merge pull request #385 from Materialious/release/1.1.4

Release/1.1.4

materialious/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 15
-        versionName "1.1.3"
+        versionCode 16
+        versionName "1.1.4"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

materialious/electron/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.1.3",
+	"version": "1.1.4",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",
@@ -39,4 +39,4 @@
 		"capacitor",
 		"electron"
 	]
-}
+}

materialious/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.1.3",
+	"version": "1.1.4",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -60,4 +60,4 @@
 		"svelte-persisted-store": "^0.11.0",
 		"vidstack": "^1.11.21"
 	}
-}
+}

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', 'subscriptions/manage'];
+
 			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/Thumbnail.svelte

@@ -87,8 +87,8 @@
 			return;
 		}
 
-                // Check if sideways should be enabled or disabled.
-                disableSideways();
+		// Check if sideways should be enabled or disabled.
+		disableSideways();
 
 		addEventListener('resize', disableSideways);
 
@@ -218,8 +218,10 @@
 				} catch {}
 			}
 		} catch {
-			showVideoPreview = true;
+			showVideoPreview = false;
 		}
+
+		imgHeight = document.getElementById('thumbnail-container')?.clientHeight as number;
 	}
 
 	function hideVideo() {
@@ -238,7 +240,7 @@
 			on:mouseover={previewVideo}
 			on:mouseleave={() => (showVideoPreview = false)}
 			on:focus={() => {}}
-			bind:clientHeight={imgHeight}
+			id="thumbnail-container"
 			role="region"
 		>
 			<a
@@ -253,7 +255,7 @@
 					{#if showVideoPreview && videoPreview}
 						<div style="max-width: 100%; max-height: {imgHeight}px;">
 							<video
-								style="max-width: 100%; height: {imgHeight}px;"
+								style="max-width: 100%; max-height: {imgHeight}px;"
 								autoplay
 								poster={img.src}
 								width="100%"
@@ -324,8 +326,10 @@
 						data-sveltekit-preload-data="off"
 						class:ellipsis-root={!sideways}
 					>
-						<span class="bold" class:ellipsis={!sideways}
-							>{truncate(letterCase(video.title.trim()), 30)}</span
+						<span class="bold" class:ellipsis={!sideways}>
+							{#if sideways}
+								{truncate(letterCase(video.title), 30)}
+							{:else}{letterCase(video.title)}{/if}</span
 						>
 					</a>
 

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

@@ -112,7 +112,7 @@
 				} else if (event.type === 'seek' && event.time) {
 					const timeDiff = player.currentTime - event.time;
 
-					if (timeDiff > 3 || timeDiff < -3) {
+					if (timeDiff > 5 || timeDiff < -5) {
 						player.currentTime = event.time;
 					}
 				} else if (
@@ -292,6 +292,7 @@
 		if (
 			get(playerMiniPlayerStore) &&
 			!player.paused &&
+			!$syncPartyPeerStore &&
 			!data.video.hlsUrl &&
 			data.video.formatStreams &&
 			data.video.formatStreams.length > 0

update_versions.py

@@ -5,7 +5,7 @@ import json
 import os
 import re
 
-LATEST_VERSION = "1.1.3"
+LATEST_VERSION = "1.1.4"
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")
 
 ROOT_PACKAGE = os.path.join(WORKING_DIR, "package.json")