From 1791ef1b5c7c5e16ba86c1260605441730b72e10 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Tue, 18 May 2021 16:41:46 +0200
Subject: [PATCH] Make full-screen the default action

---
 .../photoGallery/MediaThumbnail.tsx           | 26 +++++++++++--------
 .../components/photoGallery/PhotoGallery.tsx  |  5 ++++
 .../photoGallery/photoGalleryMutations.ts     |  2 +-
 .../photoGallery/presentView/PresentMedia.tsx |  2 ++
 .../timelineGallery/TimelineGroupAlbum.tsx    | 14 +++++++---
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/photoGallery/MediaThumbnail.tsx b/ui/src/components/photoGallery/MediaThumbnail.tsx
index 45c20836..e6f7b4f8 100644
--- a/ui/src/components/photoGallery/MediaThumbnail.tsx
+++ b/ui/src/components/photoGallery/MediaThumbnail.tsx
@@ -49,12 +49,8 @@ const PhotoOverlay = styled.div<{ active: boolean }>`
   ${({ active }) =>
     active &&
     `
-      border: 4px solid rgba(65, 131, 196, 0.6);
-
-      & ${HoverIcon} {
-        top: -4px !important;
-        left: -4px !important;
-      }
+      outline: 4px solid rgba(65, 131, 196, 0.6);
+      outline-offset: -4px;
     `}
 `
 
@@ -87,6 +83,13 @@ const FavoriteIcon = styled(HoverIcon)`
   opacity: ${({ favorite }) => (favorite ? '0.8' : '0.2')} !important;
 `
 
+const SidebarIcon = styled(HoverIcon)`
+  margin: 10px !important;
+  position: absolute;
+  top: 0;
+  right: 0;
+`
+
 const VideoThumbnailIcon = styled(Icon)`
   color: rgba(255, 255, 255, 0.8);
   position: absolute;
@@ -152,7 +155,7 @@ export const MediaThumbnail = ({
         minWidth: `clamp(124px, ${minWidth}px, 100% - 8px)`,
       }}
       onClick={() => {
-        selectImage()
+        clickPresent()
       }}
     >
       <div
@@ -165,10 +168,11 @@ export const MediaThumbnail = ({
       </div>
       <PhotoOverlay active={active}>
         {videoIcon}
-        <HoverIcon
-          name="expand"
-          onClick={() => {
-            clickPresent()
+        <SidebarIcon
+          name="info"
+          onClick={(e: MouseEvent) => {
+            e.stopPropagation()
+            selectImage()
           }}
         />
         {heartIcon}
diff --git a/ui/src/components/photoGallery/PhotoGallery.tsx b/ui/src/components/photoGallery/PhotoGallery.tsx
index 8dec7185..278a28f8 100644
--- a/ui/src/components/photoGallery/PhotoGallery.tsx
+++ b/ui/src/components/photoGallery/PhotoGallery.tsx
@@ -81,6 +81,11 @@ const PhotoGallery = ({
             toggleFavoriteAction({
               media,
               markFavorite,
+            }).then(() => {
+              dispatchMedia({
+                type: 'selectImage',
+                index,
+              })
             })
           }}
           clickPresent={() => {
diff --git a/ui/src/components/photoGallery/photoGalleryMutations.ts b/ui/src/components/photoGallery/photoGalleryMutations.ts
index ee1b14b2..6933d7df 100644
--- a/ui/src/components/photoGallery/photoGalleryMutations.ts
+++ b/ui/src/components/photoGallery/photoGalleryMutations.ts
@@ -27,7 +27,7 @@ export const toggleFavoriteAction = ({
   media: PhotoGalleryProps_Media
   markFavorite: MutationFunction<markMediaFavorite, markMediaFavoriteVariables>
 }) => {
-  markFavorite({
+  return markFavorite({
     variables: {
       mediaId: media.id,
       favorite: !media.favorite,
diff --git a/ui/src/components/photoGallery/presentView/PresentMedia.tsx b/ui/src/components/photoGallery/presentView/PresentMedia.tsx
index 0076a097..f2a2797b 100644
--- a/ui/src/components/photoGallery/presentView/PresentMedia.tsx
+++ b/ui/src/components/photoGallery/presentView/PresentMedia.tsx
@@ -49,10 +49,12 @@ const PresentMedia = ({
       return (
         <div {...otherProps}>
           <StyledPhoto
+            key={`${media.id}-thumb`}
             src={media.thumbnail?.url}
             data-testid="present-img-thumbnail"
           />
           <StyledPhoto
+            key={`${media.id}-highres`}
             style={{ display: 'none' }}
             src={media.highRes?.url}
             data-testid="present-img-highres"
diff --git a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
index 05783278..211fce72 100644
--- a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
+++ b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
@@ -71,9 +71,8 @@ const TimelineGroupAlbum = ({
   mediaState,
   dispatchMedia,
 }: TimelineGroupAlbumProps) => {
-  const { media, mediaTotal, album } = mediaState.timelineGroups[
-    dateIndex
-  ].groups[albumIndex]
+  const { media, mediaTotal, album } =
+    mediaState.timelineGroups[dateIndex].groups[albumIndex]
 
   const [markFavorite] = useMarkFavoriteMutation()
 
@@ -105,6 +104,15 @@ const TimelineGroupAlbum = ({
         toggleFavoriteAction({
           media,
           markFavorite,
+        }).then(() => {
+          dispatchMedia({
+            type: 'selectImage',
+            index: {
+              album: albumIndex,
+              date: dateIndex,
+              media: index,
+            },
+          })
         })
       }}
       active={media.id === getActiveTimelineImage({ mediaState })?.id}