From 896a99382d460af8cccc83f5027d830fcdcffb33 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 10 Feb 2026 21:15:50 +0100
Subject: [PATCH] refactor: extract PipImage component from inline PiP markup

Deduplicates mobile PiP image code shared between the rosary page and
StickyImage. Adds fullscreen support to StickyImage and fixes hidden PiP
elements capturing pointer events via pointer-events: none default.
---
 src/lib/components/PipImage.svelte            | 119 ++++++++++++++++++
 src/lib/components/StickyImage.svelte         |  79 +++---------
 src/lib/js/pip.svelte.ts                      |   7 +-
 .../[rosary=rosaryLang]/+page.svelte          | 111 +---------------
 4 files changed, 141 insertions(+), 175 deletions(-)
 create mode 100644 src/lib/components/PipImage.svelte

diff --git a/src/lib/components/PipImage.svelte b/src/lib/components/PipImage.svelte
new file mode 100644
index 00000000..c8e51620
--- /dev/null
+++ b/src/lib/components/PipImage.svelte
@@ -0,0 +1,119 @@
+<script>
+	/**
+	 * @param {ReturnType<import('$lib/js/pip.svelte').createPip>} pip - a createPip() instance
+	 * @param {string} src - image source
+	 * @param {string} [alt] - image alt text
+	 * @param {boolean} [visible] - whether the PiP should be shown
+	 * @param {(e: Event) => void} [onload] - callback when image loads
+	 */
+	let { pip, src, alt = '', visible = false, onload, el = $bindable(null) } = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="pip-container"
+	class:visible
+	class:enlarged={pip.enlarged}
+	class:fullscreen={pip.fullscreen}
+	bind:this={el}
+	onpointerdown={pip.onpointerdown}
+	onpointermove={pip.onpointermove}
+	onpointerup={pip.onpointerup}
+>
+	{#if src}
+		<img {src} {alt} {onload}>
+	{/if}
+	{#if pip.showControls}
+		<button
+			class="pip-fullscreen-btn"
+			aria-label="Fullscreen"
+			onpointerdown={(e) => e.stopPropagation()}
+			onclick={(e) => { e.stopPropagation(); pip.toggleFullscreen(); }}
+		>
+			<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+				<polyline points="8 3 3 3 3 8"/>
+				<polyline points="16 3 21 3 21 8"/>
+				<polyline points="8 21 3 21 3 16"/>
+				<polyline points="16 21 21 21 21 16"/>
+			</svg>
+		</button>
+	{/if}
+</div>
+
+<style>
+.pip-container {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10000;
+	opacity: 0;
+	touch-action: none;
+	cursor: grab;
+	user-select: none;
+	transition: opacity 0.25s ease;
+	pointer-events: none;
+}
+.pip-container:active {
+	cursor: grabbing;
+}
+.pip-container img {
+	height: 25vh;
+	width: auto;
+	object-fit: contain;
+	border-radius: 6px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	pointer-events: none;
+	transition: height 0.25s ease;
+}
+.pip-container.enlarged img {
+	height: 37.5vh;
+}
+.pip-container.fullscreen {
+	width: 100vw;
+	height: 100vh;
+	background: rgba(0, 0, 0, 0.95);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: default;
+}
+.pip-container.fullscreen img {
+	border-radius: 0;
+	box-shadow: none;
+}
+.pip-fullscreen-btn {
+	all: unset;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: transparent;
+	filter: drop-shadow(0 0 1px black);
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	padding: 0;
+	z-index: 1;
+	pointer-events: auto;
+	outline: none;
+	transition: transform 0.15s ease;
+}
+.pip-fullscreen-btn:hover,
+.pip-fullscreen-btn:active {
+	transform: translate(-50%, -50%) scale(1.2);
+}
+.pip-container.fullscreen .pip-fullscreen-btn {
+	top: auto;
+	left: auto;
+	bottom: 10vw;
+	right: 10vw;
+	transform: none;
+}
+.pip-container.fullscreen .pip-fullscreen-btn:hover,
+.pip-container.fullscreen .pip-fullscreen-btn:active {
+	transform: scale(0.85);
+}
+</style>
diff --git a/src/lib/components/StickyImage.svelte b/src/lib/components/StickyImage.svelte
index b6fed7d7..bae06758 100644
--- a/src/lib/components/StickyImage.svelte
+++ b/src/lib/components/StickyImage.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import { createPip } from '$lib/js/pip.svelte';
+	import PipImage from '$lib/components/PipImage.svelte';
 
 	/**
 	 * @param {'layout' | 'overlay'} mode
@@ -13,7 +14,7 @@
 	let contentEl = $state(null);
 	let inView = $state(false);
 
-	const pip = createPip();
+	const pip = createPip({ fullscreenEnabled: true });
 
 	function isMobile() {
 		return !window.matchMedia('(min-width: 1024px)').matches;
@@ -80,17 +81,10 @@
 </script>
 
 <div class="sticky-image-layout" class:overlay={mode === 'overlay'}>
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="image-wrap"
-		class:enlarged={pip.enlarged}
-		bind:this={pipEl}
-		onpointerdown={pip.onpointerdown}
-		onpointermove={pip.onpointermove}
-		onpointerup={pip.onpointerup}
-	>
+	<div class="image-wrap-desktop">
 		<img {src} {alt}>
 	</div>
+	<PipImage {pip} {src} {alt} visible={inView} bind:el={pipEl} />
 	<div class="content-scroll" bind:this={contentEl}>
 		{@render children()}
 	</div>
@@ -107,32 +101,8 @@
 .sticky-image-layout.overlay {
 	display: contents;
 }
-.image-wrap {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 10000;
-	width: auto;
-	opacity: 0;
-	touch-action: none;
-	cursor: grab;
-	user-select: none;
-	transition: opacity 0.25s ease;
-}
-.image-wrap:active {
-	cursor: grabbing;
-}
-.image-wrap img {
-	height: 25vh;
-	width: auto;
-	object-fit: contain;
-	border-radius: 6px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	pointer-events: none;
-	transition: height 0.25s ease;
-}
-.image-wrap.enlarged img {
-	height: 37.5vh;
+.image-wrap-desktop {
+	display: none;
 }
 .content-scroll {
 	width: 100%;
@@ -148,29 +118,18 @@
 		gap: 2rem;
 		width: calc(100% + 25vw + 2rem);
 	}
-	.overlay .image-wrap {
+	.image-wrap-desktop {
+		display: block;
 		position: sticky;
 		top: 4rem;
-		left: auto;
-		transform: none !important;
-		width: auto;
 		align-self: start;
 		order: 1;
-		opacity: 1;
-		z-index: auto;
-		cursor: default;
-		touch-action: auto;
-		user-select: auto;
-		transition: none;
 	}
-	.overlay .image-wrap img {
+	.overlay .image-wrap-desktop img {
 		height: auto;
 		max-height: calc(100vh - 5rem);
 		width: auto;
 		max-width: 25vw;
-		border-radius: 0;
-		box-shadow: none;
-		pointer-events: auto;
 	}
 	.sticky-image-layout:not(.overlay) {
 		flex-direction: row;
@@ -180,37 +139,27 @@
 	.sticky-image-layout:not(.overlay) .content-scroll {
 		flex: 0 1 700px;
 	}
-	.sticky-image-layout:not(.overlay) .image-wrap {
+	.sticky-image-layout:not(.overlay) .image-wrap-desktop {
+		display: block;
 		position: sticky;
 		top: 4rem;
-		left: auto;
-		transform: none !important;
-		opacity: 1;
 		flex: 1;
-		background-color: transparent;
-		padding: 0;
 		order: 1;
-		cursor: default;
-		touch-action: auto;
-		user-select: auto;
-		transition: none;
 	}
-	.sticky-image-layout:not(.overlay) .image-wrap img {
+	.sticky-image-layout:not(.overlay) .image-wrap-desktop img {
 		max-height: calc(100vh - 4rem);
 		height: auto;
 		width: 100%;
 		object-fit: contain;
-		border-radius: 0;
-		box-shadow: none;
 	}
 }
 @media (prefers-color-scheme: light) {
-	.sticky-image-layout:not(.overlay) .image-wrap {
+	.sticky-image-layout:not(.overlay) .image-wrap-desktop {
 		background-color: var(--nord5);
 	}
 }
 @media (prefers-color-scheme: light) and (min-width: 1024px) {
-	.sticky-image-layout:not(.overlay) .image-wrap {
+	.sticky-image-layout:not(.overlay) .image-wrap-desktop {
 		background-color: transparent;
 	}
 }
diff --git a/src/lib/js/pip.svelte.ts b/src/lib/js/pip.svelte.ts
index 1d465777..d859fbc5 100644
--- a/src/lib/js/pip.svelte.ts
+++ b/src/lib/js/pip.svelte.ts
@@ -155,12 +155,14 @@ export function createPip(opts: PipOptions = {}) {
 		showControls = false;
 		if (fullscreen) {
 			target.style.opacity = '1';
+			target.style.pointerEvents = 'auto';
 			return;
 		}
 		const pos = getCornerPos(corner, target);
 		dragPos = pos;
 		target.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
 		target.style.opacity = '1';
+		target.style.pointerEvents = 'auto';
 	}
 
 	function hide() {
@@ -178,7 +180,10 @@ export function createPip(opts: PipOptions = {}) {
 				el.style.transition = '';
 			}
 		}
-		if (el) el.style.opacity = '0';
+		if (el) {
+			el.style.opacity = '0';
+			el.style.pointerEvents = 'none';
+		}
 	}
 
 	function reposition() {
diff --git a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
index 0fb5c274..49dd20dc 100644
--- a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
@@ -2,6 +2,7 @@
 import { onMount, tick } from "svelte";
 import { createLanguageContext } from "$lib/contexts/languageContext.js";
 import { createPip } from "$lib/js/pip.svelte";
+import PipImage from "$lib/components/PipImage.svelte";
 import "$lib/css/christ.css";
 import "$lib/css/action_button.css";
 import Kreuzzeichen from "$lib/components/prayers/Kreuzzeichen.svelte";
@@ -1462,86 +1463,6 @@ h1 {
 	}
 }
 
-/* Mobile PiP for mystery images */
-.mystery-pip {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 10000;
-	opacity: 0;
-	touch-action: none;
-	cursor: grab;
-	user-select: none;
-	transition: opacity 0.25s ease;
-}
-.mystery-pip:active {
-	cursor: grabbing;
-}
-.mystery-pip img {
-	height: 25vh;
-	width: auto;
-	object-fit: contain;
-	border-radius: 6px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	pointer-events: none;
-	transition: height 0.25s ease;
-}
-.mystery-pip.enlarged img {
-	height: 37.5vh;
-}
-.mystery-pip.fullscreen {
-	width: 100vw;
-	height: 100vh;
-	background: rgba(0, 0, 0, 0.95);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: default;
-}
-.mystery-pip.fullscreen img {
-	border-radius: 0;
-	box-shadow: none;
-}
-.pip-fullscreen-btn {
-	all: unset;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	background: transparent;
-	filter: drop-shadow(0 0 1px black);
-	width: 48px;
-	height: 48px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	padding: 0;
-	z-index: 1;
-	pointer-events: auto;
-	outline: none;
-	transition: transform 0.15s ease;
-}
-.pip-fullscreen-btn:hover,
-.pip-fullscreen-btn:active {
-	transform: translate(-50%, -50%) scale(1.2);
-}
-.mystery-pip.fullscreen .pip-fullscreen-btn {
-	top: auto;
-	left: auto;
-	bottom: 10vw;
-	right: 10vw;
-	transform: none;
-}
-.mystery-pip.fullscreen .pip-fullscreen-btn:hover,
-.mystery-pip.fullscreen .pip-fullscreen-btn:active {
-	transform: scale(0.85);
-}
-@media (min-width: 1200px) {
-	.mystery-pip {
-		display: none;
-	}
-}
 </style>
 <svelte:head>
 	<title>{labels.pageTitle}</title>
@@ -1957,35 +1878,7 @@ h1 {
 
 	<!-- Mobile PiP for mystery images -->
 	{#if hasMysteryImages}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div
-			class="mystery-pip"
-			class:visible={!!mysteryPipSrc}
-			class:enlarged={pip.enlarged}
-			class:fullscreen={pip.fullscreen}
-			bind:this={rosaryPipEl}
-			onpointerdown={pip.onpointerdown}
-			onpointermove={pip.onpointermove}
-			onpointerup={pip.onpointerup}
-		>
-			{#if lastPipSrc}
-				<img src={lastPipSrc} alt="" onload={() => pip.reposition()}>
-			{/if}
-			{#if pip.showControls}
-				<button
-					class="pip-fullscreen-btn"
-					onpointerdown={(e) => e.stopPropagation()}
-					onclick={(e) => { e.stopPropagation(); pip.toggleFullscreen(); }}
-				>
-					<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-						<polyline points="8 3 3 3 3 8"/>
-						<polyline points="16 3 21 3 21 8"/>
-						<polyline points="8 21 3 21 3 16"/>
-						<polyline points="16 21 21 21 21 16"/>
-					</svg>
-				</button>
-			{/if}
-		</div>
+		<PipImage {pip} src={lastPipSrc} visible={!!mysteryPipSrc} onload={() => pip.reposition()} bind:el={rosaryPipEl} />
 	{/if}
 </div>