- add initial viewer button UI

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -11,6 +11,7 @@
     mdiCameraBurst,
     mdiCheckCircle,
     mdiHeart,
+    mdiMagnifyPlusOutline,
     mdiMotionPauseOutline,
     mdiMotionPlayOutline,
     mdiRotate360,
@@ -37,6 +38,7 @@
     thumbnailHeight?: number;
     selected?: boolean;
     selectionCandidate?: boolean;
+    selectionActive?: boolean;
     disabled?: boolean;
     disableLinkMouseOver?: boolean;
     readonly?: boolean;
@@ -45,7 +47,7 @@
     imageClass?: ClassValue;
     brokenAssetClass?: ClassValue;
     dimmed?: boolean;
-    onClick?: (asset: TimelineAsset) => void;
+    onClick?: (asset: TimelineAsset, forceView?: boolean) => void;
     onSelect?: (asset: TimelineAsset) => void;
     onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void;
   }
@@ -58,6 +60,7 @@
     thumbnailHeight = undefined,
     selected = false,
     selectionCandidate = false,
+    selectionActive = false,
     disabled = false,
     disableLinkMouseOver = false,
     readonly = false,
@@ -92,6 +95,12 @@
     }
   };
 
+  const onViewerIconClickedHandler = (e?: MouseEvent) => {
+    e?.stopPropagation();
+    e?.preventDefault();
+    onClick?.($state.snapshot(asset), true);
+  };
+
   const callClickHandlers = () => {
     if (selected) {
       onIconClickedHandler();
@@ -310,6 +319,19 @@
         </a>
       {/if}
 
+      <!-- View Asset while selecting -->
+      {#if mouseOver && selectionActive}
+        <button
+          type="button"
+          onclick={onViewerIconClickedHandler}
+          class={['absolute focus:outline-none bottom-2 end-2', { 'cursor-not-allowed': disabled }]}
+          tabindex={-1}
+          {disabled}
+        >
+          <Icon path={mdiMagnifyPlusOutline} size="24" class="text-white/80 hover:text-white" />
+        </button>
+      {/if}
+
       <ImageThumbnail
         class={imageClass}
         {brokenAssetClass}

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -75,8 +75,9 @@
     assets: TimelineAsset[],
     groupTitle: string,
     asset: TimelineAsset,
+    forceView: boolean = false,
   ) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
+    if (!forceView && (isSelectionMode || assetInteraction.selectionActive)) {
       assetSelectHandler(timelineManager, asset, assets, groupTitle);
       return;
     }
@@ -218,11 +219,11 @@
             {showArchiveIcon}
             {asset}
             {groupIndex}
-            onClick={(asset) => {
+            onClick={(asset, forceView:boolean = false) => {
               if (typeof onThumbnailClick === 'function') {
                 onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
               } else {
-                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset, forceView);
               }
             }}
             onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
@@ -230,6 +231,7 @@
             selected={assetInteraction.hasSelectedAsset(asset.id) ||
               dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
             selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
+            selectionActive={assetInteraction.selectionActive}
             disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
             thumbnailWidth={position.width}
             thumbnailHeight={position.height}