feat(Admin > Edit Album): Toggle photo or video

Author: danactive

src/components/AdminAlbum/AdminAlbumClient.tsx

@@ -58,14 +58,12 @@ export default function AdminAlbumClient(
 
   const handleItemUpdateWrapper = (updatedItem: RawXmlItem) => {
     // If multiple items are selected, apply the update to all of them
-    // preserving their specific ID and filename
-    if (selectedIndices.size > 0) {
+    // preserving their specific ID and filename (each keeps its own filename)
+    if (selectedIndices.size > 1) {
       selectedIndices.forEach(index => {
         const targetItem = items[index]
         if (!targetItem) return
 
-        // Create a new item that is a copy of the updated item
-        // but restores the target's ID and filename
         const newItem = {
           ...updatedItem,
           $: targetItem.$,

src/components/AdminAlbum/Fields.tsx

@@ -1,4 +1,5 @@
 import Button from '@mui/joy/Button'
+import Checkbox from '@mui/joy/Checkbox'
 import IconButton from '@mui/joy/IconButton'
 import Input from '@mui/joy/Input'
 import Option from '@mui/joy/Option'
@@ -67,6 +68,7 @@ export default function Fields(
   const allKeywords = keywordsData?.keywords ?? []
 
   useEffect(() => {
+    if (updatePendingRef.current) return
     setEditedItem(item)
     setXmlOutput('')
     setAutocompleteValue('')
@@ -115,17 +117,45 @@ export default function Fields(
     onXmlGenerated()
   }
 
-  const filename = editedItem?.filename ? (Array.isArray(editedItem.filename) ? editedItem.filename[0] : editedItem.filename) : ''
+  const rawFilename = editedItem?.filename ? (Array.isArray(editedItem.filename) ? editedItem.filename[0] : editedItem.filename) : ''
+  const isVideo = editedItem?.type === 'video'
+
+  const swapFilenameExt = (fn: string, toVideo: boolean): string => {
+    const lastDot = fn.lastIndexOf('.')
+    const base = lastDot === -1 ? fn : fn.slice(0, lastDot)
+    return toVideo ? `${base}.mp4` : `${base}.jpg`
+  }
+
+  const displayFilename = rawFilename ? swapFilenameExt(rawFilename, isVideo) : ''
 
   return (
     <>
       <Stack direction="column" spacing={2} sx={{ width: '35rem', flexShrink: 0 }}>
-        <Input
-          value={filename}
-          readOnly
-          placeholder="Filename"
-          title="Filename (read-only)"
-        />
+        <Stack direction="row" spacing={1} alignItems="center" sx={{ minWidth: 0 }}>
+          <Input
+            value={displayFilename}
+            readOnly
+            placeholder="Filename"
+            title="Filename (read-only)"
+            sx={{ flex: 1, minWidth: 0 }}
+          />
+          <Checkbox
+            checked={isVideo}
+            onChange={(e) => updateItem((prev: RawXmlItem | null) => {
+              if (!prev) return null
+              const checked = e.target.checked
+              const currentFn = Array.isArray(prev.filename) ? prev.filename[0] : prev.filename
+              const newFn = swapFilenameExt(currentFn ?? '', checked)
+              const newFilename = Array.isArray(prev.filename) ? [newFn, ...prev.filename.slice(1)] : newFn
+              if (checked) return { ...prev, type: 'video', filename: newFilename }
+              const { type: _t, ...rest } = prev
+              return { ...rest, filename: newFilename } as RawXmlItem
+            })}
+            label="Video item"
+            title="Item type: photo (unchecked) or video (checked). Toggles &lt;type&gt;video&lt;/type&gt; and filename extension (.jpg ↔ .mp4)."
+            slotProps={{ label: { sx: { color: '#E0E0E0' } } }}
+          />
+        </Stack>
         <Input
           value={editedItem?.photo_city ?? ''}
           onChange={(e) => updateItem((prev: RawXmlItem | null) => prev ? { ...prev, photo_city: e.target.value } : null)}

src/components/AdminAlbum/useEditCountPill.tsx

@@ -45,12 +45,13 @@ export function useEditCountPill(): EditCountPillHook {
   }
 
   // Helper to remove empty/null/undefined properties recursively
-  const removeEmpty = (obj: any): any => {
+  function removeEmpty<T>(obj: T): T | undefined
+  function removeEmpty(obj: unknown): unknown {
     if (obj === null || obj === undefined || obj === '') return undefined
     if (typeof obj !== 'object') return obj
     if (Array.isArray(obj)) return obj.map(removeEmpty).filter((v) => v !== undefined)
 
-    const cleaned: any = {}
+    const cleaned: Record<string, unknown> = {}
     for (const [key, value] of Object.entries(obj)) {
       const cleanedValue = removeEmpty(value)
       if (cleanedValue !== undefined) {
@@ -60,24 +61,49 @@ export function useEditCountPill(): EditCountPillHook {
     return Object.keys(cleaned).length > 0 ? cleaned : undefined
   }
 
-  // Apply all edits from editedItems state and maintain proper field ordering
+  // Apply all edits from editedItems state and maintain XML field order:
+  // $, type, size, filename, then photo_*, then search, geo, ref (type before filename for video)
   const applyEditsToItems = (items: RawXmlItem[]): RawXmlItem[] => {
     return items.map((originalItem: RawXmlItem) => {
       const edited = editedItems[originalItem.$.id]
       if (!edited) return originalItem
 
-      // Reconstruct item with desired field order: search before geo
-      const { search, geo, ref, ...rest } = edited
-      const orderedItem = {
+      const {
+        $,
+        type,
+        size,
+        filename,
+        search,
+        geo,
+        ref,
+        photo_date,
+        photo_city,
+        photo_loc,
+        thumb_caption,
+        photo_desc,
+        ...rest
+      } = edited
+
+      const orderedItem: RawXmlItem = {
+        $,
+        ...(type && { type }),
+        ...(size && { size }),
+        filename,
+        photo_date: photo_date ?? null,
+        photo_city: photo_city ?? '',
+        ...(photo_loc !== undefined && photo_loc !== '' && { photo_loc }),
+        ...(thumb_caption !== undefined && thumb_caption !== '' && { thumb_caption }),
+        ...(photo_desc !== undefined && photo_desc !== '' && { photo_desc }),
         ...rest,
         ...(search !== undefined && search !== null && search !== '' && { search }),
         ...(geo && { geo }),
         ...(ref && { ref }),
       }
 
       // Remove empty properties
-      return removeEmpty(orderedItem)
-    }).filter((item) => item !== undefined)
+      const cleaned = removeEmpty(orderedItem)
+      return cleaned ?? originalItem
+    }).filter((item): item is RawXmlItem => item !== undefined)
   }
 
   const EditCountPill = () => {

src/hooks/useMemory.tsx

@@ -50,7 +50,7 @@ const useMemory = (
   }, [filtered, refImageGallery, autoInitialView])
 
   const memoryHtml = details ? (
-    <>
+    <div data-type="memory-details">
       <h3 className={styles.city}>{details.title}</h3>
       {details.persons && (
         <h4 className={styles.person}>
@@ -65,7 +65,7 @@ const useMemory = (
           {decodeURI(details.reference[1]).replaceAll('_', ' ')}
         </Link>
       )}
-    </>
+    </div>
   ) : null
 
   return { setViewed, memoryHtml, viewedList }