github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: responsive video duration in thumbnail (#26770)

Browse Source
This commit is contained in:
Min Idzelis
2026-03-08 03:37:41 -04:00
committed by GitHub
parent aaf34fa7d4
commit 7a83baaf27
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/assets/thumbnail/thumbnail.svelte
+7 -7
View File
@@ -334,27 +334,27 @@
<!-- Favorite asset star --> <!-- Favorite asset star -->
{#if !authManager.isSharedLink && asset.isFavorite} {#if !authManager.isSharedLink && asset.isFavorite}
<div class="z-2 absolute bottom-2 start-2"> <div class="z-2 absolute bottom-2 inset-s-2">
<Icon data-icon-favorite icon={mdiHeart} size="24" class="text-white" /> <Icon data-icon-favorite icon={mdiHeart} size="24" class="text-white" />
</div> </div>
{/if} {/if}
{#if !!assetOwner} {#if !!assetOwner}
<div class="z-2 absolute bottom-1 end-2 max-w-[50%]"> <div class="z-2 absolute bottom-1 inset-e-2 max-w-[50%]">
<p class="text-xs font-medium text-white drop-shadow-lg max-w-[100%] truncate"> <p class="text-xs font-medium text-white drop-shadow-lg max-w-full truncate">
{assetOwner.name} {assetOwner.name}
</p> </p>
</div> </div>
{/if} {/if}
{#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive} {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
<div class={['z-2 absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}> <div class={['z-2 absolute inset-s-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
<Icon data-icon-archive icon={mdiArchiveArrowDownOutline} size="24" class="text-white" /> <Icon data-icon-archive icon={mdiArchiveArrowDownOutline} size="24" class="text-white" />
</div> </div>
{/if} {/if}
{#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR} {#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}
<div class="z-2 absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white"> <div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
<span class="pe-2 pt-2"> <span class="pe-2 pt-2">
<Icon icon={mdiRotate360} size="24" /> <Icon icon={mdiRotate360} size="24" />
</span> </span>
@@ -362,7 +362,7 @@
{/if} {/if}
{#if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000')} {#if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000')}
<div class="z-2 absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white"> <div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
<span class="pe-2 pt-2"> <span class="pe-2 pt-2">
<Icon icon={mouseOver ? mdiMotionPauseOutline : mdiFileGifBox} size="24" /> <Icon icon={mouseOver ? mdiMotionPauseOutline : mdiFileGifBox} size="24" />
</span> </span>
@@ -374,7 +374,7 @@
<div <div
class={[ class={[
'z-2 absolute flex place-items-center gap-1 text-xs font-medium text-white', 'z-2 absolute flex place-items-center gap-1 text-xs font-medium text-white',
asset.isImage && !asset.livePhotoVideoId ? 'top-0 end-0' : 'top-7 end-1', asset.isImage && !asset.livePhotoVideoId ? 'top-0 inset-e-0' : 'top-7 inset-e-1',
]} ]}
> >
<span class="pe-2 pt-2 flex place-items-center gap-1"> <span class="pe-2 pt-2 flex place-items-center gap-1">
web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+7 -3
View File
@@ -89,10 +89,10 @@
{/if} {/if}
<div <div
class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]" class="@container absolute inset-x-0 top-0 flex justify-end place-items-center gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]"
> >
{#if showTime} {#if showTime}
<span class="pt-2"> <span class="hidden @min-[100px]:inline pt-2">
{#if remainingSeconds < 60} {#if remainingSeconds < 60}
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')} {Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
{:else if remainingSeconds < 3600} {:else if remainingSeconds < 3600}
@@ -104,7 +104,11 @@
{/if} {/if}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<span class="pe-2 pt-2 drop-shadow-[1px_1px_6px_rgb(0_0_0)]" onmouseenter={onMouseEnter} onmouseleave={onMouseLeave}> <span
class="pe-2 pt-2 @max-[99px]:scale-75 @max-[99px]:pe-1 @max-[99px]:pt-1 drop-shadow-[1px_1px_6px_rgb(0_0_0)]"
onmouseenter={onMouseEnter}
onmouseleave={onMouseLeave}
>
{#if enablePlayback} {#if enablePlayback}
{#if loading} {#if loading}
<LoadingSpinner size="large" /> <LoadingSpinner size="large" />