Bring back reverted commits and fix issues properly (#1448)

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));
+    }
   }
 }
 

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);
+        }
       }
     }
 

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 {

src/components/mediaViewer/VideoPlayer.tsx

@@ -86,8 +86,11 @@ const VideoPlayer: FC<OwnProps> = ({
       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<OwnProps> = ({
   const handleEnded = useCallback(() => {
     setCurrentTime(0);
     setIsPlayed(false);
+    setIsControlsVisible(true);
   }, []);
 
   const handleFullscreenChange = useCallback(() => {
@@ -125,6 +129,10 @@ const VideoPlayer: FC<OwnProps> = ({
   const toggleControls = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     setIsControlsVisible(!isControlsVisible);
+    if (!isControlsVisible) {
+      videoRef.current!.pause();
+      setIsPlayed(false);
+    }
   }, [isControlsVisible]);
 
   useEffect(() => {
@@ -149,8 +157,8 @@ const VideoPlayer: FC<OwnProps> = ({
     <div
       className="VideoPlayer"
       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
         // @ts-ignore
@@ -202,7 +210,7 @@ const VideoPlayer: FC<OwnProps> = ({
           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}

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;

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) {

src/components/middle/MessageSelectToolbar.tsx

@@ -70,7 +70,7 @@ const MessageSelectToolbar: FC<OwnProps & StateProps & DispatchProps> = ({
 
   const lang = useLang();
 
-  const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount);
+  const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount, 'i');
 
   const className = buildClassName(
     'MessageSelectToolbar',

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 {

src/components/middle/MiddleColumn.tsx

@@ -184,6 +184,28 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
     }
   }, [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<HTMLDivElement>) => {
     if (e.propertyName === 'transform' && e.target === e.currentTarget) {
       setIsReady(Boolean(chatId));

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 {

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);

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)));
+      }
     }
   }
 

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;
     }

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) {

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;

src/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-title" content="Telegram WebZ">
   <meta name="application-name" content="Telegram WebZ">

src/styles/index.scss

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