@playkit-js/hotspots 3.2.22 → 3.2.23-canary.0-6b571ba

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/hotspots",
-  "version": "3.2.22",
+  "version": "3.2.23-canary.0-6b571ba",
   "private": false,
   "bugs": {
     "url": "https://github.com/kaltura/playkit-js-hotspots/issues"
@@ -19,7 +19,7 @@
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "cypress": "13.13.1",
+    "cypress": "14.1.0",
     "playwright-webkit": "^1.33.0",
     "prettier": "^2.6.2",
     "sass": "^1.52.3",

package/src/components/HotspotWrapper.tsx

@@ -1,8 +1,18 @@
-import {h, Component} from 'preact';
+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',
@@ -18,13 +28,48 @@ export interface Props {
   pauseVideo(): void;
   seekTo(time: number): void;
   sendAnalytics(event: AnalyticsEvents): void;
-  dispatcher(name: string, payload?: any): 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 = '';
+    liveRegion.textContent = message;
+  }
 
   private renderHotspots = (visualHotspot: LayoutHotspot[]) => {
     if (!visualHotspot) {
@@ -40,10 +85,25 @@ export default class HotspotWrapper extends Component<Props> {
   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>
     );
   }