feat(web): show original uploader in shared album photo details (#3977)

* feat(web): show original uploader in shared album photo details

* feat: send owner in asset by id response

* chore: open api

* fix: linting

* fix: change to Shared By

* openapi

* openapi

* api

* styling

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex <alex.tran1502@gmail.com>

cli/src/api/open-api/api.ts

@@ -645,6 +645,12 @@ export interface AssetResponseDto {
      * @memberof AssetResponseDto
      */
     'originalPath': string;
+    /**
+     * 
+     * @type {UserResponseDto}
+     * @memberof AssetResponseDto
+     */
+    'owner'?: UserResponseDto;
     /**
      * 
      * @type {string}

server/immich-openapi-specs.json

@@ -5208,6 +5208,9 @@
           "originalPath": {
             "type": "string"
           },
+          "owner": {
+            "$ref": "#/components/schemas/UserResponseDto"
+          },
           "ownerId": {
             "type": "string"
           },
@@ -5246,8 +5249,8 @@
           "type",
           "id",
           "deviceAssetId",
-          "ownerId",
           "deviceId",
+          "ownerId",
           "originalPath",
           "originalFileName",
           "resized",

server/src/domain/asset/response-dto/asset-response.dto.ts

@@ -2,14 +2,16 @@ import { AssetEntity, AssetType } from '@app/infra/entities';
 import { ApiProperty } from '@nestjs/swagger';
 import { PersonResponseDto, mapFace } from '../../person/person.dto';
 import { TagResponseDto, mapTag } from '../../tag';
+import { UserResponseDto, mapUser } from '../../user/response-dto/user-response.dto';
 import { ExifResponseDto, mapExif } from './exif-response.dto';
 import { SmartInfoResponseDto, mapSmartInfo } from './smart-info-response.dto';
 
 export class AssetResponseDto {
   id!: string;
   deviceAssetId!: string;
-  ownerId!: string;
   deviceId!: string;
+  ownerId!: string;
+  owner?: UserResponseDto;
 
   @ApiProperty({ enumName: 'AssetTypeEnum', enum: AssetType })
   type!: AssetType;
@@ -33,11 +35,12 @@ export class AssetResponseDto {
   checksum!: string;
 }
 
-export function mapAsset(entity: AssetEntity): AssetResponseDto {
+function _map(entity: AssetEntity, withExif: boolean): AssetResponseDto {
   return {
     id: entity.id,
     deviceAssetId: entity.deviceAssetId,
     ownerId: entity.ownerId,
+    owner: entity.owner ? mapUser(entity.owner) : undefined,
     deviceId: entity.deviceId,
     type: entity.type,
     originalPath: entity.originalPath,
@@ -50,7 +53,7 @@ export function mapAsset(entity: AssetEntity): AssetResponseDto {
     isFavorite: entity.isFavorite,
     isArchived: entity.isArchived,
     duration: entity.duration ?? '0:00:00.00000',
-    exifInfo: entity.exifInfo ? mapExif(entity.exifInfo) : undefined,
+    exifInfo: withExif ? (entity.exifInfo ? mapExif(entity.exifInfo) : undefined) : undefined,
     smartInfo: entity.smartInfo ? mapSmartInfo(entity.smartInfo) : undefined,
     livePhotoVideoId: entity.livePhotoVideoId,
     tags: entity.tags?.map(mapTag),
@@ -59,30 +62,12 @@ export function mapAsset(entity: AssetEntity): AssetResponseDto {
   };
 }
 
+export function mapAsset(entity: AssetEntity): AssetResponseDto {
+  return _map(entity, true);
+}
+
 export function mapAssetWithoutExif(entity: AssetEntity): AssetResponseDto {
-  return {
+  return _map(entity, false);
-    id: entity.id,
-    deviceAssetId: entity.deviceAssetId,
-    ownerId: entity.ownerId,
-    deviceId: entity.deviceId,
-    type: entity.type,
-    originalPath: entity.originalPath,
-    originalFileName: entity.originalFileName,
-    resized: !!entity.resizePath,
-    thumbhash: entity.thumbhash?.toString('base64') || null,
-    fileCreatedAt: entity.fileCreatedAt,
-    fileModifiedAt: entity.fileModifiedAt,
-    updatedAt: entity.updatedAt,
-    isFavorite: entity.isFavorite,
-    isArchived: entity.isArchived,
-    duration: entity.duration ?? '0:00:00.00000',
-    exifInfo: undefined,
-    smartInfo: entity.smartInfo ? mapSmartInfo(entity.smartInfo) : undefined,
-    livePhotoVideoId: entity.livePhotoVideoId,
-    tags: entity.tags?.map(mapTag),
-    people: entity.faces?.map(mapFace),
-    checksum: entity.checksum.toString('base64'),
-  };
 }
 
 export class MemoryLaneResponseDto {

server/src/immich/api-v1/asset/asset-repository.ts

@@ -107,6 +107,7 @@ export class AssetRepository implements IAssetRepository {
         tags: true,
         sharedLinks: true,
         smartInfo: true,
+        owner: true,
         faces: {
           person: true,
         },

server/src/immich/api-v1/asset/asset.service.ts

@@ -199,6 +199,10 @@ export class AssetService {
       data.people = [];
     }
 
+    if (authUser.isPublicUser) {
+      delete data.owner;
+    }
+
     return data;
   }
 

server/test/fixtures/shared-link.stub.ts

@@ -1,5 +1,5 @@
 import { AlbumResponseDto, AssetResponseDto, ExifResponseDto, mapUser, SharedLinkResponseDto } from '@app/domain';
-import { AssetType, SharedLinkEntity, SharedLinkType } from '@app/infra/entities';
+import { AssetType, SharedLinkEntity, SharedLinkType, UserEntity } from '@app/infra/entities';
 import { assetStub } from './asset.stub';
 import { authStub } from './auth.stub';
 import { userStub } from './user.stub';
@@ -158,7 +158,7 @@ export const sharedLinkStub = {
       assets: [
         {
           id: 'id_1',
-          owner: userStub.user1,
+          owner: undefined as unknown as UserEntity,
           ownerId: 'user_id_1',
           deviceAssetId: 'device_asset_id_1',
           deviceId: 'device_id_1',

web/src/api/open-api/api.ts

@@ -645,6 +645,12 @@ export interface AssetResponseDto {
      * @memberof AssetResponseDto
      */
     'originalPath': string;
+    /**
+     * 
+     * @type {UserResponseDto}
+     * @memberof AssetResponseDto
+     */
+    'owner'?: UserResponseDto;
     /**
      * 
      * @type {string}

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -13,6 +13,7 @@
   import { asByteUnitString } from '../../utils/byte-units';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import { getAssetFilename } from '$lib/utils/asset-utils';
+  import UserAvatar from '../shared-components/user-avatar.svelte';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -20,6 +21,8 @@
   let textarea: HTMLTextAreaElement;
   let description: string;
 
+  $: isOwner = $page?.data?.user?.id === asset.ownerId;
+
   $: {
     // Get latest description from server
     if (asset.id && !api.isSharedLink) {
@@ -93,20 +96,17 @@
     <p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
   </div>
 
-  <section
+  <section class="mx-4 mt-10" style:display={!isOwner && textarea?.value == '' ? 'none' : 'block'}>
-    class="mx-4 mt-10"
-    style:display={$page?.data?.user?.id !== asset.ownerId && textarea?.value == '' ? 'none' : 'block'}
-  >
     <textarea
       bind:this={textarea}
       class="max-h-[500px]
       w-full resize-none overflow-hidden border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary"
-      placeholder={$page?.data?.user?.id !== asset.ownerId ? '' : 'Add a description'}
+      placeholder={!isOwner ? '' : 'Add a description'}
       on:focusin={handleFocusIn}
       on:focusout={handleFocusOut}
       on:input={autoGrowHeight}
       bind:value={description}
-      disabled={$page?.data?.user?.id !== asset.ownerId}
+      disabled={!isOwner}
     />
   </section>
 
@@ -291,11 +291,27 @@
   </div>
 {/if}
 
-<section class="p-2 dark:text-immich-dark-fg">
+{#if asset.owner && !isOwner}
-  <div class="px-4 py-4">
+  <section class="px-6 pt-6 dark:text-immich-dark-fg">
-    {#if albums.length > 0}
+    <p class="text-sm">SHARED BY</p>
-      <p class="pb-4 text-sm">APPEARS IN</p>
+    <div class="flex gap-4 pt-4">
+      <div>
+        <UserAvatar user={asset.owner} size="md" autoColor />
+      </div>
+
+      <div class="mb-auto mt-auto">
+        <p>
+          {asset.owner.firstName}
+          {asset.owner.lastName}
+        </p>
+      </div>
+    </div>
+  </section>
 {/if}
+
+{#if albums.length > 0}
+  <section class="p-6 dark:text-immich-dark-fg">
+    <p class="pb-4 text-sm">APPEARS IN</p>
     {#each albums as album}
       <a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
         <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -326,5 +342,5 @@
         </div>
       </a>
     {/each}
-  </div>
   </section>
+{/if}