Various fixes for iOS (#1445)

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}
-      onMouseOut={!isGif ? handleMouseOut : undefined}
+      onMouseOver={!isGif && !IS_TOUCH_ENV ? handleMouseOver : 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

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

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

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