React

Properties

VideoData properties can be found VideoData.

ImageProperties properties can be found ImageProperties.

Prop	Type	Description	Optional
video	VideoData	The video data object.	✅
image	ImageProperties	The image object.	✅

Asset Examples

Image

import { Asset } from '@tmedxp/aem-react-components';

const AssetImageExample = () => (
  <Asset
    image={{
      altText: 'Sample Toyota vehicle image',
      enableHoverZoom: true,
      smartCropSelection: 'Landscape',
      clickBehaviour: 'default',
      className: 'my-custom-image-class',
      aspectRatio: 'is-9-16',
      decorative: false,
      lazyloadEnabled: false,
      damMetadata: {
        assetState: 'processed',
        type: 'Image',
        path: 'toyotaeuropetest/Hero-Image-2-3',
        domain: 'https://scene7.toyota.eu/',
        folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
        title: 'Hero-Image-2-3',
        fileStatus: 'PublishComplete',
        status: 'Finished',
        altText: 'Alt',
        altLanguages: [],
        publishTimeStamp: 1_765_969_735_882,
        scene7FileAvs: '',
        fileReference:
          '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
      },
    }}
  />
);

export { AssetImageExample };

Dam Video

import { Asset } from '@tmedxp/aem-react-components';

const DamVideo = () => (
  <Asset
    video={{
      type: 'DAM Video',
      overlayTitle: 'Title',
      externalVideo: {
        youtubeId: null,
        youtubeAutoplay: false,
        vimeoId: null,
        vimeoAutoplay: false,
        cookieVimeo: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        cookieYoutube: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        startTime: 0,
      },
      thumbnail: {
        assetState: 'processed',
        type: 'Image',
        path: 'toyotaeuropetest/Hero-Image-2-3',
        domain: 'https://scene7.toyota.eu/',
        folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
        title: 'Hero-Image-2-3',
        fileStatus: 'PublishComplete',
        status: 'Finished',
        altText: 'Alt',
        altLanguages: [],
        publishTimeStamp: 1_765_969_735_882,
        scene7FileAvs: '',
        fileReference:
          '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
      },
      damVideo: {
        dynamicEncodes: 'Encodes',
        altText: 'Alt',
        autoplay: true,
        loop: true,
        trackSrc: '/content/dam/subtitles/sample_sv.vtt',
        assetMetadata: {
          assetState: 'processed',
          type: 'Video',
          path: 'toyotaeuropetest/test-1-1',
          domain: 'https://scene7.toyota.eu/',
          folder: 'toyotaeuropetest/video-test/',
          title: 'test-1-1',
          fileStatus: 'PublishComplete',
          status: 'Finished',
          altText: '',
          altLanguages: [],
          publishTimeStamp: 1_765_969_735_882,
          scene7FileAvs: 'toyotaeuropetest/test-1-1-AVS',
          fileReference: '/content/dam/video-test/test-1.mp4',
        },
        decorative: false,
      },
    }}
  />
);

export { DamVideo };