ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media Viewer: Fix video controls on single column layout (#149)

Browse Source
This commit is contained in:
Никита Великий 2022-08-05 22:29:21 +05:00 committed by GitHub
parent 0d5e4660b3
commit 06fe3a2640
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/mediaViewer/MediaViewerContent.tsx
View File

@ -8,7 +8,7 @@ import type {
import { ApiMediaFormat } from '../../api/types';
import { MediaViewerOrigin } from '../../types';
import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
import { IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment';
import useBlurSync from '../../hooks/useBlurSync';
import useMedia from '../../hooks/useMedia';
import useMediaWithLoadProgress from '../../hooks/useMediaWithLoadProgress';
@ -156,6 +156,14 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
setIsFooterHidden?.(!isVisible);
}, [setIsFooterHidden]);
const handleMouseMove = useCallback(() => {
toggleControls(true);
}, [toggleControls]);
const handleMouseOut = useCallback(() => {
toggleControls(false);
}, [toggleControls]);
const localBlobUrl = (photo || video) ? (photo || video)!.blobUrl : undefined;
let bestImageData = (!isVideo && (localBlobUrl || fullMediaBlobUrl)) || previewBlobUrl || pictogramBlobUrl;
const thumbDataUri = useBlurSync(!bestImageData && message && getMessageMediaThumbDataUri(message));
@ -221,6 +229,8 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
return (
<div
className={`MediaViewerContent ${hasFooter ? 'has-footer' : ''}`}
onMouseMove={!isGif && !IS_TOUCH_ENV ? handleMouseMove : undefined}
onMouseOut={!isGif && !IS_TOUCH_ENV ? handleMouseOut : undefined}
>
{isProtected && <div onContextMenu={stopEvent} className="protector" />}
{isPhoto && renderPhoto(

12
src/components/mediaViewer/VideoPlayer.tsx
View File

@ -120,16 +120,6 @@ const VideoPlayer: FC<OwnProps> = ({
useVideoCleanup(videoRef, []);
const handleMouseMove = useCallback(() => {
toggleControls(true);
}, [toggleControls]);
const handleMouseOut = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
if (e.target === videoRef.current) {
toggleControls(false);
}
}, [toggleControls]);
const handleTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLVideoElement>) => {
setCurrentTime(e.currentTarget.currentTime);
}, []);
@ -186,8 +176,6 @@ const VideoPlayer: FC<OwnProps> = ({
return (
<div
className="VideoPlayer"
onMouseMove={!isGif && !IS_TOUCH_ENV ? handleMouseMove : undefined}
onMouseOut={!isGif && !IS_TOUCH_ENV ? handleMouseOut : undefined}
>
<div
style={wrapperStyle}