media-utils

1import type { CSSProperties } from "react";
2 
3export type MediaFit = "cover" | "contain";
4 
5export type MediaItem = {
6  src: string;
7  title?: string;
8  caption?: string;
9  durationInFrames?: number;
10  fit?: MediaFit;
11  backgroundColor?: string;
12};
13 
14export type MediaWindow = MediaItem & {
15  from: number;
16  durationInFrames: number;
17  index: number;
18};
19 
20export function getMediaObjectFitStyle(
21  fit: MediaFit = "cover",
22): CSSProperties {
23  return {
24    width: "100%",
25    height: "100%",
26    objectFit: fit,
27    display: "block",
28  };
29}
30 
31export function resolveMediaWindows(
32  items: MediaItem[],
33  defaultDurationInFrames = 90,
34): MediaWindow[] {
35  let cursor = 0;
36 
37  return items.map((item, index) => {
38    const durationInFrames =
39      item.durationInFrames ?? defaultDurationInFrames;
40    const window = {
41      ...item,
42      from: cursor,
43      durationInFrames,
44      index,
45    };
46    cursor += durationInFrames;
47    return window;
48  });
49}
50 
51export function getTotalMediaDuration(
52  items: MediaItem[],
53  defaultDurationInFrames = 90,
54): number {
55  return resolveMediaWindows(items, defaultDurationInFrames).reduce(
56    (total, item) => total + item.durationInFrames,
57    0,
58  );
59}
60 
61export function isVideoSource(src: string): boolean {
62  return /\.(mp4|mov|webm|m4v)(\?|#|$)/i.test(src);
63}