chore(deps): update dependency @redocly/cli to v2.24.1

apps/build-docs/package.json

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

apps/client/src/services/content_renderer.ts

@@ -8,7 +8,6 @@ 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";
@@ -213,16 +212,15 @@ async function renderFile(entity: FNote | FAttachment, type: string, $renderedCo
 
         $content.append($audioPreview);
     } else if (type === "video") {
-        const url = openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`);
-        const mime = entity.mime;
+        const $videoPreview = $("<video controls></video>")
+            .attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`))
+            .attr("type", entity.mime)
+            .css("width", "100%");
 
-        const VideoPreviewContent = (await import("../widgets/type_widgets/file/Video")).VideoPreviewContent;
-        const $viewer = renderReactWidget(null, h(VideoPreviewContent, { url, mime }));
-
-        $content.append($viewer);
+        $content.append($videoPreview);
     }
 
-    if (entityType === "notes" && "noteId" in entity && type !== "video") {
+    if (entityType === "notes" && "noteId" in entity) {
         // 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/en/translation.json

@@ -1042,7 +1042,6 @@
     "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",
@@ -1055,8 +1054,7 @@
     "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",
-    "more-options": "More options"
+    "zoom-reset": "Reset zoom to fill"
   },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",

apps/client/src/widgets/attribute_widgets/attribute_detail.ts

@@ -1,18 +1,18 @@
-import appContext from "../../components/app_context.js";
-import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
-import type { Attribute } from "../../services/attribute_parser.js";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
-import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
-import froca from "../../services/froca.js";
 import { t } from "../../services/i18n.js";
+import server from "../../services/server.js";
+import froca from "../../services/froca.js";
 import linkService from "../../services/link.js";
+import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
 import noteAutocompleteService from "../../services/note_autocomplete.js";
 import promotedAttributeDefinitionParser from "../../services/promoted_attribute_definition_parser.js";
-import server from "../../services/server.js";
-import shortcutService from "../../services/shortcuts.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import SpacedUpdate from "../../services/spaced_update.js";
 import utils from "../../services/utils.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import shortcutService from "../../services/shortcuts.js";
+import appContext from "../../components/app_context.js";
+import type { Attribute } from "../../services/attribute_parser.js";
+import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
+import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
 
 const TPL = /*html*/`
 <div class="attr-detail tn-tool-dialog">
@@ -29,7 +29,6 @@ const TPL = /*html*/`
             max-height: 600px;
             overflow: auto;
             box-shadow: 10px 10px 93px -25px black;
-            contain: none;
         }
 
         .attr-help td {
@@ -344,7 +343,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
     private $relatedNotesList!: JQuery<HTMLElement>;
     private $relatedNotesMoreNotes!: JQuery<HTMLElement>;
     private $attrHelp!: JQuery<HTMLElement>;
-    private $statusBar?: JQuery<HTMLElement>;
 
     private relatedNotesSpacedUpdate!: SpacedUpdate;
     private attribute!: Attribute;
@@ -579,24 +577,17 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
             return;
         }
 
-        if (isNewLayout) {
-            if (!this.$statusBar) {
-                this.$statusBar = $(document.body).find(".component.status-bar");
-            }
+        this.$widget
+            .css("left", detPosition.left)
+            .css("right", detPosition.right)
+            .css("top", y - offset.top + 70)
+            .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
 
-            const statusBarHeight = this.$statusBar.outerHeight() ?? 0;
-            const maxHeight = document.body.clientHeight - statusBarHeight;
+        if (isNewLayout) {
             this.$widget
-                .css("left", offset.left + (typeof detPosition.left === "number" ? detPosition.left : 0))
                 .css("top", "unset")
-                .css("bottom", statusBarHeight ?? 0)
-                .css("max-height", maxHeight);
-        } else {
-            this.$widget
-                .css("left", detPosition.left)
-                .css("right", detPosition.right)
-                .css("top", y - offset.top + 70)
-                .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
+                .css("bottom", 70)
+                .css("max-height", "80vh");
         }
 
         if (focus === "name") {
@@ -704,14 +695,14 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
                 return "label-definition";
             } else if (attribute.name.startsWith("relation:")) {
                 return "relation-definition";
+            } else {
+                return "label";
             }
-            return "label";
-
         } else if (attribute.type === "relation") {
             return "relation";
+        } else {
+            this.$title.text("");
         }
-        this.$title.text("");
-
     }
 
     updateAttributeInEditor() {

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

@@ -12,11 +12,6 @@
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
-
-        body.mobile & {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-        }
     }
 
     .note-list-bottom-pager {
@@ -274,9 +269,8 @@
     overflow: hidden;
     user-select: none;
 
-    body.mobile &.mobile-full-width {
-        grid-column-start: 1;
-        grid-column-end: 3;
+    body.mobile & {
+        flex-basis: 150px;
     }
 
     &:hover {
@@ -370,19 +364,23 @@
         mask-repeat: no-repeat;
         mask-size: 100% 100%;
     }
-
+    
     .ck-content p {
         margin-bottom: 0.5em;
         line-height: 1.3;
     }
 
+    .ck-content figure.image {
+        width: 25%;
+    }
+
     .ck-content .table {
         display: flex;
         flex-direction: column-reverse;
         overflow-x: scroll;
         --scrollbar-thickness: 0;
         scrollbar-width: none;
-
+        
         table {
             width: max-content;
             table-layout: auto;
@@ -437,4 +435,4 @@
     }
 }
 
-/* #endregion */
+/* #endregion */

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, PaginationContext,usePagination } from "../Pagination";
+import { Pager, usePagination, PaginationContext } 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;
+    let subSections: JSX.Element | undefined = 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,28 +164,27 @@ function GridNoteCard(props: GridNoteCardProps) {
 
     return (
         <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
-            "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)}
+                "archived": props.note.isArchived
+             })}
+             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>
     );
@@ -223,7 +222,7 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
 
         return () => {
             contentSizeObserver.unobserve(contentElement);
-        };
+        }
     }, []);
 
     useEffect(() => {
@@ -282,13 +281,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) {
@@ -316,7 +315,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/ribbon/InheritedAttributesTab.tsx

@@ -1,4 +1,3 @@
-import { createPortal } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
 import FAttribute from "../../entities/fattribute";
@@ -75,7 +74,7 @@ export default function InheritedAttributesTab({ note, componentId, emptyListStr
                 )}
             </div>
 
-            {createPortal(attributeDetailWidgetEl, document.body)}
+            {attributeDetailWidgetEl}
         </div>
     );
 }

apps/client/src/widgets/ribbon/components/AttributeEditor.tsx

@@ -1,6 +1,5 @@
 import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5";
 import { AttributeType } from "@triliumnext/commons";
-import { createPortal } from "preact/compat";
 import { MutableRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "preact/hooks";
 
 import type { CommandData, FilteredCommandNames } from "../../../components/app_context";
@@ -337,8 +336,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                                 let matchedAttr: Attribute | null = null;
 
                                 for (const attr of parsedAttrs) {
-                                    if (attr.startIndex !== undefined && clickIndex > attr.startIndex &&
-                                        attr.endIndex !== undefined && clickIndex <= attr.endIndex) {
+                                    if (attr.startIndex && clickIndex > attr.startIndex && attr.endIndex && clickIndex <= attr.endIndex) {
                                         matchedAttr = attr;
                                         break;
                                     }
@@ -409,7 +407,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                 )}
             </div>}
 
-            {createPortal(attributeDetailWidgetEl, document.body)}
+            {attributeDetailWidgetEl}
         </>
     );
 }

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

@@ -50,21 +50,13 @@
         }
     }
 
-    .media-volume-dropdown-content {
+    .media-volume-row {
         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: 100px;
+            width: 80px;
             cursor: pointer;
         }
     }

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

@@ -102,47 +102,30 @@ export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
         }
     };
 
-    const toggleMute = (e: MouseEvent) => {
-        e.stopPropagation();
+    const toggleMute = () => {
         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 (
-        <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>
+        <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>
     );
 }
 

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

@@ -1,8 +1,8 @@
-.video-preview-wrapper {
+.note-detail-file > .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,29 +7,19 @@ 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 { PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+import { LoopButton, PlaybackSpeed, 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), [ url ]);
+    useEffect(() => setError(false), [note.noteId]);
     const onError = useCallback(() => setError(true), []);
 
     const togglePlayback = useCallback(() => {
@@ -43,7 +33,6 @@ export function VideoPreviewContent({ url, mime }: { url: string, mime: string }
     }, []);
 
     const onVideoClick = useCallback((e: MouseEvent) => {
-        e.stopPropagation();
         if ((e.target as HTMLElement).closest(".media-preview-controls")) return;
         togglePlayback();
     }, [togglePlayback]);
@@ -51,7 +40,7 @@ export function VideoPreviewContent({ url, mime }: { url: string, mime: string }
     const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
 
     if (error) {
-        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: mime.replace("/", "-") })} />;
+        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
     }
 
     return (
@@ -59,8 +48,8 @@ export function VideoPreviewContent({ url, mime }: { url: string, mime: string }
             <video
                 ref={videoRef}
                 class="video-preview"
-                src={url}
-                datatype={mime}
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                datatype={note?.mime}
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
                 onError={onError}
@@ -70,17 +59,19 @@ export function VideoPreviewContent({ url, mime }: { url: string, mime: string }
                 <SeekBar mediaRef={videoRef} />
                 <div class="media-buttons-row">
                     <div className="left">
-                        <OverflowMenu videoRef={videoRef} />
+                        <PlaybackSpeed mediaRef={videoRef} />
+                        <RotateButton 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")} />
-                        <div className="spacer" />
+                        <LoopButton mediaRef={videoRef} />
                     </div>
                     <div className="right">
                         <VolumeControl mediaRef={videoRef} />
+                        <ZoomToFitButton videoRef={videoRef} />
                         <PictureInPictureButton videoRef={videoRef} />
                         <FullscreenButton targetRef={wrapperRef} />
                     </div>
@@ -180,49 +171,8 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
     return { visible, onMouseMove, flash: onMouseMove };
 }
 
-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);
+function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     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;
@@ -232,6 +182,7 @@ function OverflowMenu({ 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;
@@ -244,7 +195,19 @@ function OverflowMenu({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
         }
     };
 
-    const toggleFit = () => {
+    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 video = videoRef.current;
         if (!video) return;
         const next = !fitted;
@@ -253,50 +216,12 @@ function OverflowMenu({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     };
 
     return (
-        <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>
+        <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}
+        />
     );
 }
 

pnpm-lock.yaml

@@ -159,8 +159,8 @@ importers:
   apps/build-docs:
     devDependencies:
       '@redocly/cli':
-        specifier: 2.24.0
-        version: 2.24.0(@opentelemetry/api@1.9.0)(bufferutil@4.0.9)(core-js@3.46.0)(encoding@0.1.13)(utf-8-validate@6.0.5)
+        specifier: 2.24.1
+        version: 2.24.1(@opentelemetry/api@1.9.0)(bufferutil@4.0.9)(core-js@3.46.0)(encoding@0.1.13)(utf-8-validate@6.0.5)
       archiver:
         specifier: 7.0.1
         version: 7.0.1
@@ -5025,8 +5025,8 @@ packages:
   '@redocly/ajv@8.18.0':
     resolution: {integrity: sha512-F+LMD2IDIXuHxgpLJh3nkLj9+tSaEzoUWd+7fONGq5pe2169FUDjpEkOfEpoGLz1sbZni/69p07OsecNfAOpqA==}
 
-  '@redocly/cli@2.24.0':
-    resolution: {integrity: sha512-g5iKfmG1rgbpQ/mBnEH78bJbAUx2XxLSJTYdYGuvsrT8CODbOyza1xFF7kwOFo93JV62lmu3IfzNIxFj9FACYw==}
+  '@redocly/cli@2.24.1':
+    resolution: {integrity: sha512-GTAKMPtyvO7vn3CrSp8Q5SJlMUr8q6wgMN/J4K5owphyp5gOQCZqMySyWcq+V5RPPXkTuIHZYEzgnecB6RF2bQ==}
     engines: {node: '>=22.12.0 || >=20.19.0 <21.0.0', npm: '>=10'}
     hasBin: true
 
@@ -5040,12 +5040,12 @@ packages:
     resolution: {integrity: sha512-0EbE8LRbkogtcCXU7liAyC00n9uNG9hJ+eMyHFdUsy9lB/WGqnEBgwjA9q2cyzAVcdTkQqTBBU1XePNnN3OijA==}
     engines: {node: '>=18.17.0', npm: '>=9.5.0'}
 
-  '@redocly/openapi-core@2.24.0':
-    resolution: {integrity: sha512-4j8+OKA+bFBOj9Uhr6LJuNnFQpKAE9uK5Smw4yd2WJS2bcsJhCqbUWOG9N1cYBUFlwRQpLBT1ZOSmDFYv81NOg==}
+  '@redocly/openapi-core@2.24.1':
+    resolution: {integrity: sha512-Iqc/4DI/CIQkKys8HRHkX+bpF/UosVUE7lc7tuxIOKzVIOk5QhQMglbd2yzbAYgJF7YAtCDDAKWosvXnvTTWsA==}
     engines: {node: '>=22.12.0 || >=20.19.0 <21.0.0', npm: '>=10'}
 
-  '@redocly/respect-core@2.24.0':
-    resolution: {integrity: sha512-3Gp+4X5V6DCATmB7OYpUrGKEYaR8quq2LD+PsniEAMTfG+oyuDHJRUy3zXYfGQGT7PDi0iXUZ8PEWUFzgVdyZQ==}
+  '@redocly/respect-core@2.24.1':
+    resolution: {integrity: sha512-WMeg9TmAc0ZINp6Tza+ZWhMuIBM28us6ZyLj5DKWZhkBZhKaTNhXlmTYES11uM35eie+mYZStTov4vXYL//wqg==}
     engines: {node: '>=22.12.0 || >=20.19.0 <21.0.0', npm: '>=10'}
 
   '@replit/codemirror-indentation-markers@6.5.3':
@@ -11960,11 +11960,6 @@ packages:
     engines: {node: ^18 || >=20}
     hasBin: true
 
-  nanoid@5.1.6:
-    resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
   nanoid@5.1.7:
     resolution: {integrity: sha512-ua3NDgISf6jdwezAheMOk4mbE1LXjm1DfMUDMuJf4AqxLFK3ccGpgWizwa5YV7Yz9EpXwEaWoRXSb/BnV0t5dQ==}
     engines: {node: ^18 || >=20}
@@ -14955,6 +14950,10 @@ packages:
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
+  undici@6.24.0:
+    resolution: {integrity: sha512-lVLNosgqo5EkGqh5XUDhGfsMSoO8K0BAN0TyJLvwNRSl4xWGZlCVYsAIpa/OpA3TvmnM01GWcoKmc3ZWo5wKKA==}
+    engines: {node: '>=18.17'}
+
   undici@6.24.1:
     resolution: {integrity: sha512-sC+b0tB1whOCzbtlx20fx3WgCXwkW627p4EA9uM+/tNNPkSS+eSEld6pAs9nDv7WbY1UUljBMYPtu9BCOrCWKA==}
     engines: {node: '>=18.17'}
@@ -16704,8 +16703,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.6.1
       '@ckeditor/ckeditor5-upload': 47.6.1
       ckeditor5: 47.6.1
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-ai@47.6.1(bufferutil@4.0.9)(utf-8-validate@6.0.5)':
     dependencies:
@@ -16853,8 +16850,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.6.1
       '@ckeditor/ckeditor5-utils': 47.6.1
       ckeditor5: 47.6.1
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-code-block@47.6.1(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -17041,8 +17036,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.6.1
       ckeditor5: 47.6.1
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-classic@47.6.1':
     dependencies:
@@ -17052,8 +17045,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.6.1
       ckeditor5: 47.6.1
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-decoupled@47.6.1':
     dependencies:
@@ -17063,8 +17054,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.6.1
       ckeditor5: 47.6.1
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-inline@47.6.1':
     dependencies:
@@ -17098,6 +17087,8 @@ snapshots:
       '@ckeditor/ckeditor5-table': 47.6.1
       '@ckeditor/ckeditor5-utils': 47.6.1
       ckeditor5: 47.6.1
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-emoji@47.6.1':
     dependencies:
@@ -17123,8 +17114,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.6.1
       '@ckeditor/ckeditor5-engine': 47.6.1
       '@ckeditor/ckeditor5-utils': 47.6.1
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-essentials@47.6.1':
     dependencies:
@@ -17257,8 +17246,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.6.1
       '@ckeditor/ckeditor5-widget': 47.6.1
       ckeditor5: 47.6.1
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-html-embed@47.6.1':
     dependencies:
@@ -17434,6 +17421,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.6.1
       '@ckeditor/ckeditor5-widget': 47.6.1
       ckeditor5: 47.6.1
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-mention@47.6.1(patch_hash=5981fb59ba35829e4dff1d39cf771000f8a8fdfa7a34b51d8af9549541f2d62d)':
     dependencies:
@@ -17556,8 +17545,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.6.1
       '@ckeditor/ckeditor5-engine': 47.6.1
       ckeditor5: 47.6.1
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-real-time-collaboration@47.6.1(bufferutil@4.0.9)(utf-8-validate@6.0.5)':
     dependencies:
@@ -17588,8 +17575,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.6.1
       '@ckeditor/ckeditor5-utils': 47.6.1
       ckeditor5: 47.6.1
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-restricted-editing@47.6.1':
     dependencies:
@@ -17676,8 +17661,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.6.1
       '@ckeditor/ckeditor5-utils': 47.6.1
       ckeditor5: 47.6.1
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-special-characters@47.6.1':
     dependencies:
@@ -20912,14 +20895,14 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  '@redocly/cli@2.24.0(@opentelemetry/api@1.9.0)(bufferutil@4.0.9)(core-js@3.46.0)(encoding@0.1.13)(utf-8-validate@6.0.5)':
+  '@redocly/cli@2.24.1(@opentelemetry/api@1.9.0)(bufferutil@4.0.9)(core-js@3.46.0)(encoding@0.1.13)(utf-8-validate@6.0.5)':
     dependencies:
       '@opentelemetry/exporter-trace-otlp-http': 0.202.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/resources': 2.0.1(@opentelemetry/api@1.9.0)
       '@opentelemetry/sdk-trace-node': 2.0.1(@opentelemetry/api@1.9.0)
       '@opentelemetry/semantic-conventions': 1.34.0
-      '@redocly/openapi-core': 2.24.0
-      '@redocly/respect-core': 2.24.0
+      '@redocly/openapi-core': 2.24.1
+      '@redocly/respect-core': 2.24.1
       abort-controller: 3.0.0
       ajv: '@redocly/ajv@8.18.0'
       ajv-formats: 3.0.1(@redocly/ajv@8.18.0)
@@ -20940,7 +20923,7 @@ snapshots:
       simple-websocket: 9.1.0(bufferutil@4.0.9)(utf-8-validate@6.0.5)
       styled-components: 6.3.9(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       ulid: 3.0.2
-      undici: 6.24.1
+      undici: 6.24.0
       yargs: 17.0.1
     transitivePeerDependencies:
       - '@opentelemetry/api'
@@ -20971,7 +20954,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@redocly/openapi-core@2.24.0':
+  '@redocly/openapi-core@2.24.1':
     dependencies:
       '@redocly/ajv': 8.18.0
       '@redocly/config': 0.44.1
@@ -20984,12 +20967,12 @@ snapshots:
       pluralize: 8.0.0
       yaml-ast-parser: 0.0.43
 
-  '@redocly/respect-core@2.24.0':
+  '@redocly/respect-core@2.24.1':
     dependencies:
       '@faker-js/faker': 7.6.0
       '@noble/hashes': 1.8.0
       '@redocly/ajv': 8.18.0
-      '@redocly/openapi-core': 2.24.0
+      '@redocly/openapi-core': 2.24.1
       ajv: '@redocly/ajv@8.18.0'
       better-ajv-errors: 1.2.0(@redocly/ajv@8.18.0)
       colorette: 2.0.20
@@ -30212,8 +30195,6 @@ snapshots:
 
   nanoid@5.1.5: {}
 
-  nanoid@5.1.6: {}
-
   nanoid@5.1.7: {}
 
   nanospinner@1.2.2:
@@ -31289,7 +31270,7 @@ snapshots:
 
   postcss@8.4.49:
     dependencies:
-      nanoid: 5.1.6
+      nanoid: 5.1.7
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -33696,6 +33677,8 @@ snapshots:
 
   undici-types@7.16.0: {}
 
+  undici@6.24.0: {}
+
   undici@6.24.1: {}
 
   undici@7.19.0: {}