Add high-performance video to your Remix.js application

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import MuxUploader from "@mux/mux-uploader-react";
import mux from "~/lib/mux.server";

export const loader = async () => {
  const upload = await mux.video.uploads.create({
    new_asset_settings: {
      playback_policy: ["public"],
      video_quality: "basic",
    },
    cors_origin: "*",
  });
  return json({ url: upload.url });
};

export default function UploadPage() {
  const { url } = useLoaderData();
  return <MuxUploader endpoint={url} />
}

import { json } from "@remix-run/node";
import Mux from "@mux/mux-node";

// this reads your MUX_TOKEN_ID and MUX_TOKEN_SECRET
// from your environment variables
// https://dashboard.mux.com/settings/access-tokens
const mux = new Mux();

// Mux webhooks POST, so let's use an action
export const action = async ({ request }) => {
  if (request.method !== "POST") {
    return new Response("Method not allowed", { status: 405 });
  }

  const body = await request.text();
  // mux.webhooks.unwrap will validate that the given payload was sent by Mux and parse the payload.
  // It will also provide type-safe access to the payload.
  // Generate MUX_WEBHOOK_SIGNING_SECRET in the Mux dashboard
  // https://dashboard.mux.com/settings/webhooks
  const event = mux.webhooks.unwrap(
    body,
    request.headers,
    process.env.MUX_WEBHOOK_SIGNING_SECRET
  );

  // you can also unwrap the payload yourself:
  // const event = await request.json();
  switch (event.type) {
    case "video.upload.asset_created":
      // we might use this to know that an upload has been completed
      // and we can save its assetId to our database
      break;
    case "video.asset.ready":
      // we might use this to know that a video has been encoded
      // and we can save its playbackId to our database
      break;
    // there are many more Mux webhook events
    // check them out at https://docs.mux.com/webhook-reference
    default:
      break;
  }

  return json({ message: "ok" });
};

import MuxPlayer from "@mux/mux-player-react";
import { useLoaderData, useParams } from "@remix-run/react";

export const loader = async ({ params, request }) => {
  const { title } = getAssetFromDatabase(params);
  const userId = getUser(request);
  return json({ title, userId });
};

export default function Page() {
  const { title, userId } = useLoaderData();
  const { playbackId } = useParams();
  return (
    <MuxPlayer
      playbackId={playbackId}
      metadata={{
        video_title: title,
        viewer_user_id: userId
      }}
    />
  );
}