@playkit-js/manual-hotspots 3.3.1-canary.0-7e9f2da → 3.3.1-canary.0-b776562

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/manual-hotspots",
-  "version": "3.3.1-canary.0-7e9f2da",
+  "version": "3.3.1-canary.0-b776562",
   "private": false,
   "bugs": {
     "url": "https://github.com/kaltura-ps/playkit-js-manual-hotspots/issues"
@@ -42,8 +42,7 @@
     "docs",
     "LICENSE",
     "README.md",
-    "CHANGELOG.md",
-    "src"
+    "CHANGELOG.md"
   ],
   "scripts": {
     "disabled-preinstall": "npx --yes --prefer-online --registry=https://npm.pkg.github.com --package @kaltura/kaltura-tools@latest kaltura-tools check --root=.",
@@ -64,7 +63,7 @@
     "test:watch": "yarn run test:prepare && cypress open",
     "test": "yarn run test:prepare && yarn run cy:run",
     "release": "standard-version",
-    "pushTaggedRelease": "git push --follow-tags --no-verify origin master",
+    "pushTaggedRelease": "git push --follow-tags --no-verify origin main",
     "prettier:fix": "prettier --write ."
   },
   "publishConfig": {

package/src/components/Hotspot.tsx

@@ -1,267 +0,0 @@
-import {h, Component} from 'preact';
-import {A11yWrapper} from '@playkit-js/common';
-import {LayoutHotspot} from '../utils/hotspot';
-import {AnalyticsEvents} from '../utils/analyticsEvents';
-import {HotspotsEvents} from '../events/events';
-
-const defaultContainerStyles = {
-  position: 'absolute',
-  display: 'table',
-  boxSizing: 'border-box'
-};
-
-const defaultButtonsStyles = {
-  position: 'relative',
-  width: '100%',
-  height: 'inherit',
-  appearance: 'none',
-  border: 'none',
-  display: 'flex',
-  cursor: 'pointer',
-  wordBreak: 'break-all',
-  textRendering: 'geometricPrecision',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  padding: '3px',
-  alignItems: 'center',
-  justifyContent: 'center',
-  outline: 0,
-  lineHeight: 'normal'
-};
-
-type Props = {
-  visible: boolean;
-  hotspot: LayoutHotspot;
-  styles?: {[key: string]: any};
-  pauseVideo(): void;
-  exitFullscreen(): void;
-  seekTo(time: number): void;
-  sendAnalytics(event: AnalyticsEvents): void;
-  dispatcher(name: string, payload?: any): void
-};
-
-type State = {
-  disableClick: boolean;
-  isReady: boolean;
-};
-
-const defaultProps = {
-  styles: {}
-};
-
-function prepareUrl(url: string): string {
-  if (url.startsWith('mailto:')) {
-    return url;
-  }
-  if (!url.match(/^https?:\/\//i)) {
-    url = 'http://' + url;
-  }
-  return url;
-}
-
-function scrollToAnchor(selector: string, scrollBehavior: ScrollBehavior = 'smooth', offsetY: number = 0): void {
-  const element = document.querySelector(selector);
-
-  if (!element) {
-    return;
-  }
-
-  if (offsetY !== 0) {
-    const elementRect = element.getBoundingClientRect();
-    const absoluteTop = elementRect.top + window.scrollY - offsetY;
-    window.scrollTo({
-      top: absoluteTop,
-      behavior: scrollBehavior
-    });
-  } else {
-    element.scrollIntoView({behavior: scrollBehavior});
-  }
-}
-
-function sendPostMessage(message: unknown, targetOrigin: string = '*', hotspotId: string, hotspotLabel?: string): void {
-  const payload = {
-    source: 'kaltura-hotspot',
-    hotspotId,
-    hotspotLabel,
-    data: message,
-    timestamp: Date.now()
-  };
-
-  try {
-    window.top?.postMessage(payload, targetOrigin);
-  } catch (e) {
-    // do nothing
-  }
-}
-
-const MINIMAL_FONT_SIZE = 10;
-
-export default class Hotspot extends Component<Props, State> {
-  static defaultProps = defaultProps;
-
-  hotspotRef: HTMLDivElement | null = null;
-
-  state = {
-    disableClick: true,
-    isReady: false
-  };
-
-  componentDidMount() {
-    const {hotspot, dispatcher} = this.props;
-
-    if (!hotspot || !hotspot.onClick) {
-      this.setState({ isReady: true });
-      return;
-    }
-
-    this.setState({
-      isReady: true,
-      disableClick: !this.isClickable()
-    });
-
-    const {id, label} = hotspot;
-    dispatcher(HotspotsEvents.HOTSPOT_DISPLAYED, {id, label});
-  }
-
-  isClickable = (): boolean => {
-    const {
-      hotspot: {onClick}
-    } = this.props;
-
-    if (!onClick) {
-      return false;
-    }
-
-    switch (onClick.type) {
-      case 'jumpToTime':
-        return typeof onClick.jumpToTime !== 'undefined';
-      case 'openUrl':
-      case 'openUrlInNewTab':
-        return !!onClick.url;
-      case 'scrollToAnchor':
-        return !!onClick.selector;
-      case 'postMessage':
-        return onClick.message !== undefined;
-      default:
-        return false;
-    }
-  };
-
-  handleClick = () => {
-    const {hotspot, dispatcher} = this.props;
-    const {disableClick} = this.state;
-
-    const {id, label} = hotspot;
-    dispatcher(HotspotsEvents.HOTSPOT_CLICK, {id, label});
-
-    if (!hotspot.onClick || disableClick) {
-      return;
-    }
-
-    switch (hotspot.onClick.type) {
-      case 'jumpToTime':
-        if (typeof hotspot.onClick.jumpToTime === 'undefined') {
-          return;
-        }
-
-        this.props.seekTo(hotspot.onClick.jumpToTime / 1000);
-        break;
-      case 'openUrl':
-        {
-          if (!hotspot.onClick.url) {
-            return;
-          }
-          const url = prepareUrl(hotspot.onClick.url);
-          window.open(url, '_top');
-          this.props.sendAnalytics({
-            eventNumber: 47,
-            target: url,
-            hotspotId: hotspot.id
-          });
-        }
-        break;
-      case 'openUrlInNewTab':
-        {
-          if (!hotspot.onClick.url) {
-            return;
-          }
-
-          this.props.pauseVideo();
-
-          const url = prepareUrl(hotspot.onClick.url);
-          try {
-            window.open(url, '_blank');
-            this.props.sendAnalytics({
-              eventNumber: 47,
-              target: url,
-              hotspotId: hotspot.id
-            });
-          } catch (e) {
-            // do nothing
-          }
-        }
-        break;
-
-      case 'scrollToAnchor':
-        {
-          if (!hotspot.onClick.selector) {
-            return;
-          }
-          this.props.exitFullscreen();
-          this.props.pauseVideo();
-          scrollToAnchor(hotspot.onClick.selector, hotspot.onClick.scrollBehavior, hotspot.onClick.offsetY);
-        }
-        break;
-
-      case 'postMessage':
-        {
-          if (hotspot.onClick.message === undefined) {
-            return;
-          }
-          if (hotspot.onClick.pauseVideo) {
-            this.props.pauseVideo();
-          }
-          sendPostMessage(hotspot.onClick.message, hotspot.onClick.targetOrigin, id, label);
-        }
-        break;
-
-      default:
-        break;
-    }
-  };
-
-  render() {
-    const {hotspot} = this.props;
-    const {layout, label} = hotspot;
-    const {isReady, disableClick} = this.state;
-
-    if (!isReady || !this.props.visible) {
-      return null;
-    }
-
-    const containerStyles = {
-      ...defaultContainerStyles,
-      top: layout.y,
-      left: layout.x,
-      height: layout.height,
-      width: layout.width
-    };
-
-    const buttonStyles = {
-      ...defaultButtonsStyles,
-      ...hotspot.styles,
-      cursor: disableClick ? 'default' : 'pointer',
-      maxWidth: `${layout.width}px`,
-      fontSize: `${hotspot.relativeStyle.fontSize}px`,
-      borderRadius: `${hotspot.relativeStyle.radiusBorder}px`,
-    };
-
-    return (
-      <A11yWrapper onClick={this.handleClick} role='alert' aria-live="polite">
-        <div ref={(ref) => (this.hotspotRef = ref)} tabIndex={0} role="button" aria-label={label} aria-disabled={disableClick} style={containerStyles} data-testid="hotspots_hotspot">
-          <div style={buttonStyles}>{label}</div>
-        </div>
-      </A11yWrapper>
-    );
-  }
-}

package/src/components/HotspotWrapper.tsx

@@ -1,115 +0,0 @@
-import {h, Component, createRef} from 'preact';
-import {LayoutHotspot, shallowCompareHotspots} from '../utils/hotspot';
-import Hotspot from './Hotspot';
-import {AnalyticsEvents} from '../utils/analyticsEvents';
-
-const { withPlayer } = KalturaPlayer.ui.components;
-const { withText, Text } = KalturaPlayer.ui.preacti18n;
-const translates = {
-  hotspotRemoved: (
-    <Text id="hotspots.hotspot_removed" fields={{ hotspotLabel: '' }}>
-      {`{hotspotLabel} hotspot removed`}
-    </Text>
-  )
-};
-
-const hotspotsContainerStyles = {
-  position: 'absolute',
-  display: 'block',
-  overflow: 'visible',
-  top: 0,
-  left: 0,
-  width: 0,
-  height: 0
-};
-
-export interface Props {
-  hotspots: LayoutHotspot[];
-  pauseVideo(): void;
-  seekTo(time: number): void;
-  exitFullscreen(): void;
-  sendAnalytics(event: AnalyticsEvents): void;
-  dispatcher(name: string, payload?: any): void;
-  hotspotRemoved?: string;
-  player?: any;
-}
-
-@withPlayer
-@withText(translates)
-export default class HotspotWrapper extends Component<Props> {
-
-  private liveRegionRef = createRef<HTMLDivElement>();
-  private previousHotspotMap: Map<string, string> = new Map();
-
-  shouldComponentUpdate(nextProps: Props) {
-    return !shallowCompareHotspots(this.props.hotspots, nextProps.hotspots);
-  }
-  componentDidUpdate() {
-    const currentMap = new Map<string, string>(
-      this.props.hotspots
-        .filter(h => typeof h.label === 'string')
-        .map(h => [h.id, h.label!])
-    );
-
-    let announced = false;
-    this.previousHotspotMap.forEach((label, id) => {
-      if (!currentMap.has(id) && !announced) {
-        if (this.props.hotspotRemoved) {
-          const message = this.props.hotspotRemoved.replace('{hotspotLabel}', label);
-          this.announceHotspotChange(message);
-        }
-        announced = true;
-      }
-    });
-
-    this.previousHotspotMap = currentMap;
-  }
-
-  private announceHotspotChange(message: string) {
-    const liveRegion = this.liveRegionRef.current;
-    if (!liveRegion) return;
-    liveRegion.textContent = '';
-    //setTimeout ensures the DOM change happens in two separate cycles
-    // which solves the issue that the hotspot removal is announced only the first time.
-    setTimeout(() => {
-      liveRegion.textContent = message;
-    });
-  }
-
-  private renderHotspots = (visualHotspot: LayoutHotspot[]) => {
-    if (!visualHotspot) {
-      return null;
-    }
-
-    const {seekTo, pauseVideo, exitFullscreen, sendAnalytics, dispatcher} = this.props;
-    return visualHotspot.map(hotspotData => (
-      <Hotspot dispatcher={dispatcher} pauseVideo={pauseVideo} exitFullscreen={exitFullscreen} seekTo={seekTo} key={hotspotData.id} visible={true} hotspot={hotspotData} sendAnalytics={sendAnalytics} />
-    ));
-  };
-
-  render() {
-    const {hotspots} = this.props;
-    const hotspotsElements = this.renderHotspots(hotspots);
-    const targetId = this.props.player?.config?.targetId;
-    const liveRegionId = `hotspot-liveRegion-${targetId}`;
-
-    return (
-      <div style={hotspotsContainerStyles} data-testid="hotspots_hotspotsContainer">
-        {hotspotsElements}
-        <div
-          ref={this.liveRegionRef}
-          id={liveRegionId}
-          aria-live="polite"
-          role="status"
-          style={{
-            position: 'absolute',
-            left: '-9999px',
-            width: '1px',
-            height: '1px',
-            overflow: 'hidden'
-          }}
-        />
-      </div>
-    );
-  }
-}

package/src/events/events.ts

@@ -1,4 +0,0 @@
-export const HotspotsEvents = {
-  HOTSPOT_CLICK: 'manual_hotspot_click',
-  HOTSPOT_DISPLAYED: 'manual_hotspot_displayed',
-}

package/src/global.d.ts

@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  const content: {[className: string]: string};
-  export = content;
-}

package/src/hotspots-plugin.tsx

@@ -1,180 +0,0 @@
-import {h, ComponentChildren} from 'preact';
-import {FloatingItem, FloatingManager, FloatingItemProps} from '@playkit-js/ui-managers';
-
-import {RawLayoutHotspot, LayoutHotspot, Canvas, RawFloatingCuepoint, Layout, Style} from './utils/hotspot';
-import HotspotWrapper from './components/HotspotWrapper';
-import {ScaleCalculation, scaleVideo} from './utils/scale-video';
-import {HotspotTimelineSimple} from './utils/hotspot-timeline-simple';
-import {HotspotInputConfig} from './utils/hotspot-config';
-import {HotspotLoader} from './utils/hotspot-loader';
-
-interface HotspotsPluginConfig {
-  hotspots?: HotspotInputConfig[];
-}
-
-export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
-  static defaultConfig: HotspotsPluginConfig = {
-    hotspots: []
-  };
-
-  private _player: KalturaPlayerTypes.Player;
-  private _hotspots: LayoutHotspot[] = [];
-  private _floatingItem: FloatingItem | null = null;
-  private _canvas: Canvas | null = null;
-  private _timeline: HotspotTimelineSimple<RawLayoutHotspot> = new HotspotTimelineSimple();
-
-  constructor(name: string, player: KalturaPlayerTypes.Player, config: HotspotsPluginConfig) {
-    super(name, player, config);
-    this._player = player;
-  }
-
-  static isValid(): boolean {
-    return true;
-  }
-
-  private get floatingManager(): FloatingManager {
-    return (this.player.getService('floatingManager') as FloatingManager) || {};
-  }
-
-  loadMedia(): void {
-    this._addHotspotsContainer();
-    this._initTimeline();
-    this.eventManager.listen(this._player, this._player.Event.TIME_UPDATE, (): void => {
-      const currentTimeMs = this._player.currentTime * 1000;
-
-      if (this._timeline.update(currentTimeMs)) {
-        this._hotspots = this._recalculateCuepointLayout(this._timeline.getVisibleHotspots());
-        this._updateHotspotsContainer();
-      }
-    });
-  }
-
-  private _initTimeline(): void {
-    const loader = new HotspotLoader(this.logger);
-    const rawHotspots = loader.load(this.config.hotspots);
-
-    if (!rawHotspots) {
-      return;
-    }
-
-    this._timeline.initialize(rawHotspots);
-  }
-
-  private _calculateLayout(cuepoint: RawFloatingCuepoint, scaleCalculation: ScaleCalculation): Layout {
-    const {rawLayout} = cuepoint;
-    return {
-      x: scaleCalculation.left + rawLayout.relativeX * scaleCalculation.width,
-      y: scaleCalculation.top + rawLayout.relativeY * scaleCalculation.height,
-      width: rawLayout.relativeWidth * scaleCalculation.width,
-      height: rawLayout.relativeHeight * scaleCalculation.height
-    };
-  }
-
-  private _calculateStyle(cuepoint: LayoutHotspot, scaleCalculation: ScaleCalculation): Style {
-    const {rawLayout, styles} = cuepoint;
-    return {
-      fontSize: parseInt(styles['font-size'])/ rawLayout.stageWidth * scaleCalculation.width,
-      radiusBorder: parseInt(styles['border-radius'])/ rawLayout.stageWidth * scaleCalculation.width,
-    };
-  }
-
-  private _recalculateCuepointLayout = (hotspots: RawLayoutHotspot[] | LayoutHotspot[]): LayoutHotspot[] => {
-    this.logger.debug('calculating cuepoint layout based on video/player sizes');
-
-    if (!this._canvas?.playerSize || !this._canvas?.videoSize) {
-      this.logger.warn('missing video/player sizes, hide all cuepoint');
-      return [];
-    }
-
-    const {width: playerWidth, height: playerHeight} = this._canvas.playerSize;
-    const {width: videoWidth, height: videoHeight} = this._canvas.videoSize;
-    const canCalcaulateLayout = playerWidth && playerHeight && videoWidth && videoHeight;
-
-    if (!canCalcaulateLayout) {
-      this.logger.warn('missing video/player sizes, hide all cuepoint');
-      return [];
-    }
-
-    const scaleCalculation = scaleVideo(videoWidth, videoHeight, playerWidth, playerHeight, true);
-
-    this.logger.debug('recalculate cuepoint layout based on new sizes');
-    return hotspots.map(cuepoint => ({
-      ...cuepoint,
-      layout: this._calculateLayout(cuepoint as any, scaleCalculation),
-      relativeStyle: this._calculateStyle(cuepoint as any, scaleCalculation)
-    }));
-  };
-
-  private _addHotspotsContainer(): void {
-    // TODO - fire on click
-    this._floatingItem = this.floatingManager.add({
-      label: 'Manual Hotspots',
-      mode: 'MediaLoaded',
-      position: 'VideoArea',
-      renderContent: this._renderRoot
-    });
-  }
-
-  private _updateHotspotsContainer(): void {
-    if (this._floatingItem) {
-      this._floatingItem.update();
-    }
-  }
-
-  private _pauseVideo = (): void => {
-    this._player.pause();
-  };
-  private _seekTo = (time: number): void => {
-    this._player.currentTime = time;
-  };
-  private _exitFullscreen = (): void => {
-    // @ts-expect-error bad types
-    if (this._player.isFullscreen()) {
-      // @ts-expect-error bad types
-      this._player.exitFullscreen();
-    }
-  };
-
-  private _checkIfResizeHappened = (newCanvas: Canvas): boolean => {
-    if (!this._canvas) {
-      this._canvas = newCanvas;
-      return true;
-    }
-    const prevPlayerSize = this._canvas.playerSize;
-    const prevVideoSize = this._canvas.videoSize;
-    const nextPlayerSize = newCanvas.playerSize;
-    const nextVideoSize = newCanvas.videoSize;
-    if (
-      prevPlayerSize.width !== nextPlayerSize.width ||
-      prevPlayerSize.height !== nextPlayerSize.height ||
-      prevVideoSize.width !== nextVideoSize.width ||
-      prevVideoSize.height !== nextVideoSize.height
-    ) {
-      this._canvas = newCanvas;
-      return true;
-    }
-    return false;
-  };
-
-  private _renderRoot = (floatingItemProps: FloatingItemProps): ComponentChildren => {
-    if (this._checkIfResizeHappened(floatingItemProps.canvas)) {
-      this._hotspots = this._recalculateCuepointLayout(this._hotspots);
-    }
-    return (
-      <HotspotWrapper  dispatcher={(eventType, payload) => this.dispatchEvent(eventType, payload)} key={'hotspotWrapper'} hotspots={this._hotspots} pauseVideo={this._pauseVideo} seekTo={this._seekTo} exitFullscreen={this._exitFullscreen} sendAnalytics={() => {}} />
-    );
-  };
-
-  reset(): void {
-    this.eventManager.removeAll();
-    this._timeline.clear();
-    this._hotspots = [];
-    this._canvas = null;
-    if (this._floatingItem) {
-      this.floatingManager.remove(this._floatingItem);
-      this._floatingItem = null;
-    }
-  }
-
-  destroy(): void {}
-}

package/src/index.ts

@@ -1,15 +0,0 @@
-import {HotspotsPlugin} from './hotspots-plugin';
-import {registerPlugin} from '@playkit-js/kaltura-player-js';
-
-declare var __VERSION__: string;
-declare var __NAME__: string;
-
-const VERSION = __VERSION__;
-const NAME = __NAME__;
-
-export {HotspotsPlugin as Plugin};
-export {VERSION, NAME};
-export {HotspotsEvents} from './events/events';
-
-const pluginName: string = 'playkit-js-manual-hotspots';
-registerPlugin(pluginName, HotspotsPlugin as any);

package/src/utils/analyticsEvents.ts

@@ -1,3 +0,0 @@
-export type HotspotClick = { eventNumber: 47; hotspotId: string; target: string };
-
-export type AnalyticsEvents = HotspotClick;

package/src/utils/hotspot-config.ts

@@ -1,54 +0,0 @@
-import {PositionPreset, SizePreset} from './hotspot-presets';
-import {OnClickAction} from './hotspot';
-
-interface StyleConfig {
-  background?: string;
-  color?: string;
-  'border-radius'?: string;
-  'font-size'?: string;
-  'font-weight'?: string;
-  'font-family'?: string;
-  [key: string]: string | undefined;
-}
-
-export interface HotspotInputConfig {
-  id?: string;
-  startTime: number;
-  endTime?: number;
-  label?: string;
-  layout?: {
-    position?: PositionPreset;
-    size?: SizePreset;
-
-    // overrides position preset
-    relativeX?: number;
-    relativeY?: number;
-
-    // overrides size preset
-    relativeWidth?: number;
-    relativeHeight?: number;
-
-    // overrides for stage size used in font scaling
-    stageWidth?: number;
-    stageHeight?: number;
-  };
-  styles?: StyleConfig;
-  onClick?: OnClickAction;
-}
-
-export interface HotspotConfigFull {
-  id: string;
-  startTime: number;
-  endTime?: number;
-  label?: string;
-  layout: {
-    relativeX: number;
-    relativeY: number;
-    relativeWidth: number;
-    relativeHeight: number;
-    stageWidth: number;
-    stageHeight: number;
-  };
-  styles: StyleConfig;
-  onClick?: OnClickAction;
-}