From 665dce96312be2cbc75567615c66632a1bee2b2b Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 17 Sep 2021 17:17:13 +0300 Subject: [PATCH] Bring back reverted commits and fix issues properly (#1448) --- src/components/main/Main.scss | 5 ++++ src/components/mediaViewer/MediaViewer.scss | 26 +++++++++++++++++ src/components/mediaViewer/SenderInfo.scss | 2 +- src/components/mediaViewer/VideoPlayer.tsx | 16 ++++++++--- src/components/middle/MessageList.scss | 28 +++++++++++++++++++ .../middle/MessageSelectToolbar.scss | 7 +++++ .../middle/MessageSelectToolbar.tsx | 2 +- src/components/middle/MiddleColumn.scss | 17 ++++++++++- src/components/middle/MiddleColumn.tsx | 22 +++++++++++++++ src/components/middle/MiddleHeader.scss | 15 ++++++++++ src/components/middle/MobileSearch.scss | 15 ++++++++++ src/components/middle/ScrollDownButton.scss | 14 ++++++++++ src/components/middle/composer/Composer.scss | 4 +++ .../middle/composer/SymbolMenu.scss | 14 ++++++++++ src/components/right/RightColumn.scss | 4 +++ src/index.html | 2 +- src/styles/index.scss | 16 ++++++----- 17 files changed, 194 insertions(+), 15 deletions(-) diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss index cdb44b32e..5063cf3dc 100644 --- a/src/components/main/Main.scss +++ b/src/components/main/Main.scss @@ -94,6 +94,11 @@ max-width: none; width: 100vw; transform: translate3d(-20vw, 0, 0); + + @supports (left: env(safe-area-inset-left)) { + left: env(safe-area-inset-left) !important; + width: calc(100vw - env(safe-area-inset-left)); + } } } diff --git a/src/components/mediaViewer/MediaViewer.scss b/src/components/mediaViewer/MediaViewer.scss index 16eba3277..e6bfc6f45 100644 --- a/src/components/mediaViewer/MediaViewer.scss +++ b/src/components/mediaViewer/MediaViewer.scss @@ -77,10 +77,18 @@ @media (max-width: 600px) { padding: 0 0.5rem; + @supports (padding: 0 env(safe-area-inset-left)) { + padding: 0 #{"max(0.5rem, env(safe-area-inset-left))"}; + } + .media-viewer-close { margin-right: 1.5rem; } } + + @supports (padding: 0 env(safe-area-inset-left)) { + padding: 0 #{"max(1.25rem, env(safe-area-inset-left))"}; + } } & > .Transition, @@ -185,10 +193,19 @@ background-image: url("../../assets/media_navigation_previous.svg"); background-position: 1.25rem calc(50% - 2rem); + @supports (left: env(safe-area-inset-left)) { + left: env(safe-area-inset-left); + } + &[dir=rtl] { left: auto; right: 0; transform: scaleX(-1); + + @supports (left: env(safe-area-inset-left)) { + left: auto; + right: env(safe-area-inset-right); + } } } @@ -197,10 +214,19 @@ background-image: url("../../assets/media_navigation_next.svg"); background-position: calc(100% - 1.25rem) calc(50% - 2rem); + @supports (left: env(safe-area-inset-left)) { + right: env(safe-area-inset-right); + } + &[dir=rtl]{ left: 0; right: auto; transform: scaleX(-1); + + @supports (left: env(safe-area-inset-left)) { + right: auto; + left: env(safe-area-inset-left); + } } } diff --git a/src/components/mediaViewer/SenderInfo.scss b/src/components/mediaViewer/SenderInfo.scss index 42ac4448f..24996b033 100644 --- a/src/components/mediaViewer/SenderInfo.scss +++ b/src/components/mediaViewer/SenderInfo.scss @@ -23,7 +23,7 @@ display: flex; flex-direction: column; justify-content: center; - max-width: 100%; + max-width: calc(100% - 3.75rem); } .title { 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 f02f711d4..00091a912 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -11,6 +11,12 @@ overflow-y: auto; @include overflow-y-overlay(); + transition: transform var(--layer-transition); + + body.animation-level-0 & { + transition: none !important; + } + .mask-image-enabled & { mask-image: linear-gradient(to top, transparent 0, #000 0.5rem); } @@ -25,6 +31,12 @@ } } + @supports (padding-bottom: env(safe-area-inset-bottom)) { + body.keyboard-visible & { + transform: translateY(env(safe-area-inset-bottom)); + } + } + &.no-avatars .Message > .Avatar { display: none; } @@ -67,6 +79,12 @@ @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 { @@ -75,6 +93,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 4d3d094d2..daa3a5085 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -8,6 +8,10 @@ justify-content: center; margin: 0; + @supports (padding-bottom: env(safe-area-inset-bottom)) { + bottom: calc(.5rem + env(safe-area-inset-bottom)); + } + .mask-image-disabled &::before { left: auto !important; right: auto !important; @@ -15,6 +19,9 @@ .no-composer & { width: 100%; + @media (max-width: 600px) { + width: calc(100% - 1rem); + } } @media (min-width: 601px) { diff --git a/src/components/middle/MessageSelectToolbar.tsx b/src/components/middle/MessageSelectToolbar.tsx index abe9dcb5a..89a30f749 100644 --- a/src/components/middle/MessageSelectToolbar.tsx +++ b/src/components/middle/MessageSelectToolbar.tsx @@ -70,7 +70,7 @@ const MessageSelectToolbar: FC = ({ const lang = useLang(); - const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount); + const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount, 'i'); const className = buildClassName( 'MessageSelectToolbar', diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index 4219534ce..f2968c7b5 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -227,7 +227,7 @@ z-index: var(--z-middle-footer); transform: translate3d(0, 0, 0); - transition: transform var(--layer-transition); + transition: top 200ms, transform var(--layer-transition); body.animation-level-0 & { transition: none !important; @@ -249,6 +249,17 @@ } } + @supports (padding-bottom: env(safe-area-inset-bottom)) { + &:not(.no-composer) { + padding-bottom: env(safe-area-inset-bottom); + top: 0; + + body.keyboard-visible & { + top: env(safe-area-inset-bottom); + } + } + } + &::before { content: ""; position: absolute; @@ -347,6 +358,10 @@ @media (max-width: 600px) { padding-bottom: 0.75rem; + + @supports (padding-bottom: env(safe-area-inset-bottom)) { + padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); + } } .mask-image-disabled &::before { diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index e205e5331..9defe46a6 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -184,6 +184,28 @@ const MiddleColumn: FC = ({ } }, [animationLevel]); + // Fix for mobile virtual keyboard + useEffect(() => { + const { visualViewport } = window as any; + if (!visualViewport) { + return undefined; + } + + const handleResize = () => { + if (window.visualViewport.height !== document.documentElement.clientHeight) { + document.body.classList.add('keyboard-visible'); + } else { + document.body.classList.remove('keyboard-visible'); + } + }; + + visualViewport.addEventListener('resize', handleResize); + + return () => { + visualViewport.removeEventListener('resize', handleResize); + }; + }, []); + const handleTransitionEnd = (e: React.TransitionEvent) => { if (e.propertyName === 'transform' && e.target === e.currentTarget) { setIsReady(Boolean(chatId)); diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index b9613fc17..7dff068d5 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -32,6 +32,11 @@ max-width: unset; margin-top: -0.1875rem; } + + @supports (padding-left: env(safe-area-inset-left)) { + padding-left: #{"max(0.75rem, env(safe-area-inset-left))"}; + padding-right: #{"max(0.5rem, env(safe-area-inset-right))"}; + } } .AudioPlayer { @@ -80,12 +85,22 @@ position: relative; z-index: var(--z-middle-header); + @supports (padding-left: env(safe-area-inset-left)) { + padding-left: #{"max(1.5rem, env(safe-area-inset-left))"}; + padding-right: #{"max(.8125rem, env(safe-area-inset-right))"}; + } + @media (max-width: 600px) { padding: 0.5rem; position: relative; // Force rendering in the composite layer to fix the z-index rendering issue transform: translate3d(0, 0, 10px); transform-style: preserve-3d; + + @supports (padding-left: env(safe-area-inset-left)) { + padding-left: #{"max(.5rem, env(safe-area-inset-left))"}; + padding-right: #{"max(.5rem, env(safe-area-inset-right))"}; + } } .Transition { diff --git a/src/components/middle/MobileSearch.scss b/src/components/middle/MobileSearch.scss index 205fb09e4..059dddcda 100644 --- a/src/components/middle/MobileSearch.scss +++ b/src/components/middle/MobileSearch.scss @@ -10,6 +10,11 @@ align-items: center; padding: 0 0.5rem 0 0.25rem; + @supports (padding-left: env(safe-area-inset-left)) { + padding-left: #{"max(0.25rem, env(safe-area-inset-left))"}; + padding-right: #{"max(0.5rem, env(safe-area-inset-right))"}; + } + > .SearchInput { margin-left: 0.25rem; flex: 1; @@ -29,6 +34,16 @@ padding-left: 1rem; padding-right: 0.5rem; + @supports (padding-bottom: env(safe-area-inset-bottom)) { + padding-left: #{"max(1rem, env(safe-area-inset-left))"}; + padding-right: #{"max(0.5rem, env(safe-area-inset-right))"}; + + body:not(.keyboard-visible) & { + padding-bottom: env(safe-area-inset-bottom); + height: calc(3.5rem + env(safe-area-inset-bottom)); + } + } + > .counter { flex: 1; color: var(--color-text-secondary); diff --git a/src/components/middle/ScrollDownButton.scss b/src/components/middle/ScrollDownButton.scss index afd51cd04..796bd380f 100644 --- a/src/components/middle/ScrollDownButton.scss +++ b/src/components/middle/ScrollDownButton.scss @@ -10,6 +10,10 @@ z-index: var(--z-scroll-down-button); pointer-events: none; + @supports (right: env(safe-area-inset-right)) { + right: #{"max(1rem, env(safe-area-inset-right))"}; + } + body.animation-level-0 & { transform: none !important; @@ -19,6 +23,12 @@ @media (max-width: 600px) { right: 0.5rem; bottom: 4.5rem; + + @supports (padding-bottom: env(safe-area-inset-bottom)) { + body:not(.keyboard-visible) & { + bottom: calc(4.5rem + env(safe-area-inset-bottom)); + } + } } &-inner { @@ -64,6 +74,10 @@ &.no-composer:not(.with-extra-shift) { transform: translateY(4rem); + + @supports (padding-bottom: env(safe-area-inset-bottom)) { + transform: translateY(calc(4rem - env(safe-area-inset-bottom))); + } } } diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index 048d48dbc..3690a167e 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -8,6 +8,10 @@ padding-right: 2rem; bottom: 0; + @supports (padding-bottom: env(safe-area-inset-bottom)) { + bottom: env(safe-area-inset-bottom); + } + @media (max-width: 600px) { padding-right: 1rem; } diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index 4ff91541d..7dc4eb13c 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/src/components/middle/composer/SymbolMenu.scss @@ -11,6 +11,12 @@ z-index: 1; transition: transform var(--layer-transition); + @supports (padding-bottom: env(safe-area-inset-bottom)) { + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); + padding-left: env(safe-area-inset-left); + transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height) + env(safe-area-inset-bottom)), 0); + } &.open { transform: translate3d(0, 0, 0); @@ -33,6 +39,9 @@ width: var(--symbol-menu-width); height: var(--symbol-menu-height); max-height: calc(100vh - var(--symbol-menu-footer-height)); + @supports (padding-bottom: env(safe-area-inset-bottom)) { + max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom)); + } } &-footer { @@ -116,6 +125,11 @@ position: absolute; right: .25rem; top: .25rem; + + @supports (right: env(safe-area-inset-right)) { + right: #{"max(.25rem, env(safe-area-inset-right))"}; + top: #{"max(.25rem, env(safe-area-inset-top))"}; + } } @media (orientation: landscape) { diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss index 359756df5..7f04a65f9 100644 --- a/src/components/right/RightColumn.scss +++ b/src/components/right/RightColumn.scss @@ -32,6 +32,10 @@ transform: translate3d(110vw, 0, 0); } + @supports (padding-right: env(safe-area-inset-right)) { + padding-right: env(safe-area-inset-right); + } + > .Transition { height: calc(100% - var(--header-height)); overflow: hidden; diff --git a/src/index.html b/src/index.html index 4ee5eedd9..b5b70fc3e 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - + diff --git a/src/styles/index.scss b/src/styles/index.scss index c1ed0e1fa..06cfa77ab 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; +body:not(.is-ios) { + .custom-scroll { + &::-webkit-scrollbar { + width: .375rem; + } } -} -.custom-scroll-x { - &::-webkit-scrollbar { - height: .35rem; + .custom-scroll-x { + &::-webkit-scrollbar { + height: .35rem; + } } }