Fixes for floating reply

Fix round video size on mobiles

src/components/chat/bubbles.ts

@@ -2467,7 +2467,9 @@ export default class ChatBubbles {
 
     const isOut = our && (!message.fwd_from || this.peerId !== rootScope.myId);
     let nameContainer: HTMLElement = bubbleContainer;
-    
+
+    let isStandaloneMedia = false;
+
     // media
     if(messageMedia/*  && messageMedia._ === 'messageMediaPhoto' */) {
       let attachmentDiv = document.createElement('div');
@@ -2488,7 +2490,11 @@ export default class ChatBubbles {
             canHaveTail = false;
           }
           
-          bubble.classList.add('hide-name', 'photo');
+          if(!message.viaBotId) {
+            bubble.classList.add('hide-name');  
+          }
+
+          bubble.classList.add('photo');
           
           const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id];
           if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) {
@@ -2671,13 +2677,14 @@ export default class ChatBubbles {
         }
         
         case 'messageMediaDocument': {
-          let doc = messageMedia.document;
+          const doc = messageMedia.document;
 
           //this.log('messageMediaDocument', doc, bubble);
           
           if(doc.sticker/*  && doc.size <= 1e6 */) {
             bubble.classList.add('sticker');
             canHaveTail = false;
+            isStandaloneMedia = true;
             
             if(doc.animated) {
               bubble.classList.add('sticker-animated');
@@ -2703,16 +2710,23 @@ export default class ChatBubbles {
               withThumb: true,
               loadPromises
             });
-
-            break;
           } else if(doc.type === 'video' || doc.type === 'gif' || doc.type === 'round'/*  && doc.size <= 20e6 */) {
             //this.log('never get free 2', doc);
 
-            if(doc.type === 'round' || !messageMessage) {
+            const isRound = doc.type === 'round';
+            if(isRound) {
+              isStandaloneMedia = true;
+            }
+
+            if(isRound || !messageMessage) {
               canHaveTail = false;
             }
+
+            if(!message.viaBotId) {
+              bubble.classList.add('hide-name');
+            }
             
-            bubble.classList.add('hide-name', doc.type === 'round' ? 'round' : 'video');
+            bubble.classList.add(isRound ? 'round' : 'video');
             const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id];
             if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) {
               bubble.classList.add('is-album', 'is-grouped');
@@ -2728,7 +2742,7 @@ export default class ChatBubbles {
                 noAutoDownload: this.chat.noAutoDownloadMedia,
               });
             } else {
-              const withTail = !isAndroid && !isApple && doc.type !== 'round' && canHaveTail && !withReplies && USE_MEDIA_TAILS;
+              const withTail = !isAndroid && !isApple && !isRound && canHaveTail && !withReplies && USE_MEDIA_TAILS;
               if(withTail) bubble.classList.add('with-media-tail');
               wrapVideo({
                 doc, 
@@ -2745,8 +2759,6 @@ export default class ChatBubbles {
                 noAutoDownload: this.chat.noAutoDownloadMedia,
               });
             }
-            
-            break;
           } else {
             const newNameContainer = wrapGroupedDocuments({
               albumMustBeRenderedFull,
@@ -2769,8 +2781,6 @@ export default class ChatBubbles {
             bubble.classList.remove('is-message-empty');
             messageDiv.classList.add((!(['photo', 'pdf'] as MyDocument['type'][]).includes(doc.type) ? doc.type || 'document' : 'document') + '-message');
             processingWebPage = true;
-            
-            break;
           }
 
           break;
@@ -2841,6 +2851,10 @@ export default class ChatBubbles {
       } */
     }
 
+    if(isStandaloneMedia) {
+      bubble.classList.add('just-media');
+    }
+
     if(this.chat.selection.isSelecting) {
       this.chat.selection.toggleBubbleCheckbox(bubble, true);
     }
@@ -2849,7 +2863,7 @@ export default class ChatBubbles {
     
     const needName = ((peerId < 0 && (peerId !== message.fromId || our)) && message.fromId !== rootScope.myId) || message.viaBotId;
     if(needName || message.fwd_from || message.reply_to_mid) { // chat
-      let title: HTMLSpanElement;
+      let title: HTMLElement | DocumentFragment;
 
       const isForwardFromChannel = message.from_id && message.from_id._ === 'peerChannel' && message.fromId === message.fwdFromId;
       
@@ -2857,6 +2871,7 @@ export default class ChatBubbles {
       if(message.viaBotId) {
         title = document.createElement('span');
         title.innerText = '@' + this.appUsersManager.getUser(message.viaBotId).username;
+        title.classList.add('peer-title');
       } else if(isHidden) {
         ///////this.log('message to render hidden', message);
         title = document.createElement('span');
@@ -2871,15 +2886,15 @@ export default class ChatBubbles {
       //this.log(title);
       
       if(message.viaBotId) {
-        if(!bubble.classList.contains('sticker')) {
+        //if(!bubble.classList.contains('sticker') || true) {
           let nameDiv = document.createElement('div');
           nameDiv.classList.add('name', 'is-via');
           nameDiv.dataset.peerId = message.viaBotId;
           nameDiv.append(i18n('ViaBot'), ' ', title);
           nameContainer.append(nameDiv);
-        } else {
-          bubble.classList.add('hide-name');
-        }
+        // } else {
+        //   bubble.classList.add('hide-name');
+        // }
       } else if((message.fwdFromId || message.fwd_from)) {
         if(this.peerId !== rootScope.myId && !isForwardFromChannel) {
           bubble.classList.add('forwarded');
@@ -2889,17 +2904,23 @@ export default class ChatBubbles {
           savedFrom = message.savedFrom;
         }
         
-        if(!bubble.classList.contains('sticker')) {
+        //if(!bubble.classList.contains('sticker') || true) {
           let nameDiv = document.createElement('div');
           nameDiv.classList.add('name');
           nameDiv.dataset.peerId = message.fwdFromId;
 
-          if(this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || isForwardFromChannel) {
+          if((this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || isForwardFromChannel) && !isStandaloneMedia) {
             nameDiv.style.color = this.appPeersManager.getPeerColorById(message.fwdFromId, false);
             nameDiv.append(title);
           } else {
             /* const fromTitle = message.fromId === this.myID || appPeersManager.isBroadcast(message.fwdFromId || message.fromId) ? '' : `<div class="name" data-peer-id="${message.fromId}" style="color: ${appPeersManager.getPeerColorByID(message.fromId, false)};">${appPeersManager.getPeerTitle(message.fromId)}</div>`;
             nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */
+            if(isStandaloneMedia) {
+              const fragment = document.createDocumentFragment();
+              fragment.append(document.createElement('br'));
+              fragment.append(title);
+              title = fragment;
+            }
             nameDiv.append(i18n('ForwardedFrom', [title]));
 
             if(savedFrom) {
@@ -2908,9 +2929,9 @@ export default class ChatBubbles {
           }
           
           nameContainer.append(nameDiv);
-        }
+        //}
       } else {
-        if(!bubble.classList.contains('sticker') && needName) {
+        if(!isStandaloneMedia && needName) {
           let nameDiv = document.createElement('div');
           nameDiv.classList.add('name');
           nameDiv.append(title);

src/components/wrappers.ts

@@ -9,7 +9,7 @@ import { getEmojiToneIndex } from '../vendor/emoji';
 import { readBlobAsText } from '../helpers/blob';
 import { deferredPromise } from '../helpers/cancellablePromise';
 import { formatDateAccordingToToday, months } from '../helpers/date';
-import mediaSizes from '../helpers/mediaSizes';
+import mediaSizes, { ScreenSize } from '../helpers/mediaSizes';
 import { formatBytes } from '../helpers/number';
 import { isSafari } from '../helpers/userAgent';
 import { PhotoSize, StickerSet } from '../layer';
@@ -47,6 +47,29 @@ import blur from '../helpers/blur';
 
 const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB
 
+let roundVideoCircumference = 0;
+mediaSizes.addEventListener('changeScreen', (from, to) => {
+  if(to === ScreenSize.mobile || from === ScreenSize.mobile) {
+    const elements = Array.from(document.querySelectorAll('.media-round .progress-ring')) as SVGSVGElement[];
+    const width = mediaSizes.active.round.width;
+    const halfSize = width / 2;
+    const radius = halfSize - 7;
+    roundVideoCircumference = 2 * Math.PI * radius;
+    elements.forEach(element => {
+      element.setAttributeNS(null, 'width', '' + width);
+      element.setAttributeNS(null, 'height', '' + width);
+
+      const circle = element.firstElementChild as SVGCircleElement;
+      circle.setAttributeNS(null, 'cx', '' + halfSize);
+      circle.setAttributeNS(null, 'cy', '' + halfSize);
+      circle.setAttributeNS(null, 'r', '' + radius);
+
+      circle.style.strokeDasharray = roundVideoCircumference + ' ' + roundVideoCircumference;
+      circle.style.strokeDashoffset = '' + roundVideoCircumference;
+    });
+  }
+});
+
 export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTail, isOut, middleware, lazyLoadQueue, noInfo, group, onlyPreview, withoutPreloader, loadPromises, noPlayButton, noAutoDownload, size}: {
   doc: MyDocument, 
   container?: HTMLElement, 
@@ -145,15 +168,20 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     const divRound = document.createElement('div');
     divRound.classList.add('media-round', 'z-depth-1');
 
-    divRound.innerHTML = `<svg class="progress-ring" width="280px" height="280px" style="transform: rotate(-90deg);">
-      <circle class="progress-ring__circle" stroke="white" stroke-opacity="0.3" stroke-width="3.5" cx="140" cy="140" r="133" fill="transparent"/>
+    const size = mediaSizes.active.round;
+    const halfSize = size.width / 2;
+    const strokeWidth = 3.5;
+    const radius = halfSize - (strokeWidth * 2);
+    divRound.innerHTML = `<svg class="progress-ring" width="${size.width}" height="${size.width}" style="transform: rotate(-90deg);">
+      <circle class="progress-ring__circle" stroke="white" stroke-opacity="0.3" stroke-width="${strokeWidth}" cx="${halfSize}" cy="${halfSize}" r="${radius}" fill="transparent"/>
     </svg>`;
 
-    const circle = divRound.querySelector('.progress-ring__circle') as SVGCircleElement;
-    const radius = circle.r.baseVal.value;
-    const circumference = 2 * Math.PI * radius;
-    circle.style.strokeDasharray = circumference + ' ' + circumference;
-    circle.style.strokeDashoffset = '' + circumference;
+    const circle = divRound.firstElementChild.firstElementChild as SVGCircleElement;
+    if(!roundVideoCircumference) {
+      roundVideoCircumference = 2 * Math.PI * radius;
+    }
+    circle.style.strokeDasharray = roundVideoCircumference + ' ' + roundVideoCircumference;
+    circle.style.strokeDashoffset = '' + roundVideoCircumference;
     
     spanTime.classList.add('tgico');
 
@@ -185,7 +213,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     const onFrame = () => {
       ctx.drawImage(globalVideo, 0, 0);
 
-      const offset = circumference - globalVideo.currentTime / globalVideo.duration * circumference;
+      const offset = roundVideoCircumference - globalVideo.currentTime / globalVideo.duration * roundVideoCircumference;
       circle.style.strokeDashoffset = '' + offset;
 
       return !globalVideo.paused;

src/config/app.ts

@@ -16,7 +16,7 @@ export const MAIN_DOMAIN = 'web.telegram.org';
 const App = {
   id: 1025907,
   hash: '452b0359b988148995f22ff0f4229750',
-  version: '0.8.1',
+  version: '0.8.2',
   langPackVersion: '0.3.3',
   langPack: 'macos',
   langPackCode: 'en',

src/helpers/mediaSizes.ts

@@ -38,7 +38,8 @@ type MediaTypeSizes = {
   animatedSticker: MediaSize,
   staticSticker: MediaSize,
   emojiSticker: MediaSize,
-  poll: MediaSize
+  poll: MediaSize,
+  round: MediaSize
 };
 
 export enum ScreenSize {
@@ -70,7 +71,8 @@ class MediaSizes extends EventListenerBase<{
       animatedSticker: makeMediaSize(180, 180),
       staticSticker: makeMediaSize(180, 180),
       emojiSticker: makeMediaSize(112, 112),
-      poll: makeMediaSize(240, 0)
+      poll: makeMediaSize(240, 0),
+      round: makeMediaSize(200, 200)
     },
     desktop: {
       regular: makeMediaSize(420, 340),
@@ -80,7 +82,8 @@ class MediaSizes extends EventListenerBase<{
       animatedSticker: makeMediaSize(200, 200),
       staticSticker: makeMediaSize(200, 200),
       emojiSticker: makeMediaSize(112, 112),
-      poll: makeMediaSize(330, 0)
+      poll: makeMediaSize(330, 0),
+      round: makeMediaSize(280, 280)
     }
   };
 
@@ -128,7 +131,7 @@ class MediaSizes extends EventListenerBase<{
       //console.log('changeScreen', this.activeScreen, activeScreen);
 
       if(wasScreen !== undefined) {
-        this.dispatchEvent('changeScreen', this.activeScreen, activeScreen);
+        this.dispatchEvent('changeScreen', wasScreen, activeScreen);
       }
     }
 

src/scss/partials/_chatBubble.scss

@@ -54,7 +54,9 @@ $bubble-margin: .25rem;
   flex-wrap: wrap;
   //flex-direction: column; // fix 'Unread messages', still need to refactor it
 
-  &.is-highlighted, &.is-selected, /* .bubbles.is-selecting */ & {
+  &.is-highlighted, 
+  &.is-selected, 
+  /* .bubbles.is-selecting */ & {
     &:after {
       position: absolute;
       left: -50%;
@@ -141,13 +143,15 @@ $bubble-margin: .25rem;
   }
 
   //&.is-highlighted:after, &.is-first-unread:before, &.is-selected:after {
-  &:after, &:before {
+  &:after, 
+  &:before {
     width: 200%;
     display: block;
   }
 
   &.is-multiple-documents {
-    &:before, &:after {
+    &:before, 
+    &:after {
       display: none;
     }
 
@@ -206,14 +210,18 @@ $bubble-margin: .25rem;
   }
 
   .bubbles.is-selecting &:not(.is-album) {
-    .audio, .document, .attachment, poll-element {
+    .audio, 
+    .document, 
+    .attachment, 
+    poll-element {
       pointer-events: none !important;
     }
   }
 
   // ! hide context menu for media on android
   .bubbles.is-selecting & {
-    img, video {
+    img, 
+    video {
       pointer-events: none;
     }
   }
@@ -378,7 +386,8 @@ $bubble-margin: .25rem;
 
   &:not(.forwarded) {
     &:not(.is-group-first) {
-      .bubble-content > .name, .document-wrapper > .name {
+      .bubble-content > .name, 
+      .document-wrapper > .name {
         display: none;
       }
 
@@ -402,7 +411,8 @@ $bubble-margin: .25rem;
     opacity: 1;
   } */
 
-  &.photo, &.video {
+  &.photo, 
+  &.video {
     .bubble-content {
       width: min-content;
     }
@@ -451,8 +461,6 @@ $bubble-margin: .25rem;
     font-size: 0;
 
     .bubble-content {
-      background: none!important;
-      box-shadow: none;
       line-height: 1;
       user-select: none;
     }
@@ -502,7 +510,7 @@ $bubble-margin: .25rem;
     }
   }
   
-  &.sticker, &.round, &.emoji-big {
+  &.just-media {
     .bubble-content {
       cursor: pointer;
       background: none!important;
@@ -548,7 +556,8 @@ $bubble-margin: .25rem;
       width: var(--round-video-size) !important;
       height: var(--round-video-size) !important;
 
-      .media-photo, .media-video {
+      .media-photo, 
+      .media-video {
         border-radius: 50%;
         pointer-events: none;
       }
@@ -578,7 +587,8 @@ $bubble-margin: .25rem;
     position: relative;
     cursor: pointer;
     
-    img, video {
+    img, 
+    video {
       max-width: 100%;
     }
 
@@ -601,7 +611,8 @@ $bubble-margin: .25rem;
       }
     }
 
-    .download, .preloader-container {
+    .download, 
+    .preloader-container {
       & ~ .video-play {
         display: none;
       }
@@ -637,7 +648,8 @@ $bubble-margin: .25rem;
     }
   }
 
-  img:not(.emoji), video {
+  img:not(.emoji), 
+  video {
     /* object-fit: contain; */
     object-fit: cover;
     width: 100%;
@@ -645,7 +657,8 @@ $bubble-margin: .25rem;
   }
 
   html.is-safari &:not(.round) {
-    img:not(.emoji), video {
+    img:not(.emoji), 
+    video {
       border-radius: inherit;
     }
   }
@@ -916,7 +929,8 @@ $bubble-margin: .25rem;
     }
   }
   
-  .web, .reply {
+  .web, 
+  .reply {
     font-size: var(--messages-secondary-text-size);
   }
 
@@ -971,42 +985,77 @@ $bubble-margin: .25rem;
       max-width: calc(100% - 1.5rem);
       height: auto;
       min-height: 32px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
   }
 
-  &.is-reply {
-    &.emoji-big, &.sticker {
-      .reply {
-        padding: 10px;
-        border-radius: 12px;
-        background-color: var(--message-background-color);
-        border: 1px solid var(--border-color);
-        max-width: 300px;
-        height: 54px;
-        max-height: 54px;
-        white-space: nowrap;
-        position: absolute;
-        top: 0;
-        margin-bottom: 0;
+  &.just-media {
+    .reply, 
+    .name {
+      padding: 10px;
+      border-radius: 12px;
+      position: absolute;
+      top: 0;
+      margin-bottom: 0;
+      background-color: var(--message-highlightning-color);
+      white-space: nowrap;
+    }
 
-        @include respond-to(handhelds) {
-          padding: 8px 6px 8px 8px;
-          max-width: 94px;
-        }
+    .name {
+      color: #fff !important;
+      padding: .3125rem .625rem;
+      line-height: var(--line-height);
 
-        .reply-content {
-          margin-top: 0;
-        }
+      .peer-title {
+        font-weight: 400 !important;
+        pointer-events: none;
       }
     }
 
-    .reply-content {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
+    .reply {
+      max-width: 300px;
+      height: 54px;
+      max-height: 54px;
+
+      @include respond-to(handhelds) {
+        padding: 8px 6px 8px 8px;
+        max-width: 94px;
+      }
+
+      &-content {
+        margin-top: 0;
+      }
+
+      &-title, 
+      i {
+        color: #fff;
+      }
+
+      &-border {
+        background: #fff;
+      }
     }
   }
-  
+
+  /* &.photo, &.video {
+    &:not(.hide-name) {
+      .attachment {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  } */
+
+  &.forwarded .attachment,
+  &.is-reply .attachment,
+  &:not(.hide-name).is-message-empty .attachment/* ,
+  &:not(.hide-name):not(.sticker) .attachment */ {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
   .message {
     font-size: var(--messages-text-size);
     padding: 0 .5rem .375rem .625rem;
@@ -1023,7 +1072,8 @@ $bubble-margin: .25rem;
   }
 
   @include respond-to(handhelds) {
-    .document, .audio {
+    .document, 
+    .audio {
       &-ico, &-download {
         height: 2.25rem;
         width: 2.25rem;
@@ -1071,7 +1121,8 @@ $bubble-margin: .25rem;
     }
   }
 
-  .message.audio-message, .message.voice-message {
+  .message.audio-message, 
+  .message.voice-message {
     padding: 8px !important;
     //padding: 4px 6px 4px 8px !important;
   }
@@ -1335,7 +1386,11 @@ $bubble-margin: .25rem;
   }
 
   .message {
-    &.document-message, &.audio-message, &.voice-message, &.poll-message, &.contact-message {
+    &.document-message, 
+    &.audio-message, 
+    &.voice-message, 
+    &.poll-message, 
+    &.contact-message {
       .time {
         position: absolute;
         right: 0;
@@ -1512,7 +1567,8 @@ $bubble-margin: .25rem;
     z-index: 1;
   }
 
-  &:not(.forwarded).hide-name, &.emoji-big {
+  &:not(.forwarded).hide-name, 
+  &.emoji-big {
     .name {
       display: none;
     }
@@ -1523,7 +1579,8 @@ $bubble-margin: .25rem;
     user-select: none;
   }
   
-  &-content > .name, .document-wrapper > .name {
+  &-content > .name, 
+  .document-wrapper > .name {
     /* padding: .2675rem 9px 0 9px; */
     /* padding: .32rem 9px 0 9px; */
     padding: 5px 9px 0 9px;
@@ -1544,7 +1601,8 @@ $bubble-margin: .25rem;
   }
   
   &:not(.webpage) {
-    &.photo, &.video {
+    &.photo, 
+    &.video {
       .bubble-content > .name {
         //padding-bottom: .2675rem;
         padding-bottom: 6px;
@@ -1567,7 +1625,8 @@ $bubble-margin: .25rem;
   }
 
   &:not(.sticker):not(.emoji-big) {
-    &.hide-name, &:not(.is-group-first)/* , &.is-out */ {
+    &.hide-name, 
+    &:not(.is-group-first)/* , &.is-out */ {
       .reply {
         margin-top: 6px;
       }
@@ -1594,7 +1653,8 @@ $bubble-margin: .25rem;
     transform: translateY(1px);
   }
 
-  &.photo, &.video {
+  &.photo, 
+  &.video {
     &.is-message-empty.is-group-last:not(.with-replies) {
       //.bubble-content:after {
       .bubble-tail {
@@ -1619,7 +1679,8 @@ $bubble-margin: .25rem;
     border-radius: inherit;
   }
 
-  audio-element, poll-element {
+  audio-element, 
+  poll-element {
     white-space: normal; // * fix due to .message white-space prewrap
   }
 
@@ -1669,7 +1730,8 @@ $bubble-margin: .25rem;
       color: var(--primary-color);
       min-width: 15rem;
   
-      .tgico-comments, .tgico-next {
+      .tgico-comments, 
+      .tgico-next {
         font-size: 1.4375rem;
       }
   
@@ -1834,7 +1896,8 @@ $bubble-margin: .25rem;
       color: #fff;
     }
 
-    a, .peer-title {
+    a, 
+    .peer-title {
       &:hover {
         text-decoration: underline;
       }
@@ -1853,20 +1916,23 @@ $bubble-margin: .25rem;
 
 .bubble.is-in {
   .bubble-content {
-    &, .poll-footer-button {
+    &, 
+    .poll-footer-button {
       border-radius: 6px 12px 12px 6px;
     }
   }
     
   &.is-group-first {
-    .bubble-content, .poll-footer-button {
+    .bubble-content, 
+    .poll-footer-button {
       border-top-left-radius: 12px;
     }
   }
 
   &.is-group-last {
     &.can-have-tail {
-      .bubble-content, .poll-footer-button {
+      .bubble-content, 
+      .poll-footer-button {
         border-bottom-left-radius: 0;
       }
 
@@ -1881,29 +1947,19 @@ $bubble-margin: .25rem;
     }
 
     &:not(.can-have-tail) {
-      .bubble-content, .poll-footer-button {
+      .bubble-content, 
+      .poll-footer-button {
         border-bottom-left-radius: 12px;
       }
     }
   }
 
-  &.forwarded .attachment,
-  &.is-reply .attachment,
-  &:not(.hide-name).is-message-empty .attachment/* ,
-  &:not(.hide-name):not(.sticker) .attachment */ {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
+  &.just-media {
+    .reply, .name {
+      left: calc(100% + 10px);
 
-  &.is-reply {
-    &.emoji-big, &.sticker {
-      .reply {
-        left: calc(100% + 10px);
-        background-color: var(--message-background-color);
-
-        @include respond-to(handhelds) {
-          left: calc(100% + 1px);
-        }
+      @include respond-to(handhelds) {
+        left: calc(100% + 1px);
       }
     }
   }
@@ -1944,7 +2000,9 @@ $bubble-margin: .25rem;
     }
   }
 
-  .audio-subtitle, .contact-number, .audio-time {
+  .audio-subtitle, 
+  .contact-number, 
+  .audio-time {
     color: var(--secondary-text-color) !important;
   }
 
@@ -1965,7 +2023,8 @@ $bubble-margin: .25rem;
   --link-color: var(--message-out-link-color);
 
   .bubble-content {
-    &, .poll-footer-button {
+    &, 
+    .poll-footer-button {
       border-radius: 12px 6px 6px 12px;
     }
 
@@ -2006,14 +2065,16 @@ $bubble-margin: .25rem;
   } */
     
   &.is-group-first {
-    .bubble-content, .poll-footer-button {
+    .bubble-content, 
+    .poll-footer-button {
       border-top-right-radius: 12px;
     }
   }
     
   &.is-group-last {
     &.can-have-tail {
-      .bubble-content, .poll-footer-button {
+      .bubble-content, 
+      .poll-footer-button {
         border-bottom-right-radius: 0;
       }
 
@@ -2029,22 +2090,28 @@ $bubble-margin: .25rem;
     }
 
     &:not(.can-have-tail) {
-      .bubble-content, .poll-footer-button {
+      .bubble-content, 
+      .poll-footer-button {
         border-bottom-right-radius: 12px;
       }
     }
   }
-    
-  &.forwarded .attachment,
-  &.is-reply .attachment {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+
+  &.just-media {
+    .reply, .name {
+      right: calc(100% + 10px);
+    }
   }
 
-  &.is-reply {
-    &.emoji-big, &.sticker {
-      .web, .reply {
-        right: calc(100% + 10px);
+  &:not(.just-media) {
+    .reply {
+      &-border {
+        background-color: var(--message-out-primary-color);
+      }
+
+      &-title,
+      i {
+        color: var(--message-out-primary-color);
       }
     }
   }
@@ -2057,12 +2124,11 @@ $bubble-margin: .25rem;
     }
   }
 
-  .reply-border, 
   .quote:before {
     background-color: var(--message-out-primary-color);
   }
 
-  .quote .webpage-name, .reply-title, .reply i {
+  .quote .webpage-name {
     color: var(--message-out-primary-color);
   }
   
@@ -2075,7 +2141,8 @@ $bubble-margin: .25rem;
       bottom: 4px;
     }
 
-    &:after, .inner:after {
+    &:after, 
+    .inner:after {
       font-size: 19px;
       //vertical-align: middle;
       margin-left: 1px;
@@ -2099,19 +2166,22 @@ $bubble-margin: .25rem;
   }
   
   &.is-read {
-    .time:after, .time .inner:after {
+    .time:after, 
+    .time .inner:after {
       content: $tgico-checks;
     }
   }
   
   &.is-sent {
-    .time:after, .time .inner:after {
+    .time:after, 
+    .time .inner:after {
       content: $tgico-check;
     }
   }
 
   &.is-sending {
-    .time:after, .time .inner:after {
+    .time:after, 
+    .time .inner:after {
       content: $tgico-sending;
     }
   }
@@ -2136,11 +2206,13 @@ $bubble-margin: .25rem;
       }
     }
 
-    &-time, &-subtitle {
+    &-time, 
+    &-subtitle {
       color: var(--message-out-status-color);
     }
 
-    &-toggle, &-download {
+    &-toggle, 
+    &-download {
       background-color: var(--message-out-primary-color);
     }
 
@@ -2185,13 +2257,15 @@ $bubble-margin: .25rem;
     }
   }
 
-  .contact-number, .document-size {
+  .contact-number, 
+  .document-size {
     color: var(--message-out-status-color);
   }
 
   poll-element {
     .poll {
-      &-desc, &-votes-count {
+      &-desc, 
+      &-votes-count {
         color: var(--message-out-primary-color);
       }
 
@@ -2211,7 +2285,8 @@ $bubble-margin: .25rem;
         }
       }
 
-      &-footer-button, &-hint {
+      &-footer-button, 
+      &-hint {
         color: var(--message-out-primary-color);
       }
     }
@@ -2234,7 +2309,8 @@ $bubble-margin: .25rem;
     .progress-line {
       --color: var(--message-out-primary-color);
 
-      &:before, &__loaded {
+      &:before, 
+      &__loaded {
         background-color: var(--message-out-primary-color);
       }
     }

src/scss/style.scss

@@ -99,6 +99,7 @@ $chat-input-inner-padding-handhelds: .25rem;
   @include respond-to(handhelds) {
     --right-column-width: 100vw;
     --esg-sticker-size: 68px;
+    --round-video-size: 200px;
 
     --chat-input-size: #{$chat-input-handhelds-size};
     --chat-input-padding: #{$chat-padding-handhelds};