From 2202b6507a558bac3c3a627399376cac1ecf5b38 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sat, 31 Oct 2020 00:39:36 +0200 Subject: [PATCH] Fix video streaming chunk in Safari iOS Fix round video iOS overflow Fix album layout for iOS Safari --- src/components/appMediaPlaybackController.ts | 2 +- src/components/appMediaViewer.ts | 4 ++- src/components/chat/contextMenu.ts | 2 ++ src/components/popupNewMedia.ts | 2 +- src/components/wrappers.ts | 6 ++-- src/index.hbs | 30 +++++++++++--------- src/lib/mtproto/mtproto.service.ts | 8 +++--- src/pages/pageSignIn.ts | 28 ++++++++++++++---- src/scss/partials/_chat.scss | 2 +- src/scss/partials/_ckin.scss | 2 ++ src/scss/partials/_leftSidebar.scss | 3 +- src/scss/partials/pages/_chats.scss | 5 ++-- src/scss/style.scss | 17 +++++++---- 13 files changed, 73 insertions(+), 38 deletions(-) diff --git a/src/components/appMediaPlaybackController.ts b/src/components/appMediaPlaybackController.ts index ff939531..3b92c91c 100644 --- a/src/components/appMediaPlaybackController.ts +++ b/src/components/appMediaPlaybackController.ts @@ -42,7 +42,7 @@ class AppMediaPlaybackController { //source.type = doc.type == 'voice' && !opusDecodeController.isPlaySupported() ? 'audio/wav' : doc.mime_type; if(doc.type == 'round') { - media.setAttribute('playsinline', ''); + media.setAttribute('playsinline', 'true'); } media.dataset.mid = '' + mid; diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index 6cd52d38..56bf5cf3 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -886,7 +886,7 @@ class AppMediaViewerBase { @@ -896,6 +896,8 @@ class AppMediaViewerBase { //const good = !!findUpClassName(e.target, 'message') || !!findUpClassName(e.target, 'bubble__container'); const className = (e.target as HTMLElement).className; + if(!className || !className.includes) return; + const good = ['bubble', 'bubble__container', 'message', 'time', 'inner'].find(c => className.includes(c)); if(good) { onContextMenu(e); diff --git a/src/components/popupNewMedia.ts b/src/components/popupNewMedia.ts index 1ae66e67..3185607a 100644 --- a/src/components/popupNewMedia.ts +++ b/src/components/popupNewMedia.ts @@ -142,7 +142,7 @@ export default class PopupNewMedia extends PopupElement { video.autoplay = false; video.controls = false; video.muted = true; - video.setAttribute('playsinline', ''); + video.setAttribute('playsinline', 'true'); video.onloadeddata = () => { params.width = video.videoWidth; diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index f6cc20d9..f9c2326d 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -2,7 +2,7 @@ import { readBlobAsText } from '../helpers/blob'; import { deferredPromise } from '../helpers/cancellablePromise'; import { months } from '../helpers/date'; import mediaSizes from '../helpers/mediaSizes'; -import { isSafari } from '../helpers/userAgent'; +import { isAppleMobile, isSafari } from '../helpers/userAgent'; import { PhotoSize } from '../layer'; import appDocsManager, { MyDocument } from "../lib/appManagers/appDocsManager"; import { DownloadBlob } from '../lib/appManagers/appDownloadManager'; @@ -74,7 +74,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai const video = document.createElement('video'); video.muted = true; - video.setAttribute('playsinline', ''); + video.setAttribute('playsinline', 'true'); if(doc.type == 'round') { //video.muted = true; const globalVideo = appMediaPlaybackController.addMedia(doc, message.mid); @@ -224,7 +224,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai const deferred = deferredPromise(); //if(doc.type == 'gif'/* || true */) { - video.addEventListener('canplay', () => { + video.addEventListener(isAppleMobile ? 'loadeddata' : 'canplay', () => { if(img?.parentElement) { img.remove(); } diff --git a/src/index.hbs b/src/index.hbs index bf073c6f..7b4fae66 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -40,20 +40,22 @@

Sign in to Telegram

Please confirm your country and
enter your phone number.

-
- - - -
-
- - -
- - + {{!--
--}} +
+ + + +
+
+ + +
+ + + {{!--
--}}
Quick log in using QR code
diff --git a/src/lib/mtproto/mtproto.service.ts b/src/lib/mtproto/mtproto.service.ts index 74191651..f1f96d84 100644 --- a/src/lib/mtproto/mtproto.service.ts +++ b/src/lib/mtproto/mtproto.service.ts @@ -51,7 +51,8 @@ const onFetch = (event: FetchEvent): void => { const info: DownloadOptions = JSON.parse(decodeURIComponent(params)); //const fileName = getFileNameByLocation(info.location); - const limitPart = STREAM_CHUNK_UPPER_LIMIT; + // ! если грузить очень большое видео чанками по 512Кб в мобильном Safari, то стрим не запустится + const limitPart = info.size > (75 * 1024 * 1024) ? STREAM_CHUNK_UPPER_LIMIT : STREAM_CHUNK_MIDDLE_LIMIT; /* if(info.size > limitPart && isSafari && offset == limitPart) { //end = info.size - 1; @@ -197,13 +198,12 @@ ctx.onoffline = ctx.ononline = onChangeState; onChangeState(); -const DOWNLOAD_CHUNK_LIMIT = 512 * 1024; - /* const STREAM_CHUNK_UPPER_LIMIT = 256 * 1024; const SMALLEST_CHUNK_LIMIT = 256 * 4; */ /* const STREAM_CHUNK_UPPER_LIMIT = 1024 * 1024; const SMALLEST_CHUNK_LIMIT = 1024 * 4; */ -const STREAM_CHUNK_UPPER_LIMIT = 512 * 1024; +const STREAM_CHUNK_MIDDLE_LIMIT = 512 * 1024; +const STREAM_CHUNK_UPPER_LIMIT = 1024 * 1024; const SMALLEST_CHUNK_LIMIT = 512 * 4; function parseRange(header: string): [number, number] { diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index e01b9643..53b64419 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -103,7 +103,7 @@ let onFirstMount = () => { selectCountryCode.value = countryName; lastCountrySelected = countries.find(c => c.name == countryName); - telEl.value = phoneCode; + telEl.value = lastValue = phoneCode; setTimeout(() => telEl.focus(), 0); //console.log('clicked', e, countryName, phoneCode); }); @@ -176,17 +176,25 @@ let onFirstMount = () => { else selectCountryCode.focus(); }); - let sortedCountries = countries.slice().sort((a, b) => b.phoneCode.length - a.phoneCode.length); - + let pasted = false; + let lastValue = ''; let telEl = page.pageEl.querySelector('input[name="phone"]') as HTMLInputElement; const telLabel = telEl.nextElementSibling as HTMLLabelElement; telEl.addEventListener('input', function(this: typeof telEl, e) { + //console.log('input', this.value); this.classList.remove('error'); + const diff = Math.abs(this.value.length - lastValue.length); + if(diff > 1 && !pasted) { + this.value = lastValue + this.value; + } + + pasted = false; + telLabel.innerText = 'Phone Number'; let {formatted, country} = formatPhoneNumber(this.value); - this.value = formatted ? '+' + formatted : ''; + this.value = lastValue = formatted ? '+' + formatted : ''; //console.log(formatted, country); @@ -204,7 +212,17 @@ let onFirstMount = () => { } }); + telEl.addEventListener('paste', (e) => { + pasted = true; + //console.log('paste', telEl.value); + }); + + /* telEl.addEventListener('change', (e) => { + console.log('change', telEl.value); + }); */ + telEl.addEventListener('keypress', function(this: typeof telEl, e) { + console.log('keypress', this.value); if(!btnNext.style.visibility &&/* this.value.length >= 9 && */ e.key == 'Enter') { return btnNext.click(); } else if(/\D/.test(e.key)) { @@ -286,7 +304,7 @@ let onFirstMount = () => { if(!selectCountryCode.value.length && !telEl.value.length) { selectCountryCode.value = country.name; lastCountrySelected = country; - telEl.value = '+' + country.phoneCode.split(' and ').shift(); + telEl.value = lastValue = '+' + country.phoneCode.split(' and ').shift(); } } diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index e2f9c3cb..78dd0a88 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -641,7 +641,7 @@ $chat-helper-size: 39px; flex: 3; @include respond-to(floating-left-sidebar) { - position: fixed; + position: fixed !important; left: 0; top: 0; bottom: 0; diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index 84f5d48b..7724595d 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -416,6 +416,8 @@ input[type=range] { video[data-ckin="circle"] { border-radius: 50%; overflow: hidden; + position: relative; + z-index: -1; } .progress-ring { position: absolute; diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index ed212c87..b4138c45 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -16,7 +16,8 @@ position: fixed; left: 0; top: 0; - height: calc(var(--vh, 1vh) * 100); + /* height: calc(var(--vh, 1vh) * 100); + min-height: calc(var(--vh, 1vh) * 100) !important; */ width: 26.5rem; transform: translate3d(-5rem, 0, 0); transition: transform var(--layer-transition); diff --git a/src/scss/partials/pages/_chats.scss b/src/scss/partials/pages/_chats.scss index 539b24d2..1f33b797 100644 --- a/src/scss/partials/pages/_chats.scss +++ b/src/scss/partials/pages/_chats.scss @@ -62,11 +62,12 @@ } } - @include respond-to(floating-left-sidebar) { + /* @include respond-to(floating-left-sidebar) { .main-column { height: calc(var(--vh, 1vh) * 100) !important; + min-height: calc(var(--vh, 1vh) * 100) !important; } - } + } */ /* @include respond-to(until-floating-left-sidebar) { .main-column { diff --git a/src/scss/style.scss b/src/scss/style.scss index b3034263..869b745d 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -73,6 +73,7 @@ $messages-container-width: 728px; } :root { + --vh: 1vh; --z-below: -1; --color-gray: #c4c9cc; --color-gray-hover: rgba(112, 117, 121, .08); @@ -199,11 +200,13 @@ $messages-container-width: 728px; html, body { height: 100%; width: 100%; - -webkit-font-smoothing: antialiased; - - //@include respond-to(handhelds) { + margin: 0; + padding: 0; + + @include respond-to(handhelds) { + overflow: hidden; height: calc(var(--vh, 1vh) * 100); - //} + } /* @include respond-to(handhelds) { //overflow-y: auto; @@ -220,7 +223,11 @@ html, body { html { font-size: 16px; - overflow: hidden; + //overflow: hidden; + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + text-rendering: optimizeSpeed; } /* body {