\n
\n ${this.currentState === PlayerState.Error\n ? html`
⚠️
`\n : undefined}\n
\n ${this.controls ? this.renderControls() : undefined}\n
`;\n }\n\n /**\n * Initialize everything on component first render.\n */\n protected firstUpdated(): void {\n // Add intersection observer for detecting component being out-of-view.\n if (\"IntersectionObserver\" in window) {\n this._io = new IntersectionObserver(\n (entries: IntersectionObserverEntry[]) => {\n if (entries[0].isIntersecting) {\n if (this.currentState === PlayerState.Frozen) {\n this.play();\n }\n } else if (this.currentState === PlayerState.Playing) {\n this.freeze();\n }\n }\n );\n\n this._io.observe(this.container);\n }\n\n // Add listener for Visibility API's change event.\n if (typeof document.hidden !== \"undefined\") {\n document.addEventListener(\"visibilitychange\", () =>\n this._onVisibilityChange()\n );\n }\n\n // Setup lottie player\n if (this.src) {\n this.load(this.src);\n }\n this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));\n }\n\n protected renderControls(): TemplateResult {\n const isPlaying: boolean = this.currentState === PlayerState.Playing;\n const isPaused: boolean = this.currentState === PlayerState.Paused;\n const isStopped: boolean = this.currentState === PlayerState.Stopped;\n\n return html`\n