@maas/payload-plugin-mux/dist/fields/index.js

> [!CAUTION] > > # This plugin is not ready for production use! > > This plugin is under experimental development and is not yet ready for production use. It is intended for testing and feedback purposes only. Please use it at your own risk and be aware t

'use client'

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};

// src/fields/mux-uploader/mux-uploader.tsx
import { useEffect, useState, useCallback } from "react";
import MuxPlayer from "@mux/mux-player-react";
import MuxUploader from "@mux/mux-uploader-react";
import { useForm, useFormFields } from "@payloadcms/ui";
import "../mux-uploader-OOUG5LFU.scss";
import { jsx, jsxs } from "react/jsx-runtime";
var MuxUploaderField = () => {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);
  const [uploadId, setUploadId] = useState("");
  const { assetId, setAssetId, setFile, playbackId } = useFormFields(
    ([fields, dispatch]) => ({
      assetId: fields.assetId,
      setAssetId: (assetId2) => dispatch({ type: "UPDATE", path: "assetId", value: assetId2 }),
      file: fields.file,
      setFile: (file) => dispatch({ type: "UPDATE", path: "file", value: file }),
      playbackId: fields.playbackId
    })
  );
  const { submit, setProcessing } = useForm();
  const getSignedUrl = useCallback(() => __async(void 0, null, function* () {
    const { id, url } = yield (yield fetch(`/api/_mux/upload`, {
      method: "post"
    })).json();
    setUploadId(id);
    return url;
  }), []);
  const onUploadStart = (evt) => {
    const { file } = evt.detail;
    setFile(
      new File([], file.name, {
        type: file.type,
        lastModified: file.lastModified
      })
    );
  };
  const onSuccess = () => __async(void 0, null, function* () {
    setProcessing(true);
    let upload = yield (yield fetch(`/api/_mux/upload?id=${uploadId}`, { method: "get" })).json();
    while (!upload.asset_id) {
      yield new Promise((resolve) => setTimeout(resolve, 1e3));
      upload = yield (yield fetch(`/api/_mux/upload?id=${uploadId}`, { method: "get" })).json();
    }
    const { asset_id } = upload;
    setAssetId(asset_id);
    setTimeout(() => __async(void 0, null, function* () {
      yield submit({
        overrides: {
          assetId: asset_id
        }
      });
    }), 0);
  });
  useEffect(() => {
    if (typeof window !== "undefined") {
      const fileField = document.querySelector(".file-field");
      if (fileField) {
        fileField.style.display = "none";
      }
    }
  }, []);
  const muxAssetId = assetId == null ? void 0 : assetId.value;
  const muxPlaybackId = playbackId == null ? void 0 : playbackId.value;
  return /* @__PURE__ */ jsxs("div", { className: "mux-uploader", children: [
    !muxAssetId && /* @__PURE__ */ jsx(
      MuxUploader,
      {
        endpoint: getSignedUrl,
        onUploadStart,
        onSuccess
      }
    ),
    muxAssetId && !muxPlaybackId && /* @__PURE__ */ jsx("div", { className: "mux-uploader__processing", children: "Video is being encoded. This typically takes less than 90 seconds, please refresh the page in a moment" }),
    muxPlaybackId && isClient && /* @__PURE__ */ jsx(
      MuxPlayer,
      {
        playbackId: muxPlaybackId,
        streamType: "on-demand",
        style: { height: "60vh" }
      }
    )
  ] });
};
export {
  MuxUploaderField
};