r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix video streaming chunk in Safari iOS

Browse Source 
Fix round video iOS overflow
Fix album layout for iOS Safari
This commit is contained in:
morethanwords 2020-10-31 00:39:36 +02:00
parent b178143958
commit 2202b6507a
13 changed files with 73 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/appMediaPlaybackController.ts
View File

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

4
src/components/appMediaViewer.ts
View File

@ -886,7 +886,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
//video.src = '';
video.setAttribute('playsinline', '');
video.setAttribute('playsinline', 'true');
// * fix for playing video if viewer is closed (https://contest.com/javascript-web-bonus/entry1425#issue11629)
video.addEventListener('timeupdate', () => {
@ -896,6 +896,8 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
});
if(isSafari) {
// test stream
// video.controls = true;
video.autoplay = true;
}

2
src/components/chat/contextMenu.ts
View File

@ -77,6 +77,8 @@ export default class ChatContextMenu {
attachTo.addEventListener('click', (e) => {
//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);

2
src/components/popupNewMedia.ts
View File

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

6
src/components/wrappers.ts
View File

@ -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<void>();
//if(doc.type == 'gif'/* || true */) {
video.addEventListener('canplay', () => {
video.addEventListener(isAppleMobile ? 'loadeddata' : 'canplay', () => {
if(img?.parentElement) {
img.remove();
}

30
src/index.hbs
View File

@ -40,20 +40,22 @@
<h4>Sign in to Telegram</h4>
<p class="subtitle">Please confirm your country and<br> enter your phone number.</p>
<div class="input-wrapper">
<div class="input-field input-select">
<input type="text" name="countryCode" id="countryCode" autocomplete="rrRandomRR" required />
<label for="countryCode">Country</label>
<span class="arrow arrow-down"></span>
</div>
<div class="input-field">
<input type="tel" name="phone" id="phone" autocomplete="rr55RandomRR55" required />
<label for="phone">Phone Number</label>
</div>
<label class="checkbox-field">
<input type="checkbox" id="keepSigned" checked="checked">
<span>Keep me signed in</span>
</label>
<button class="btn-primary rp" style="visibility: hidden;">NEXT</button>
{{!-- <form action=""> --}}
<div class="input-field input-select">
<input type="text" name="countryCode" id="countryCode" autocomplete="rrRandomRR" required />
<label for="countryCode">Country</label>
<span class="arrow arrow-down"></span>
</div>
<div class="input-field">
<input type="tel" name="phone" id="phone" autocomplete="rr55RandomRR55" required />
<label for="phone">Phone Number</label>
</div>
<label class="checkbox-field">
<input type="checkbox" id="keepSigned" checked="checked">
<span>Keep me signed in</span>
</label>
<button class="btn-primary rp" style="visibility: hidden;">NEXT</button>
{{!-- </form> --}}
<div class="qr"><a href="#" class="a-qr">Quick log in using QR code</a></div>
</div>
</div>

8
src/lib/mtproto/mtproto.service.ts
View File

@ -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] {

28
src/pages/pageSignIn.ts
View File

@ -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();
}
}

2
src/scss/partials/_chat.scss
View File

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

2
src/scss/partials/_ckin.scss
View File

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

3
src/scss/partials/_leftSidebar.scss
View File

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

5
src/scss/partials/pages/_chats.scss
View File

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

17
src/scss/style.scss
View File

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