fix(FEC-13348): dynamically adjust hotspot text with player size (#307)

the requirement is to have the hotspot text fit into 1 line.

**solution:**
create a temporary hotspot container div and a temporary hotspot text div with the same styles as the real ones, make calculations to find the ideal font-size to use for the text.

Solves [FEC-13348](https://kaltura.atlassian.net/browse/FEC-13348)

[FEC-13348]: https://kaltura.atlassian.net/browse/FEC-13348?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

README.md

@@ -57,7 +57,7 @@ Finally, add the bundle as a script tag in your page, and initialize the player
      ...
      targetId: 'player-placeholder',
      plugins: {
-      hotspots: { ... },
+      "playkit-js-hotspots": { ... },
       kalturaCuepoints: { ... },
      }
      ...
@@ -127,4 +127,4 @@ If nvm installed: `nvm use` change version of current terminal to required.<br/>
 
 ### ARM Architecture support
 
-Install dependencies with `npm install --target_arch=x64` set target arch for running it through Rosetta (requires Rosetta installation).<br/>
+Install dependencies with `npm install --target_arch=x64` set target arch for running it through Rosetta (requires Rosetta installation).<br/>

src/components/Hotspot.tsx

@@ -20,7 +20,10 @@ const defaultButtonsStyles = {
   textAlign: 'center',
   cursor: 'pointer',
   wordBreak: 'break-all',
-  textRendering: 'geometricPrecision'
+  textRendering: 'geometricPrecision',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
 };
 
 type Props = {
@@ -48,6 +51,8 @@ function prepareUrl(url: string): string {
   return url;
 }
 
+const MINIMAL_FONT_SIZE = 10;
+
 export default class Hotspot extends Component<Props, State> {
   static defaultProps = defaultProps;
 
@@ -148,6 +153,42 @@ 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;
@@ -165,10 +206,14 @@ 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'
+      cursor: disableClick ? 'default' : 'pointer',
+      maxWidth: `${layout.width}px`,
+      fontSize: fontSizeToUse
     };
 
     return (