MrBesen
/
tweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

swipe fixes 

unsupported video toast
This commit is contained in:
Eduard Kuzmenko 2023-01-16 23:14:20 +04:00
parent 9c5497a9a7
commit e6bb3c9987
10 changed files with 107 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/appMediaViewerBase.ts
View File

@ -7,7 +7,7 @@
import deferredPromise from '../helpers/cancellablePromise';
import mediaSizes from '../helpers/mediaSizes';
import IS_TOUCH_SUPPORTED from '../environment/touchSupport';
import {IS_MOBILE_SAFARI, IS_SAFARI} from '../environment/userAgent';
import {IS_MOBILE, IS_MOBILE_SAFARI, IS_SAFARI} from '../environment/userAgent';
import type {MyDocument} from '../lib/appManagers/appDocsManager';
import type {MyPhoto} from '../lib/appManagers/appPhotosManager';
import {logger} from '../lib/logger';
@ -51,6 +51,7 @@ import overlayCounter from '../helpers/overlayCounter';
import {ThumbCache} from '../lib/storages/thumbs';
import appDownloadManager from '../lib/appManagers/appDownloadManager';
import wrapPeerTitle from './wrappers/peerTitle';
import {toastNew} from './toast';
const ZOOM_STEP = 0.5;
const ZOOM_INITIAL_VALUE = 1;
@ -306,13 +307,12 @@ export default class AppMediaViewerBase<
if(isFullScreen()) {
return;
}
// console.log(xDiff, yDiff);
const percents = Math.abs(xDiff) / windowSize.width;
if(percents > .2 || xDiff > 125) {
// console.log('will swipe', xDiff);
if(xDiff < 0) {
if(xDiff > 0) {
this.buttons.prev.click();
} else {
this.buttons.next.click();
@ -330,6 +330,7 @@ export default class AppMediaViewerBase<
return false;
},
verifyTouchTarget: (evt) => {
console.log('verify');
// * Fix for seek input
if((evt.target as HTMLElement).tagName === 'INPUT' || findUpClassName(evt.target, 'media-viewer-caption')) {
return false;
@ -1573,13 +1574,15 @@ export default class AppMediaViewerBase<
const url = (await getCacheContext()).url;
video.addEventListener('error', () => {
toastNew({
langPackKey: IS_MOBILE ? 'Video.Unsupported.Mobile' : 'Video.Unsupported.Desktop'
});
if(video.error.code !== 4) {
this.log.error('Error ' + video.error.code + '; details: ' + video.error.message);
}
if(preloader) {
preloader.detach();
}
preloader?.detach();
}, {once: true});
if(target instanceof SVGSVGElement/* && (video.parentElement || !isSafari) */) { // if video exists

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

@ -910,8 +910,6 @@ export default class ChatBubbles {
return !!target;
},
onSwipe: (xDiff) => {
xDiff *= -1;
shouldReply = xDiff >= replyAfter;
if(shouldReply && !icon.classList.contains('is-visible')) {

38
src/components/swipeHandler.ts
View File

@ -9,8 +9,10 @@ import IS_TOUCH_SUPPORTED from '../environment/touchSupport';
import safeAssign from '../helpers/object/safeAssign';
import contextMenuController from '../helpers/contextMenuController';
import {Middleware} from '../helpers/middleware';
import ListenerSetter, {ListenerOptions} from '../helpers/listenerSetter';
import ListenerSetter, {Listener, ListenerOptions} from '../helpers/listenerSetter';
import {attachContextMenuListener} from '../helpers/dom/attachContextMenuListener';
import pause from '../helpers/schedulers/pause';
import deferredPromise from '../helpers/cancellablePromise';
type E = {
clientX: number,
@ -64,6 +66,9 @@ export default class SwipeHandler {
private listenerOptions: boolean | AddEventListenerOptions = false;
private setCursorTo: HTMLElement;
private isMouseDown: boolean;
private tempId: number;
private hadMove: boolean;
private eventUp: E;
private xDown: number;
@ -82,6 +87,7 @@ export default class SwipeHandler {
this.setListeners();
this.resetValues();
this.tempId = 0;
options.middleware?.onDestroy(() => {
this.reset();
@ -130,11 +136,13 @@ export default class SwipeHandler {
}
protected resetValues() {
++this.tempId;
this.hadMove = false;
this.xAdded = this.yAdded = 0;
this.xDown =
this.yDown =
this.eventUp =
this.isMouseDown =
undefined;
}
@ -158,8 +166,12 @@ export default class SwipeHandler {
};
protected handleStart = async(_e: EE) => {
if(this.isMouseDown) {
return;
}
const e = getEvent(_e);
if(e.button !== 0) {
if((e.button ?? 0) !== 0) {
return;
}
@ -167,6 +179,28 @@ export default class SwipeHandler {
return this.reset();
}
const tempId = ++this.tempId;
this.isMouseDown = true;
if(this.withDelay && !IS_TOUCH_SUPPORTED) {
const options = {...MOUSE_MOVE_OPTIONS, once: true};
const deferred = deferredPromise<void>();
const cb = () => deferred.resolve();
const listener = this.listenerSetter.add(attachGlobalListenerTo)('mousemove', cb, options) as any as Listener;
await Promise.race([
pause(300),
deferred
]);
deferred.resolve();
this.listenerSetter.remove(listener);
if(this.tempId !== tempId) {
return;
}
}
this.xDown = e.clientX;
this.yDown = e.clientY;
this.eventUp = e;

3
src/components/wrappers/video.ts
View File

@ -547,6 +547,9 @@ export default async function wrapVideo({doc, container, message, boxWidth, boxH
renderDeferred.resolve();
}, (err) => {
console.error('video load error', err);
if(spanTime) {
spanTime.classList.add('is-error');
}
renderDeferred.reject(err);
});

2
src/config/app.ts
View File

@ -21,7 +21,7 @@ const App = {
version: process.env.VERSION,
versionFull: process.env.VERSION_FULL,
build: +process.env.BUILD,
langPackVersion: '0.7.8',
langPackVersion: '0.7.9',
langPack: 'webk',
langPackCode: 'en',
domains: MAIN_DOMAINS,

2
src/lang.ts
View File

@ -152,6 +152,8 @@ const lang = {
'PaymentCard.Error.Incomplete': 'Incomplete card number',
'LimitReached.Ok': 'OK, GOT IT',
'Username.Purchase': '**This username is already taken.** However, it is currently available for purchase. [Learn more…]()',
'Video.Unsupported.Desktop': '__Unfortunately, this video can\'t be played on Telegram Web. Try opening it with our [desktop app](https://getdesktop.telegram.org/) instead.__',
'Video.Unsupported.Mobile': '__Unfortunately, this video can\'t be played on Telegram Web. Try opening it with our [mobile app](https://telegram.org/dl/) instead.__',
// * android
'AccDescrEditing': 'Editing',

13
src/lib/appManagers/appDialogsManager.ts
View File

@ -547,6 +547,16 @@ class ForumTab extends SliderSuperTabEventable {
}
});
if(IS_TOUCH_SUPPORTED) {
handleTabSwipe({
element: this.container,
onSwipe: () => {
appDialogsManager.toggleForumTab(undefined, this);
},
middleware: this.middlewareHelper.get()
});
}
this.header.append(btnMenu);
if(!isFloating) {
@ -1673,6 +1683,9 @@ export class AppDialogsManager {
onSwipe: (xDiff) => {
const prevId = selectTab.prevId();
selectTab(xDiff < 0 ? prevId + 1 : prevId - 1);
},
verifyTouchTarget: () => {
return !this.forumTab;
}
});
}

41
src/lib/appManagers/appDocsManager.ts
View File

@ -9,6 +9,7 @@
* https://github.com/zhukov/webogram/blob/master/LICENSE
*/
import type {ThumbCache} from '../storages/thumbs';
import {AccountWallPapers, Document, DocumentAttribute, MessagesSavedGifs, PhotoSize, WallPaper} from '../../layer';
import {ReferenceContext} from '../mtproto/referenceDatabase';
import {getFullDate} from '../../helpers/date';
@ -22,7 +23,6 @@ import {isServiceWorkerOnline} from '../mtproto/mtproto.worker';
import MTProtoMessagePort from '../mtproto/mtprotoMessagePort';
import getDocumentInputFileLocation from './utils/docs/getDocumentInputFileLocation';
import getDocumentURL from './utils/docs/getDocumentURL';
import type {ThumbCache} from '../storages/thumbs';
import makeError from '../../helpers/makeError';
import {EXTENSION_MIME_TYPE_MAP} from '../../environment/mimeTypeMap';
import {THUMB_TYPE_FULL} from '../mtproto/mtproto_config';
@ -107,33 +107,39 @@ export class AppDocsManager extends AppManager {
// 'audioPerformer', 'sticker', 'stickerEmoji', 'stickerEmojiRaw',
// 'stickerSetInput', 'stickerThumbConverted', 'animated', 'supportsStreaming']);
let type: MyDocument['type'];
for(let i = 0, length = doc.attributes.length; i < length; ++i) {
const attribute = doc.attributes[i];
switch(attribute._) {
case 'documentAttributeFilename':
case 'documentAttributeFilename': {
doc.file_name = wrapPlainText(attribute.file_name);
break;
}
case 'documentAttributeAudio': {
if(doc.type === 'round') {
break;
}
case 'documentAttributeAudio':
doc.duration = attribute.duration;
type ??= attribute.pFlags.voice && doc.mime_type === 'audio/ogg' ? 'voice' : 'audio';
doc.type = attribute.pFlags.voice && doc.mime_type === 'audio/ogg' ? 'voice' : 'audio';
break;
}
case 'documentAttributeVideo':
case 'documentAttributeVideo': {
doc.duration = attribute.duration;
doc.w = attribute.w;
doc.h = attribute.h;
// apiDoc.supportsStreaming = attribute.pFlags?.supports_streaming/* && apiDoc.size > 524288 */;
if(/* apiDoc.thumbs && */attribute.pFlags.round_message) {
type ??= 'round';
doc.type = 'round';
} else /* if(apiDoc.thumbs) */ {
type ??= 'video';
doc.type = 'video';
}
break;
}
case 'documentAttributeCustomEmoji':
case 'documentAttributeSticker':
case 'documentAttributeSticker': {
if(attribute.alt !== undefined) {
doc.stickerEmojiRaw = attribute.alt;
}
@ -148,37 +154,38 @@ export class AppDocsManager extends AppManager {
// * there can be no thumbs, then it is a document
if(/* apiDoc.thumbs && */doc.mime_type === 'image/webp' && (doc.thumbs || getEnvironment().IS_WEBP_SUPPORTED)) {
type ??= 'sticker';
doc.type = 'sticker';
doc.sticker = 1;
} else if(doc.mime_type === 'video/webm') {
if(!getEnvironment().IS_WEBM_SUPPORTED) {
break;
}
type ??= 'sticker';
doc.type = 'sticker';
doc.sticker = 3;
doc.animated = true;
}
break;
}
case 'documentAttributeImageSize':
type ??= 'photo';
case 'documentAttributeImageSize': {
doc.type = 'photo';
doc.w = attribute.w;
doc.h = attribute.h;
break;
}
case 'documentAttributeAnimated':
case 'documentAttributeAnimated': {
if((doc.mime_type === 'image/gif' || doc.mime_type === 'video/mp4')/* && apiDoc.thumbs */) {
type ??= 'gif';
doc.type = 'gif';
}
doc.animated = true;
break;
}
}
}
doc.type = type;
if(!doc.mime_type) {
const ext = (doc.file_name || '').split('.').pop();
// @ts-ignore

9
src/scss/partials/_chatBubble.scss
View File

@ -1987,9 +1987,16 @@ $bubble-border-radius-big: 12px;
// * same as .iconVolume
padding: 0 1px 0 3px;
font-size: 1.25rem;
font-size: calc(var(--messages-time-text-size) + 8px);
color: #fff;
}
&.is-error:after {
content: $tgico-sendingerror;
font-size: calc(var(--messages-time-text-size) + 4px);
padding: 0;
margin-inline-start: 1px;
}
}
.extended-media-buy {

24
src/scss/partials/_selector.scss
View File

@ -42,7 +42,7 @@
&-search {
// padding: 0 1.5rem;
padding: 0 1rem;
padding-inline: 1rem;
display: flex;
flex-flow: wrap;
position: relative;
@ -63,9 +63,8 @@
color: var(--primary-text-color);
background-color: var(--light-secondary-text-color);
font-size: 1rem;
padding: 0 17px 0px 0px;
margin-left: -.25rem;
margin-right: .75rem;
padding-inline-end: 17px;
margin-inline: -.25rem .75rem;
height: 2rem;
line-height: 2rem;
margin-bottom: 7px;
@ -104,7 +103,7 @@
&-avatar {
float: left;
margin-right: 8px;
margin-inline-end: 8px;
overflow: hidden;
position: relative;
border-radius: 50% !important;
@ -116,7 +115,7 @@
&:after {
position: absolute;
content: $tgico-close;
left: 0;
inset-inline-start: 0;
top: 0;
background-color: var(--danger-color);
height: 100%;
@ -151,7 +150,7 @@
.checkbox {
margin-top: 11px;
padding-left: 11px;
padding-inline-start: 11px;
}
.checkbox-field {
@ -165,13 +164,12 @@
z-index: 1;
&:first-child {
margin-right: 1.6875rem;
margin-left: .6875rem;
margin-inline: .6875rem 1.6875rem;
}
}
.checkbox-field-round {
right: 1.125rem;
inset-inline-end: 1.125rem;
--size: 1.25rem;
.checkbox-box-border {
@ -187,15 +185,15 @@
$add: 3rem;
.checkbox-field {
left: 1.25rem !important;
inset-inline-start: 1.25rem !important;
}
.chatlist-chat.row-with-padding {
padding-left: #{4.5rem + $add} !important; // 4.5 + x
padding-inline-start: #{4.5rem + $add} !important; // 4.5 + x
}
.dialog-avatar {
margin-left: #{$add} !important;
margin-inline-start: #{$add} !important;
}
}
}