github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-22 17:19:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

remove seek buttons and center controls, and put time range above controls

Browse Source
This commit is contained in:
Mees Frensel
2026-03-11 13:53:03 +01:00
parent 5baf860289
commit a733584f49
1 changed files with 5 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/src/lib/components/asset-viewer/video-native-viewer.svelte
View File

@@ -14,8 +14,6 @@
mdiFullscreenExit,
mdiPause,
mdiPlay,
mdiSkipBackward,
mdiSkipForward,
mdiVolumeHigh,
mdiVolumeLow,
mdiVolumeMedium,
@@ -27,8 +25,6 @@
import 'media-chrome/media-mute-button';
import 'media-chrome/media-play-button';
import 'media-chrome/media-playback-rate-button';
import 'media-chrome/media-seek-backward-button';
import 'media-chrome/media-seek-forward-button';
import 'media-chrome/media-time-display';
import 'media-chrome/media-time-range';
import 'media-chrome/media-volume-range';
@@ -72,7 +68,6 @@
: getAssetPlaybackUrl({ id: assetId, cacheKey }),
);
let duration = $derived(timeToSeconds(asset.duration));
let showSeekButtons = $derived(duration > 10);
let showVideo = $state(false);
let hasFocused = $state(false);
@@ -184,38 +179,16 @@
poster={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Preview, cacheKey })}
src={assetFileUrl}
></video>
<div part="center" slot="centered-chrome">
{#if extendedControls && showSeekButtons}
<media-seek-backward-button seekoffset="10" class="rounded-full p-2 outline-none">
<Icon slot="icon" icon={mdiSkipBackward} />
</media-seek-backward-button>
{/if}
<media-play-button class="rounded-full h-12 p-3 outline-none bg-light-100/60 hover:bg-light-100">
<Icon slot="play" icon={mdiPlay} />
<Icon slot="pause" icon={mdiPause} />
</media-play-button>
{#if extendedControls && showSeekButtons}
<media-seek-forward-button seekoffset="10" class="rounded-full p-2 outline-none">
<Icon slot="icon" icon={mdiSkipForward} />
</media-seek-forward-button>
{/if}
</div>
<div class="flex h-16 w-full place-items-center bg-linear-to-b to-black/40 px-3">
<media-control-bar part="bottom" class="flex justify-end gap-2 h-10 w-full">
<div class="flex flex-col h-26 w-full bg-linear-to-b to-black/40 p-3">
<media-time-range class="w-full h-10 rounded-lg p-2 outline-none"></media-time-range>
<media-control-bar part="bottom" class="flex gap-2 h-10 w-full">
<media-play-button class="rounded-full p-2 outline-none">
<Icon slot="play" icon={mdiPlay} />
<Icon slot="pause" icon={mdiPause} />
</media-play-button>
{#if extendedControls && showSeekButtons}
<media-seek-backward-button seekoffset="10" class="rounded-full p-2 outline-none">
<Icon slot="icon" icon={mdiSkipBackward} />
</media-seek-backward-button>
<media-seek-forward-button seekoffset="10" class="rounded-full p-2 outline-none">
<Icon slot="icon" icon={mdiSkipForward} />
</media-seek-forward-button>
{/if}
<media-time-range class="rounded-lg p-2 outline-none"></media-time-range>
<span class="flex-grow"></span>
<media-time-display showduration class="rounded-lg p-2 outline-none"></media-time-display>
{#if extendedControls}
<media-playback-rate-button rates="0.5 1 1.5 2" class="rounded-full p-2 outline-none"
@@ -280,37 +253,6 @@
box-shadow: var(--media-focus-box-shadow);
}
/* Small screens */
media-controller {
--bottom-play-button-display: none;
--bottom-seek-buttons-display: none;
--center-buttons-display: inline-flex;
--media-playback-rate-button-display: none;
}
/* Larger screens */
*[breakpointsm] {
--bottom-play-button-display: flex;
--center-buttons-display: none;
}
*[breakpointmd] {
--bottom-seek-buttons-display: flex;
--media-playback-rate-button-display: inline-flex;
}
*::part(bottom) {
--media-play-button-display: var(--bottom-play-button-display);
--media-seek-backward-button-display: var(--bottom-seek-buttons-display);
--media-seek-forward-button-display: var(--bottom-seek-buttons-display);
}
*::part(center) {
--media-play-button-display: var(--center-buttons-display);
--media-seek-backward-button-display: var(--center-buttons-display);
--media-seek-forward-button-display: var(--center-buttons-display);
}
*::part(tooltip) {
font-size: var(--text-xs);
color: white;