Need help with Lit template

Flow
1

Firstly, thank you for moving the forum off stackoverflow :slight_smile:
Secondly, is this forum available as a Vaadin component so we may also please benefit from it?

The actual question: I am developing a Lit template for livekit.io video conferencing. The problem I have encountered is that when the event handlers are launched I need access to the Lit class element to attach child elements. However the event handler runs in some other context and I don’t know how to access ‘this’.

I had to add the async keyword to the afterServerUpdate to get the awaits working. Is this acceptable? It seems to work.

Here is my current code:

import { css, html, LitElement, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import {
  Participant,
  RemoteParticipant,
  RemoteTrack,
  RemoteTrackPublication,
  Room,
  RoomEvent,
  Track,
  VideoPresets,
  LocalTrackPublication,
  LocalParticipant,
} from 'livekit-client';

class VideoConf extends LitElement {

  @property()
  thisElement = this;

  constructor() {
    super();
  }

  render() {
    return html`
      <div id="content">
        <span>Video Conference</span>
      </div>
    `;
  }

  async afterServerUpdate() {
    console.log("afterServerUpdate");
    console.log('me = ' + this.thisElement);

    var url = "...";
    const token = "..."

    // creates a new room with options
    const room = new Room({
      // automatically manage subscribed video quality
      adaptiveStream: true,

      // optimize publishing bandwidth and CPU for published tracks
      dynacast: true,

      // default capture settings
      videoCaptureDefaults: {
        resolution: VideoPresets.h720.resolution,
      },
    });

    // pre-warm connection, this can be called as early as your page is loaded
    room.prepareConnection(url, token);

    // set up event listeners
    room
//      .on(RoomEvent.TrackSubscribed, thisElement.handleTrackSubscribed)
//      .on(RoomEvent.TrackUnsubscribed, thisElement.handleTrackUnsubscribed)
//      .on(RoomEvent.ActiveSpeakersChanged, thisElement.handleActiveSpeakerChange)
//      .on(RoomEvent.Disconnected, thisElement.handleDisconnect)
      .on(RoomEvent.LocalTrackPublished, this.handleLocalTrackPublished)
      .on(RoomEvent.LocalTrackUnpublished, this.handleLocalTrackUnpublished);

    // connect to room
    await room.connect(url, token);
    console.log('connected to room:', room.name);

    // publish local camera and mic tracks
    await room.localParticipant.enableCameraAndMicrophone();
    console.log('camera enabled for:', room.name);
  }

  handleLocalTrackUnpublished(
    publication: LocalTrackPublication,
    participant: LocalParticipant,
  ) {
    console.log('handleLocalTrackUnpublished');
  }

  handleLocalTrackPublished(
    publication: LocalTrackPublication,
    participant: LocalParticipant,
  ) {

!!! this. and this.thisElement are not available/accessible here? this. references a liveio object and not the LitElement class!

    console.log('handleLocalTrackPublished');
    if (publication != null && publication.track != null) {
      console.log('handleLocalTrackPublished 1');
      const trackElement = publication.track.attach();
      if (this.thisElement != null) {
        console.log('handleLocalTrackPublished 1.5');
        if (this.thisElement.shadowRoot != null) {
            console.log('handleLocalTrackPublished 2');
            const divElement = this.thisElement.shadowRoot.getElementById('content');
            if (divElement != null) {
              console.log('handleLocalTrackPublished 3');
              divElement.appendChild(trackElement);
            }
        }
      }
    }
  }
}

customElements.define('video-conf', VideoConf);```
2

Did you consult the Lit Docs about it? Events – Lit

3

The forum is using Discourse, it’s not something we built ourselves. It’s an open source project you can use freely.

4

Hi Christian. Thanks for the pointer. The page did indeed reveal a solution. What I needed to do was call the event handler like below and this was available. All is working now. Appreciate the tip.

export class MyElement extends LitElement {
  private _handleResize = () => {
    // `this` refers to the component
    console.log(this.isConnected);
  }

  constructor() {
    window.addEventListener('resize', this._handleResize);
  }
}
5

Hi Marcus. I thought that after moving off the old forum to stackoverflow and then to discourse, the new move is off discourse to some new forum. Or is this just self hosted open source discourse?

6

It’s a self-hosted open-source Discourse. I initially wanted to get a hosted version from them, but the cost for them to do migrate our old posts from both our forum and Discord was prohibitive so we went a DIY route.