media-stream-player/dist/esm/Container.js

Player built on top of media-stream-library

import React from 'react';
import styled from 'styled-components';
/**
 * Aspect ratio
 *
 * The aspect ratio will determine how much padding-top
 * is necessary to fit the video in the container.
 *
 *          +---- 100% -----+
 *          |               |
 *   video  |               |
 *   height |               | (100 / (AR))%
 *          |               |
 *          +---------------+
 *             video width
 *
 * AR = width / height
 * width = 100%
 * height = (video-height / video-width) * 100%
 *  => padding-top = (1 / AR) * 100%
 */
// Default aspect ratio is fixed to 16:9, but can be modified by changing the
// aspectRatio property on the Container component.
const DEFAULT_ASPECT_RATIO = 16 / 9;
const getHeightPct = (aspectRatio) => {
    if (aspectRatio === 0) {
        throw new Error('Cannot handle aspect ratio 0');
    }
    return 100 / aspectRatio;
};
const ContainerBody = styled.div.attrs(({ aspectRatio }) => {
    return { style: { paddingTop: `${getHeightPct(aspectRatio)}%` } };
}) `
  width: 100%;
  background: black;
  position: relative;
`;
export const Layer = styled.div `
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
`;
export const Container = ({ aspectRatio = DEFAULT_ASPECT_RATIO, children, }) => React.createElement(ContainerBody, { aspectRatio: aspectRatio }, children);
//# sourceMappingURL=Container.js.map