import * as React from "react";
import styled, { css } from "styled-components";
import { isMobileOnly } from "react-device-detect";
import { tablet } from "@docspace/components/utils/device";
import IconPlay from "../../../../public/images/videoplayer.play.react.svg";
import IconStop from "../../../../public/images/videoplayer.stop.react.svg";
import IconVolumeMax from "../../../../public/images/media.volumemax.react.svg";
import IconVolumeMuted from "../../../../public/images/media.volumeoff.react.svg";
import IconVolumeMin from "../../../../public/images/media.volumemin.react.svg";
import IconFullScreen from "../../../../public/images/videoplayer.full.react.svg";
import IconExitFullScreen from "../../../../public/images/videoplayer.exit.react.svg";
import MediaContextMenu from "../../../../public/images/vertical-dots.react.svg";
import Icon1x from "../../../../public/images/media.viewer1x.react.svg";
import Icon05x from "../../../../public/images/media.viewer05x.react.svg";
import Icon15x from "../../../../public/images/media.viewer15x.react.svg";
import Icon2x from "../../../../public/images/media.viewer2x.react.svg";
import BigIconPlay from "../../../../public/images/media.bgplay.react.svg";
import { useSwipeable } from "../../react-swipeable";
let iconWidth = 80;
let iconHeight = 60;
const ACTION_TYPES = {
setActiveIndex: "setActiveIndex",
update: "update",
};
function createAction(type, payload) {
return {
type,
payload: payload || {},
};
}
const StyledVideoPlayer = styled.div`
&:focus-visible,
#videoPlayer:focus-visible {
outline: none;
}
.mobile-details {
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.8) 100%
);
}
.video-wrapper {
position: fixed;
z-index: 305;
top: 0;
${isMobileOnly &&
css`
top: 0;
`}
bottom: 0;
right: 0;
left: 0;
${(props) =>
props.isFullScreen ? "background: #000" : "background: transparent"};
}
.audio-container {
width: 190px;
height: 190px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.7);
border-radius: 20px;
}
svg {
path {
fill: #fff;
}
}
rect {
stroke: #fff;
}
.video-backdrop {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(55, 55, 55, 0.6);
height: 100%;
}
.dropdown-speed {
position: relative;
display: inline-block;
}
.dropdown-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
width: 48px;
&:hover {
cursor: pointer;
background: #222;
}
}
.dropdown-content {
display: flex;
height: 120px;
width: 48px;
padding: 4px 0px;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 48px;
color: #fff;
background: #333;
text-align: center;
border-radius: 7px 7px 0px 0px;
}
.bg-play {
position: fixed;
&:hover {
cursor: pointer;
}
}
input[type="range"] {
-webkit-appearance: none;
margin-right: 15px;
width: 80%;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 5px;
background-image: linear-gradient(#fff, #fff);
background-repeat: no-repeat;
&:hover {
cursor: pointer;
}
@media ${tablet} {
width: 63%;
}
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 4px;
width: 4px;
border-radius: 50%;
background: #fff;
opacity: 0;
}
.mobile-video-progress {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
right: 0;
bottom: 77px;
left: 0;
padding: 0 28px;
height: 30px;
${isMobileOnly &&
css`
bottom: 44px;
padding: 0 16px;
`}
input[type="range"] {
width: 100%;
margin-right: 0px;
}
}
`;
const StyledVideoActions = styled.div`
.actions-container {
position: fixed;
bottom: 13px;
left: 0;
right: 0;
justify-content: space-between;
padding-left: 29px;
padding-right: 19px;
display: flex;
align-items: center;
${isMobileOnly &&
css`
bottom: 2px;
padding: 0 11px;
`}
.controll-box {
display: flex;
align-items: center;
}
}
.controller {
display: flex;
justify-content: center;
align-items: center;
min-width: 48px;
height: 48px;
&:hover {
cursor: pointer;
}
}
`;
const StyledDuration = styled.div`
padding-left: 10px;
padding-right: 14px;
width: 102px;
color: #fff;
user-select: none;
font-size: 12px;
font-weight: 700;
`;
const StyledVideoControls = styled.div`
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 307;
display: flex;
height: 188px;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.64) 48.44%,
rgba(0, 0, 0, 0.89) 100%
);
.volume-container {
display: flex;
svg {
&:hover {
cursor: pointer;
}
}
}
${isMobileOnly &&
css`
height: 80px;
background: rgba(0, 0, 0, 0.8);
`}
.volume-wrapper {
width: 100px;
height: 28px;
display: flex;
align-items: center;
padding-left: 15px;
&:hover {
input[type="range"]::-webkit-slider-thumb {
height: 10px;
width: 10px;
opacity: 1 !important;
border-radius: 50%;
}
}
}
`;
const getDuration = (time) => {
const timestamp = Math.floor(time);
const hours = Math.floor(timestamp / 60 / 60);
const minutes = Math.floor(timestamp / 60) - hours * 60;
const seconds = timestamp % 60;
const formatted = hours
? [
hours.toString().padStart(2, "0"),
minutes.toString().padStart(2, "0"),
seconds.toString().padStart(2, "0"),
].join(":")
: [
minutes.toString().padStart(2, "0"),
seconds.toString().padStart(2, "0"),
].join(":");
return formatted;
};
export default function ViewerPlayer(props) {
const {
setIsFullScreen,
videoRef,
generateContextMenu,
mobileDetails,
onPrevClick,
onNextClick,
onMaskClick,
displayUI,
isAudio,
audioIcon,
playlist,
playlistPos,
} = props;
const initialState = {
width: 0,
height: 0,
left: 0,
top: 0,
activeIndex: props.activeIndex,
isPlaying: false,
isMuted: false,
isFullScreen: false,
speedSelection: false,
progress: 0,
duration: 0,
volumeSelection: false,
speedState: 1,
isOpenContext: false,
volume: 100,
size: "0%",
opacity: 1,
deltaY: 0,
deltaX: 0,
};
function reducer(state, action) {
switch (action.type) {
case ACTION_TYPES.setActiveIndex:
return {
...state,
activeIndex: action.payload.index,
startLoading: true,
};
case ACTION_TYPES.update:
return {
...state,
...action.payload,
};
default:
break;
}
return state;
}
const inputRef = React.useRef(null);
const volumeRef = React.useRef(null);
const [state, dispatch] = React.useReducer(reducer, initialState);
const [currentVolume, setCurrentVolume] = React.useState(100);
const speedIcons = [