@mirrormedia/lilith-draft-editor/lib/website/mirrordaily/selector/video-uploader.js

## Installation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.VideoUploader = VideoUploader;

var _apollo = require("@keystone-6/core/admin-ui/apollo");

var _react = _interopRequireWildcard(require("react"));

var _fileConvert = require("../utils/file-convert");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _button = require("@keystone-ui/button");

var _modals = require("@keystone-ui/modals");

var _lodash = _interopRequireDefault(require("lodash"));

var _fields = require("@keystone-ui/fields");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const videoMutation = (0, _apollo.gql)`
  mutation AddVideo($data: VideoCreateInput!) {
    video: createVideo(data: $data) {
      id
      name
      videoSrc
      youtubeUrl
      file {
        filename
        filesize
        url
      }
      heroImage {
        id
        name
        imageFile {
          url
        }
        resized {
          original
        }
      }
    }
  }
`;
const CustomButton = (0, _styledComponents.default)(_button.Button)`
  margin: 10px 0;
`;
const HiddenInput = _styledComponents.default.input`
  display: none;
`;
const VideoWrapper = _styledComponents.default.div`
  overflow: auto;
  margin-top: 10px;
`;
const Video = _styledComponents.default.video`
  width: 100%;
  aspect-ratio: 2;
  object-fit: contain;
`;
const VideoName = _styledComponents.default.p`
  text-align: center;
`;
const Label = _styledComponents.default.label`
  display: block;
  margin: 10px 0;
  font-weight: 600;
`;
const HintWrapper = _styledComponents.default.div`
  margin: 10px 0;
`;

const AddVideo = ({
  onAddVideo
}) => {
  const inputRef = (0, _react.useRef)(null);

  const inputChangeHandler = async event => {
    const files = event.target.files;
    event.target.files = null;
    if (!files) return;
    const videoFiles = await (0, _fileConvert.convertFilesToVideoData)(files);
    onAddVideo(videoFiles[0]);
  };

  const onUploadButton = () => {
    var _inputRef$current;

    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
  };

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CustomButton, {
    onClick: onUploadButton
  }, "\u65B0\u589E\u5F71\u7247"), /*#__PURE__*/_react.default.createElement(HiddenInput, {
    type: "file",
    multiple: false,
    accept: "video/*",
    ref: inputRef,
    onChange: inputChangeHandler
  }));
};

function VideoUploader({
  onChange
}) {
  const [file, setFile] = (0, _react.useState)();
  const [addVideo, {
    data: uploadData,
    loading: uploadLoading,
    error: uploadError
  }] = (0, _apollo.useMutation)(videoMutation);

  const onAddVideo = file => {
    setFile(file);
  };

  const onVideoNameChange = e => {
    if (!file) return;
    setFile({ ...file,
      name: e.target.value
    });
  };

  const onConfirm = async () => {
    if (!file) return onChange();
    const data = { ...file,
      file: await (0, _fileConvert.convertStringToFile)(file.blobURL, file.name, file.type)
    };
    addVideo({
      variables: {
        data: {
          name: data.name,
          file: {
            upload: data.file
          }
        }
      }
    });
  };

  (0, _react.useEffect)(() => {
    if (uploadData !== null && uploadData !== void 0 && uploadData.video) {
      onChange(uploadData.video);
    }
  }, [uploadData, onChange]);
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
    isOpen: true
  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
    title: "Upload images",
    actions: {
      cancel: {
        label: 'Cancel',
        action: () => {
          onChange();
        }
      },
      confirm: {
        label: 'Confirm',
        action: onConfirm
      }
    },
    width: "narrow"
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(AddVideo, {
    onAddVideo: onAddVideo
  }), file && /*#__PURE__*/_react.default.createElement(VideoWrapper, null, /*#__PURE__*/_react.default.createElement(Video, {
    src: file === null || file === void 0 ? void 0 : file.blobURL,
    muted: true,
    loop: true,
    controls: true,
    autoPlay: true
  }), /*#__PURE__*/_react.default.createElement(Label, {
    htmlFor: "name"
  }, "Video Name"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
    id: "name",
    type: "text",
    defaultValue: file.name,
    onChange: _lodash.default.debounce(onVideoNameChange)
  }), /*#__PURE__*/_react.default.createElement(VideoName, null, file.name)), uploadLoading && /*#__PURE__*/_react.default.createElement(HintWrapper, null, "loading"), uploadError && /*#__PURE__*/_react.default.createElement(HintWrapper, null, uploadError.message))));
}