Skip to content

Commit a26d703

Browse files
robinbrisadanieldietzleralextran1502
authored
feat(web): display number of likes in asset viewer (#18911)
* feat: display number of likes * fix: properly decrement like count on unlike Co-authored-by: Daniel Dietzler <[email protected]> * chore: pr feedback * chore: updated related test * chore: formatter run * chore: force numberOfLikes to null in album context to pass lint * chore: open-api updated * fix: use undefined, not null * styling tweaks * chore: updated sql --------- Co-authored-by: Daniel Dietzler <[email protected]> Co-authored-by: Alex Tran <[email protected]>
1 parent 5d0ad85 commit a26d703

File tree

13 files changed

+77
-29
lines changed

13 files changed

+77
-29
lines changed

‎mobile/openapi/lib/model/activity_statistics_response_dto.dart‎

Lines changed: 11 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎open-api/immich-openapi-specs.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8482,10 +8482,14 @@
84828482
"properties": {
84838483
"comments": {
84848484
"type": "integer"
8485+
},
8486+
"likes": {
8487+
"type": "integer"
84858488
}
84868489
},
84878490
"required": [
8488-
"comments"
8491+
"comments",
8492+
"likes"
84898493
],
84908494
"type": "object"
84918495
},

‎open-api/typescript-sdk/src/fetch-client.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export type ActivityCreateDto = {
3838
};
3939
export type ActivityStatisticsResponseDto = {
4040
comments: number;
41+
likes: number;
4142
};
4243
export type NotificationCreateDto = {
4344
data?: object;

‎server/src/dtos/activity.dto.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ export class ActivityResponseDto {
2929
export class ActivityStatisticsResponseDto {
3030
@ApiProperty({ type: 'integer' })
3131
comments!: number;
32+
33+
@ApiProperty({ type: 'integer' })
34+
likes!: number;
3235
}
3336

3437
export class ActivityDto {

‎server/src/queries/activity.repository.sql‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,15 +62,21 @@ where
6262

6363
-- ActivityRepository.getStatistics
6464
select
65-
count(*) as "count"
65+
count(*) filter (
66+
where
67+
"activity"."isLiked" = $1
68+
) as "comments",
69+
count(*) filter (
70+
where
71+
"activity"."isLiked" = $2
72+
) as "likes"
6673
from
6774
"activity"
6875
inner join "users" on "users"."id" = "activity"."userId"
6976
and "users"."deletedAt" is null
7077
left join "assets" on "assets"."id" = "activity"."assetId"
7178
where
72-
"activity"."assetId" = $1
73-
and "activity"."albumId" = $2
74-
and "activity"."isLiked" = $3
79+
"activity"."assetId" = $3
80+
and "activity"."albumId" = $4
7581
and "assets"."deletedAt" is null
7682
and "assets"."visibility" != 'locked'

‎server/src/repositories/activity.repository.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,19 +67,27 @@ export class ActivityRepository {
6767
}
6868

6969
@GenerateSql({ params: [{ albumId: DummyValue.UUID, assetId: DummyValue.UUID }] })
70-
async getStatistics({ albumId, assetId }: { albumId: string; assetId?: string }): Promise<number> {
71-
const { count } = await this.db
70+
async getStatistics({
71+
albumId,
72+
assetId,
73+
}: {
74+
albumId: string;
75+
assetId?: string;
76+
}): Promise<{ comments: number; likes: number }> {
77+
const result = await this.db
7278
.selectFrom('activity')
73-
.select((eb) => eb.fn.countAll<number>().as('count'))
79+
.select((eb) => [
80+
eb.fn.countAll<number>().filterWhere('activity.isLiked', '=', false).as('comments'),
81+
eb.fn.countAll<number>().filterWhere('activity.isLiked', '=', true).as('likes'),
82+
])
7483
.innerJoin('users', (join) => join.onRef('users.id', '=', 'activity.userId').on('users.deletedAt', 'is', null))
7584
.leftJoin('assets', 'assets.id', 'activity.assetId')
7685
.$if(!!assetId, (qb) => qb.where('activity.assetId', '=', assetId!))
7786
.where('activity.albumId', '=', albumId)
78-
.where('activity.isLiked', '=', false)
7987
.where('assets.deletedAt', 'is', null)
8088
.where('assets.visibility', '!=', sql.lit(AssetVisibility.LOCKED))
8189
.executeTakeFirstOrThrow();
8290

83-
return count;
91+
return result;
8492
}
8593
}

‎server/src/services/activity.service.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,13 @@ describe(ActivityService.name, () => {
5454
});
5555

5656
describe('getStatistics', () => {
57-
it('should get the comment count', async () => {
57+
it('should get the comment and like count', async () => {
5858
const [albumId, assetId] = newUuids();
5959

60-
mocks.activity.getStatistics.mockResolvedValue(1);
60+
mocks.activity.getStatistics.mockResolvedValue({ comments: 1, likes: 3 });
6161
mocks.access.album.checkOwnerAccess.mockResolvedValue(new Set([albumId]));
6262

63-
await expect(sut.getStatistics(factory.auth(), { assetId, albumId })).resolves.toEqual({ comments: 1 });
63+
await expect(sut.getStatistics(factory.auth(), { assetId, albumId })).resolves.toEqual({ comments: 1, likes: 3 });
6464
});
6565
});
6666

‎server/src/services/activity.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export class ActivityService extends BaseService {
3131

3232
async getStatistics(auth: AuthDto, dto: ActivityDto): Promise<ActivityStatisticsResponseDto> {
3333
await this.requireAccess({ auth, permission: Permission.ALBUM_READ, ids: [dto.albumId] });
34-
return { comments: await this.activityRepository.getStatistics({ albumId: dto.albumId, assetId: dto.assetId }) };
34+
return await this.activityRepository.getStatistics({ albumId: dto.albumId, assetId: dto.assetId });
3535
}
3636

3737
async create(auth: AuthDto, dto: ActivityCreateDto): Promise<MaybeDuplicate<ActivityResponseDto>> {

‎web/src/lib/components/asset-viewer/activity-status.svelte‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,29 @@
77
interface Props {
88
isLiked: ActivityResponseDto | null;
99
numberOfComments: number | undefined;
10+
numberOfLikes: number | undefined;
1011
disabled: boolean;
1112
onOpenActivityTab: () => void;
1213
onFavorite: () => void;
1314
}
1415
15-
let { isLiked, numberOfComments, disabled, onOpenActivityTab, onFavorite }: Props = $props();
16+
let { isLiked, numberOfComments, numberOfLikes, disabled, onOpenActivityTab, onFavorite }: Props = $props();
1617
</script>
1718

18-
<div class="w-full flex p-4 text-white items-center justify-center rounded-full gap-5 bg-immich-dark-bg bg-opacity-60">
19+
<div class="w-full flex p-4 items-center justify-center rounded-full gap-5 bg-subtle border bg-opacity-60">
1920
<button type="button" class={disabled ? 'cursor-not-allowed' : ''} onclick={onFavorite} {disabled}>
20-
<div class="items-center justify-center">
21-
<Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />
21+
<div class="flex gap-2 items-center justify-center">
22+
<Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} class={isLiked ? 'text-red-400' : 'text-fg'} />
23+
{#if numberOfLikes}
24+
<div class="text-l">{numberOfLikes.toLocaleString($locale)}</div>
25+
{/if}
2226
</div>
2327
</button>
2428
<button type="button" onclick={onOpenActivityTab}>
2529
<div class="flex gap-2 items-center justify-center">
2630
<Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
2731
{#if numberOfComments}
28-
<div class="text-xl">{numberOfComments.toLocaleString($locale)}</div>
32+
<div class="text-l">{numberOfComments.toLocaleString($locale)}</div>
2933
{/if}
3034
</div>
3135
</button>

‎web/src/lib/components/asset-viewer/activity-viewer.svelte‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,9 @@
118118
};
119119
</script>
120120

121-
<div class="overflow-y-hidden relative h-full" bind:offsetHeight={innerHeight}>
122-
<div class="dark:bg-immich-dark-bg dark:text-immich-dark-fg w-full h-full">
123-
<div
124-
class="flex w-full h-fit dark:bg-immich-dark-bg dark:text-immich-dark-fg p-2 bg-white"
125-
bind:clientHeight={activityHeight}
126-
>
121+
<div class="overflow-y-hidden relative h-full border-l border-subtle bg-subtle" bind:offsetHeight={innerHeight}>
122+
<div class="w-full h-full">
123+
<div class="flex w-full h-fit dark:text-immich-dark-fg p-2 bg-subtle" bind:clientHeight={activityHeight}>
127124
<div class="flex place-items-center gap-2">
128125
<IconButton
129126
shape="round"

0 commit comments

Comments
 (0)