diff --git a/apps/client/src/widgets/type_widgets/file/Video.css b/apps/client/src/widgets/type_widgets/file/Video.css index 39cf2562cf..657f398187 100644 --- a/apps/client/src/widgets/type_widgets/file/Video.css +++ b/apps/client/src/widgets/type_widgets/file/Video.css @@ -27,10 +27,10 @@ flex: 1; align-items: center; gap: 0.5em; + display: flex; } .center { - display: flex; justify-content: center; } @@ -73,4 +73,24 @@ width: 80px; cursor: pointer; } + + .speed-dropdown { + position: relative; + + .tn-icon { + transform: translateY(-10%); + } + + .video-speed-label { + position: absolute; + bottom: 0; + left: 0; + right: 0; + transform: translateY(15%); + text-align: center; + color: white; + font-size: 0.6rem; + font-variant-numeric: tabular-nums; + } + } } diff --git a/apps/client/src/widgets/type_widgets/file/Video.tsx b/apps/client/src/widgets/type_widgets/file/Video.tsx index e158183dd5..bb6c48d9b7 100644 --- a/apps/client/src/widgets/type_widgets/file/Video.tsx +++ b/apps/client/src/widgets/type_widgets/file/Video.tsx @@ -6,6 +6,8 @@ import { useEffect, useRef, useState } from "preact/hooks"; import FNote from "../../../entities/fnote"; import { getUrlForDownload } from "../../../services/open"; import ActionButton from "../../react/ActionButton"; +import Dropdown from "../../react/Dropdown"; +import Icon from "../../react/Icon"; function formatTime(seconds: number): string { const mins = Math.floor(seconds / 60); @@ -49,7 +51,9 @@ export default function VideoPreview({ note }: { note: FNote }) {