diff --git a/src/components/mediaViewer/VideoPlayer.tsx b/src/components/mediaViewer/VideoPlayer.tsx index 215f88364..5bd43a736 100644 --- a/src/components/mediaViewer/VideoPlayer.tsx +++ b/src/components/mediaViewer/VideoPlayer.tsx @@ -86,8 +86,11 @@ const VideoPlayer: FC = ({ videoRef.current!.pause(); setIsPlayed(false); } else { - videoRef.current!.play(); + safePlay(videoRef.current!); setIsPlayed(true); + if (IS_SINGLE_COLUMN_LAYOUT) { + setIsControlsVisible(false); + } } }, [isPlayed]); @@ -108,6 +111,7 @@ const VideoPlayer: FC = ({ const handleEnded = useCallback(() => { setCurrentTime(0); setIsPlayed(false); + setIsControlsVisible(true); }, []); const handleFullscreenChange = useCallback(() => { @@ -125,6 +129,10 @@ const VideoPlayer: FC = ({ const toggleControls = useCallback((e: React.MouseEvent) => { e.stopPropagation(); setIsControlsVisible(!isControlsVisible); + if (!isControlsVisible) { + videoRef.current!.pause(); + setIsPlayed(false); + } }, [isControlsVisible]); useEffect(() => { @@ -149,8 +157,8 @@ const VideoPlayer: FC = ({
= ({ isFullscreen={isFullscreen} fileSize={fileSize} duration={videoRef.current ? videoRef.current.duration : 0} - isForceVisible={!isPlayed || isControlsVisible} + isForceVisible={isControlsVisible} isForceMobileVersion={posterSize && posterSize.width < MOBILE_VERSION_CONTROL_WIDTH} onSeek={handleSeek} onChangeFullscreen={handleFullscreenChange} diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 84a274d53..9e80fa5f6 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -79,12 +79,6 @@ @media (max-width: 600px) { 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 { @@ -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, .ActionMessage { position: relative; diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index 695ddbe53..daa3a5085 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -19,6 +19,9 @@ .no-composer & { width: 100%; + @media (max-width: 600px) { + width: calc(100% - 1rem); + } } @media (min-width: 601px) { diff --git a/src/styles/index.scss b/src/styles/index.scss index c1ed0e1fa..d697ac75b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -125,15 +125,17 @@ body.cursor-grabbing, body.cursor-grabbing * { } } -.custom-scroll { - &::-webkit-scrollbar { - width: .375rem; +@media (min-width: 601px) { + .custom-scroll { + &::-webkit-scrollbar { + width: .375rem; + } } -} -.custom-scroll-x { - &::-webkit-scrollbar { - height: .35rem; + .custom-scroll-x { + &::-webkit-scrollbar { + height: .35rem; + } } }