Kismet Hasanaj
654 lines
22 KiB
JavaScript
654 lines
22 KiB
JavaScript
import lottie from 'lottie-web';
|
|
export { default as LottiePlayer } from 'lottie-web';
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
|
|
function _arrayLikeToArray(r, a) {
|
|
(null == a || a > r.length) && (a = r.length);
|
|
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
return n;
|
|
}
|
|
function _arrayWithHoles(r) {
|
|
if (Array.isArray(r)) return r;
|
|
}
|
|
function _defineProperty(e, r, t) {
|
|
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
value: t,
|
|
enumerable: !0,
|
|
configurable: !0,
|
|
writable: !0
|
|
}) : e[r] = t, e;
|
|
}
|
|
function _iterableToArrayLimit(r, l) {
|
|
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
if (null != t) {
|
|
var e,
|
|
n,
|
|
i,
|
|
u,
|
|
a = [],
|
|
f = !0,
|
|
o = !1;
|
|
try {
|
|
if (i = (t = t.call(r)).next, 0 === l) {
|
|
if (Object(t) !== t) return;
|
|
f = !1;
|
|
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
} catch (r) {
|
|
o = !0, n = r;
|
|
} finally {
|
|
try {
|
|
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
} finally {
|
|
if (o) throw n;
|
|
}
|
|
}
|
|
return a;
|
|
}
|
|
}
|
|
function _nonIterableRest() {
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
}
|
|
function ownKeys(e, r) {
|
|
var t = Object.keys(e);
|
|
if (Object.getOwnPropertySymbols) {
|
|
var o = Object.getOwnPropertySymbols(e);
|
|
r && (o = o.filter(function (r) {
|
|
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
})), t.push.apply(t, o);
|
|
}
|
|
return t;
|
|
}
|
|
function _objectSpread2(e) {
|
|
for (var r = 1; r < arguments.length; r++) {
|
|
var t = null != arguments[r] ? arguments[r] : {};
|
|
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
|
_defineProperty(e, r, t[r]);
|
|
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
});
|
|
}
|
|
return e;
|
|
}
|
|
function _objectWithoutProperties(e, t) {
|
|
if (null == e) return {};
|
|
var o,
|
|
r,
|
|
i = _objectWithoutPropertiesLoose(e, t);
|
|
if (Object.getOwnPropertySymbols) {
|
|
var s = Object.getOwnPropertySymbols(e);
|
|
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
|
}
|
|
return i;
|
|
}
|
|
function _objectWithoutPropertiesLoose(r, e) {
|
|
if (null == r) return {};
|
|
var t = {};
|
|
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
if (e.includes(n)) continue;
|
|
t[n] = r[n];
|
|
}
|
|
return t;
|
|
}
|
|
function _slicedToArray(r, e) {
|
|
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
}
|
|
function _toPrimitive(t, r) {
|
|
if ("object" != typeof t || !t) return t;
|
|
var e = t[Symbol.toPrimitive];
|
|
if (void 0 !== e) {
|
|
var i = e.call(t, r || "default");
|
|
if ("object" != typeof i) return i;
|
|
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
}
|
|
return ("string" === r ? String : Number)(t);
|
|
}
|
|
function _toPropertyKey(t) {
|
|
var i = _toPrimitive(t, "string");
|
|
return "symbol" == typeof i ? i : i + "";
|
|
}
|
|
function _unsupportedIterableToArray(r, a) {
|
|
if (r) {
|
|
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
var t = {}.toString.call(r).slice(8, -1);
|
|
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
}
|
|
}
|
|
|
|
var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
|
|
var useLottie = function useLottie(props, style) {
|
|
var animationData = props.animationData,
|
|
loop = props.loop,
|
|
autoplay = props.autoplay,
|
|
initialSegment = props.initialSegment,
|
|
onComplete = props.onComplete,
|
|
onLoopComplete = props.onLoopComplete,
|
|
onEnterFrame = props.onEnterFrame,
|
|
onSegmentStart = props.onSegmentStart,
|
|
onConfigReady = props.onConfigReady,
|
|
onDataReady = props.onDataReady,
|
|
onDataFailed = props.onDataFailed,
|
|
onLoadedImages = props.onLoadedImages,
|
|
onDOMLoaded = props.onDOMLoaded,
|
|
onDestroy = props.onDestroy;
|
|
props.lottieRef;
|
|
props.renderer;
|
|
props.name;
|
|
props.assetsPath;
|
|
props.rendererSettings;
|
|
var rest = _objectWithoutProperties(props, _excluded$1);
|
|
var _useState = useState(false),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
animationLoaded = _useState2[0],
|
|
setAnimationLoaded = _useState2[1];
|
|
var animationInstanceRef = useRef();
|
|
var animationContainer = useRef(null);
|
|
/*
|
|
======================================
|
|
INTERACTION METHODS
|
|
======================================
|
|
*/
|
|
/**
|
|
* Play
|
|
*/
|
|
var play = function play() {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
};
|
|
/**
|
|
* Stop
|
|
*/
|
|
var stop = function stop() {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();
|
|
};
|
|
/**
|
|
* Pause
|
|
*/
|
|
var pause = function pause() {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
|
};
|
|
/**
|
|
* Set animation speed
|
|
* @param speed
|
|
*/
|
|
var setSpeed = function setSpeed(speed) {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);
|
|
};
|
|
/**
|
|
* Got to frame and play
|
|
* @param value
|
|
* @param isFrame
|
|
*/
|
|
var goToAndPlay = function goToAndPlay(value, isFrame) {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);
|
|
};
|
|
/**
|
|
* Got to frame and stop
|
|
* @param value
|
|
* @param isFrame
|
|
*/
|
|
var goToAndStop = function goToAndStop(value, isFrame) {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);
|
|
};
|
|
/**
|
|
* Set animation direction
|
|
* @param direction
|
|
*/
|
|
var setDirection = function setDirection(direction) {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);
|
|
};
|
|
/**
|
|
* Play animation segments
|
|
* @param segments
|
|
* @param forceFlag
|
|
*/
|
|
var playSegments = function playSegments(segments, forceFlag) {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);
|
|
};
|
|
/**
|
|
* Set sub frames
|
|
* @param useSubFrames
|
|
*/
|
|
var setSubframe = function setSubframe(useSubFrames) {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);
|
|
};
|
|
/**
|
|
* Get animation duration
|
|
* @param inFrames
|
|
*/
|
|
var getDuration = function getDuration(inFrames) {
|
|
var _a;
|
|
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);
|
|
};
|
|
/**
|
|
* Destroy animation
|
|
*/
|
|
var destroy = function destroy() {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
// Removing the reference to the animation so separate cleanups are skipped.
|
|
// Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
|
|
animationInstanceRef.current = undefined;
|
|
};
|
|
/*
|
|
======================================
|
|
LOTTIE
|
|
======================================
|
|
*/
|
|
/**
|
|
* Load a new animation, and if it's the case, destroy the previous one
|
|
* @param {Object} forcedConfigs
|
|
*/
|
|
var loadAnimation = function loadAnimation() {
|
|
var forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
var _a;
|
|
// Return if the container ref is null
|
|
if (!animationContainer.current) {
|
|
return;
|
|
}
|
|
// Destroy any previous instance
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
// Build the animation configuration
|
|
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {
|
|
container: animationContainer.current
|
|
});
|
|
// Save the animation instance
|
|
animationInstanceRef.current = lottie.loadAnimation(config);
|
|
setAnimationLoaded(!!animationInstanceRef.current);
|
|
// Return a function that will clean up
|
|
return function () {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
animationInstanceRef.current = undefined;
|
|
};
|
|
};
|
|
/**
|
|
* (Re)Initialize when animation data changed
|
|
*/
|
|
useEffect(function () {
|
|
var onUnmount = loadAnimation();
|
|
// Clean up on unmount
|
|
return function () {
|
|
return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [animationData, loop]);
|
|
// Update the autoplay state
|
|
useEffect(function () {
|
|
if (!animationInstanceRef.current) {
|
|
return;
|
|
}
|
|
animationInstanceRef.current.autoplay = !!autoplay;
|
|
}, [autoplay]);
|
|
// Update the initial segment state
|
|
useEffect(function () {
|
|
if (!animationInstanceRef.current) {
|
|
return;
|
|
}
|
|
// When null should reset to default animation length
|
|
if (!initialSegment) {
|
|
animationInstanceRef.current.resetSegments(true);
|
|
return;
|
|
}
|
|
// If it's not a valid segment, do nothing
|
|
if (!Array.isArray(initialSegment) || !initialSegment.length) {
|
|
return;
|
|
}
|
|
// If the current position it's not in the new segment
|
|
// set the current position to start
|
|
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
|
|
animationInstanceRef.current.currentRawFrame = initialSegment[0];
|
|
}
|
|
// Update the segment
|
|
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
|
|
}, [initialSegment]);
|
|
/*
|
|
======================================
|
|
EVENTS
|
|
======================================
|
|
*/
|
|
/**
|
|
* Reinitialize listener on change
|
|
*/
|
|
useEffect(function () {
|
|
var partialListeners = [{
|
|
name: "complete",
|
|
handler: onComplete
|
|
}, {
|
|
name: "loopComplete",
|
|
handler: onLoopComplete
|
|
}, {
|
|
name: "enterFrame",
|
|
handler: onEnterFrame
|
|
}, {
|
|
name: "segmentStart",
|
|
handler: onSegmentStart
|
|
}, {
|
|
name: "config_ready",
|
|
handler: onConfigReady
|
|
}, {
|
|
name: "data_ready",
|
|
handler: onDataReady
|
|
}, {
|
|
name: "data_failed",
|
|
handler: onDataFailed
|
|
}, {
|
|
name: "loaded_images",
|
|
handler: onLoadedImages
|
|
}, {
|
|
name: "DOMLoaded",
|
|
handler: onDOMLoaded
|
|
}, {
|
|
name: "destroy",
|
|
handler: onDestroy
|
|
}];
|
|
var listeners = partialListeners.filter(function (listener) {
|
|
return listener.handler != null;
|
|
});
|
|
if (!listeners.length) {
|
|
return;
|
|
}
|
|
var deregisterList = listeners.map(
|
|
/**
|
|
* Handle the process of adding an event listener
|
|
* @param {Listener} listener
|
|
* @return {Function} Function that deregister the listener
|
|
*/
|
|
function (listener) {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);
|
|
// Return a function to deregister this listener
|
|
return function () {
|
|
var _a;
|
|
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
|
|
};
|
|
});
|
|
// Deregister listeners on unmount
|
|
return function () {
|
|
deregisterList.forEach(function (deregister) {
|
|
return deregister();
|
|
});
|
|
};
|
|
}, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]);
|
|
/**
|
|
* Build the animation view
|
|
*/
|
|
var View = /*#__PURE__*/React.createElement("div", _objectSpread2({
|
|
style: style,
|
|
ref: animationContainer
|
|
}, rest));
|
|
return {
|
|
View: View,
|
|
play: play,
|
|
stop: stop,
|
|
pause: pause,
|
|
setSpeed: setSpeed,
|
|
goToAndStop: goToAndStop,
|
|
goToAndPlay: goToAndPlay,
|
|
setDirection: setDirection,
|
|
playSegments: playSegments,
|
|
setSubframe: setSubframe,
|
|
getDuration: getDuration,
|
|
destroy: destroy,
|
|
animationContainerRef: animationContainer,
|
|
animationLoaded: animationLoaded,
|
|
animationItem: animationInstanceRef.current
|
|
};
|
|
};
|
|
|
|
// helpers
|
|
function getContainerVisibility(container) {
|
|
var _container$getBoundin = container.getBoundingClientRect(),
|
|
top = _container$getBoundin.top,
|
|
height = _container$getBoundin.height;
|
|
var current = window.innerHeight - top;
|
|
var max = window.innerHeight + height;
|
|
return current / max;
|
|
}
|
|
function getContainerCursorPosition(container, cursorX, cursorY) {
|
|
var _container$getBoundin2 = container.getBoundingClientRect(),
|
|
top = _container$getBoundin2.top,
|
|
left = _container$getBoundin2.left,
|
|
width = _container$getBoundin2.width,
|
|
height = _container$getBoundin2.height;
|
|
var x = (cursorX - left) / width;
|
|
var y = (cursorY - top) / height;
|
|
return {
|
|
x: x,
|
|
y: y
|
|
};
|
|
}
|
|
var useInitInteractivity = function useInitInteractivity(_ref) {
|
|
var wrapperRef = _ref.wrapperRef,
|
|
animationItem = _ref.animationItem,
|
|
mode = _ref.mode,
|
|
actions = _ref.actions;
|
|
useEffect(function () {
|
|
var wrapper = wrapperRef.current;
|
|
if (!wrapper || !animationItem || !actions.length) {
|
|
return;
|
|
}
|
|
animationItem.stop();
|
|
var scrollModeHandler = function scrollModeHandler() {
|
|
var assignedSegment = null;
|
|
var scrollHandler = function scrollHandler() {
|
|
var currentPercent = getContainerVisibility(wrapper);
|
|
// Find the first action that satisfies the current position conditions
|
|
var action = actions.find(function (_ref2) {
|
|
var visibility = _ref2.visibility;
|
|
return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
|
|
});
|
|
// Skip if no matching action was found!
|
|
if (!action) {
|
|
return;
|
|
}
|
|
if (action.type === "seek" && action.visibility && action.frames.length === 2) {
|
|
// Seek: Go to a frame based on player scroll position action
|
|
var frameToGo = action.frames[0] + Math.ceil((currentPercent - action.visibility[0]) / (action.visibility[1] - action.visibility[0]) * action.frames[1]);
|
|
//! goToAndStop must be relative to the start of the current segment
|
|
animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);
|
|
}
|
|
if (action.type === "loop") {
|
|
// Loop: Loop a given frames
|
|
if (assignedSegment === null) {
|
|
// if not playing any segments currently. play those segments and save to state
|
|
animationItem.playSegments(action.frames, true);
|
|
assignedSegment = action.frames;
|
|
} else {
|
|
// if playing any segments currently.
|
|
//check if segments in state are equal to the frames selected by action
|
|
if (assignedSegment !== action.frames) {
|
|
// if they are not equal. new segments are to be loaded
|
|
animationItem.playSegments(action.frames, true);
|
|
assignedSegment = action.frames;
|
|
} else if (animationItem.isPaused) {
|
|
// if they are equal the play method must be called only if lottie is paused
|
|
animationItem.playSegments(action.frames, true);
|
|
assignedSegment = action.frames;
|
|
}
|
|
}
|
|
}
|
|
if (action.type === "play" && animationItem.isPaused) {
|
|
// Play: Reset segments and continue playing full animation from current position
|
|
animationItem.resetSegments(true);
|
|
animationItem.play();
|
|
}
|
|
if (action.type === "stop") {
|
|
// Stop: Stop playback
|
|
animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);
|
|
}
|
|
};
|
|
document.addEventListener("scroll", scrollHandler);
|
|
return function () {
|
|
document.removeEventListener("scroll", scrollHandler);
|
|
};
|
|
};
|
|
var cursorModeHandler = function cursorModeHandler() {
|
|
var handleCursor = function handleCursor(_x, _y) {
|
|
var x = _x;
|
|
var y = _y;
|
|
// Resolve cursor position if cursor is inside container
|
|
if (x !== -1 && y !== -1) {
|
|
// Get container cursor position
|
|
var pos = getContainerCursorPosition(wrapper, x, y);
|
|
// Use the resolved position
|
|
x = pos.x;
|
|
y = pos.y;
|
|
}
|
|
// Find the first action that satisfies the current position conditions
|
|
var action = actions.find(function (_ref3) {
|
|
var position = _ref3.position;
|
|
if (position && Array.isArray(position.x) && Array.isArray(position.y)) {
|
|
return x >= position.x[0] && x <= position.x[1] && y >= position.y[0] && y <= position.y[1];
|
|
}
|
|
if (position && !Number.isNaN(position.x) && !Number.isNaN(position.y)) {
|
|
return x === position.x && y === position.y;
|
|
}
|
|
return false;
|
|
});
|
|
// Skip if no matching action was found!
|
|
if (!action) {
|
|
return;
|
|
}
|
|
// Process action types:
|
|
if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
|
|
// Seek: Go to a frame based on player scroll position action
|
|
var xPercent = (x - action.position.x[0]) / (action.position.x[1] - action.position.x[0]);
|
|
var yPercent = (y - action.position.y[0]) / (action.position.y[1] - action.position.y[0]);
|
|
animationItem.playSegments(action.frames, true);
|
|
animationItem.goToAndStop(Math.ceil((xPercent + yPercent) / 2 * (action.frames[1] - action.frames[0])), true);
|
|
}
|
|
if (action.type === "loop") {
|
|
animationItem.playSegments(action.frames, true);
|
|
}
|
|
if (action.type === "play") {
|
|
// Play: Reset segments and continue playing full animation from current position
|
|
if (animationItem.isPaused) {
|
|
animationItem.resetSegments(false);
|
|
}
|
|
animationItem.playSegments(action.frames);
|
|
}
|
|
if (action.type === "stop") {
|
|
animationItem.goToAndStop(action.frames[0], true);
|
|
}
|
|
};
|
|
var mouseMoveHandler = function mouseMoveHandler(ev) {
|
|
handleCursor(ev.clientX, ev.clientY);
|
|
};
|
|
var mouseOutHandler = function mouseOutHandler() {
|
|
handleCursor(-1, -1);
|
|
};
|
|
wrapper.addEventListener("mousemove", mouseMoveHandler);
|
|
wrapper.addEventListener("mouseout", mouseOutHandler);
|
|
return function () {
|
|
wrapper.removeEventListener("mousemove", mouseMoveHandler);
|
|
wrapper.removeEventListener("mouseout", mouseOutHandler);
|
|
};
|
|
};
|
|
switch (mode) {
|
|
case "scroll":
|
|
return scrollModeHandler();
|
|
case "cursor":
|
|
return cursorModeHandler();
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [mode, animationItem]);
|
|
};
|
|
var useLottieInteractivity = function useLottieInteractivity(_ref4) {
|
|
var actions = _ref4.actions,
|
|
mode = _ref4.mode,
|
|
lottieObj = _ref4.lottieObj;
|
|
var animationItem = lottieObj.animationItem,
|
|
View = lottieObj.View,
|
|
animationContainerRef = lottieObj.animationContainerRef;
|
|
useInitInteractivity({
|
|
actions: actions,
|
|
animationItem: animationItem,
|
|
mode: mode,
|
|
wrapperRef: animationContainerRef
|
|
});
|
|
return View;
|
|
};
|
|
|
|
var _excluded = ["style", "interactivity"];
|
|
var Lottie = function Lottie(props) {
|
|
var _a, _b, _c;
|
|
var style = props.style,
|
|
interactivity = props.interactivity,
|
|
lottieProps = _objectWithoutProperties(props, _excluded);
|
|
/**
|
|
* Initialize the 'useLottie' hook
|
|
*/
|
|
var _useLottie = useLottie(lottieProps, style),
|
|
View = _useLottie.View,
|
|
play = _useLottie.play,
|
|
stop = _useLottie.stop,
|
|
pause = _useLottie.pause,
|
|
setSpeed = _useLottie.setSpeed,
|
|
goToAndStop = _useLottie.goToAndStop,
|
|
goToAndPlay = _useLottie.goToAndPlay,
|
|
setDirection = _useLottie.setDirection,
|
|
playSegments = _useLottie.playSegments,
|
|
setSubframe = _useLottie.setSubframe,
|
|
getDuration = _useLottie.getDuration,
|
|
destroy = _useLottie.destroy,
|
|
animationContainerRef = _useLottie.animationContainerRef,
|
|
animationLoaded = _useLottie.animationLoaded,
|
|
animationItem = _useLottie.animationItem;
|
|
/**
|
|
* Make the hook variables/methods available through the provided 'lottieRef'
|
|
*/
|
|
useEffect(function () {
|
|
if (props.lottieRef) {
|
|
props.lottieRef.current = {
|
|
play: play,
|
|
stop: stop,
|
|
pause: pause,
|
|
setSpeed: setSpeed,
|
|
goToAndPlay: goToAndPlay,
|
|
goToAndStop: goToAndStop,
|
|
setDirection: setDirection,
|
|
playSegments: playSegments,
|
|
setSubframe: setSubframe,
|
|
getDuration: getDuration,
|
|
destroy: destroy,
|
|
animationContainerRef: animationContainerRef,
|
|
animationLoaded: animationLoaded,
|
|
animationItem: animationItem
|
|
};
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
|
|
return useLottieInteractivity({
|
|
lottieObj: {
|
|
View: View,
|
|
play: play,
|
|
stop: stop,
|
|
pause: pause,
|
|
setSpeed: setSpeed,
|
|
goToAndStop: goToAndStop,
|
|
goToAndPlay: goToAndPlay,
|
|
setDirection: setDirection,
|
|
playSegments: playSegments,
|
|
setSubframe: setSubframe,
|
|
getDuration: getDuration,
|
|
destroy: destroy,
|
|
animationContainerRef: animationContainerRef,
|
|
animationLoaded: animationLoaded,
|
|
animationItem: animationItem
|
|
},
|
|
actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],
|
|
mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
|
|
});
|
|
};
|
|
|
|
export { Lottie as default, useLottie, useLottieInteractivity };
|
|
//# sourceMappingURL=index.es.js.map
|