@leavepulse/ui 0.83.0 → 0.85.0

package/src/components/LpVideoCompress.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+/*
+ * Trim and shrink a video on the person's own machine before it is uploaded.
+ *
+ *   <LpVideoCompress :file="file" @done="(out) => upload(out)" @skip="upload(file)" />
+ *
+ * - The picture plays from a local object URL, so nothing is sent while the
+ *   person trims; LpVideoTrim does the trimming.
+ * - A preset picks the height and bitrate, or a target size ("fit for a chat"),
+ *   and the line under it estimates the result against the original.
+ * - "Shrink" encodes with `transcodeVideo` (WebCodecs, hardware where there is
+ *   some) with a progress bar and a cancel; `done` hands the new MP4 back.
+ *   "Upload as is" emits `skip`: the original goes, untouched.
+ * - A browser without a video encoder only offers `skip`, and says why.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
+
+import { useLabels } from "../composables/useLpConfig"
+import {
+  canTranscodeVideo,
+  clipLength,
+  estimateTranscodedBytes,
+  probeVideo,
+  transcodeVideo,
+  type TranscodeVideoOptions,
+  type VideoInfo,
+} from "../composables/videoTranscode"
+import { formatBytes } from "./format"
+import LpButton from "./LpButton.vue"
+import LpCollapse from "./LpCollapse.vue"
+import LpProgress from "./LpProgress.vue"
+import LpSegmented from "./LpSegmented.vue"
+import LpVideoTrim from "./LpVideoTrim.vue"
+import type { TimeRange } from "./videoTrim"
+
+/** Wording of the compressor. `{size}`, `{original}`, `{percent}` and `{error}` are filled in. */
+export type VideoCompressLabels = {
+  original: string
+  p1080: string
+  p720: string
+  p480: string
+  fit: string
+  quality: string
+  estimate: string
+  probing: string
+  shrink: string
+  skip: string
+  encoding: string
+  cancel: string
+  unsupported: string
+  failed: string
+  bigger: string
+}
+
+export interface VideoCompressPreset {
+  key: string
+  label: string
+  maxHeight?: number | null
+  targetBytes?: number | null
+  videoBitrate?: number | null
+}
+
+const props = withDefaults(
+  defineProps<{
+    file: File
+    /** The presets offered; the default set is original, 1080p, 720p, 480p and "fits 10 MB". */
+    presets?: VideoCompressPreset[]
+    /** The longest clip allowed, in seconds. */
+    maxClip?: number
+    disabled?: boolean
+    labels?: Partial<VideoCompressLabels>
+  }>(),
+  { presets: undefined, maxClip: undefined, labels: () => ({}) },
+)
+
+const preset = defineModel<string>("preset", { default: "p720" })
+
+const emit = defineEmits<{
+  (e: "done", file: File, info: { range: TimeRange; preset: string }): void
+  (e: "skip"): void
+  (e: "busy", value: boolean): void
+}>()
+
+const text = useLabels<VideoCompressLabels>(
+  "videoCompress",
+  {
+    original: "Original",
+    p1080: "1080p",
+    p720: "720p",
+    p480: "480p",
+    /** `{size}` is replaced by the target size. */
+    fit: "Fits {size}",
+    quality: "Quality",
+    /** `{size}` and `{original}` are replaced by sizes; the size is a ceiling, simple pictures come out smaller. */
+    estimate: "Up to about {size} instead of {original}",
+    probing: "Reading the video…",
+    shrink: "Shrink",
+    skip: "Upload as is",
+    /** `{percent}` is replaced by a number. */
+    encoding: "Encoding on this device… {percent}%",
+    cancel: "Cancel",
+    unsupported: "This browser can't encode video, so the original will be uploaded.",
+    /** `{error}` is replaced by the reason. */
+    failed: "Couldn't encode: {error}",
+    bigger: "The result wouldn't be smaller, so the original is better.",
+  },
+  () => props.labels,
+)
+
+const FIT_BYTES = 10 * 1024 * 1024
+
+const choices = computed<VideoCompressPreset[]>(() => props.presets ?? [
+  { key: "original", label: text.value.original },
+  { key: "p1080", label: text.value.p1080, maxHeight: 1080 },
+  { key: "p720", label: text.value.p720, maxHeight: 720 },
+  { key: "p480", label: text.value.p480, maxHeight: 480 },
+  { key: "fit", label: text.value.fit.replace("{size}", formatBytes(FIT_BYTES)), maxHeight: 720, targetBytes: FIT_BYTES },
+])
+
+const url = ref("")
+const info = shallowRef<VideoInfo | null>(null)
+const supported = ref<boolean | null>(null)
+const range = ref<TimeRange | null>(null)
+const progress = ref<number | null>(null)
+const error = ref("")
+let controller: AbortController | null = null
+
+function load(file: File): void {
+  if (url.value) URL.revokeObjectURL(url.value)
+  url.value = URL.createObjectURL(file)
+  info.value = null
+  range.value = null
+  error.value = ""
+  void probeVideo(file).then(
+    (found) => { if (props.file === file) info.value = found },
+    (cause: unknown) => { if (props.file === file) error.value = text.value.failed.replace("{error}", cause instanceof Error ? cause.message : String(cause)) },
+  )
+}
+
+onMounted(() => {
+  void canTranscodeVideo().then((ok) => (supported.value = ok))
+})
+watch(() => props.file, load, { immediate: true })
+onBeforeUnmount(() => {
+  controller?.abort()
+  if (url.value) URL.revokeObjectURL(url.value)
+})
+
+const chosen = computed(() => choices.value.find((p) => p.key === preset.value) ?? choices.value[0])
+
+const options = computed<TranscodeVideoOptions>(() => ({
+  range: range.value,
+  maxHeight: chosen.value?.maxHeight ?? null,
+  targetBytes: chosen.value?.targetBytes ?? null,
+  videoBitrate: chosen.value?.videoBitrate ?? null,
+}))
+
+const estimate = computed(() => (info.value ? estimateTranscodedBytes(info.value, options.value) : null))
+
+const trimmed = computed(() => {
+  const found = info.value
+  return !!found && clipLength(found.duration, range.value) < found.duration - 0.05
+})
+
+const worthIt = computed(() => estimate.value !== null && (estimate.value < props.file.size * 0.95 || trimmed.value))
+
+const estimateLine = computed(() => {
+  if (estimate.value === null) return text.value.probing
+  if (!worthIt.value) return text.value.bigger
+  return text.value.estimate.replace("{size}", formatBytes(estimate.value)).replace("{original}", formatBytes(props.file.size))
+})
+
+const busy = computed(() => progress.value !== null)
+watch(busy, (value) => emit("busy", value))
+
+async function shrink(): Promise<void> {
+  if (busy.value || !info.value) return
+  controller = new AbortController()
+  progress.value = 0
+  error.value = ""
+  try {
+    const out = await transcodeVideo(props.file, {
+      ...options.value,
+      onProgress: (fraction) => (progress.value = fraction),
+      signal: controller.signal,
+    })
+    emit("done", out, { range: range.value ?? [0, info.value.duration], preset: preset.value })
+  } catch (cause) {
+    if (!(cause instanceof DOMException && cause.name === "AbortError")) {
+      error.value = text.value.failed.replace("{error}", cause instanceof Error ? cause.message : String(cause))
+    }
+  } finally {
+    progress.value = null
+    controller = null
+  }
+}
+
+function cancel(): void {
+  controller?.abort()
+}
+
+const percent = computed(() => Math.round((progress.value ?? 0) * 100))
+</script>
+
+<template>
+  <div class="flex flex-col gap-4" data-lp-video-compress>
+    <LpVideoTrim v-model:range="range" :src="url" :max-clip="maxClip" :disabled="disabled || busy" />
+    <div v-if="supported !== false" class="flex flex-col gap-2">
+      <span class="text-xs font-medium text-muted">{{ text.quality }}</span>
+      <LpSegmented
+        v-model="preset"
+        :options="choices.map((p) => ({ value: p.key, label: p.label }))"
+        :disabled="disabled || busy"
+        size="sm"
+        class="max-w-full overflow-x-auto"
+      />
+      <p class="text-sm text-muted" aria-live="polite">{{ estimateLine }}</p>
+    </div>
+    <p v-else class="text-sm text-muted">{{ text.unsupported }}</p>
+    <LpCollapse :open="!!error">
+      <p class="text-sm text-danger" role="alert">{{ error }}</p>
+    </LpCollapse>
+    <LpCollapse :open="busy">
+      <div class="flex flex-col gap-1.5">
+        <LpProgress :value="percent" :max="100" />
+        <span class="text-xs text-muted" aria-live="polite">{{ text.encoding.replace("{percent}", String(percent)) }}</span>
+      </div>
+    </LpCollapse>
+    <div class="flex flex-wrap justify-end gap-2">
+      <LpButton v-if="busy" variant="ghost" @click="cancel">{{ text.cancel }}</LpButton>
+      <template v-else>
+        <LpButton variant="ghost" :disabled="disabled" @click="emit('skip')">{{ text.skip }}</LpButton>
+        <LpButton v-if="supported !== false" :disabled="disabled || !info || !worthIt" @click="shrink">{{ text.shrink }}</LpButton>
+      </template>
+    </div>
+  </div>
+</template>

package/src/components/LpVideoPlayer.vue

@@ -61,6 +61,37 @@ import { formatClipTime, widestClipTime } from "./videoBackdrop"
 import { FrameSampler } from "./videoFrames"
 import { FADE, FADE_SCALE, ICON_SWAP, OVERLAY_BUTTON } from "./videoMotion"
 
+/** Wording of the video player. `{n}` is seconds, `{time}` the playhead's time. */
+export type VideoPlayerLabels = {
+  player: string
+  play: string
+  pause: string
+  replay: string
+  mute: string
+  unmute: string
+  volume: string
+  speed: string
+  normalSpeed: string
+  fullscreen: string
+  exitFullscreen: string
+  pip: string
+  exitPip: string
+  captions: string
+  seek: string
+  failed: string
+  unsupported: string
+  back: string
+  forward: string
+  rewind: string
+  fastForward: string
+  menuAt: string
+  copyTime: string
+  copyFrame: string
+  copiedTime: string
+  copiedFrame: string
+  copyFailed: string
+}
+
 const props = withDefaults(
   defineProps<{
     src: string
@@ -89,12 +120,7 @@ const props = withDefaults(
     fit?: boolean
     /** More items for the right-click menu. */
     menuItems?: () => ContextMenuItemDef[]
-    labels?: Partial<Record<
-      | "player" | "play" | "pause" | "replay" | "mute" | "unmute" | "volume" | "speed" | "normalSpeed"
-      | "fullscreen" | "exitFullscreen" | "pip" | "exitPip" | "captions" | "seek" | "failed" | "unsupported"
-      | "back" | "forward" | "rewind" | "fastForward" | "menuAt" | "copyTime" | "copyFrame" | "copiedTime" | "copiedFrame" | "copyFailed",
-      string
-    >>
+    labels?: Partial<VideoPlayerLabels>
   }>(),
   {
     poster: undefined,
@@ -115,7 +141,7 @@ const emit = defineEmits<{
   (e: "error", error: { cause: VideoErrorCause; message: string }): void
 }>()
 
-const text = useLabels(
+const text = useLabels<VideoPlayerLabels>(
   "videoPlayer",
   {
     player: "Video player — Space plays, arrows seek, F fullscreen",

package/src/components/LpVideoTrim.vue

@@ -67,6 +67,44 @@ import {
   type VideoTrimErrorCause,
 } from "./videoTrim"
 
+/** Wording of the video trimmer. `{left}`, `{max}` and `{time}` are times. */
+export type VideoTrimLabels = {
+  play: string
+  pause: string
+  stepBack: string
+  stepForward: string
+  mute: string
+  unmute: string
+  zoomIn: string
+  zoomOut: string
+  zoomFit: string
+  start: string
+  end: string
+  position: string
+  length: string
+  left: string
+  overview: string
+  timeline: string
+  region: string
+  regionHint: string
+  regionClear: string
+  failed: string
+  unsupported: string
+  invalidTime: string
+  menuAt: string
+  setStart: string
+  setEnd: string
+  goStart: string
+  goEnd: string
+  zoomHere: string
+  volume: string
+  copyTime: string
+  copyFrame: string
+  copiedTime: string
+  copiedFrame: string
+  copyFailed: string
+}
+
 const props = withDefaults(
   defineProps<{
     src: string
@@ -86,14 +124,7 @@ const props = withDefaults(
     /** More items for the right-click menu, given the time it was opened at (under the pointer on the timeline, the playhead elsewhere). */
     menuItems?: (at: number) => ContextMenuItemDef[]
     disabled?: boolean
-    labels?: Partial<Record<
-      | "play" | "pause" | "stepBack" | "stepForward" | "mute" | "unmute" | "zoomIn" | "zoomOut" | "zoomFit"
-      | "start" | "end" | "position" | "length" | "left" | "overview" | "timeline"
-      | "region" | "regionHint" | "regionClear" | "failed" | "unsupported" | "invalidTime"
-      | "menuAt" | "setStart" | "setEnd" | "goStart" | "goEnd" | "zoomHere" | "volume"
-      | "copyTime" | "copyFrame" | "copiedTime" | "copiedFrame" | "copyFailed",
-      string
-    >>
+    labels?: Partial<VideoTrimLabels>
   }>(),
   { poster: undefined, range: undefined, maxClip: undefined, minClip: 0.1, region: null, frameRate: 30, labels: () => ({}) },
 )
@@ -106,7 +137,7 @@ const emit = defineEmits<{
   (e: "error", error: { cause: VideoTrimErrorCause; message: string }): void
 }>()
 
-const text = useLabels(
+const text = useLabels<VideoTrimLabels>(
   "videoTrim",
   {
     play: "Play",

package/src/components/LpWindow.vue

@@ -1,5 +1,11 @@
 <script lang="ts">
 export default { inheritAttrs: false }
+
+/** Wording of the window's controls. */
+export type WindowLabels = {
+  close: string
+  move: string
+}
 </script>
 
 <script setup lang="ts">
@@ -93,7 +99,7 @@ const props = withDefaults(
     guard?: CloseGuard
     /** Frosted glass instead of a solid panel. Unset follows `provideGlass`. */
     glass?: boolean
-    labels?: Partial<{ close: string; move: string }>
+    labels?: Partial<WindowLabels>
   }>(),
   {
     minWidth: 240,
@@ -113,7 +119,7 @@ const emit = defineEmits<{
   (e: "change", value: { rect: WindowRect; dock: WindowDock | null }): void
 }>()
 
-const text = useLabels("window", { close: "Close", move: "Move window" }, () => props.labels)
+const text = useLabels<WindowLabels>("window", { close: "Close", move: "Move window" }, () => props.labels)
 const frosted = useGlass(() => props.glass)
 const portalTo = usePortalTarget()
 const view = useView()

package/src/components/LpWorkspaceSwitcher.vue

@@ -18,22 +18,25 @@ import LpDropdownMenu, { type MenuItem } from "./LpDropdownMenu.vue"
 import LpInput from "./LpInput.vue"
 import LpModal from "./LpModal.vue"
 
+/** Wording of the workspace switcher. */
+export type WorkspaceSwitcherLabels = {
+  menu: string
+  create: string
+  duplicate: string
+  rename: string
+  remove: string
+  name: string
+  save: string
+  cancel: string
+  required: string
+}
+
 const props = defineProps<{
   workspaces: UseWorkspaces
-  labels?: Partial<{
-    menu: string
-    create: string
-    duplicate: string
-    rename: string
-    remove: string
-    name: string
-    save: string
-    cancel: string
-    required: string
-  }>
+  labels?: Partial<WorkspaceSwitcherLabels>
 }>()
 
-const text = useLabels(
+const text = useLabels<WorkspaceSwitcherLabels>(
   "workspaces",
   {
     menu: "Workspaces",

package/src/components/status.ts

@@ -35,7 +35,10 @@ export const STATUS_LOOK: Record<StatusKind, StatusLook> = {
   unknown: { tone: "neutral", pulse: false },
 }
 
-export const STATUS_LABELS: Record<StatusKind, string> = {
+/** A name for each status, as LpStatus shows and announces it. */
+export type StatusLabels = Record<StatusKind, string>
+
+export const STATUS_LABELS: StatusLabels = {
   online: "Online",
   offline: "Offline",
   degraded: "Degraded",

package/src/composables/usePaletteCommands.ts

@@ -5,6 +5,11 @@ import type { ContextMenuItemDef } from "../components/LpContextMenu.vue"
 import { provideField, useField } from "./useField"
 import { useLabels } from "./useLpConfig"
 
+/** Wording of the palette command a form control registers. */
+export type PaletteControlLabels = {
+  focus: string
+}
+
 export interface PaletteRegistration {
   commands: () => readonly Command[]
   priority: number
@@ -185,7 +190,7 @@ export function usePaletteControl(options: {
   const blocked = inject(BLOCKED, false)
   if (options.ownsChildren) suppressPaletteDiscovery()
   if (!instance || !scope || blocked) return
-  const text = useLabels("paletteControl", { focus: "Go to field" })
+  const text = useLabels<PaletteControlLabels>("paletteControl", { focus: "Go to field" })
   const field = useField()
   const settings = () => (instance.attrs.palette ?? instance.props.palette) as PaletteControlOptions | undefined
   const label = () => (settings() || {}).label ?? options.label?.() ?? field?.value.label

package/src/composables/videoTranscode.ts

@@ -0,0 +1,192 @@
+/*
+ * Re-encoding a video in the browser before it is uploaded: cut to a range,
+ * scale down, squeeze to a bitrate or a target size. WebCodecs does the work
+ * (hardware encoders where the device has them) through mediabunny, which is
+ * loaded only when a video is actually probed or encoded, so pages that never
+ * touch a video don't download it.
+ */
+import type { TimeRange } from "../components/videoTrim"
+
+export interface VideoInfo {
+  /** Seconds. */
+  duration: number
+  /** Display size, after rotation. */
+  width: number
+  height: number
+  /** Bytes of the file as given. */
+  size: number
+  hasAudio: boolean
+}
+
+export interface TranscodeVideoOptions {
+  /** `[start, end]` in seconds; the whole video when unset. */
+  range?: TimeRange | null
+  /** Scale down to this height when the video is taller; never scales up. */
+  maxHeight?: number | null
+  /** Aim the result at this many bytes; the video bitrate is derived from it. */
+  targetBytes?: number | null
+  /** Video bitrate in bits per second; ignored when `targetBytes` is set. */
+  videoBitrate?: number | null
+  /** 0..1 as encoding goes. */
+  onProgress?: (fraction: number) => void
+  /** Aborting stops the encoders and rejects with an `AbortError`. */
+  signal?: AbortSignal
+}
+
+/** Audio rate the estimate and the encoder share. */
+export const TRANSCODE_AUDIO_BITRATE = 96_000
+const MIN_VIDEO_BITRATE = 250_000
+/* Container and key-frame overhead, kept off a target so the result lands under it. */
+const TARGET_HEADROOM = 0.92
+
+const loadLib = () => import("mediabunny")
+
+/** A sensible video bitrate for a height, bits per second. */
+export function bitrateForHeight(height: number): number {
+  if (height <= 480) return 1_200_000
+  if (height <= 720) return 2_500_000
+  if (height <= 1080) return 5_000_000
+  return 8_000_000
+}
+
+/** The height the output will have: the source's, or `maxHeight` when the source is taller, always even. */
+export function outputHeight(sourceHeight: number, maxHeight?: number | null): number {
+  const height = maxHeight && sourceHeight > maxHeight ? maxHeight : sourceHeight
+  return Math.max(2, Math.round(height / 2) * 2)
+}
+
+/** Length of the clip that will be encoded, seconds. */
+export function clipLength(duration: number, range?: TimeRange | null): number {
+  if (!range) return duration
+  const start = Math.max(0, Math.min(range[0], range[1]))
+  const end = Math.min(duration, Math.max(range[0], range[1]))
+  return Math.max(0, end - start)
+}
+
+type Planned = Pick<VideoInfo, "duration" | "height" | "hasAudio"> & Partial<Pick<VideoInfo, "size">>
+
+/** The source's own video bitrate, from its size and length; null when unknown. */
+function sourceBitrate(info: Planned): number | null {
+  if (!info.size || info.duration <= 0) return null
+  const audio = info.hasAudio ? TRANSCODE_AUDIO_BITRATE : 0
+  return Math.max(MIN_VIDEO_BITRATE, Math.floor((info.size * 8) / info.duration - audio))
+}
+
+/**
+ * The video bitrate an encode will use, bits per second. Never above the
+ * source's own: re-encoding adds no detail, only bytes.
+ */
+export function plannedVideoBitrate(info: Planned, options: TranscodeVideoOptions = {}): number {
+  const length = clipLength(info.duration, options.range)
+  const ceiling = sourceBitrate(info) ?? Infinity
+  if (options.targetBytes && length > 0) {
+    const audio = info.hasAudio ? TRANSCODE_AUDIO_BITRATE : 0
+    return Math.min(ceiling, Math.max(MIN_VIDEO_BITRATE, Math.floor((options.targetBytes * 8 * TARGET_HEADROOM) / length - audio)))
+  }
+  return Math.min(ceiling, options.videoBitrate ?? bitrateForHeight(outputHeight(info.height, options.maxHeight)))
+}
+
+/** Roughly how many bytes an encode with these options will produce. */
+export function estimateTranscodedBytes(info: Planned, options: TranscodeVideoOptions = {}): number {
+  const length = clipLength(info.duration, options.range)
+  const audio = info.hasAudio ? TRANSCODE_AUDIO_BITRATE : 0
+  return Math.round(((plannedVideoBitrate(info, options) + audio) * length) / 8)
+}
+
+/** Whether this browser can encode video at all (WebCodecs with an H.264, VP9 or AV1 encoder). */
+export async function canTranscodeVideo(): Promise<boolean> {
+  if (typeof globalThis.VideoEncoder === "undefined" || typeof globalThis.VideoDecoder === "undefined") return false
+  try {
+    const lib = await loadLib()
+    return (await lib.getFirstEncodableVideoCodec(["avc", "vp9", "av1"])) !== null
+  } catch {
+    return false
+  }
+}
+
+/** Length, size and whether there is sound, read from the file's headers without decoding it. */
+export async function probeVideo(file: Blob): Promise<VideoInfo> {
+  const lib = await loadLib()
+  const input = new lib.Input({ source: new lib.BlobSource(file), formats: lib.ALL_FORMATS })
+  try {
+    const video = await input.getPrimaryVideoTrack()
+    if (!video) throw new Error("The file has no video track")
+    const [duration, width, height, audio] = await Promise.all([
+      input.computeDuration(),
+      video.getDisplayWidth(),
+      video.getDisplayHeight(),
+      input.getPrimaryAudioTrack(),
+    ])
+    return { duration, width, height, size: file.size, hasAudio: audio !== null }
+  } finally {
+    input.dispose()
+  }
+}
+
+function abortError(): DOMException {
+  return new DOMException("The video encode was aborted", "AbortError")
+}
+
+/** The file name with an `.mp4` extension, which is what comes out. */
+export function transcodedName(name: string): string {
+  const dot = name.lastIndexOf(".")
+  return `${dot > 0 ? name.slice(0, dot) : name || "video"}.mp4`
+}
+
+/**
+ * An MP4 with the range cut out, scaled down to `maxHeight` and encoded at the
+ * planned bitrate. Sound is kept and re-encoded (AAC, or Opus where the
+ * browser has no AAC encoder); a browser that can encode neither the picture
+ * nor the sound rejects instead of returning a silent or broken file.
+ */
+export async function transcodeVideo(file: File, options: TranscodeVideoOptions = {}): Promise<File> {
+  if (options.signal?.aborted) throw abortError()
+  const lib = await loadLib()
+  const info = await probeVideo(file)
+  const height = outputHeight(info.height, options.maxHeight)
+  const width = Math.max(2, Math.round((info.width * height) / info.height / 2) * 2)
+  const bitrate = plannedVideoBitrate(info, options)
+  const videoCodec = await lib.getFirstEncodableVideoCodec(["avc", "vp9", "av1"], { width, height, quality: new lib.Quality({ bitrate }) })
+  if (!videoCodec) throw new Error("This browser can't encode video of this size")
+  const audioCodec = info.hasAudio ? await lib.getFirstEncodableAudioCodec(["aac", "opus"], { quality: new lib.Quality({ bitrate: TRANSCODE_AUDIO_BITRATE }) }) : null
+  if (info.hasAudio && !audioCodec) throw new Error("This browser can't encode this video's sound")
+
+  const input = new lib.Input({ source: new lib.BlobSource(file), formats: lib.ALL_FORMATS })
+  const target = new lib.BufferTarget()
+  const output = new lib.Output({ format: new lib.Mp4OutputFormat({ fastStart: "in-memory" }), target })
+  try {
+    const range = options.range ?? null
+    const conversion = await lib.Conversion.init({
+      input,
+      output,
+      trim: range ? { start: Math.min(range[0], range[1]), end: Math.max(range[0], range[1]) } : undefined,
+      video: {
+        height: height === info.height ? undefined : height,
+        codec: videoCodec,
+        quality: new lib.Quality({ bitrate }),
+        forceTranscode: true,
+      },
+      audio: audioCodec ? { codec: audioCodec, quality: new lib.Quality({ bitrate: TRANSCODE_AUDIO_BITRATE }) } : { discard: true },
+    })
+    if (!conversion.isValid) {
+      const reasons = conversion.discardedTracks.map((t) => t.reason).join(", ")
+      throw new Error(`This video can't be re-encoded here (${reasons || "unknown reason"})`)
+    }
+    const onAbort = () => void conversion.cancel()
+    options.signal?.addEventListener("abort", onAbort, { once: true })
+    conversion.onProgress = (progress) => options.onProgress?.(progress)
+    try {
+      await conversion.execute()
+    } catch (error) {
+      if (options.signal?.aborted) throw abortError()
+      throw error
+    } finally {
+      options.signal?.removeEventListener("abort", onAbort)
+    }
+    if (!target.buffer) throw new Error("The encoder produced no file")
+    options.onProgress?.(1)
+    return new File([target.buffer], transcodedName(file.name), { type: "video/mp4", lastModified: Date.now() })
+  } finally {
+    input.dispose()
+  }
+}