typingfreaks/src/background.ts

import * as util from './util';

export class BackgroundManager {
  element: HTMLElement;
  video: HTMLElement;
  last: HTMLElement | null;
  next: HTMLElement;
  fnContext: util.FnContext = new util.FnContext();

  constructor(element: HTMLElement) {
    this.element = element;
    this.last = null;
    this.video = util.getElement(element, '#video');
    this.video.addEventListener('transitionend', () => {
      this.video.classList.add('settled');
    });
    this.next = document.createElement('div');
    this.element.appendChild(this.next);
  }

  setBackground(background: string) {
    this.fnContext.invalidate();
    util.loadBackground(background).then(
      this.fnContext.wrap(() => {
        this.setBackgroundActual(background);
      })
    );
  }

  showVideo() {
    this.video.classList.add('show');
    this.last?.classList.remove('show');
  }

  hideVideo() {
    this.last?.classList.add('show');
  }

  setVideo(element: HTMLElement) {
    this.video.innerHTML = '';
    this.video.classList.remove('settled');
    this.video.appendChild(element);
  }

  private setBackgroundActual(background: string) {
    if (background.indexOf('.') >= 0) {
      this.next.style.backgroundImage = `url(${background})`;
      this.next.style.backgroundColor = 'black';
      this.next.classList.add('image');
    } else {
      this.next.style.backgroundColor = background;
    }
    this.next.classList.add('show');
    if (this.last != null) {
      const toRemove = this.last;
      this.last.classList.remove('show');
      this.next.addEventListener(
        'transitionend',
        () => {
          this.element.removeChild(toRemove);
          this.video.classList.remove('show');
          this.video.innerHTML = '';
        },
        { once: true }
      );
    }
    this.last = this.next;
    this.next = document.createElement('div');
    this.element.appendChild(this.next);
  }
}