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

Various fixes for iOS (#1445)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-09-16 11:27:12 +03:00
parent f732a72e60
commit c06e0ecc79
4 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,8 +86,11 @@ const VideoPlayer: FC<OwnProps> = ({
videoRef.current!.pause(); videoRef.current!.pause();
setIsPlayed(false); setIsPlayed(false);
} else { } else {
videoRef.current!.play(); safePlay(videoRef.current!);
setIsPlayed(true); setIsPlayed(true);
if (IS_SINGLE_COLUMN_LAYOUT) {
setIsControlsVisible(false);
}
} }
}, [isPlayed]); }, [isPlayed]);
@ -108,6 +111,7 @@ const VideoPlayer: FC<OwnProps> = ({
const handleEnded = useCallback(() => { const handleEnded = useCallback(() => {
setCurrentTime(0); setCurrentTime(0);
setIsPlayed(false); setIsPlayed(false);
setIsControlsVisible(true);
}, []); }, []);
const handleFullscreenChange = useCallback(() => { const handleFullscreenChange = useCallback(() => {
@ -125,6 +129,10 @@ const VideoPlayer: FC<OwnProps> = ({
const toggleControls = useCallback((e: React.MouseEvent<HTMLDivElement>) => { const toggleControls = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation(); e.stopPropagation();
setIsControlsVisible(!isControlsVisible); setIsControlsVisible(!isControlsVisible);
if (!isControlsVisible) {
videoRef.current!.pause();
setIsPlayed(false);
}
}, [isControlsVisible]); }, [isControlsVisible]);
useEffect(() => { useEffect(() => {
@ -149,8 +157,8 @@ const VideoPlayer: FC<OwnProps> = ({
<div <div
className="VideoPlayer" className="VideoPlayer"
onClick={!isGif && IS_SINGLE_COLUMN_LAYOUT ? toggleControls : undefined} onClick={!isGif && IS_SINGLE_COLUMN_LAYOUT ? toggleControls : undefined}
onMouseOver={!isGif ? handleMouseOver : undefined} onMouseOver={!isGif && !IS_TOUCH_ENV ? handleMouseOver : undefined}
onMouseOut={!isGif ? handleMouseOut : undefined} onMouseOut={!isGif && !IS_TOUCH_ENV ? handleMouseOut : undefined}
> >
<div <div
// @ts-ignore // @ts-ignore
@ -202,7 +210,7 @@ const VideoPlayer: FC<OwnProps> = ({
isFullscreen={isFullscreen} isFullscreen={isFullscreen}
fileSize={fileSize} fileSize={fileSize}
duration={videoRef.current ? videoRef.current.duration : 0} duration={videoRef.current ? videoRef.current.duration : 0}
isForceVisible={!isPlayed || isControlsVisible} isForceVisible={isControlsVisible}
isForceMobileVersion={posterSize && posterSize.width < MOBILE_VERSION_CONTROL_WIDTH} isForceMobileVersion={posterSize && posterSize.width < MOBILE_VERSION_CONTROL_WIDTH}
onSeek={handleSeek} onSeek={handleSeek}
onChangeFullscreen={handleFullscreenChange} onChangeFullscreen={handleFullscreenChange}

16
src/components/middle/MessageList.scss
View File

@ -79,12 +79,6 @@
@media (max-width: 600px) { @media (max-width: 600px) {
margin-bottom: 4.25rem; margin-bottom: 4.25rem;
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body:not(.keyboard-visible) & {
margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}
}
} }
&.ActionMessage { &.ActionMessage {
@ -93,6 +87,16 @@
} }
} }
@media (max-width: 600px) {
&.type-pinned .last-in-list {
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body:not(.keyboard-visible) & {
margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}
}
}
}
.Message, .Message,
.ActionMessage { .ActionMessage {
position: relative; position: relative;

3
src/components/middle/MessageSelectToolbar.scss
View File

@ -19,6 +19,9 @@
.no-composer & { .no-composer & {
width: 100%; width: 100%;
@media (max-width: 600px) {
width: calc(100% - 1rem);
}
} }
@media (min-width: 601px) { @media (min-width: 601px) {

16
src/styles/index.scss
View File

@ -125,15 +125,17 @@ body.cursor-grabbing, body.cursor-grabbing * {
} }
} }
.custom-scroll { @media (min-width: 601px) {
&::-webkit-scrollbar { .custom-scroll {
width: .375rem; &::-webkit-scrollbar {
width: .375rem;
}
} }
}
.custom-scroll-x { .custom-scroll-x {
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: .35rem; height: .35rem;
}
} }
} }