Fix sticker sets opening

Fix round video time layout
Fix round video playback

src/components/appMediaPlaybackController.ts

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

src/components/chat/bubbles.ts

@@ -2870,10 +2870,11 @@ export default class ChatBubbles {
   }
 
   public deleteEmptyDateGroups() {
-    for(let i in this.dateMessages) {
+    const mustBeCount = 1 + +!!this.stickyIntersector;
-      let dateMessage = this.dateMessages[i];
+    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);

src/components/emoticonsDropdown/index.ts

@@ -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.searchButton.classList.toggle('hide', this.tabId === 0);
-    this.deleteBtn.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)) {
+    if(active && whichChild(active) !== 1 && (!canSendStickers || !canSendGifs)) {
-      this.selectTab(0);
+      this.selectTab(0, false);
-      this.onSelectTabClick(0);
-      active.classList.remove('active');
-      children[1].classList.add('active');
     }
   };
 

src/components/sidebarRight/tabs/stickers.ts

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

src/components/wrappers.ts

@@ -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 = () => {
+    const onVideoPause = (e: Event) => {
-      //console.log('video pause 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();
   

src/lib/appManagers/appImManager.ts

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

src/lib/appManagers/appStickersManager.ts

@@ -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});
+    this.storage.set({[id]: stickerSet}, !needSave);
-    else this.storage.remove(id);
   }
 
   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 {

src/lib/mediaPlayer.ts

@@ -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') {
@@ -375,19 +373,18 @@ export default class VideoPlayer {
         this.togglePlay();
       });
 
-      video.addEventListener('play', () => {
+      const update = () => {
-        iconVolume.style.display = 'none';
+        const offset = circumference - video.currentTime / video.duration * circumference;
-        updateInterval = window.setInterval(() => {
+        circle.style.strokeDashoffset = '' + offset;
-          //elapsed += 0.02; // Increase with timer interval
+        
-          if(video.currentTime != prevTime) {
+        if(video.paused) {
-            elapsed = video.currentTime; // Update if getCurrentTime was changed
+          clearInterval(updateInterval);
-            prevTime = video.currentTime;
         }
+      };
   
-          const offset = circumference - elapsed / video.duration * circumference;
+      video.addEventListener('play', () => {
-          circle.style.strokeDashoffset = '' + offset;
+        iconVolume.style.display = 'none';
-          if(video.paused) clearInterval(updateInterval);
+        updateInterval = window.setInterval(update, 20);
-        }, 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');

src/lib/richtextprocessor.ts

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

src/lib/storage.ts

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

src/scss/partials/_badge.scss

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

src/scss/partials/_chatBubble.scss

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

src/scss/partials/_chatPinned.scss

@@ -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);
-    }
+    } */
   }
 }
 

src/scss/partials/_chatlist.scss

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

src/scss/partials/_ckin.scss

@@ -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);
+  border: 0 solid rgba(0, 0, 0, .2);
-  box-shadow: 0 0 20px rgba(0, 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;
+
+  .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 3px;
+    padding: 0 1px 0 .25rem;
     display: flex;
     align-items: center;
-  font-size: 1.25rem;
+    font-size: 1rem;
-  color: #fff;
+  }
 }

src/scss/partials/_leftSidebar.scss

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

src/scss/style.scss

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