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

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.54.0"
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@playkit-js/unisphere-service",
+  "version": "0.0.17-canary.0-e5f111c",
+  "description": "Playkit JS Unisphere Service plugin",
+  "main": "dist/playkit-unisphere-service.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "src/**/*"
+  ],
+  "license": "AGPL-3.0",
+  "homepage": "https://github.com/kaltura/playkit-js-unisphere-service",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kaltura/playkit-js-unisphere-service"
+  },
+  "keywords": [
+    "@playkit-js/unisphere-service",
+    "kaltura",
+    "player"
+  ],
+  "scripts": {
+    "dev": "webpack serve --open --mode development",
+    "watch": "webpack --mode development --watch",
+    "build:prod": "webpack --mode production",
+    "build": "yarn run build:prod && yarn run build:types",
+    "build:types": "tsc --build tsconfig-lib.json && mkdir -p lib && api-extractor run --local",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "yarn run type-check --watch",
+    "lint": "eslint src/ --ext .js --ext .ts",
+    "lint:fix": "yarn run lint --fix",
+    "prettier": "prettier --write .",
+    "test": "echo 'TODO'",
+    "clean": "rimraf ./dist",
+    "prebuild": "npm run clean",
+    "precommit": "npm run build:prod && npm run type-check && npm run lint",
+    "pushTaggedRelease": "git push --follow-tags --no-verify origin master",
+    "release": "standard-version"
+  },
+  "dependencies": {
+    "@unisphere/core": "^1.83.0",
+    "@unisphere/genie-core": "1.2.0-entry-level.1",
+    "@unisphere/runtime": "^1.83.0",
+    "@unisphere/runtime-js": "^1.82.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.7",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.23.8",
+    "@microsoft/api-extractor": "^7.48.1",
+    "@playkit-js/browserslist-config": "1.0.8",
+    "@playkit-js/common": "1.5.19",
+    "@playkit-js/kaltura-player-js": "3.17.33-canary.0-d4f707b",
+    "@playkit-js/ui-managers": "1.6.4",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "babel-loader": "^9.1.3",
+    "conventional-github-releaser": "3.1.3",
+    "css-loader": "^6.9.0",
+    "cypress": "13.13.1",
+    "eslint": "^8.42.0",
+    "eslint-config-preact": "^1.3.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-cypress": "^2.13.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.4",
+    "sass": "^1.69.7",
+    "sass-loader": "^13.3.3",
+    "standard-version": "^9.5.0",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.3.3",
+    "typescript-plugin-css-modules": "^5.0.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "peerDependencies": {
+    "@playkit-js/kaltura-player-js": "3.17.33-canary.0-d4f707b",
+    "preact": "10.4.6",
+    "preact-i18n": "2.0.0-preactx.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "browserslist": [
+    "extends @playkit-js/browserslist-config"
+  ],
+  "kaltura": {
+    "name": "unisphere",
+    "dependencies": {
+      "playkit-ui-managers": "1.8.2",
+      "playkit-timeline": "3.1.4"
+    }
+  }
+}

package/src/components/close-button/close-button.tsx

@@ -0,0 +1,25 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+import { ui } from '@playkit-js/kaltura-player-js';
+
+const { Tooltip } = ui.components;
+
+const CLEAR_ICON =
+  'M15.6592 14.245L10.7048 9.29061C10.317 8.9028 9.68581 8.90476 9.29528 9.29528C8.90204 9.68853 8.90267 10.3169 9.29061 10.7048L14.245 15.6592L9.29061 20.6137C8.9028 21.0015 8.90476 21.6327 9.29528 22.0232C9.68853 22.4165 10.3169 22.4158 10.7048 22.0279L15.6592 17.0735L20.6137 22.0279C21.0015 22.4157 21.6327 22.4137 22.0232 22.0232C22.4165 21.63 22.4158 21.0016 22.0279 20.6137L17.0735 15.6592L22.0279 10.7048C22.4157 10.317 22.4137 9.68581 22.0232 9.29528C21.63 8.90204 21.0016 8.90267 20.6137 9.29061L15.6592 14.245Z';
+
+interface CloseButtonProps {
+  onClick: () => void;
+  className?: string;
+}
+
+const CloseButton = ({ onClick, className }: CloseButtonProps): preact.JSX.Element => (
+  <button data-testid={'player_unisphere_closeButton'} className={className} onClick={onClick}>
+    <Tooltip label="Close" type="bottom">
+      <svg width="32px" height="32px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d={CLEAR_ICON} fill="white" />
+      </svg>
+    </Tooltip>
+  </button>
+);
+
+export { CloseButton };

package/src/components/close-button/index.ts

@@ -0,0 +1 @@
+export { CloseButton } from './close-button';

package/src/components/container-element/container-element.tsx

@@ -0,0 +1,13 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+
+interface ContainerProps {
+  id: string;
+  style?: { [property: string]: string };
+}
+
+const ContainerElement = (props: ContainerProps): preact.JSX.Element => {
+  return <div data-testid={'player_unisphere_containerElement'} style={props.style ?? {}} id={props.id}></div>;
+};
+
+export { ContainerElement };

package/src/components/container-element/index.ts

@@ -0,0 +1 @@
+export { ContainerElement } from './container-element';

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './close-button';
+export * from './container-element';
+export * from './sidepanel-buttons-container';
+export * from './upper-bar-icon';

package/src/components/sidepanel-buttons-container/index.ts

@@ -0,0 +1 @@
+export { SidepanelButtonsContainer } from './sidepanel-buttons-container';

package/src/components/sidepanel-buttons-container/sidepanel-buttons-container.tsx

@@ -0,0 +1,40 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+import { ui } from '@playkit-js/kaltura-player-js';
+import { UnisphereIntegrationButton } from '../../types/integrations';
+
+const { Tooltip } = ui.components;
+
+interface SidepanelButtonsContainerProps {
+  buttons: UnisphereIntegrationButton[];
+  buttonClassName: string;
+  containerClassName: string;
+}
+
+const SidepanelButtonsContainer = ({ buttons, buttonClassName, containerClassName }: SidepanelButtonsContainerProps): preact.JSX.Element => (
+  <div data-testid={'player_unisphere_sidepanelButtons'} className={containerClassName}>
+    {buttons
+      .filter((button) => button.visible !== false)
+      .map((button) => (
+        <button
+          data-testid={'player_unisphere_sidepanelButton'}
+          key={button.id}
+          className={buttonClassName}
+          title={button.tooltip}
+          onClick={() => {
+            if (button.onClick) {
+              button.onClick();
+            }
+          }}
+        >
+          <Tooltip label={button.tooltip} type="bottom">
+            <svg id={`unisphere-icon-${button.id}`} width="24px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d={button.icon} fill="white" />
+            </svg>
+          </Tooltip>
+        </button>
+      ))}
+  </div>
+);
+
+export { SidepanelButtonsContainer };

package/src/components/upper-bar-icon/index.ts

@@ -0,0 +1 @@
+export { UpperBarIcon } from './upper-bar-icon';

package/src/components/upper-bar-icon/upper-bar-icon.tsx

@@ -0,0 +1,23 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+
+import { ui } from '@playkit-js/kaltura-player-js';
+const { Tooltip, Icon } = ui.components;
+
+interface UpperBarIconProps {
+  id: string;
+  iconPath: string;
+  label: string;
+}
+
+const UpperBarIcon = ({ id, label, iconPath }: UpperBarIconProps): preact.JSX.Element => {
+  return (
+    <Tooltip label={label} type="bottom">
+      <button type="button" data-testid={'player_unisphere_upperBarIcon'} aria-label={label} className={ui.style.upperBarIcon}>
+        <Icon id={`unisphere-icon-${id}`} height={32} width={32} viewBox={'0 0 32 32'} path={iconPath} />
+      </button>
+    </Tooltip>
+  );
+};
+
+export { UpperBarIcon };

package/src/index.ts

@@ -0,0 +1,6 @@
+import { registerPlugin } from '@playkit-js/kaltura-player-js';
+import { PLUGIN_NAME, UnispherePlugin } from './unisphere-plugin';
+
+registerPlugin(PLUGIN_NAME, UnispherePlugin);
+
+export type { UnisphereIntegrations } from './types/integrations';

package/src/services/container/container-manager.ts

@@ -0,0 +1,25 @@
+import { KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { ContainerConfig, ContainerTypes } from '../../types';
+import { SidePanelContainerProducer, SimpleContainerProducer, ContainerProducer } from './producers';
+
+class ContainerManager {
+  private containerProducers: Map<string, ContainerProducer<any>> = new Map();
+
+  constructor(private player: KalturaPlayer) {
+    this.containerProducers.set(ContainerTypes.SIDEPANEL, new SidePanelContainerProducer());
+    this.containerProducers.set(ContainerTypes.SIMPLE, new SimpleContainerProducer());
+  }
+
+  public createContainer(containerConfig: ContainerConfig): string | null {
+    const containerProducer = this.containerProducers.get(containerConfig.containerType);
+    return containerProducer ? containerProducer.createContainer(this.player, containerConfig) : null;
+  }
+
+  public destroy(): void {
+    for (const [containerType] of this.containerProducers) {
+      this.containerProducers.get(containerType)?.destroy();
+    }
+  }
+}
+
+export { ContainerManager };

package/src/services/container/index.ts

@@ -0,0 +1 @@
+export { ContainerManager } from './container-manager';

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

@@ -0,0 +1,37 @@
+import { KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { SidePanelsManager } from '@playkit-js/ui-managers';
+
+import { ContainerConfig, ServiceKeys } from '../../../types';
+import { getUniqueId } from '../../utils';
+
+abstract class BaseContainerProducer {
+  protected _disposers: Map<string, () => void> = new Map<string, () => void>();
+
+  protected generateId(containerConfig: ContainerConfig): string {
+    return getUniqueId(`${containerConfig.containerType}_container_`);
+  }
+
+  protected getSidePanelsManager(player: KalturaPlayer): SidePanelsManager | undefined {
+    return player.getService(ServiceKeys.SIDE_PANELS_MANAGER) 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.scss

@@ -0,0 +1,59 @@
+.sidepanel-container {
+  background: rgba(0, 0, 0, 0.6);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidepanel-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 16px 16px 0 16px;
+  gap: 8px;
+}
+
+.sidepanel-title {
+  color: #FFFFFF;
+  flex: 1;
+  min-width: 0;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 100%;
+  letter-spacing: 0.01em;
+  margin: 0;
+  justify-content: center;
+}
+
+.sidepanel-buttons-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 100%;
+}
+
+.sidepanel-button {
+  background: none !important;
+  border: none !important;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 4px;
+  flex-shrink: 0;
+  transition: background-color 0.2s ease;
+  width: 32px;
+  height: 32px;
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.6);
+    outline-offset: 2px;
+  }
+}
+
+.sidepanel-content {
+  flex: 1;
+  overflow: auto;
+  height: 100%;
+}

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

@@ -0,0 +1,67 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
+
+import { KalturaPlayer } from '@playkit-js/kaltura-player-js';
+import { CloseButton, ContainerElement, SidepanelButtonsContainer } from '../../../components';
+import { ContainerConfig } from '../../../types';
+import { UnisphereStorageService } from '../../unisphere';
+
+import { ContainerProducer } from './container-producer';
+import { BaseContainerProducer } from './base-container-producer';
+import * as style from './sidepanel-container-producer.scss';
+
+interface HeaderSidepanelContainerConfig extends ContainerConfig {
+  layout: any;
+  runtime: any;
+}
+
+class SidePanelContainerProducer extends BaseContainerProducer implements ContainerProducer<HeaderSidepanelContainerConfig> {
+  public createContainer(player: KalturaPlayer, containerConfig: HeaderSidepanelContainerConfig): string | null {
+    const containerId = this.generateId(containerConfig);
+    const { unisphereArea, position, expandMode, presets, layout } = containerConfig;
+
+    console.log('Creating side panel with containerId:', containerId);
+    const panelId = this.getSidePanelsManager(player)?.add({
+      label: containerId,
+      panelComponent: () => this.createSidepanelComponent(layout, containerId, panelId, player),
+      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;
+  }
+
+  private createSidepanelComponent(layout: any, containerId: string, panelId: number, player: KalturaPlayer): preact.JSX.Element {
+    return (
+      <div data-testid={'player_unisphere_sidepanelComponent'} className={style.sidepanelContainer}>
+        <div data-testid={'player_unisphere_sidepanelHeader'} className={style.sidepanelHeader}>
+          <h3 data-testid={'player_unisphere_sidepanelTitle'} className={style.sidepanelTitle}>
+            {layout.sidepanel.header.type === 'buttons' ? layout.sidepanel.header.title : ''}
+          </h3>
+          {layout.sidepanel.header.buttons && (
+            <SidepanelButtonsContainer
+              buttons={layout.sidepanel.header.buttons}
+              buttonClassName={style.sidepanelButton}
+              containerClassName={style.sidepanelButtonsContainer}
+            />
+          )}
+          {layout.sidepanel.header.showCloseButton && (
+            <CloseButton className={style.sidepanelButton} onClick={() => this.getSidePanelsManager(player)?.deactivateItem(panelId)} />
+          )}
+        </div>
+        <ContainerElement style={{ flex: '1', overflow: 'auto', height: '100%' }} id={containerId} />
+      </div>
+    ) as preact.JSX.Element;
+  }
+}
+
+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 style={{ width: 'inherit' }} id={containerId} />
+    });
+
+    this.addDisposer(containerId, disposer);
+    return containerId;
+  }
+}
+export { SimpleContainerProducer };

package/src/services/index.ts

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

package/src/services/unisphere/index.ts

@@ -0,0 +1,4 @@
+export { UnisphereWorkspaceService } from './unisphere-workspace-service';
+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,35 @@
+import { UnisphereWorkspaceType } from '@unisphere/runtime';
+
+declare global {
+  interface Window {
+    unisphereWorkspace: UnisphereWorkspaceType;
+  }
+}
+
+abstract class UnisphereBaseService {
+  private static unsubscribeMap: Map<number, () => void> = new Map();
+  private static sequence = -1;
+
+  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,25 @@
+import { UnisphereBaseService } from './unisphere-base-service';
+import { UnisphereElementBaseType } from '@unisphere/runtime';
+import { UnisphereWorkspaceService } from './unisphere-workspace-service';
+
+class UnisphereElementService extends UnisphereBaseService {
+  public static get = async ({
+    widgetId,
+    context,
+    settings
+  }: {
+    widgetId: string;
+    context: string; // todo rename
+    settings: unknown;
+  }): Promise<UnisphereElementBaseType<any> | null> => {
+    const workspace = UnisphereWorkspaceService.get();
+    try {
+      const result = await workspace?.loadRuntime(widgetId, context, settings || {});
+      return result ? result?.runtime : null;
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+}
+
+export { UnisphereElementService };

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

@@ -0,0 +1,36 @@
+import { PubSubServiceType } from '@unisphere/runtime';
+import { UnisphereBaseService } from './unisphere-base-service';
+import { UnisphereWorkspaceService } from './unisphere-workspace-service';
+
+const PUB_SUB_SERVICE_KEY = 'unisphere.service.pub-sub';
+
+class UnisphereEventService extends UnisphereBaseService {
+  public static subscribe = (event: string, callback: (data: { payload: { [key: string]: unknown } }) => void): number => {
+    const workspace = UnisphereWorkspaceService.get();
+    const pubSubService = workspace?.getService<PubSubServiceType>(PUB_SUB_SERVICE_KEY);
+
+    if (pubSubService) {
+      const unsubscribe = pubSubService!.subscribe(event, callback);
+      return UnisphereEventService.addToUnsubscribeMap(unsubscribe);
+    }
+
+    return -1;
+  };
+
+  public static emit = (event: string, payload: Record<string, unknown>): void => {
+    const workspace = UnisphereWorkspaceService.get();
+
+    const pubSubService = workspace?.getService<PubSubServiceType>(PUB_SUB_SERVICE_KEY);
+    pubSubService?.emit({
+      id: event,
+      version: '1.0.0',
+      payload
+    });
+  };
+
+  public static destroy(): void {
+    UnisphereEventService.unsubscribeAll();
+  }
+}
+
+export { UnisphereEventService };

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

@@ -0,0 +1,17 @@
+import { UnisphereBaseService } from './unisphere-base-service';
+import { UnisphereWorkspaceService } from './unisphere-workspace-service';
+
+class UnisphereRuntimeService extends UnisphereBaseService {
+  public static get = async ({ widgetName, runtimeName, settings }: { widgetName: string; runtimeName: string; settings: unknown }) => {
+    const workspace = UnisphereWorkspaceService.get();
+    try {
+      const result = await workspace?.loadRuntime(widgetName, runtimeName, settings || {});
+
+      return result ? result?.runtime : null;
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+}
+
+export { UnisphereRuntimeService };

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

@@ -0,0 +1,42 @@
+import { StorageServiceListener, StorageServiceType } from '@unisphere/runtime';
+import { UnisphereBaseService } from './unisphere-base-service';
+import { UnisphereWorkspaceService } from './unisphere-workspace-service';
+
+const STORAGE_NAMESPACE = 'player';
+const STORAGE_SERVICE_KEY = 'unisphere.service.storage';
+
+class UnisphereStorageService extends UnisphereBaseService {
+  public static update = (key: string, value: unknown): void => {
+    const workspace = UnisphereWorkspaceService.get();
+
+    const storageService = <StorageServiceType>workspace?.getService(STORAGE_SERVICE_KEY);
+    storageService?.update(STORAGE_NAMESPACE, key, value);
+  };
+
+  public static get = (key: string): unknown => {
+    const workspace = UnisphereWorkspaceService.get();
+    const storageService = <StorageServiceType>workspace?.getService(STORAGE_SERVICE_KEY);
+    return storageService ? storageService.get(STORAGE_NAMESPACE, key) : null;
+  };
+
+  public static subscribe = (key: string, callback: StorageServiceListener): void => {
+    const workspace = UnisphereWorkspaceService.get();
+    const storageService = <StorageServiceType>workspace?.getService(STORAGE_SERVICE_KEY);
+
+    if (storageService) {
+      const unsubscribe = storageService.subscribe(callback, {
+        namespace: STORAGE_NAMESPACE,
+        property: key,
+        emitLastValue: true
+      });
+
+      UnisphereStorageService.addToUnsubscribeMap(unsubscribe);
+    }
+  };
+
+  public static destroy(): void {
+    UnisphereStorageService.unsubscribeAll();
+  }
+}
+
+export { UnisphereStorageService };