fix(SUP-43778):v7 Player Hotspot Text Formatting

package.json

@@ -19,7 +19,7 @@
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "cypress": "^12.12.0",
+    "cypress": "13.13.1",
     "playwright-webkit": "^1.33.0",
     "prettier": "^2.6.2",
     "sass": "^1.52.3",

src/components/Hotspot.tsx

@@ -13,18 +13,19 @@ const defaultContainerStyles = {
 const defaultButtonsStyles = {
   position: 'relative',
   width: '100%',
-  height: '100%',
+  height: 'inherit',
   appearance: 'none',
   border: 'none',
-  display: 'table-cell',
-  verticalAlign: 'middle',
-  textAlign: 'center',
+  display: 'flex',
   cursor: 'pointer',
   wordBreak: 'break-all',
   textRendering: 'geometricPrecision',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  padding: '3px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  outline: 0,
 };
 
 type Props = {
@@ -164,42 +165,6 @@ export default class Hotspot extends Component<Props, State> {
     }
   };
 
-  getFontSize = (layout: any, hotspot: any, label: string): number => {
-    let textEl = this.createDivElement();
-    textEl.style.top = `${layout.y}px`;
-    textEl.style.fontSize = `${hotspot.styles['font-size']}px`;
-    textEl.style.fontFamily = `${hotspot.styles['font-family']}`;
-    textEl.textContent = label || '';
-    document.body.appendChild(textEl);
-
-    const textWidth = textEl.clientWidth;
-    let initialFontSize = parseInt(hotspot.styles['font-size']);
-    let fontSizeToUse = initialFontSize;
-    if (textWidth > layout.width) {
-      for (fontSizeToUse = initialFontSize - 1; fontSizeToUse >= MINIMAL_FONT_SIZE; fontSizeToUse--) {
-        textEl.style.fontSize = `${fontSizeToUse}px`;
-        const newTextWidth = textEl.clientWidth;
-        if (newTextWidth <= layout.width) {
-          break;
-        }
-      }
-    }
-
-    document.body.removeChild(textEl);
-    return fontSizeToUse;
-  };
-
-  createDivElement = (): HTMLDivElement => {
-    let divEl = document.createElement('div');
-    divEl.id = 'textDivTest';
-    divEl.style.position = 'absolute';
-    divEl.style.display = 'table-cell';
-    divEl.style.textAlign = 'center';
-    divEl.style.wordBreak = 'break-all';
-    divEl.style.textRendering = 'geometricPrecision';
-    return divEl;
-  };
-
   render() {
     const {hotspot} = this.props;
     const {layout, label} = hotspot;
@@ -217,14 +182,13 @@ export default class Hotspot extends Component<Props, State> {
       width: layout.width
     };
 
-    const fontSizeToUse = `${this.getFontSize(layout, hotspot, label || '')}px`;
-
     const buttonStyles = {
       ...defaultButtonsStyles,
       ...hotspot.styles,
       cursor: disableClick ? 'default' : 'pointer',
       maxWidth: `${layout.width}px`,
-      fontSize: fontSizeToUse
+      fontSize: `${hotspot.relativeStyle.fontSize}px`,
+      borderRadius: `${hotspot.relativeStyle.radiusBorder}px`,
     };
 
     return (

src/hotspots-plugin.tsx

@@ -2,7 +2,14 @@ import {h, ComponentChildren} from 'preact';
 import {FloatingItem, FloatingManager, FloatingItemProps} from '@playkit-js/ui-managers';
 
 import {ContribServices, CuePoint, TimedMetadataEvent} from '@playkit-js/common';
-import {RawLayoutHotspot, LayoutHotspot, Canvas, RawFloatingCuepoint, Layout} from './utils/hotspot';
+import {
+  RawLayoutHotspot,
+  LayoutHotspot,
+  Canvas,
+  RawFloatingCuepoint,
+  Layout,
+  Style
+} from './utils/hotspot';
 import HotspotWrapper from './components/HotspotWrapper';
 import {ScaleCalculation, scaleVideo} from './utils/scale-video';
 
@@ -105,6 +112,14 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
     };
   }
 
+  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');
 
@@ -127,7 +142,8 @@ export class HotspotsPlugin extends KalturaPlayer.core.BasePlugin {
     this.logger.debug('recalculate cuepoint layout based on new sizes');
     return hotspots.map(cuepoint => ({
       ...cuepoint,
-      layout: this._calculateLayout(cuepoint as any, scaleCalculation)
+      layout: this._calculateLayout(cuepoint as any, scaleCalculation),
+      relativeStyle: this._calculateStyle(cuepoint as any, scaleCalculation)
     }));
   };
 

src/utils/hotspot.ts

@@ -5,6 +5,11 @@ export interface Layout {
   height: number;
 }
 
+export interface Style {
+  radiusBorder: number;
+  fontSize: number;
+}
+
 export interface RawFloatingCuepoint {
   id: string;
   startTime: number;
@@ -21,6 +26,7 @@ export interface RawFloatingCuepoint {
 
 export interface FloatingCuepoint extends RawFloatingCuepoint {
   layout: Layout;
+  relativeStyle : Style;
 }
 
 export interface OpenUrl {