App UI Kit

Getting started

Overview Quickstart Playroom⁠(opens in a new tab or window)Changelog

Design tokens

Overview Colors Shadows Spacing Transitions Units

Components

Patterns

Credit Counter⁠(opens in a new tab or window)Empty State⁠(opens in a new tab or window)Flyout⁠(opens in a new tab or window)Loading Progress Bar⁠(opens in a new tab or window)Search⁠(opens in a new tab or window)Surface Header⁠(opens in a new tab or window)

App UI Kit

DraggableVideo

API reference for the DraggableVideo component.

The DraggableVideo component has been deprecated. Instead, use the VideoCard⁠(opens in a new tab or window) component.

Usage

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

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.