release(v2.13.0): inline rename + video preview limits + folder tree perf (see #79)

Author: error311

CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## Changes 12/30/2025 (v2.13.0)
+
+`release(v2.13.0): inline rename + video preview limits + folder tree perf (see #79)`
+
+**Added**  
+
+- **Inline rename**:
+  - File list inline rename (table view) + context-menu support
+  - Folder tree inline rename (tree context menu + Rename button)
+  - Keyboard shortcuts: **F2 rename**, plus **Ctrl/Cmd+Shift+N** (new folder)
+- **Admin Panel setting (Display):** Hover preview max video size (MB)
+  - Applies to hover previews + Gallery video thumbnails
+- Folder APIs:
+  - `GET /api/folder/getFolderList.php?counts=0` to skip metadata count reads (faster on large trees)
+  - `GET /api/folder/listChildren.php?probe=0` to skip per-child “has subfolders / non-empty” probing (faster)
+
+**Changed**  
+
+- Hover previews & Gallery video thumbs:
+  - Use the new video size limit setting
+  - Improved “no preview available” fallback when a frame can’t be decoded quickly
+- File streaming:
+  - Improved HTTP Range support (incl. suffix ranges like `bytes=-500`)
+  - Expanded safe inline rendering to allowlisted video/audio types when requested (`inline=1`)
+
+**Fixed**  
+
+- Context menus now position correctly using `clientX/clientY` (more reliable across layouts).
+- Blank folder icons are repaired after drag/drop moves and dual-pane refreshes.
+- Admin “Folder Access” modal help text is now collapsible (“More/Less”) for readability.
+
+**Performance**  
+
+- Reduced IO for large installs by:
+  - Avoiding folder count reads when not needed (`counts=0`)
+  - Avoiding directory iterator probes when not needed (`probe=0`)
+
+---
+
 ## Changes 12/29/2025 (v2.12.1)
 
 `release(v2.12.1): folder summary depth + video thumbnails + dual-pane toggle fix`

public/api/folder/listChildren.php

@@ -41,6 +41,12 @@
 
 $limit  = max(1, min(2000, (int)($_GET['limit'] ?? 500)));
 $cursor = isset($_GET['cursor']) && $_GET['cursor'] !== '' ? (string)$_GET['cursor'] : null;
+$probeRaw = $_GET['probe'] ?? null;
+$probe = true;
+if ($probeRaw !== null) {
+  $pv = strtolower((string)$probeRaw);
+  if ($pv === '0' || $pv === 'false' || $pv === 'no') $probe = false;
+}
 
-$res = FolderController::listChildren($folder, $username, $perms, $cursor, $limit);
+$res = FolderController::listChildren($folder, $username, $perms, $cursor, $limit, $probe);
 echo json_encode($res, JSON_UNESCAPED_SLASHES);

public/css/styles.css

@@ -803,6 +803,24 @@ body:not(.dark-mode) .material-icons.pauseResumeBtn:hover{background-color: rgba
 :is(#fileList, #fileListSecondary) table.filr-table tbody tr:focus-within > td{outline: none;}
 :is(#fileList, #fileListSecondary) table.filr-table tbody tr:focus-within > td:first-child,
 :is(#fileList, #fileListSecondary) table.filr-table tbody tr:focus-within > td:last-child{outline: 2px solid #8ab4f8; outline-offset: -2px;}
+:is(#fileList, #fileListSecondary) table.filr-table tbody tr.inline-rename-active:focus-within > td{
+  border-radius: 0;
+}
+:is(#fileList, #fileListSecondary) table.filr-table tbody tr.inline-rename-active:focus-within > td:first-child{
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+:is(#fileList, #fileListSecondary) table.filr-table tbody tr.inline-rename-active:focus-within > td:last-child{
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+:is(#fileList, #fileListSecondary) table.filr-table tbody tr.inline-rename-active:focus-within > td:first-child,
+:is(#fileList, #fileListSecondary) table.filr-table tbody tr.inline-rename-active:focus-within > td:last-child{
+  outline: none;
+}
+:is(#fileList, #fileListSecondary) table.filr-table tbody tr.inline-rename-active > td{
+  box-shadow: none !important;
+}
 #fileListTitle,
 #fileListTitleSecondary,
 .file-list-title{white-space: normal !important;

public/js/adminFolderAccess.js

@@ -117,7 +117,7 @@ let __allFoldersCache = null;
 async function getAllFolders(force = false) {
   if (!force && __allFoldersCache) return __allFoldersCache.slice();
 
-  const res = await fetch('/api/folder/getFolderList.php?ts=' + Date.now(), {
+  const res = await fetch('/api/folder/getFolderList.php?counts=0&ts=' + Date.now(), {
     credentials: 'include',
     cache: 'no-store',
     headers: { 'Cache-Control': 'no-store' }
@@ -940,7 +940,13 @@ export function openUserPermissionsModal(initialUser = null) {
         <span id="closeUserPermissionsModal" class="editor-close-btn">&times;</span>
         <h3>${tf("folder_access", "Folder Access")}</h3>
         <div class="muted" style="margin:-4px 0 10px;">
-          ${tf("grant_folders_help", "Grant per-folder capabilities to each user. View (all) shows all contents; View (own) shows only the user's uploads. Write is file-level ops (upload/edit/rename/copy/delete/extract). Create is file-only; subfolders require Manage/Ownership. Manage/Ownership enables folder actions (create/rename/move/delete, grant access) and implies View (all), Write, and Share. Share File auto-enables View (own); Share Folder requires Manage/Ownership + View (all).")}
+          <span class="grant-help-short">${tf("grant_folders_help_short", "Per-folder access. Create is file-only; subfolders need Manage/Ownership. Share Folder needs Manage + View (all).")}</span>
+          <button type="button" class="btn btn-link btn-sm p-0 grant-help-toggle" aria-expanded="false" style="margin-left:6px;">
+            ${tf("help_more", "More")}
+          </button>
+          <span class="grant-help-full" style="display:none;">
+            ${tf("grant_folders_help", "Grant per-folder capabilities to each user. View (all) shows all contents; View (own) shows only the user's uploads. Write is file-level ops (upload/edit/rename/copy/delete/extract). Create is file-only; subfolders require Manage/Ownership. Manage/Ownership enables folder actions (create/rename/move/delete, grant access) and implies View (all), Write, and Share. Share File auto-enables View (own); Share Folder requires Manage/Ownership + View (all).")}
+          </span>
         </div>
         <div id="userPermissionsList" style="max-height: 82vh; min-height: 420px; overflow-y: auto; margin-bottom: 15px;">
         </div>
@@ -982,6 +988,19 @@ export function openUserPermissionsModal(initialUser = null) {
         showToast(tf("error_updating_permissions", "Error updating permissions"), "error");
       }
     });
+    const helpToggle = userPermissionsModal.querySelector('.grant-help-toggle');
+    if (helpToggle) {
+      helpToggle.addEventListener('click', () => {
+        const expanded = helpToggle.getAttribute('aria-expanded') === 'true';
+        const next = !expanded;
+        const shortText = userPermissionsModal.querySelector('.grant-help-short');
+        const fullText = userPermissionsModal.querySelector('.grant-help-full');
+        if (shortText) shortText.style.display = next ? 'none' : 'inline';
+        if (fullText) fullText.style.display = next ? 'inline' : 'none';
+        helpToggle.setAttribute('aria-expanded', next ? 'true' : 'false');
+        helpToggle.textContent = next ? tf('help_less', 'Less') : tf('help_more', 'More');
+      });
+    }
   } else {
     userPermissionsModal.style.display = "flex";
   }

public/js/adminPanel.js

@@ -1104,6 +1104,7 @@ function captureInitialAdminConfig() {
     brandingHeaderBgDark: (document.getElementById("brandingHeaderBgDark")?.value || "").trim(),
     brandingFooterHtml: (document.getElementById("brandingFooterHtml")?.value || "").trim(),
     hoverPreviewMaxImageMb: (document.getElementById("hoverPreviewMaxImageMb")?.value || "").trim(),
+    hoverPreviewMaxVideoMb: (document.getElementById("hoverPreviewMaxVideoMb")?.value || "").trim(),
     fileListSummaryDepth: (document.getElementById("fileListSummaryDepth")?.value || "").trim(),
 
     clamavScanUploads: !!document.getElementById("clamavScanUploads")?.checked,
@@ -1145,6 +1146,7 @@ function hasUnsavedChanges() {
     getVal("brandingHeaderBgDark") !== (o.brandingHeaderBgDark || "") ||
     getVal("brandingFooterHtml") !== (o.brandingFooterHtml || "") ||
     getVal("hoverPreviewMaxImageMb") !== (o.hoverPreviewMaxImageMb || "") ||
+    getVal("hoverPreviewMaxVideoMb") !== (o.hoverPreviewMaxVideoMb || "") ||
     getVal("fileListSummaryDepth") !== (o.fileListSummaryDepth || "") ||
     getChk("clamavScanUploads") !== o.clamavScanUploads ||
     getChk("proSearchEnabled") !== o.proSearchEnabled ||
@@ -2232,6 +2234,10 @@ export function openAdminPanel() {
         1,
         Math.min(50, parseInt(displayCfg.hoverPreviewMaxImageMb || 8, 10) || 8)
       );
+      const hoverPreviewMaxVideoMb = Math.max(
+        1,
+        Math.min(2048, parseInt(displayCfg.hoverPreviewMaxVideoMb || 200, 10) || 200)
+      );
       const rawSummaryDepth = parseInt(displayCfg.fileListSummaryDepth, 10);
       const fileListSummaryDepth = Math.max(
         0,
@@ -2503,7 +2509,7 @@ export function openAdminPanel() {
   </div>
     </label>
     <small class="text-muted d-block mb-1">
-      ${tf("hover_preview_max_image_help", "Applies to hover previews and gallery thumbnails; larger values can increase bandwidth and memory use.")}
+      ${tf("hover_preview_max_image_help", "Applies to hover previews and gallery thumbnails. Default 8 MB; higher values increase bandwidth and memory use.")}
     </small>
     <input
       type="number"
@@ -2516,6 +2522,27 @@ export function openAdminPanel() {
     />
   </div>
 
+  <!-- Display: Hover preview max video size -->
+  <div class="form-group" style="margin-top:16px;">
+    <label for="hoverPreviewMaxVideoMb">
+     <div class="admin-subsection-title" style="margin-top:2px;">
+      ${tf("hover_preview_max_video_mb", "Hover preview max video size (MB)")}
+  </div>
+    </label>
+    <small class="text-muted d-block mb-1">
+      ${tf("hover_preview_max_video_help", "Applies to hover previews and gallery thumbnails. Default 200 MB; higher values can increase bandwidth on large videos.")}
+    </small>
+    <input
+      type="number"
+      id="hoverPreviewMaxVideoMb"
+      class="form-control"
+      min="1"
+      max="2048"
+      step="1"
+      value="${hoverPreviewMaxVideoMb}"
+    />
+  </div>
+
   <!-- Display: File list summary depth -->
   <div class="form-group" style="margin-top:16px;">
     <label for="fileListSummaryDepth">
@@ -4102,6 +4129,13 @@ function handleSave() {
           parseInt(document.getElementById("hoverPreviewMaxImageMb")?.value || "8", 10) || 8
         )
       ),
+      hoverPreviewMaxVideoMb: Math.max(
+        1,
+        Math.min(
+          2048,
+          parseInt(document.getElementById("hoverPreviewMaxVideoMb")?.value || "200", 10) || 200
+        )
+      ),
       fileListSummaryDepth: Math.max(
         0,
         Math.min(

public/js/adminPortals.js

@@ -227,7 +227,7 @@ const __portalSubmissionsCache = {};
 async function loadPortalFolderList() {
   if (__portalFolderListLoaded) return __portalFolderOptions;
   try {
-    const res = await fetch('/api/folder/getFolderList.php', { credentials: 'include' });
+    const res = await fetch('/api/folder/getFolderList.php?counts=0', { credentials: 'include' });
     const data = await res.json();
     let list = data;
 

public/js/adminSponsor.js

@@ -30,7 +30,8 @@ const DEFAULT_SUPPORTERS = [
   'Rob Parker',
   'Aaron W.',
   'C-Fu',
-  'peterchia'
+  'peterchia',
+  'Edisto Pirates of SC'
 ];
 
 /**

public/js/fileActions.js

@@ -5,6 +5,7 @@ import {
   formatFolderName,
   fileData,
   downloadSelectedFilesIndividually,
+  startInlineRenameFromContext,
   MAX_NONZIP_MULTI_DOWNLOAD
 } from './fileListView.js?v={{APP_QVER}}';
 import { refreshFolderIcon, updateRecycleBinState } from './folderManager.js?v={{APP_QVER}}';
@@ -705,7 +706,7 @@ export async function loadCopyMoveFolderListForModal(dropdownId, preferredFolder
   if (window.userFolderOnly) {
     const username = localStorage.getItem("username") || "root";
     try {
-      const response = await fetch("/api/folder/getFolderList.php?restricted=1");
+      const response = await fetch("/api/folder/getFolderList.php?restricted=1&counts=0");
       let folders = await response.json();
       if (Array.isArray(folders) && folders.length && typeof folders[0] === "object" && folders[0].folder) {
         folders = folders.map(item => item.folder);
@@ -736,7 +737,7 @@ export async function loadCopyMoveFolderListForModal(dropdownId, preferredFolder
   }
 
   try {
-    const response = await fetch("/api/folder/getFolderList.php");
+    const response = await fetch("/api/folder/getFolderList.php?counts=0");
     let folders = await response.json();
     if (Array.isArray(folders) && folders.length && typeof folders[0] === "object" && folders[0].folder) {
       folders = folders.map(item => item.folder);
@@ -896,7 +897,20 @@ export function handleRenameSelected(e) {
     return;
   }
   const file = files[0];
-  renameFile(file.name, file.folder || window.currentFolder || "root");
+  const folder = file.folder || window.currentFolder || "root";
+
+  // Prefer inline rename in table view when we can resolve a row.
+  try {
+    if (window.viewMode === "table" && typeof startInlineRenameFromContext === "function") {
+      const checked = getActiveSelectedFileCheckboxes();
+      const row = checked.length ? checked[0].closest("tr") : null;
+      if (row && startInlineRenameFromContext(file, row)) {
+        return;
+      }
+    }
+  } catch (err) { /* ignore */ }
+
+  renameFile(file.name, folder);
 }
 
 export function handleShareSelected(e) {

public/js/fileDragDrop.js

@@ -1,6 +1,6 @@
 // fileDragDrop.js
 import { showToast } from './domUtils.js?v={{APP_QVER}}';
-import { loadFileList, cancelHoverPreview } from './fileListView.js?v={{APP_QVER}}';
+import { loadFileList, cancelHoverPreview, repairBlankFolderIcons } from './fileListView.js?v={{APP_QVER}}';
 import {
   getParentFolder,
   syncTreeAfterFolderMove,
@@ -31,6 +31,14 @@ function invalidateFolderStats(folders) {
     console.warn('folderStatsInvalidated failed', e);
   }
 }
+function scheduleBlankFolderIconRepair() {
+  try {
+    const kick = () => { try { repairBlankFolderIcons({ force: true }); } catch (e) {} };
+    if (typeof queueMicrotask === 'function') queueMicrotask(kick);
+    setTimeout(kick, 80);
+    setTimeout(kick, 250);
+  } catch (e) { /* ignore */ }
+}
 function getNameFromAny(el) {
   const row = getRowEl(el);
   if (!row) return null;
@@ -248,6 +256,7 @@ export async function folderDropHandler(event) {
 
       // Let folderManager handle tree refresh + selection + file list reload
       await syncTreeAfterFolderMove(source, dstParent);
+      scheduleBlankFolderIconRepair();
 
     } catch (e) {
       console.error('Error moving folder:', e);
@@ -308,7 +317,7 @@ export async function folderDropHandler(event) {
       // keep stats fresh for source + dest
       invalidateFolderStats([sourceFolder, dropFolder]);
 
-      loadFileList(window.currentFolder || sourceFolder);
+      loadFileList(window.currentFolder || sourceFolder).finally(scheduleBlankFolderIconRepair);
     } else {
       const err = (data && (data.error || data.message)) || `HTTP ${res.status}`;
       showToast('Error moving file(s): ' + err);
@@ -317,4 +326,4 @@ export async function folderDropHandler(event) {
     console.error('Error moving file(s):', e);
     showToast('Error moving file(s).');
   }
-}
+}