immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-19 17:23:21 +03:00
Code Issues Packages Projects Releases 17 Wiki Activity

fix: time buckets (#4358)

Browse Source 
* fix: time buckets

* chore: update entity metadata

* fix: set correct localDateTime

* fix: display without timezone shifting

* fix: handle non-utc databases

* fix: scrollbar

* docs: comment how buckets are sorted

* chore: remove test/log

* chore: lint

---------

Co-authored-by: Jonathan Jogenfors <jonathan@jogenfors.se>
This commit is contained in:
Jason Rasmussen
2023-10-06 08:12:09 -04:00
committed by GitHub
parent 4a8887f37b
commit 35fa6397ea
8 changed files with 40 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@@ -5,6 +5,7 @@
import { api } from '@api';
import { goto } from '$app/navigation';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import { fromLocalDateTime } from '$lib/utils/timeline-util';
import Play from 'svelte-material-icons/Play.svelte';
import Pause from 'svelte-material-icons/Pause.svelte';
import ChevronDown from 'svelte-material-icons/ChevronDown.svelte';
@@ -214,7 +215,7 @@
<div class="absolute left-8 top-4 text-sm font-medium text-white">
<p>
{DateTime.fromISO(currentMemory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL)}
{fromLocalDateTime(currentMemory.assets[0].localDateTime).toLocaleString(DateTime.DATE_FULL)}
</p>
<p>
{currentAsset.exifInfo?.city || ''}

5
web/src/lib/components/photos-page/asset-date-group.svelte
View File

@@ -1,10 +1,9 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import { getAssetRatio } from '$lib/utils/asset-utils';
import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
import { formatGroupTitle, fromLocalDateTime, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
import type { AssetResponseDto } from '@api';
import justifiedLayout from 'justified-layout';
import { DateTime } from 'luxon';
import { createEventDispatcher } from 'svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
@@ -127,7 +126,7 @@
<section id="asset-group-by-date" class="flex flex-wrap gap-x-12" bind:clientHeight={actualBucketHeight}>
{#each assetsGroupByDate as groupAssets, groupIndex (groupAssets[0].id)}
{@const asset = groupAssets[0]}
{@const groupTitle = formatGroupTitle(DateTime.fromISO(asset.localDateTime).startOf('day'))}
{@const groupTitle = formatGroupTitle(fromLocalDateTime(asset.localDateTime).startOf('day'))}
<!-- Asset Group By Date -->
<!-- svelte-ignore a11y-no-static-element-interactions -->

7
web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import type { AssetStore } from '$lib/stores/assets.store';
import { fromLocalDateTime } from '$lib/utils/timeline-util';
import { createEventDispatcher } from 'svelte';
export let timelineY = 0;
@@ -92,9 +93,9 @@
{/if}
<!-- Time Segment -->
{#each segments as segment, index (segment.timeGroup)}
{@const date = new Date(segment.timeGroup)}
{@const year = date.getFullYear()}
{@const label = `${date.toLocaleString('default', { month: 'short' })} ${year}`}
{@const date = fromLocalDateTime(segment.timeGroup)}
{@const year = date.year}
{@const label = `${date.toLocaleString({ month: 'short' })} ${year}`}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div

4
web/src/lib/utils/timeline-util.ts
View File

@@ -2,6 +2,8 @@ import type { AssetResponseDto } from '@api';
import lodash from 'lodash-es';
import { DateTime, Interval } from 'luxon';
export const fromLocalDateTime = (localDateTime: string) => DateTime.fromISO(localDateTime, { zone: 'UTC' });
export const groupDateFormat: Intl.DateTimeFormatOptions = {
weekday: 'short',
month: 'short',
@@ -45,7 +47,7 @@ export function splitBucketIntoDateGroups(
): AssetResponseDto[][] {
return lodash
.chain(assets)
.groupBy((asset) => new Date(asset.localDateTime).toLocaleDateString(locale, groupDateFormat))
.groupBy((asset) => fromLocalDateTime(asset.localDateTime).toLocaleString(groupDateFormat, { locale }))
.sortBy((group) => assets.indexOf(group[0]))
.value();
}