@depup/lottie-react 2.4.1-depup.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +46 -0
- package/README.md +31 -0
- package/build/index.d.ts +80 -0
- package/build/index.es.js +653 -0
- package/build/index.es.js.map +1 -0
- package/build/index.es.min.js +3 -0
- package/build/index.js +667 -0
- package/build/index.js.map +1 -0
- package/build/index.min.js +3 -0
- package/build/index.umd.js +670 -0
- package/build/index.umd.js.map +1 -0
- package/build/index.umd.min.js +3 -0
- package/changes.json +10 -0
- package/package.json +126 -0
|
@@ -0,0 +1,670 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lottie-web'), require('react')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'lottie-web', 'react'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["lottie-react"] = {}, global.Lottie, global.React));
|
|
5
|
+
})(this, (function (exports, lottie, React) { 'use strict';
|
|
6
|
+
|
|
7
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
+
|
|
9
|
+
var lottie__default = /*#__PURE__*/_interopDefaultLegacy(lottie);
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
|
|
12
|
+
function _arrayLikeToArray(r, a) {
|
|
13
|
+
(null == a || a > r.length) && (a = r.length);
|
|
14
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
15
|
+
return n;
|
|
16
|
+
}
|
|
17
|
+
function _arrayWithHoles(r) {
|
|
18
|
+
if (Array.isArray(r)) return r;
|
|
19
|
+
}
|
|
20
|
+
function _defineProperty(e, r, t) {
|
|
21
|
+
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
22
|
+
value: t,
|
|
23
|
+
enumerable: !0,
|
|
24
|
+
configurable: !0,
|
|
25
|
+
writable: !0
|
|
26
|
+
}) : e[r] = t, e;
|
|
27
|
+
}
|
|
28
|
+
function _iterableToArrayLimit(r, l) {
|
|
29
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
30
|
+
if (null != t) {
|
|
31
|
+
var e,
|
|
32
|
+
n,
|
|
33
|
+
i,
|
|
34
|
+
u,
|
|
35
|
+
a = [],
|
|
36
|
+
f = !0,
|
|
37
|
+
o = !1;
|
|
38
|
+
try {
|
|
39
|
+
if (i = (t = t.call(r)).next, 0 === l) {
|
|
40
|
+
if (Object(t) !== t) return;
|
|
41
|
+
f = !1;
|
|
42
|
+
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
43
|
+
} catch (r) {
|
|
44
|
+
o = !0, n = r;
|
|
45
|
+
} finally {
|
|
46
|
+
try {
|
|
47
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
48
|
+
} finally {
|
|
49
|
+
if (o) throw n;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
return a;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
function _nonIterableRest() {
|
|
56
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
57
|
+
}
|
|
58
|
+
function ownKeys(e, r) {
|
|
59
|
+
var t = Object.keys(e);
|
|
60
|
+
if (Object.getOwnPropertySymbols) {
|
|
61
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
62
|
+
r && (o = o.filter(function (r) {
|
|
63
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
64
|
+
})), t.push.apply(t, o);
|
|
65
|
+
}
|
|
66
|
+
return t;
|
|
67
|
+
}
|
|
68
|
+
function _objectSpread2(e) {
|
|
69
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
70
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
71
|
+
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
|
72
|
+
_defineProperty(e, r, t[r]);
|
|
73
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
74
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
return e;
|
|
78
|
+
}
|
|
79
|
+
function _objectWithoutProperties(e, t) {
|
|
80
|
+
if (null == e) return {};
|
|
81
|
+
var o,
|
|
82
|
+
r,
|
|
83
|
+
i = _objectWithoutPropertiesLoose(e, t);
|
|
84
|
+
if (Object.getOwnPropertySymbols) {
|
|
85
|
+
var s = Object.getOwnPropertySymbols(e);
|
|
86
|
+
for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
|
87
|
+
}
|
|
88
|
+
return i;
|
|
89
|
+
}
|
|
90
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
91
|
+
if (null == r) return {};
|
|
92
|
+
var t = {};
|
|
93
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
94
|
+
if (e.includes(n)) continue;
|
|
95
|
+
t[n] = r[n];
|
|
96
|
+
}
|
|
97
|
+
return t;
|
|
98
|
+
}
|
|
99
|
+
function _slicedToArray(r, e) {
|
|
100
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
101
|
+
}
|
|
102
|
+
function _toPrimitive(t, r) {
|
|
103
|
+
if ("object" != typeof t || !t) return t;
|
|
104
|
+
var e = t[Symbol.toPrimitive];
|
|
105
|
+
if (void 0 !== e) {
|
|
106
|
+
var i = e.call(t, r || "default");
|
|
107
|
+
if ("object" != typeof i) return i;
|
|
108
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
109
|
+
}
|
|
110
|
+
return ("string" === r ? String : Number)(t);
|
|
111
|
+
}
|
|
112
|
+
function _toPropertyKey(t) {
|
|
113
|
+
var i = _toPrimitive(t, "string");
|
|
114
|
+
return "symbol" == typeof i ? i : i + "";
|
|
115
|
+
}
|
|
116
|
+
function _unsupportedIterableToArray(r, a) {
|
|
117
|
+
if (r) {
|
|
118
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
119
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
120
|
+
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;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
|
|
125
|
+
var useLottie = function useLottie(props, style) {
|
|
126
|
+
var animationData = props.animationData,
|
|
127
|
+
loop = props.loop,
|
|
128
|
+
autoplay = props.autoplay,
|
|
129
|
+
initialSegment = props.initialSegment,
|
|
130
|
+
onComplete = props.onComplete,
|
|
131
|
+
onLoopComplete = props.onLoopComplete,
|
|
132
|
+
onEnterFrame = props.onEnterFrame,
|
|
133
|
+
onSegmentStart = props.onSegmentStart,
|
|
134
|
+
onConfigReady = props.onConfigReady,
|
|
135
|
+
onDataReady = props.onDataReady,
|
|
136
|
+
onDataFailed = props.onDataFailed,
|
|
137
|
+
onLoadedImages = props.onLoadedImages,
|
|
138
|
+
onDOMLoaded = props.onDOMLoaded,
|
|
139
|
+
onDestroy = props.onDestroy;
|
|
140
|
+
props.lottieRef;
|
|
141
|
+
props.renderer;
|
|
142
|
+
props.name;
|
|
143
|
+
props.assetsPath;
|
|
144
|
+
props.rendererSettings;
|
|
145
|
+
var rest = _objectWithoutProperties(props, _excluded$1);
|
|
146
|
+
var _useState = React.useState(false),
|
|
147
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
148
|
+
animationLoaded = _useState2[0],
|
|
149
|
+
setAnimationLoaded = _useState2[1];
|
|
150
|
+
var animationInstanceRef = React.useRef();
|
|
151
|
+
var animationContainer = React.useRef(null);
|
|
152
|
+
/*
|
|
153
|
+
======================================
|
|
154
|
+
INTERACTION METHODS
|
|
155
|
+
======================================
|
|
156
|
+
*/
|
|
157
|
+
/**
|
|
158
|
+
* Play
|
|
159
|
+
*/
|
|
160
|
+
var play = function play() {
|
|
161
|
+
var _a;
|
|
162
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
163
|
+
};
|
|
164
|
+
/**
|
|
165
|
+
* Stop
|
|
166
|
+
*/
|
|
167
|
+
var stop = function stop() {
|
|
168
|
+
var _a;
|
|
169
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();
|
|
170
|
+
};
|
|
171
|
+
/**
|
|
172
|
+
* Pause
|
|
173
|
+
*/
|
|
174
|
+
var pause = function pause() {
|
|
175
|
+
var _a;
|
|
176
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
|
177
|
+
};
|
|
178
|
+
/**
|
|
179
|
+
* Set animation speed
|
|
180
|
+
* @param speed
|
|
181
|
+
*/
|
|
182
|
+
var setSpeed = function setSpeed(speed) {
|
|
183
|
+
var _a;
|
|
184
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);
|
|
185
|
+
};
|
|
186
|
+
/**
|
|
187
|
+
* Got to frame and play
|
|
188
|
+
* @param value
|
|
189
|
+
* @param isFrame
|
|
190
|
+
*/
|
|
191
|
+
var goToAndPlay = function goToAndPlay(value, isFrame) {
|
|
192
|
+
var _a;
|
|
193
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);
|
|
194
|
+
};
|
|
195
|
+
/**
|
|
196
|
+
* Got to frame and stop
|
|
197
|
+
* @param value
|
|
198
|
+
* @param isFrame
|
|
199
|
+
*/
|
|
200
|
+
var goToAndStop = function goToAndStop(value, isFrame) {
|
|
201
|
+
var _a;
|
|
202
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);
|
|
203
|
+
};
|
|
204
|
+
/**
|
|
205
|
+
* Set animation direction
|
|
206
|
+
* @param direction
|
|
207
|
+
*/
|
|
208
|
+
var setDirection = function setDirection(direction) {
|
|
209
|
+
var _a;
|
|
210
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);
|
|
211
|
+
};
|
|
212
|
+
/**
|
|
213
|
+
* Play animation segments
|
|
214
|
+
* @param segments
|
|
215
|
+
* @param forceFlag
|
|
216
|
+
*/
|
|
217
|
+
var playSegments = function playSegments(segments, forceFlag) {
|
|
218
|
+
var _a;
|
|
219
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);
|
|
220
|
+
};
|
|
221
|
+
/**
|
|
222
|
+
* Set sub frames
|
|
223
|
+
* @param useSubFrames
|
|
224
|
+
*/
|
|
225
|
+
var setSubframe = function setSubframe(useSubFrames) {
|
|
226
|
+
var _a;
|
|
227
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);
|
|
228
|
+
};
|
|
229
|
+
/**
|
|
230
|
+
* Get animation duration
|
|
231
|
+
* @param inFrames
|
|
232
|
+
*/
|
|
233
|
+
var getDuration = function getDuration(inFrames) {
|
|
234
|
+
var _a;
|
|
235
|
+
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);
|
|
236
|
+
};
|
|
237
|
+
/**
|
|
238
|
+
* Destroy animation
|
|
239
|
+
*/
|
|
240
|
+
var destroy = function destroy() {
|
|
241
|
+
var _a;
|
|
242
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
243
|
+
// Removing the reference to the animation so separate cleanups are skipped.
|
|
244
|
+
// Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
|
|
245
|
+
animationInstanceRef.current = undefined;
|
|
246
|
+
};
|
|
247
|
+
/*
|
|
248
|
+
======================================
|
|
249
|
+
LOTTIE
|
|
250
|
+
======================================
|
|
251
|
+
*/
|
|
252
|
+
/**
|
|
253
|
+
* Load a new animation, and if it's the case, destroy the previous one
|
|
254
|
+
* @param {Object} forcedConfigs
|
|
255
|
+
*/
|
|
256
|
+
var loadAnimation = function loadAnimation() {
|
|
257
|
+
var forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
258
|
+
var _a;
|
|
259
|
+
// Return if the container ref is null
|
|
260
|
+
if (!animationContainer.current) {
|
|
261
|
+
return;
|
|
262
|
+
}
|
|
263
|
+
// Destroy any previous instance
|
|
264
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
265
|
+
// Build the animation configuration
|
|
266
|
+
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {
|
|
267
|
+
container: animationContainer.current
|
|
268
|
+
});
|
|
269
|
+
// Save the animation instance
|
|
270
|
+
animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
|
|
271
|
+
setAnimationLoaded(!!animationInstanceRef.current);
|
|
272
|
+
// Return a function that will clean up
|
|
273
|
+
return function () {
|
|
274
|
+
var _a;
|
|
275
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
276
|
+
animationInstanceRef.current = undefined;
|
|
277
|
+
};
|
|
278
|
+
};
|
|
279
|
+
/**
|
|
280
|
+
* (Re)Initialize when animation data changed
|
|
281
|
+
*/
|
|
282
|
+
React.useEffect(function () {
|
|
283
|
+
var onUnmount = loadAnimation();
|
|
284
|
+
// Clean up on unmount
|
|
285
|
+
return function () {
|
|
286
|
+
return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
|
|
287
|
+
};
|
|
288
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
289
|
+
}, [animationData, loop]);
|
|
290
|
+
// Update the autoplay state
|
|
291
|
+
React.useEffect(function () {
|
|
292
|
+
if (!animationInstanceRef.current) {
|
|
293
|
+
return;
|
|
294
|
+
}
|
|
295
|
+
animationInstanceRef.current.autoplay = !!autoplay;
|
|
296
|
+
}, [autoplay]);
|
|
297
|
+
// Update the initial segment state
|
|
298
|
+
React.useEffect(function () {
|
|
299
|
+
if (!animationInstanceRef.current) {
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
// When null should reset to default animation length
|
|
303
|
+
if (!initialSegment) {
|
|
304
|
+
animationInstanceRef.current.resetSegments(true);
|
|
305
|
+
return;
|
|
306
|
+
}
|
|
307
|
+
// If it's not a valid segment, do nothing
|
|
308
|
+
if (!Array.isArray(initialSegment) || !initialSegment.length) {
|
|
309
|
+
return;
|
|
310
|
+
}
|
|
311
|
+
// If the current position it's not in the new segment
|
|
312
|
+
// set the current position to start
|
|
313
|
+
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
|
|
314
|
+
animationInstanceRef.current.currentRawFrame = initialSegment[0];
|
|
315
|
+
}
|
|
316
|
+
// Update the segment
|
|
317
|
+
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);
|
|
318
|
+
}, [initialSegment]);
|
|
319
|
+
/*
|
|
320
|
+
======================================
|
|
321
|
+
EVENTS
|
|
322
|
+
======================================
|
|
323
|
+
*/
|
|
324
|
+
/**
|
|
325
|
+
* Reinitialize listener on change
|
|
326
|
+
*/
|
|
327
|
+
React.useEffect(function () {
|
|
328
|
+
var partialListeners = [{
|
|
329
|
+
name: "complete",
|
|
330
|
+
handler: onComplete
|
|
331
|
+
}, {
|
|
332
|
+
name: "loopComplete",
|
|
333
|
+
handler: onLoopComplete
|
|
334
|
+
}, {
|
|
335
|
+
name: "enterFrame",
|
|
336
|
+
handler: onEnterFrame
|
|
337
|
+
}, {
|
|
338
|
+
name: "segmentStart",
|
|
339
|
+
handler: onSegmentStart
|
|
340
|
+
}, {
|
|
341
|
+
name: "config_ready",
|
|
342
|
+
handler: onConfigReady
|
|
343
|
+
}, {
|
|
344
|
+
name: "data_ready",
|
|
345
|
+
handler: onDataReady
|
|
346
|
+
}, {
|
|
347
|
+
name: "data_failed",
|
|
348
|
+
handler: onDataFailed
|
|
349
|
+
}, {
|
|
350
|
+
name: "loaded_images",
|
|
351
|
+
handler: onLoadedImages
|
|
352
|
+
}, {
|
|
353
|
+
name: "DOMLoaded",
|
|
354
|
+
handler: onDOMLoaded
|
|
355
|
+
}, {
|
|
356
|
+
name: "destroy",
|
|
357
|
+
handler: onDestroy
|
|
358
|
+
}];
|
|
359
|
+
var listeners = partialListeners.filter(function (listener) {
|
|
360
|
+
return listener.handler != null;
|
|
361
|
+
});
|
|
362
|
+
if (!listeners.length) {
|
|
363
|
+
return;
|
|
364
|
+
}
|
|
365
|
+
var deregisterList = listeners.map(
|
|
366
|
+
/**
|
|
367
|
+
* Handle the process of adding an event listener
|
|
368
|
+
* @param {Listener} listener
|
|
369
|
+
* @return {Function} Function that deregister the listener
|
|
370
|
+
*/
|
|
371
|
+
function (listener) {
|
|
372
|
+
var _a;
|
|
373
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);
|
|
374
|
+
// Return a function to deregister this listener
|
|
375
|
+
return function () {
|
|
376
|
+
var _a;
|
|
377
|
+
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
|
|
378
|
+
};
|
|
379
|
+
});
|
|
380
|
+
// Deregister listeners on unmount
|
|
381
|
+
return function () {
|
|
382
|
+
deregisterList.forEach(function (deregister) {
|
|
383
|
+
return deregister();
|
|
384
|
+
});
|
|
385
|
+
};
|
|
386
|
+
}, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]);
|
|
387
|
+
/**
|
|
388
|
+
* Build the animation view
|
|
389
|
+
*/
|
|
390
|
+
var View = /*#__PURE__*/React__default["default"].createElement("div", _objectSpread2({
|
|
391
|
+
style: style,
|
|
392
|
+
ref: animationContainer
|
|
393
|
+
}, rest));
|
|
394
|
+
return {
|
|
395
|
+
View: View,
|
|
396
|
+
play: play,
|
|
397
|
+
stop: stop,
|
|
398
|
+
pause: pause,
|
|
399
|
+
setSpeed: setSpeed,
|
|
400
|
+
goToAndStop: goToAndStop,
|
|
401
|
+
goToAndPlay: goToAndPlay,
|
|
402
|
+
setDirection: setDirection,
|
|
403
|
+
playSegments: playSegments,
|
|
404
|
+
setSubframe: setSubframe,
|
|
405
|
+
getDuration: getDuration,
|
|
406
|
+
destroy: destroy,
|
|
407
|
+
animationContainerRef: animationContainer,
|
|
408
|
+
animationLoaded: animationLoaded,
|
|
409
|
+
animationItem: animationInstanceRef.current
|
|
410
|
+
};
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
// helpers
|
|
414
|
+
function getContainerVisibility(container) {
|
|
415
|
+
var _container$getBoundin = container.getBoundingClientRect(),
|
|
416
|
+
top = _container$getBoundin.top,
|
|
417
|
+
height = _container$getBoundin.height;
|
|
418
|
+
var current = window.innerHeight - top;
|
|
419
|
+
var max = window.innerHeight + height;
|
|
420
|
+
return current / max;
|
|
421
|
+
}
|
|
422
|
+
function getContainerCursorPosition(container, cursorX, cursorY) {
|
|
423
|
+
var _container$getBoundin2 = container.getBoundingClientRect(),
|
|
424
|
+
top = _container$getBoundin2.top,
|
|
425
|
+
left = _container$getBoundin2.left,
|
|
426
|
+
width = _container$getBoundin2.width,
|
|
427
|
+
height = _container$getBoundin2.height;
|
|
428
|
+
var x = (cursorX - left) / width;
|
|
429
|
+
var y = (cursorY - top) / height;
|
|
430
|
+
return {
|
|
431
|
+
x: x,
|
|
432
|
+
y: y
|
|
433
|
+
};
|
|
434
|
+
}
|
|
435
|
+
var useInitInteractivity = function useInitInteractivity(_ref) {
|
|
436
|
+
var wrapperRef = _ref.wrapperRef,
|
|
437
|
+
animationItem = _ref.animationItem,
|
|
438
|
+
mode = _ref.mode,
|
|
439
|
+
actions = _ref.actions;
|
|
440
|
+
React.useEffect(function () {
|
|
441
|
+
var wrapper = wrapperRef.current;
|
|
442
|
+
if (!wrapper || !animationItem || !actions.length) {
|
|
443
|
+
return;
|
|
444
|
+
}
|
|
445
|
+
animationItem.stop();
|
|
446
|
+
var scrollModeHandler = function scrollModeHandler() {
|
|
447
|
+
var assignedSegment = null;
|
|
448
|
+
var scrollHandler = function scrollHandler() {
|
|
449
|
+
var currentPercent = getContainerVisibility(wrapper);
|
|
450
|
+
// Find the first action that satisfies the current position conditions
|
|
451
|
+
var action = actions.find(function (_ref2) {
|
|
452
|
+
var visibility = _ref2.visibility;
|
|
453
|
+
return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
|
|
454
|
+
});
|
|
455
|
+
// Skip if no matching action was found!
|
|
456
|
+
if (!action) {
|
|
457
|
+
return;
|
|
458
|
+
}
|
|
459
|
+
if (action.type === "seek" && action.visibility && action.frames.length === 2) {
|
|
460
|
+
// Seek: Go to a frame based on player scroll position action
|
|
461
|
+
var frameToGo = action.frames[0] + Math.ceil((currentPercent - action.visibility[0]) / (action.visibility[1] - action.visibility[0]) * action.frames[1]);
|
|
462
|
+
//! goToAndStop must be relative to the start of the current segment
|
|
463
|
+
animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);
|
|
464
|
+
}
|
|
465
|
+
if (action.type === "loop") {
|
|
466
|
+
// Loop: Loop a given frames
|
|
467
|
+
if (assignedSegment === null) {
|
|
468
|
+
// if not playing any segments currently. play those segments and save to state
|
|
469
|
+
animationItem.playSegments(action.frames, true);
|
|
470
|
+
assignedSegment = action.frames;
|
|
471
|
+
} else {
|
|
472
|
+
// if playing any segments currently.
|
|
473
|
+
//check if segments in state are equal to the frames selected by action
|
|
474
|
+
if (assignedSegment !== action.frames) {
|
|
475
|
+
// if they are not equal. new segments are to be loaded
|
|
476
|
+
animationItem.playSegments(action.frames, true);
|
|
477
|
+
assignedSegment = action.frames;
|
|
478
|
+
} else if (animationItem.isPaused) {
|
|
479
|
+
// if they are equal the play method must be called only if lottie is paused
|
|
480
|
+
animationItem.playSegments(action.frames, true);
|
|
481
|
+
assignedSegment = action.frames;
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
if (action.type === "play" && animationItem.isPaused) {
|
|
486
|
+
// Play: Reset segments and continue playing full animation from current position
|
|
487
|
+
animationItem.resetSegments(true);
|
|
488
|
+
animationItem.play();
|
|
489
|
+
}
|
|
490
|
+
if (action.type === "stop") {
|
|
491
|
+
// Stop: Stop playback
|
|
492
|
+
animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);
|
|
493
|
+
}
|
|
494
|
+
};
|
|
495
|
+
document.addEventListener("scroll", scrollHandler);
|
|
496
|
+
return function () {
|
|
497
|
+
document.removeEventListener("scroll", scrollHandler);
|
|
498
|
+
};
|
|
499
|
+
};
|
|
500
|
+
var cursorModeHandler = function cursorModeHandler() {
|
|
501
|
+
var handleCursor = function handleCursor(_x, _y) {
|
|
502
|
+
var x = _x;
|
|
503
|
+
var y = _y;
|
|
504
|
+
// Resolve cursor position if cursor is inside container
|
|
505
|
+
if (x !== -1 && y !== -1) {
|
|
506
|
+
// Get container cursor position
|
|
507
|
+
var pos = getContainerCursorPosition(wrapper, x, y);
|
|
508
|
+
// Use the resolved position
|
|
509
|
+
x = pos.x;
|
|
510
|
+
y = pos.y;
|
|
511
|
+
}
|
|
512
|
+
// Find the first action that satisfies the current position conditions
|
|
513
|
+
var action = actions.find(function (_ref3) {
|
|
514
|
+
var position = _ref3.position;
|
|
515
|
+
if (position && Array.isArray(position.x) && Array.isArray(position.y)) {
|
|
516
|
+
return x >= position.x[0] && x <= position.x[1] && y >= position.y[0] && y <= position.y[1];
|
|
517
|
+
}
|
|
518
|
+
if (position && !Number.isNaN(position.x) && !Number.isNaN(position.y)) {
|
|
519
|
+
return x === position.x && y === position.y;
|
|
520
|
+
}
|
|
521
|
+
return false;
|
|
522
|
+
});
|
|
523
|
+
// Skip if no matching action was found!
|
|
524
|
+
if (!action) {
|
|
525
|
+
return;
|
|
526
|
+
}
|
|
527
|
+
// Process action types:
|
|
528
|
+
if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
|
|
529
|
+
// Seek: Go to a frame based on player scroll position action
|
|
530
|
+
var xPercent = (x - action.position.x[0]) / (action.position.x[1] - action.position.x[0]);
|
|
531
|
+
var yPercent = (y - action.position.y[0]) / (action.position.y[1] - action.position.y[0]);
|
|
532
|
+
animationItem.playSegments(action.frames, true);
|
|
533
|
+
animationItem.goToAndStop(Math.ceil((xPercent + yPercent) / 2 * (action.frames[1] - action.frames[0])), true);
|
|
534
|
+
}
|
|
535
|
+
if (action.type === "loop") {
|
|
536
|
+
animationItem.playSegments(action.frames, true);
|
|
537
|
+
}
|
|
538
|
+
if (action.type === "play") {
|
|
539
|
+
// Play: Reset segments and continue playing full animation from current position
|
|
540
|
+
if (animationItem.isPaused) {
|
|
541
|
+
animationItem.resetSegments(false);
|
|
542
|
+
}
|
|
543
|
+
animationItem.playSegments(action.frames);
|
|
544
|
+
}
|
|
545
|
+
if (action.type === "stop") {
|
|
546
|
+
animationItem.goToAndStop(action.frames[0], true);
|
|
547
|
+
}
|
|
548
|
+
};
|
|
549
|
+
var mouseMoveHandler = function mouseMoveHandler(ev) {
|
|
550
|
+
handleCursor(ev.clientX, ev.clientY);
|
|
551
|
+
};
|
|
552
|
+
var mouseOutHandler = function mouseOutHandler() {
|
|
553
|
+
handleCursor(-1, -1);
|
|
554
|
+
};
|
|
555
|
+
wrapper.addEventListener("mousemove", mouseMoveHandler);
|
|
556
|
+
wrapper.addEventListener("mouseout", mouseOutHandler);
|
|
557
|
+
return function () {
|
|
558
|
+
wrapper.removeEventListener("mousemove", mouseMoveHandler);
|
|
559
|
+
wrapper.removeEventListener("mouseout", mouseOutHandler);
|
|
560
|
+
};
|
|
561
|
+
};
|
|
562
|
+
switch (mode) {
|
|
563
|
+
case "scroll":
|
|
564
|
+
return scrollModeHandler();
|
|
565
|
+
case "cursor":
|
|
566
|
+
return cursorModeHandler();
|
|
567
|
+
}
|
|
568
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
569
|
+
}, [mode, animationItem]);
|
|
570
|
+
};
|
|
571
|
+
var useLottieInteractivity = function useLottieInteractivity(_ref4) {
|
|
572
|
+
var actions = _ref4.actions,
|
|
573
|
+
mode = _ref4.mode,
|
|
574
|
+
lottieObj = _ref4.lottieObj;
|
|
575
|
+
var animationItem = lottieObj.animationItem,
|
|
576
|
+
View = lottieObj.View,
|
|
577
|
+
animationContainerRef = lottieObj.animationContainerRef;
|
|
578
|
+
useInitInteractivity({
|
|
579
|
+
actions: actions,
|
|
580
|
+
animationItem: animationItem,
|
|
581
|
+
mode: mode,
|
|
582
|
+
wrapperRef: animationContainerRef
|
|
583
|
+
});
|
|
584
|
+
return View;
|
|
585
|
+
};
|
|
586
|
+
|
|
587
|
+
var _excluded = ["style", "interactivity"];
|
|
588
|
+
var Lottie = function Lottie(props) {
|
|
589
|
+
var _a, _b, _c;
|
|
590
|
+
var style = props.style,
|
|
591
|
+
interactivity = props.interactivity,
|
|
592
|
+
lottieProps = _objectWithoutProperties(props, _excluded);
|
|
593
|
+
/**
|
|
594
|
+
* Initialize the 'useLottie' hook
|
|
595
|
+
*/
|
|
596
|
+
var _useLottie = useLottie(lottieProps, style),
|
|
597
|
+
View = _useLottie.View,
|
|
598
|
+
play = _useLottie.play,
|
|
599
|
+
stop = _useLottie.stop,
|
|
600
|
+
pause = _useLottie.pause,
|
|
601
|
+
setSpeed = _useLottie.setSpeed,
|
|
602
|
+
goToAndStop = _useLottie.goToAndStop,
|
|
603
|
+
goToAndPlay = _useLottie.goToAndPlay,
|
|
604
|
+
setDirection = _useLottie.setDirection,
|
|
605
|
+
playSegments = _useLottie.playSegments,
|
|
606
|
+
setSubframe = _useLottie.setSubframe,
|
|
607
|
+
getDuration = _useLottie.getDuration,
|
|
608
|
+
destroy = _useLottie.destroy,
|
|
609
|
+
animationContainerRef = _useLottie.animationContainerRef,
|
|
610
|
+
animationLoaded = _useLottie.animationLoaded,
|
|
611
|
+
animationItem = _useLottie.animationItem;
|
|
612
|
+
/**
|
|
613
|
+
* Make the hook variables/methods available through the provided 'lottieRef'
|
|
614
|
+
*/
|
|
615
|
+
React.useEffect(function () {
|
|
616
|
+
if (props.lottieRef) {
|
|
617
|
+
props.lottieRef.current = {
|
|
618
|
+
play: play,
|
|
619
|
+
stop: stop,
|
|
620
|
+
pause: pause,
|
|
621
|
+
setSpeed: setSpeed,
|
|
622
|
+
goToAndPlay: goToAndPlay,
|
|
623
|
+
goToAndStop: goToAndStop,
|
|
624
|
+
setDirection: setDirection,
|
|
625
|
+
playSegments: playSegments,
|
|
626
|
+
setSubframe: setSubframe,
|
|
627
|
+
getDuration: getDuration,
|
|
628
|
+
destroy: destroy,
|
|
629
|
+
animationContainerRef: animationContainerRef,
|
|
630
|
+
animationLoaded: animationLoaded,
|
|
631
|
+
animationItem: animationItem
|
|
632
|
+
};
|
|
633
|
+
}
|
|
634
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
635
|
+
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
|
|
636
|
+
return useLottieInteractivity({
|
|
637
|
+
lottieObj: {
|
|
638
|
+
View: View,
|
|
639
|
+
play: play,
|
|
640
|
+
stop: stop,
|
|
641
|
+
pause: pause,
|
|
642
|
+
setSpeed: setSpeed,
|
|
643
|
+
goToAndStop: goToAndStop,
|
|
644
|
+
goToAndPlay: goToAndPlay,
|
|
645
|
+
setDirection: setDirection,
|
|
646
|
+
playSegments: playSegments,
|
|
647
|
+
setSubframe: setSubframe,
|
|
648
|
+
getDuration: getDuration,
|
|
649
|
+
destroy: destroy,
|
|
650
|
+
animationContainerRef: animationContainerRef,
|
|
651
|
+
animationLoaded: animationLoaded,
|
|
652
|
+
animationItem: animationItem
|
|
653
|
+
},
|
|
654
|
+
actions: (_b = interactivity === null || interactivity === void 0 ? void 0 : interactivity.actions) !== null && _b !== void 0 ? _b : [],
|
|
655
|
+
mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
|
|
656
|
+
});
|
|
657
|
+
};
|
|
658
|
+
|
|
659
|
+
Object.defineProperty(exports, 'LottiePlayer', {
|
|
660
|
+
enumerable: true,
|
|
661
|
+
get: function () { return lottie__default["default"]; }
|
|
662
|
+
});
|
|
663
|
+
exports["default"] = Lottie;
|
|
664
|
+
exports.useLottie = useLottie;
|
|
665
|
+
exports.useLottieInteractivity = useLottieInteractivity;
|
|
666
|
+
|
|
667
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
668
|
+
|
|
669
|
+
}));
|
|
670
|
+
//# sourceMappingURL=index.umd.js.map
|