Qortal/q-tube
3
0
Fork 1
mirror of https://github.com/Qortal/q-tube.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

VideoPlayer Bug Fixes

Browse Source 
fixes bug where pause() could interrupt play() and prevent video playback.

Excessive delay between clicking play and when the video starts playing after a long time paused is eliminated.
This commit is contained in:
Qortal Dev 2024-08-13 14:54:40 -06:00
parent a16639be84
commit 8d7fe1f6c2
2 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/common/VideoPlayer/VideoPlayer.tsx
View File

@ -216,7 +216,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
const toggleRef = useRef<any>(null);
const { downloadVideo } = useContext(MyContext);
const togglePlay = (event?: any, isPlay?: boolean) => {
const togglePlay = async (event?: any, isPlay?: boolean) => {
if (!videoRef.current) return;
setStartPlay(true);
@ -233,7 +233,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
if (playing && !isPlay) {
videoRef.current.pause();
} else {
videoRef.current.play();
await videoRef.current.play();
}
if (isPlay) {
setPlaying(true);
@ -249,12 +249,12 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
setIsMuted(false);
};
const onProgressChange = (_: any, value: number | number[]) => {
const onProgressChange = async (_: any, value: number | number[]) => {
if (!videoRef.current) return;
videoRef.current.currentTime = value as number;
setProgress(value as number);
if (!playing) {
videoRef.current.play();
await videoRef.current.play();
setPlaying(true);
}
};
@ -322,10 +322,11 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
handleCanPlay();
videoRef.current.volume = videoPlaying.volume;
videoRef.current.currentTime = videoPlaying.currentTime;
videoRef.current.play();
setPlaying(true);
setStartPlay(true);
dispatch(setVideoPlaying(null));
videoRef.current.play().then(() => {
setPlaying(true);
setStartPlay(true);
dispatch(setVideoPlaying(null));
});
}
}, [videoPlaying, identifier, src]);
@ -468,14 +469,14 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
return hours + remainingMinutes + ":" + remainingSeconds;
}
const reloadVideo = () => {
const reloadVideo = async () => {
if (!videoRef.current) return;
const currentTime = videoRef.current.currentTime;
videoRef.current.src = src;
videoRef.current.load();
videoRef.current.currentTime = currentTime;
if (playing) {
videoRef.current.play();
await videoRef.current.play();
}
};

18
src/components/common/VideoPlayer/VideoPlayerGlobal.tsx
View File

@ -123,7 +123,7 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
const increaseSpeed = (wrapOverflow = true) => {
const changedSpeed = playbackRate + speedChange;
let newSpeed = wrapOverflow
const newSpeed = wrapOverflow
? changedSpeed
: Math.min(changedSpeed, maxSpeed);
@ -146,7 +146,7 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
if (playing) {
videoRef.current.pause();
} else {
videoRef.current.play();
await videoRef.current.play();
}
setPlaying(prev => !prev);
};
@ -158,12 +158,12 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
setIsMuted(false);
};
const onProgressChange = (_: any, value: number | number[]) => {
const onProgressChange = async (_: any, value: number | number[]) => {
if (!videoRef.current) return;
videoRef.current.currentTime = value as number;
setProgress(value as number);
if (!playing) {
videoRef.current.play();
await videoRef.current.play();
setPlaying(true);
}
};
@ -252,7 +252,7 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
function formatTime(seconds: number): string {
seconds = Math.floor(seconds);
let minutes: number | string = Math.floor(seconds / 60);
const minutes: number | string = Math.floor(seconds / 60);
let hours: number | string = Math.floor(minutes / 60);
let remainingSeconds: number | string = seconds % 60;
@ -275,7 +275,7 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
return hours + remainingMinutes + ":" + remainingSeconds;
}
const reloadVideo = () => {
const reloadVideo = async () => {
if (!videoRef.current) return;
const src = videoRef.current.src;
const currentTime = videoRef.current.currentTime;
@ -283,7 +283,7 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
videoRef.current.load();
videoRef.current.currentTime = currentTime;
if (playing) {
videoRef.current.play();
await videoRef.current.play();
}
};
@ -466,14 +466,14 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
useEffect(() => {
if (element) {
let oldElement = document.getElementById("videoPlayer");
const oldElement = document.getElementById("videoPlayer");
if (oldElement && oldElement?.parentNode) {
oldElement?.parentNode.replaceChild(element, oldElement);
videoRef.current = element;
setPlaying(true);
setCanPlay(true);
setStartPlay(true);
videoRef?.current?.addEventListener("click", () => {});
//videoRef?.current?.addEventListener("click", () => {});
videoRef?.current?.addEventListener("timeupdate", updateProgress);
videoRef?.current?.addEventListener("ended", handleEnded);
}