feat(note_list): display files full-width on mobile

apps/build-docs/package.json

@@ -16,7 +16,7 @@
   "license": "AGPL-3.0-only",
   "packageManager": "pnpm@10.32.1",
   "devDependencies": {
-    "@redocly/cli": "2.24.1",
+    "@redocly/cli": "2.24.0",
     "archiver": "7.0.1",
     "fs-extra": "11.3.4",
     "js-yaml": "4.1.1",

apps/client/package.json

@@ -53,16 +53,16 @@
     "draggabilly": "3.0.0",
     "force-graph": "1.51.2",
     "globals": "17.4.0",
-    "i18next": "25.10.2",
+    "i18next": "25.8.18",
     "i18next-http-backend": "3.0.2",
     "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.40",
+    "katex": "0.16.39",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "17.0.5",
+    "marked": "17.0.4",
     "mermaid": "11.13.0",
     "mind-elixir": "5.9.3",
     "normalize.css": "8.0.1",

apps/client/src/services/content_renderer.ts

@@ -8,6 +8,7 @@ import FAttachment from "../entities/fattachment.js";
 import FNote from "../entities/fnote.js";
 import imageContextMenuService from "../menus/image_context_menu.js";
 import { t } from "../services/i18n.js";
+import { renderReactWidget, renderReactWidgetAtElement } from "../widgets/react/react_utils";
 import renderText from "./content_renderer_text.js";
 import renderDoc from "./doc_renderer.js";
 import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
@@ -212,15 +213,16 @@ async function renderFile(entity: FNote | FAttachment, type: string, $renderedCo
 
         $content.append($audioPreview);
     } else if (type === "video") {
-        const $videoPreview = $("<video controls></video>")
-            .attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`))
-            .attr("type", entity.mime)
-            .css("width", "100%");
+        const url = openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`);
+        const mime = entity.mime;
 
-        $content.append($videoPreview);
+        const VideoPreviewContent = (await import("../widgets/type_widgets/file/Video")).VideoPreviewContent;
+        const $viewer = renderReactWidget(null, h(VideoPreviewContent, { url, mime }));
+
+        $content.append($viewer);
     }
 
-    if (entityType === "notes" && "noteId" in entity) {
+    if (entityType === "notes" && "noteId" in entity && type !== "video") {
         // TODO: we should make this available also for attachments, but there's a problem with "Open externally" support
         //       in attachment list
         const $downloadButton = $(`

apps/client/src/translations/el/translation.json

@@ -1,6 +1,6 @@
 {
   "about": {
-    "title": "Σχετικά με το Trilium Notes",
+    "title": "Πληροφορίες για το Trilium Notes",
     "homepage": "Αρχική Σελίδα:",
     "app_version": "Έκδοση εφαρμογής:",
     "db_version": "Έκδοση βάσης δεδομένων:",

apps/client/src/translations/en/translation.json

@@ -1042,6 +1042,7 @@
     "pause": "Pause (Space)",
     "back-10s": "Back 10s (Left arrow key)",
     "forward-30s": "Forward 30s",
+    "volume": "Volume",
     "mute": "Mute (M)",
     "unmute": "Unmute (M)",
     "playback-speed": "Playback speed",
@@ -1054,7 +1055,8 @@
     "exit-fullscreen": "Exit fullscreen",
     "unsupported-format": "Media preview is not available for this file format:\n{{mime}}",
     "zoom-to-fit": "Zoom to fill",
-    "zoom-reset": "Reset zoom to fill"
+    "zoom-reset": "Reset zoom to fill",
+    "more-options": "More options"
   },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",

apps/client/src/translations/ja/translation.json

@@ -1180,8 +1180,7 @@
     "is_owned_by_note": "ノートによって所有されています",
     "and_more": "...その他 {{count}} 件。",
     "print_landscape": "PDF にエクスポートするときに、ページの向きを縦向きではなく横向きに変更します。",
-    "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>。",
-    "textarea": "複数行テキスト"
+    "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>。"
   },
   "link_context_menu": {
     "open_note_in_popup": "クイック編集",

apps/client/src/translations/tw/translation.json

@@ -446,8 +446,7 @@
     "app_theme_base": "設定為 \"next\"、\"next-light \" 或 \"next-dark\"，以使用相應的 TriliumNext 主題（自動、淺色或深色）作為自訂主題的基礎，而非傳統主題。",
     "print_landscape": "匯出為 PDF 時，將頁面方向更改為橫向而非縱向。",
     "print_page_size": "在匯出 PDF 時更改頁面大小。支援的值：<code>A0</code>、<code>A1</code>、<code>A2</code>、<code>A3</code>、<code>A4</code>、<code>A5</code>、<code>A6</code>、<code>Legal</code>、<code>Letter</code>、<code>Tabloid</code>、<code>Ledger</code>。",
-    "color_type": "顏色",
-    "textarea": "多行文字"
+    "color_type": "顏色"
   },
   "attribute_editor": {
     "help_text_body1": "要新增標籤，只需輸入例如 <code>#rock</code> 或者如果您還想新增值，則例如 <code>#year = 2020</code>",
@@ -2183,52 +2182,5 @@
   },
   "setup_form": {
     "more_info": "了解更多"
-  },
-  "media": {
-    "play": "播放 (空白鍵)",
-    "pause": "暫停 (空白鍵)",
-    "back-10s": "往前 10 秒 (左方向鍵)",
-    "forward-30s": "往後 30 秒",
-    "mute": "靜音 (M)",
-    "unmute": "解除靜音 (M)",
-    "playback-speed": "播放速度",
-    "loop": "循環",
-    "disable-loop": "解除循環",
-    "rotate": "旋轉",
-    "picture-in-picture": "畫中畫",
-    "exit-picture-in-picture": "退出畫中畫",
-    "fullscreen": "全螢幕 (F)",
-    "exit-fullscreen": "退出全螢幕",
-    "unsupported-format": "此檔案格式不支援媒體預覽：\n{{mime}}",
-    "zoom-to-fit": "放大至填滿畫面",
-    "zoom-reset": "重設放大至填滿畫面"
-  },
-  "mermaid": {
-    "placeholder": "請輸入您的美人魚圖表內容，或選用下方其中一個範例圖表。",
-    "sample_diagrams": "範例圖表：",
-    "sample_flowchart": "流程圖",
-    "sample_class": "階層圖",
-    "sample_sequence": "時序圖",
-    "sample_entity_relationship": "實體關係圖",
-    "sample_state": "狀態圖",
-    "sample_mindmap": "心智圖",
-    "sample_architecture": "架構圖",
-    "sample_block": "區塊圖",
-    "sample_c4": "C4 圖",
-    "sample_gantt": "甘特圖",
-    "sample_git": "Git 分支圖",
-    "sample_kanban": "看板圖",
-    "sample_packet": "數據包圖",
-    "sample_pie": "圓餅圖",
-    "sample_quadrant": "象限圖",
-    "sample_radar": "雷達圖",
-    "sample_requirement": "需求圖",
-    "sample_sankey": "桑基圖",
-    "sample_timeline": "時間軸",
-    "sample_treemap": "樹狀圖",
-    "sample_user_journey": "用戶旅程",
-    "sample_xy": "XY 圖表",
-    "sample_venn": "韋恩圖",
-    "sample_ishikawa": "魚骨圖"
   }
 }

apps/client/src/widgets/collections/legacy/ListOrGridView.css

@@ -12,6 +12,11 @@
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
+
+        body.mobile & {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
     }
 
     .note-list-bottom-pager {
@@ -269,8 +274,9 @@
     overflow: hidden;
     user-select: none;
 
-    body.mobile & {
-        flex-basis: 150px;
+    body.mobile &.mobile-full-width {
+        grid-column-start: 1;
+        grid-column-end: 3;
     }
 
     &:hover {

apps/client/src/widgets/collections/legacy/ListOrGridView.tsx

@@ -1,25 +1,25 @@
 import "./ListOrGridView.css";
-import { Card, CardFrame, CardSection } from "../../react/Card";
 
+import { clsx } from "clsx";
+import { ComponentChildren, TargetedMouseEvent } from "preact";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { JSX } from "preact/jsx-runtime";
 
 import FNote from "../../../entities/fnote";
+import linkContextMenuService from "../../../menus/link_context_menu";
 import attribute_renderer from "../../../services/attribute_renderer";
 import content_renderer from "../../../services/content_renderer";
 import { t } from "../../../services/i18n";
 import link from "../../../services/link";
 import CollectionProperties from "../../note_bars/CollectionProperties";
+import ActionButton from "../../react/ActionButton";
+import { Card, CardFrame, CardSection } from "../../react/Card";
 import { useImperativeSearchHighlighlighting, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../../react/hooks";
 import Icon from "../../react/Icon";
 import NoteLink from "../../react/NoteLink";
 import { ViewModeProps } from "../interface";
-import { Pager, usePagination, PaginationContext } from "../Pagination";
+import { Pager, PaginationContext,usePagination } from "../Pagination";
 import { filterChildNotes, useFilteredNoteIds } from "./utils";
-import { JSX } from "preact/jsx-runtime";
-import { clsx } from "clsx";
-import ActionButton from "../../react/ActionButton";
-import linkContextMenuService from "../../../menus/link_context_menu";
-import { ComponentChildren, TargetedMouseEvent } from "preact";
 
 const contentSizeObserver = new ResizeObserver(onContentResized);
 
@@ -53,13 +53,13 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
         <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
             {pageNotes?.map(childNote => (
                 <GridNoteCard key={childNote.noteId}
-                                note={childNote}
-                                parentNote={note}
-                                highlightedTokens={highlightedTokens}
-                                includeArchived={includeArchived} />
+                    note={childNote}
+                    parentNote={note}
+                    highlightedTokens={highlightedTokens}
+                    includeArchived={includeArchived} />
             ))}
         </div>
-    </NoteList>
+    </NoteList>;
 }
 
 interface NoteListProps {
@@ -82,13 +82,13 @@ function NoteList(props: NoteListProps) {
 
         {props.noteIds.length > 0 && <div className="note-list-wrapper">
             {!hasCollectionProperties && <Pager {...props.pagination} />}
-            
+
             {props.children}
 
             <Pager className="note-list-bottom-pager" {...props.pagination} />
         </div>}
 
-    </div>
+    </div>;
 }
 
 function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expandDepth, includeArchived }: {
@@ -106,25 +106,25 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
     // Reset expand state if switching to another note, or if user manually toggled expansion state.
     useEffect(() => setExpanded(currentLevel <= expandDepth), [ note, currentLevel, expandDepth ]);
 
-    let subSections: JSX.Element | undefined = undefined;
+    let subSections: JSX.Element | undefined;
     if (isExpanded) {
         subSections = <>
             <CardSection className="note-content-preview">
                 <NoteContent note={note}
-                             highlightedTokens={highlightedTokens}
-                             noChildrenList
-                             includeArchivedNotes={includeArchived} />
+                    highlightedTokens={highlightedTokens}
+                    noChildrenList
+                    includeArchivedNotes={includeArchived} />
             </CardSection>
 
             <NoteChildren note={note}
-                          parentNote={parentNote}
-                          highlightedTokens={highlightedTokens}
-                          currentLevel={currentLevel}
-                          expandDepth={expandDepth}
-                          includeArchived={includeArchived} />
-        </>
+                parentNote={parentNote}
+                highlightedTokens={highlightedTokens}
+                currentLevel={currentLevel}
+                expandDepth={expandDepth}
+                includeArchived={includeArchived} />
+        </>;
     }
-    
+
     return (
         <CardSection
             className={clsx("nested-note-list-item", "no-tooltip-preview", note.getColorClass(), {
@@ -137,14 +137,14 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
             data-note-id={note.noteId}
         >
             <h5>
-                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`} 
-                      onClick={() => setExpanded(!isExpanded)}/>
+                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`}
+                    onClick={() => setExpanded(!isExpanded)}/>
                 <Icon className="note-icon" icon={note.getIcon()} />
                 <NoteLink className="note-book-title"
-                          notePath={notePath}
-                          noPreview
-                          showNotePath={parentNote.type === "search"}
-                          highlightedTokens={highlightedTokens} />
+                    notePath={notePath}
+                    noPreview
+                    showNotePath={parentNote.type === "search"}
+                    highlightedTokens={highlightedTokens} />
                 <NoteAttributes note={note} />
                 <NoteMenuButton notePath={notePath} />
             </h5>
@@ -164,27 +164,28 @@ function GridNoteCard(props: GridNoteCardProps) {
 
     return (
         <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
-                "archived": props.note.isArchived
-             })}
-             data-href={`#${notePath}`}
-             data-note-id={props.note.noteId}
-             onClick={(e) => link.goToLink(e)}
+            "archived": props.note.isArchived,
+            "mobile-full-width": props.note.type === "file"
+        })}
+        data-href={`#${notePath}`}
+        data-note-id={props.note.noteId}
+        onClick={(e) => link.goToLink(e)}
         >
             <h5 className={clsx("note-book-header")}>
                 <Icon className="note-icon" icon={props.note.getIcon()} />
                 <NoteLink className="note-book-title"
-                          notePath={notePath}
-                          noPreview
-                          showNotePath={props.parentNote.type === "search"}
-                          highlightedTokens={props.highlightedTokens}
+                    notePath={notePath}
+                    noPreview
+                    showNotePath={props.parentNote.type === "search"}
+                    highlightedTokens={props.highlightedTokens}
                 />
                 {!props.note.isOptions() && <NoteMenuButton notePath={notePath} />}
-                
+
             </h5>
             <NoteContent note={props.note}
-                         trim
-                         highlightedTokens={props.highlightedTokens}
-                         includeArchivedNotes={props.includeArchived}
+                trim
+                highlightedTokens={props.highlightedTokens}
+                includeArchivedNotes={props.includeArchived}
             />
         </CardFrame>
     );
@@ -222,7 +223,7 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
 
         return () => {
             contentSizeObserver.unobserve(contentElement);
-        }
+        };
     }, []);
 
     useEffect(() => {
@@ -281,13 +282,13 @@ function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expan
 function NoteMenuButton(props: {notePath: string}) {
     const openMenu = useCallback((e: TargetedMouseEvent<HTMLElement>) => {
         linkContextMenuService.openContextMenu(props.notePath, e);
-        e.stopPropagation()
+        e.stopPropagation();
     }, [props.notePath]);
 
     return  <ActionButton className="note-book-item-menu"
-                          icon="bx bx-dots-vertical-rounded" text=""
-                          onClick={openMenu} 
-            />
+        icon="bx bx-dots-vertical-rounded" text=""
+        onClick={openMenu}
+    />;
 }
 
 function getNotePath(parentNote: FNote, childNote: FNote) {
@@ -315,7 +316,7 @@ function useExpansionDepth(note: FNote) {
 
 function onContentResized(entries: ResizeObserverEntry[], observer: ResizeObserver): void {
     for (const contentElement of entries) {
-        const isOverflowing = ((contentElement.target.scrollHeight > contentElement.target.clientHeight))
+        const isOverflowing = ((contentElement.target.scrollHeight > contentElement.target.clientHeight));
         contentElement.target.classList.toggle("note-book-content-overflowing", isOverflowing);
     }
-}
+}

apps/client/src/widgets/type_widgets/file/MediaPlayer.css

@@ -50,13 +50,21 @@
         }
     }
 
-    .media-volume-row {
+    .media-volume-dropdown-content {
         display: flex;
         align-items: center;
         gap: 0.25em;
+        padding: 0.5em;
+
+        .volume-mute-btn {
+            padding: 0.25em;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
 
         .media-volume-slider {
-            width: 80px;
+            width: 100px;
             cursor: pointer;
         }
     }

apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx

@@ -102,30 +102,47 @@ export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
         }
     };
 
-    const toggleMute = () => {
+    const toggleMute = (e: MouseEvent) => {
+        e.stopPropagation();
         const media = mediaRef.current;
         if (!media) return;
         media.muted = !media.muted;
         setMuted(media.muted);
     };
 
+    const volumeIcon = muted || volume === 0
+        ? "bx bx-volume-mute"
+        : volume < 0.5
+            ? "bx bx-volume-low"
+            : "bx bx-volume-full";
+
     return (
-        <div class="media-volume-row">
-            <ActionButton
-                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
-                text={muted ? t("media.unmute") : t("media.mute")}
-                onClick={toggleMute}
-            />
-            <input
-                type="range"
-                class="media-volume-slider"
-                min={0}
-                max={1}
-                step={0.05}
-                value={muted ? 0 : volume}
-                onInput={onVolumeChange}
-            />
-        </div>
+        <Dropdown
+            iconAction
+            hideToggleArrow
+            buttonClassName="volume-dropdown"
+            text={<Icon icon={volumeIcon} />}
+            title={t("media.volume")}
+        >
+            <li class="media-volume-dropdown-content">
+                <button
+                    class="dropdown-item volume-mute-btn"
+                    onClick={toggleMute}
+                    title={muted ? t("media.unmute") : t("media.mute")}
+                >
+                    <Icon icon={volumeIcon} />
+                </button>
+                <input
+                    type="range"
+                    class="media-volume-slider"
+                    min={0}
+                    max={1}
+                    step={0.05}
+                    value={muted ? 0 : volume}
+                    onInput={onVolumeChange}
+                />
+            </li>
+        </Dropdown>
     );
 }
 

apps/client/src/widgets/type_widgets/file/Video.css

@@ -1,8 +1,8 @@
-.note-detail-file > .video-preview-wrapper {
+.video-preview-wrapper {
     width: 100%;
     height: 100%;
     position: relative;
-    background-color: black;    
+    background-color: black;
 
     .video-preview {
         background-color: black;

apps/client/src/widgets/type_widgets/file/Video.tsx

@@ -7,19 +7,29 @@ import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import { getUrlForDownload } from "../../../services/open";
 import ActionButton from "../../react/ActionButton";
+import Dropdown from "../../react/Dropdown";
+import { FormListHeader, FormListItem } from "../../react/FormList";
+import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
-import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+import { PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 const AUTO_HIDE_DELAY = 3000;
 
 export default function VideoPreview({ note }: { note: FNote }) {
+    return <VideoPreviewContent
+        url={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+        mime={note.mime}
+    />;
+}
+
+export function VideoPreviewContent({ url, mime }: { url: string, mime: string }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
     const [error, setError] = useState(false);
     const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
 
-    useEffect(() => setError(false), [note.noteId]);
+    useEffect(() => setError(false), [ url ]);
     const onError = useCallback(() => setError(true), []);
 
     const togglePlayback = useCallback(() => {
@@ -33,6 +43,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     }, []);
 
     const onVideoClick = useCallback((e: MouseEvent) => {
+        e.stopPropagation();
         if ((e.target as HTMLElement).closest(".media-preview-controls")) return;
         togglePlayback();
     }, [togglePlayback]);
@@ -40,7 +51,7 @@ export default function VideoPreview({ note }: { note: FNote }) {
     const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
 
     if (error) {
-        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
+        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: mime.replace("/", "-") })} />;
     }
 
     return (
@@ -48,8 +59,8 @@ export default function VideoPreview({ note }: { note: FNote }) {
             <video
                 ref={videoRef}
                 class="video-preview"
-                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-                datatype={note?.mime}
+                src={url}
+                datatype={mime}
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
                 onError={onError}
@@ -59,19 +70,17 @@ export default function VideoPreview({ note }: { note: FNote }) {
                 <SeekBar mediaRef={videoRef} />
                 <div class="media-buttons-row">
                     <div className="left">
-                        <PlaybackSpeed mediaRef={videoRef} />
-                        <RotateButton videoRef={videoRef} />
+                        <OverflowMenu videoRef={videoRef} />
                     </div>
                     <div className="center">
                         <div className="spacer" />
                         <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
                         <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
                         <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
-                        <LoopButton mediaRef={videoRef} />
+                        <div className="spacer" />
                     </div>
                     <div className="right">
                         <VolumeControl mediaRef={videoRef} />
-                        <ZoomToFitButton videoRef={videoRef} />
                         <PictureInPictureButton videoRef={videoRef} />
                         <FullscreenButton targetRef={wrapperRef} />
                     </div>
@@ -171,8 +180,49 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
     return { visible, onMouseMove, flash: onMouseMove };
 }
 
-function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
+
+function OverflowMenu({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [speed, setSpeed] = useState(() => videoRef.current?.playbackRate ?? 1);
+    const [loop, setLoop] = useState(() => videoRef.current?.loop ?? false);
     const [rotation, setRotation] = useState(0);
+    const [fitted, setFitted] = useState(false);
+
+    // Sync playback rate
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        setSpeed(video.playbackRate);
+        const onRateChange = () => setSpeed(video.playbackRate);
+        video.addEventListener("ratechange", onRateChange);
+        return () => video.removeEventListener("ratechange", onRateChange);
+    }, [videoRef]);
+
+    // Sync loop state
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        setLoop(video.loop);
+
+        const observer = new MutationObserver(() => setLoop(video.loop));
+        observer.observe(video, { attributes: true, attributeFilter: ["loop"] });
+        return () => observer.disconnect();
+    }, [videoRef]);
+
+    const selectSpeed = (rate: number) => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.playbackRate = rate;
+        setSpeed(rate);
+    };
+
+    const toggleLoop = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.loop = !video.loop;
+        setLoop(video.loop);
+    };
 
     const rotate = () => {
         const video = videoRef.current;
@@ -182,7 +232,6 @@ function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
 
         const isSideways = next === 90 || next === 270;
         if (isSideways) {
-            // Scale down so the rotated video fits within its container.
             const container = video.parentElement;
             if (container) {
                 const ratio = container.clientWidth / container.clientHeight;
@@ -195,19 +244,7 @@ function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
         }
     };
 
-    return (
-        <ActionButton
-            icon="bx bx-rotate-right"
-            text={t("media.rotate")}
-            onClick={rotate}
-        />
-    );
-}
-
-function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [fitted, setFitted] = useState(false);
-
-    const toggle = () => {
+    const toggleFit = () => {
         const video = videoRef.current;
         if (!video) return;
         const next = !fitted;
@@ -216,12 +253,50 @@ function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }
     };
 
     return (
-        <ActionButton
-            className={fitted ? "active" : ""}
-            icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
-            text={fitted ? t("media.zoom-reset") : t("media.zoom-to-fit")}
-            onClick={toggle}
-        />
+        <Dropdown
+            iconAction
+            hideToggleArrow
+            noSelectButtonStyle
+            noDropdownListStyle
+            mobileBackdrop
+            buttonClassName="overflow-menu-dropdown"
+            dropdownContainerClassName="mobile-bottom-menu"
+            text={<Icon icon="bx bx-dots-horizontal-rounded" />}
+            title={t("media.more-options")}
+        >
+            <FormListHeader text={t("media.playback-speed")} />
+            {PLAYBACK_SPEEDS.map((rate) => (
+                <FormListItem
+                    key={rate}
+                    icon={rate === speed ? "bx bx-check" : "bx bx-empty"}
+                    active={rate === speed}
+                    onClick={() => selectSpeed(rate)}
+                >
+                    {rate}x
+                </FormListItem>
+            ))}
+            <li class="dropdown-divider" />
+            <FormListItem
+                icon="bx bx-rotate-right"
+                onClick={rotate}
+            >
+                {t("media.rotate")}
+            </FormListItem>
+            <FormListItem
+                icon={loop ? "bx bx-check" : "bx bx-repeat"}
+                active={loop}
+                onClick={toggleLoop}
+            >
+                {loop ? t("media.disable-loop") : t("media.loop")}
+            </FormListItem>
+            <FormListItem
+                icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
+                active={fitted}
+                onClick={toggleFit}
+            >
+                {fitted ? t("media.zoom-reset") : t("media.zoom-to-fit")}
+            </FormListItem>
+        </Dropdown>
     );
 }
 

apps/dump-db/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "better-sqlite3": "12.8.0",
     "mime-types": "3.0.2",
-    "sanitize-filename": "1.6.4",
+    "sanitize-filename": "1.6.3",
     "tsx": "4.21.0",
     "yargs": "18.0.0"
   },

apps/server/package.json

@@ -99,7 +99,7 @@
     "html2plaintext": "2.1.4",
     "http-proxy-agent": "8.0.0",
     "https-proxy-agent": "8.0.0",
-    "i18next": "25.10.2",
+    "i18next": "25.8.18",
     "i18next-fs-backend": "2.6.1",
     "image-type": "6.0.0",
     "ini": "6.0.0",
@@ -107,13 +107,13 @@
     "is-svg": "6.1.0",
     "jimp": "1.6.0",
     "lorem-ipsum": "2.0.8",
-    "marked": "17.0.5",
+    "marked": "17.0.4",
     "mime-types": "3.0.2",
     "multer": "2.1.1",
     "normalize-strings": "1.1.1",
     "rand-token": "1.0.1",
     "safe-compare": "1.1.4",
-    "sanitize-filename": "1.6.4",
+    "sanitize-filename": "1.6.3",
     "sanitize-html": "2.17.2",
     "sax": "1.6.0",
     "serve-favicon": "2.5.1",

apps/website/package.json

@@ -9,7 +9,7 @@
 		"preview": "pnpm build && vite preview"
 	},
 	"dependencies": {
-		"i18next": "25.10.2",
+		"i18next": "25.8.18",
 		"i18next-http-backend": "3.0.2",
 		"preact": "10.29.0",
 		"preact-iso": "2.11.1",
@@ -17,8 +17,8 @@
 		"react-i18next": "16.5.8"
 	},
 	"devDependencies": {
-		"@preact/preset-vite": "2.10.5",
-		"eslint": "10.1.0",
+		"@preact/preset-vite": "2.10.4",
+		"eslint": "10.0.3",
 		"eslint-config-preact": "2.0.0",
 		"typescript": "5.9.3",
 		"user-agent-data-types": "0.4.2",

package.json

@@ -59,7 +59,7 @@
     "cross-env": "10.1.0",
     "dpdm": "4.0.1",
     "esbuild": "0.27.4",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
     "eslint-config-preact": "2.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-playwright": "2.10.1",

packages/ckeditor5-admonition/package.json

@@ -29,11 +29,11 @@
     "@vitest/browser": "4.1.0",
     "@vitest/coverage-istanbul": "4.1.0",
     "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
     "eslint-config-ckeditor5": ">=9.1.0",
     "http-server": "14.1.1",
     "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
     "stylelint-config-ckeditor5": ">=9.1.0",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",

packages/ckeditor5-footnotes/package.json

@@ -30,11 +30,11 @@
     "@vitest/browser": "4.1.0",
     "@vitest/coverage-istanbul": "4.1.0",
     "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
     "eslint-config-ckeditor5": ">=9.1.0",
     "http-server": "14.1.1",
     "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
     "stylelint-config-ckeditor5": ">=9.1.0",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",

packages/ckeditor5-keyboard-marker/package.json

@@ -32,11 +32,11 @@
     "@vitest/browser": "4.1.0",
     "@vitest/coverage-istanbul": "4.1.0",
     "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
     "eslint-config-ckeditor5": ">=9.1.0",
     "http-server": "14.1.1",
     "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
     "stylelint-config-ckeditor5": ">=9.1.0",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",

packages/ckeditor5-math/package.json

@@ -32,11 +32,11 @@
     "@vitest/browser": "4.1.0",
     "@vitest/coverage-istanbul": "4.1.0",
     "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
     "eslint-config-ckeditor5": ">=9.1.0",
     "http-server": "14.1.1",
     "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
     "stylelint-config-ckeditor5": ">=9.1.0",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",

packages/ckeditor5-mermaid/package.json

@@ -32,11 +32,11 @@
     "@vitest/browser": "4.1.0",
     "@vitest/coverage-istanbul": "4.1.0",
     "ckeditor5": "47.6.1",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
     "eslint-config-ckeditor5": ">=9.1.0",
     "http-server": "14.1.1",
     "lint-staged": "16.4.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.4.0",
     "stylelint-config-ckeditor5": ">=9.1.0",
     "ts-node": "10.9.2",
     "typescript": "5.9.3",

packages/codemirror/package.json

@@ -52,6 +52,6 @@
     "codemirror-lang-elixir": "4.0.1",
     "codemirror-lang-hcl": "0.1.0",
     "codemirror-lang-mermaid": "0.5.0",
-    "eslint-linter-browserify": "10.1.0"
+    "eslint-linter-browserify": "10.0.3"
   }
 }

packages/share-theme/package.json

@@ -25,7 +25,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "fuse.js": "7.1.0",
-    "katex": "0.16.40",
+    "katex": "0.16.39",
     "mermaid": "11.13.0"
   },
   "devDependencies": {
@@ -35,7 +35,7 @@
     "@typescript-eslint/parser": "8.57.1",
     "dotenv": "17.3.1",
     "esbuild": "0.27.4",
-    "eslint": "10.1.0",
+    "eslint": "10.0.3",
     "highlight.js": "11.11.1",
     "typescript": "5.9.3"
   }