import React from "react";
import { DraggableVideo } from "components/draggable_video";
import { upload } from "@canva/asset";

export function App() {
  return (
    <DraggableVideo
      mimeType="video/mp4"
      durationInSeconds={7}
      thumbnailImageSrc="https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg"
      thumbnailVideoSrc="https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4"
      resolveVideoRef={() => {
        return upload({
          type: "VIDEO",
          mimeType: "video/mp4",
          url: "https://www.canva.dev/example-assets/video-import/video.mp4",
          thumbnailImageUrl:
            "https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg",
          thumbnailVideoUrl:
            "https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4",
        });
      }}
    />
  );
}

tsx

Props

#mimeTypestring

Required

The MIME type of the full-size video file.

The supported MIME types include:

"video/avi"
"image/gif"
"video/x-m4v"
"video/x-matroska"
"video/quicktime"
"video/mp4"
"video/mpeg"
"video/webm"

#resolveVideoReffunction

Required

A function that returns the result of the upload method.

#thumbnailImageSrcstring

Required

A thumbnail image to display in the object panel of the Canva editor.

#thumbnailVideoSrcstring

Optional

A low-resolution version of the full video with a maximum duration of 10 seconds. This can be omitted when the mimeType is "video/gif".

#durationnumber

Optional

The duration of the full video, in seconds.

#widthnumber

Optional

The width of the thumbnail, in pixels.

#heightnumber

Optional

The height of the thumbnail, in pixels.

#previewSrcstring

Optional

The URL or data URL of the image to use for the drag preview. This image will appear under the user's cursor as they during the drag event.

If omitted, thumbnailImageSrc will be used as a fallback.

#previewSizeobject

Optional

The dimensions of the drag preview. The dimensions should have the same aspect ratio as the full-size video.

If omitted, the width and height will be used as a fallback.

#previewSize.widthnumber

Required

The width of the drag preview, in pixels.

#previewSize.heightnumber

Required

The height of the drag preview, in pixels.

#fullSizeobject

Optional

The dimensions of the full-size video, in pixels.

If omitted, the dimensions of the drag preview will be used.

#fullSize.widthnumber

Required

The width of the full-size video, in pixels.

#fullSize.heightnumber

Required

The height of the full-size video, in pixels.