npm install @iconical/presence

import {
  Component, ChangeDetectorRef, DestroyRef,
  Inject, OnInit, PLATFORM_ID,
} from "@angular/core";
import { isPlatformBrowser } from "@angular/common";
import { createPresenceClient, type PresenceResult } from "@iconical/presence";

@Component({
  standalone: true,
  selector: "app-discord-presence",
  template: `
    @if (error) {
      <p>Presence unavailable</p>
    } @else if (data) {
      <h2>{{ data.profile.displayName }}</h2>
      <p>{{ data.presence?.status ?? "Waiting for update" }}</p>
    } @else {
      <p>Connecting…</p>
    }
  `,
})
export class DiscordPresenceComponent implements OnInit {
  data: PresenceResult | null = null;
  error: Error | null = null;

  constructor(
    @Inject(PLATFORM_ID) private platformId: object,
    private cdr: ChangeDetectorRef,
    private destroyRef: DestroyRef,
  ) {}

  ngOnInit(): void {
    if (!isPlatformBrowser(this.platformId)) return;

    const stop = createPresenceClient().subscribePresence(
      "123456789012345678", // Replace with an approved ID.
      {
        onUpdate: (next) => {
          this.data = next;
          this.error = null;
          this.cdr.markForCheck();
        },
        onError: (cause) => {
          this.data = null;
          this.error = cause;
          this.cdr.markForCheck();
        },
      },
    );

    this.destroyRef.onDestroy(stop);
  }
}