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()
}}
>
{videoIcon}
- {
- clickPresent()
+ {
+ 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
}) => {
- 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 (
{
- 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}