+
+ {
+ dispatch(setVideoPlaying(null));
+ }}
+ sx={{
+ cursor: "pointer",
+ backgroundColor: "rgba(0,0,0,.5)",
+ }}
+ >
+
+
+
+
+
+ {isMobileView && canPlay ? (
+ <>
+
+ {playing ? : }
+
+
+
+
+
+
+
+
+
+
+ ) : canPlay ? (
+ <>
+
+ {playing ? : }
+
+
+
+
+
+
+ {progress && videoRef.current?.duration && formatTime(progress)}/
+ {progress &&
+ videoRef.current?.duration &&
+ formatTime(videoRef.current?.duration)}
+
+
+ {isMuted ? : }
+
+
+ increaseSpeed()}
+ >
+ Speed: {playbackRate}x
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+ );
+};
diff --git a/src/components/common/VideoPlayerGlobal.tsx b/src/components/common/VideoPlayerGlobal.tsx
deleted file mode 100644
index da14639..0000000
--- a/src/components/common/VideoPlayerGlobal.tsx
+++ /dev/null
@@ -1,648 +0,0 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
-import { Box, IconButton, Slider, useTheme } from '@mui/material'
-import { CircularProgress, Typography } from '@mui/material'
-import { Key } from 'ts-key-enum'
-import {
- PlayArrow,
- Pause,
- VolumeUp,
- Fullscreen,
- PictureInPicture, VolumeOff
-} from '@mui/icons-material'
-import { styled } from '@mui/system'
-import { MyContext } from '../../wrappers/DownloadWrapper'
-import { useDispatch, useSelector } from 'react-redux'
-import { RootState } from '../../state/store'
-import { Refresh } from '@mui/icons-material'
-import CloseIcon from '@mui/icons-material/Close';
-
-import { Menu, MenuItem } from '@mui/material'
-import { MoreVert as MoreIcon } from '@mui/icons-material'
-import { setVideoPlaying } from '../../state/features/globalSlice'
-const VideoContainer = styled(Box)`
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- margin: 0px;
- padding: 0px;
-`
-
-const VideoElement = styled('video')`
- width: 100%;
- height: auto;
- max-height: calc(100vh - 150px);
- background: rgb(33, 33, 33);
-`
-
-const ControlsContainer = styled(Box)`
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: space-between;
- bottom: 0;
- left: 0;
- right: 0;
- padding: 8px;
- background-color: rgba(0, 0, 0, 0.6);
-`
-
-interface VideoPlayerProps {
- src?: string
- poster?: string
- name?: string
- identifier?: string
- service?: string
- autoplay?: boolean
- from?: string | null
- customStyle?: any
- user?: string
- jsonId?: string
- element?: null | any
- checkIfDrag?: ()=> boolean;
-}
-
-export const VideoPlayerGlobal: React.FC