@boldvideo/bold-js 0.1.0

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.github/workflow/main.yml

@@ -0,0 +1,21 @@
+name: CI
+on:
+  push:
+    branches:
+      - "**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "pnpm"
+
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run lint && pnpm run build

package/.github/workflow/publish.yml

@@ -0,0 +1,29 @@
+name: Publish
+on:
+  push:
+    branches:
+      - "main"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "pnpm"
+
+      - run: pnpm install --frozen-lockfile
+      - name: Create Release Pull Request or Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm run build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/README.md

@@ -0,0 +1,67 @@
+<div align="center">
+    <a href="https://wearebold.af?utm_source=github.com&utm_medium=readme&utm_campaign=bold-js" align="center">
+		<img src="https://wearebold.af/bold-js-github-header.svg"  alt="Bold Logo">
+	</a>
+	<h1 align="center rainbow">@boldvideo/bold-js</h1>
+    <p align="center">
+        The JavaScript SDK for interacting with the <a href="http://wearebold.af?utm_source=github.com&utm_medium=readme&utm_campaign=bold-js" target="_blank">Bold API</a>, to power your own business video platform.
+    </p>
+</div>
+
+<p align="center">
+  <a href="https://npmjs.com/package/@boldvideo/bold-js">
+    <img src="https://img.shields.io/npm/v/@boldvideo/bold-js/latest.svg?style=flat-square" alt="Bold JS" />
+  </a>
+  <a href="https://npmjs.com/package/@boldvideo/bold-js" rel="nofollow">
+    <img src="https://img.shields.io/npm/dt/@boldvideo/bold-js.svg?style=flat-square" alt="npm">
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://twitter.com/intent/follow?screen_name=veryboldvideo">
+    <img src="https://img.shields.io/badge/Follow-%40veryboldvideo-09b3af?style=appveyor&logo=twitter" alt="Follow @veryboldvideo" />
+  </a>
+  <a href="https://https://app.boldvideo.io/register?utm_source=github.com&utm_medium=readme&utm_campaign=bold-js">
+    <img src="https://img.shields.io/badge/Try%20Bold-Free-09b3af?style=appveyor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAmCAYAAADTGStiAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGFSURBVHgBxZg9SwNBEIZ34xUpVLCwEQQRtRARxV+g4M8QLO0sBPtgZS129gr+AbEWWyshOUSCkipBjB8cBHPrM4GVQ84qZuaFJTebj+feyczu3fmxEIIbXjnjjZEy7hm3feeunfdPf33B/xO4TBk/fMoZHXMCHU1wVBP3m8Cb2mDRI/AN4K9xouJ0NA9ovzih5Vj0jutZXHcl0HIsmkicW4uBJtiR2kUr8KQJGPVMwJ62sgJ//hxrtROQNsvnDO30JbGaY9xeROggVnLcY/FYAPwcJ7Qc7xahKmAAe33vz0vmRysK6rASQs2FUC3Oq1U1xZVSWVukvCWxWlXjbgnYFc6nVMEiXK+wQx0MjhX346gPWmtOe5MQjQPdsQBLylctUi3gholjnE6bgFHVCpxZgR+s/uOGVTvdWLTTCyvXurpj3J7IfbOqY0BpLrcx3mea22Id6LZAJdYA56T3COhy8dFE4kYkHN7xcgnwDGD79/sJH6i54SQ1ItfLXZx1GC2CehmsqG96m37o1gSKagAAAABJRU5ErkJggg==" alt="Try Bold Video" />
+  </a>
+</p>
+
+## Usage
+
+First, install the library:
+
+```sh
+npm install @boldvideo/bold-js
+```
+
+Next, instantiate the client to establish a connection to your Bold Channel:
+```js
+import { createClient } from "@boldvideo/bold-js";
+
+const bold = createClient('YOUR_API_KEY');
+```
+
+Now you're able to query any of your resources from Bold. For exmaple:
+```js
+// fetches your channel settings, menus and featured playlists
+const settings = await bold.settings();
+
+// fetches the latest videos
+const videos = await bold.videos.list();
+
+// fetches the latest playlists
+const playlists = await bold.playlists.list();
+
+```
+
+## Related Links
+
+- **[Bold API Documentation](https://docs.boldvideo.io/docs/api)**
+
+## More Resources
+
+### Support
+
+- Bugs or Feature Requests? [Submit an issue](/../../issues/new).
+
+

package/dist/index.cjs

@@ -0,0 +1,237 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createClient: () => createClient
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/client.ts
+var import_axios = __toESM(require("axios"), 1);
+
+// src/lib/fetchers.ts
+function get(client, url) {
+  return __async(this, null, function* () {
+    const res = yield client.get(url);
+    return res.data;
+  });
+}
+function fetchSettings(client) {
+  return (videoLimit = 12) => __async(this, null, function* () {
+    return get(client, `settings?limit=${videoLimit}`);
+  });
+}
+function fetchVideos(client) {
+  return (videoLimit = 12) => __async(this, null, function* () {
+    return get(client, `videos/latest?limit=${videoLimit}`);
+  });
+}
+function fetchVideo(client) {
+  return (id) => __async(this, null, function* () {
+    return get(client, `videos/${id}`);
+  });
+}
+function fetchPlaylists(client) {
+  return () => __async(this, null, function* () {
+    return get(client, "playlists");
+  });
+}
+function fetchPlaylist(client) {
+  return (id) => __async(this, null, function* () {
+    return get(client, `playlists/${id}`);
+  });
+}
+
+// src/util/throttle.ts
+var throttle = (fn, delay) => {
+  let wait = false;
+  let timeout;
+  let cancelled = false;
+  return [
+    (...args) => {
+      if (cancelled)
+        return void 0;
+      if (wait)
+        return void 0;
+      const val = fn(...args);
+      wait = true;
+      timeout = window.setTimeout(() => {
+        wait = false;
+      }, delay);
+      return val;
+    },
+    () => {
+      cancelled = true;
+      clearTimeout(timeout);
+    }
+  ];
+};
+
+// src/lib/tracking.ts
+function sendEvent(client, eventName, data, debug) {
+  const payload = {
+    n: eventName,
+    u: data.url,
+    usr: data.userId,
+    d: data.domain,
+    ua: data.userAgent,
+    w: data.deviceWidth,
+    vid: (data == null ? void 0 : data.videoId) || void 0,
+    vt: data.title,
+    vdur: (data == null ? void 0 : data.videoDuration) || void 0,
+    time: (data == null ? void 0 : data.timeStamp) || void 0
+  };
+  if (debug)
+    console.log(`Bold SDK - Logging event '${eventName}'`, payload);
+  client.post("/event", payload);
+}
+var [throttledSendEvent] = throttle(sendEvent, 5e3);
+function trackEvent(client, userId, options) {
+  return (video, event) => {
+    const eventDetails = __spreadProps(__spreadValues({}, basicInfos()), {
+      userId,
+      videoId: video.id,
+      title: video.title,
+      videoDuration: video.duration,
+      timeStamp: event.timeStamp
+    });
+    if (event.type == "timeupdate") {
+      throttledSendEvent(
+        client,
+        getEventName(event),
+        eventDetails,
+        options.debug
+      );
+    } else {
+      sendEvent(client, getEventName(event), eventDetails, options.debug);
+    }
+  };
+}
+function trackPageView(client, userId, options) {
+  return (title) => {
+    const eventDetails = __spreadProps(__spreadValues({}, basicInfos()), {
+      userId,
+      title
+    });
+    sendEvent(client, "page_view", eventDetails, options.debug);
+  };
+}
+function getEventName({ type }) {
+  switch (type) {
+    case "pause":
+      return "video_pause";
+    case "play":
+      return "video_resume";
+    case "loadedmetadata":
+      return "video_load";
+    case "timeupdate":
+      return "video_progress";
+    default:
+      return "unknown_event";
+  }
+}
+function basicInfos() {
+  return {
+    url: location.href,
+    domain: "localhost:3000",
+    referrer: document.referrer || null,
+    deviceWidth: window.innerWidth,
+    userAgent: navigator.userAgent
+  };
+}
+
+// src/lib/client.ts
+function createClient(apiKey, options = { debug: false }) {
+  var _a;
+  const { debug } = options;
+  const apiClientOptions = {
+    baseURL: (_a = options.baseURL) != null ? _a : "https://app.boldvideo.io/api/v1/",
+    headers: {
+      Authorization: apiKey
+    }
+  };
+  const apiClient = import_axios.default.create(apiClientOptions);
+  const userId = [...Array(30)].map(() => Math.random().toString(36)[2]).join("");
+  return {
+    settings: fetchSettings(apiClient),
+    videos: {
+      list: fetchVideos(apiClient),
+      get: fetchVideo(apiClient)
+    },
+    playlists: {
+      list: fetchPlaylists(apiClient),
+      get: fetchPlaylist(apiClient)
+    },
+    trackEvent: trackEvent(apiClient, userId, { debug }),
+    trackPageView: trackPageView(apiClient, userId, { debug })
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createClient
+});

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+type Video = {
+    captions: string;
+    captions_label: string;
+    captions_lang: string;
+    description: string | null;
+    duration: number;
+    id: string;
+    imported_from: string | null;
+    legacy_video_url: null | null;
+    meta_data: [];
+    playback_id: string;
+    published_at: string;
+    stream_url: string;
+    teaser: string | null;
+    thumbnail: string;
+    title: string;
+    transcription: string;
+    type: string;
+};
+type Playlist = {
+    description?: string;
+    id: string;
+    is_private: boolean;
+    title: string;
+    type: string;
+    videos: Video[];
+};
+type MenuItem = {
+    icon: string;
+    is_ext: boolean;
+    label: string;
+    url: string;
+};
+type Settings = {
+    featured_playlists: Playlist[];
+    menu_items: MenuItem[];
+    meta_data: {
+        channel_name: string;
+        description: string;
+        image: string;
+        no_seo: boolean;
+        title: string;
+        title_suffix: string;
+    };
+};
+
+type ClientOptions = {
+    baseURL?: string;
+    debug: boolean;
+};
+declare function createClient(apiKey: string, options?: ClientOptions): {
+    settings: (videoLimit?: number) => Promise<{
+        data: Settings;
+    }>;
+    videos: {
+        list: (videoLimit?: number) => Promise<{
+            data: Video[];
+        }>;
+        get: (id: string) => Promise<{
+            data: Video;
+        }>;
+    };
+    playlists: {
+        list: () => Promise<{
+            data: Playlist[];
+        }>;
+        get: (id: string) => Promise<{
+            data: Playlist;
+        }>;
+    };
+    trackEvent: (video: any, event: Event) => void;
+    trackPageView: (title: string) => void;
+};
+
+export { createClient };

package/dist/index.js

@@ -0,0 +1,203 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/lib/client.ts
+import axios from "axios";
+
+// src/lib/fetchers.ts
+function get(client, url) {
+  return __async(this, null, function* () {
+    const res = yield client.get(url);
+    return res.data;
+  });
+}
+function fetchSettings(client) {
+  return (videoLimit = 12) => __async(this, null, function* () {
+    return get(client, `settings?limit=${videoLimit}`);
+  });
+}
+function fetchVideos(client) {
+  return (videoLimit = 12) => __async(this, null, function* () {
+    return get(client, `videos/latest?limit=${videoLimit}`);
+  });
+}
+function fetchVideo(client) {
+  return (id) => __async(this, null, function* () {
+    return get(client, `videos/${id}`);
+  });
+}
+function fetchPlaylists(client) {
+  return () => __async(this, null, function* () {
+    return get(client, "playlists");
+  });
+}
+function fetchPlaylist(client) {
+  return (id) => __async(this, null, function* () {
+    return get(client, `playlists/${id}`);
+  });
+}
+
+// src/util/throttle.ts
+var throttle = (fn, delay) => {
+  let wait = false;
+  let timeout;
+  let cancelled = false;
+  return [
+    (...args) => {
+      if (cancelled)
+        return void 0;
+      if (wait)
+        return void 0;
+      const val = fn(...args);
+      wait = true;
+      timeout = window.setTimeout(() => {
+        wait = false;
+      }, delay);
+      return val;
+    },
+    () => {
+      cancelled = true;
+      clearTimeout(timeout);
+    }
+  ];
+};
+
+// src/lib/tracking.ts
+function sendEvent(client, eventName, data, debug) {
+  const payload = {
+    n: eventName,
+    u: data.url,
+    usr: data.userId,
+    d: data.domain,
+    ua: data.userAgent,
+    w: data.deviceWidth,
+    vid: (data == null ? void 0 : data.videoId) || void 0,
+    vt: data.title,
+    vdur: (data == null ? void 0 : data.videoDuration) || void 0,
+    time: (data == null ? void 0 : data.timeStamp) || void 0
+  };
+  if (debug)
+    console.log(`Bold SDK - Logging event '${eventName}'`, payload);
+  client.post("/event", payload);
+}
+var [throttledSendEvent] = throttle(sendEvent, 5e3);
+function trackEvent(client, userId, options) {
+  return (video, event) => {
+    const eventDetails = __spreadProps(__spreadValues({}, basicInfos()), {
+      userId,
+      videoId: video.id,
+      title: video.title,
+      videoDuration: video.duration,
+      timeStamp: event.timeStamp
+    });
+    if (event.type == "timeupdate") {
+      throttledSendEvent(
+        client,
+        getEventName(event),
+        eventDetails,
+        options.debug
+      );
+    } else {
+      sendEvent(client, getEventName(event), eventDetails, options.debug);
+    }
+  };
+}
+function trackPageView(client, userId, options) {
+  return (title) => {
+    const eventDetails = __spreadProps(__spreadValues({}, basicInfos()), {
+      userId,
+      title
+    });
+    sendEvent(client, "page_view", eventDetails, options.debug);
+  };
+}
+function getEventName({ type }) {
+  switch (type) {
+    case "pause":
+      return "video_pause";
+    case "play":
+      return "video_resume";
+    case "loadedmetadata":
+      return "video_load";
+    case "timeupdate":
+      return "video_progress";
+    default:
+      return "unknown_event";
+  }
+}
+function basicInfos() {
+  return {
+    url: location.href,
+    domain: "localhost:3000",
+    referrer: document.referrer || null,
+    deviceWidth: window.innerWidth,
+    userAgent: navigator.userAgent
+  };
+}
+
+// src/lib/client.ts
+function createClient(apiKey, options = { debug: false }) {
+  var _a;
+  const { debug } = options;
+  const apiClientOptions = {
+    baseURL: (_a = options.baseURL) != null ? _a : "https://app.boldvideo.io/api/v1/",
+    headers: {
+      Authorization: apiKey
+    }
+  };
+  const apiClient = axios.create(apiClientOptions);
+  const userId = [...Array(30)].map(() => Math.random().toString(36)[2]).join("");
+  return {
+    settings: fetchSettings(apiClient),
+    videos: {
+      list: fetchVideos(apiClient),
+      get: fetchVideo(apiClient)
+    },
+    playlists: {
+      list: fetchPlaylists(apiClient),
+      get: fetchPlaylist(apiClient)
+    },
+    trackEvent: trackEvent(apiClient, userId, { debug }),
+    trackPageView: trackPageView(apiClient, userId, { debug })
+  };
+}
+export {
+  createClient
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@boldvideo/bold-js",
+  "license": "MIT",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "lint": "tsc"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.26.0",
+    "tsup": "^6.6.3",
+    "typescript": "^4.9.5"
+  },
+  "dependencies": {
+    "axios": "^1.3.4"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { createClient } from 'lib/client'
+
+

package/src/lib/client.ts

@@ -0,0 +1,41 @@
+import axios, { AxiosInstance } from "axios";
+
+import { fetchVideo, fetchVideos, fetchSettings, fetchPlaylist, fetchPlaylists } from './fetchers'
+import { trackEvent, trackPageView } from './tracking'
+
+type ClientOptions = {
+  baseURL?: string
+  debug: boolean
+}
+
+function createClient(apiKey: string, options: ClientOptions = {debug: false}) {
+  const { debug } = options;
+  const apiClientOptions = {
+    baseURL: options.baseURL ?? "https://app.boldvideo.io/api/v1/",
+    headers: {
+      Authorization: apiKey,
+    },
+  };
+
+  const apiClient: AxiosInstance = axios.create(apiClientOptions);
+
+  const userId = [...Array(30)]
+    .map(() => Math.random().toString(36)[2])
+    .join("");
+
+  return {
+    settings: fetchSettings(apiClient),
+    videos: {
+      list: fetchVideos(apiClient),
+      get: fetchVideo(apiClient),
+    },
+    playlists: {
+      list: fetchPlaylists(apiClient),
+      get: fetchPlaylist(apiClient),
+    },
+    trackEvent: trackEvent(apiClient, userId, { debug }),
+    trackPageView: trackPageView(apiClient, userId, { debug }),
+  };
+}
+
+export { createClient };

package/src/lib/fetchers.ts

@@ -0,0 +1,33 @@
+import { Video, Playlist, Settings } from './types'
+import { AxiosInstance } from 'axios'
+
+type Response<T> = {
+  data: T
+}
+
+type ApiClient = AxiosInstance;
+
+async function get<TResponse>(client: ApiClient, url: string): Promise<TResponse> {
+  const res = await client.get(url);
+  return res.data as TResponse;
+}
+
+export function fetchSettings(client: ApiClient) {
+  return async (videoLimit = 12) => get<Response<Settings>>(client, `settings?limit=${videoLimit}`);
+}
+
+export function fetchVideos(client: ApiClient) {
+  return async (videoLimit = 12) => get<Response<Video[]>>(client, `videos/latest?limit=${videoLimit}`);
+}
+
+export function fetchVideo(client: ApiClient) {
+  return async (id: string) => get<Response<Video>>(client, `videos/${id}`);
+}
+
+export function fetchPlaylists(client: ApiClient) {
+  return async () => get<Response<Playlist[]>>(client, "playlists");
+}
+
+export function fetchPlaylist(client: ApiClient) {
+  return async (id: string) => get<Response<Playlist>>(client, `playlists/${id}`);
+}

package/src/lib/tracking.ts

@@ -0,0 +1,115 @@
+import { AxiosInstance } from "axios";
+import { throttle } from "util/throttle";
+
+type ApiClient = AxiosInstance;
+
+type Options = {
+  debug: boolean;
+};
+
+type EventData = {
+  url: string;
+  userId: string;
+  domain: string;
+  userAgent: string;
+  deviceWidth: number;
+  videoId?: string;
+  title: string;
+  videoDuration?: number;
+  timeStamp?: number;
+};
+
+function sendEvent(
+  client: ApiClient,
+  eventName: string,
+  data: EventData,
+  debug: boolean
+) {
+  const payload = {
+    n: eventName,
+    u: data.url,
+    usr: data.userId,
+    d: data.domain,
+    ua: data.userAgent,
+    w: data.deviceWidth,
+    vid: data?.videoId || undefined,
+    vt: data.title,
+    vdur: data?.videoDuration || undefined,
+    time: data?.timeStamp || undefined,
+  };
+
+  if (debug) console.log(`Bold SDK - Logging event '${eventName}'`, payload);
+
+  client.post("/event", payload);
+}
+
+const [throttledSendEvent] = throttle(sendEvent, 5000);
+
+export function trackEvent(
+  client: ApiClient,
+  userId: string,
+  options: Options
+) {
+  // TODO: verify event
+  return (video: any, event: Event) => {
+    const eventDetails = {
+      ...basicInfos(),
+      userId,
+      videoId: video.id,
+      title: video.title,
+      videoDuration: video.duration,
+      timeStamp: event.timeStamp,
+    };
+    // debounce fast hitting timeupdate event
+    if (event.type == "timeupdate") {
+      throttledSendEvent(
+        client,
+        getEventName(event),
+        eventDetails,
+        options.debug
+      );
+    } else {
+      sendEvent(client, getEventName(event), eventDetails, options.debug);
+    }
+  };
+}
+
+export function trackPageView(
+  client: ApiClient,
+  userId: string,
+  options: Options
+) {
+  return (title: string) => {
+    const eventDetails = {
+      ...basicInfos(),
+      userId,
+      title,
+    };
+    sendEvent(client, "page_view", eventDetails, options.debug);
+  };
+}
+
+function getEventName({ type }: { type: string }) {
+  switch (type) {
+    case "pause":
+      return "video_pause";
+    case "play":
+      return "video_resume";
+    case "loadedmetadata":
+      return "video_load";
+    case "timeupdate":
+      return "video_progress";
+    default:
+      return "unknown_event";
+  }
+}
+
+function basicInfos() {
+  return {
+    url: location.href,
+    domain: "localhost:3000",
+    referrer: document.referrer || null,
+    deviceWidth: window.innerWidth,
+    userAgent: navigator.userAgent,
+  };
+}

package/src/lib/types.ts

@@ -0,0 +1,48 @@
+export type Video = {
+  captions: string;
+  captions_label: string;
+  captions_lang: string;
+  description: string | null;
+  duration: number;
+  id: string;
+  imported_from: string | null;
+  legacy_video_url: null | null;
+  meta_data: [];
+  playback_id: string;
+  published_at: string;
+  stream_url: string;
+  teaser: string | null;
+  thumbnail: string;
+  title: string;
+  transcription: string;
+  type: string;
+};
+
+export type Playlist = {
+  description?: string;
+  id: string;
+  is_private: boolean;
+  title: string;
+  type: string;
+  videos: Video[];
+};
+
+export type MenuItem = {
+  icon: string;
+  is_ext: boolean;
+  label: string;
+  url: string;
+};
+
+export type Settings = {
+  featured_playlists: Playlist[];
+  menu_items: MenuItem[];
+  meta_data: {
+    channel_name: string;
+    description: string;
+    image: string;
+    no_seo: boolean;
+    title: string;
+    title_suffix: string;
+  };
+};

package/src/util/throttle.ts

@@ -0,0 +1,29 @@
+export const throttle = <R, A extends any[]>(
+  fn: (...args: A) => R,
+  delay: number
+): [(...args: A) => R | undefined, () => void] => {
+  let wait = false;
+  let timeout: undefined | number;
+  let cancelled = false;
+
+  return [
+    (...args: A) => {
+      if (cancelled) return undefined;
+      if (wait) return undefined;
+
+      const val = fn(...args);
+
+      wait = true;
+
+      timeout = window.setTimeout(() => {
+        wait = false;
+      }, delay);
+
+      return val;
+    },
+    () => {
+      cancelled = true;
+      clearTimeout(timeout);
+    },
+  ];
+};

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "baseUrl": "src"
+  }
+}