fix(web): 🐛 animation type[dotLottie/lottie] detection

theashraf commented 4 months ago

Relying on the content-type header to detect the animation file type is not a predictable and stable approach. Similarly, assuming that the data property will always hold a Lottie JSON when it is a string or a .lottie file when the user passes a .lottie file is also unstable. There might be instances where the user mistakenly sets the content-type or tries to load an incorrect file, causing the DotLottie player to fail silently without any errors.

Changes:

[x] dotLottie files are zip archives, so the best way to detect if the src resolves to a .lottie file is to check if the file signature matches the zip file signature, which are the first 4 bytes.
[x] For Lottie JSON, the best approach is to parse it to JSON and perform a sanity check to determine if it is a valid Lottie file by checking for the mandatory fields in a Lottie JSON, such as v, op, ip, etc.
[x] These two validations should be unit tested and integrated into all code paths for loading both lottie and dotLottie files.
[x] Provide a verbose error message for unknown file types or when a non-dotLottie or non-lottie file is detected. This will help the user investigate further.

Fixes #282

changeset-bot[bot] commented 4 months ago

🦋 Changeset detected

Latest commit: f80712cc40b6fa8186b89073c93c498976690af2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

| Name | Type | | ----------------------------- | ----- | | @lottiefiles/dotlottie-web | Patch | | @lottiefiles/dotlottie-react | Patch | | @lottiefiles/dotlottie-solid | Patch | | @lottiefiles/dotlottie-svelte | Patch | | @lottiefiles/dotlottie-vue | Patch | | @lottiefiles/dotlottie-wc | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions[bot] commented 4 months ago

Coverage Report for @lottiefiles/dotlottie-web (packages/web)

Status	Category	Percentage	Covered / Total
🟢	Lines	34.41% / 30%	317 / 921
🟢	Statements	33.8% / 30%	333 / 985
🟢	Functions	32.14% / 30%	81 / 252
🟢	Branches	39.17% / 30%	210 / 536

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/web/src/constants.ts	100%	100%	100%	100%
packages/web/src/dotlottie.ts	72.89%	64.38%	69.76%	75.88%	117, 121-124, 137, 178-180, 182, 217, 221, 266, 289, 293, 374, 390, 394, 423, 438-439, 454, 476-479, 504, 514, 542, 542, 544-547, 551, 556-559, 566, 566, 568-571, 575, 575, 577-580, 643, 643, 645-648, 652, 681, 708, 712, 722, 732, 732, 734-740, 744, 754, 758, 760-762, 761, 764, 768, 770-772, 771, 774, 778-780, 782-784, 786-789, 793, 795, 799, 801, 805, 807, 811, 813, 817, 819, 823, 832, 836, 836, 838, 840, 842-844, 842-843, 846, 850-876, 851, 853-855, 854, 857-859, 858, 861-863, 862, 865-867, 866, 869-871, 870, 873-875, 874, 891, 895-896, 898-901, 905, 909, 913
packages/web/src/utils.ts	100%	100%	100%	100%

Generated in workflow #1193

github-actions[bot] commented 4 months ago

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
@lottiefiles/dotlottie-web	22.85 KB (-0.01% 🔽)	457 ms (-0.01% 🔽)	451 ms (+248.46% 🔺)	908 ms
@lottiefiles/dotlottie-web WASM	381.95 KB (0%)	7.7 s (0%)	0 ms (+100% 🔺)	7.7 s
@lottiefiles/dotlottie-react	26.3 KB (+0.89% 🔺)	527 ms (+0.89% 🔺)	218 ms (-24.3% 🔽)	744 ms
@lottiefiles/dotlottie-vue	30.21 KB (+0.94% 🔺)	605 ms (+0.94% 🔺)	231 ms (-34.92% 🔽)	836 ms
@lottiefiles/dotlottie-wc	31.25 KB (+0.63% 🔺)	626 ms (+0.63% 🔺)	623 ms (+202.14% 🔺)	1.3 s
@lottiefiles/dotlottie-svelte	31.16 KB (+1.29% 🔺)	624 ms (+1.29% 🔺)	257 ms (-62.13% 🔽)	880 ms
@lottiefiles/dotlottie-solid	29.33 KB (+0.81% 🔺)	587 ms (+0.81% 🔺)	162 ms (-20.97% 🔽)	749 ms

LottieFiles / dotlottie-web