Merge branch feature/webapp-date-format

xemle · xemle · commit 662caba797b0 · 2025-10-30T14:18:12.000+01:00
diff --git a/gallery.config-example.yml b/gallery.config-example.yml
@@ -364,6 +364,40 @@
         #- edit
         # Disables navigation to overview, prev and next
         #- nav
+  #
+  # Date format as in linux date command
+  #   %b month name
+  #   %d day of month, eg 01
+  #   %m month, eg 12
+  #   %Y 4 full year, eg 2025
+  #   %y 2-digit year, eg 25
+  #   %H hour eg 18
+  #   %M minute, eg 06
+  #   %S seconds, eg 45
+  #
+  # default: []
+  #
+  #format:
+    # Date format
+    #
+    # default: '%d.%m.%Y'
+    #date: '%d.%m.%Y'
+    # Month year format
+    #
+    # default: '%b %Y'
+    #monthYear: '%b %Y'
+    # Year format
+    #
+    # default: '%Y'
+    #year: '%Y'
+    # time format
+    #
+    # default: '%H:%M:%S'
+    #time: '%H:%M:%S'
+    # time format with hour and minute
+    #
+    # default: '%H:%M'
+    #hourMinute: '%H:%M'
 
 # Plugin manager settings
 #pluginManager:
diff --git a/gallery.config.schema.json b/gallery.config.schema.json
@@ -703,6 +703,41 @@
               }
             }
           }
+        },
+        "format": {
+          "$schema": "https://json-schema.org/draft/2020-12/schema",
+          "$id": "https://raw.githubusercontent.com/xemle/home-gallery/master/gallery.config.schema.json#webapp.format",
+          "title": "FormatUtils",
+          "description": "Date format as in linux date command\n  %b month name\n  %d day of month, eg 01\n  %m month, eg 12\n  %Y 4 full year, eg 2025\n  %y 2-digit year, eg 25\n  %H hour eg 18\n  %M minute, eg 06\n  %S seconds, eg 45",
+          "default": [],
+          "type": "object",
+          "properties": {
+            "date": {
+              "description": "Date format",
+              "type": "string",
+              "default": "%d.%m.%Y"
+            },
+            "monthYear": {
+              "description": "Month year format",
+              "type": "string",
+              "default": "%b %Y"
+            },
+            "year": {
+              "description": "Year format",
+              "type": "string",
+              "default": "%Y"
+            },
+            "time": {
+              "description": "time format",
+              "type": "string",
+              "default": "%H:%M:%S"
+            },
+            "hourMinute": {
+              "description": "time format with hour and minute",
+              "type": "string",
+              "default": "%H:%M"
+            }
+          }
         }
       }
     },
diff --git a/packages/webapp/src/config/AppConfig.ts b/packages/webapp/src/config/AppConfig.ts
@@ -46,6 +46,7 @@ export interface AppConfig {
   disabled?: FeatureFlags;
   sources?: MediaSources;
   pages?: Pages;
+  format?: FormatUtils;
   [k: string]: unknown;
 }
 export interface PluginManager {
@@ -67,3 +68,37 @@ export interface MediaViewPage {
   disabled?: MediaViewDisableFlags;
   [k: string]: unknown;
 }
+/**
+ * Date format as in linux date command
+ *   %b month name
+ *   %d day of month, eg 01
+ *   %m month, eg 12
+ *   %Y 4 full year, eg 2025
+ *   %y 2-digit year, eg 25
+ *   %H hour eg 18
+ *   %M minute, eg 06
+ *   %S seconds, eg 45
+ */
+export interface FormatUtils {
+  /**
+   * Date format
+   */
+  date?: string;
+  /**
+   * Month year format
+   */
+  monthYear?: string;
+  /**
+   * Year format
+   */
+  year?: string;
+  /**
+   * time format
+   */
+  time?: string;
+  /**
+   * time format with hour and minute
+   */
+  hourMinute?: string;
+  [k: string]: unknown;
+}
diff --git a/packages/webapp/src/list/scrollbar/ScrollbarHandle.tsx b/packages/webapp/src/list/scrollbar/ScrollbarHandle.tsx
@@ -84,7 +84,7 @@ export const ScrollbarHandle = ({dispatch, top, visible, detailText, showDetail}
   return (
     <>
       <div className={classNames('absolute right-0 mr-1 flex gap-2 items-center justify-center hover:cursor-pointer', {hidden: !visible})} ref={handleRef} style={{top: top}}>
-        {detailText && showDetail && <div className={classNames('bg-gray-800/90 px-4 py-2 rounded text-gray-300')}>{detailText}</div>}
+        {detailText && showDetail && <div className={classNames('bg-gray-800/90 px-4 py-2 rounded text-gray-300 text-nowrap')}>{detailText}</div>}
         <div className="flex flex-col gap-1 bg-gray-800 rounded" ref={thumbRef} >
           <span ref={upButton} className="px-2 py-1 group hover:bg-gray-700 hover:text-gray-300">
             <FontAwesomeIcon icon={icons.faChevronUp} className="text-gray-500 group-hover:text-gray-300"/>
diff --git a/packages/webapp/src/list/scrollbar/index.tsx b/packages/webapp/src/list/scrollbar/index.tsx
@@ -9,6 +9,7 @@ import { useScrollPageSpeedSimple, SimplePageSpeed } from './useScrollPageSpeed'
 import { initialState, reducer } from './state'
 import type { ScrollbarActions, ScrollbarOverviewItem, ScrollbarState, VisibleHandle } from './state'
 import { overviewItemMapper, type TopDateItem } from "./overviewItemMapper";
+import { useAppConfig } from "../../config/useAppConfig";
 
 export interface ScrollbarProps {
   containerRef: React.RefObject<any>,
@@ -20,6 +21,7 @@ export interface ScrollbarProps {
 export const Scrollbar = ({containerRef, style, pageHeight, topDateItems}: ScrollbarProps) => {
   const propState = {containerRef, pageHeight}
 
+  const { format } = useAppConfig()
   const scrollTop = useScrollTop(containerRef)
   const [scrollSpeed, setScrollViewHeight] = useScrollPageSpeedSimple(containerRef, pageHeight)
 
@@ -30,7 +32,7 @@ export const Scrollbar = ({containerRef, style, pageHeight, topDateItems}: Scrol
   useEffect(() => dispatch({type: 'pageHeight', pageHeight}), [pageHeight])
 
   useEffect(() => {
-    const [overviewItems, detailTextFn] = overviewItemMapper(topDateItems, pageHeight, handleHeight / 2)
+    const [overviewItems, detailTextFn] = overviewItemMapper(topDateItems, pageHeight, handleHeight / 2, format || {})
     dispatch({type: 'overviewItems', overviewItems, detailTextFn})
   }, [topDateItems, pageHeight, handleHeight])
 
diff --git a/packages/webapp/src/list/scrollbar/overviewItemMapper.ts b/packages/webapp/src/list/scrollbar/overviewItemMapper.ts
@@ -1,6 +1,7 @@
 import { type ScrollbarOverviewItem } from "./state"
 
 import { formatDate } from '../../utils/format'
+import { FormatUtils } from "../../utils/FormatUtils"
 
 const isInDateOrder = items => {
   const isDesc = items[0].date > items[items.length - 1].date
@@ -17,7 +18,7 @@ const isInDateOrder = items => {
 const HOUR_MS = 1000 * 60 * 60
 const DAY_MS = HOUR_MS * 24
 
-const setDateValue = items => {
+const setDateValue =(items, format: FormatUtils) => {
   const firstDate = new Date(items[0].date)
   const lastDate = new Date(items[items.length - 1].date)
   const diff = Math.abs(lastDate.getTime() - firstDate.getTime())
@@ -26,15 +27,15 @@ const setDateValue = items => {
 
   let dateValueFn: (date: Date) => string
   if (hourDiff < 6) {
-    dateValueFn = date => formatDate('%H:%M:%S', date)
+    dateValueFn = date => formatDate(format.time || '%H:%M:%S', date)
   } else if (hourDiff <= 24) {
-    dateValueFn = date => formatDate('%H:%M', date)
+    dateValueFn = date => formatDate(format.hourMinute || '%H:%M', date)
   } else if (dayDiff < 90) {
-    dateValueFn = date => formatDate('%d.%m.%y', date)
+    dateValueFn = date => formatDate(format.date || '%d.%m.%y', date)
   } else if (dayDiff < 700) {
-    dateValueFn = date => formatDate('%b %Y', date)
+    dateValueFn = date => formatDate(format.monthYear || '%b %Y', date)
   } else {
-    dateValueFn = date => formatDate('%Y', date)
+    dateValueFn = date => formatDate(format.year || '%Y', date)
   }
 
   items.forEach(item => item.dateValue = dateValueFn(item.date))
@@ -47,15 +48,15 @@ export interface TopDateItem {
   dateValue: string
 }
 
-export const overviewItemMapper = (topDateItems: TopDateItem[], viewHeight: number, padding: number): [ScrollbarOverviewItem[], (number) => string] => {
+export const overviewItemMapper = (topDateItems: TopDateItem[], viewHeight: number, padding: number, format: FormatUtils = {}): [ScrollbarOverviewItem[], (number) => string] => {
   if (!topDateItems.length) {
     return [[], () => '']
   }
 
   if (!isInDateOrder(topDateItems)) {
     return [[], () => '']
   }
-  setDateValue(topDateItems)
+  setDateValue(topDateItems, format)
 
   const lastItem = topDateItems[topDateItems.length - 1]
   const maxTop = (lastItem.top + lastItem.height) - viewHeight
@@ -91,7 +92,7 @@ export const overviewItemMapper = (topDateItems: TopDateItem[], viewHeight: numb
 
   const detailTextFn = (scrollTop) => {
     const lastItem = topDateItems.filter(item => item.top <= scrollTop).pop()
-    return `${lastItem?.date ? formatDate('%d.%m.%y', lastItem?.date) : ''}`
+    return `${lastItem?.date ? formatDate(format.date || '%d.%m.%y', lastItem?.date) : ''}`
   }
 
   return [overviewItems, detailTextFn]
diff --git a/packages/webapp/src/single/Details.tsx b/packages/webapp/src/single/Details.tsx
@@ -14,6 +14,8 @@ import { MediaViewDisableFlags } from "./MediaViewPage";
 export const Details = ({entry, dispatch}: {entry: Entry, dispatch: any}) => {
   const appConfig = useAppConfig()
   const disabledFlags = appConfig.pages?.mediaView?.disabled || [] as MediaViewDisableFlags
+  const dateFormat = appConfig.format?.date || '%d.%m.%y'
+  const timeFormat = appConfig.format?.time || '%H:%M:%S'
   const {openDialog, setDialogVisible} = useTagDialog()
 
   if (!entry) {
@@ -168,14 +170,10 @@ export const Details = ({entry, dispatch}: {entry: Entry, dispatch: any}) => {
             </div>
             <div>
               <p>
-                {searchLink(formatDate('%d', entry.date), `year:${entry.date.substr(0, 4)} month:${entry.date.substr(5, 2)} day:${entry.date.substr(8, 2)}`)}
-                <span className="px-1">.</span>
-                {searchLink(formatDate('%m', entry.date), `year:${entry.date.substr(0, 4)} month:${entry.date.substr(5, 2)}`)}
-                <span className="px-1">.</span>
-                {searchLink(formatDate('%Y', entry.date), `year:${entry.date.substr(0, 4)}`)}
+                <DateFormat entry={entry} format={dateFormat} searchLink={searchLink}/>
               </p>
               <p>
-                {formatDate('%H:%M:%S', entry.date)}
+                {formatDate(timeFormat, entry.date)}
               </p>
             </div>
           </div>
@@ -305,3 +303,53 @@ export const Details = ({entry, dispatch}: {entry: Entry, dispatch: any}) => {
   )
 }
 
+function DateFormat({entry, format, searchLink}) {
+  const result: React.ReactNode[] = []
+
+  if (!entry?.date) {
+    return result
+  }
+
+  let last = 0;
+  let pos = format.indexOf('%', last)
+
+  while (pos >= 0 && pos < format.length - 1) {
+    if (pos > last) {
+      const head = (<span className="px-1">{format.substring(last, pos)}</span>)
+      result.push(head)
+    }
+    const code = format.substring(pos, pos + 2)
+
+    let link: React.JSX.Element | null = null
+    switch (code) {
+      case '%Y':
+        link = searchLink(formatDate(code, entry.date), `year:${entry.date.substr(0, 4)}`)
+        break
+      case '%y':
+        link = searchLink(formatDate(code, entry.date), `year:${entry.date.substr(0, 4)}`)
+        break
+      case '%m':
+        link = searchLink(formatDate(code, entry.date), `year:${entry.date.substr(0, 4)} month:${entry.date.substr(5, 2)}`)
+        break
+      case '%d':
+        link = searchLink(formatDate(code, entry.date), `year:${entry.date.substr(0, 4)} month:${entry.date.substr(5, 2)} day:${entry.date.substr(8, 2)}`)
+        break
+      default:
+        link = <span className="px-1">{formatDate(code, entry.date)}</span>
+    }
+
+    if (link) {
+      result.push(link)
+    }
+
+    last = pos + 2
+    pos = format.indexOf('%', last)
+  }
+
+  if (last < format.length) {
+    const tail = (<span className="px-1">{format.substring(last)}</span>)
+    result.push(tail)
+  }
+
+  return result
+}
diff --git a/packages/webapp/src/single/MediaViewPage.ts b/packages/webapp/src/single/MediaViewPage.ts
@@ -5,7 +5,7 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 
-export type MediaViewDisableFlags = ("detail" | "map" | "similar" | "annotation" | "edit")[];
+export type MediaViewDisableFlags = (("detail" | "map" | "similar" | "annotation" | "edit") | "nav")[];
 
 /**
  * Customize single media view
diff --git a/packages/webapp/src/utils/FormatUtils.schema.json b/packages/webapp/src/utils/FormatUtils.schema.json
@@ -0,0 +1,36 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://raw.githubusercontent.com/xemle/home-gallery/master/gallery.config.schema.json#webapp.format",
+  "title": "FormatUtils",
+  "description": "Date format as in linux date command\n  %b month name\n  %d day of month, eg 01\n  %m month, eg 12\n  %Y 4 full year, eg 2025\n  %y 2-digit year, eg 25\n  %H hour eg 18\n  %M minute, eg 06\n  %S seconds, eg 45",
+  "default": [],
+  "type": "object",
+  "properties": {
+    "date": {
+      "description": "Date format",
+      "type": "string",
+      "default": "%d.%m.%Y"
+    },
+    "monthYear": {
+      "description": "Month year format",
+      "type": "string",
+      "default": "%b %Y"
+    },
+    "year": {
+      "description": "Year format",
+      "type": "string",
+      "default": "%Y"
+    },
+    "time": {
+      "description": "time format",
+      "type": "string",
+      "default": "%H:%M:%S"
+    },
+    "hourMinute": {
+      "description": "time format with hour and minute",
+      "type": "string",
+      "default": "%H:%M"
+    }
+
+  }
+}
diff --git a/packages/webapp/src/utils/FormatUtils.ts b/packages/webapp/src/utils/FormatUtils.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+/**
+ * Date format as in linux date command
+ *   %b month name
+ *   %d day of month, eg 01
+ *   %m month, eg 12
+ *   %Y 4 full year, eg 2025
+ *   %y 2-digit year, eg 25
+ *   %H hour eg 18
+ *   %M minute, eg 06
+ *   %S seconds, eg 45
+ */
+export interface FormatUtils {
+  /**
+   * Date format
+   */
+  date?: string;
+  /**
+   * Month year format
+   */
+  monthYear?: string;
+  /**
+   * Year format
+   */
+  year?: string;
+  /**
+   * time format
+   */
+  time?: string;
+  /**
+   * time format with hour and minute
+   */
+  hourMinute?: string;
+  [k: string]: unknown;
+}
diff --git a/packages/webapp/webapp.schema.json b/packages/webapp/webapp.schema.json
