@coxwave/tap-sdk 0.0.1

package/index.ts

@@ -0,0 +1,238 @@
+import ChatBodyMaker from "./chatBody";
+import FloatingButtonMaker from "./floatingButton";
+import { TapIframeBridge } from "./services/tap-iframe-bridge";
+import { EventManager } from "./services/event-manager";
+import showPopupWithHtml from "./popUpImage";
+
+import InitGA from "./ga";
+
+import {
+  AlarmMessageInstanceType,
+  ChatApiParamsType,
+  TapSDKType,
+  CustomStylesType,
+  ShortcutKeyType,
+  SeekTimelineParamsType,
+} from "./types";
+
+class TapSDK {
+  private pluginKey: string;
+  private iframeBridge: TapIframeBridge;
+  public events: EventManager;
+
+  private chatBody: HTMLElement | null = null;
+  private chatBodyMaker: ChatBodyMaker;
+  private floatingButtonMaker: FloatingButtonMaker;
+  private shortcutKey: ShortcutKeyType = {
+    openChat: { key: "/", modifier: "" },
+    sendChat: { key: "Enter", modifier: "" },
+  };
+
+  private isProd: boolean;
+  private isLocal: boolean;
+
+  private isOpen: boolean;
+  private isPdfOpen: boolean;
+
+  constructor({ pluginKey, isProd = false, isLocal = false }: TapSDKType) {
+    // protocol
+    this.pluginKey = pluginKey;
+    this.iframeBridge = new TapIframeBridge({
+      hostClientUrl: window.location.origin,
+      pluginKey: this.pluginKey,
+    });
+
+    // events
+    this.events = new EventManager(this.iframeBridge);
+
+    // render
+    this.floatingButtonMaker = new FloatingButtonMaker();
+    this.chatBodyMaker = new ChatBodyMaker();
+
+    // ga log
+    this.isProd = isProd;
+    this.isLocal = isLocal;
+
+    // state
+    this.isOpen = false;
+    this.isPdfOpen = false;
+  }
+
+  #isClient() {
+    return typeof window !== "undefined" && typeof document !== "undefined";
+  }
+
+  private setIsOpen(isOpen: boolean) {
+    this.isOpen = isOpen;
+  }
+
+  private setIsPdfOpen(isPdfOpen: boolean) {
+    this.isPdfOpen = isPdfOpen;
+  }
+
+  seekTimeline({ clipId, clipPlayHead }: SeekTimelineParamsType) {
+    this.iframeBridge.postToTap({
+      type: "timeline:seek",
+      clipId,
+      clipPlayHead,
+    });
+  }
+
+  async initChat({
+    chatApiParams,
+    customStyles,
+    shortcutKey,
+  }: {
+    chatApiParams: ChatApiParamsType;
+    customStyles?: CustomStylesType;
+    shortcutKey?: ShortcutKeyType;
+  }) {
+    if (!this.#isClient()) throw new Error("not client");
+
+    this.shortcutKey = {
+      openChat: shortcutKey?.openChat ?? this.shortcutKey.openChat,
+      sendChat: shortcutKey?.sendChat ?? this.shortcutKey.sendChat,
+    };
+
+    // chat body render
+    if (!this.chatBody) {
+      this.chatBody = this.chatBodyMaker.createChatBody({
+        ...(customStyles?.chatBody && {
+          customChatBody: customStyles.chatBody,
+        }),
+      });
+    }
+
+    // chat iframe
+    if (!this.iframeBridge.hasIframe()) {
+      await this.iframeBridge.renderIframe({
+        chatBody: this.chatBody,
+        isProd: this.isProd,
+        isLocal: this.isLocal,
+      });
+      // Handshake will be performed after iframe load
+    }
+    try {
+      const initiatedMessage = await this.iframeBridge.performHandshake(
+        {
+          chatApiParams,
+          customStyles,
+        },
+        {
+          retryInterval: 500,
+          maxRetries: 10,
+          timeout: 10000,
+        }
+      );
+
+      // Initialize GA with the received gaId
+      new InitGA({ gaId: initiatedMessage.gaId });
+    } catch (error) {
+      console.error("Handshake failed:", error);
+      throw new Error(
+        `Chat initialization failed: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+
+    // floating button render
+    this.floatingButtonMaker.render({
+      ...(customStyles?.floatingButton && {
+        customFloatingButton: customStyles.floatingButton,
+      }),
+    });
+    this.floatingButtonMaker.addClickEvent({
+      callback: () => {
+        this.iframeBridge.postToTap({
+          type: this.isOpen ? "chat:close" : "chat:open",
+        });
+      },
+    });
+
+    this.floatingButtonMaker.addAlarmClickEvent({
+      callback: (messageInfo: AlarmMessageInstanceType) => {
+        this.iframeBridge.postToTap({ type: "chat:open", isAlarm: true });
+        this.iframeBridge.postToTap({ type: "alarm:click", messageInfo });
+      },
+    });
+
+    this.iframeBridge.listenToTap("chat:opened", () => {
+      this.setIsOpen(true);
+      this.chatBodyMaker.toggleVisibility(this.isOpen);
+      this.floatingButtonMaker.alarmRemove();
+    });
+    this.iframeBridge.listenToTap("chat:closed", () => {
+      this.setIsOpen(false);
+      this.chatBodyMaker.toggleVisibility(this.isOpen);
+    });
+
+    // alarm
+    this.iframeBridge.listenToTap("alarm:fadeIn", (data) => {
+      if (this.isOpen) return;
+      this.floatingButtonMaker.alarmFadeIn(data.messageInfo);
+    });
+
+    // popUp
+    this.iframeBridge.listenToTap("popUp:open", (data) => {
+      showPopupWithHtml({
+        htmlString: data.popUpInfo.html,
+        callback: () => this.iframeBridge.postToTap({ type: "popUp:close" }),
+        ...(customStyles?.chatBody && { customStyles: customStyles.chatBody }),
+      });
+    });
+
+    // pdf Open
+    this.iframeBridge.listenToTap("pdf:open", () => {
+      this.setIsPdfOpen(true);
+      this.chatBodyMaker.resizeChatBody(this.isPdfOpen, customStyles?.chatBody);
+      this.iframeBridge.postToTap({ type: "pdf:enlarged" });
+    });
+    this.iframeBridge.listenToTap("pdf:close", () => {
+      this.setIsPdfOpen(false);
+      this.chatBodyMaker.resizeChatBody(this.isPdfOpen, customStyles?.chatBody);
+      this.iframeBridge.postToTap({ type: "pdf:shrinked" });
+    });
+
+    // if dev, attach alaram:fadeIn event
+    if (this.isLocal) {
+      this.iframeBridge.listenToTap("alarm:fadeIn", (data) => {
+        this.floatingButtonMaker.alarmFadeIn(data.messageInfo);
+      });
+    }
+  }
+
+  removeChat() {
+    if (!this.chatBody) throw new Error("chatBody is not initialized");
+
+    this.chatBodyMaker.removeChatBody();
+    this.floatingButtonMaker.alarmRemove();
+    this.iframeBridge.removeIframe();
+    this.chatBody = null;
+    this.isOpen = false;
+  }
+
+  /**
+   * @deprecated use `seekTimeline` method. gotta be expired at v1.0.0
+   */
+  postChatInfo({
+    clipId,
+    clipPlayHead,
+  }: {
+    clipId: string;
+    clipPlayHead: number;
+  }) {
+    this.seekTimeline({ clipId, clipPlayHead });
+  }
+
+  /**
+   * @deprecated use `events.onTimelineSeek` method. gotta be expired at v1.0.0
+   */
+  getTimelineInfo({
+    callback,
+  }: {
+    callback: (clipPlayHead: number, clipId: string) => void;
+  }) {
+    this.events.onTimelineSeek(callback);
+  }
+}
+
+export default TapSDK;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@coxwave/tap-sdk",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "A vanilla JS SDK",
+  "main": "index.ts",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:analyze": "tsup --metafile",
+    "dev": "tsup --watch",
+    "prepare": "pnpm build",
+    "lint": "eslint .",
+    "publish:npm": "./scripts/publish.sh"
+  },
+  "keywords": [
+    "sdk",
+    "vanilla",
+    "javascript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@coxwave/tap-messages": "workspace:*"
+  },
+  "devDependencies": {
+    "@coxwave/config-eslint": "workspace:*",
+    "@coxwave/config-typescript": "workspace:*",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/esbuild-plugin": "^2.3.18",
+    "postcss": "^8.5.6",
+    "tsup": "^8.5.0"
+  }
+}