Video player fixes for iOS

Minor fixes

server.js

@@ -8,7 +8,7 @@ const app = express();
 const thirdTour = process.argv[2] == 3;
 
 const publicFolderName = thirdTour ? 'public3' : 'public';
-const port = thirdTour ? 8443 : 443;
+const port = thirdTour ? 8443 : 8443;
 
 app.use(compression());
 app.use(express.static(publicFolderName));

src/components/appMediaPlaybackController.ts

@@ -41,6 +41,10 @@ class AppMediaPlaybackController {
     //const source = document.createElement('source');
     //source.type = doc.type == 'voice' && !opusDecodeController.isPlaySupported() ? 'audio/wav' : doc.mime_type;
 
+    if(doc.type == 'round') {
+      media.setAttribute('playsinline', '');
+    }
+
     media.dataset.mid = '' + mid;
     media.dataset.type = doc.type;
     

src/helpers/userAgent.ts

@@ -12,4 +12,9 @@ export const isAndroid = navigator.userAgent.toLowerCase().indexOf('android') !=
  */
 const ctx = typeof(window) !== 'undefined' ? window : self;
 
+// https://stackoverflow.com/a/58065241
+export const isAppleMobile = (/iPad|iPhone|iPod/.test(navigator.platform) ||
+  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
+  !ctx.MSStream;
+
 export const isSafari = !!('safari' in ctx) || !!(userAgent && (/\b(iPad|iPhone|iPod)\b/.test(userAgent) || (!!userAgent.match('Safari') && !userAgent.match('Chrome'))))/*  || true */;

src/lib/appManagers/appMediaViewer.ts

@@ -30,6 +30,12 @@ class SwipeHandler {
   }
 
   handleTouchStart = (evt: TouchEvent) => {
+    // * Fix for seek input
+    if((evt.target as HTMLElement).tagName == 'INPUT') {
+      this.xDown = this.yDown = null;
+      return;
+    }
+
     const firstTouch = evt.touches[0];
     this.xDown = firstTouch.clientX;
     this.yDown = firstTouch.clientY;

src/lib/mediaPlayer.ts

@@ -1,6 +1,7 @@
 import { cancelEvent } from "./utils";
 import { touchSupport } from "./config";
 import appMediaPlaybackController from "../components/appMediaPlaybackController";
+import { isAppleMobile } from "../helpers/userAgent";
 
 type SUPEREVENT = MouseEvent | TouchEvent;
 
@@ -347,6 +348,8 @@ export default class VideoPlayer {
         onScrub: currentTime => {
           const value = Math.max(Math.min(currentTime, 1), 0);
 
+          console.log('volume scrub:', currentTime, value);
+
           video.muted = false;
           video.volume = value;
         }
@@ -609,6 +612,14 @@ export default class VideoPlayer {
     // alternative standard method
     const player = this.wrapper;
 
+    // * https://caniuse.com/#feat=fullscreen
+    if(isAppleMobile) {
+      const video = this.video as any;
+      video.webkitEnterFullscreen();
+      video.enterFullscreen();
+      return;
+    }
+    
     if(!VideoPlayer.isFullScreen()) {
       player.classList.add('ckin__fullscreen');
 

src/pages/pagePassword.ts

@@ -10,6 +10,7 @@ import Page from './page';
 import { mediaSizes } from '../lib/config';
 import passwordManager from '../lib/mtproto/passwordManager';
 import { AccountPassword } from '../types';
+import { cancelEvent } from '../lib/utils';
 
 let onFirstMount = (): Promise<any> => {
   let needFrame = 0;
@@ -42,25 +43,28 @@ let onFirstMount = (): Promise<any> => {
     getState();
   };
 
-  toggleVisible.addEventListener('click', function(this, e) {
+  const onVisibilityClick = function(this: typeof toggleVisible, e: Event) {
+    cancelEvent(e);
     passwordVisible = !passwordVisible;
 
+    this.classList.toggle('tgico-eye2', passwordVisible);
     if(passwordVisible) {
-      this.classList.add('tgico-eye2');
       passwordInput.setAttribute('type', 'text');
       animation.setDirection(1);
       animation.curFrame = 0;
       needFrame = 16;
       animation.play();
     } else {
-      this.classList.remove('tgico-eye2');
       passwordInput.setAttribute('type', 'password');
       animation.setDirection(-1);
       animation.curFrame = 16;
       needFrame = 0;
       animation.play();
     }
-  });
+  };
+
+  toggleVisible.addEventListener('click', onVisibilityClick);
+  toggleVisible.addEventListener('touchend', onVisibilityClick);
 
   let state: AccountPassword;
   

src/scss/partials/_ckin.scss

@@ -227,6 +227,11 @@
       margin: 0;
       width: 50px;
 
+      // https://stackoverflow.com/a/4816050
+      html.is-ios & {
+        display: none;
+      }
+
       &__filled {
         background: #fff;
       }

src/scss/partials/_rightSidebar.scss

@@ -106,6 +106,11 @@
     font-size: 20px;
     line-height: 1.4;
     font-weight: 500;
+    text-overflow: ellipsis;
+	  overflow: hidden;
+    word-break: break-word;
+    max-width: 340px;
+    margin: 0 auto;
 
     span.emoji {
       vertical-align: inherit;
@@ -161,6 +166,9 @@
       color: #000;
       margin: 0;
       font-size: 1rem;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-word;
     }
 
     &-bio {

src/scss/style.scss

@@ -132,6 +132,10 @@ html, body {
   width: 100%;
   -webkit-font-smoothing: antialiased;
 
+  @include respond-to(handhelds) {
+    height: calc(var(--vh, 1vh) * 100);
+  }
+
   /* @include respond-to(handhelds) {
     //overflow-y: auto;
     height: 100%;