├── .browserslistrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .github
    └── workflows
    │   └── storybook.yml
├── .gitignore
├── .npmignore
├── .prettierignore
├── .storybook
    ├── main.js
    └── manager.js
├── LICENSE
├── README.md
├── assets
    └── screenshot1.png
├── babel.config.js
├── jest.config.js
├── package.json
├── prettier.config.js
├── rollup.config.js
├── src
    ├── components
    │   ├── ColorPicker.svelte
    │   ├── Controls.svelte
    │   ├── Info.svelte
    │   ├── LottiePlayer.svelte
    │   ├── Popover.svelte
    │   ├── index.js
    │   ├── store.js
    │   ├── utils.js
    │   └── versions.js
    └── stories
    │   ├── LottiePlayer.stories.js
    │   └── Wrapper.svelte
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 0.25%
2 | not dead
3 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | indent_size = 2
 7 | indent_style = space
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | max_line_length = 120
11 | tab_width = 2
12 | 
13 | [*.md]
14 | trim_trailing_whitespace = false
15 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | # Third party
 2 | **/node_modules
 3 | 
 4 | # Build products
 5 | docs/
 6 | dist/
 7 | 
 8 | # Testing
 9 | coverage/
10 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   parserOptions: {
 3 |     ecmaVersion: 2019,
 4 |     sourceType: 'module',
 5 |   },
 6 |   env: {
 7 |     es6: true,
 8 |     browser: true,
 9 |     node: true,
10 |   },
11 |   extends: 'eslint:recommended',
12 |   plugins: ['svelte3'],
13 |   overrides: [
14 |     {
15 |       files: ['**/*.svelte'],
16 |       processor: 'svelte3/svelte3',
17 |     },
18 |   ],
19 |   rules: {
20 |     // ...
21 |   },
22 | };
23 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.svelte linguist-language=HTML
2 | 


--------------------------------------------------------------------------------
/.github/workflows/storybook.yml:
--------------------------------------------------------------------------------
 1 | on:
 2 |   push:
 3 |     branches:
 4 |       - master
 5 |     paths: ['src/stories/**', 'src/components/**']
 6 | 
 7 | name: Publish storybook
 8 | 
 9 | jobs:
10 |   build-and-deploy:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - name: Checkout 🛎️
14 |         uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
15 |         with:
16 |           persist-credentials: false
17 | 
18 |       - name: Install and Build 🔧
19 |         run: |
20 |           yarn install
21 |           yarn build-storybook
22 | 
23 |       - name: Deploy 🚀
24 |         uses: JamesIves/github-pages-deploy-action@releases/v3
25 |         with:
26 |           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
27 |           BRANCH: gh-pages
28 |           FOLDER: storybook-static # Deploy the storybook static build
29 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Package management
 9 | node_modules
10 | package-lock.json
11 | 
12 | # Optional npm cache directory
13 | .npm
14 | 
15 | # Optional eslint cache
16 | .eslintcache
17 | 
18 | # Yarn stuff
19 | .pnp.*
20 | .yarn-integrity
21 | 
22 | # Storybook
23 | storybook-static
24 | 
25 | # Build and dev artifacts
26 | dist/
27 | public/bundle.*
28 | 
29 | # IDE related
30 | **/.idea
31 | **/.vscode
32 | **/.history
33 | 
34 | # Operating system
35 | .DS_Store
36 | .tmp
37 | *.bak
38 | *.swp
39 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # Ignore examples and assets
 2 | assets
 3 | examples
 4 | 
 5 | # Editor config
 6 | .editorconfig
 7 | 
 8 | # Eslint configs
 9 | .eslintignore
10 | .eslintrc.js
11 | 
12 | # Prettier configs
13 | .prettierignore
14 | .prettierrc.js
15 | 
16 | # Babel configs
17 | babel.config.js
18 | 
19 | # Testing configs
20 | jest.config.js
21 | 
22 | # Rollup configs
23 | rollup.config.js
24 | 
25 | # NPM
26 | yarn.lock
27 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # package.json is formatted by package managers, so we ignore it here
2 | package.json
3 | 
4 | # Build artifacts
5 | dist/
6 | 


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |   stories: ['../src/stories/**/*.stories.*'],
 5 |   addons: [
 6 |     '@storybook/addon-storysource',
 7 |     '@storybook/addon-actions',
 8 |     '@storybook/addon-links',
 9 |     '@storybook/addon-knobs',
10 |     '@storybook/addon-backgrounds',
11 |     '@storybook/addon-viewport',
12 |     '@storybook/addon-a11y',
13 |   ],
14 |   webpackFinal: async (config) => {
15 |     config.module.rules.push({
16 |       test: [/\.stories\.js$/, /index\.js$/],
17 |       loaders: [require.resolve('@storybook/source-loader')],
18 |       include: [path.resolve(__dirname, '../src')],
19 |       enforce: 'pre',
20 |     });
21 |     return config;
22 |   },
23 | };
24 | 


--------------------------------------------------------------------------------
/.storybook/manager.js:
--------------------------------------------------------------------------------
1 | import { addons } from '@storybook/addons';
2 | 
3 | addons.setConfig({
4 |   showRoots: true,
5 | });
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 LottieFiles.com
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte Lottie Player
 2 | 
 3 | ![npm (scoped)](https://img.shields.io/npm/v/@lottiefiles/svelte-lottie-player?style=flat-square)
 4 | ![NPM](https://img.shields.io/npm/l/@lottiefiles/svelte-lottie-player?style=flat-square)
 5 | ![David](https://img.shields.io/david/LottieFiles/svelte-lottie-player?style=flat-square)
 6 | ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@lottiefiles/svelte-lottie-player?style=flat-square)
 7 | 
 8 | > Lottie player component for use with Svelte.
 9 | 
10 | This provides a Lottie player using the lottie-web library, adding a control toolbar, render graph and other handy
11 | configs for viewing Lottie animations.
12 | 
13 | ![Screenshot](assets/screenshot1.png?raw=true)
14 | 
15 | ## Features
16 | 
17 | - Configuration of lottie-web via props
18 | - Control toolbar with play, pause, stop, progress track with seeker, looping
19 | - Render graph for viewing frame render times
20 | 
21 | ## Table of Contents
22 | 
23 | - [Getting started](#getting-started)
24 | - [Installation](#installation)
25 | - [Usage](#usage)
26 | 
27 | ## Demos
28 | 
29 | - [Component Storybook](https://lottiefiles.github.io/svelte-lottie-player/)
30 | - [Basic usage on Svelte REPL](https://svelte.dev/repl/c7c774dba1464389af5d738a9e486658)
31 | 
32 | ## Installation
33 | 
34 | With `yarn`:
35 | 
36 | ```bash
37 | yarn add @lottiefiles/svelte-lottie-player
38 | ```
39 | 
40 | With `npm`:
41 | 
42 | ```bash
43 | npm install --save @lottiefiles/svelte-lottie-player
44 | ```
45 | 
46 | ## Usage
47 | 
48 | Basic steps for use in a Svelte project:
49 | 
50 | ```html
51 | <!-- App.svelte -->
52 | <script>
53 |   import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
54 | 
55 |   let controlsLayout = [
56 |     'previousFrame',
57 |     'playpause',
58 |     'stop',
59 |     'nextFrame',
60 |     'progress',
61 |     'frame',
62 |     'loop',
63 |     'spacer',
64 |     'background',
65 |     'snapshot',
66 |     'zoom',
67 |     'info',
68 |   ];
69 | </script>
70 | 
71 | <LottiePlayer
72 |   src="https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json"
73 |   autoplay="{true}"
74 |   loop="{true}"
75 |   controls="{true}"
76 |   renderer="svg"
77 |   background="transparent"
78 |   height="{600}"
79 |   width="{600}"
80 |   controlsLayout="{controlsLayout}"
81 | />
82 | ```
83 | 
84 | [examples-folder-url]: https://github.com/LottieFiles/svelte-lottie-player/tree/master/examples
85 | [examples-basic]: https://github.com/LottieFiles/svelte-lottie-player/tree/master/examples/basic
86 | 


--------------------------------------------------------------------------------
/assets/screenshot1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LottieFiles/svelte-lottie-player/3a0886dbe1d24ca03f5ce2da73043a67e29b2aec/assets/screenshot1.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@babel/preset-env'],
3 |   ignore: ['node_modules/**'],
4 | };
5 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | // For a detailed explanation regarding each configuration property, visit:
 2 | // https://jestjs.io/docs/en/configuration.html
 3 | 
 4 | module.exports = {
 5 |   transformIgnorePatterns: ['/node_modules/'],
 6 |   transform: {
 7 |     "^.+\\.js$": "babel-jest",
 8 |     "^.+\\.svelte$": "svelte-jester"
 9 |   },
10 |   moduleFileExtensions: [
11 |     'js',
12 |     'svelte'
13 |   ],
14 |   setupFilesAfterEnv: [
15 |     '@testing-library/jest-dom/extend-expect'
16 |   ]
17 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@lottiefiles/svelte-lottie-player",
 3 |   "version": "0.3.1",
 4 |   "svelte": "src/components/index.js",
 5 |   "exports": {
 6 |     ".": {
 7 |       "svelte": "./src/components/index.js"
 8 |     }
 9 |   },
10 |   "module": "dist/index.mjs",
11 |   "main": "dist/index.js",
12 |   "description": "Lottie animation player component for Svelte",
13 |   "keywords": [
14 |     "lottie",
15 |     "lottiefiles",
16 |     "dotlottie",
17 |     "svelte",
18 |     "component",
19 |     "svelte-component"
20 |   ],
21 |   "author": "Jawish Hameed <jawish@lottiefiles.com>",
22 |   "license": "MIT",
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "git+https://github.com/LottieFiles/svelte-lottie-player.git"
26 |   },
27 |   "homepage": "https://github.com/LottieFiles/svelte-lottie-player",
28 |   "bugs": {
29 |     "url": "https://github.com/LottieFiles/svelte-lottie-player/issues"
30 |   },
31 |   "scripts": {
32 |     "predev": "node -p \"'export const SVELTE_LOTTIE_PLAYER_VERSION = ' + JSON.stringify(require('./package.json').version) + '; \\n' + 'export const LOTTIE_WEB_VERSION = ' + JSON.stringify(require('./package.json').dependencies['lottie-web']) + ';'\" > src/components/versions.js",
33 |     "dev": "rollup -c -w",
34 |     "prebuild": "node -p \"'export const SVELTE_LOTTIE_PLAYER_VERSION = ' + JSON.stringify(require('./package.json').version) + '; \\n' + 'export const LOTTIE_WEB_VERSION = ' + JSON.stringify(require('./package.json').dependencies['lottie-web']) + ';'\" > src/components/versions.js",
35 |     "build": "rollup -c",
36 |     "prepublishOnly": "yarn build",
37 |     "lint": "eslint src/",
38 |     "lint:fix": "eslint src/ --fix",
39 |     "storybook": "start-storybook -p 6006",
40 |     "build-storybook": "build-storybook"
41 |   },
42 |   "devDependencies": {
43 |     "@babel/core": "^7.9.6",
44 |     "@rollup/plugin-commonjs": "11.1.0",
45 |     "@rollup/plugin-node-resolve": "^7.1.3",
46 |     "@rollup/plugin-strip": "^1.3.2",
47 |     "@storybook/addon-a11y": "^5.3.18",
48 |     "@storybook/addon-actions": "^5.3.18",
49 |     "@storybook/addon-backgrounds": "^5.3.18",
50 |     "@storybook/addon-knobs": "^5.3.18",
51 |     "@storybook/addon-links": "^5.3.18",
52 |     "@storybook/addon-storysource": "^5.3.18",
53 |     "@storybook/addon-viewport": "^5.3.18",
54 |     "@storybook/addons": "^5.3.18",
55 |     "@storybook/source-loader": "^5.3.18",
56 |     "@storybook/svelte": "^5.3.18",
57 |     "babel-loader": "^8.1.0",
58 |     "eslint": "^6.8.0",
59 |     "eslint-plugin-svelte3": "^2.7.3",
60 |     "husky": "^4.2.5",
61 |     "lint-staged": "^10.2.2",
62 |     "npm-run-all": "^4.1.5",
63 |     "prettier": "^2.0.5",
64 |     "prettier-plugin-svelte": "^0.7.0",
65 |     "rollup": "^2.7.6",
66 |     "rollup-plugin-svelte": "^6.1.1",
67 |     "rollup-plugin-terser": "^5.3.0",
68 |     "svelte": "^3.21.0",
69 |     "svelte-loader": "^2.13.6"
70 |   },
71 |   "dependencies": {
72 |     "lottie-web": "^5.10.0"
73 |   },
74 |   "files": [
75 |     "src/components",
76 |     "dist"
77 |   ],
78 |   "husky": {
79 |     "hooks": {
80 |       "pre-commit": "lint-staged"
81 |     }
82 |   },
83 |   "lint-staged": {
84 |     "*.{html, css, scss, stylus, js, ts, json, yml, md}": [
85 |       "prettier --write"
86 |     ],
87 |     "*.{js, svelte}": [
88 |       "eslint . --fix"
89 |     ]
90 |   },
91 |   "publishConfig": {
92 |     "access": "public"
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   arrowParens: 'avoid',
 3 |   bracketSpacing: true,
 4 |   endOfLine: 'lf',
 5 |   insertPragma: false,
 6 |   jsxBracketSameLine: false,
 7 |   printWidth: 120,
 8 |   proseWrap: 'always',
 9 |   requirePragma: false,
10 |   semi: true,
11 |   singleQuote: true,
12 |   tabWidth: 2,
13 |   trailingComma: 'all',
14 |   useTabs: false,
15 |   overrides: [
16 |     {
17 |       files: '*.json',
18 |       options: {
19 |         tabWidth: 2,
20 |         singleQuote: false,
21 |       },
22 |     },
23 |   ],
24 | 
25 |   // Svelte configs
26 |   svelteSortOrder: 'styles-scripts-markup',
27 |   svelteStrictMode: true,
28 |   svelteBracketNewLine: true,
29 |   svelteAllowShorthand: true,
30 | };
31 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import commonjs from '@rollup/plugin-commonjs';
 2 | import resolve from '@rollup/plugin-node-resolve';
 3 | import strip from '@rollup/plugin-strip';
 4 | import svelte from 'rollup-plugin-svelte';
 5 | import { terser } from 'rollup-plugin-terser';
 6 | 
 7 | import pkg from './package.json';
 8 | 
 9 | const isProduction = !process.env.ROLLUP_WATCH;
10 | const name = pkg.name
11 |   .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
12 |   .replace(/^\w/, m => m.toUpperCase())
13 |   .replace(/-\w/g, m => m[1].toUpperCase());
14 | 
15 | export default {
16 |   input: 'src/components/index.js',
17 |   output: [
18 |     {
19 |       file: pkg.module,
20 |       format: 'es',
21 |       sourcemap: true,
22 |       name,
23 |     },
24 |     {
25 |       file: pkg.main,
26 |       format: 'umd',
27 |       sourcemap: true,
28 |       name,
29 |     },
30 |   ],
31 |   plugins: [
32 |     // Strip assert and console.log statements
33 |     strip(),
34 | 
35 |     svelte({
36 |       // Enable run-time checks when not in production
37 |       dev: !isProduction,
38 |     }),
39 | 
40 |     // If you have external dependencies installed from
41 |     // npm, you'll most likely need these plugins. In
42 |     // some cases you'll need additional configuration —
43 |     // consult the documentation for details:
44 |     // https://github.com/rollup/plugins/tree/master/packages/commonjs
45 |     resolve({
46 |       browser: true,
47 |       dedupe: importee => {
48 |         return importee === 'svelte' || importee.startsWith('svelte/');
49 |       },
50 |     }),
51 |     commonjs(),
52 | 
53 |     // In production mode, minify
54 |     isProduction && terser(),
55 |   ],
56 | 
57 |   watch: {
58 |     clearScreen: true,
59 |   },
60 | };
61 | 


--------------------------------------------------------------------------------
/src/components/ColorPicker.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { createEventDispatcher } from "svelte";
  3 | 
  4 |   // Create event dispatcher
  5 |   const dispatch = createEventDispatcher();
  6 | 
  7 |   export let color;
  8 | 
  9 |   let red = 0;
 10 |   let green = 0;
 11 |   let blue = 0;
 12 |   let rgba = null;
 13 |   let hex = null;
 14 | 
 15 |   const parseColor = input => {
 16 |     if (typeof input !== "string") {
 17 |       return;
 18 |     }
 19 | 
 20 |     let colorComponents = [];
 21 | 
 22 |     if (input[0] === "#") {
 23 |       colorComponents =
 24 |         input.length === 4
 25 |           ? [input.slice(1, 2), input.slice(2, 3), input.slice(3, 4)].map(n =>
 26 |               parseInt(`${n}${n}`, 16)
 27 |             )
 28 |           : [input.slice(1, 3), input.slice(3, 5), input.slice(5, 7)].map(n =>
 29 |               parseInt(n, 16)
 30 |             );
 31 |     } else if (input.startsWith("rgb")) {
 32 |       colorComponents = input.match(/\d+/g).map(n => parseInt(n));
 33 |     }
 34 | 
 35 |     if (colorComponents.length) {
 36 |       red = colorComponents[0];
 37 |       green = colorComponents[1];
 38 |       blue = colorComponents[2];
 39 |     }
 40 |   };
 41 | 
 42 |   $: parseColor(color);
 43 | 
 44 |   $: {
 45 |     dispatch("color", {
 46 |       hex,
 47 |       rgb
 48 |     });
 49 |   }
 50 | 
 51 |   $: rgb = `rgb(${red}, ${green}, ${blue})`;
 52 | 
 53 |   $: hex =
 54 |     "#" +
 55 |     (red | (1 << 8)).toString(16).slice(1) +
 56 |     (green | (1 << 8)).toString(16).slice(1) +
 57 |     (blue | (1 << 8)).toString(16).slice(1);
 58 | </script>
 59 | 
 60 | <style>
 61 |   .text-input {
 62 |     border: 1px #ccc solid;
 63 |     border-radius: 5px;
 64 |     padding: 3px;
 65 |     width: 60px;
 66 |     margin: 0;
 67 |   }
 68 | 
 69 |   .color-picker {
 70 |     display: flex;
 71 |     flex-direction: row;
 72 |     justify-content: space-between;
 73 |     height: 90px;
 74 |   }
 75 | 
 76 |   .color-selectors {
 77 |     display: flex;
 78 |     flex-direction: column;
 79 |     justify-content: space-between;
 80 |   }
 81 | 
 82 |   .color-component {
 83 |     display: flex;
 84 |     flex-direction: row;
 85 |     font-size: 12px;
 86 |     align-items: center;
 87 |     justify-content: center;
 88 |   }
 89 | 
 90 |   .color-component strong {
 91 |     width: 40px;
 92 |   }
 93 | 
 94 |   .color-component input[type="range"] {
 95 |     margin: 0 0 0 10px;
 96 |   }
 97 | 
 98 |   .color-component input[type="number"] {
 99 |     width: 50px;
100 |     margin: 0 0 0 10px;
101 |   }
102 | 
103 |   .color-preview {
104 |     font-size: 12px;
105 |     display: flex;
106 |     flex-direction: column;
107 |     align-items: center;
108 |     justify-content: space-between;
109 |   }
110 | 
111 |   .preview {
112 |     height: 60px;
113 |     width: 60px;
114 |   }
115 | </style>
116 | 
117 | <div class="color-picker">
118 |   <div class="color-selectors">
119 |     <div class="color-component">
120 |       <strong>Red</strong>
121 |       <input type="range" min="0" max="255" bind:value={red} />
122 |       <input class="text-input" type="number" bind:value={red} />
123 |     </div>
124 |     <div class="color-component">
125 |       <strong>Green</strong>
126 |       <input type="range" min="0" max="255" bind:value={green} />
127 |       <input class="text-input" type="number" bind:value={green} />
128 |     </div>
129 |     <div class="color-component">
130 |       <strong>Blue</strong>
131 |       <input type="range" min="0" max="255" bind:value={blue} />
132 |       <input class="text-input" type="number" bind:value={blue} />
133 |     </div>
134 |   </div>
135 |   <div class="color-preview">
136 |     <div class="preview" style="background: {rgb}" />
137 |     <div>
138 |       <input
139 |         class="text-input"
140 |         type="text"
141 |         value={hex}
142 |         on:change={e => parseColor(e.target.value)} />
143 |     </div>
144 |   </div>
145 | </div>
146 | 


--------------------------------------------------------------------------------
/src/components/Controls.svelte:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   .lottie-player-controls {
  3 |     align-items: center;
  4 |     display: flex;
  5 |     justify-content: space-between;
  6 |     padding: 4px 8px;
  7 |     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
  8 |       sans-serif !important;
  9 |   }
 10 | 
 11 |   .lottie-player-controls > div {
 12 |     margin-left: 4px;
 13 |   }
 14 | 
 15 |   .spacer {
 16 |     flex-grow: 1;
 17 |     width: 14px;
 18 |   }
 19 | 
 20 |   .btn {
 21 |     cursor: pointer;
 22 |     fill: #999;
 23 |     width: 14px;
 24 |   }
 25 | 
 26 |   .btn:hover {
 27 |     fill: #222;
 28 |   }
 29 | 
 30 |   .btn.active {
 31 |     fill: #555;
 32 |   }
 33 | 
 34 |   .progress {
 35 |     -webkit-appearance: none;
 36 |     -moz-apperance: none;
 37 |     width: 100%;
 38 |     margin: 0 10px;
 39 |     height: 4px;
 40 |     border-radius: 3px;
 41 |     cursor: pointer;
 42 |   }
 43 |   .progress:focus {
 44 |     outline: none;
 45 |     border: none;
 46 |   }
 47 |   .progress::-moz-range-track {
 48 |     cursor: pointer;
 49 |     background: none;
 50 |     border: none;
 51 |     outline: none;
 52 |   }
 53 |   .progress::-webkit-slider-thumb {
 54 |     -webkit-appearance: none !important;
 55 |     height: 13px;
 56 |     width: 13px;
 57 |     border: 0;
 58 |     border-radius: 50%;
 59 |     background: #0fccce;
 60 |     cursor: pointer;
 61 |   }
 62 |   .progress::-moz-range-thumb {
 63 |     -moz-appearance: none !important;
 64 |     height: 13px;
 65 |     width: 13px;
 66 |     border: 0;
 67 |     border-radius: 50%;
 68 |     background: #0fccce;
 69 |     cursor: pointer;
 70 |   }
 71 |   .progress::-ms-track {
 72 |     width: 100%;
 73 |     height: 3px;
 74 |     cursor: pointer;
 75 |     background: transparent;
 76 |     border-color: transparent;
 77 |     color: transparent;
 78 |   }
 79 |   .progress::-ms-fill-lower {
 80 |     background: #ccc;
 81 |     border-radius: 3px;
 82 |   }
 83 |   .progress::-ms-fill-upper {
 84 |     background: #ccc;
 85 |     border-radius: 3px;
 86 |   }
 87 |   .progress::-ms-thumb {
 88 |     border: 0;
 89 |     height: 15px;
 90 |     width: 15px;
 91 |     border-radius: 50%;
 92 |     background: #0fccce;
 93 |     cursor: pointer;
 94 |   }
 95 |   .progress:focus::-ms-fill-lower {
 96 |     background: #ccc;
 97 |   }
 98 |   .progress:focus::-ms-fill-upper {
 99 |     background: #ccc;
100 |   }
101 | 
102 |   .popover {
103 |     padding: 10px;
104 |     background: #fff;
105 |     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana,
106 |       sans-serif;
107 |     font-size: 0.75rem;
108 |     border-radius: 5px;
109 |   }
110 | 
111 |   .popover-snapshot {
112 |     width: 150px;
113 |   }
114 |   .popover-snapshot h5 {
115 |     margin: 5px 0 10px 0;
116 |     font-size: 0.75rem;
117 |   }
118 |   .popover-snapshot a {
119 |     display: block;
120 |     text-decoration: none;
121 |   }
122 |   .popover-snapshot a:before {
123 |     content: '⥼';
124 |     margin-right: 5px;
125 |   }
126 |   .popover-snapshot .note {
127 |     display: block;
128 |     margin-top: 10px;
129 |     color: #999;
130 |   }
131 | 
132 |   .popover-info {
133 |     width: 250px;
134 |   }
135 | 
136 |   .frame-number {
137 |     outline: none;
138 |     border: 1px #ccc solid;
139 |     border-radius: 3px;
140 |     width: 40px;
141 |     text-align: center;
142 |     color: #999;
143 |     font-size: 0.7rem;
144 |     padding: 0;
145 |     font-family: inherit;
146 |   }
147 | 
148 |   .popover-background {
149 |     width: 350px;
150 |   }
151 | </style>
152 | 
153 | <script>
154 |   import { createEventDispatcher } from 'svelte';
155 | 
156 |   import ColorPicker from './ColorPicker.svelte';
157 |   import Info from './Info.svelte';
158 |   import Popover from './Popover.svelte';
159 |   import { ControlsLayoutOptions, PlayerState } from './utils';
160 | 
161 |   // Define icon size
162 |   const ICON_SIZE = { width: 14, height: 14, viewBox: '0 0 24 24' };
163 | 
164 |   // Create event dispatcher
165 |   const dispatch = createEventDispatcher();
166 | 
167 |   export let animationData;
168 |   export let background;
169 |   export let currentState;
170 |   export let frame;
171 |   export let freeze;
172 |   export let instance;
173 |   export let layout = ControlsLayoutOptions;
174 |   export let loop;
175 |   export let play;
176 |   export let progress;
177 |   export let seek;
178 |   export let snapshot;
179 |   export let stop;
180 |   export let toggleZoom;
181 |   export let toggleLooping;
182 |   export let togglePlay;
183 |   export let totalFrames = 0;
184 | 
185 |   let isZoomed = false;
186 | 
187 |   $: isPlaying = currentState === PlayerState.Playing;
188 |   $: isPaused = currentState === PlayerState.Paused;
189 |   $: isStopped = currentState === PlayerState.Stopped;
190 |   $: formattedFrame = Math.round(frame);
191 | 
192 |   const onHandleSeekChange = e => {
193 |     if (!instance || isNaN(e.target.value)) {
194 |       return;
195 |     }
196 | 
197 |     const frame = (e.target.value / 100) * totalFrames;
198 | 
199 |     seek(frame);
200 |   };
201 | 
202 |   const onSelectBackground = e => {
203 |     dispatch('background', {
204 |       color: e.detail.hex,
205 |     });
206 |   };
207 | 
208 |   const onToggleZoom = () => {
209 |     isZoomed = !isZoomed;
210 |     toggleZoom();
211 |   };
212 | 
213 |   const onNextFrame = () => {
214 |     const nextFrame = frame + 1;
215 |     if (nextFrame <= totalFrames) {
216 |       seek(nextFrame);
217 |     }
218 |   };
219 | 
220 |   const oPreviousFrame = () => {
221 |     const prevFrame = frame - 1;
222 |     if (prevFrame >= 0) {
223 |       seek(prevFrame);
224 |     }
225 |   };
226 | </script>
227 | 
228 | <div class="lottie-player-controls">
229 |   {#each layout as item}
230 |     {#if item === 'playpause'}
231 |       <div class="btn" on:click="{togglePlay}" class:active="{isPlaying || isPaused}">
232 |         {#if isPlaying}
233 |           <svg {...ICON_SIZE}>
234 |             <rect height="22.9" rx="1.9" width="7.6" x="14" y=".5"></rect>
235 |             <rect height="22.9" rx="1.9" width="7.6" x="2" y=".5"></rect>
236 |           </svg>
237 |         {:else}
238 |           <svg {...ICON_SIZE}>
239 |             <path d="M2 3.4C2 1.9 3.5 1 4.8 1.8l16.5 9.6c1.2.7 1.2 2.5 0 3.2L4.8 24.2C3.5 25 2 24.1 2 22.6V3.4z"></path>
240 |           </svg>
241 |         {/if}
242 |       </div>
243 |     {:else if item === 'stop'}
244 |       <div class="btn" on:click="{stop}" class:active="{isStopped}">
245 |         <svg {...ICON_SIZE}>
246 |           <path
247 |             d="M2 3.667A1.67 1.67 0 0 1 3.667 2h16.666A1.67 1.67 0 0 1 22 3.667v16.666A1.67 1.67 0 0 1 20.333
248 |             22H3.667A1.67 1.67 0 0 1 2 20.333z"
249 |           ></path>
250 |         </svg>
251 |       </div>
252 |     {:else if item === 'progress'}
253 |       <input
254 |         class=" progress"
255 |         type="range"
256 |         min="0"
257 |         step="1"
258 |         max="100"
259 |         bind:value="{progress}"
260 |         on:input="{onHandleSeekChange}"
261 |         on:mousedown="{freeze}"
262 |         on:mouseup="{play}"
263 |         style={`
264 |           background-image: -webkit-gradient(linear, left top, right top, color-stop(${progress}%, rgba(15, 204, 206, 0.4)), color-stop(${progress}%, #DAE1E7));
265 |           background-image: -moz-linear-gradient(left center, rgba(15, 204, 206, 0.4) 0%, rgba(15, 204, 206, 0.4) ${progress}%, #DAE1E7 ${progress}%, #DAE1E7 100%);
266 |         `}
267 |       />
268 |     {:else if item === 'loop'}
269 |       <div class="btn" on:click="{toggleLooping}" class:active="{loop}">
270 |         <svg {...ICON_SIZE}>
271 |           <path
272 |             d="M12.5 16.8137h-.13v1.8939h4.9696c3.6455 0 6.6113-2.9658 6.6113-6.6116
273 |             0-3.64549-2.9658-6.61131-6.6113-6.61131-.5231 0-.947.42391-.947.94696 0 .52304.4239.94696.947.94696 2.6011 0
274 |             4.7174 2.11634 4.7174 4.71739 0 2.6014-2.1166 4.7177-4.7174 4.7177H12.5zM13.6025
275 |             5.61469v-.13H7.48137C3.83582 5.48469.87 8.45051.87 12.096c0 3.6509 3.17269 6.6117 6.81304 6.6117.52304 0
276 |             .94696-.424.94696-.947 0-.5231-.42392-.947-.94696-.947-2.60804 0-4.91907-2.1231-4.91907-4.7176 0-2.60115
277 |             2.11634-4.71744 4.7174-4.71744h6.12113V5.61469z"
278 |             stroke="#8795A1"
279 |             stroke-width=".26"
280 |           ></path>
281 |           <path
282 |             d="M11.1482
283 |             2.20355h0l-.001-.00116c-.3412-.40061-.9405-.44558-1.33668-.0996h-.00001c-.39526.34519-.43936.94795-.09898
284 |             1.34767l2.51487 3.03683-2.51894 3.06468c-.33872.40088-.29282 1.00363.10347
285 |             1.34723l.08517-.0982-.08517.0982c.17853.1549.39807.2308.61647.2308.2671 0 .5328-.114.72-.3347h0l.0011-.0014
286 |             3.0435-3.68655.0006-.00068c.3035-.35872.3025-.88754-.0019-1.24526l-3.0425-3.65786zM13.9453
287 |             21.7965h0l.001.0011c.3413.4006.9407.4456 1.337.0996h0c.3953-.3452.4395-.9479.099-1.3477l-2.5154-3.0368
288 |             2.5195-3.0647c.3388-.4008.2929-1.0036-.1035-1.3472l-.0852.0982.0852-.0982c-.1786-.1549-.3981-.2308-.6166-.2308-.2671
289 |             0-.5329.114-.7202.3347h0l-.0011.0014-3.0442
290 |             3.6865c-.0001.0003-.0003.0005-.0005.0007-.3036.3587-.3027.8876.0019 1.2453l3.0431 3.6579z"
291 |             fill="#8795A1"
292 |             stroke="#8795A1"
293 |             stroke-width=".26"
294 |           ></path>
295 |         </svg>
296 |       </div>
297 |     {:else if item === 'background'}
298 |       <div class="">
299 |         <Popover color="#fff">
300 |           <div class="btn" slot="target">
301 |             <svg {...ICON_SIZE}>
302 |               <path
303 |                 d="M12 3.1L6.1 8.6a7.6 7.6 0 00-2.2 4 7.2 7.2 0 00.4 4.4 7.9 7.9 0 003 3.5 8.7 8.7 0 004.7 1.3c1.6 0
304 |                 3.2-.5 4.6-1.3s2.4-2 3-3.5a7.2 7.2 0 00.5-4.5 7.6 7.6 0 00-2.2-4L12 3.2zM12 0l7.5 7a9.8 9.8 0 013 5.1
305 |                 9.3 9.3 0 01-.6 5.8c-.9 1.8-2.2 3.3-4 4.4A11.2 11.2 0 0112 24a11.2 11.2 0
306 |                 01-6-1.7c-1.7-1-3-2.6-3.9-4.4a9.3 9.3 0 01-.6-5.8c.4-2 1.5-3.7 3-5L12 0zM6 14h12c0 1.5-.7 3-1.8 4s-2.6
307 |                 1.6-4.2 1.6S9 19 7.8 18s-1.7-2.5-1.7-4z"
308 |               ></path>
309 |             </svg>
310 |           </div>
311 |           <div slot="content" class="popover popover-background">
312 |             <ColorPicker color="{background}" on:color="{onSelectBackground}" />
313 |           </div>
314 |         </Popover>
315 |       </div>
316 |     {:else if item === 'snapshot'}
317 |       <div
318 |         class=""
319 |         on:mouseout="{() => currentState === PlayerState.Frozen && play()}"
320 |         on:mouseover="{() => currentState !== PlayerState.Paused && freeze()}"
321 |       >
322 |         <Popover color="#fff" on:mousewheel="{e => seek(frame + (e.deltaY > 0 ? -1 : 1))}">
323 |           <div class="btn" slot="target">
324 |             <svg {...ICON_SIZE}>
325 |               <path
326 |                 clip-rule="evenodd"
327 |                 d="M0 3.01A2.983 2.983 0 012.983.027H16.99a2.983 2.983 0 012.983 2.983v14.008a2.982 2.982 0 01-2.983
328 |                 2.983H2.983A2.983 2.983 0 010 17.018zm2.983-.941a.941.941 0 00-.942.94v14.01c0
329 |                 .52.422.94.942.94H16.99a.94.94 0 00.941-.94V3.008a.941.941 0 00-.94-.94H2.981z"
330 |                 fill-rule="evenodd"
331 |               ></path>
332 |               <path d="M12.229 7.945l-2.07 4.598-2.586-2.605-2.414 2.758v2.146h9.656V11.93z"></path>
333 |               <circle cx="7.444" cy="6.513" r="2.032"></circle>
334 |               <path
335 |                 d="M9.561 23.916h11.25a2.929 2.929 0 002.926-2.927V9.954a1.06 1.06 0 10-2.122 0v11.035a.805.805 0
336 |                 01-.803.804H9.562a1.061 1.061 0 100 2.123z"
337 |                 stroke="#8795a1"
338 |                 stroke-width=".215"
339 |               ></path>
340 |             </svg>
341 |           </div>
342 |           <div slot="content" class="popover popover-snapshot">
343 |             <h5>Frame {formattedFrame}</h5>
344 |             <a href="#downloadsvg" on:click="{() => snapshot(true)}">Download SVG</a>
345 |             <a href="#downloadsvg" on:click="{() => snapshot(true)}">Download PNG</a>
346 |             <i class="note">Scroll with mousewheel to find exact frame</i>
347 |           </div>
348 |         </Popover>
349 |       </div>
350 |     {:else if item === 'zoom'}
351 |       <div class="btn" on:click="{onToggleZoom}">
352 |         {#if isZoomed}
353 |           <svg {...ICON_SIZE}>
354 |             <path
355 |               d="M7 22a1 1 0 102 0v-4a3 3 0 00-3-3H2a1 1 0 100 2h4a1 1 0 011 1v4zm8 0a1 1 0 102 0v-4a1 1 0 011-1h4a1 1 0
356 |               100-2h-4a3 3 0 00-3 3v4zM2 9h4a3 3 0 003-3V2a1 1 0 10-2 0v4a1 1 0 01-1 1H2a1 1 0 100 2zm16 0h4a1 1 0
357 |               100-2h-4a1 1 0 01-1-1V2a1 1 0 10-2 0v4a3 3 0 003 3z"
358 |               stroke-width=".2"
359 |             ></path>
360 |           </svg>
361 |         {:else}
362 |           <svg {...ICON_SIZE}>
363 |             <path
364 |               d="M21 8a1 1 0 102 0V4a3 3 0 00-3-3h-4a1 1 0 100 2h4a1 1 0 011 1v4zM1 8a1 1 0 102 0V4a1 1 0 011-1h4a1 1 0
365 |               100-2H4a3 3 0 00-3 3v4zm15 15h4a3 3 0 003-3v-4a1 1 0 10-2 0v4a1 1 0 01-1 1h-4a1 1 0 100 2zM4 23h4a1 1 0
366 |               100-2H4a1 1 0 01-1-1v-4a1 1 0 10-2 0v4a3 3 0 003 3z"
367 |               stroke-width=".2"
368 |             ></path>
369 |           </svg>
370 |         {/if}
371 |       </div>
372 |     {:else if item === 'info'}
373 |       <div class="">
374 |         <Popover color="#fff">
375 |           <div class="btn" slot="target">
376 |             <svg {...ICON_SIZE}>
377 |               <path
378 |                 fill-rule="evenodd"
379 |                 clip-rule="evenodd"
380 |                 d="M3.15 0h17.7A3.12 3.12 0 0124 3.1v17.8c0 1.71-1.4 3.1-3.15 3.1H3.15A3.12 3.12 0 010 20.9V3.1C0 1.39
381 |                 1.4 0 3.15 0zm0 2.05c-.6 0-1.07.47-1.07 1.05v17.8c0 .58.48 1.05 1.07 1.05h17.7c.6 0 1.07-.47
382 |                 1.07-1.05V3.1c0-.58-.48-1.05-1.07-1.05H3.15z"
383 |               ></path>
384 |               <path
385 |                 fill-rule="evenodd"
386 |                 clip-rule="evenodd"
387 |                 d="M12 10c.55 0 1 .42 1 .94v6.12c0 .52-.45.94-1 .94s-1-.42-1-.94v-6.12c0-.52.45-.94 1-.94zM12 6a1 1 0
388 |                 011 1v.42a1 1 0 11-2 0V7a1 1 0 011-1z"
389 |               ></path>
390 |             </svg>
391 |           </div>
392 |           <div slot="content" class="popover popover-info">
393 |             <Info {animationData} />
394 |           </div>
395 |         </Popover>
396 |       </div>
397 |     {:else if item === 'frame'}
398 |       <div class="">
399 |         <input
400 |           class="frame-number"
401 |           type="text"
402 |           bind:value="{formattedFrame}"
403 |           on:mouseout="{() => currentState === PlayerState.Frozen && play()}"
404 |           on:mouseover="{() => currentState !== PlayerState.Paused && freeze()}"
405 |           on:input="{e => seek(e.target.value)}"
406 |           on:mousewheel="{e => seek(frame + (e.deltaY > 0 ? -1 : 1))}"
407 |         />
408 |       </div>
409 |     {:else if item === 'nextFrame'}
410 |       <div class="btn" on:click="{onNextFrame}">
411 |         <svg {...ICON_SIZE}>
412 |           <path
413 |             d="M2 19.513a1.429 1.429 0 0 0 2.148 1.234l12.88-7.513a1.429 1.429 0 0 0 0-2.468L4.147 3.253A1.429 1.429 0 0
414 |             0 2 4.487z"
415 |           ></path>
416 |           <rect height="17.143" rx="1.429" transform="matrix(1 0 0 -1 16.286 20.571)" width="5.714"></rect>
417 |         </svg>
418 |       </div>
419 |     {:else if item === 'previousFrame'}
420 |       <div class="btn" on:click="{oPreviousFrame}">
421 |         <svg {...ICON_SIZE}>
422 |           <path d="M22 4.5a1.4 1.4 0 00-2.1-1.2l-13 7.5a1.4 1.4 0 000 2.4l13 7.5a1.4 1.4 0 002.1-1.2z"></path>
423 |           <rect height="17.1" rx="1.4" transform="matrix(-1 0 0 1 7.7 3.4)" width="5.7"></rect>
424 |         </svg>
425 |       </div>
426 |     {:else if item === 'spacer'}
427 |       <div class="spacer"></div>
428 |     {/if}
429 |   {/each}
430 | </div>
431 | 


--------------------------------------------------------------------------------
/src/components/Info.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   export let animationData;
  3 | 
  4 |   let author;
  5 |   let frameRate;
  6 |   let generator;
  7 |   let keywords;
  8 |   let numAssets;
  9 |   let numFonts;
 10 |   let numFrames;
 11 |   let numLayers;
 12 |   let themeColor;
 13 |   let version;
 14 |   let hasMeta = false;
 15 | 
 16 |   $: {
 17 |     if (animationData) {
 18 |       frameRate = animationData.fr;
 19 |       numAssets = animationData.assets ? animationData.assets.length : 0;
 20 |       numFonts = animationData.fonts ? animationData.fonts.length : 0;
 21 |       numFrames = animationData.op - animationData.ip;
 22 |       numLayers = animationData.layers ? animationData.layers.length : 0;
 23 |       version = animationData.v;
 24 | 
 25 |       if (animationData.meta) {
 26 |         hasMeta = true;
 27 |         author = animationData.meta.a;
 28 |         generator = animationData.meta.g;
 29 |         keywords = animationData.meta.k;
 30 |         themeColor = animationData.meta.tc;
 31 |       }
 32 |     }
 33 |   }
 34 | </script>
 35 | 
 36 | <style>
 37 |   h4 {
 38 |     font-size: 0.85rem;
 39 |     padding: 5px;
 40 |     margin: 0;
 41 |   }
 42 |   .property {
 43 |     display: flex;
 44 |     flex-direction: row;
 45 |     font-size: 0.75rem;
 46 |     align-items: center;
 47 |     justify-content: space-between;
 48 |     padding: 3px 5px;
 49 |   }
 50 | 
 51 |   .label {
 52 |     display: block;
 53 |     color: #999;
 54 |   }
 55 | 
 56 |   .value {
 57 |     display: block;
 58 |     color: #666;
 59 |   }
 60 | </style>
 61 | 
 62 | <h4>Info</h4>
 63 | 
 64 | {#if version}
 65 |   <div class="property">
 66 |     <span class="label">Lottie Version</span>
 67 |     <span class="value">{version}</span>
 68 |   </div>
 69 | {/if}
 70 | 
 71 | {#if numFrames}
 72 |   <div class="property">
 73 |     <span class="label">Frames</span>
 74 |     <span class="value">{numFrames}</span>
 75 |   </div>
 76 | {/if}
 77 | 
 78 | {#if frameRate}
 79 |   <div class="property">
 80 |     <span class="label">Frame Rate</span>
 81 |     <span class="value">{frameRate}</span>
 82 |   </div>
 83 | {/if}
 84 | 
 85 | {#if numLayers}
 86 |   <div class="property">
 87 |     <span class="label">Layers</span>
 88 |     <span class="value">{numLayers}</span>
 89 |   </div>
 90 | {/if}
 91 | 
 92 | {#if numAssets}
 93 |   <div class="property">
 94 |     <span class="label">Assets</span>
 95 |     <span class="value">{numAssets}</span>
 96 |   </div>
 97 | {/if}
 98 | 
 99 | {#if numFonts}
100 |   <div class="property">
101 |     <span class="label">Fonts</span>
102 |     <span class="value">{numFonts}</span>
103 |   </div>
104 | {/if}
105 | 
106 | {#if hasMeta}
107 |   <hr />
108 | 
109 |   {#if generator}
110 |     <div class="property">
111 |       <span class="label">Generator</span>
112 |       <span class="value">{generator}</span>
113 |     </div>
114 |   {/if}
115 | 
116 |   {#if author}
117 |     <div class="property">
118 |       <span class="label">Author</span>
119 |       <span class="value">{author}</span>
120 |     </div>
121 |   {/if}
122 | 
123 |   {#if keywords}
124 |     <div class="property">
125 |       <span class="label">Keywords</span>
126 |       <span class="value">{keywords}</span>
127 |     </div>
128 |   {/if}
129 | 
130 |   {#if themeColor}
131 |     <div class="property">
132 |       <span class="label">Theme Color</span>
133 |       <span class="value">{themeColor}</span>
134 |     </div>
135 |   {/if}
136 | {/if}
137 | 


--------------------------------------------------------------------------------
/src/components/LottiePlayer.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { onDestroy, onMount } from "svelte";
  3 |   import lottie from "lottie-web";
  4 | 
  5 |   import Controls from "./Controls.svelte";
  6 | 
  7 |   import { SVELTE_LOTTIE_PLAYER_VERSION, LOTTIE_WEB_VERSION } from './versions.js'
  8 | 
  9 |   import {
 10 |     PlayerEvents,
 11 |     PlayerRender,
 12 |     PlayerState,
 13 |     PlayMode,
 14 |     parseSrc,
 15 |     triggerDownload
 16 |   } from "./utils";
 17 | 
 18 |   // Autoplay animation on load
 19 |   export let autoplay = false;
 20 | 
 21 |   // Background color
 22 |   export let background;
 23 | 
 24 |   // Show controls
 25 |   export let controls;
 26 | 
 27 |   // Controls layout
 28 |   export let controlsLayout;
 29 | 
 30 |   // Number of times to loop animation.
 31 |   export let count = undefined;
 32 | 
 33 |   // Default frame to show if autoplay is disabled
 34 |   export let defaultFrame = 0;
 35 | 
 36 |   // Direction of animation
 37 |   export let direction = 1;
 38 | 
 39 |   // Player height
 40 |   export let height;
 41 | 
 42 |   // Whether to play on mouse hover
 43 |   export let hover = false;
 44 | 
 45 |   // Whether to loop animation
 46 |   export let loop = false;
 47 | 
 48 |   // Play mode
 49 |   export let mode = PlayMode.Normal;
 50 | 
 51 |   // Callback for when zoom is triggered
 52 |   export let onToggleZoom = undefined;
 53 | 
 54 |   // Renderer to use in lottie-web
 55 |   export let renderer = PlayerRender.SVG;
 56 | 
 57 |   // Playback speed.
 58 |   export let speed = 1;
 59 | 
 60 |   // Lottie file as either a URL or JSON content.
 61 |   export let src = "";
 62 | 
 63 |   // Styling for the Player's wrapper element
 64 |   export let style = "";
 65 | 
 66 |   // Player width
 67 |   export let width;
 68 | 
 69 |   let animationData;
 70 |   let animationRef;
 71 |   let playerRef;
 72 |   let wrapperRef;
 73 |   let instance;
 74 |   let frame = 0;
 75 |   let progress = 0;
 76 |   let io;
 77 |   let currentState = PlayerState.Loading;
 78 |   let isZoomed = false;
 79 |   let playerHeight;
 80 |   let playerWidth;
 81 |   let totalFrames;
 82 | 
 83 |   /**
 84 |    * Handle visibility change events.
 85 |    */
 86 |   const onVisibilityChange = () => {
 87 |     if (document.hidden === true && currentState === PlayerState.Playing) {
 88 |       freeze();
 89 |     } else if (currentState === PlayerState.Frozen) {
 90 |       play();
 91 |     }
 92 |   };
 93 | 
 94 |   /**
 95 |    * Initialize everything on component mount.
 96 |    */
 97 |   onMount(() => {
 98 |     if ("IntersectionObserver" in window) {
 99 |       io = new IntersectionObserver(entries => {
100 |         if (entries[0].isIntersecting) {
101 |           if (currentState === PlayerState.Frozen) {
102 |             play();
103 |           }
104 |         } else if (currentState === PlayerState.Playing) {
105 |           freeze();
106 |         }
107 |       });
108 | 
109 |       io.observe(animationRef);
110 |     }
111 | 
112 |     // Add listener for Visibility API's change event.
113 |     if (typeof document.hidden !== "undefined") {
114 |       document.addEventListener("visibilitychange", onVisibilityChange);
115 |     }
116 | 
117 |     // Setup lottie player
118 |     if (src) {
119 |       load(src);
120 |     }
121 |   });
122 | 
123 |   /**
124 |    * Cleanup on component destroy.
125 |    */
126 |   onDestroy(() => {
127 |     // Remove intersection observer for detecting component being out-of-view.
128 |     if (io) {
129 |       io.disconnect();
130 |       io = undefined;
131 |     }
132 | 
133 |     // Remove the attached Visibility API's change event listener.
134 |     document.removeEventListener("visibilitychange", onVisibilityChange);
135 |   });
136 | 
137 |   /**
138 |    * Configure and initialize lottie-web player instance.
139 |    */
140 |   export const load = srcValue => {
141 |     if (!animationRef) {
142 |       return;
143 |     }
144 | 
145 |     // Clear previous animation, if any
146 |     if (instance) {
147 |       instance.destroy();
148 |     }
149 | 
150 |     const options = {
151 |       container: animationRef,
152 |       loop,
153 |       autoplay,
154 |       renderer,
155 |       rendererSettings: {
156 |         preserveAspectRatio: "xMidYMid meet",
157 |         clearCanvas: true,
158 |         progressiveLoad: true,
159 |         hideOnTransparent: true
160 |       }
161 |     };
162 | 
163 |     // Load the resource information
164 |     try {
165 |       const srcParsed = parseSrc(srcValue);
166 |       const srcAttrib =
167 |         typeof srcParsed === "string" ? "path" : "animationData";
168 | 
169 |       // Initialize lottie player and load animation
170 |       instance = lottie.loadAnimation({
171 |         ...options,
172 |         [srcAttrib]: srcParsed
173 |       });
174 |     } catch (err) {
175 |       currentState = PlayerState.Error;
176 |       dispatchEvent(new CustomEvent(PlayerEvents.Error));
177 |     }
178 | 
179 |     if (instance) {
180 |       // Calculate and save the current progress of the animation
181 |       instance.addEventListener("enterFrame", () => {
182 |         frame = instance.currentFrame;
183 |         progress = (instance.currentFrame / instance.totalFrames) * 100;
184 | 
185 |         dispatchEvent(
186 |           new CustomEvent(PlayerEvents.Frame, {
187 |             detail: {
188 |               frame: instance.currentFrame,
189 |               progress: progress
190 |             }
191 |           })
192 |         );
193 |       });
194 | 
195 |       instance.addEventListener("complete", () => {
196 |         if (currentState !== PlayerState.Playing) {
197 |           dispatchEvent(new CustomEvent(PlayerEvents.Complete));
198 |           return;
199 |         }
200 | 
201 |         if (!loop || (count && _counter >= count)) {
202 |           dispatchEvent(new CustomEvent(PlayerEvents.Complete));
203 |           return;
204 |         }
205 | 
206 |         if (mode === PlayMode.Bounce) {
207 |           if (count) {
208 |             _counter += 0.5;
209 |           }
210 | 
211 |           setTimeout(() => {
212 |             dispatchEvent(new CustomEvent(PlayerEvents.Loop));
213 | 
214 |             if (currentState === PlayerState.Playing) {
215 |               instance.setDirection(instance.playDirection * -1);
216 |               instance.play();
217 |             }
218 |           }, intermission);
219 |         } else {
220 |           if (count) {
221 |             _counter += 1;
222 |           }
223 | 
224 |           window.setTimeout(() => {
225 |             dispatchEvent(new CustomEvent(PlayerEvents.Loop));
226 | 
227 |             if (currentState === PlayerState.Playing) {
228 |               instance.stop();
229 |               instance.play();
230 |             }
231 |           }, intermission);
232 |         }
233 |       });
234 | 
235 |       // Handle animation data load complete
236 |       instance.addEventListener("data_ready", () => {
237 |         animationData = instance.animationData;
238 |         totalFrames = instance.totalFrames;
239 |       });
240 | 
241 |       // Set error state when animation load fail event triggers
242 |       instance.addEventListener("data_failed", () => {
243 |         currentState = PlayerState.Error;
244 | 
245 |         dispatchEvent(new CustomEvent(PlayerEvents.Error));
246 |       });
247 | 
248 |       // Set handlers to auto play animation on hover if enabled
249 |       animationRef.addEventListener("mouseenter", () => {
250 |         if (hover && currentState !== PlayerState.Playing) {
251 |           play();
252 |         }
253 |       });
254 |       animationRef.addEventListener("mouseleave", () => {
255 |         if (hover && currentState === PlayerState.Playing) {
256 |           stop();
257 |         }
258 |       });
259 | 
260 |       // Set initial playback speed and direction
261 |       setSpeed(speed);
262 |       setDirection(direction);
263 | 
264 |       // Start playing if autoplay is enabled
265 |       if (autoplay) {
266 |         play();
267 |       } else if (!isNaN(defaultFrame)) {
268 |         instance.goToAndStop(defaultFrame, true);
269 |       }
270 |     }
271 |   };
272 | 
273 |   /**
274 |    * Returns the lottie-web instance used in the component.
275 |    */
276 |   export const getLottie = () => {
277 |     return instance;
278 |   };
279 | 
280 |   /**
281 |    * Start playing animation.
282 |    */
283 |   export const play = () => {
284 |     if (!instance) {
285 |       return;
286 |     }
287 | 
288 |     currentState = PlayerState.Playing;
289 |     instance.play();
290 | 
291 |     dispatchEvent(new CustomEvent(PlayerEvents.Play));
292 |   };
293 | 
294 |   /**
295 |    * Returns the lottie-web version and this player's version
296 |    */
297 |    export const getVersions = () => {
298 |     return {
299 |       lottieWebVersion: LOTTIE_WEB_VERSION,
300 |       svelteLottiePlayerVersion: SVELTE_LOTTIE_PLAYER_VERSION,
301 |     };
302 |   }
303 | 
304 |   /**
305 |    * Pause animation play.
306 |    */
307 |   export const pause = () => {
308 |     if (!instance) {
309 |       return;
310 |     }
311 | 
312 |     currentState = PlayerState.Paused;
313 |     instance.pause();
314 | 
315 |     dispatchEvent(new CustomEvent(PlayerEvents.Pause));
316 |   };
317 | 
318 |   /**
319 |    * Stops animation play.
320 |    */
321 |   export const stop = () => {
322 |     if (!instance) {
323 |       return;
324 |     }
325 | 
326 |     currentState = PlayerState.Stopped;
327 |     instance.stop();
328 | 
329 |     dispatchEvent(new CustomEvent(PlayerEvents.Stop));
330 |   };
331 | 
332 |   /**
333 |    * Freeze animation play.
334 |    * This internal state pauses animation and is used to differentiate between
335 |    * user requested pauses and component instigated pauses.
336 |    */
337 |   export const freeze = () => {
338 |     if (!instance) {
339 |       return;
340 |     }
341 | 
342 |     instance.pause();
343 |     currentState = PlayerState.Frozen;
344 | 
345 |     dispatchEvent(new CustomEvent(PlayerEvents.Freeze));
346 |   };
347 | 
348 |   /**
349 |    * Resize animation.
350 |    */
351 |   export const resize = () => {
352 |     if (!instance) {
353 |       return;
354 |     }
355 | 
356 |     instance.resize();
357 |   };
358 | 
359 |   /**
360 |    * Seek to a given frame.
361 |    */
362 |   export const seek = value => {
363 |     if (!instance) {
364 |       return;
365 |     }
366 | 
367 |     // Extract frame number from either number or percentage value
368 |     const matches = value.toString().match(/^([0-9\.]+)(%?)$/);
369 |     if (!matches) {
370 |       return;
371 |     }
372 | 
373 |     // Calculate and set the frame number
374 |     const resolvedFrame =
375 |       matches[2] === "%"
376 |         ? (instance.totalFrames * Number(matches[1])) / 100
377 |         : Number(matches[1]);
378 | 
379 |     // Send lottie player to the new frame
380 |     if (currentState === PlayerState.Playing) {
381 |       instance.goToAndPlay(resolvedFrame, true);
382 |     } else {
383 |       instance.goToAndStop(resolvedFrame, true);
384 |       instance.pause();
385 |     }
386 |   };
387 | 
388 |   /**
389 |    * Snapshot the current frame as SVG.
390 |    *
391 |    * If 'download' argument is boolean true, then a download is triggered in browser.
392 |    */
393 |   export const snapshot = (download = true) => {
394 |     let data;
395 | 
396 |     if (renderer === PlayerRender.SVG) {
397 |       // Get SVG element and serialize markup
398 |       const svgElement = animationRef.querySelector("svg");
399 |       const serializedSvg = new XMLSerializer().serializeToString(svgElement);
400 |       data =
401 |         "data:image/svg+xml;charset=utf-8," + encodeURIComponent(serializedSvg);
402 | 
403 |       // Trigger file download if needed
404 |       if (download) {
405 |         triggerDownload(data, `snapshot_${progress}.svg`);
406 |       }
407 |     } else if (renderer === PlayerRender.Canvas) {
408 |       const canvas = animationRef.querySelector("canvas");
409 |       data = canvas.toDataURL("image/png");
410 | 
411 |       // Trigger file download if needed
412 |       if (download) {
413 |         triggerDownload(data, `snapshot_${progress}.png`);
414 |       }
415 |     }
416 | 
417 |     return data;
418 |   };
419 | 
420 |   /**
421 |    * Sets the looping of the animation.
422 |    *
423 |    * @param value Whether to enable looping. Boolean true enables looping.
424 |    */
425 |   export const setLooping = value => {
426 |     if (instance) {
427 |       loop = value;
428 |     }
429 |   };
430 | 
431 |   /**
432 |    * Sets animation play speed.
433 |    *
434 |    * @param value Playback speed.
435 |    */
436 |   export const setSpeed = value => {
437 |     if (instance) {
438 |       speed = value;
439 |     }
440 |   };
441 | 
442 |   /**
443 |    * Animation play direction.
444 |    *
445 |    * @param value Direction values.
446 |    */
447 |   export const setDirection = value => {
448 |     if (instance) {
449 |       direction = value;
450 |     }
451 |   };
452 | 
453 |   /**
454 |    * Toggle playing state.
455 |    */
456 |   export const togglePlay = () => {
457 |     return currentState === PlayerState.Playing ? pause() : play();
458 |   };
459 | 
460 |   /**
461 |    * Toggles animation looping.
462 |    */
463 |   export const toggleLooping = () => {
464 |     setLooping(!loop);
465 |   };
466 | 
467 |   /**
468 |    * Sets background color.
469 |    */
470 |   export const setBackground = value => {
471 |     background = value;
472 |   };
473 | 
474 |   export const toggleZoom = () => {
475 |     // Check if custom handler for zoom toggle is set
476 |     if (typeof onToggleZoom === "function") {
477 |       // Call the custom zoom toggle handler with current zoom status
478 |       // Set return value as the zoom status
479 |       isZoomed = Boolean(onToggleZoom(isZoomed));
480 | 
481 |       return;
482 |     }
483 | 
484 |     if (!isZoomed) {
485 |       wrapperRef.style.height = playerHeight + "px";
486 |       wrapperRef.style.width = playerWidth + "px";
487 | 
488 |       document.body.appendChild(playerRef);
489 |     } else {
490 |       wrapperRef.appendChild(playerRef);
491 | 
492 |       wrapperRef.style.height = undefined;
493 |       wrapperRef.style.width = undefined;
494 |     }
495 | 
496 |     isZoomed = !isZoomed;
497 | 
498 |     setTimeout(() => resize(), 100);
499 |   };
500 | 
501 |   // Try load new animation when the src value changes
502 |   $: load(src);
503 | 
504 |   // Update the player with loop prop changes
505 |   $: {
506 |     if (instance) {
507 |       instance.loop = loop;
508 |     }
509 |   }
510 | 
511 |   // Update the player with speed prop changes
512 |   $: {
513 |     if (instance) {
514 |       instance.setSpeed(speed);
515 |     }
516 |   }
517 | 
518 |   // Update the player with direction prop changes
519 |   $: {
520 |     if (instance) {
521 |       instance.setDirection(direction);
522 |     }
523 |   }
524 | </script>
525 | 
526 | <style>
527 |   .lottie-player {
528 |     box-sizing: border-box;
529 |     display: flex;
530 |     flex-direction: column;
531 |     transition: box-shadow 0.6s;
532 |     /* overflow: hidden; */
533 |   }
534 | 
535 |   .lottie-player.is-zoomed {
536 |     position: absolute;
537 |     top: 0;
538 |     left: 0;
539 |     right: 0;
540 |     box-shadow: 0px 0px 56px -14px rgba(0, 0, 0, 0.6);
541 |     margin: 100px;
542 |     border-radius: 6px;
543 |   }
544 | 
545 |   .animation {
546 |     overflow: hidden;
547 |   }
548 | 
549 |   .lottie-player-error {
550 |     display: flex;
551 |     justify-content: center;
552 |     height: 100%;
553 |     align-items: center;
554 |   }
555 | </style>
556 | 
557 | <div
558 |   bind:this={wrapperRef}
559 |   style="{width ? `width:${width}px;` : ''}{height ? `height:${height}px;` : ''}{style}"
560 |   bind:clientHeight={playerHeight}
561 |   bind:clientWidth={playerWidth}>
562 |   <div
563 |     bind:this={playerRef}
564 |     class="lottie-player"
565 |     class:with-controls={controls}
566 |     class:is-zoomed={isZoomed}>
567 |     <div
568 |       class:animation={true}
569 |       bind:this={animationRef}
570 |       style="background: {background}">
571 |       {#if currentState === PlayerState.Error}
572 |         <div class="lottie-player-error">⚠️</div>
573 |       {/if}
574 |     </div>
575 |     {#if controls}
576 |       <Controls
577 |         on:background={e => setBackground(e.detail.color)}
578 |         layout={controlsLayout}
579 |         {animationData}
580 |         {background}
581 |         {controls}
582 |         {currentState}
583 |         {frame}
584 |         {freeze}
585 |         {instance}
586 |         {loop}
587 |         {lottie}
588 |         {pause}
589 |         {play}
590 |         {progress}
591 |         {seek}
592 |         {setDirection}
593 |         {setSpeed}
594 |         {setLooping}
595 |         {snapshot}
596 |         {src}
597 |         {stop}
598 |         {toggleZoom}
599 |         {toggleLooping}
600 |         {togglePlay}
601 |         {totalFrames} />
602 |     {/if}
603 |   </div>
604 | </div>
605 | 


--------------------------------------------------------------------------------
/src/components/Popover.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { onMount } from "svelte";
  3 | 
  4 |   export let color = "transparent";
  5 | 
  6 |   let _triggerRef;
  7 |   let _contentRef;
  8 |   let _alignment;
  9 |   let _open = true;
 10 | 
 11 |   onMount(() => {
 12 |     const triggerBounds = _triggerRef.getBoundingClientRect();
 13 |     const contentBounds = _contentRef.getBoundingClientRect();
 14 | 
 15 |     _alignment =
 16 |       triggerBounds.left + contentBounds.width > window.innerWidth ? -1 : 0;
 17 | 
 18 |     _contentRef.style.bottom = triggerBounds.height + "px";
 19 | 
 20 |     // Start with content box hidden
 21 |     hide();
 22 |   });
 23 | 
 24 |   /**
 25 |    * Show content box
 26 |    */
 27 |   const show = () => {
 28 |     _open = true;
 29 |   };
 30 | 
 31 |   /**
 32 |    * Hide content box
 33 |    */
 34 |   const hide = () => {
 35 |     _open = false;
 36 |   };
 37 | </script>
 38 | 
 39 | <style>
 40 |   .popover {
 41 |     position: relative;
 42 |   }
 43 | 
 44 |   .popover-content {
 45 |     display: inline-block;
 46 |     position: absolute;
 47 |     opacity: 1;
 48 |     visibility: visible;
 49 |     transform: translate(0, -10px);
 50 |     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 51 |     transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
 52 |   }
 53 | 
 54 |   .popover-content.hidden {
 55 |     opacity: 0;
 56 |     visibility: hidden;
 57 |     transform: translate(0, 0px);
 58 |   }
 59 | 
 60 |   .arrow {
 61 |     position: absolute;
 62 |     z-index: -1;
 63 |     content: "";
 64 |     bottom: -9px;
 65 |     border-style: solid;
 66 |     border-width: 10px 10px 0px 10px;
 67 |   }
 68 | 
 69 |   .left-align,
 70 |   .left-align .arrow {
 71 |     left: 0;
 72 |     right: unset;
 73 |   }
 74 | 
 75 |   .right-align,
 76 |   .right-align .arrow {
 77 |     right: 0;
 78 |     left: unset;
 79 |   }
 80 | </style>
 81 | 
 82 | <div
 83 |   class="popover"
 84 |   on:mousedown
 85 |   on:mouseover={show}
 86 |   on:mouseout={hide}
 87 |   on:mouseup
 88 |   on:mousewheel>
 89 |   <div bind:this={_triggerRef}>
 90 |     <slot name="target" />
 91 |   </div>
 92 |   <div
 93 |     class="popover-content"
 94 |     bind:this={_contentRef}
 95 |     class:hidden={!_open}
 96 |     class:left-align={_alignment !== -1}
 97 |     class:right-align={_alignment === -1}>
 98 |     <slot name="content" />
 99 |     <div
100 |       class="arrow"
101 |       style="border-color: {color} transparent transparent transparent;" />
102 |   </div>
103 | </div>
104 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | import LottiePlayer from './LottiePlayer.svelte';
 2 | import Controls from './Controls.svelte';
 3 | import { parseSrc, PlayMode, PlayerEvents, PlayerState } from './utils';
 4 | 
 5 | export {
 6 |   Controls,
 7 |   LottiePlayer,
 8 |   PlayerEvents,
 9 |   PlayerState,
10 |   PlayMode,
11 |   parseSrc,
12 | };
13 | 


--------------------------------------------------------------------------------
/src/components/store.js:
--------------------------------------------------------------------------------
 1 | import { writable } from 'svelte/store';
 2 | 
 3 | export const autoplay = writable();
 4 | export const background = writable();
 5 | export const controls = writable();
 6 | export const loopCount = writable();
 7 | export const defaultFrame = writable();
 8 | export const direction = writable();
 9 | export const hover = writable();
10 | export const loop = writable();
11 | export const mode = writable();
12 | export const speed = writable();
13 | export const state = writable();
14 | 
15 | export const instance = writable();
16 | export const animationData = writable();
17 | export const frame = writable();
18 | export const progress = writable();
19 | 


--------------------------------------------------------------------------------
/src/components/utils.js:
--------------------------------------------------------------------------------
 1 | export const PlayerRender = {
 2 |   SVG: 'svg',
 3 |   Canvas: 'canvas'
 4 | }
 5 | 
 6 | // Define valid player states
 7 | export const PlayerState = {
 8 |   Loading: 'loading',
 9 |   Playing: 'playing',
10 |   Paused: 'paused',
11 |   Stopped: 'stopped',
12 |   Frozen: 'frozen',
13 |   Error: 'error',
14 | };
15 | 
16 | // Define play modes
17 | export const PlayMode = {
18 |   Normal: 'normal',
19 |   Bounce: 'bounce',
20 | };
21 | 
22 | // Define player events
23 | export const PlayerEvents = {
24 |   Load: 'load',
25 |   Error: 'error',
26 |   Ready: 'ready',
27 |   Play: 'play',
28 |   Pause: 'pause',
29 |   Stop: 'stop',
30 |   Freeze: 'freeze',
31 |   Loop: 'loop',
32 |   Complete: 'complete',
33 |   Frame: 'frame',
34 | };
35 | 
36 | // Define controls layout options
37 | export const ControlsLayoutOptions = [
38 |   "previousFrame",
39 |   "playpause",
40 |   "stop",
41 |   "nextFrame",
42 |   "progress",
43 |   "frame",
44 |   "loop",
45 |   "spacer",
46 |   "background",
47 |   "snapshot",
48 |   "info",
49 |   "zoom"
50 | ];
51 | 
52 | /**
53 |  * Parse a resource into a JSON object or a URL string
54 |  */
55 | export const parseSrc = src => {
56 |   if (typeof src === 'object') {
57 |     return src;
58 |   }
59 | 
60 |   try {
61 |     return JSON.parse(src);
62 |   } catch (e) {
63 |     // Try construct an absolute URL from the src URL
64 |     const srcUrl = new URL(src, window.location.href);
65 | 
66 |     return srcUrl.toString();
67 |   }
68 | };
69 | 
70 | /**
71 |  * Trigger the download of the given data URI as a file
72 |  *
73 |  * @param {string} dataUri
74 |  * @param {string} name
75 |  */
76 | export const triggerDownload = (dataUri, filename) => {
77 |   const element = document.createElement('a');
78 |   element.href = dataUri;
79 |   element.download = filename;
80 |   document.body.appendChild(element);
81 | 
82 |   element.click();
83 | 
84 |   document.body.removeChild(element);
85 | };
86 | 


--------------------------------------------------------------------------------
/src/components/versions.js:
--------------------------------------------------------------------------------
1 | export const SVELTE_LOTTIE_PLAYER_VERSION = "0.3.0"; 
2 | export const LOTTIE_WEB_VERSION = "^5.10.0";
3 | 


--------------------------------------------------------------------------------
/src/stories/LottiePlayer.stories.js:
--------------------------------------------------------------------------------
 1 | import { withKnobs, boolean, text, color, number, select } from '@storybook/addon-knobs';
 2 | 
 3 | import LottiePlayer from './Wrapper.svelte';
 4 | import { PlayMode, PlayerRender, ControlsLayoutOptions } from '../components/utils';
 5 | 
 6 | export default {
 7 |   title: 'LottiePlayer',
 8 |   decorators: [withKnobs],
 9 | };
10 | 
11 | export const Basic = () => ({
12 |   Component: LottiePlayer,
13 |   props: {
14 |     src: text('Lottie URL/JSON', 'https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json'),
15 |     renderer: select('Renderer', PlayerRender),
16 |     autoplay: boolean('Auto Play', false),
17 |     loop: boolean('Loop', true),
18 |     mode: select('Playback mode', PlayMode),
19 |     hover: boolean('Play on hover', false),
20 |     background: color('Background', '#ffffff'),
21 |     defaultFrame: number('Default Frame', 100),
22 |     speed: number('Speed', 1),
23 |     height: number('Height', ''),
24 |     width: number('Width', 500),
25 |     controls: boolean('Show Controls', true),
26 |     controlsLayout: text('Controls Layout', ControlsLayoutOptions.join(',')),
27 |     style: text('Styles', ''),
28 |   }
29 | });
30 | 


--------------------------------------------------------------------------------
/src/stories/Wrapper.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import LottiePlayer from "../components/LottiePlayer.svelte";
 3 | 	import { onMount } from 'svelte';
 4 | 
 5 |   export let src;
 6 |   export let autoplay;
 7 |   export let loop;
 8 |   export let controls;
 9 |   export let renderer;
10 |   export let background;
11 |   export let defaultFrame;
12 |   export let hover;
13 |   export let speed;
14 |   export let mode;
15 |   export let width;
16 |   export let height;
17 |   export let style;
18 |   export let controlsLayout;
19 |   export let component = null;
20 | 
21 |   let parsedControlsLayout;
22 | 
23 |   $: parsedControlsLayout = controlsLayout.split(",");
24 | 
25 |   onMount(async () => {
26 |     console.log(component.getVersions());
27 | 	});
28 | </script>
29 | 
30 | <style>
31 |   :global(body) {
32 |     font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
33 |       "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
34 |     font-size: 13px;
35 |   }
36 | </style>
37 | 
38 | <h1>Lottie Player</h1>
39 | <p>Load and play lottie animations</p>
40 | 
41 | <LottiePlayer
42 |   bind:this={component}
43 |   {src}
44 |   {autoplay}
45 |   {loop}
46 |   {controls}
47 |   {renderer}
48 |   {background}
49 |   {defaultFrame}
50 |   {hover}
51 |   {speed}
52 |   {mode}
53 |   {height}
54 |   {width}
55 |   {style}
56 |   controlsLayout={parsedControlsLayout} />
57 | 
58 | <p>
59 |   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
60 |   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
61 |   when an unknown printer took a galley of type and scrambled it to make a type
62 |   specimen book. It has survived not only five centuries, but also the leap into
63 |   electronic typesetting, remaining essentially unchanged. It was popularised in
64 |   the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
65 |   and more recently with desktop publishing software like Aldus PageMaker
66 |   including versions of Lorem Ipsum.
67 | </p>
68 | 


--------------------------------------------------------------------------------