webapp: Fix vanished media in single view

xemle · Apr 23, 2023 · c33d70d · c33d70d
1 parent f0639f1
commit c33d70d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- webapp: Fix vanished media in single view
 - database: Fix preview paths on Windows hosts
 - server: Fix database watcher
 - cli: Honor custom server port in `gallery.config.yml`

diff --git a/packages/webapp/src/single/MediaView.tsx b/packages/webapp/src/single/MediaView.tsx
@@ -73,9 +73,11 @@ export const MediaView = () => {
   const dimensions = useBodyDimensions();
 
   const entries = useEntryStore(state => state.entries);
+  const lastIndex = useSingleViewStore(state => state.lastIndex);
   const showDetails = useSingleViewStore(state => state.showDetails);
   const showNavigation = useSingleViewStore(state => state.showNavigation);
   const setLastId = useSingleViewStore(state => state.setLastId);
+  const setLastIndex = useSingleViewStore(state => state.setLastIndex);
   const search = useSearchStore(state => state.search);
   const setShowDetails = useSingleViewStore(actions => actions.setShowDetails);
   const setShowNavigation = useSingleViewStore(actions => actions.setShowNavigation);
@@ -96,21 +98,21 @@ export const MediaView = () => {
   const scaleSize = scaleDimensions(current, dimensions);
   console.log(scaleSize, dimensions, current);
 
-  useEffect(() => {
-    if (id) {
-      setLastId(id)
-    }
-  }, [id])
+  useEffect(() => { id && setLastId(id) }, [id])
+  useEffect(() => { index >= 0 && setLastIndex(index) }, [index])
 
-  const viewEntry = (index) => {
+  const viewEntry = (index: number) => {
     const { shortId } = entries[index]
     navigate(`/view/${shortId}`, {state: {index, listLocation}});
   }
 
-  const dispatch = (action) => {
+  const dispatch = (action: any) => {
     const { type } = action
     let prevNextMatch = type.match(/(prev|next)(-(\d+))?/)
-    if (prevNextMatch && entries.length) {
+    if (type === 'index') {
+      const i = Math.min(entries.length - 1, Math.max(0, action.index))
+      viewEntry(i)
+    } else if (prevNextMatch && entries.length) {
       const offset = prevNextMatch[3] ? +prevNextMatch[3] : 1
       const negate = prevNextMatch[1] == 'prev' ? -1 : 1
       const i = Math.min(entries.length - 1, Math.max(0, index + (negate * offset)))
@@ -126,7 +128,7 @@ export const MediaView = () => {
     } else if (type == 'last' && entries.length) {
       viewEntry(entries.length - 1)
     } else if (type == 'list') {
-      navigate(`${listLocation.pathname}${listLocation.search ? encodeUrl(listLocation.search) : ''}`, {state: {id: current.id}});
+      navigate(`${listLocation.pathname}${listLocation.search ? encodeUrl(listLocation.search) : ''}`, {state: {id: current?.id}});
     } else if (type == 'chronology') {
       search({type: 'none'});
       navigate('/');
@@ -164,6 +166,15 @@ export const MediaView = () => {
     }
   }, [index, showDetails, showNavigation])
 
+  const mediaVanishes = index < 0 && lastIndex >= 0 && entries.length > 0
+  if (mediaVanishes) {
+    dispatch({type: 'index', index: lastIndex})
+  }
+  const listBecomesEmpty = entries.length == 0 && lastIndex >= 0
+  if (listBecomesEmpty) {
+    dispatch({type: 'list'})
+  }
+
   console.log('Media object', current, showDetails);
 
   return (

diff --git a/packages/webapp/src/store/single-view-store.ts b/packages/webapp/src/store/single-view-store.ts
@@ -3,14 +3,19 @@ import { persist } from 'zustand/middleware'
 
 export interface SingleViewStore {
   lastId: string
+  lastIndex: number
   showDetails: boolean
   showNavigation: boolean
 
   setLastId(lastId: string): void
+  setLastIndex(lastIndex: number): void
   setShowDetails(show: boolean): void
   setShowNavigation(show: boolean): void
 }
 
+const excludeStateProps = (excludeProps: string[] = []) => (state: any): any => Object.fromEntries(
+  Object.entries(state).filter(([key]) => !excludeProps.includes(key)))
+
 export const useSingleViewStore = create<
   SingleViewStore,
   [
@@ -19,10 +24,15 @@ export const useSingleViewStore = create<
 >(
   persist((set) => ({
   lastId: '',
+  lastIndex: -1,
   showDetails: false,
   showNavigation: true,
 
-  setLastId: (lastId: string) => set((state) => ({...state, lastId})),
-  setShowDetails: (show: boolean) => set((state) => ({...state, showDetails: show})),
-  setShowNavigation: (show: boolean) => set((state) => ({...state, showNavigation: show})),
-}), { name: 'gallery-single-view' }))
+  setLastId: (lastId: string) => set((state: SingleViewStore) => ({...state, lastId})),
+  setLastIndex: (lastIndex: number) => set((state: SingleViewStore) => ({...state, lastIndex})),
+  setShowDetails: (show: boolean) => set((state: SingleViewStore) => ({...state, showDetails: show})),
+  setShowNavigation: (show: boolean) => set((state: SingleViewStore) => ({...state, showNavigation: show})),
+}), {
+  name: 'gallery-single-view',
+  partialize: excludeStateProps(['lastId', 'lastIndex']),
+}))