@playkit-js/unisphere-service 0.0.17-canary.0-e5f111c

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

@@ -0,0 +1,25 @@
+import { UnisphereWorkspaceType } from '@unisphere/runtime';
+
+class UnisphereWorkspaceService {
+  private static workspaceInstance: UnisphereWorkspaceType | null = null;
+
+  public static set(workspaceInstance: UnisphereWorkspaceType): void {
+    UnisphereWorkspaceService.workspaceInstance = workspaceInstance;
+  }
+
+  public static get(): UnisphereWorkspaceType | null {
+    return UnisphereWorkspaceService.workspaceInstance;
+  }
+
+  public static destroy(): void {
+    try {
+      (this.workspaceInstance as any).kill();
+    } catch (e) {
+      // TODO add logs
+    }
+
+    UnisphereWorkspaceService.workspaceInstance = null;
+  }
+}
+
+export { UnisphereWorkspaceService };

package/src/services/utils/index.ts

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

package/src/services/utils/utils.ts

@@ -0,0 +1,9 @@
+import { Utils } from '@playkit-js/playkit-js';
+
+function getUniqueId(prefix = ''): string {
+  let result = prefix;
+  result += Utils.Generator.uniqueId(10);
+  return result;
+}
+
+export { getUniqueId };

package/src/types/container-types.ts

@@ -0,0 +1,6 @@
+enum ContainerTypes {
+  SIDEPANEL = 'sidepanel',
+  SIMPLE = 'simple'
+}
+
+export { ContainerTypes };

package/src/types/global.d.ts

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

package/src/types/index.ts

@@ -0,0 +1,5 @@
+export { UnisphereEvent } from './unisphere-event';
+export { UnisphereStorageKeys } from './unisphere-storage-keys';
+export { ServiceKeys } from './service-keys';
+export { ContainerTypes } from './container-types';
+export * from './unisphere-plugin-config';

package/src/types/integrations.ts

@@ -0,0 +1,38 @@
+export interface UnisphereIntegrationButton {
+  id: string;
+  icon: string;
+  tooltip: string;
+  visible?: boolean;
+  onClick?: () => void;
+}
+
+export interface UnisphereIntegrationHeader {
+  type: string;
+  title: string;
+  showCloseButton: boolean;
+  buttons: UnisphereIntegrationButton[];
+}
+
+export interface UnisphereIntegrationSidepanel {
+  header: UnisphereIntegrationHeader;
+  visualType: string;
+  visualSettings: Record<string, any>;
+}
+
+export interface UnisphereIntegrationLayoutHeader {
+  icon: string;
+  tooltip: string;
+}
+
+export interface UnisphereIntegrationLayout {
+  presets: string[];
+  type: string;
+  header: UnisphereIntegrationLayoutHeader;
+  sidepanel: UnisphereIntegrationSidepanel;
+  mountWhileHidden: boolean;
+}
+
+export interface UnisphereIntegrations {
+  schema: number;
+  layouts: UnisphereIntegrationLayout[];
+}

package/src/types/service-keys.ts

@@ -0,0 +1,6 @@
+enum ServiceKeys {
+  SIDE_PANELS_MANAGER = 'sidePanelsManager',
+  UPPER_BAR_MANAGER = 'upperBarManager'
+}
+
+export { ServiceKeys };

package/src/types/unisphere-event.ts

@@ -0,0 +1,3 @@
+export enum UnisphereEvent {
+  MEDIA_SEEK_TO_TIME = 'kaltura-player.events.media.seek-to-time'
+}

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

@@ -0,0 +1,38 @@
+import { ReservedPresetAreas, ReservedPresetNames } from 'services/preset-manager/models/preset-item-data';
+import { UnisphereIntegrationLayout } from './integrations';
+
+export const isReservedPresetNames = (value: any): value is ReservedPresetNames => {
+  return ['Playback'].includes(value);
+}
+
+export interface ContainerConfig {
+  containerType: string;
+  presets: ReservedPresetNames[];
+  unisphereArea: string;
+  position?: string,
+  expandMode?: string
+  expandOnFirstPlay?: boolean,
+  layout?: UnisphereIntegrationLayout
+}
+
+export interface SidePanelContainerConfig extends ContainerConfig {
+  position?: string;
+  expandMode?: string;
+  expandOnFirstPlay?: boolean
+}
+
+export interface SimpleContainerConfig extends ContainerConfig {
+  playerArea: ReservedPresetAreas;
+}
+
+export interface WidgetConfig {
+  widgetId: string;
+  context: string;
+  settings: unknown;
+  containers: ContainerConfig[];
+}
+
+export interface UnispherePluginConfig {
+  workspaceName?: string;
+  widgets: WidgetConfig[];
+}

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

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

package/src/unisphere-plugin-manager.tsx

@@ -0,0 +1,254 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+
+import { core, KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { SidePanelsManager, UpperBarManager } from '@playkit-js/ui-managers';
+
+import {
+  ContainerConfig,
+  isReservedPresetNames,
+  SidePanelContainerConfig,
+  ContainerTypes,
+  UnisphereEvent,
+  ServiceKeys,
+  UnisphereStorageKeys
+} from './types';
+import { UpperBarIcon } from './components';
+import { ContainerManager, getUniqueId, UnisphereEventService, UnisphereStorageService, UnisphereWorkspaceService } from './services';
+import { UnisphereRuntimeBaseType, UnisphereWorkspaceType } from '@unisphere/runtime';
+import { fetchAndLoadUnisphereWorkspace, getUnisphereInstance } from '@unisphere/runtime-js';
+import { UnisphereIntegrations } from './types/integrations';
+
+class UnispherePluginManager {
+  private iconIds = new Map<string, number>();
+  private panelIds = new Set<number>();
+  private persistentIconIds = new Map<string, number>();
+  private containerManager: ContainerManager;
+  private unsubscribeStore?: () => void;
+
+  private workspaceName = '';
+  private shouldCreateWorkspace = false;
+  private expandOnFirstPlayPanels = new Set<number>();
+
+  constructor(private player: KalturaPlayer, private eventManager: core.EventManager, private logger: any, private config: any) {
+    this.containerManager = new ContainerManager(player);
+    // TODO remove once this is added to providers.env
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const { unisphereLoaderUrl } = this.player.config.provider;
+    if (unisphereLoaderUrl && typeof this.config.workspaceName === 'string') {
+      this.workspaceName = this.config.workspaceName;
+    } else {
+      this.workspaceName = getUniqueId('kaltura_player_workspace_');
+      this.shouldCreateWorkspace = true;
+    }
+  }
+
+  private get upperBarManager(): UpperBarManager | undefined {
+    return this.player.getService(ServiceKeys.UPPER_BAR_MANAGER) as UpperBarManager;
+  }
+
+  private get sidePanelsManager(): SidePanelsManager | undefined {
+    return this.player.getService(ServiceKeys.SIDE_PANELS_MANAGER) as SidePanelsManager;
+  }
+
+  private addEventHandlers(): void {
+    // listen to events from runtime side
+    UnisphereEventService.subscribe(UnisphereEvent.MEDIA_SEEK_TO_TIME, (data) => {
+      const { seekToInSeconds, entryId, play } = data.payload as {
+        seekToInSeconds: string;
+        entryId?: string;
+        play?: boolean;
+      };
+      this.handleSeekToTime({ seekToInSeconds, entryId, play });
+    });
+
+    // listen to player events
+    this.eventManager.listenOnce(this.player, core.EventType.FIRST_PLAYING, () => {
+      this.handleFirstPlay();
+    });
+  }
+
+  private handleFirstPlay(): void {
+    // activate all panels that should expand on first play
+    for (const panelId of this.expandOnFirstPlayPanels) {
+      this.sidePanelsManager?.activateItem(panelId);
+    }
+  }
+
+  private handleSeekToTime(data: { seekToInSeconds: string; entryId?: string; play?: boolean }): void {
+    const { seekToInSeconds, entryId, play } = data;
+    const seekTime = parseFloat(seekToInSeconds);
+
+    if (isNaN(seekTime)) {
+      this.logger.warn('Invalid seekToInSeconds value:', seekToInSeconds);
+      return;
+    }
+
+    if (entryId && this.player.sources.id !== entryId) {
+      this.logger.warn('Entry ID mismatch:', { current: this.player.sources.id, requested: entryId });
+      return;
+    }
+
+    this.player.currentTime = seekTime;
+
+    if (play === true) {
+      this.player.play();
+    } else if (play === false) {
+      this.player.pause();
+    }
+  }
+
+  public async getWorkspace(): Promise<UnisphereWorkspaceType> {
+    let workspace: UnisphereWorkspaceType;
+
+    if (this.shouldCreateWorkspace) {
+      workspace = (await fetchAndLoadUnisphereWorkspace({
+        // TODO remove once this is added to providers.env
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        serverUrl: this.player.config.provider.unisphereLoaderUrl,
+        workspaceName: this.workspaceName,
+        appId: 'kaltura-player',
+        appVersion: '',
+        ui: {
+          theme: 'light',
+          language: 'en'
+        }
+      })) as unknown as UnisphereWorkspaceType; // TODO remove once there the type is updated
+    } else {
+      workspace = await getUnisphereInstance(this.config.workspaceName);
+    }
+
+    UnisphereWorkspaceService.set(workspace);
+    return workspace;
+  }
+
+  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;
+
+    this.panelIds.add(panelId);
+    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.persistentIconIds.set(id, iconId);
+    } else {
+      this.iconIds.set(id, iconId);
+    }
+  }
+
+  public initRuntime(runtime: UnisphereRuntimeBaseType<any>, integrations: UnisphereIntegrations, sidePanelConfig?: SidePanelContainerConfig): void {
+    if (!runtime?.widgetName || !runtime?.runtimeName || !integrations?.layouts) return;
+
+    this.addEventHandlers();
+
+    const layouts = integrations.layouts;
+
+    if (layouts && layouts.length > 0) {
+      const currentPreset = this.player.ui.store.getState().shell.activePresetName;
+
+      for (const layout of layouts) {
+        if (layout?.type === ContainerTypes.SIDEPANEL && layout?.presets?.includes(currentPreset)) {
+          const containerConfig: ContainerConfig = {
+            containerType: ContainerTypes.SIDEPANEL,
+            presets: layout.presets.filter(isReservedPresetNames),
+            unisphereArea: layout.sidepanel.visualType,
+            position: sidePanelConfig?.position,
+            expandMode: sidePanelConfig?.expandMode,
+            expandOnFirstPlay: sidePanelConfig?.expandOnFirstPlay,
+            layout
+          };
+
+          const containerId = this.containerManager.createContainer(containerConfig);
+          if (containerId) {
+            const storageKey = layout.sidepanel.visualType;
+            const panelData = UnisphereStorageService.get(storageKey) as any;
+            const panelId = panelData?.upperBarIcon?.panelId;
+
+            if (panelId && layout.header) {
+              this.addUpperBarIcon(getUniqueId(runtime.widgetName.split('.')[2]), layout.header.tooltip, 0, layout.header.icon, panelId, false);
+            }
+            this.mountRuntimeToContainer(runtime, layout, containerId);
+
+            // track panels that should expand on first play
+            if (sidePanelConfig?.expandOnFirstPlay && panelId) {
+              this.expandOnFirstPlayPanels.add(panelId);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private mountRuntimeToContainer(runtimeInstance: any, layout: any, containerId: string): void {
+    setTimeout(() => {
+      const targetElement = document.getElementById(containerId);
+      if (targetElement) {
+        runtimeInstance?.mountVisual({
+          type: layout.sidepanel.visualType,
+          settings: layout.sidepanel.visualSettings,
+          target: targetElement
+        });
+      }
+    }, 100);
+  }
+
+  public updateSessionData(): void {
+    UnisphereStorageService.update(UnisphereStorageKeys.PLAYER_SESSION, {
+      entryId: this.player.sources.id,
+      ks: this.player.config.session?.ks,
+      entryName: this.player.sources.metadata?.name
+    });
+  }
+
+  public reset(): void {
+    for (const panelId of this.panelIds) {
+      if (this.sidePanelsManager?.isItemActive(panelId)) {
+        this.sidePanelsManager.deactivateItem(panelId);
+      }
+      this.sidePanelsManager?.remove(panelId);
+    }
+    this.panelIds.clear();
+
+    for (const v of this.iconIds.values()) {
+      this.upperBarManager?.remove(v);
+    }
+    this.iconIds.clear();
+    this.containerManager.destroy();
+
+    // reset expandOnFirstPlay state
+    this.expandOnFirstPlayPanels.clear();
+  }
+
+  public destroy(): void {
+    this.reset();
+    this.containerManager.destroy();
+
+    for (const v of this.persistentIconIds.values()) {
+      this.upperBarManager?.remove(v);
+    }
+
+    UnisphereEventService.destroy();
+    UnisphereStorageService.destroy();
+    UnisphereWorkspaceService.destroy();
+
+    if (this.unsubscribeStore) {
+      this.unsubscribeStore();
+    }
+  }
+}
+
+export { UnispherePluginManager };

package/src/unisphere-plugin.ts

@@ -0,0 +1,45 @@
+import { BasePlugin, KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { UnispherePluginConfig } from './types';
+import { UnispherePluginManager } from './unisphere-plugin-manager';
+import { UnisphereEventService } from './services';
+
+export const PLUGIN_NAME = 'unisphereService';
+
+export class UnispherePlugin extends BasePlugin {
+  private _unispherePluginManager: UnispherePluginManager;
+  /**
+   * The default configuration of the plugin.
+   * @static
+   */
+  public static defaultConfig: UnispherePluginConfig = {
+    widgets: []
+  };
+
+  constructor(name: string, player: KalturaPlayer, config: UnispherePluginConfig) {
+    super(name, player, config);
+    this._unispherePluginManager = new UnispherePluginManager(player, this.eventManager, this.logger, this.config);
+    player.registerService(PLUGIN_NAME, {
+      pluginManager: this._unispherePluginManager,
+      eventService: UnisphereEventService
+    });
+  }
+
+  public reset(): void {
+    this._unispherePluginManager.reset();
+  }
+
+  public destroy(): void {
+    this.eventManager.destroy();
+    this._unispherePluginManager.reset();
+    UnisphereEventService.destroy();
+  }
+
+  /**
+   * @static
+   * @public
+   * @returns {boolean} - Whether the plugin is valid.
+   */
+  public static isValid(): boolean {
+    return true;
+  }
+}