@overlaysymphony/twitch 0.1.0

package/src/helpers/status/status.ts

@@ -0,0 +1,61 @@
+import { TwitchEventSub } from "../../eventsub/index.js"
+
+export interface Status {
+  online: boolean
+  type?: string
+  startedAt?: Date
+  shieldMode: boolean
+  title: string
+  category: string
+  labels: string[]
+}
+
+export function onStatus(
+  eventsub: TwitchEventSub,
+  handleStatus: (status: Status) => void,
+): void {
+  const status: Status = {
+    online: false,
+    shieldMode: false,
+    title: "",
+    category: "",
+    labels: [],
+  }
+
+  eventsub.subscribe(
+    [
+      "channel.update",
+      "stream.online",
+      "stream.offline",
+      "channel.shield_mode.begin",
+      "channel.shield_mode.end",
+    ],
+    (payload) => {
+      if (payload.type === "stream.online") {
+        status.online = true
+        status.type = payload.event.type
+        status.startedAt = new Date(payload.event.started_at)
+      }
+
+      if (payload.type === "stream.offline") {
+        status.online = false
+      }
+
+      if (payload.type === "channel.shield_mode.begin") {
+        status.shieldMode = true
+      }
+
+      if (payload.type === "channel.shield_mode.end") {
+        status.shieldMode = false
+      }
+
+      if (payload.type === "channel.update") {
+        status.title = payload.event.title
+        status.category = payload.event.category_name
+        status.labels = payload.event.content_classification_labels
+      }
+
+      handleStatus(status)
+    },
+  )
+}

package/src/ui/authentication.ts

@@ -0,0 +1,230 @@
+import {
+  BareAuthentication,
+  validateAuthentication,
+} from "../authentication/index.js"
+
+declare global {
+  interface Window {
+    overlaysymphonyTwitchScopes: string[]
+  }
+}
+
+const localStorageKey = "overlaysymphony:service:twitch"
+
+export class TwitchAuthentication extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return ["client-id", "scopes-key", "popup-url"]
+  }
+
+  root: ShadowRoot
+  element?: HTMLElement
+
+  constructor() {
+    super()
+
+    const stylesheet = new CSSStyleSheet()
+
+    stylesheet.insertRule(`
+      :host {
+        display: block;
+      }
+    `)
+
+    stylesheet.insertRule(`
+      button, .authenticating, .validating, .authenticated {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+
+        color: #ffffff;
+        border-radius: 4px;
+
+        font-size: 20px;
+        line-height: 18px;
+        padding: 8px 13px;
+        text-align: center;
+        font-family: sans-serif;
+      }
+    `)
+
+    stylesheet.insertRule(`
+      button {
+        background: #9146FF;
+        border: 2px outset buttonBorder;
+      }
+      `)
+
+    stylesheet.insertRule(`
+      .authenticating, .validating {
+        background: #949494;
+        border: 2px solid transparent;
+      }
+    `)
+
+    stylesheet.insertRule(`
+      .authenticated {
+        background: #AC75FF;
+        border: 2px solid transparent;
+      }
+    `)
+
+    this.root = this.attachShadow({ mode: "open" })
+    this.root.adoptedStyleSheets.push(stylesheet)
+
+    this.render()
+  }
+
+  get clientId(): string {
+    return this.getAttribute("client-id") ?? ""
+  }
+
+  get scopes(): string[] {
+    const key = (this.getAttribute("scopes-key") ??
+      "overlaysymphonyTwitchScopes") as "overlaysymphonyTwitchScopes"
+
+    return window[key] || []
+  }
+
+  get popupUrl(): string {
+    const parent = window.location.href
+    const end = parent.lastIndexOf("/")
+    const baseURL = window.location.href.slice(0, end)
+
+    return this.getAttribute("popupUrl") ?? `${baseURL}/popup-twitch.html`
+  }
+
+  async authenticate(): Promise<void> {
+    this.renderAuthenticating()
+
+    const url = new URL(
+      `${this.popupUrl}?scopes=${this.scopes.join("+")}&clientId=${this.clientId}`,
+    )
+
+    await new Promise<void>((resolve) => {
+      const listener = (event: MessageEvent) => {
+        if (event.origin !== url.origin) return
+
+        // const source = (event.source as Window | null)?.name
+        // if (source !== "OverlaySymphonyTwitchAuthenticationPopup") return
+
+        const { type, authentication } = event.data
+        if (type !== "authentication") return
+
+        window.removeEventListener("message", listener)
+
+        setCached(authentication)
+        this.render()
+        resolve()
+      }
+
+      window.addEventListener("message", listener)
+
+      window.open(
+        url,
+        "OverlaySymphonyTwitchAuthenticationPopup",
+        "width=520,height=840",
+      )
+    })
+  }
+
+  async validate(authentication: BareAuthentication): Promise<void> {
+    this.renderValidating()
+
+    try {
+      await validateAuthentication(authentication)
+      this.renderAuthenticated()
+    } catch (e) {
+      clearCached()
+      this.render()
+    }
+  }
+
+  clear(): void {
+    if (this.element) {
+      this.element.remove()
+      this.element = undefined
+    }
+  }
+
+  renderAuthenticating(): void {
+    this.clear()
+
+    this.element = document.createElement("div")
+    this.element.classList.add("authenticating")
+    this.element.innerText = "Authenticating..."
+
+    this.root.append(this.element)
+  }
+
+  renderValidating(): void {
+    this.clear()
+
+    this.element = document.createElement("div")
+    this.element.classList.add("validating")
+    this.element.innerText = "Validating..."
+
+    this.root.append(this.element)
+  }
+
+  renderAuthenticated(): void {
+    this.clear()
+
+    this.element = document.createElement("div")
+    this.element.classList.add("authenticated")
+    this.element.innerText = "Authenticated"
+
+    this.root.append(this.element)
+  }
+
+  renderUnauthenticated(): void {
+    this.clear()
+
+    this.element = document.createElement("button")
+    this.element.innerText = "Authenticate with Twitch"
+    this.root.append(this.element)
+
+    this.element.addEventListener("click", () => this.authenticate())
+  }
+
+  render(): void {
+    const cached = getCached(this.scopes)
+
+    if (cached) {
+      this.validate(cached)
+    } else {
+      this.renderUnauthenticated()
+    }
+  }
+}
+
+window.customElements.define(
+  "overlaysymfony-twitch-authentication",
+  TwitchAuthentication,
+)
+
+export function getCached(scopes: string[]): BareAuthentication | undefined {
+  const cache = localStorage.getItem(localStorageKey)
+  if (cache) {
+    const authentication = JSON.parse(cache) as BareAuthentication
+    authentication.expires = new Date(authentication.expires)
+
+    for (const scope of scopes) {
+      if (!authentication.scope.includes(scope)) {
+        localStorage.removeItem(localStorageKey)
+        return undefined
+      }
+    }
+
+    return authentication
+  }
+
+  return undefined
+}
+
+export function setCached(authentication: BareAuthentication): void {
+  localStorage.setItem(localStorageKey, JSON.stringify(authentication))
+}
+
+export function clearCached(): void {
+  localStorage.removeItem(localStorageKey)
+}

package/src/ui/popup.ts

@@ -0,0 +1,115 @@
+import querystring from "@overlaysymphony/core/libs/querystring"
+
+import {
+  authenticateResult,
+  initiateAuthentication,
+} from "../authentication/index.js"
+
+const state = getState()
+
+if (state.step === "initial") {
+  window.location.href = initiateAuthentication(
+    state.clientId,
+    `${window.location.origin}${window.location.pathname}`,
+    state.scopes,
+  )
+}
+
+if (state.step === "token") {
+  const authentication = await authenticateResult(state.clientId, state)
+  window.opener.postMessage({ type: "authentication", authentication }, "*")
+  window.close()
+}
+
+if (state.step === "error") {
+  alert(`${state.error}. ${state.description || ""}`)
+}
+
+function getState():
+  | {
+      step: "initial"
+      clientId: string
+      scopes: string[]
+    }
+  | {
+      step: "token"
+      clientId: string
+      token_type: "bearer"
+      access_token: string
+      scope: string
+    }
+  | {
+      step: "error"
+      error: string
+      description?: string
+    } {
+  const query = querystring.parse(window.location.search)
+  const hash = querystring.parse(window.location.hash)
+
+  if (hash.token_type === "bearer") {
+    const token_type = hash.token_type
+    const access_token = validateString(hash.access_token)
+    const scope = validateString(hash.scope)
+    const clientId = validateString(hash.state)
+
+    if (!access_token || !scope || !clientId) {
+      return {
+        step: "error",
+        error: "Token Error",
+        description: [
+          !access_token ? "Missing access_token." : "",
+          !scope ? "Missing scope." : "",
+          !clientId ? "Missing state." : "",
+        ]
+          .filter(Boolean)
+          .join(" "),
+      }
+    }
+
+    return {
+      step: "token",
+      clientId,
+      token_type,
+      access_token,
+      scope,
+    }
+  }
+
+  if ("scopes" in query) {
+    const clientId = validateString(query.clientId)
+    const scopes = validateString(query.scopes)?.split("+")
+
+    if (!clientId || !scopes) {
+      return {
+        step: "error",
+        error: "Initialization Error",
+        description: [
+          !clientId ? "Missing clientId." : "",
+          !scopes ? "Missing scopes." : "",
+        ]
+          .filter(Boolean)
+          .join(" "),
+      }
+    }
+
+    return {
+      step: "initial",
+      clientId,
+      scopes,
+    }
+  }
+
+  return {
+    step: "error",
+    error: validateString(query.error) || "Unknown Error",
+    description: validateString(query.error_description),
+  }
+}
+
+function validateString(input: string | unknown): string | undefined {
+  if (typeof input !== "string" || !input) {
+    return undefined
+  }
+
+  return input
+}