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/ts";

// 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 = await 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://www.mux.com/docs/webhook-reference
    default:
      break;
  }

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

// npm install @videojs/react @videojs/mux-video @videojs/mux-data
import '@videojs/react/video/skin.css';
import { VideoPlayer, VideoSkin } from '@videojs/react/video';
import { MuxVideo } from '@videojs/react/media/mux-video';
import { MuxData } from '@videojs/react/extensions/mux-data';
import { json } from '@remix-run/node';
import { useLoaderData, useParams } from '@remix-run/react';

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

export default function Page() {
  const { title, userId } = useLoaderData();
  const { playbackId } = useParams();
  return (
    <VideoPlayer>
      <VideoSkin style={{ width: '100%', aspectRatio: '16 / 9' }}>
        <MuxVideo source={{ playbackId }} playsInline crossOrigin="anonymous" />
        <MuxData
          metadata={{
            video_title: title,
            viewer_user_id: userId,
          }}
        />
      </VideoSkin>
    </VideoPlayer>
  );
}