Dragonfly-v NPM

: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 :)

@babel/polyfill bezier-easing lodash styled-components use-deep-compare wibbitz-lottie-web

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago