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",
          aiDisclosure: "none",
        });
      }}
    />
  );
}

TSX

Props

mimeTypestringRequired

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"

resolveVideoReffunctionRequired

A function that returns the result of the upload method.

thumbnailImageSrcstringRequired

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

thumbnailVideoSrcstringOptional

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".

durationnumberOptional

The duration of the full video, in seconds.

widthnumberOptional

The width of the thumbnail, in pixels.

heightnumberOptional

The height of the thumbnail, in pixels.

previewSrcstringOptional

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.

previewSizeobjectOptional

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.widthnumberRequired

The width of the drag preview, in pixels.

previewSize.heightnumberRequired

The height of the drag preview, in pixels.

fullSizeobjectOptional

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

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

fullSize.widthnumberRequired

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

fullSize.heightnumberRequired

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