Fix video simultaneous play

Fix chat context menu on handhelds
Fix chat input emojis & send button

src/components/appMediaViewer.ts

@@ -231,6 +231,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     this.loadedAllMediaUp = this.loadedAllMediaDown = false;
     this.loadMediaPromiseUp = this.loadMediaPromiseDown = null;
     this.setMoverPromise = null;
+    this.tempID = -1;
 
     /* if(appSidebarRight.historyTabIDs.slice(-1)[0] == AppSidebarRight.SLIDERITEMSIDS.forward) {
       promise.then(() => {
@@ -887,6 +888,13 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
 
         video.setAttribute('playsinline', '');
 
+        // * fix for playing video if viewer is closed (https://contest.com/javascript-web-bonus/entry1425#issue11629)
+        video.addEventListener('timeupdate', () => {
+          if(this.tempID != tempID) {
+            video.pause();
+          }
+        });
+
         if(isSafari) {
           video.autoplay = true;
         }
@@ -915,6 +923,10 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
             appMediaPlaybackController.willBePlayedMedia = null;
             
             Promise.all([canPlayThrough, onAnimationEnd]).then(() => {
+              if(this.tempID != tempID) {
+                return;
+              }
+
               const player = new VideoPlayer(video, true, media.supportsStreaming);
               /* div.append(video);
               mover.append(player.wrapper); */

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

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;

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();

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

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: 9px;
-		padding: 10px 9px;
 		/* height: 100%; */
 		max-height: 30rem;
 		overflow-y: none;
@@ -312,12 +311,17 @@ $chat-helper-size: 39px;
 		border: none;
 		outline: none;
 		cursor: text;
-	}
+
-	
+		/* span.emoji {
-	[contenteditable=true]:empty:before {
+			font-size: .95rem;
-		content: attr(data-placeholder);
+		} */
-		color: #a2acb4;
+
-		display: block; /* For Firefox By Ariel Flesler */
+		//[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 {
+	img.emoji {
-		font-size: 24px;
 		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); 
+		}
 	}
 }
 

src/scss/partials/_chatBubble.scss

@@ -1171,14 +1171,21 @@ $bubble-margin: .25rem;
   }
 }
 
-.bubble-audio .time {
+.bubble-audio {
-  width: unset !important;
+  .message {
-  padding-left: 14px !important;
+    // ! SAFARI FIX BLINK ON SELECTION TRANSFORM !
+    overflow: visible !important;
+  }
 
-  @include respond-to(handhelds) {
+  .time {
-    padding-left: 0px !important;
+    width: unset !important;
+    padding-left: 14px !important;
+  
+    @include respond-to(handhelds) {
+      padding-left: 0px !important;
+    }
   }
-}
+} 
 
 .bubble.is-in {
   .bubble__container {

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 {

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

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;