@amityco/ts-sdk 7.10.1-86aa7706.0 → 7.10.1-9fe9d33d.0

package/src/liveStreamPlayer/index.ts

@@ -0,0 +1 @@
+export * from './api';

package/src/liveStreamPlayer/utils/cryptoSignatureUtils.ts

@@ -0,0 +1,107 @@
+import { atob, btoa } from 'js-base64';
+import uuid from 'react-native-uuid';
+
+const privateKey = process.env.LIVE_STREAM_KEY;
+/*
+ * The crypto algorithm used for importing key and signing string
+ */
+const ALGORITHM = {
+  name: 'RSASSA-PKCS1-v1_5',
+  hash: { name: 'SHA-256' },
+};
+
+/*
+ * IMPORTANT!
+ * If you are recieving key from other platforms use an online tool to convert
+ * the PKCS1 to PKCS8. For instance the key from Android SDK is of the format
+ * PKCS1.
+ *
+ * If recieving from the platform, verify if it's already in the expected
+ * format. Otherwise the crypto.subtle.importKey will throw a DOMException
+ */
+const PRIVATE_KEY_SIGNATURE = 'pkcs8';
+
+/*
+ * Ensure that the private key in the .env follows this format
+ */
+const PEM_HEADER = '-----BEGIN PRIVATE KEY-----';
+const PEM_FOOTER = '-----END PRIVATE KEY-----';
+
+/*
+ * The crypto.subtle.sign function returns an ArrayBuffer whereas the server
+ * expects a base64 string. This util helps facilitate that process
+ */
+function base64FromArrayBuffer(buffer: ArrayBuffer): string {
+  const uint8Array = new Uint8Array(buffer);
+  let binary = '';
+
+  uint8Array.forEach(byte => {
+    binary += String.fromCharCode(byte);
+  });
+
+  return btoa(binary);
+}
+
+/*
+ * Convert a string into an ArrayBuffer
+ * from https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
+ *
+ * Solely used by the importPrivateKey method
+ */
+function str2ab(str: string) {
+  const buf = new ArrayBuffer(str.length);
+  const bufView = new Uint8Array(buf);
+
+  for (let i = 0, strLen = str.length; i < strLen; i += 1) {
+    bufView[i] = str.charCodeAt(i);
+  }
+
+  return buf;
+}
+
+function importPrivateKey(pem: string) {
+  // fetch the part of the PEM string between header and footer
+  const pemContents = pem.substring(PEM_HEADER.length, pem.length - PEM_FOOTER.length);
+
+  /*
+   * base64 decode the string to get the binary data
+   */
+  const binaryDerString = atob(pemContents);
+
+  // convert from a binary string to an ArrayBuffer
+  const binaryDer = str2ab(binaryDerString);
+
+  return crypto.subtle.importKey(PRIVATE_KEY_SIGNATURE, binaryDer, ALGORITHM, false, ['sign']);
+}
+
+export async function createSignature({
+  timestamp,
+  streams,
+}: {
+  timestamp: string;
+  streams: Amity.UsageDataModel[];
+}) {
+  if (!privateKey) return;
+
+  const dataStr = streams
+    .map(item =>
+      Object.keys(item)
+        .sort()
+        .map(key => `${key}=${item[key]}`)
+        .join('&'),
+    )
+    .join(';');
+
+  /*
+   * nonceStr needs to be unique for each request
+   */
+  const nonceStr = uuid.v4();
+  const signStr = `nonceStr=${nonceStr}&timestamp=${timestamp}&data=${dataStr}==`;
+  const encoder = new TextEncoder();
+  const data = encoder.encode(signStr);
+
+  const key = await importPrivateKey(privateKey);
+  const sign = await crypto.subtle.sign(ALGORITHM, key, data);
+
+  return { signature: base64FromArrayBuffer(sign), nonceStr };
+}

package/src/liveStreamPlayer/utils/eventRegister.ts

@@ -0,0 +1,182 @@
+import uuid from 'react-native-uuid';
+import { getUsageCollector } from '../api/getUsageCollector';
+import { onStreamViewerBanned } from '~/streamRepository/events';
+
+const SECOND = 1000;
+/*
+ * Usage collection interval is different from usage sync interval. Ideally it
+ * needs to be slightly lower than the usage sync interval as it's more likely
+ * that the live stream will stop playing than the sync failing
+ */
+const USAGE_COLLECTION_INTERVAL = 20 * SECOND;
+
+/*
+ * Register events and their handlers
+ *
+ * 3 Types: Play, Pause / Stop, & Unmount
+ *  1. Each handler will have access to startTime, which can be an iso string or
+ *  null
+ *  2. Get the usage collector instance to update usage
+ */
+export class EventRegister {
+  player: HTMLVideoElement;
+
+  _startTime: null | number;
+
+  _usageCollector: ReturnType<typeof getUsageCollector>;
+
+  resolution: null | string;
+
+  _controller: AbortController;
+
+  _sessionId: null | string;
+
+  _observer: MutationObserver;
+
+  _SDKUnsubscribers: Amity.Unsubscriber[] = [];
+
+  constructor(player: HTMLVideoElement, resolution: string, streamId: string) {
+    this.player = player;
+    this.resolution = resolution;
+    this._startTime = null;
+
+    this._usageCollector = getUsageCollector();
+    this._usageCollector.registerStream(player.id);
+
+    this._sessionId = String(uuid.v4());
+
+    this._controller = new AbortController();
+
+    /*
+     * MutationObserver allows for auto removal of all event handlers that are
+     * added to register usage
+     */
+    this._observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.removedNodes.forEach(node => {
+          if (node === player) {
+            this._unregisterEvents();
+            this._SDKUnsubscribers.forEach(fn => fn?.());
+          }
+        });
+      });
+    });
+
+    this._SDKUnsubscribers.push(
+      onStreamViewerBanned(stream => {
+        // if still has stream.watcherUrl, the current user has not banned.
+        if (stream.watcherUrl) return;
+        this.player.pause();
+        this.player.removeAttribute('src');
+        this.player.load();
+        this.player.remove();
+      }),
+    );
+  }
+
+  _resetStartTime() {
+    this._startTime = Date.now();
+  }
+
+  _shouldUpdateCollector() {
+    /*
+     * a null value on startTime indicates a stream that is not playing
+     */
+    if (!this._startTime) return false;
+
+    if (Date.now() - this._startTime > USAGE_COLLECTION_INTERVAL) {
+      return true;
+    }
+
+    return false;
+  }
+
+  _sendUsageToCollector() {
+    if (!this._startTime) return;
+
+    const endTime = Date.now();
+    const watchMilliseconds = endTime - this._startTime;
+    const watchSeconds = Math.round(watchMilliseconds / SECOND);
+
+    /*
+     * Quite rare but can happen
+     */
+    if (!watchSeconds) return;
+
+    this._usageCollector.updateUsage({
+      streamId: this.player.id,
+      sessionId: this._sessionId!,
+      startTime: this._startTime ? new Date(this._startTime).toISOString() : null!,
+      endTime: new Date(endTime).toISOString(),
+      watchSeconds,
+      resolution: this.resolution!,
+    });
+  }
+
+  registerEvents() {
+    this.player.addEventListener(
+      'play',
+      () => {
+        if (!this._startTime) {
+          this._resetStartTime();
+        }
+      },
+      { signal: this._controller.signal },
+    );
+
+    // Playing event is fired after playback is started after being paused
+    this.player.addEventListener(
+      'playing',
+      () => {
+        if (!this._startTime) {
+          this._resetStartTime();
+        }
+      },
+      { signal: this._controller.signal },
+    );
+
+    this.player.addEventListener(
+      'timeupdate',
+      () => {
+        if (this._shouldUpdateCollector()) {
+          this._sendUsageToCollector();
+
+          this._resetStartTime();
+        }
+      },
+      { signal: this._controller.signal },
+    );
+
+    this.player.addEventListener(
+      'pause',
+      () => {
+        this._sendUsageToCollector();
+
+        this._startTime = null;
+      },
+      {
+        signal: this._controller.signal,
+      },
+    );
+
+    this.player.addEventListener(
+      'ended',
+      () => {
+        this._sendUsageToCollector();
+
+        this._startTime = null;
+      },
+      {
+        signal: this._controller.signal,
+      },
+    );
+  }
+
+  // perform cleanup when element is removed from DOM
+  _unregisterEvents() {
+    this._usageCollector.unregisterStream(this.player.id);
+    // remove event listeners
+    this._controller.abort();
+    this._observer.disconnect();
+  }
+}

package/src/liveStreamPlayer/utils/usageCollector.ts

@@ -0,0 +1,98 @@
+import { syncUsage } from '../api/syncUsage';
+
+/*
+ * It was originally planned to be 10 seconds but the signature creation is a
+ * slow process and can take upto 4 to 5 seconds, which might lead to data
+ * inconsitencies and adds complexity to manging sync data.
+ *
+ * Hence, I've incerased the USAGE_SYNC_INTERVAL to ensure a more maintainable
+ * code
+ */
+export const USAGE_SYNC_INTERVAL = 20 * 1000; // 20 seconds;
+
+/**
+ * @class
+ *
+ * Usage Collector is responsible for collecting data from live stream video
+ * events and periodically passing the collected data down to Usage Syncer
+ *
+ */
+export class UsageCollector {
+  // all unsynced usage data
+  _unsyncedData: Amity.UsageDataModel[];
+
+  _syncBuffer: Amity.UsageDataModel[];
+
+  /*
+   * all live streams that are currently updating usage to the usage collector
+   * helps free resources if there are none
+   */
+  _activeStreams: string[];
+
+  _syncInterval: null | ReturnType<typeof setInterval>;
+
+  constructor() {
+    this._unsyncedData = [];
+    this._syncBuffer = [];
+    this._activeStreams = [];
+    this._startInterval();
+    this._syncInterval = null;
+  }
+
+  registerStream(streamId: string) {
+    this._activeStreams.push(streamId);
+  }
+
+  getActiveStreams() {
+    return this._activeStreams;
+  }
+
+  unregisterStream(streamId: string) {
+    this._activeStreams = this._activeStreams.filter(id => id !== streamId);
+  }
+
+  updateUsage(data: Amity.UsageDataModel) {
+    this._unsyncedData.push(data);
+  }
+
+  /*
+   * Buffer of all data that is currently being synced
+   * This would help against data loss from new updates while the syncer is
+   * attempting to update usage with the server.
+   *
+   * Also, makes it easier to keep track of synced data for successfull syncs.
+   *
+   * Without the buffer data integrity would need to be maintained between
+   * what's been synced and whats not
+   */
+  bufferCurrentUsage() {
+    const buffer = this._unsyncedData;
+    this._unsyncedData = [];
+
+    return buffer;
+  }
+
+  dispose() {
+    // perform cleanup
+    if (this._syncInterval) clearInterval(this._syncInterval);
+  }
+
+  _startInterval() {
+    this._syncInterval = setInterval(() => {
+      syncUsage({
+        bufferCurrentUsage: this.bufferCurrentUsage.bind(this),
+        getActiveStreams: this.getActiveStreams.bind(this),
+        updateUsage: this.updateUsage.bind(this),
+        dispose: this.dispose.bind(this),
+      });
+    }, USAGE_SYNC_INTERVAL);
+  }
+  /*
+   * Should allow for data update
+   * Maintain unsynced & syncing data
+   *
+   * Monitor active streams
+   *
+   * destroy syncer if no active streams
+   */
+}

package/src/marker/api/getChannelMarkers.ts

@@ -0,0 +1,47 @@
+import { getActiveClient } from '~/client/api/activeClient';
+import { fireEvent } from '~/core/events';
+import { toPage, toToken } from '~/core/query';
+import { ingestInCache } from '~/cache/api/ingestInCache';
+import { convertChannelMarkerResponse } from '~/utils/marker';
+
+/**
+ * ```js
+ * import { getChannelMarker } from '@amityco/ts-sdk'
+ * const channelMarkers = await getChannelMarkers(['ch1', 'ch2'])
+ * ```
+ *
+ * @param channelIds the IDs of the {@link Amity.RawChannel} marker to fetch
+ * @returns A List of {@link Amity.ChannelMarker} by channelIds
+ *
+ * @category Channel API
+ * @async
+ * @private
+ */
+export const getChannelMarkers = async (
+  channelIds: Amity.Channel['channelId'][],
+): Promise<Amity.Cached<Amity.ChannelMarker[]>> => {
+  const client = getActiveClient();
+  client.log('channel/getChannelMarkers', channelIds);
+
+  const { data: queryPayload } = await client.http.get<
+    Amity.ChannelMarkerPayload & Amity.Pagination
+  >(`/api/v1/markers/channels`, {
+    params: {
+      channelIds,
+    },
+  });
+
+  const { userEntityMarkers: userEntityMarkersPayload, userMarkers } = queryPayload;
+
+  const userEntityMarkers = convertChannelMarkerResponse(userEntityMarkersPayload);
+
+  const cachedAt = client.cache && Date.now();
+  if (client.cache) ingestInCache({ userEntityMarkers, userMarkers }, { cachedAt });
+
+  fireEvent('local.channelMarker.fetched', {
+    userEntityMarkers,
+  });
+  fireEvent('local.userMarker.fetched', { userMarkers });
+
+  return { data: userEntityMarkers, cachedAt };
+};

package/src/marker/api/getMessageMarkers.ts

@@ -0,0 +1,45 @@
+import { getActiveClient } from '~/client/api/activeClient';
+import { fireEvent } from '~/core/events';
+import { ingestInCache } from '~/cache/api/ingestInCache';
+
+/**
+ * ```js
+ * import { getMessageMarkers } from '@amityco/ts-sdk'
+ * const messageMarkers = await getMessageMarkers(['sch1', 'sch2'])
+ * ```
+ *
+ * Fetches a list of {@link Amity.MessageMarker} by messageIds
+ *
+ * @param messageIds the feed IDs of the {@link Amity.RawMessage} marker to fetch
+ * @returns A list of {@link Amity.MessageMarker} by messageIds
+ *
+ * @category Channel API
+ * @async
+ * @private
+ */
+export const getMessageMarkers = async (
+  messageIds: Amity.RawMessage['messageFeedId'][],
+): Promise<Amity.Cached<Amity.MessageMarker[]>> => {
+  const client = getActiveClient();
+  client.log('channel/getMessageMarkers', messageIds);
+
+  const { data: queryPayload } = await client.http.get<Amity.MessageMarkerPayload>(
+    `/api/v1/markers/messages`,
+    {
+      params: {
+        messageIds,
+      },
+    },
+  );
+
+  const { contentMarkers, feedMarkers, userMarkers } = queryPayload;
+
+  const cachedAt = client.cache && Date.now();
+  if (client.cache) ingestInCache({ contentMarkers, feedMarkers, userMarkers }, { cachedAt });
+
+  fireEvent('local.feedMarker.fetched', { feedMarkers });
+  fireEvent('local.messageMarker.fetched', { contentMarkers });
+  fireEvent('local.userMarker.fetched', { userMarkers });
+
+  return { data: contentMarkers, cachedAt };
+};

package/src/marker/api/getSubChannelMarkers.ts

@@ -0,0 +1,73 @@
+import { getActiveClient } from '~/client/api/activeClient';
+import { fireEvent } from '~/core/events';
+import { toPage, toToken } from '~/core/query';
+import { ingestInCache } from '~/cache/api/ingestInCache';
+import { convertChannelMarkerResponse, convertSubChannelMarkerResponse } from '~/utils/marker';
+import { persistUnreadCountInfo } from '../utils/persistUnreadCountInfo';
+
+/**
+ * ```js
+ * import { getSubChannelMarkers } from '@amityco/ts-sdk'
+ * const subChannelMarkers = await getSubChannelMarkers(['sch1', 'sch2'])
+ * ```
+ *
+ * Fetches a paginable list of {@link Amity.SubChannelMarker} objects
+ *
+ * @param messageFeedIds the feed IDs of the {@link Amity.RawSubChannel} marker to fetch
+ * @param page
+ * @returns A page of {@link Amity.SubChannelMarker} objects
+ *
+ * @category Channel API
+ * @async
+ * @private
+ */
+export const getSubChannelMarkers = async (
+  messageFeedIds: Amity.RawSubChannel['messageFeedId'][],
+  page: Amity.Page = { limit: 100 },
+): Promise<Amity.Cached<Amity.Paged<Amity.SubChannelMarker>>> => {
+  const client = getActiveClient();
+  client.log('channel/getSubChannelMarkers', messageFeedIds, page);
+
+  const { data: queryPayload } = await client.http.get<
+    Amity.SubChannelMarkerPayload & Amity.Pagination
+  >(`/api/v1/markers/message-feeds`, {
+    params: {
+      messageFeedIds,
+      options: {
+        token: toToken(page, 'skiplimit'),
+      },
+    },
+  });
+
+  const { paging, ...payload } = queryPayload;
+  const {
+    userEntityMarkers: userEntityMarkersPayload,
+    userFeedMarkers: userFeedMarkersPayload,
+    userMarkers,
+    feedMarkers: feedMarkersPayload,
+  } = payload;
+
+  // if consistent mode is enabled, persist the unread count info to the cache
+  if (client.isUnreadCountEnabled && client.getMarkerSyncConsistentMode()) {
+    persistUnreadCountInfo({
+      feedMarkers: feedMarkersPayload,
+      userFeedMarkers: userFeedMarkersPayload,
+    });
+  }
+
+  const userEntityMarkers = convertChannelMarkerResponse(userEntityMarkersPayload);
+  const userFeedMarkers = convertSubChannelMarkerResponse(userFeedMarkersPayload);
+
+  const cachedAt = client.cache && Date.now();
+  if (client.cache)
+    ingestInCache({ userEntityMarkers, userFeedMarkers, userMarkers }, { cachedAt });
+
+  fireEvent('local.channelMarker.fetched', { userEntityMarkers });
+  fireEvent('local.subChannelMarker.fetched', { userFeedMarkers });
+  fireEvent('local.userMarker.fetched', { userMarkers });
+
+  const nextPage = toPage(paging.next);
+  const prevPage = toPage(paging.previous);
+
+  return { data: userFeedMarkers, cachedAt, prevPage, nextPage };
+};

package/src/marker/api/getUserMarker.ts

@@ -0,0 +1,32 @@
+import { ingestInCache } from '~/cache/api/ingestInCache';
+import { getActiveClient } from '~/client/api/activeClient';
+import { fireEvent } from '~/core/events';
+
+export const getUserMarker = async (): Promise<Amity.Cached<Amity.UserMarker | undefined>> => {
+  const client = getActiveClient();
+  client.log('channel/getUserMarker');
+
+  const { data: payload } = await client.http.get<Amity.UserMarkerPayload>(
+    `/api/v1/markers/userMarker`,
+  );
+
+  const { userMarkers } = payload;
+
+  const cachedAt = client.cache && Date.now();
+  if (client.cache) ingestInCache({ userMarkers }, { cachedAt });
+
+  fireEvent('local.userMarker.fetched', { userMarkers });
+
+  const latestUserMarker = userMarkers.reduce((maxUserMarker, userMarker) => {
+    if (
+      maxUserMarker == null ||
+      new Date(maxUserMarker.lastSyncAt).getTime() < new Date(userMarker.lastSyncAt).getTime()
+    ) {
+      return userMarker;
+    }
+
+    return maxUserMarker;
+  }, undefined as Amity.UserMarker | undefined);
+
+  return { data: latestUserMarker, cachedAt };
+};

package/src/marker/api/getUserMessageFeedMarkers.ts

@@ -0,0 +1,38 @@
+import { getActiveClient } from '~/client/api/activeClient';
+import { fireEvent } from '~/core/events';
+
+/**
+ * ```js
+ * import { getSubChannelMarkers } from '@amityco/ts-sdk'
+ * const subChannelMarkers = await getSubChannelMarkers(['sch1', 'sch2'])
+ * ```
+ *
+ * Fetches a paginable list of {@link Amity.SubChannelMarker} objects
+ *
+ * @param messageFeedIds the feed IDs of the {@link Amity.RawSubChannel} marker to fetch
+ * @param page
+ * @returns A page of {@link Amity.SubChannelMarker} objects
+ *
+ * @category Channel API
+ * @async
+ * @private
+ */
+export const getUserMessageFeedMakers = async (
+  channelIds: Amity.RawChannel['channelId'][],
+): Promise<Amity.UserMessageFeedMarkerPayload> => {
+  const client = getActiveClient();
+  client.log('channel/getUserMessageFeedMakers', channelIds);
+
+  const { data } = await client.http.get<Amity.UserMessageFeedMarkerPayload>(
+    `/api/v1/markers/user-message-feed`,
+    {
+      params: {
+        channelIds,
+      },
+    },
+  );
+
+  fireEvent('local.userMessageFeedMarker.fetched', { userMessageFeedMarker: data });
+
+  return data;
+};

package/src/marker/api/index.ts

@@ -0,0 +1,4 @@
+export * from './getChannelMarkers';
+export * from './getMessageMarkers';
+export * from './getSubChannelMarkers';
+export * from './getUserMarker';