:dragon_face: Dragonfly V (Vimeo)

Dragonfly is a component to parse Vimeo storyboard JSON and display them as they will be rendered.

:cyclone: Local Development

After having cloned the repository, you can initialize all the libraries you need by using these commands

npm install -g yarn
yarn install
cd server
yarn install
cd ..
yarn start

:eyeglasses: Tests

yarn test

:star2: Usage

To create a Dragonfly instance

import Dragonfly from 'dragonfly-v'

<Dragonfly
	storyboard={storyboard}
/>

To change Dragonfly current time

const dragonflyRef = useRef(null);

useEffect(() => {
	dragonflyRef.current.seek(2) // 2 seconds
}, []);

<Dragonfly
	ref={dragonflyRef}
	storyboard={storyboard}
/>

To Play / Pause the Dragonfly

const dragonflyRef = useRef(null);

useEffect(() => {
	dragonflyRef.current.play() // play DF
	// or
	dragonflyRef.current.pause() // pause DF
}, []);

<Dragonfly
	ref={dragonflyRef}
	storyboard={storyboard}
/>

| Prop | Type | Default Value | Notes | | ------------------- | --------- | ------------- | ----------------------------------------------------------------- | | storyboard | JSON | | | compositionOverride | Object | {} | { [elementId]: { rect / userRect, etc.} } - overrides composition | | animationsMetadata | Object | null | Animation metadata with animationId key | | loop | Boolean | false | Will start playing again when reaching duration/endTime | | startTime | Number | 0 | Absolute time in storyboard to start playing - ms | | endTime | number | duration | Absolute time in storyboard to finish playing - ms | | preloadMedia | Boolean | false | When passed, pre-loads the clip's media | | volume | number | 0 | Sets the audio volume of all of the audio elements. | | isSoundtrackEnabled | Boolean | false | Enable / Disable the clip's soundtrack | | isShowLogs | Boolean | false | Enable / Disable logs in the console | | isShowHiddenScenes | Boolean | false | Enable / Disable hidden elements / scenes | | isPosterMode | Boolean | false | Enable / Disable posterMode (show all elements for scene) | | isPlayMode | Boolean | true | Enable / Disable playing capability (webworker) | | isAssumeFontsLoaded | Boolean | false | Enable / Disable font files loading | | fontFamilyDecorator | Function | null | (fontName) => fontFamilyOf(fontName) | | loader | ReactNode | null | React component of the loader |

:nut_and_bolt: Element Types

| Element Type | Notes | | ------------- | ---------------------------------------------------- | | MediaElement | Video / Image Element | | LottieElement | Data / Text Element, those are Lottie based elements |

:sparkles: Events

To register and event use

<Dragonfly
	onLoad={() => ...}
	onTimeUpdate={() => ...}
	onEnded={() => ...}
	onPause={() => ...}
	onLoadedMetadata={(data) => ...}
	...
/>

| Prop | Returned Data | | ---------------- | ---------------------------------------- | | onLoad | | | onTimeUpdate | currentTime in seconds | | onEnded | | | onPause | currentTime in seconds | | onPlay | currentTime in seconds | | onLoadedMetadata | { duration } | | onProgress | { id: string, target: HTMLVideoElement } |

To use Dragonfly duration metadata

const [duration, setDuration] = useState(0);

<Dragonfly
	onLoadedMetadata={(data) => { setDuration(data.duration); }}
/>

:crayon: Fonts

• In order for fonts to load, DF must run on one of the following domains:

vimeo.com, *.vimeo.com, *.test.magisto.com, *.ci.vimeows.com,  magisto.com, local.cdn.magisto.com, *.magisto.com

:construction: Missing Features

• Drop shadow for "Cut out" text animation
• Highlighting for "Cut Out" text animtion

:point_right: Branching

${sections}/${task}-${ticketId}

media/crop-support-EWK-53

general/update-readme-EWK-84

:rocket: Deployment

This repository uses CICD to deploy to production. For every commit to master a new version of dragonfly-v npm package will be created

:couple: Local dev with Editor

• Go to DF project and run npm run link
• Go to Editor project package.json and remove "previmeo.dev": "npm i"
• In Editor project run npm link dragonfly-v
• In Editor project run npm run vimeo.dev
• Yay! now you can access all DF files inside editor project :)