feat(server,web): libraries (#3124)

* feat: libraries

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

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

@@ -6,6 +6,7 @@
   import { createEventDispatcher } from 'svelte';
   import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
   import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
+  import AlertOutline from 'svelte-material-icons/AlertOutline.svelte';
   import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
   import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
   import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
@@ -74,6 +75,14 @@
     <CircleIconButton isOpacity={true} logo={ArrowLeft} on:click={() => dispatch('goBack')} />
   </div>
   <div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
+    {#if asset.isOffline}
+      <CircleIconButton
+        isOpacity={true}
+        logo={AlertOutline}
+        on:click={() => dispatch('showDetail')}
+        title="Asset Offline"
+      />
+    {/if}
     {#if showMotionPlayButton}
       {#if isMotionPhotoPlaying}
         <CircleIconButton
@@ -134,7 +143,9 @@
     {/if}
 
     {#if isOwner}
-      <CircleIconButton isOpacity={true} logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
+      {#if !asset.isReadOnly && !asset.isExternal}
+        <CircleIconButton isOpacity={true} logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
+      {/if}
       <div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
         <CircleIconButton isOpacity={true} logo={DotsVertical} on:click={showOptionsMenu} title="More" />
         {#if isShowAssetOptions}

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

@@ -50,7 +50,7 @@
   let addToSharedAlbum = true;
   let shouldPlayMotionPhoto = false;
   let isShowProfileImageCrop = false;
-  let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
+  let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
   let canCopyImagesToClipboard: boolean;
 
   const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo);

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

@@ -101,6 +101,20 @@
     <p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
   </div>
 
+  {#if asset.isOffline}
+    <section class="px-4 py-4">
+      <div role="alert">
+        <div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">Asset offline</div>
+        <div class="rounded-b border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
+          <p>
+            This asset is offline. Immich can not access its file location. Please ensure the asset is available and
+            then rescan the library.
+          </p>
+        </div>
+      </div>
+    </section>
+  {/if}
+
   <section class="mx-4 mt-10" style:display={!isOwner && textarea?.value == '' ? 'none' : 'block'}>
     <textarea
       bind:this={textarea}
@@ -156,8 +170,16 @@
   {/if}
 
   <div class="px-4 py-4">
-    {#if !asset.exifInfo}
+    {#if !asset.exifInfo && !asset.isExternal}
       <p class="text-sm">NO EXIF INFO AVAILABLE</p>
+    {:else if !asset.exifInfo && asset.isExternal}
+      <div class="flex gap-4 py-4">
+        <div>
+          <p class="break-all">
+            Metadata not loaded for {asset.originalPath}
+          </p>
+        </div>
+      </div>
     {:else}
       <p class="text-sm">DETAILS</p>
     {/if}