From f5164b42e06e0f9d10f9e26a423961b6017fe294 Mon Sep 17 00:00:00 2001
From: pyorot <FMasic@hotmail.co.uk>
Date: Mon, 1 Jul 2024 15:05:49 +0100
Subject: [PATCH] fix(web): remove black bezels + better integrate
 ActivityStatus (#10667)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* remove black bezels + better integrate activity status

* remove justify-self-end + mr-4 → mr-3 (closer to desired spacing)

* clean up

* clean up some more

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../lib/components/asset-viewer/activity-status.svelte    | 8 +-------
 web/src/lib/components/asset-viewer/asset-viewer.svelte   | 3 +--
 .../components/asset-viewer/video-native-viewer.svelte    | 6 +-----
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte         | 1 -
 4 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/activity-status.svelte b/web/src/lib/components/asset-viewer/activity-status.svelte
index c09dbc53a4..438a426b16 100644
--- a/web/src/lib/components/asset-viewer/activity-status.svelte
+++ b/web/src/lib/components/asset-viewer/activity-status.svelte
@@ -3,11 +3,9 @@
   import { mdiCommentOutline, mdiHeart, mdiHeartOutline } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import Icon from '../elements/icon.svelte';
-  import { t } from 'svelte-i18n';
 
   export let isLiked: ActivityResponseDto | null;
   export let numberOfComments: number | undefined;
-  export let isShowActivity: boolean | undefined;
   export let disabled: boolean;
 
   const dispatch = createEventDispatcher<{
@@ -16,9 +14,7 @@
   }>();
 </script>
 
-<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"
->
+<div class="w-full flex text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60">
   <button type="button" class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
     <div class="items-center justify-center">
       <Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />
@@ -29,8 +25,6 @@
       <Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
       {#if numberOfComments}
         <div class="text-xl">{numberOfComments}</div>
-      {:else if !isShowActivity}
-        <div class="text-lg">{$t('say_something')}</div>
       {/if}
     </div>
   </button>
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index e3cafae14c..ce4430edf1 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -682,12 +682,11 @@
             />
           {/if}
           {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
-            <div class="z-[9999] absolute bottom-0 right-0 mb-4 mr-6">
+            <div class="z-[9999] absolute bottom-0 right-0 mb-20 mr-8">
               <ActivityStatus
                 disabled={!album?.isActivityEnabled}
                 {isLiked}
                 {numberOfComments}
-                {isShowActivity}
                 on:favorite={handleFavorite}
                 on:openActivityTab={handleOpenActivity}
               />
diff --git a/web/src/lib/components/asset-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
index 62dec38eab..6186358dcb 100644
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
@@ -51,11 +51,7 @@
   };
 </script>
 
-<div
-  transition:fade={{ duration: 150 }}
-  class="flex select-none place-content-center place-items-center"
-  style="height: calc(100% - 64px)"
->
+<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   <video
     bind:this={element}
     loop={$loopVideoPreference && loopVideo}
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index d581a440a8..a051f6c40e 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -635,7 +635,6 @@
               disabled={!album.isActivityEnabled}
               {isLiked}
               numberOfComments={$numberOfComments}
-              {isShowActivity}
               on:favorite={handleFavorite}
               on:openActivityTab={handleOpenAndCloseActivityTab}
             />