From ddd6ae009e2cb7e70dcef69639f5761ff7355c5a Mon Sep 17 00:00:00 2001 From: morethanwords Date: Wed, 21 Oct 2020 20:02:36 +0300 Subject: [PATCH] Fix video simultaneous play Fix chat context menu on handhelds Fix chat input emojis & send button --- src/components/appMediaViewer.ts | 12 +++++ src/components/chat/contextMenu.ts | 2 +- src/components/chat/input.ts | 2 +- src/components/chat/selection.ts | 13 +++++- src/pages/pageSignIn.ts | 2 +- src/scss/partials/_chat.scss | 72 +++++++++++++++++++++--------- src/scss/partials/_chatBubble.scss | 19 +++++--- src/scss/partials/_fonts.scss | 2 +- src/scss/partials/_ico.scss | 3 +- src/scss/style.scss | 2 +- 10 files changed, 95 insertions(+), 34 deletions(-) diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index 3f65bbe2..6cd52d38 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -231,6 +231,7 @@ class AppMediaViewerBase { @@ -887,6 +888,13 @@ class AppMediaViewerBase { + if(this.tempID != tempID) { + video.pause(); + } + }); + if(isSafari) { video.autoplay = true; } @@ -915,6 +923,10 @@ class AppMediaViewerBase { + if(this.tempID != tempID) { + return; + } + const player = new VideoPlayer(video, true, media.supportsStreaming); /* div.append(video); mover.append(player.wrapper); */ diff --git a/src/components/chat/contextMenu.ts b/src/components/chat/contextMenu.ts index 8477568e..a52c09bc 100644 --- a/src/components/chat/contextMenu.ts +++ b/src/components/chat/contextMenu.ts @@ -57,7 +57,7 @@ export default class ChatContextMenu { } this.buttons.forEach(button => { - const good = bubbleContainer ? + const good = bubbleContainer || isTouchSupported ? button.verify() : button.notDirect && button.notDirect() && button.verify(); button.element.classList.toggle('hide', !good); diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index 3fbdfbd0..dc35501a 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -685,7 +685,7 @@ export class ChatInput { this.chatInput.parentElement.classList.remove('is-helper-active'); } - public setTopInfo(type: ChatInputHelperType, callerFunc: () => void, title: string, subtitle: string, input?: string, message?: any) { + public setTopInfo(type: ChatInputHelperType, callerFunc: () => void, title = '', subtitle = '', input?: string, message?: any) { if(type != 'webpage') { this.clearHelper(type); this.helperType = type; diff --git a/src/components/chat/selection.ts b/src/components/chat/selection.ts index 33c6bd37..b85463c1 100644 --- a/src/components/chat/selection.ts +++ b/src/components/chat/selection.ts @@ -109,7 +109,7 @@ export default class ChatSelection { if(!seen.has(mid)) { const isBubbleSelected = this.selectedMids.has(mid); if(selecting === undefined) { - appImManager.scrollable.container.classList.add('no-select'); + //bubblesContainer.classList.add('no-select'); selecting = !isBubbleSelected; } @@ -141,7 +141,7 @@ export default class ChatSelection { } bubblesContainer.removeEventListener('mousemove', onMouseMove); - appImManager.scrollable.container.classList.remove('no-select'); + //bubblesContainer.classList.remove('no-select'); // ! CANCEL USER SELECTION ! cancelSelection(); @@ -221,6 +221,15 @@ export default class ChatSelection { } } */ + if(!isTouchSupported) { + bubblesContainer.classList.toggle('no-select', this.isSelecting); + + if(wasSelecting) { + // ! CANCEL USER SELECTION ! + cancelSelection(); + } + } + SetTransition(bubblesContainer, 'is-selecting', !!this.selectedMids.size, 200, () => { if(!this.isSelecting) { this.selectionContainer.remove(); diff --git a/src/pages/pageSignIn.ts b/src/pages/pageSignIn.ts index 243e053a..b6623056 100644 --- a/src/pages/pageSignIn.ts +++ b/src/pages/pageSignIn.ts @@ -238,7 +238,7 @@ let onFirstMount = () => { _: 'codeSettings' // that's how we sending Type } //lang_code: navigator.language || 'en' - }).then((code: any) => { + }).then((code) => { //console.log('got code', code); pageAuthCode.mount(Object.assign(code, {phone_number: phone_number})); diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 541a1116..234adf4c 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -263,7 +263,7 @@ $chat-helper-size: 39px; .chat-input-container { --padding-horizontal: #{$chat-padding-handhelds}; display: flex; - align-items: center; + align-items: flex-end; justify-content: space-between; max-width: var(--messages-container-width); margin: 0 auto; @@ -303,8 +303,7 @@ $chat-helper-size: 39px; background: none; border: none; width: 100%; - font-size: 16px; - padding: 10px 9px; + padding: 9px; /* height: 100%; */ max-height: 30rem; overflow-y: none; @@ -312,12 +311,17 @@ $chat-helper-size: 39px; border: none; outline: none; cursor: text; - } - - [contenteditable=true]:empty:before { - content: attr(data-placeholder); - color: #a2acb4; - display: block; /* For Firefox By Ariel Flesler */ + + /* span.emoji { + font-size: .95rem; + } */ + + //[contenteditable=true]:empty:before { + &:empty:before { + content: attr(data-placeholder); + color: #a2acb4; + display: block; /* For Firefox By Ariel Flesler */ + } } .toggle-emoticons { @@ -352,6 +356,8 @@ $chat-helper-size: 39px; position: absolute; right: var(--padding-horizontal); z-index: 2; + bottom: 0; + padding-bottom: inherit; } #btn-send { @@ -474,7 +480,9 @@ $chat-helper-size: 39px; #bubbles.is-selecting ~ & { .new-message-wrapper { - transition: .1s opacity; + html:not(.is-safari) & { + transition: .1s opacity; + } } .selection-container { @@ -482,12 +490,18 @@ $chat-helper-size: 39px; } #btn-send { - transition: .2s transform; + html:not(.is-safari) & { + transition: .2s transform; + } } .input-message { html:not(.is-safari) & { transition: width .2s, border-bottom-right-radius .1s, transform .2s; + + &:after { + transition: transform .1s; + } } html.is-safari & { @@ -495,10 +509,6 @@ $chat-helper-size: 39px; } //will-change: transform; - - &:after { - transition: transform .1s; - } } } @@ -508,7 +518,13 @@ $chat-helper-size: 39px; } .selection-container { - animation: fade-in-opacity .1s .1s forwards; + html:not(.is-safari) & { + animation: fade-in-opacity .1s .1s forwards; + } + + html.is-safari & { + opacity: 1; + } } .input-message { @@ -557,13 +573,20 @@ $chat-helper-size: 39px; } } + + #bubbles.is-selecting.backwards ~ & { .new-message-wrapper { - transition-delay: .1s; + html:not(.is-safari) & { + transition-delay: .1s; + } + } .selection-container { - animation: fade-in-backwards-opacity .1s forwards; + html:not(.is-safari) & { + animation: fade-in-backwards-opacity .1s forwards; + } } } } @@ -1020,12 +1043,17 @@ $chat-helper-size: 39px; margin-left: .5rem; min-height: 35px; } + + span.emoji { + font-size: .8rem; + } } .new-message-wrapper { //padding: 4.5px 0; //padding-bottom: 4.5px; align-items: flex-end; + overflow: hidden; .btn-icon:before { vertical-align: bottom; @@ -1123,8 +1151,7 @@ $chat-helper-size: 39px; } } - .emoji { - font-size: 24px; + img.emoji { height: 24px; width: 24px; } @@ -1335,6 +1362,11 @@ $chat-helper-size: 39px; &.is-scrolling .is-sticky { opacity: 0.99999; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху + + html.is-safari & { + transform: translateY(calc(var(--translateY) * -1)); + //transition: transform var(--layer-transition); + } } } diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index cdef03fa..8b776785 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -1171,14 +1171,21 @@ $bubble-margin: .25rem; } } -.bubble-audio .time { - width: unset !important; - padding-left: 14px !important; +.bubble-audio { + .message { + // ! SAFARI FIX BLINK ON SELECTION TRANSFORM ! + overflow: visible !important; + } - @include respond-to(handhelds) { - padding-left: 0px !important; + .time { + width: unset !important; + padding-left: 14px !important; + + @include respond-to(handhelds) { + padding-left: 0px !important; + } } -} +} .bubble.is-in { .bubble__container { diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss index 143f8078..f4385281 100644 --- a/src/scss/partials/_fonts.scss +++ b/src/scss/partials/_fonts.scss @@ -190,7 +190,7 @@ .tgico-eye1:before { content: "\e933"; } -.tgico-FullScreen:before { +.tgico-fullscreen:before { content: "\e934"; } .tgico-smallscreen:before { diff --git a/src/scss/partials/_ico.scss b/src/scss/partials/_ico.scss index d7078d46..5ce2becb 100644 --- a/src/scss/partials/_ico.scss +++ b/src/scss/partials/_ico.scss @@ -8,6 +8,7 @@ $tgico-font-path: "assets/fonts" !default; `.tgico-select:before { content: "\e900"; }` +.toLowerCase() .replace(/([\s])|(_svg)|(1x)/g, '') .replace(/\.(.+?):before\{content:"(.+?);\}/g, `$$$1: "\\$2;\n`); */ @@ -64,7 +65,7 @@ $tgico-checkboxblock: "\e930"; $tgico-checkboxon: "\e931"; $tgico-eye2: "\e932"; $tgico-eye1: "\e933"; -$tgico-FullScreen: "\e934"; +$tgico-fullscreen: "\e934"; $tgico-smallscreen: "\e935"; $tgico-flag: "\e936"; $tgico-lamp: "\e937"; diff --git a/src/scss/style.scss b/src/scss/style.scss index c5b8881f..0c9a9050 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -343,7 +343,7 @@ input, textarea { bottom: 20px; right: 20px; //transition: .2s ease; - transition: var(--btn-corner-transition); + transition: var(--btn-corner-transition) !important; transform: translate3d(0, var(--translateY), 0); z-index: 3;