Nothing/src/app/_services/overlay.service.ts

import { Injectable, NgZone } from '@angular/core';
import { ShortcutService } from './shortcut.service';
import { EventsService } from './events.service';
import { Event } from "@tauri-apps/api/event";
import { invoke } from '@tauri-apps/api';
import { ConfigService } from './config.service';
import { appWindow } from '@tauri-apps/api/window';
import { Subscription } from 'rxjs';

export class StateEvent {
  Visible?: any;
  Interactable?: any;
  Hidden?: any;
}

@Injectable({
  providedIn: 'root'
})
export class OverlayService {
  interactable: boolean = false;
  isBinding: boolean = false;
  visible: boolean = false;
  isOverlay: boolean;

  constructor(private shortcuts: ShortcutService, private events: EventsService, private configService: ConfigService) {
    if (appWindow.label == "Overlay") {

      this.registerInitialBinds();

      this.events.listen<StateEvent>("OverlayStateChange").subscribe(this.onOverlayStateChange.bind(this));
    }
    this.isOverlay = appWindow.label === "Overlay";
  }

  registerInitialBinds() {
    this.shortcuts.register(this.configService.config.toggleOverlay).subscribe((_shortcut) => {
      this.onToggleOverlay()
    });
  }

  onOverlayStateChange(event: Event<StateEvent>) {
    this.interactable = event.payload.Interactable != null;
    if (event.payload.Hidden) { this.visible = false } else { this.visible = true };
  }

  setInteractable() {
    invoke("set_interactable", { interactable: true }).then();
  }

  onToggleOverlay() {
    if (this.interactable) {
      this.interactable = false;
    } else {
      this.interactable = true;
    }

    invoke("set_interactable", { interactable: this.interactable }).then();
  }
}