How to get the reference to LottiePlayer in another StencilJs app

[RezaRahmati]

In the doc it's mentioned:

You may set and load animations programatically as well.

</lottie-player>
const player = document.querySelector("lottie-player");
player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");

// or load via a Bodymovin JSON string/object
player.load(
  '{"v":"5.3.4","fr":30,"ip":0,"op":38,"w":315,"h":600,"nm":"new", ... }'
);

Now in my stencil component I am doing

import * as lottiePlayer from "@lottiefiles/lottie-player";

@Component({
    tag: "welcome-page",
    styleUrl: "welcome-page.scss",
    shadow: true,
})
export class WelcomePage {
    private lottie: lottiePlayer.LottiePlayer;

    animate(): void {
        console.log(this.lottie);
        this.lottie.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
    }

    render(): any {
        return (
            <Host>
               <lottie-player
                    ref={(el) => this.lottie = el}
                    autoplay
                    mode="normal"
                    style={{ width: "300px", height: "300px" }}
                >
                </lottie-player>
                <idv-button
                            buttonType="primary"
                            onClick={this.animate.bind(this)}>
                            Animate
                </idv-button>
             </Host>
          );
      }

When I run I get a reference to the html element, but it's not of type of LottiePlayer s I can call a method on it.

Also when I do this, player is null

    animate(): void {
        const player: lottiePlayer.LottiePlayer = document.querySelector("lottie-player");
        player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
    }

How can I solve this issue?

[karamalie]

Hi @RezaRahmati ,

spun up a small test project on my local. Heres how i fixed this first up. the import does not work if the framework is set as SSR or serverside rendering, the lottie player is a web component and has to be loaded on the browser/client side of the app. so I added the script to index.html file inside of the stencilJS root.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

and inside of the component, I wrote the code as follows

import { Component, h, Element } from '@stencil/core';
import * as lottiePlayer from '@lottiefiles/lottie-player';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css',
  shadow: false,
})
export class AppHome {
  private lottie: lottiePlayer.LottiePlayer;

  componentDidLoad(): void {
    console.log(this.lottie);
    let scope = this;
    this.lottie.addEventListener('rendered', function () {
      scope.lottie.load('https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json');
    });
  }

  render() {
    return (
      <div class="app-home">
        <lottie-player ref={el => (this.lottie = el)} id="test" autoplay mode="normal" style={{ width: '300px', height: '300px' }}></lottie-player>
      </div>
    );
  }
}