@boldvideo/bold-js 0.6.0 → 0.7.0

package/dist/index.js

@@ -0,0 +1,265 @@
+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* () {
+    try {
+      const res = yield client.get(url);
+      if (res.status !== 200) {
+        throw new Error(`Unexpected response status: ${res.status}`);
+      }
+      return res.data;
+    } catch (error) {
+      console.error(`Error fetching data from URL: ${url}`, error);
+      throw error;
+    }
+  });
+}
+function fetchSettings(client) {
+  return (videoLimit = 12) => __async(this, null, function* () {
+    try {
+      return yield get(
+        client,
+        `settings?limit=${videoLimit}`
+      );
+    } catch (error) {
+      console.error(`Error fetching settings with limit: ${videoLimit}`, error);
+      throw error;
+    }
+  });
+}
+function fetchVideos(client) {
+  return (videoLimit = 12) => __async(this, null, function* () {
+    try {
+      return yield get(
+        client,
+        `videos/latest?limit=${videoLimit}`
+      );
+    } catch (error) {
+      console.error(`Error fetching videos with limit: ${videoLimit}`, error);
+      throw error;
+    }
+  });
+}
+function searchVideos(client) {
+  return (term) => __async(this, null, function* () {
+    try {
+      return yield get(client, `videos?query=${term}`);
+    } catch (error) {
+      console.error(`Error searching for videos with term: ${term}`, error);
+      throw error;
+    }
+  });
+}
+function fetchVideo(client) {
+  return (id) => __async(this, null, function* () {
+    try {
+      return yield get(client, `videos/${id}`);
+    } catch (error) {
+      console.error(`Error fetching video with ID: ${id}`, error);
+      throw error;
+    }
+  });
+}
+function fetchPlaylists(client) {
+  return () => __async(this, null, function* () {
+    try {
+      return yield get(client, "playlists");
+    } catch (error) {
+      console.error("Error fetching playlists", error);
+      throw error;
+    }
+  });
+}
+function fetchPlaylist(client) {
+  return (id) => __async(this, null, function* () {
+    try {
+      return yield get(client, `playlists/${id}`);
+    } catch (error) {
+      console.error(`Error fetching playlist with ID: ${id}`, error);
+      throw error;
+    }
+  });
+}
+
+// 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.currentTime) || 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) => {
+    var _a;
+    const eventDetails = __spreadProps(__spreadValues({}, basicInfos()), {
+      userId,
+      videoId: video.id,
+      title: video.title,
+      videoDuration: video.duration,
+      currentTime: ((_a = event.target) == null ? void 0 : _a.currentTime) || 0
+    });
+    if (event.type == "timeupdate" || event.type == "time-update") {
+      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(event) {
+  switch (event.type) {
+    case "pause":
+      return "video_pause";
+    case "play":
+      return "video_resume";
+    case "loadedmetadata":
+    case "loaded-metadata":
+      return "video_load";
+    case "time-update":
+    case "timeupdate":
+      return "video_progress";
+    default:
+      return "unknown_event";
+  }
+}
+function basicInfos() {
+  return {
+    url: location.href,
+    domain: location.hostname,
+    referrer: document.referrer || null,
+    deviceWidth: window.innerWidth,
+    userAgent: navigator.userAgent
+  };
+}
+
+// src/lib/client.ts
+function createClient(apiKey, options = { debug: false }) {
+  var _a;
+  if (!apiKey || typeof apiKey !== "string") {
+    throw new Error("API key is missing or invalid");
+  }
+  const { debug } = options;
+  const apiClientOptions = {
+    baseURL: (_a = options.baseURL) != null ? _a : "https://app.boldvideo.io/api/v1/",
+    headers: {
+      Authorization: apiKey
+    }
+  };
+  let apiClient;
+  try {
+    apiClient = axios.create(apiClientOptions);
+  } catch (error) {
+    console.error("Error creating API client", error);
+    throw error;
+  }
+  const userId = [...Array(30)].map(() => Math.random().toString(36)[2]).join("");
+  return {
+    settings: fetchSettings(apiClient),
+    videos: {
+      list: fetchVideos(apiClient),
+      get: fetchVideo(apiClient),
+      search: searchVideos(apiClient)
+    },
+    playlists: {
+      list: fetchPlaylists(apiClient),
+      get: fetchPlaylist(apiClient)
+    },
+    trackEvent: trackEvent(apiClient, userId, { debug }),
+    trackPageView: trackPageView(apiClient, userId, { debug })
+  };
+}
+export {
+  createClient
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@boldvideo/bold-js",
   "license": "MIT",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/thoughts/shared/plans/2025-10-22-BOLD-759-portal-color-scheme.md

@@ -0,0 +1,272 @@
+# Add portal.color_scheme to Settings Type Implementation Plan
+
+## Overview
+
+Add the `color_scheme` field to the `Portal` type in the bold-js SDK to support the Next.js starter's theme configuration feature. The API already returns this field in production; we need to update the TypeScript types to reflect this.
+
+## Current State Analysis
+
+**What exists:**
+- Portal type defined at `src/lib/types.ts:133-138` with four nested objects (display, layout, navigation, theme)
+- Portal type properly exported through `src/index.ts:12`
+- Settings type at `src/lib/types.ts:210` includes the Portal object
+- API already returning `portal.color_scheme` field (live in production)
+- Next.js starter consuming this field but TypeScript doesn't know about it
+
+**What's missing:**
+- `color_scheme` field in the Portal type definition
+- Type definition doesn't match the API response
+- Consumers can't benefit from TypeScript autocomplete/validation for this field
+
+**Key constraints:**
+- Must maintain backward compatibility (field should be optional)
+- Must follow existing optional field pattern (using `?` suffix)
+- This will be the first string literal union type in Portal/Settings types
+- Project uses changesets for version management
+- No existing test suite to update
+
+## Desired End State
+
+After implementation:
+1. Portal type includes `color_scheme?: 'toggle' | 'light' | 'dark'` field
+2. TypeScript consumers get autocomplete for the three valid values
+3. Type declarations are rebuilt and available in `dist/index.d.ts`
+4. Version bumped to 0.7.0 with appropriate changelog entry
+5. Changes published to npm
+
+**Verification:**
+- Portal type includes the new field with correct union type
+- Build succeeds without errors: `pnpm run build`
+- Type checking passes: `pnpm run lint`
+- Compiled type declarations in `dist/index.d.ts` include the field
+- Changeset created for version 0.7.0
+
+## What We're NOT Doing
+
+- Not adding runtime validation for the color_scheme values
+- Not adding tests (no test framework exists in this project)
+- Not modifying the API or fetcher functions (they already work correctly)
+- Not changing any other types or fields
+- Not adding documentation beyond the changelog entry
+- Not updating example code or README (out of scope for this ticket)
+
+## Implementation Approach
+
+This is a single-phase implementation because:
+1. It's a one-line type change
+2. No runtime code changes required
+3. No migration needed (field is optional)
+4. Build and publish can happen together
+
+The approach:
+1. Add the `color_scheme` field to Portal type
+2. Create changeset for version bump
+3. Build to verify TypeScript compilation
+4. Commit changes following git conventions
+
+## Phase 1: Add color_scheme Field
+
+### Overview
+
+Add the `color_scheme` field to the Portal type definition following the SDK's established patterns for optional fields.
+
+### Changes Required
+
+#### 1. Update Portal Type Definition
+
+**File**: `src/lib/types.ts`
+**Line**: 133-138
+**Changes**: Add `color_scheme` as the first field in the Portal type
+
+```typescript
+export type Portal = {
+  color_scheme?: 'toggle' | 'light' | 'dark';
+  display: PortalDisplay;
+  layout: PortalLayout;
+  navigation: PortalNavigation;
+  theme: PortalTheme;
+};
+```
+
+**Rationale:**
+- Optional field (`?`) maintains backward compatibility
+- String literal union type provides type safety and autocomplete
+- Positioned first in the type as it's a top-level configuration (similar to how top-level fields appear before nested objects in Settings)
+- Follows TypeScript best practices for union types
+
+#### 2. Create Changeset
+
+**Command**: `pnpm changeset`
+
+**Changeset content:**
+```markdown
+---
+"@boldvideo/bold-js": minor
+---
+
+Add `color_scheme` field to Portal type (BOLD-759)
+
+Added optional `color_scheme` field to the Portal type to support theme configuration:
+- `'toggle'`: Show theme toggle, allow user to switch between light/dark
+- `'light'`: Force light mode, hide theme toggle
+- `'dark'`: Force dark mode, hide theme toggle
+
+This field is already returned by the API and consumed by the Next.js starter. The type definition now matches the API response.
+```
+
+**Why minor version:**
+- Adds new functionality (new field) to the public API
+- Follows semantic versioning: backward compatible API addition
+- Matches pattern from CHANGELOG.md (v0.5.0 added `ai_greeting`, v0.6.0 added portal object)
+
+### Success Criteria
+
+#### Automated Verification:
+
+- [x] Portal type includes `color_scheme?: 'toggle' | 'light' | 'dark'` field in correct position
+- [x] Build completes successfully: `pnpm run build`
+- [x] Type checking passes: `pnpm run lint` (runs `tsc`)
+- [x] Compiled declarations in `dist/index.d.ts` include the new field
+- [x] Git status shows only expected changes: `src/lib/types.ts` and changeset file
+
+#### Manual Verification:
+
+- [x] Type change makes semantic sense (three valid theme modes)
+- [x] Field placement is logical within the Portal type structure
+- [x] Changeset message accurately describes the change
+- [x] No unintended changes to other types
+
+## Phase 2: Version and Publish
+
+### Overview
+
+Use changesets to version the package and publish to npm.
+
+### Changes Required
+
+#### 1. Version the Package
+
+**Command**: `pnpm changeset version`
+
+**Expected changes:**
+- `package.json` version bumped from `0.6.1` to `0.7.0`
+- `CHANGELOG.md` updated with changeset content under `## 0.7.0`
+- Changeset file consumed and removed
+
+#### 2. Build for Distribution
+
+**Command**: `pnpm run build`
+
+**Expected output:**
+- `dist/index.js` (ESM)
+- `dist/index.cjs` (CommonJS)
+- `dist/index.d.ts` (TypeScript declarations)
+
+The build must succeed and include the new `color_scheme` field in type declarations.
+
+#### 3. Publish to npm
+
+**Command**: `pnpm changeset publish`
+
+**Expected behavior:**
+- Package tagged as `v0.7.0`
+- Published to npm registry with public access
+- Git tag created for the release
+
+### Success Criteria
+
+#### Automated Verification:
+
+- [x] `package.json` shows version `0.7.0`
+- [x] `CHANGELOG.md` includes entry for version `0.7.0` with BOLD-759 reference
+- [x] Build completes without errors: `pnpm run build`
+- [x] Type declarations in `dist/index.d.ts` include `color_scheme` field
+- [ ] Package published successfully to npm (requires manual 2FA)
+- [ ] Git tag `v0.7.0` created (created by publish command)
+
+#### Manual Verification:
+
+- [ ] Published package on npm shows correct version (pending publish)
+- [ ] Type declarations are available to consumers (pending publish)
+- [x] CHANGELOG.md entry is accurate and well-formatted
+- [x] All files committed with appropriate git message (following project conventions)
+
+## Testing Strategy
+
+### Unit Tests
+
+Not applicable - this project has no test suite.
+
+### Integration Tests
+
+Not applicable - no test framework configured.
+
+### Manual Testing Steps
+
+Since this is a type-only change, manual testing focuses on verification that TypeScript types work correctly:
+
+1. **Verify type compilation:**
+   ```bash
+   pnpm run lint  # Runs tsc to check types
+   ```
+
+2. **Verify build output:**
+   ```bash
+   pnpm run build
+   # Check that dist/index.d.ts contains the new field
+   cat dist/index.d.ts | grep -A 5 "type Portal"
+   ```
+
+3. **Verify in a consumer project (optional):**
+   - Link the package locally: `pnpm link @boldvideo/bold-js`
+   - In a TypeScript project, import and use the type:
+     ```typescript
+     import { createClient } from '@boldvideo/bold-js';
+
+     const bold = createClient('api-key');
+     const settings = await bold.settings();
+
+     // TypeScript should autocomplete 'toggle' | 'light' | 'dark'
+     const colorScheme = settings.data.portal.color_scheme;
+     ```
+
+## Performance Considerations
+
+None - this is a compile-time only change. No runtime performance impact.
+
+## Migration Notes
+
+No migration required. The field is optional and backward compatible:
+
+**For existing consumers:**
+- Upgrading to 0.7.0 requires no code changes
+- The `color_scheme` field will be `undefined` if not returned by the API
+- Type checking will help consumers handle the field correctly if they choose to use it
+
+**API compatibility:**
+- API already returns this field (in production since commits b31396f, b42c9fe, b9d8ee8)
+- Older SDK versions will ignore the field (no breaking changes)
+- Newer SDK versions provide type safety for the field
+
+## References
+
+- Original ticket: [BOLD-759](https://linear.app/boldvideo/issue/BOLD-759/add-portalcolor-scheme-to-settings-type-in-bold-js-sdk)
+- Research document: `thoughts/shared/research/2025-10-22-BOLD-759-portal-color-scheme-settings.md`
+- Portal type definition: `src/lib/types.ts:133-138`
+- Settings type definition: `src/lib/types.ts:179-217`
+- Type exports: `src/index.ts:12`
+
+## Implementation Notes
+
+**Field positioning rationale:**
+The `color_scheme` field should be placed first in the Portal type because:
+1. It's a direct configuration value (not a nested object like display/layout/navigation/theme)
+2. Follows the pattern in Settings type where direct values come before nested objects
+3. Makes the type more readable - simple values first, complex nested types after
+
+**Union type introduction:**
+This is the first string literal union type in Portal/Settings types. While the existing types use simple primitives (`string`, `boolean`, `number`), using a union type here provides:
+1. Type safety - prevents invalid values
+2. Better developer experience - autocomplete in IDEs
+3. Self-documenting code - valid values are in the type definition
+4. Follows TypeScript best practices for known string values