From 2e27d7362467f73da91b45b3235c6f5c8fe7567b Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 8 Nov 2025 12:21:29 +1300
Subject: [PATCH] Improved mobile PIP

---
 materialious/electron/package-lock.json       |  4 +-
 materialious/src/routes/(app)/+layout.svelte  | 55 +++++++++++++++----
 .../routes/(app)/watch/[slug]/+page.svelte    |  2 +-
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/materialious/electron/package-lock.json b/materialious/electron/package-lock.json
index 57285d6d..357eb009 100644
--- a/materialious/electron/package-lock.json
+++ b/materialious/electron/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "Materialious",
-	"version": "1.11.3",
+	"version": "1.11.4",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "Materialious",
-			"version": "1.11.3",
+			"version": "1.11.4",
 			"license": "MIT",
 			"dependencies": {
 				"@capacitor-community/electron": "^5.0.0",
diff --git a/materialious/src/routes/(app)/+layout.svelte b/materialious/src/routes/(app)/+layout.svelte
index 2f576fba..83b18f98 100644
--- a/materialious/src/routes/(app)/+layout.svelte
+++ b/materialious/src/routes/(app)/+layout.svelte
@@ -45,7 +45,6 @@
 	import Mousetrap from 'mousetrap';
 	import { truncate } from '$lib/misc';
 	import Author from '$lib/components/watch/Author.svelte';
-	import LikesDislikes from '$lib/components/watch/LikesDislikes.svelte';
 
 	let { children } = $props();
 
@@ -404,22 +403,33 @@
 					class:l12={$playertheatreModeIsActive && !playerIsPip}
 					class:l9={!$playertheatreModeIsActive && !playerIsPip}
 				>
+					<div class="pip-info">
+						{#if playerIsPip}
+							<nav>
+								<h6 class="max">{truncate($playerState.data.video.title, 20)}</h6>
+								<button class="border m l" onclick={() => playerState.set(undefined)}>
+									<i>close</i>
+								</button>
+							</nav>
+							<div class="space"></div>
+						{/if}
+						<div class="player">
+							{#key $playerState.data.video.videoId}
+								<Player data={$playerState.data} isSyncing={$playerState.isSyncing} />
+							{/key}
+						</div>
+					</div>
 					{#if playerIsPip}
-						<nav>
-							<h6 class="max">{truncate($playerState.data.video.title, 20)}</h6>
+						<nav class="s">
+							<a class="button border" href={`/watch/${$playerState.data.video.videoId}`}
+								><i>keyboard_arrow_right</i></a
+							>
 							<button class="border" onclick={() => playerState.set(undefined)}>
 								<i>close</i>
 							</button>
 						</nav>
-						<div class="space"></div>
-					{/if}
-					<div style="display: flex;justify-content: center;">
-						{#key $playerState.data.video.videoId}
-							<Player data={$playerState.data} isSyncing={$playerState.isSyncing} />
-						{/key}
-					</div>
-					{#if playerIsPip}
-						<nav>
+
+						<nav class="m l">
 							<Author video={$playerState.data.video} hideSubscribe={true} />
 							<div class="max"></div>
 							<a class="button border" href={`/watch/${$playerState.data.video.videoId}`}
@@ -487,9 +497,30 @@
 		border-radius: 0.75rem;
 	}
 
+	.player {
+		display: flex;
+		justify-content: center;
+	}
+
 	@media only screen and (max-width: 993px) {
 		.pip {
 			width: 100%;
+			bottom: 100px;
+		}
+
+		.pip > .pip-info > .player {
+			height: 80px;
+			width: 150px;
+		}
+
+		.pip > .pip-info > nav {
+			align-items: start;
+			padding-right: 0.5em;
+		}
+
+		.pip > .pip-info {
+			display: flex;
+			justify-content: space-between;
 		}
 	}
 </style>
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index 2d061a10..e815edce 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -382,7 +382,7 @@
 			{/if}
 		</div>
 
-		<h5>{letterCase(data.video.title)}</h5>
+		<h5 class="no-margin">{letterCase(data.video.title)}</h5>
 
 		<div class="grid no-padding">
 			<div class="s12 m12 l5" style="height: 100%;display: flex;align-items: center;">