You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
384 lines
7.4 KiB
384 lines
7.4 KiB
import styled, { css } from 'styled-components/macro'
|
|
|
|
import { isMobileDevice } from 'config/userAgent'
|
|
|
|
export const ControlsGradient = styled.div<{ isVisible?: boolean }>`
|
|
background-image: url(/images/player-controls-gradient.png);
|
|
bottom: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
height: 145px;
|
|
`
|
|
|
|
type HoverStylesProps = {
|
|
visible: boolean,
|
|
}
|
|
|
|
export const hoverStyles = css<HoverStylesProps>`
|
|
transition: opacity 0.3s ease-in-out;
|
|
${({ visible }) => (visible
|
|
? css`opacity: 1;`
|
|
: css`opacity: 0;`
|
|
)}
|
|
`
|
|
|
|
export const Controls = styled.div`
|
|
z-index: 50;
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 22px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
|
|
|
${hoverStyles}
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
bottom: 5px;
|
|
@media (orientation: landscape){
|
|
bottom: 10px;
|
|
width: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const ControlsRow = styled.div`
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
:first-child {
|
|
margin-bottom: 17px;
|
|
padding: 0 18px;
|
|
}
|
|
|
|
:last-child {
|
|
padding-left: 28px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
justify-content: flex-start;
|
|
:first-child {
|
|
margin-bottom: 5px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
:last-child {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const ControlsGroup = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
:last-child {
|
|
margin-left: auto;
|
|
margin-right: 10px;
|
|
}
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
const supportsAspectRatio = CSS.supports('aspect-ratio', '16 / 9') && isMobileDevice
|
|
|
|
export const PlayerWrapper = styled.div<PlayStopProps>`
|
|
width: 100%;
|
|
position: relative;
|
|
background-color: #000;
|
|
min-height: 100%;
|
|
:fullscreen {
|
|
padding-top: 0;
|
|
}
|
|
${supportsAspectRatio
|
|
? css`aspect-ratio: 16 / 9;`
|
|
: css`
|
|
height: 0px;
|
|
padding-top: 56.25%;
|
|
`}
|
|
|
|
${isMobileDevice
|
|
? css`
|
|
min-height: auto;
|
|
margin-bottom: 15px;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
type LoaderWrapperProps = {
|
|
buffering?: boolean,
|
|
}
|
|
|
|
export const LoaderWrapper = styled.div<LoaderWrapperProps>`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
transition: opacity 0.3s ease-in-out;
|
|
opacity: ${({ buffering }) => (buffering ? 1 : 0)};
|
|
`
|
|
|
|
export const ButtonBase = styled.button`
|
|
outline: none;
|
|
border: none;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
height: 100%;
|
|
`
|
|
|
|
const sizes = {
|
|
lg: 92,
|
|
sm: 24,
|
|
}
|
|
|
|
type PlayStopProps = {
|
|
marginRight?: number,
|
|
playing: boolean,
|
|
size?: keyof typeof sizes,
|
|
}
|
|
|
|
export const PlayStop = styled(ButtonBase)<PlayStopProps>`
|
|
margin-right: ${({ marginRight = 20 }) => `${marginRight}px`};
|
|
background-image: ${({ playing }) => (
|
|
playing
|
|
? 'url(/images/player-pause.svg)'
|
|
: 'url(/images/player-play.svg)'
|
|
)};
|
|
${({ size = 'sm' }) => (
|
|
css`
|
|
width: ${sizes[size]}px;
|
|
height: ${sizes[size]}px;
|
|
`
|
|
)};
|
|
${isMobileDevice
|
|
? css`
|
|
width: ${sizes.sm}px;
|
|
height: ${sizes.sm}px;
|
|
margin-right: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const Volume = styled(ButtonBase)`
|
|
width: 40px;
|
|
height: 26px;
|
|
margin-right: 23px;
|
|
background-image: url(/images/player-volume-off.svg);
|
|
`
|
|
|
|
type FullscreenProps = {
|
|
isFullscreen: boolean,
|
|
}
|
|
|
|
export const Fullscreen = styled(ButtonBase)<FullscreenProps>`
|
|
width: 22px;
|
|
height: 20px;
|
|
margin-left: 26px;
|
|
background-image: ${({ isFullscreen }) => (
|
|
isFullscreen
|
|
? 'url(/images/player-fullscreen-off.svg)'
|
|
: 'url(/images/player-fullscreen-on.svg)'
|
|
)};
|
|
${isMobileDevice
|
|
? css`
|
|
width: 20px;
|
|
height: 18px;
|
|
margin-left: 15px;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
type ButtonProps = {
|
|
isHidden?: boolean,
|
|
size?: 'sm' | 'lg',
|
|
}
|
|
|
|
const rewindButtonSizes = {
|
|
fontSizes: {
|
|
lg: 40,
|
|
sm: 14,
|
|
},
|
|
sides: {
|
|
lg: 75,
|
|
sm: 29,
|
|
},
|
|
}
|
|
|
|
export const Backward = styled(ButtonBase)<ButtonProps>`
|
|
padding: 0;
|
|
margin-right: 10px;
|
|
background-image: url(/images/player-backward.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
font-weight: normal;
|
|
${({ size = 'sm' }) => (
|
|
css`
|
|
width: ${rewindButtonSizes.sides[size]}px;
|
|
height: ${rewindButtonSizes.sides[size]}px;
|
|
font-size: ${rewindButtonSizes.fontSizes[size]}px;
|
|
`
|
|
)}
|
|
display: ${({ isHidden }) => (isHidden ? 'none' : 'block')};
|
|
${isMobileDevice
|
|
? css`
|
|
width: 15%;
|
|
font-size: 14px;
|
|
margin-right: 20px;
|
|
margin-left: 20px;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const Forward = styled(Backward)`
|
|
background-image: url(/images/player-forward.svg);
|
|
`
|
|
|
|
type PlaybackTimeProps = {
|
|
width?: number,
|
|
}
|
|
|
|
export const PlaybackTime = styled.span<PlaybackTimeProps>`
|
|
width: ${({ width = 130 }) => `${width}px`};
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
${isMobileDevice
|
|
? css`
|
|
margin-left: 5px;
|
|
font-size: 10px;
|
|
width: 100px;
|
|
white-space: nowrap;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
type CenterControlsProps = {
|
|
controlsVisible: boolean,
|
|
playing: boolean,
|
|
}
|
|
|
|
export const CenterControls = styled.div<CenterControlsProps>`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 413px;
|
|
height: 109px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: opacity 0.3s ease-in-out;
|
|
opacity: ${({ playing }) => (playing ? 0 : 1)};
|
|
pointer-events: ${({ playing }) => (playing ? 'none' : 'auto')};
|
|
|
|
${({ controlsVisible, playing }) => isMobileDevice && css`
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
justify-content: center;
|
|
opacity: ${controlsVisible || !playing ? 1 : 0};
|
|
pointer-events: ${controlsVisible || !playing ? 'auto' : 'none'};
|
|
`}
|
|
`
|
|
|
|
export const LiveBtn = styled(ButtonBase)`
|
|
height: auto;
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
line-height: 12px;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
padding: 4.5px 8px;
|
|
background-color: #CC0000;
|
|
border-radius: 1.3px;
|
|
${isMobileDevice
|
|
? css`
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const ChaptersText = styled.span`
|
|
margin: 0 14px;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
text-align: center;
|
|
${isMobileDevice
|
|
? css`
|
|
margin: 0 5px;
|
|
font-size: 12px;
|
|
width: 15%;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
type PrevProps = {
|
|
disabled?: boolean,
|
|
}
|
|
|
|
export const Prev = styled(ButtonBase)<PrevProps>`
|
|
width: 29px;
|
|
height: 28px;
|
|
background-image: url(/images/player-prev.svg);
|
|
${({ disabled }) => (
|
|
disabled
|
|
? 'opacity: 0.5;'
|
|
: ''
|
|
)}
|
|
${isMobileDevice
|
|
? css`
|
|
width: 20px;
|
|
height: 20px;
|
|
`
|
|
: ''};
|
|
`
|
|
|
|
export const Next = styled(Prev)`
|
|
margin-right: 10px;
|
|
transform: rotate(180deg);
|
|
`
|
|
|
|
export const TeamsDetailsWrapper = styled.div`
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 15px;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
z-index: 50;
|
|
`
|
|
export const WarningIosWrapper = styled.div`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
width: 80%;
|
|
`
|
|
|
|
export const WarningIosText = styled.span`
|
|
color: red;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
`
|
|
|