@playkit-js/kaltura-player-js/src/ott/poster.ts

[](https://github.com/kaltura/kaltura-player-js/actions/workflows/run_canary.yaml) [![code style: prettier](https://img.shields.io/badge/code_style-pr

import { PKDimensionsConfig, PKSourcesConfigObject } from '@playkit-js/playkit-js';
import { Poster, ProviderMediaConfigSourcesObject } from '@playkit-js/playkit-js-providers/types';

/**
 * Add poster with player dimensions.
 * If poster is string and width and height exists in template we need to make a thumbnail API call.
 * If poster is array of objects we need to choose the best fit dimensions according to the player dimensions.
 * @param {PKSourcesConfigObject} playerSources - player sources container
 * @param {ProviderMediaConfigSourcesObject} mediaSources - media config sources container
 * @param {Object} dimensions - player dimensions object
 * @private
 * @returns {void}
 */
function addKalturaPoster(
  playerSources: PKSourcesConfigObject,
  mediaSources: ProviderMediaConfigSourcesObject,
  dimensions: PKDimensionsConfig
): void {
  const playerPoster = playerSources.poster;
  const mediaConfigPoster = mediaSources.poster;
  const playerWidth = dimensions.width;
  const playerHeight = dimensions.height;
  if (typeof playerPoster === 'string' && playerPoster === mediaConfigPoster) {
    const regex = /.*\/thumbnail\/.*(?:width|height)\/\d+\/(?:height|width)\/\d+/;
    if (regex.test(playerPoster)) {
      playerSources.poster = setPlayerDimensionsOnPoster(playerPoster, playerWidth, playerHeight);
    }
  } else if (Array.isArray(playerPoster)) {
    playerSources.poster = selectPosterByPlayerDimensions(playerPoster, playerWidth, playerHeight);
  }
  mediaSources.poster = playerSources.poster || '';
}

/**
 * Replace the current dimensions with the player dimensions.
 * @param {string} poster - Player url.
 * @param {number} playerWidth - Player width.
 * @param {height} playerHeight - Player height.
 * @private
 * @return {string} - The new poster url including the player dimensions.
 */
function setPlayerDimensionsOnPoster(poster: string, playerWidth: number, playerHeight: number): string {
  const widthMatch = poster.match(/width\/(\d+)/);
  const heightMatch = poster.match(/height\/(\d+)/);
  if (Array.isArray(widthMatch)) {
    poster = poster.replace(widthMatch[1], playerWidth.toString());
  }
  if (Array.isArray(heightMatch)) {
    poster = poster.replace(heightMatch[1], playerHeight.toString());
  }
  return poster;
}

/**
 * Selects the best fit poster depends on the player dimensions.
 * @param {string} posters - Array of posters candidates.
 * @param {number} playerWidth - Player width.
 * @param {height} playerHeight - Player height.
 * @private
 * @return {string} - The poster url.
 */
function selectPosterByPlayerDimensions(posters: Poster[], playerWidth: number, playerHeight: number): string {
  let min = Infinity;
  let url = '';
  posters.forEach((picture) => {
    const picWidth = picture.width;
    const picHeight = picture.height;
    const widthDelta = Math.abs(picWidth - playerWidth);
    const heightDelta = Math.abs(picHeight - playerHeight);
    const delta = widthDelta + heightDelta;
    if (delta < min) {
      min = delta;
      url = picture.url;
    }
  });
  return url;
}

export { addKalturaPoster };