msichterman

//// TYPESCRIPT ENUMS EXPLAINED

// Outcome of Matt Pocock's video titled "Enums considered harmful" – https://youtu.be/YmxwicpROps

// Follow along with the TypeScript Playground: https://url.msich.dev/ts-enums-pg

/* Challenges of TypeScript built-in enums
    - Enums are not native to JavaScript
    - Enums behave a little bit unpredictibly at runtime
    - Const enums have a lot of pitfalls

msichterman

Matt's Mega-Nerd Learning Path

Free Resources

Resource	Description
Beginner's TypeScript	Get hands-on interactive TypeScript practice and learn the foundational knowledge and skills you need to become a TypeScript Wizard.
Zod	Gain hands-on practice with Zod by working through a series of exercises that demonstrate how useful runtime type checking is.

msichterman

if (process.env.NODE_ENV !== "production" && !isServerSideRendered()) {
  const axeConfig = {
    rules: [],
  };
  import("react-dom").then((ReactDOM) => {
    import("@axe-core/react").then((axe) => {
      axe.default(React, ReactDOM, 1000, axeConfig);
    });
  });
}

msichterman

export function pickBy<T>(object: T, predicate: (arg: unknown) => boolean) {
  const obj: T = {} as T;
  for (const key in object) {
    if (predicate(object[key])) {
      obj[key] = object[key];
    }
  }
  return obj;
}

msichterman

// https://stackoverflow.com/a/69288824

export type Expand<T> = T extends (...args: infer A) => infer R
  ? (...args: Expand<A>) => Expand<R>
  : T extends infer O
  ? { [K in keyof O]: O[K] }
  : never;

export type ExpandRecursively<T> = T extends (...args: infer A) => infer R
  ? (...args: ExpandRecursively<A>) => ExpandRecursively<R>

msichterman

"use client";

import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import { Expand, Loader2, RotateCcw, Trash2, UploadCloud } from "lucide-react";

msichterman

/**
 * Generates thumbnails on demand to show as video previews
 * @param videoUrl - the S3 video url
 * @returns "blob:" url to the first video frame
 */
const getVideoThumbnail = async (videoUrl: string) => {
  return new Promise<string>((resolve, reject) => {
    const video = document.createElement("video");
    video.crossOrigin = "anonymous";
    video.src = videoUrl;