Skip to content

fix: asset transition/video stall freezes #637

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
3rob3 wants to merge 14 commits into
base: main
Choose a base branch
from
Open

fix: asset transition/video stall freezes #637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
836e0b6
resolve asset transition lockups and video stall freezes
Apr 23, 2026
ab366aa
comment cleanup
Apr 23, 2026
e891200
coderabbit nitpicks
Apr 23, 2026
9e35961
coderrabbit nitpicks 2
Apr 23, 2026
6694015
coderabbit 3
Apr 23, 2026
2397bb9
handle manual back skip mid-transition
Apr 24, 2026
b89eb7f
drain pending transition queue
Apr 24, 2026
d9a63eb
clear videoStallTimeout
Apr 24, 2026
36bc89a
add transition epoch
Apr 24, 2026
827e325
nitpick fixes
Apr 24, 2026
df9fce3
Stall-timer gating
Apr 24, 2026
4cc84cf
watchdog recovery, comments
Apr 24, 2026
6bf516f
stop consecutive errors
Apr 26, 2026
a1a2240
progress tween fix
Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion immichFrame.Web/src/lib/components/elements/asset-component.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
playAudio?: boolean;
onVideoWaiting?: () => void;
onVideoPlaying?: () => void;
onAssetError?: () => void;
}

let {
Expand All @@ -53,7 +54,8 @@
showInfo = $bindable(false),
playAudio = false,
onVideoWaiting = () => {},
onVideoPlaying = () => {}
onVideoPlaying = () => {},
onAssetError = () => {}
}: Props = $props();
let instantTransition = slideshowStore.instantTransition;
let transitionDuration = $derived(
Expand Down Expand Up @@ -119,6 +121,7 @@
{playAudio}
{onVideoWaiting}
{onVideoPlaying}
{onAssetError}
bind:this={primaryAssetComponent}
bind:showInfo
/>
Expand All @@ -140,6 +143,7 @@
{playAudio}
{onVideoWaiting}
{onVideoPlaying}
{onAssetError}
bind:this={secondaryAssetComponent}
bind:showInfo
/>
Expand All @@ -163,6 +167,7 @@
{playAudio}
{onVideoWaiting}
{onVideoPlaying}
{onAssetError}
bind:this={primaryAssetComponent}
bind:showInfo
/>
Expand Down
24 changes: 20 additions & 4 deletions immichFrame.Web/src/lib/components/elements/asset.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { untrack } from 'svelte';
import {
type AlbumResponseDto,
type AssetResponseDto,
Expand Down Expand Up @@ -27,6 +28,7 @@
playAudio: boolean;
onVideoWaiting?: () => void;
onVideoPlaying?: () => void;
onAssetError?: () => void;
}

let {
Expand All @@ -45,16 +47,23 @@
showInfo = $bindable(false),
playAudio,
onVideoWaiting = () => {},
onVideoPlaying = () => {}
onVideoPlaying = () => {},
onAssetError = () => {}
}: Props = $props();

let debug = false;
const isVideo = $derived(isVideoAsset(asset[1]));

// Re-evaluate only when the asset changes; keep the interval stable for the
// lifetime of the current asset so zoom/pan animations don't restart.
const animationDuration = $derived.by(() => {
void asset[1].id;
return untrack(() => interval);
});

let videoElement = $state<HTMLVideoElement | null>(null);

$effect(() => {
// Track asset URL to cleanup when it changes
asset[0];
return () => {
if (videoElement) {
Expand Down Expand Up @@ -195,7 +204,7 @@
<div
class="relative w-full h-full {enableZoom ? 'zoom' : ''} {enablePan ? 'pan' : ''}"
style="
--interval: {interval + 2}s;
--interval: {animationDuration + 2}s;
--originX: {hasPerson && !isVideo ? getFaceMetric(0, 'centerX') + '%' : 'center'};
--originY: {hasPerson && !isVideo ? getFaceMetric(0, 'centerY') + '%' : 'center'};
--start-scale: {scaleValues.startScale};
Expand Down Expand Up @@ -246,7 +255,10 @@
}
}
}}
onerror={() => console.error('Video failed to load:', asset[0])}
onerror={() => {
console.error('Video failed to load:', asset[0]);
onAssetError();
}}
onwaiting={onVideoWaiting}
onplaying={onVideoPlaying}
></video>
Expand All @@ -257,6 +269,10 @@
: 'max-h-screen h-dvh-safe max-w-full object-contain'} w-full h-full"
src={asset[0]}
alt="data"
onerror={() => {
console.error('Image failed to load:', asset[0]);
onAssetError();
}}
/>
{/if}
</div>
Expand Down
34 changes: 14 additions & 20 deletions immichFrame.Web/src/lib/components/elements/progress-bar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script lang="ts">
import { handlePromiseError } from '$lib/utils';
import { onMount, untrack } from 'svelte';
import { tweened } from 'svelte/motion';
import { Tween } from 'svelte/motion';
import { ProgressBarLocation, ProgressBarStatus } from './progress-bar.types';

interface Props {
Expand All @@ -26,20 +25,20 @@
onPaused = () => {}
}: Props = $props();

const onChange = async (progressDuration: number) => {
progress = setDuration(progressDuration);
await play();
};

let progress = setDuration(duration);

$effect(() => {
handlePromiseError(onChange(duration));
const progress = new Tween<number>(0, {
duration: (from: number, to: number) => {
if (to === 0) return 0;
return duration * 1000 * (to - from);
}
});

let completed = false;
$effect(() => {
if ($progress === 1) {
if (progress.current >= 1 && !completed) {
completed = true;
untrack(() => onDone());
} else if (progress.current < 1) {
Comment on lines +37 to +40
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

rg -nP -C2 'onDone:\s*\(\)\s*=>\s*void|untrack\(\(\)\s*=>\s*onDone\(\)\)' immichFrame.Web/src/lib/components/elements/progress-bar.svelte
rg -nP -C3 'const\s+handleDone\s*=\s*async|onDone=\{handleDone\}|<ProgressBar' immichFrame.Web/src/lib/components/home-page/home-page.svelte

Repository: immichFrame/ImmichFrame

Length of output: 1045

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check the handleDone implementation for potential rejection points
echo "=== handleDone implementation ==="
rg -n "const handleDone = async" -A 50 immichFrame.Web/src/lib/components/home-page/home-page.svelte | head -80

echo ""
echo "=== Search for other onDone handlers ==="
rg -n "onDone=" immichFrame.Web/src/lib/components/

echo ""
echo "=== Check if there are any try-catch or .catch() patterns in handleDone ==="
rg -n "\.catch|try {" immichFrame.Web/src/lib/components/home-page/home-page.svelte | grep -A2 -B2 "16[0-9]:"

Repository: immichFrame/ImmichFrame

Length of output: 2362

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check what getNextAssets and getPreviousAssets do (can they reject?)
echo "=== getNextAssets/getPreviousAssets signatures ==="
rg -n "const getNextAssets|const getPreviousAssets|let getNextAssets|let getPreviousAssets" -A 5 immichFrame.Web/src/lib/components/home-page/home-page.svelte | head -40

echo ""
echo "=== Check for throw/reject patterns in asset fetching ==="
rg -n "throw |reject\(" immichFrame.Web/src/lib/components/home-page/home-page.svelte | head -20

Repository: immichFrame/ImmichFrame

Length of output: 118

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Get more context around getNextAssets/getPreviousAssets calls
echo "=== Context around getNextAssets call ==="
rg -n "getNextAssets\(" immichFrame.Web/src/lib/components/home-page/home-page.svelte -B 10 -A 3

echo ""
echo "=== Check for error handling patterns ==="
rg -n "catch|error" immichFrame.Web/src/lib/components/home-page/home-page.svelte | head -20

echo ""
echo "=== Check imports at top of home-page.svelte ==="
head -50 immichFrame.Web/src/lib/components/home-page/home-page.svelte

Repository: immichFrame/ImmichFrame

Length of output: 4210

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Get the full getNextAssets implementation
echo "=== getNextAssets full implementation ==="
rg -n "async function getNextAssets" -A 30 immichFrame.Web/src/lib/components/home-page/home-page.svelte

echo ""
echo "=== getPreviousAssets full implementation ==="
rg -n "async function getPreviousAssets" -A 20 immichFrame.Web/src/lib/components/home-page/home-page.svelte

echo ""
echo "=== loadAssets function ==="
rg -n "async function loadAssets|const loadAssets" -A 20 immichFrame.Web/src/lib/components/home-page/home-page.svelte | head -50

Repository: immichFrame/ImmichFrame

Length of output: 2052

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Check pickAssets and updateAssetPromises implementations
echo "=== pickAssets function ==="
rg -n "async function pickAssets|const pickAssets" -A 25 immichFrame.Web/src/lib/components/home-page/home-page.svelte | head -50

echo ""
echo "=== updateAssetPromises function ==="
rg -n "async function updateAssetPromises|const updateAssetPromises" -A 20 immichFrame.Web/src/lib/components/home-page/home-page.svelte

echo ""
echo "=== Check for any unhandled promise rejections ==="
rg -n "throw " immichFrame.Web/src/lib/components/home-page/home-page.svelte

Repository: immichFrame/ImmichFrame

Length of output: 1708

Handle async onDone() rejections to prevent unhandled promise failures.

The call to onDone() at line 39 of progress-bar.svelte is fire-and-forget with no error handling. In home-page.svelte, handleDone is async and can reject: loadAsset() throws errors (line 394), and assetComponent?.play?.() can also fail. Currently this results in an unhandled promise rejection. Note that handleDone's own internal recursive calls (lines 185, 213) include .catch() handlers, but the external call from progress-bar.svelte does not.

Proposed patch 
 interface Props {
 	autoplay?: boolean;
 	status?: ProgressBarStatus;
 	location?: ProgressBarLocation;
 	hidden?: boolean;
 	duration?: number;
-	onDone: () => void;
+	onDone: () => void | Promise<void>;
 	onPlaying?: () => void;
 	onPaused?: () => void;
 }
@@
 	if (progress.current >= 1 && !completed) {
 		completed = true;
-		untrack(() => onDone());
+		const result = untrack(() => onDone());
+		void Promise.resolve(result).catch((err) => {
+			console.error('ProgressBar onDone failed:', err);
+		});
 	} else if (progress.current < 1) {
 		completed = false;
 	}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@immichFrame.Web/src/lib/components/elements/progress-bar.svelte` around lines
37 - 40, The call to onDone() inside progress-bar.svelte is invoked
fire-and-forget via untrack(() => onDone()) and can produce unhandled promise
rejections when the handler (e.g., handleDone which calls loadAsset() /
assetComponent.play()) rejects; update the invocation to capture the returned
promise and attach a rejection handler so rejections are handled (e.g., call
onDone(), check if it returns a Promise, and call .catch(...) or use void
onDone().catch(...)) while keeping it wrapped in untrack; refer to
progress.current, completed, untrack and onDone to locate the spot to change.

completed = false;
}
});

Expand All @@ -58,7 +57,8 @@
export const pause = async () => {
status = ProgressBarStatus.Paused;
onPaused();
await progress.set($progress);
// Freeze in place: targeting the current value with duration(to-from≈0) ≈ 0 halts motion.
await progress.set(progress.current);
};

export const restart = async (autoplay: boolean) => {
Expand All @@ -73,19 +73,13 @@
status = ProgressBarStatus.Paused;
await progress.set(0);
};

function setDuration(newDuration: number) {
return tweened<number>(0, {
duration: (from: number, to: number) => (to ? newDuration * 1000 * (to - from) : 0)
});
}
</script>

{#if !hidden}
<span
id="progressbar"
class="fixed left-0 h-[3px] bg-primary z-[1000]
{location == ProgressBarLocation.Top ? 'top-0' : 'bottom-0'}"
style:width={`${$progress * 100}%`}
style:width={`${progress.current * 100}%`}
></span>
{/if}
Loading
Loading