feat(server, web): Album's options (#4870)

* feat: disable activity

* fix: disable reactions

* fix: tests

* fix: tests

* fix: tests

* pr feedback

* pr feedback

* chore: styling & wording

* refactor component

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -7,6 +7,7 @@
   export let isLiked: ActivityResponseDto | null;
   export let numberOfComments: number | undefined;
   export let isShowActivity: boolean | undefined;
+  export let disabled: boolean;
 
   const dispatch = createEventDispatcher();
 </script>
@@ -14,7 +15,7 @@
 <div
   class="w-full h-14 flex p-4 text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60"
 >
-  <button on:click={() => dispatch('favorite')}>
+  <button class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
     <!-- svelte-ignore missing-declaration -->
     <div class="items-center justify-center">
       <Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />

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

@@ -38,6 +38,7 @@
   export let albumId: string;
   export let assetType: AssetTypeEnum | undefined = undefined;
   export let albumOwnerId: string;
+  export let disabled: boolean;
 
   let textArea: HTMLTextAreaElement;
   let innerHeight: number;
@@ -280,12 +281,15 @@
         <form class="flex w-full max-h-56 gap-1" on:submit|preventDefault={() => handleSendComment()}>
           <div class="flex w-full items-center gap-4">
             <textarea
+              {disabled}
               bind:this={textArea}
               bind:value={message}
-              placeholder="Say something"
+              placeholder={disabled ? 'Comments are disabled' : 'Say something'}
               on:input={autoGrow}
               on:keypress={handleEnter}
-              class="h-[18px] w-full max-h-56 pr-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200"
+              class="h-[18px] {disabled
+                ? 'cursor-not-allowed'
+                : ''} w-full max-h-56 pr-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200"
             />
           </div>
           {#if isSendingMessage}

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

@@ -104,6 +104,12 @@
     }
   }
 
+  $: {
+    if (album && !album.isActivityEnabled && numberOfComments === 0) {
+      isShowActivity = false;
+    }
+  }
+
   const handleAddComment = () => {
     numberOfComments++;
     updateNumberOfComments(1);
@@ -115,7 +121,7 @@
   };
 
   const handleFavorite = async () => {
-    if (album) {
+    if (album && album.isActivityEnabled) {
       try {
         if (isLiked) {
           const activityId = isLiked.id;
@@ -661,9 +667,10 @@
             on:onVideoStarted={handleVideoStarted}
           />
         {/if}
-        {#if $slideshowState === SlideshowState.None && isShared}
+        {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
           <div class="z-[9999] absolute bottom-0 right-0 mb-6 mr-6 justify-self-end">
             <ActivityStatus
+              disabled={!album?.isActivityEnabled}
               {isLiked}
               {numberOfComments}
               {isShowActivity}
@@ -744,6 +751,7 @@
     >
       <ActivityViewer
         {user}
+        disabled={!album.isActivityEnabled}
         assetType={asset.type}
         albumOwnerId={album.ownerId}
         albumId={album.id}