@playkit/playkit-api/PlaykitApi.js

import { client } from "./client.js";

const hexToRgb = (hex) => {
  const color = hex,
    components = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
  if (!components) {
    return null;
  }
  return `${parseInt(components[1], 16)}, ${parseInt(
    components[2],
    16
  )}, ${parseInt(components[3], 16)}`;
};

export const PlaykitApi = (superClass) =>
  class extends superClass {
    static get properties() {
      return {
        marketplaceId: { type: String },
        apiKey: { type: String },
        token: { type: String },
        baseUrl: { type: String },
        marketplaceDomain: { type: String },
        apiBaseUrl: { type: String },
      };
    }

    constructor() {
      super();
      this.marketplaceDomain = "https://app.playkit.app";
      this.marketplaceId = "";
      this.apiKey = "";
    }

    firstUpdated() {
      this.handleFetchMarketplaceInfo(this.marketplaceId, this.apiKey);
    }

    shouldSetTheme(colors, accentColors) {
      if (
        accentColors &&
        typeof accentColors === "object" &&
        accentColors[500]
      ) {
        colors = accentColors;
      }
      if (!colors || typeof colors !== "object") return;

      const root = this.style || document.documentElement.style;
      for (const [key, value] of Object.entries(colors)) {
        root.setProperty(`--find-play-color-primary-${key}`, value);
      }
      root.setProperty(
        `--find-play-color-primary-rgb`,
        hexToRgb(colors["500"])
      );
    }

    handleFetchMarketplaceInfo(marketplaceId, apiKey) {
      if (!marketplaceId || !apiKey || this.dontFetchMarketplaceInfo) return;
      this.fetchMarketplace(marketplaceId)
        .then((response) => {
          const { data } = response;
          const { branding, domain, customDomain } = data || {};
          const { colors } = branding || {};

          this.marketplaceDomain = `https://${domain}.playkit.app`;
          if (customDomain) {
            this.marketplaceDomain = `https://${customDomain}`;
          }

          if (colors && colors.primary) {
            this.colors = colors.primary;
            this.shouldSetTheme(colors.primary, colors.accent);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    }

    setFetchConfig() {
      this.fetchConfig = {
        marketplaceId: this.marketplaceId,
        apiKey: this.apiKey,
        token: this.token,
        baseUrl: this.apiBaseUrl || this.baseUrl || "https://test.findplay.com",
      };
    }

    createRequest(path, config = {}) {
      // Update default config tokens
      this.setFetchConfig();

      // call api and return promise
      return client(path, { ...this.fetchConfig, ...config });
    }

    fetchListing(id) {
      return this.createRequest(`listings/${id}`);
    }

    fetchMarketplace(id) {
      return this.createRequest(`marketplaces/${id}`);
    }

    // Creates stripe checkout transaction
    createTransaction(body) {
      return this.createRequest("transactions", { body });
    }

    findSlots(id) {
      return this.createRequest(
        `listings/${id}/findSlots?type=recurrence,slot`
      );
    }
  };