@aarsteinmedia/dotlottie-player 2.0.0

package/dist/esm/index.js

@@ -0,0 +1 @@
+import{css as e,LitElement as t,html as r,nothing as o}from"lit";import{property as i,query as n,state as a,customElement as s}from"lit/decorators.js";import l from"lottie-web";import{zip as c,strFromU8 as d,unzip as p}from"fflate";!function(e){e.Completed="completed",e.Destroyed="destroyed",e.Error="error",e.Frozen="frozen",e.Loading="loading",e.Paused="paused",e.Playing="playing",e.Stopped="stopped"}(PlayerState||(PlayerState={})),function(e){e.Bounce="bounce",e.Normal="normal"}(PlayMode||(PlayMode={})),function(e){e.Complete="complete",e.Destroyed="destroyed",e.Error="error",e.Frame="frame",e.Freeze="freeze",e.Load="load",e.Loop="loop",e.Pause="pause",e.Play="play",e.Ready="ready",e.Rendered="rendered",e.Stop="stop"}(PlayerEvents||(PlayerEvents={}));class CustomError extends Error{}function asyncGeneratorStep$1(e,t,r,o,i,n,a){try{var s=e[n](a),l=s.value}catch(e){r(e);return}s.done?t(l):Promise.resolve(l).then(o,i)}function _async_to_generator$1(e){return function(){var t=this,r=arguments;return new Promise(function(o,i){var n=e.apply(t,r);function a(e){asyncGeneratorStep$1(n,o,i,a,s,"next",e)}function s(e){asyncGeneratorStep$1(n,o,i,a,s,"throw",e)}a(void 0)})}}let aspectRatio=e=>{switch(e){case"contain":case"scale-down":default:return"xMidYMid meet";case"cover":return"xMidYMid slice";case"fill":return"none";case"none":return"xMinYMin slice"}},base64ToU8=e=>{let t=e.substring(e.indexOf(",")+1);return strToU8(isServer()?Buffer.from(t,"base64").toString("binary"):atob(t))},strToU8=e=>{let t=new Uint8Array(e.length);for(let r=0;r<e.length;r++)t[r]=e.charCodeAt(r);return t},createDotLottie=function(){var e=_async_to_generator$1(function*(e,t,r){try{var o;if(!(null==e?void 0:e.length)||!t)throw Error("Missing required params");let i=r||`${useId()}.lottie`,n={"manifest.json":[strToU8(JSON.stringify(t)),{level:0}]};for(let[r,i]of e.entries()){if(null===(o=i.assets)||void 0===o?void 0:o.length)for(let e of i.assets){let{id:t,p:r}=e;if(t&&r){let o=getExtFromB64(r);e.p=`${t}.${o}`,e.e=0,n[`images/${t}.${o}`]=[base64ToU8(r),{level:9}]}}n[`animations/${t.animations[r].id}.json`]=[strToU8(JSON.stringify(i)),{level:9}]}download((yield getArrayBuffer(n)),{name:i,mimeType:"application/zip"})}catch(e){console.error(handleErrors(e).message)}});return function(t,r,o){return e.apply(this,arguments)}}(),download=(e,t)=>{let r=new Blob([e],{type:null==t?void 0:t.mimeType}),o=(null==t?void 0:t.name)||useId(),i=URL.createObjectURL(r),n=document.createElement("a");n.href=i,n.download=o,n.hidden=!0,document.body.appendChild(n),n.click(),setTimeout(()=>{n.remove(),URL.revokeObjectURL(i)},1e3)},handleErrors=e=>{let t={message:"Unknown error",status:isServer()?500:400};return e&&"object"==typeof e&&("message"in e&&"string"==typeof e.message&&(t.message=e.message),"status"in e&&(t.status=Number(e.status))),t},frameOutput=e=>((null!=e?e:0)+1).toString().padStart(3,"0"),getAnimationData=function(){var e=_async_to_generator$1(function*(e){try{if(!e||"string"!=typeof e&&"object"!=typeof e)throw Error("Broken file or invalid file format");if("string"!=typeof e){let t=Array.isArray(e)?e:[e];return{animations:t,manifest:null}}let t=yield fetch(e);if(!t.ok){let e=new CustomError(t.statusText);throw e.status=t.status,e}if("json"===getExt(e)){let e=yield t.json();return{animations:[e],manifest:null}}let{data:r,manifest:o}=yield getLottieJSON(t);return{animations:r,manifest:o,isDotLottie:!0}}catch(e){return console.error(`❌ ${handleErrors(e).message}`),{animations:null,manifest:null}}});return function(t){return e.apply(this,arguments)}}(),getArrayBuffer=function(){var e=_async_to_generator$1(function*(e){let t=yield new Promise((t,r)=>{c(e,{level:9},(e,o)=>{if(e){r(e);return}t(o.buffer)})});return t});return function(t){return e.apply(this,arguments)}}(),getExt=e=>{var t,r;return null!==(r=null===(t=e.split(".").pop())||void 0===t?void 0:t.toLowerCase())&&void 0!==r?r:""},getExtFromB64=e=>{let t=e.split(":")[1].split(";")[0];return t.split("/")[1].split("+")[0]},getFilename=(e,t)=>{let r=getExt(e);return`${e.replace(/\.[^.]*$/,"").replace(/\W+/g,"")}${t?`.${r}`:""}`.toLowerCase()},getLottieJSON=function(){var e=_async_to_generator$1(function*(e){let t=yield unzip(e),r=getManifest(t),o=[];for(let{id:e}of r.animations){let r=d(t[`animations/${e}.json`]),i=JSON.parse(r);yield resolveAssets(t,i.assets),o.push(i)}return{data:o,manifest:r}});return function(t){return e.apply(this,arguments)}}(),getManifest=e=>{let t=d(e["manifest.json"],!1),r=JSON.parse(t);if(!("animations"in r))throw Error("Manifest not found");if(!r.animations.length)throw Error("No animations listed in manifest");return r},getMimeFromExt=e=>{switch(e){case"svg":case"svg+xml":return"image/svg+xml";case"jpg":case"jpeg":return"image/jpeg";case"png":case"gif":case"webp":return`image/${e}`;case"mp3":case"mpeg":case"wav":return`audio/${e}`;default:return""}},isAudio=e=>!("h"in e)&&!("w"in e)&&"p"in e&&"e"in e&&"u"in e&&"id"in e,isImage=e=>"w"in e&&"h"in e&&!("xt"in e)&&"p"in e,isServer=()=>!("undefined"!=typeof window&&window.document),resolveAssets=function(){var e=_async_to_generator$1(function*(e,t){if(!Array.isArray(t))return;let r=[];for(let o of t){if(!isAudio(o)&&!isImage(o))continue;let t=isImage(o)?"images":"audio",i=null==e?void 0:e[`${t}/${o.p}`];i&&r.push(new Promise(e=>{let t=isServer()?Buffer.from(i).toString("base64"):btoa(i.reduce((e,t)=>e+String.fromCharCode(t),""));o.p=`data:${getMimeFromExt(getExt(o.p))};base64,${t}`,o.e=1,o.u="",e()}))}yield Promise.all(r)});return function(t,r){return e.apply(this,arguments)}}(),unzip=function(){var e=_async_to_generator$1(function*(e){let t=new Uint8Array((yield e.arrayBuffer())),r=yield new Promise((e,r)=>{p(t,(t,o)=>{t&&r(t),e(o)})});return r});return function(t){return e.apply(this,arguments)}}(),useId=e=>{let t=()=>((1+Math.random())*65536|0).toString(16).substring(1);return`${null!=e?e:`:${t()}`}-${t()}`};var PlayerState,PlayMode,PlayerEvents,name="@aarsteinmedia/dotlottie-player",version="2.0.0",description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player",exports={".":{import:"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}},main="./dist/index.js",unpkg="./dist/index.js",module="./dist/esm/index.js",types="./dist/index.d.ts",type="module",homepage="https://www.aarstein.media/en/dev/dotlottie-player",repository={url:"https://github.com/johanaarstein/dotlottie-player.git",type:"git"},bugs="https://github.com/johanaarstein/dotlottie-player/issues",author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"},license="GPL-2.0-or-later",scripts={build:"pnpm run cleanup && rollup -c","build:types":"tsc --declaration","build:cem":"npx cem analyze --exclude 'dev/*, src/*, types/*' --litelement",prod:"pnpm run build:types && pnpm run build && pnpm run build:cem",dev:"pnpm run cleanup && rollup -c --watch",lint:"tsc && eslint . --ext .ts,.js","lint:fix":"eslint . --ext .ts,.js --fix",cleanup:"shx rm -rf dist && shx mkdir dist",preinstall:"npx only-allow pnpm"},dependencies={fflate:"^0.8.0",lit:"^2.8.0","lottie-web":"^5.12.2"},devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.4","@rollup/plugin-json":"^6.0.0","@rollup/plugin-node-resolve":"^15.2.1","@rollup/plugin-replace":"^5.0.2","@swc/core":"1.3.75","@types/node":"^20.6.2","@types/react":"^18.2.21","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",eslint:"^8.49.0",rollup:"^3.29.2","rollup-plugin-dts":"^6.0.2","rollup-plugin-html-literals":"^1.1.7","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",shx:"^0.3.4",typescript:"^5.2.2"},customElements="custom-elements.json",files=["custom-elements.json","dist","README.md"],keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"],publishConfig={access:"public"},engines={node:">= 7.6.0"},funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"},pkg={name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding},styles=e`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.seeker,.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb,progress{-webkit-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-ms-thumb,.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower{background:var(--lottie-player-seeker-track-color)}.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;function asyncGeneratorStep(e,t,r,o,i,n,a){try{var s=e[n](a),l=s.value}catch(e){r(e);return}s.done?t(l):Promise.resolve(l).then(o,i)}function _async_to_generator(e){return function(){var t=this,r=arguments;return new Promise(function(o,i){var n=e.apply(t,r);function a(e){asyncGeneratorStep(n,o,i,a,s,"next",e)}function s(e){asyncGeneratorStep(n,o,i,a,s,"throw",e)}a(void 0)})}}function _define_property(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _object_spread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),o.forEach(function(t){_define_property(e,t,r[t])})}return e}function ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function _object_spread_props(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}),e}function _ts_decorate(e,t,r,o){for(var i,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o,s=e.length-1;s>=0;s--)(i=e[s])&&(a=(n<3?i(a):n>3?i(t,r,a):i(t,r))||a);return n>3&&a&&Object.defineProperty(t,r,a),a}let DotLottiePlayer=class extends t{_getOptions(){var e;let t=null!==(e=this.preserveAspectRatio)&&void 0!==e?e:this.objectfit&&aspectRatio(this.objectfit),r=!this.segment||this.segment.some(e=>e<0)?void 0:this.segment.every(e=>e>0)?[this.segment[0]-1,this.segment[1]-1]:this.segment,o={container:this.container,loop:!!this.loop,autoplay:!!this.autoplay,renderer:this.renderer,initialSegment:r,rendererSettings:{imagePreserveAspectRatio:t}};switch(this.renderer){case"svg":o.rendererSettings=_object_spread_props(_object_spread({},o.rendererSettings),{hideOnTransparent:!0,preserveAspectRatio:t,progressiveLoad:!0});break;case"canvas":o.rendererSettings=_object_spread_props(_object_spread({},o.rendererSettings),{clearCanvas:!0,preserveAspectRatio:t,progressiveLoad:!0});break;case"html":o.rendererSettings=_object_spread_props(_object_spread({},o.rendererSettings),{hideOnTransparent:!0})}return o}load(e){var t=this;return _async_to_generator(function*(){var r;if(t.shadowRoot){try{let{animations:r,manifest:o,isDotLottie:i}=yield getAnimationData(e);if(!r||r.some(e=>!t._isLottie(e)))throw Error("Broken or corrupted file");t._isDotLottie=!!i,t._animations=r,t._manifest=null!=o?o:{animations:[{id:useId(),autoplay:t.autoplay,loop:t.loop,direction:t.direction,mode:t.mode,speed:t.speed}]},t._lottieInstance&&t._lottieInstance.destroy(),t._lottieInstance=l.loadAnimation(_object_spread_props(_object_spread({},t._getOptions()),{animationData:r[t._currentAnimation]}))}catch(e){t._errorMessage=handleErrors(e).message,t.currentState=PlayerState.Error,t.dispatchEvent(new CustomEvent(PlayerEvents.Error));return}t._addEventListeners(),t.setSpeed(t.speed),t.setDirection(null!==(r=t.direction)&&void 0!==r?r:1),t.setSubframe(!!t.subframe),t.autoplay&&(-1===t.direction&&t.seek("99%"),t.play())}})()}_addEventListeners(){this._lottieInstance&&(this._lottieInstance.addEventListener("enterFrame",()=>{if(this._lottieInstance){let{currentFrame:e,totalFrames:t}=this._lottieInstance;this._seeker=Math.floor(e/t*100),this.dispatchEvent(new CustomEvent(PlayerEvents.Frame,{detail:{frame:e,seeker:this._seeker}}))}}),this._lottieInstance.addEventListener("complete",()=>{this.currentState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete))}),this._lottieInstance.addEventListener("loopComplete",()=>{var e,t,r;if(!this._lottieInstance)return;let{firstFrame:o,totalFrames:i,playDirection:n}=this._lottieInstance;if(this.count&&(this.mode===PlayMode.Bounce?this._playerState.count+=1:this._playerState.count+=.5,this._playerState.count>=this.count)){this.setLooping(!1),this.currentState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));return}return(this.dispatchEvent(new CustomEvent(PlayerEvents.Loop)),this.mode===PlayMode.Bounce)?(null===(t=this._lottieInstance)||void 0===t||t.goToAndStop(-1===n?o:.99*i,!0),null===(r=this._lottieInstance)||void 0===r||r.setDirection(-1*n),setTimeout(()=>{var e;null===(e=this._lottieInstance)||void 0===e||e.play()},this.intermission)):(null===(e=this._lottieInstance)||void 0===e||e.goToAndStop(-1===n?.99*i:o,!0),setTimeout(()=>{var e;null===(e=this._lottieInstance)||void 0===e||e.play()},this.intermission))}),this._lottieInstance.addEventListener("DOMLoaded",()=>{this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(PlayerEvents.Ready))}),this._lottieInstance.addEventListener("data_ready",()=>{this.dispatchEvent(new CustomEvent(PlayerEvents.Load))}),this._lottieInstance.addEventListener("data_failed",()=>{this.currentState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}),this.container&&(this.container.addEventListener("mouseenter",()=>{this.hover&&this.currentState!==PlayerState.Playing&&this.play()}),this.container.addEventListener("mouseleave",()=>{this.hover&&this.currentState===PlayerState.Playing&&this.stop()})))}_onVisibilityChange(){document.hidden&&this.currentState===PlayerState.Playing?this._freeze():this.currentState===PlayerState.Frozen&&this.play()}_handleSeekChange({target:e}){!(!(e instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(e.value)))&&(this.seek(Math.floor(Number(e.value)/100*this._lottieInstance.totalFrames)),setTimeout(()=>{e.parentElement instanceof HTMLFormElement&&e.parentElement.reset()},100))}_isLottie(e){return["v","ip","op","layers","fr","w","h"].every(t=>Object.prototype.hasOwnProperty.call(e,t))}addAnimation(e){var t=this;return _async_to_generator(function*(){try{let r=_object_spread_props(_object_spread({},t._manifest),{generator:pkg.name}),o=t._animations;for(let i of e){let{url:e}=i,{animations:n}=yield getAnimationData(e);if(!n)throw Error("No animation loaded");if(t._manifest.animations.some(({id:e})=>e===i.id))throw Error("Duplicate id for animation");let a=_object_spread_props(_object_spread({},i),{url:void 0});r=_object_spread_props(_object_spread({},r),{animations:[...r.animations,a]}),o=[...t._animations,...n]}createDotLottie(o,r)}catch(e){console.error(handleErrors(e).message)}})()}getLottie(){return this._lottieInstance}play(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._lottieInstance.play(),setTimeout(()=>{this.currentState=PlayerState.Playing},0),this.dispatchEvent(new CustomEvent(PlayerEvents.Play)))}pause(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._lottieInstance.pause(),setTimeout(()=>{this.currentState=PlayerState.Paused},0),this.dispatchEvent(new CustomEvent(PlayerEvents.Pause)))}stop(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._playerState.count=0,this._lottieInstance.stop(),setTimeout(()=>{this.currentState=PlayerState.Stopped},0),this.dispatchEvent(new CustomEvent(PlayerEvents.Stop)))}destroy(){this._lottieInstance&&(this.currentState=PlayerState.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed)),this.remove())}seek(e){if(!this._lottieInstance)return;let t=e.toString().match(/^([0-9]+)(%?)$/);if(!t)return;let r=Math.floor("%"===t[2]?this._lottieInstance.totalFrames*Number(t[1])/100:Number(t[1]));this._seeker=r,this.currentState===PlayerState.Playing||this.currentState===PlayerState.Frozen&&this._playerState.prev===PlayerState.Playing?(this._lottieInstance.goToAndPlay(r,!0),this.currentState=PlayerState.Playing):(this._lottieInstance.goToAndStop(r,!0),this._lottieInstance.pause())}snapshot(){if(!this.shadowRoot)return;let e=this.shadowRoot.querySelector(".animation svg"),t=e instanceof Node?new XMLSerializer().serializeToString(e):null;if(!t){console.error("Could not serialize data");return}return download(t,{name:`${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`,mimeType:"image/svg+xml"}),t}setSubframe(e){this._lottieInstance&&(this.subframe=e,this._lottieInstance.setSubframe(e))}_freeze(){this._lottieInstance&&(this.currentState&&(this._playerState.prev=this.currentState),this._lottieInstance.pause(),setTimeout(()=>{this.currentState=PlayerState.Frozen},0),this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze)))}reload(){var e=this;return _async_to_generator(function*(){e._lottieInstance&&(e._lottieInstance.destroy(),e.src&&(yield e.load(e.src)))})()}setSpeed(e=1){this._lottieInstance&&(this.speed=e,this._lottieInstance.setSpeed(e))}setDirection(e){this._lottieInstance&&(this.direction=e,this._lottieInstance.setDirection(e))}setLooping(e){this._lottieInstance&&(this.loop=e,this._lottieInstance.setLoop(e))}togglePlay(){if(!this._lottieInstance)return;let{currentFrame:e,playDirection:t,totalFrames:r}=this._lottieInstance;return this.currentState===PlayerState.Playing?this.pause():this.currentState===PlayerState.Completed?(this.currentState=PlayerState.Playing,this.mode===PlayMode.Bounce)?(this.setDirection(-1*t),this._lottieInstance.goToAndPlay(e,!0)):-1===t?this._lottieInstance.goToAndPlay(r,!0):this._lottieInstance.goToAndPlay(0,!0):this.play()}toggleLooping(){this.setLooping(!this.loop)}toggleBoomerang(){this.mode===PlayMode.Normal?this.mode=PlayMode.Bounce:this.mode=PlayMode.Normal}toggleSettings(e){void 0===e?this._isSettingsOpen=!this._isSettingsOpen:this._isSettingsOpen=e}_switchInstance(){this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=l.loadAnimation(_object_spread_props(_object_spread({},this._getOptions()),{animationData:this._animations[this._currentAnimation]})),this._addEventListeners(),this._lottieInstance.goToAndPlay(0,!0),this.currentState=PlayerState.Playing}next(){this._currentAnimation++,this._switchInstance()}prev(){this._currentAnimation--,this._switchInstance()}convert(){if(this._isDotLottie)return;let e=_object_spread_props(_object_spread({},this._manifest),{generator:pkg.name});createDotLottie(this._animations,e,`${getFilename(this.src)}.lottie`)}static get styles(){return styles}connectedCallback(){super.connectedCallback(),void 0!==document.hidden&&document.addEventListener("visibilitychange",this._onVisibilityChange)}firstUpdated(){var e=this;return _async_to_generator(function*(){"IntersectionObserver"in window&&(e._intersectionObserver=new IntersectionObserver(t=>{t[0].isIntersecting?document.hidden||e.currentState!==PlayerState.Frozen||e.play():e.currentState===PlayerState.Playing&&e._freeze()}),e._intersectionObserver.observe(e.container)),e.src&&(yield e.load(e.src)),e.dispatchEvent(new CustomEvent(PlayerEvents.Rendered))})()}disconnectedCallback(){super.disconnectedCallback(),this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=void 0),this._lottieInstance&&this._lottieInstance.destroy(),document.removeEventListener("visibilitychange",this._onVisibilityChange)}renderControls(){var e,t;let i=this.currentState===PlayerState.Playing,n=this.currentState===PlayerState.Paused,a=this.currentState===PlayerState.Stopped,s=this.currentState===PlayerState.Error;return r`<div class="${`lottie-controls toolbar ${s?"has-error":""}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${i||n}" tabindex="0" aria-label="Toggle Play/Pause">${i?r`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>`:r`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`}</button> <button @click="${this.stop}" data-active="${a}" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> ${(null===(e=this._animations)||void 0===e?void 0:e.length)>1?r`${this._currentAnimation>0?r`<button @click="${this.prev}" tabindex="0" aria-label="Previous animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button>`:o} ${this._currentAnimation+1<(null===(t=this._animations)||void 0===t?void 0:t.length)?r`<button @click="${this.next}" tabindex="0" aria-label="Next animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button>`:o}`:o}<form class="progress-container"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker}" @change="${this._handleSeekChange}" @mousedown="${this._freeze}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker}" tabindex="0" aria-label="Slider for search"><progress min="0" max="100" value="${this._seeker}"></progress></form><button @click="${this.toggleLooping}" data-active="${this.loop}" tabindex="0" aria-label="Toggle looping"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button @click="${this.toggleBoomerang}" data-active="${this.mode===PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button @click="${this.toggleSettings}" @blur="${()=>setTimeout(()=>this.toggleSettings(!1),200)}" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${`${this._identifier}-settings`}"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${`${this._identifier}-settings`}" class="popover" style="display:${this._isSettingsOpen?"block":"none"}">${this._isDotLottie?o:r`<button @click="${this.convert}" aria-label="Convert JSON animation to dotLottie format" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button>`} <button @click="${this.snapshot}" aria-label="Download still image" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div></div>`}render(){var e,t,i;return r`<figure class="${"animation-container main"}" data-controls="${this.controls}" lang="${this.description?null===(t=document)||void 0===t?void 0:null===(e=t.documentElement)||void 0===e?void 0:e.lang:"en"}" role="img" aria-label="${null!==(i=this.description)&&void 0!==i?i:"Lottie animation"}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState===PlayerState.Error?r`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>`:o}</div>${this.controls?this.renderControls():o}</figure>`}constructor(...e){super(...e),this.background="transparent",this.controls=!1,this.currentState=PlayerState.Loading,this.direction=1,this.hover=!1,this.intermission=0,this.loop=!1,this.mode=PlayMode.Normal,this.objectfit="contain",this.renderer="svg",this.speed=1,this.subframe=!0,this._isSettingsOpen=!1,this._seeker=0,this._currentAnimation=0,this._lottieInstance=null,this._identifier=this.id||useId("dotlottie"),this._errorMessage="Something went wrong",this._isDotLottie=!1,this._playerState={prev:PlayerState.Loading,count:0,loaded:!1}}};_ts_decorate([i({type:Boolean,reflect:!0})],DotLottiePlayer.prototype,"autoplay",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"background",void 0),_ts_decorate([i({type:Boolean,reflect:!0})],DotLottiePlayer.prototype,"controls",void 0),_ts_decorate([i({type:Number})],DotLottiePlayer.prototype,"count",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"currentState",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"description",void 0),_ts_decorate([i({type:Number})],DotLottiePlayer.prototype,"direction",void 0),_ts_decorate([i({type:Boolean})],DotLottiePlayer.prototype,"hover",void 0),_ts_decorate([i({type:Number})],DotLottiePlayer.prototype,"intermission",void 0),_ts_decorate([i({type:Boolean,reflect:!0})],DotLottiePlayer.prototype,"loop",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"mode",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"objectfit",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"preserveAspectRatio",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"renderer",void 0),_ts_decorate([i({type:Array})],DotLottiePlayer.prototype,"segment",void 0),_ts_decorate([i({type:Number})],DotLottiePlayer.prototype,"speed",void 0),_ts_decorate([i({type:String})],DotLottiePlayer.prototype,"src",void 0),_ts_decorate([i({type:Boolean})],DotLottiePlayer.prototype,"subframe",void 0),_ts_decorate([n(".animation")],DotLottiePlayer.prototype,"container",void 0),_ts_decorate([a()],DotLottiePlayer.prototype,"_isSettingsOpen",void 0),_ts_decorate([a()],DotLottiePlayer.prototype,"_seeker",void 0),_ts_decorate([a()],DotLottiePlayer.prototype,"_currentAnimation",void 0),DotLottiePlayer=_ts_decorate([s("dotlottie-player")],DotLottiePlayer);export{DotLottiePlayer,PlayMode,PlayerEvents,PlayerState};

package/dist/index.d.ts

@@ -0,0 +1,112 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { RefObject } from 'react';
+import { AnimationDirection, RendererType, AnimationSegment, AnimationItem } from 'lottie-web';
+
+declare enum PlayerState {
+    Completed = "completed",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frozen = "frozen",
+    Loading = "loading",
+    Paused = "paused",
+    Playing = "playing",
+    Stopped = "stopped"
+}
+declare enum PlayMode {
+    Bounce = "bounce",
+    Normal = "normal"
+}
+declare enum PlayerEvents {
+    Complete = "complete",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frame = "frame",
+    Freeze = "freeze",
+    Load = "load",
+    Loop = "loop",
+    Pause = "pause",
+    Play = "play",
+    Ready = "ready",
+    Rendered = "rendered",
+    Stop = "stop"
+}
+type Autoplay = boolean | '' | 'autoplay' | null;
+type Controls = boolean | '' | 'controls' | null;
+type Loop = boolean | '' | 'loop' | null;
+type Subframe = boolean | '' | null;
+type ObjectFit = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';
+type PreserveAspectRatio = 'xMidYMid meet' | 'xMidYMid slice' | 'xMinYMin slice' | 'none';
+interface ReactLottiePlayer extends Partial<DotLottiePlayer> {
+    class?: string;
+    ref?: RefObject<unknown>;
+    style?: any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dotlottie-player': DotLottiePlayer;
+    }
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'dotlottie-player': ReactLottiePlayer;
+        }
+    }
+}
+
+declare class DotLottiePlayer extends LitElement {
+    autoplay?: Autoplay;
+    background?: string;
+    controls?: Controls;
+    count?: number;
+    currentState?: PlayerState;
+    description?: string;
+    direction?: AnimationDirection;
+    hover?: boolean | undefined;
+    intermission?: number | undefined;
+    loop?: Loop;
+    mode?: PlayMode;
+    objectfit?: ObjectFit;
+    preserveAspectRatio?: PreserveAspectRatio;
+    renderer?: RendererType;
+    segment?: AnimationSegment;
+    seeker?: number;
+    speed?: number;
+    src: string;
+    subframe?: Subframe;
+    protected container: HTMLElement;
+    private _io?;
+    private _lottie;
+    private _prevState?;
+    private _counter;
+    private _error?;
+    load(src: string | Record<string, number | undefined> | JSON): Promise<void>;
+    private _onVisibilityChange;
+    private _handleSeekChange;
+    private isLottie;
+    getLottie(): AnimationItem | null;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    destroy(): void;
+    seek(value: number | string): void;
+    snapshot(download?: boolean): string | undefined;
+    setSubframe(value: boolean): void;
+    private freeze;
+    reload(): Promise<void>;
+    setSpeed(value?: number): void;
+    setDirection(value: AnimationDirection): void;
+    setLooping(value: boolean): void;
+    togglePlay(): void;
+    toggleLooping(): void;
+    toggleBoomerang(): void;
+    static get styles(): lit.CSSResult;
+    connectedCallback(): void;
+    protected firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    protected renderControls(): lit.TemplateResult<1>;
+    protected render(): lit.TemplateResult<1>;
+}
+
+export { DotLottiePlayer, PlayMode, PlayerEvents, PlayerState };