@playkit-js/unisphere 0.0.2-canary.0-0e931f0

package/src/services/container/producers/base-container-producer.ts

@@ -0,0 +1,42 @@
+import { KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { Utils } from '@playkit-js/playkit-js';
+import { SidePanelsManager } from '@playkit-js/ui-managers';
+
+import { ContainerConfig } from '../../../types';
+
+abstract class BaseContainerProducer {
+  protected _disposers: Map<string, () => void> = new Map<string, () => void>();
+
+  protected generateId(containerConfig: ContainerConfig): string {
+    const iterations = 4;
+    let result = `${containerConfig.containerType}_container_`;
+    for (let i = 0; i < iterations; ++i) {
+      result += Utils.Generator.uniqueId();
+    }
+    return result;
+  }
+
+  protected getSidePanelsManager(player: KalturaPlayer): SidePanelsManager | undefined {
+    return player.getService('sidePanelsManager') as SidePanelsManager;
+  }
+
+  protected addDisposer(containerId: string, disposer: () => void): void {
+    this._disposers.set(containerId, disposer);
+  }
+
+  public dispose(containerId: string): void {
+    const disposer = this._disposers.get(containerId);
+    if (disposer) {
+      disposer();
+      this._disposers.delete(containerId);
+    }
+  }
+
+  public destroy(): void {
+    for (const [containerId] of this._disposers) {
+      this.dispose(containerId);
+    }
+  }
+}
+
+export { BaseContainerProducer };

package/src/services/container/producers/container-producer.ts

@@ -0,0 +1,8 @@
+import { KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { ContainerConfig } from '../../../types';
+
+export interface ContainerProducer<T extends ContainerConfig> {
+  createContainer(player: KalturaPlayer, containerConfig: T): string | null;
+  dispose(containerId: string): void;
+  destroy(): void;
+}

package/src/services/container/producers/index.ts

@@ -0,0 +1,3 @@
+export { SidePanelContainerProducer } from './sidepanel-container-producer';
+export { SimpleContainerProducer } from './simple-container-producer';
+export * from './container-producer';

package/src/services/container/producers/sidepanel-container-producer.tsx

@@ -0,0 +1,37 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+
+import { KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { ContainerElement } from '../../../components';
+import { SidePanelContainerConfig } from '../../../types';
+import { UnisphereStorageService } from '../../unisphere';
+
+import { ContainerProducer } from './container-producer';
+import { BaseContainerProducer } from './base-container-producer';
+
+class SidePanelContainerProducer extends BaseContainerProducer implements ContainerProducer<SidePanelContainerConfig> {
+  public createContainer(player: KalturaPlayer, containerConfig: SidePanelContainerConfig): string | null {
+    const containerId = this.generateId(containerConfig);
+    const { unisphereArea, position, expandMode, presets } = containerConfig;
+
+    const panelId = this.getSidePanelsManager(player)?.add({
+      label: containerId,
+      panelComponent: () => (<ContainerElement style={{ height: '100%' }} id={containerId} />) as preact.JSX.Element,
+      presets,
+      position,
+      expandMode
+    }) as number;
+
+    if (typeof panelId === 'number') {
+      this.addDisposer(containerId, () => {
+        this.getSidePanelsManager(player)?.remove(panelId);
+      });
+
+      UnisphereStorageService.update(unisphereArea, { upperBarIcon: { panelId } });
+      return containerId;
+    }
+    return null;
+  }
+}
+
+export { SidePanelContainerProducer };

package/src/services/container/producers/simple-container-producer.tsx

@@ -0,0 +1,27 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+
+import { KalturaPlayer } from '@playkit-js/kaltura-player-js';
+
+import { SimpleContainerConfig } from '../../../types';
+import { ContainerElement } from '../../../components';
+import { BaseContainerProducer } from './base-container-producer';
+import { ContainerProducer } from './container-producer';
+
+class SimpleContainerProducer extends BaseContainerProducer implements ContainerProducer<SimpleContainerConfig> {
+  public createContainer(player: KalturaPlayer, containerConfig: SimpleContainerConfig): string | null {
+    const containerId = this.generateId(containerConfig);
+    const { playerArea, presets } = containerConfig;
+
+    const disposer = player.ui.addComponent({
+      label: containerId,
+      presets,
+      area: playerArea,
+      get: () => <ContainerElement id={containerId} />
+    });
+
+    this.addDisposer(containerId, disposer);
+    return containerId;
+  }
+}
+export { SimpleContainerProducer };

package/src/services/index.ts

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

package/src/services/unisphere/index.ts

@@ -0,0 +1,3 @@
+export { UnisphereElementService } from './unisphere-element-service';
+export { UnisphereEventService } from './unisphere-event-service';
+export { UnisphereStorageService } from './unisphere-storage-service';

package/src/services/unisphere/unisphere-base-service.ts

@@ -0,0 +1,46 @@
+import { UnisphereWorkspaceType } from '@unisphere/core-js';
+
+declare global {
+  interface Window {
+    unisphereWorkspace: UnisphereWorkspaceType;
+  }
+}
+
+abstract class UnisphereBaseService {
+  private static unsubscribeMap: Map<number, () => void> = new Map();
+  private static sequence = -1;
+
+  protected static getWorkspace = (): Promise<UnisphereWorkspaceType> => {
+    return new Promise((resolve) => {
+      const interval = setInterval(() => {
+        if (window.unisphereWorkspace) {
+          resolve(window.unisphereWorkspace);
+          clearTimeout(interval);
+        }
+      }, 1000);
+    });
+  };
+
+  protected static addToUnsubscribeMap(unsubscribe: () => void): number {
+    UnisphereBaseService.unsubscribeMap.set(UnisphereBaseService.sequence, unsubscribe);
+    ++UnisphereBaseService.sequence;
+    return UnisphereBaseService.sequence;
+  }
+
+  protected static unsubscribeAll(): void {
+    for (const [key, disposer] of UnisphereBaseService.unsubscribeMap) {
+      disposer();
+      UnisphereBaseService.unsubscribeMap.delete(key);
+    }
+  }
+
+  public static unsubscribe(id: number): void {
+    const unsubscribe = UnisphereBaseService.unsubscribeMap.get(id);
+    if (!unsubscribe) return;
+
+    unsubscribe();
+    UnisphereBaseService.unsubscribeMap.delete(id);
+  }
+}
+
+export { UnisphereBaseService };

package/src/services/unisphere/unisphere-element-service.ts

@@ -0,0 +1,11 @@
+import { UnisphereElementBase } from '@unisphere/core-js';
+import { UnisphereBaseService } from './unisphere-base-service';
+
+class UnisphereElementService extends UnisphereBaseService {
+  public static get = async ({ widgetId, context }: { widgetId: string; context: string }): Promise<UnisphereElementBase<HTMLDivElement> | null> => {
+    const workspace = await UnisphereElementService.getWorkspace();
+    return Promise.resolve(workspace.getElement(widgetId, context));
+  };
+}
+
+export { UnisphereElementService };

package/src/services/unisphere/unisphere-event-service.ts

@@ -0,0 +1,30 @@
+import { PubSubServiceType } from '@unisphere/core-js';
+import { UnisphereBaseService } from './unisphere-base-service';
+
+const PUB_SUB_SERVICE_KEY = 'unisphere.service.pub-sub';
+
+class UnisphereEventService extends UnisphereBaseService {
+  public static subscribe = async (event: string, callback: (data: { payload: { [key: string]: unknown } }) => void): Promise<unknown> => {
+    const workspace = await UnisphereEventService.getWorkspace();
+    const pubSubService = workspace.getService<PubSubServiceType>(PUB_SUB_SERVICE_KEY);
+    const unsubscribe = pubSubService!.subscribe(event, callback);
+    return Promise.resolve(UnisphereEventService.addToUnsubscribeMap(unsubscribe));
+  };
+
+  public static emit = (event: string, payload: Record<string, unknown>): void => {
+    UnisphereEventService.getWorkspace().then((workspace) => {
+      const pubSubService = workspace.getService<PubSubServiceType>(PUB_SUB_SERVICE_KEY);
+      pubSubService?.emit({
+        id: event,
+        version: '1.0.0',
+        payload
+      });
+    });
+  };
+
+  public reset(): void {
+    UnisphereEventService.unsubscribeAll();
+  }
+}
+
+export { UnisphereEventService };

package/src/services/unisphere/unisphere-storage-service.ts

@@ -0,0 +1,37 @@
+import { StorageServiceListener, StorageServiceType } from '@unisphere/core-js';
+import { UnisphereBaseService } from './unisphere-base-service';
+
+const STORAGE_NAMESPACE = 'player';
+const STORAGE_SERVICE_KEY = 'unisphere.service.storage';
+
+class UnisphereStorageService extends UnisphereBaseService {
+  public static update = (key: string, value: unknown): void => {
+    UnisphereStorageService.getWorkspace().then((workspace) => {
+      const storageService = <StorageServiceType>workspace.getService(STORAGE_SERVICE_KEY);
+      storageService.update(STORAGE_NAMESPACE, key, value);
+    });
+  };
+
+  public static get = async (key: string): Promise<unknown> => {
+    const workspace = await UnisphereStorageService.getWorkspace();
+    const storageService = <StorageServiceType>workspace.getService(STORAGE_SERVICE_KEY);
+    return Promise.resolve(storageService.get(STORAGE_NAMESPACE, key));
+  };
+
+  public static subscribe = async (key: string, callback: StorageServiceListener): Promise<number> => {
+    const workspace = await UnisphereStorageService.getWorkspace();
+    const storageService = <StorageServiceType>workspace.getService(STORAGE_SERVICE_KEY);
+    const unsubscribe = storageService.subscribe(callback, {
+      namespace: STORAGE_NAMESPACE,
+      property: key,
+      emitLastValue: true
+    });
+    return Promise.resolve(UnisphereStorageService.addToUnsubscribeMap(unsubscribe));
+  };
+
+  public reset(): void {
+    UnisphereStorageService.unsubscribeAll();
+  }
+}
+
+export { UnisphereStorageService };

package/src/types/global.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export { UnisphereEvent } from './unisphere-event';
+export { UnisphereStorageKeys } from './unisphere-storage-keys';
+export * from './unisphere-plugin-config';

package/src/types/unisphere-event.ts

@@ -0,0 +1,8 @@
+export enum UnisphereEvent {
+  UPPER_BAR_ICON_SHOW = 'unisphere.event.player.upper-bar-icon.show',
+  SIDE_PANEL_OPEN = 'unisphere.event.player.side-panel.open',
+  SIDE_PANEL_CLOSE = 'unisphere.event.player.side-panel.close',
+  SET_VALUE_CURRENT_TIME = 'unisphere.event.player.set-value.current-time',
+  CHAPTERS_ADD = 'unisphere.event.player.chapters.add',
+  PLAYER_RESIZE = 'unisphere.event.player.resize'
+}

package/src/types/unisphere-plugin-config.ts

@@ -0,0 +1,25 @@
+import { ReservedPresetAreas, ReservedPresetNames } from 'services/preset-manager/models/preset-item-data';
+
+export interface ContainerConfig {
+  containerType: string;
+  presets: ReservedPresetNames[];
+  unisphereArea: string;
+}
+
+export interface SidePanelContainerConfig extends ContainerConfig {
+  position?: string;
+  expandMode?: string;
+}
+
+export interface SimpleContainerConfig extends ContainerConfig {
+  playerArea: ReservedPresetAreas;
+}
+
+export interface WidgetConfig {
+  widgetId: string;
+  context: string;
+  containers: ContainerConfig[];
+}
+export interface UnispherePluginConfig {
+  widgets: WidgetConfig[];
+}

package/src/types/unisphere-storage-keys.ts

@@ -0,0 +1,8 @@
+enum UnisphereStorageKeys {
+  SELECTED_CHAPTER = 'selectedChapter',
+  CURRENT_TIME = 'currentTime',
+  IS_PAUSED = 'isPaused',
+  PLAYER_SESSION = 'player-session'
+}
+
+export { UnisphereStorageKeys };

package/src/unisphere-plugin-manager.tsx

@@ -0,0 +1,176 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+
+import { core, ui, KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { SidePanelsManager, UpperBarManager } from '@playkit-js/ui-managers';
+
+import { UnisphereEvent, UnisphereStorageKeys, WidgetConfig } from './types';
+import { UpperBarIcon } from './components';
+import { UnisphereElementService, UnisphereEventService, UnisphereStorageService } from './services';
+import { ContainerManager } from './services/container';
+
+class UnispherePluginManager {
+  private iconIds = new Map<string, number>();
+  private persistentIconIds = new Map<string, number>();
+  private panelIds = new Map<string, number>();
+  private eventDisposerIds: number[] = [];
+  private storageDisposerIds: number[] = [];
+  private containerManager: ContainerManager;
+
+  constructor(private player: KalturaPlayer, private eventManager: core.EventManager) {
+    this.addEventHandlers();
+    this.containerManager = new ContainerManager(player);
+  }
+
+  private get upperBarManager(): UpperBarManager | undefined {
+    return this.player.getService('upperBarManager') as UpperBarManager;
+  }
+
+  private get sidePanelsManager(): SidePanelsManager | undefined {
+    return this.player.getService('sidePanelsManager') as SidePanelsManager;
+  }
+
+  private get timelineManager():
+    | {
+        addKalturaCuePoint: (
+          startTime: number,
+          type: string,
+          index: number,
+          title: string,
+          options: { onClick: ({ cuePoint }: { cuePoint: { id: string } }) => void }
+        ) => void;
+      }
+    | undefined {
+    return this.player.getService('timeline');
+  }
+
+  private async addEventHandlers(): Promise<void> {
+    const eventDisposerIds = (await Promise.all([
+      UnisphereEventService.subscribe(UnisphereEvent.UPPER_BAR_ICON_SHOW, ({ payload }) => {
+        const { id, label, order, iconPath, panelId, isPersistent } = payload;
+        this.addUpperBarIcon(id as string, label as string, order as number, iconPath as string, panelId as number, isPersistent as boolean);
+      }),
+      UnisphereEventService.subscribe(UnisphereEvent.SIDE_PANEL_OPEN, ({ payload }) => {
+        const { panelId } = payload;
+        this.sidePanelsManager?.activateItem(panelId as number);
+      }),
+      UnisphereEventService.subscribe(UnisphereEvent.SIDE_PANEL_CLOSE, ({ payload }) => {
+        const { panelId } = payload;
+        this.sidePanelsManager?.deactivateItem(panelId as number);
+      }),
+      UnisphereEventService.subscribe(UnisphereEvent.SET_VALUE_CURRENT_TIME, ({ payload }) => {
+        const currentTime = payload.currentTime as number;
+        if ((currentTime as number) >= 0) {
+          this.player.currentTime = currentTime as number;
+        }
+      }),
+      UnisphereEventService.subscribe(UnisphereEvent.CHAPTERS_ADD, ({ payload }) => {
+        const chapters = payload.chapters as { title: string; time: string }[];
+        if (chapters && chapters.length) {
+          for (let i = 0; i < chapters.length; ++i) {
+            const { title, time } = chapters[i];
+            const startTime = +time;
+            this.timelineManager?.addKalturaCuePoint(startTime, 'Chapter', i, title, {
+              onClick: ({ cuePoint }: { cuePoint: { id: string } }) => {
+                UnisphereStorageService.update(UnisphereStorageKeys.SELECTED_CHAPTER, cuePoint.id);
+              }
+            });
+          }
+        }
+      })
+    ])) as number[];
+    this.eventDisposerIds.push(...eventDisposerIds);
+
+    this.eventManager.listen(this.player, core.EventType.TIME_UPDATE, () => {
+      UnisphereStorageService.update(UnisphereStorageKeys.CURRENT_TIME, `${this.player.currentTime}`);
+    });
+
+    this.eventManager.listen(this.player, ui.EventType.GUI_RESIZE, () => {
+      UnisphereEventService.emit(UnisphereEvent.PLAYER_RESIZE, {});
+    });
+
+    this.eventManager.listen(this.player, core.EventType.PAUSE, () => {
+      UnisphereStorageService.update(UnisphereStorageKeys.IS_PAUSED, true);
+    });
+
+    this.eventManager.listen(this.player, core.EventType.PLAY, () => {
+      UnisphereStorageService.update(UnisphereStorageKeys.IS_PAUSED, false);
+    });
+  }
+
+  private addUpperBarIcon(id: string, label: string, order: number, iconPath: string, panelId: number, isPersistent: boolean): void {
+    if (this.iconIds.has(id) || this.persistentIconIds.has(id)) return;
+
+    const iconId = this.upperBarManager?.add({
+      displayName: label,
+      ariaLabel: label,
+      order,
+      component: () => (<UpperBarIcon id={id} label={label} iconPath={iconPath} />) as preact.JSX.Element,
+      svgIcon: { path: iconPath },
+      onClick: () => {
+        if (this.sidePanelsManager?.isItemActive(panelId)) {
+          this.sidePanelsManager?.deactivateItem(panelId);
+        } else {
+          this.sidePanelsManager?.activateItem(panelId);
+        }
+      }
+    }) as number;
+
+    if (isPersistent) {
+      this.iconIds.set(id, iconId);
+    } else {
+      this.persistentIconIds.set(id, iconId);
+    }
+  }
+
+  public loadWidgets(widgets: WidgetConfig[]): void {
+    for (const widget of widgets) {
+      const { widgetId, context } = widget;
+      if (!widgetId || !context) continue;
+
+      for (const containerConfig of widget.containers) {
+        if (!containerConfig.unisphereArea) continue;
+
+        const containerId = this.containerManager.createContainer(containerConfig);
+        if (containerId) {
+          UnisphereElementService.get({ widgetId, context }).then((element) => {
+            element?.assignAreaByName(containerConfig.unisphereArea, containerId);
+          });
+        }
+      }
+    }
+  }
+
+  public updateSessionData(): void {
+    UnisphereStorageService.update(UnisphereStorageKeys.PLAYER_SESSION, {
+      entryId: this.player.sources.id,
+      ks: this.player.config.session?.ks
+    });
+  }
+
+  public reset(): void {
+    for (const v of this.iconIds.values()) {
+      this.upperBarManager?.remove(v);
+    }
+  }
+
+  public destroy(): void {
+    this.reset();
+
+    this.containerManager.destroy();
+
+    for (const v of this.persistentIconIds.values()) {
+      this.upperBarManager?.remove(v);
+    }
+
+    for (const id of this.eventDisposerIds) {
+      UnisphereEventService.unsubscribe(id);
+    }
+
+    for (const id of this.storageDisposerIds) {
+      UnisphereStorageService.unsubscribe(id);
+    }
+  }
+}
+
+export { UnispherePluginManager };

package/src/unisphere-plugin.tsx

@@ -0,0 +1,41 @@
+import { BasePlugin, KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { UnispherePluginConfig } from './types';
+import { UnispherePluginManager } from './unisphere-plugin-manager';
+
+export const pluginName = 'unisphere';
+
+export class UnispherePlugin extends BasePlugin {
+  public static defaultConfig: UnispherePluginConfig = {
+    widgets: []
+  };
+
+  private isReady = false;
+  private unispherePluginManager: UnispherePluginManager;
+
+  constructor(name: string, player: KalturaPlayer, config: UnispherePluginConfig) {
+    super(name, player, config);
+    this.unispherePluginManager = new UnispherePluginManager(player, this.eventManager);
+  }
+
+  public static isValid(): boolean {
+    return true;
+  }
+
+  public loadMedia(): void {
+    this.unispherePluginManager.updateSessionData();
+
+    if (!this.isReady) {
+      this.unispherePluginManager.loadWidgets(this.config.widgets);
+      this.isReady = true;
+    }
+  }
+
+  public reset(): void {
+    this.unispherePluginManager.reset();
+  }
+
+  public destroy(): void {
+    this.eventManager.destroy();
+    this.unispherePluginManager.destroy();
+  }
+}