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

Fix sticker sets opening

Browse Source 
Fix round video time layout
Fix round video playback
This commit is contained in:
Eduard Kuzmenko 2021-01-23 00:12:57 +02:00
parent 9677854d72
commit 3c0e640daf
17 changed files with 134 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/appMediaPlaybackController.ts
View File

@ -47,12 +47,13 @@ class AppMediaPlaybackController {
const storage = this.media[peerId] ?? (this.media[peerId] = {});
if(storage[mid]) return storage[mid];
const media = document.createElement(doc.type == 'round' ? 'video' : 'audio');
const media = document.createElement(doc.type === 'round' ? 'video' : 'audio');
//const source = document.createElement('source');
//source.type = doc.type == 'voice' && !opusDecodeController.isPlaySupported() ? 'audio/wav' : doc.mime_type;
if(doc.type == 'round') {
if(doc.type === 'round') {
media.setAttribute('playsinline', 'true');
//media.muted = true;
}
media.dataset.mid = '' + mid;
@ -67,7 +68,9 @@ class AppMediaPlaybackController {
media.addEventListener('playing', () => {
this.currentPeerId = peerId;
if(this.playingMedia != media) {
//console.log('appMediaPlaybackController: video playing', this.currentPeerId, this.playingMedia, media);
if(this.playingMedia !== media) {
if(this.playingMedia && !this.playingMedia.paused) {
this.playingMedia.pause();
}
@ -86,7 +89,9 @@ class AppMediaPlaybackController {
media.addEventListener('ended', this.onEnded);
const onError = (e: Event) => {
if(this.nextMid == mid) {
//console.log('appMediaPlaybackController: video onError', e);
if(this.nextMid === mid) {
this.loadSiblingsMedia(peerId, doc.type as MediaType, mid).then(() => {
if(this.nextMid && storage[this.nextMid]) {
storage[this.nextMid].play();
@ -111,7 +116,7 @@ class AppMediaPlaybackController {
//media.autoplay = true;
//console.log('will set media url:', media, doc, doc.type, doc.url);
if(doc.type == 'audio' && doc.supportsStreaming && isSafari) {
if(doc.type === 'audio' && doc.supportsStreaming && isSafari) {
this.handleSafariStreamable(media);
}

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

@ -2870,10 +2870,11 @@ export default class ChatBubbles {
}
public deleteEmptyDateGroups() {
for(let i in this.dateMessages) {
let dateMessage = this.dateMessages[i];
const mustBeCount = 1 + +!!this.stickyIntersector;
for(const i in this.dateMessages) {
const dateMessage = this.dateMessages[i];
if(dateMessage.container.childElementCount == 2) { // only date div + sentinel div
if(dateMessage.container.childElementCount === mustBeCount) { // only date div + sentinel div
dateMessage.container.remove();
if(this.stickyIntersector) {
this.stickyIntersector.unobserve(dateMessage.container, dateMessage.div);

15
src/components/emoticonsDropdown/index.ts
View File

@ -130,7 +130,7 @@ export class EmoticonsDropdown {
this.searchButton = this.element.querySelector('.emoji-tabs-search');
this.searchButton.addEventListener('click', () => {
if(this.tabId == 1) {
if(this.tabId === 1) {
appSidebarRight.stickersTab.init();
} else {
appSidebarRight.gifsTab.init();
@ -177,15 +177,15 @@ export class EmoticonsDropdown {
}
private onSelectTabClick = (id: number) => {
if(this.tabId == id) {
if(this.tabId === id) {
return;
}
animationIntersector.checkAnimations(true, EMOTICONSSTICKERGROUP);
this.tabId = id;
this.searchButton.classList.toggle('hide', this.tabId == 0);
this.deleteBtn.classList.toggle('hide', this.tabId != 0);
this.searchButton.classList.toggle('hide', this.tabId === 0);
this.deleteBtn.classList.toggle('hide', this.tabId !== 0);
};
public checkRights = () => {
@ -200,11 +200,8 @@ export class EmoticonsDropdown {
tabsElements[3].toggleAttribute('disabled', !canSendGifs);
const active = this.tabsEl.querySelector('.active');
if(active && whichChild(active) != 1 && (!canSendStickers || !canSendGifs)) {
this.selectTab(0);
this.onSelectTabClick(0);
active.classList.remove('active');
children[1].classList.add('active');
if(active && whichChild(active) !== 1 && (!canSendStickers || !canSendGifs)) {
this.selectTab(0, false);
}
};

3
src/components/sidebarRight/tabs/stickers.ts
View File

@ -44,9 +44,8 @@ export default class AppStickersTab implements SliderTab {
const target = findUpClassName(e.target, 'sticker-set');
if(!target) return;
const id = target.dataset.stickerSet as string;
const access_hash = target.dataset.stickerSet as string;
const access_hash = target.dataset.access_hash as string;
const button = findUpClassName(e.target, 'sticker-set-button') as HTMLElement;
if(button) {

25
src/components/wrappers.ts
View File

@ -132,33 +132,38 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
const clear = () => {
//console.log('clearing video');
globalVideo.removeEventListener('timeupdate', onTimeUpdate);
globalVideo.removeEventListener('timeupdate', onGlobalTimeUpdate);
globalVideo.removeEventListener('play', onGlobalPlay);
globalVideo.removeEventListener('pause', onGlobalPause);
video.removeEventListener('play', onVideoPlay);
video.removeEventListener('pause', onVideoPause);
};
const onTimeUpdate = () => {
const onGlobalTimeUpdate = (e: Event) => {
//console.log('video global timeupdate event', e, globalVideo.currentTime, globalVideo.duration);
if(!isInDOM(video)) {
clear();
}
};
const onGlobalPlay = () => {
const onGlobalPlay = (e: Event) => {
//console.log('video global play event', e);
video.play();
};
const onGlobalPause = () => {
const onGlobalPause = (e: Event) => {
//console.trace('video global pause event', e, globalVideo.paused, e.eventPhase);
video.pause();
};
const onVideoPlay = () => {
const onVideoPlay = (e: Event) => {
//console.log('video play event', e);
globalVideo.currentTime = video.currentTime;
globalVideo.play();
};
const onVideoPause = () => {
//console.log('video pause event');
const onVideoPause = (e: Event) => {
//console.trace('video pause event', e);
if(isInDOM(video)) {
globalVideo.pause();
} else {
@ -166,7 +171,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
}
};
globalVideo.addEventListener('timeupdate', onTimeUpdate);
globalVideo.addEventListener('timeupdate', onGlobalTimeUpdate);
globalVideo.addEventListener('play', onGlobalPlay);
globalVideo.addEventListener('pause', onGlobalPause);
video.addEventListener('play', onVideoPlay);
@ -604,7 +609,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
return promise;
};
const onLoad = () => {
const onLoad = (): Promise<void> => {
if(middleware && !middleware()) return Promise.resolve();
return new Promise((resolve) => {
@ -889,7 +894,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
image.classList.add('fade-in');
}
return new Promise((resolve, reject) => {
return new Promise<void>((resolve, reject) => {
const r = () => {
if(middleware && !middleware()) return resolve();

2
src/lib/appManagers/appImManager.ts
View File

@ -231,7 +231,7 @@ export class AppImManager {
} else if(e.code === "KeyC" && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') {
return;
} else if(e.code === 'ArrowUp') {
if(!chat.input.editMsgId) {
if(!chat.input.editMsgId && chat.input.isInputEmpty()) {
const history = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId);
if(history.history.length) {
let goodMid: number;

7
src/lib/appManagers/appStickersManager.ts
View File

@ -57,6 +57,7 @@ export class AppStickersManager {
if(cachedSet && cachedSet.documents?.length) {
this.saveStickers(cachedSet.documents);
resolve(cachedSet);
delete this.getStickerSetPromises[set.id];
return;
}
}
@ -92,7 +93,7 @@ export class AppStickersManager {
if(!stickerSet || !stickerSet.documents) return undefined;
emoji = emoji.replace(/\ufe0f/g, '').replace(/🏻|🏼|🏽|🏾|🏿/g, '');
const pack = stickerSet.packs.find(p => p.emoticon == emoji);
const pack = stickerSet.packs.find(p => p.emoticon === emoji);
return pack ? appDocsManager.getDoc(pack.documents[0]) : undefined;
}
@ -117,8 +118,7 @@ export class AppStickersManager {
//console.log('stickers wrote', this.stickerSets);
const needSave = stickerSet.set.installed_date || id === 'emoji';
if(needSave) this.storage.set({[id]: stickerSet});
else this.storage.remove(id);
this.storage.set({[id]: stickerSet}, !needSave);
}
public getStickerSetThumbDownloadOptions(stickerSet: StickerSet.stickerSet) {
@ -185,6 +185,7 @@ export class AppStickersManager {
if(res) {
delete set.installed_date;
rootScope.broadcast('stickers_deleted', set);
this.storage.remove(set.id, true);
return true;
}
} else {

43
src/lib/mediaPlayer.ts
View File

@ -178,7 +178,7 @@ export default class VideoPlayer {
this.stylePlayer();
if(this.skin == 'default') {
if(this.skin === 'default') {
let controls = this.wrapper.querySelector('.default__controls.ckin__controls') as HTMLDivElement;
this.progress = new MediaProgressLine(video, streamable);
controls.prepend(this.progress.container);
@ -206,8 +206,6 @@ export default class VideoPlayer {
const html = this.buildControls();
player.insertAdjacentHTML('beforeend', html);
let elapsed = 0;
let prevTime = 0;
let timeDuration: HTMLElement;
if(skin === 'default') {
@ -374,20 +372,19 @@ export default class VideoPlayer {
circle.addEventListener('click', () => {
this.togglePlay();
});
const update = () => {
const offset = circumference - video.currentTime / video.duration * circumference;
circle.style.strokeDashoffset = '' + offset;
if(video.paused) {
clearInterval(updateInterval);
}
};
video.addEventListener('play', () => {
iconVolume.style.display = 'none';
updateInterval = window.setInterval(() => {
//elapsed += 0.02; // Increase with timer interval
if(video.currentTime != prevTime) {
elapsed = video.currentTime; // Update if getCurrentTime was changed
prevTime = video.currentTime;
}
const offset = circumference - elapsed / video.duration * circumference;
circle.style.strokeDashoffset = '' + offset;
if(video.paused) clearInterval(updateInterval);
}, 20);
updateInterval = window.setInterval(update, 20);
});
video.addEventListener('pause', () => {
@ -396,22 +393,6 @@ export default class VideoPlayer {
let updateInterval = 0;
video.addEventListener('timeupdate', () => {
clearInterval(updateInterval);
let elapsed = 0;
let prevTime = 0;
updateInterval = window.setInterval(() => {
if(video.currentTime != prevTime) {
elapsed = video.currentTime; // Update if getCurrentTime was changed
prevTime = video.currentTime;
}
const offset = circumference - elapsed / video.duration * circumference;
circle.style.strokeDashoffset = '' + offset;
if(video.paused) clearInterval(updateInterval);
}, 20);
const timeLeft = String((video.duration - video.currentTime) | 0).toHHMMSS();
if(timeLeft != '0') timeDuration.innerHTML = timeLeft;
});
@ -435,6 +416,8 @@ export default class VideoPlayer {
}
public togglePlay(stop?: boolean) {
//console.log('video togglePlay:', stop, this.video.paused);
if(stop) {
this.video.pause();
this.wrapper.classList.remove('is-playing');

2
src/lib/richtextprocessor.ts
View File

@ -441,7 +441,7 @@ namespace RichTextProcessor {
}
case 'messageEntityHighlight': {
insertPart(entity, '<i>', '</i>');
insertPart(entity, '<i class="text-highlight">', '</i>');
break;
}

20
src/lib/storage.ts
View File

@ -36,7 +36,6 @@ export default class AppStorage<Storage extends Record<string, any>/* Storage ex
} catch(e) {
if(e !== 'NO_ENTRY_FOUND') {
this.useStorage = false;
value = undefined;
console.error('[AS]: get error:', e, key, value);
}
}
@ -47,12 +46,12 @@ export default class AppStorage<Storage extends Record<string, any>/* Storage ex
}
}
public async set(obj: Partial<Storage>) {
public async set(obj: Partial<Storage>, onlyLocal = false) {
//console.log('storageSetValue', obj, callback, arguments);
for(let key in obj) {
for(const key in obj) {
if(obj.hasOwnProperty(key)) {
let value = obj[key];
const value = obj[key];
this.setToCache(key, value);
// let perf = /* DEBUG */false ? performance.now() : 0;
@ -69,7 +68,7 @@ export default class AppStorage<Storage extends Record<string, any>/* Storage ex
value = stringify(value);
console.log('LocalStorage set: stringify time by own stringify:', performance.now() - perf); */
if(this.useStorage) {
if(this.useStorage && !onlyLocal) {
try {
//console.log('setItem: will set', key/* , value */);
//await this.cacheStorage.delete(key); // * try to prevent memory leak in Chrome leading to 'Unexpected internal error.'
@ -85,8 +84,15 @@ export default class AppStorage<Storage extends Record<string, any>/* Storage ex
}
}
public async remove(key: keyof Storage) {
delete this.cache[key];
public async remove(key: keyof Storage, saveLocal = false) {
/* if(!this.cache.hasOwnProperty(key)) {
return;
} */
if(!saveLocal) {
delete this.cache[key];
}
if(this.useStorage) {
try {
await this.storage.delete(key as string);

6
src/scss/partials/_badge.scss
View File

@ -24,7 +24,7 @@
padding: 0 7.75px;
&.tgico {
width: 1.5rem;
// width: 1.5rem;
&:before {
font-size: 1.5rem;
@ -32,9 +32,9 @@
}
}
&.tgico {
/* &.tgico {
padding: 0;
}
} */
&-green {
background-color: $color-green;

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

@ -1276,13 +1276,16 @@ $bubble-margin: .25rem;
background-color: var(--message-time-background);
color: #fff;
text-align: center;
font-size: 34px;
line-height: 60px;
font-size: 2.125rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
@include respond-to(handhelds) {
line-height: unset;
}
.ckin__player.circle {
z-index: 1;
}
&:not(.forwarded).hide-name, &.emoji-big {

8
src/scss/partials/_chatPinned.scss
View File

@ -162,9 +162,9 @@
}
}
html.no-touch &:hover {
/* html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
} */
&-border {
height: 2rem;
@ -240,9 +240,9 @@
padding: .25rem;
border-radius: 4px;
html.no-touch &:hover {
/* html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
} */
}
}

19
src/scss/partials/_chatlist.scss
View File

@ -99,6 +99,23 @@
align-items: flex-start;
height: 27px;
}
a {
color: inherit;
}
.text-highlight {
color: #000;
}
/* img.emoji {
margin-right: .25rem;
margin-left: .25rem;
&:first-child {
margin-left: 0;
}
} */
}
li.menu-open {
@ -195,7 +212,7 @@
.user-title, .user-last-message {
i {
font-style: normal;
color: $color-blue;
//color: $color-blue;
}
}

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

@ -32,7 +32,7 @@
color: white;
@include respond-to(handhelds) {
padding: 7px 0px 9px 0px;
padding: 7px 0px 9px;
}
}
}
@ -41,18 +41,18 @@
position: relative;
&:before {
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, .5) 100%);
}
&--2:before {
background: rgba(24, 24, 24, 0.8);
background: rgba(24, 24, 24, .8);
}
}
}
.default {
border: 0 solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border: 0 solid rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
position: relative;
font-size: 0;
//overflow: hidden;
@ -80,7 +80,7 @@
top: 20px;
z-index: 1;
font-size: 24px;
color: rgba(255, 255, 255, 0.8);
color: rgba(255, 255, 255, .8);
font-style: italic;
}
@ -403,23 +403,6 @@ input[type=range] {
align-items: center;
}
.circle .circle-time {
color: #fff;
font-size: 13px;
float: left;
//margin-top: 1px;
}
.circle .circle-time-left {
position: absolute;
top: 3px;
left: 2px;
border-radius: 12px;
background-color: rgba(0, 0, 0, 0.23);
padding: 1px 7px 2px 7px;
z-index: 2;
display: flex;
align-items: center;
}
video[data-ckin="circle"] {
border-radius: 50%;
overflow: hidden;
@ -441,12 +424,30 @@ video[data-ckin="circle"] {
position: relative;
width: 200px;
height: 200px;
}
.iconVolume {
padding: 0 1px 0 3px;
display: flex;
align-items: center;
font-size: 1.25rem;
color: #fff;
.circle-time-left {
color: #fff;
position: absolute;
top: 3px;
left: 2px;
border-radius: 12px;
background-color: rgba(0, 0, 0, .23);
padding: 1px 7px 2px 7px;
height: 18px;
z-index: 2;
display: flex;
align-items: center;
.circle-time {
font-size: .75rem;
//margin-top: 1px;
}
}
.iconVolume {
padding: 0 1px 0 .25rem;
display: flex;
align-items: center;
font-size: 1rem;
}
}

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

@ -96,6 +96,7 @@
.badge {
margin-left: 5px;
//line-height: inherit !important;
}
&:not(.hide) + .scrollable {

1
src/scss/style.scss
View File

@ -489,6 +489,7 @@ hr {
.user-last-message b {
font-weight: 400;
//margin-right: .25rem;
}
.avatar-edit {