// @flow import { FLOATING_PLAYER_CLASS } from './view'; export function getRootEl() { return document && document.documentElement; } export function getScreenWidth() { const rootEl = getRootEl(); return rootEl ? rootEl.clientWidth : window.innerWidth; } export function getScreenHeight() { const rootEl = getRootEl(); return rootEl ? rootEl.clientHeight : window.innerHeight; } export function getFloatingPlayerRect() { const elem = document.querySelector(`.${FLOATING_PLAYER_CLASS}`); return elem ? elem.getBoundingClientRect() : null; } export function clampFloatingPlayerToScreen(x: number, y: number) { const playerRect = getFloatingPlayerRect(); let newX = x; let newY = y; if (playerRect) { const screenW = getScreenWidth(); const screenH = getScreenHeight(); if (x + playerRect.width > screenW) { newX = screenW - playerRect.width; } else if (x < 0) { newX = 0; } if (y + playerRect.height > screenH) { newY = screenH - playerRect.height; } else if (y < 0) { newY = 0; } } return { x: newX, y: newY }; } export function calculateRelativePos(x: number, y: number) { return { x: x / getScreenWidth(), y: y / getScreenHeight(), }; } // Max landscape height = calculates the maximum size the player would be at // if it was at landscape aspect ratio export function getMaxLandscapeHeight(width?: number) { const windowWidth = width || getScreenWidth(); const maxLandscapeHeight = (windowWidth * 9) / 16; return maxLandscapeHeight; } // If a video is higher than landscape, this calculates how much is needed in order // for the video to be centered in a container at the landscape height export function getAmountNeededToCenterVideo(height: number, fromValue: number) { const minVideoHeight = getMaxLandscapeHeight(); const timesHigherThanLandscape = height / minVideoHeight; const amountNeededToCenter = (height - fromValue) / timesHigherThanLandscape; return amountNeededToCenter * -1; } export function getPossiblePlayerHeight(height: number, isMobile: boolean) { // min player height = landscape size based on screen width (only for mobile, since // comment expansion will default to landscape view height) const minHeight = getMaxLandscapeHeight(); const maxPercentOfScreen = isMobile ? 70 : 80; // max player height const maxHeight = (getScreenHeight() * maxPercentOfScreen) / 100; const forceMaxHeight = height < maxHeight ? height : maxHeight; const forceMinHeight = isMobile && height < minHeight ? minHeight : forceMaxHeight; return forceMinHeight; }