Browse Source

Added 'choosing a sticker' typing

master
morethanwords 3 years ago
parent
commit
0371b59768
  1. 5
      src/components/chat/stickersHelper.ts
  2. 16
      src/components/emoticonsDropdown/tabs/stickers.ts
  3. 3
      src/lang.ts
  4. 45
      src/lib/appManagers/appImManager.ts
  5. 3
      src/lib/rootScope.ts
  6. 94
      src/scss/partials/_peerTyping.scss

5
src/components/chat/stickersHelper.ts

@ -8,6 +8,7 @@ import mediaSizes from "../../helpers/mediaSizes";
import { MyDocument } from "../../lib/appManagers/appDocsManager"; import { MyDocument } from "../../lib/appManagers/appDocsManager";
import { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager"; import { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager";
import appStickersManager from "../../lib/appManagers/appStickersManager"; import appStickersManager from "../../lib/appManagers/appStickersManager";
import rootScope from "../../lib/rootScope";
import { EmoticonsDropdown } from "../emoticonsDropdown"; import { EmoticonsDropdown } from "../emoticonsDropdown";
import { SuperStickerRenderer } from "../emoticonsDropdown/tabs/stickers"; import { SuperStickerRenderer } from "../emoticonsDropdown/tabs/stickers";
import LazyLoadQueue from "../lazyLoadQueue"; import LazyLoadQueue from "../lazyLoadQueue";
@ -38,6 +39,8 @@ export default class StickersHelper extends AutocompleteHelper {
setTimeout(() => { // it is not rendered yet setTimeout(() => { // it is not rendered yet
this.scrollable.container.scrollTop = 0; this.scrollable.container.scrollTop = 0;
}, 0); }, 0);
rootScope.dispatchEvent('choosing_sticker', true);
}); });
this.addEventListener('hidden', () => { this.addEventListener('hidden', () => {
@ -45,6 +48,8 @@ export default class StickersHelper extends AutocompleteHelper {
mediaSizes.removeEventListener('changeScreen', this.onChangeScreen); mediaSizes.removeEventListener('changeScreen', this.onChangeScreen);
this.onChangeScreen = undefined; this.onChangeScreen = undefined;
} }
rootScope.dispatchEvent('choosing_sticker', false);
}); });
} }

16
src/components/emoticonsDropdown/tabs/stickers.ts

@ -297,8 +297,23 @@ export default class StickersTab implements EmoticonsTab {
EmoticonsDropdown.onMediaClick(e); EmoticonsDropdown.onMediaClick(e);
}); });
const setTyping = (cancel = false) => {
rootScope.dispatchEvent('choosing_sticker', !cancel);
};
this.scroll = new Scrollable(this.content, 'STICKERS'); this.scroll = new Scrollable(this.content, 'STICKERS');
this.scroll.setVirtualContainer(this.stickersDiv); this.scroll.setVirtualContainer(this.stickersDiv);
this.scroll.onAdditionalScroll = () => {
setTyping();
};
emoticonsDropdown.addEventListener('closed', () => {
setTyping(true);
});
emoticonsDropdown.addEventListener('opened', () => {
setTyping();
});
this.stickyIntersector = EmoticonsDropdown.menuOnClick(this.menu, this.scroll, menuScroll).stickyIntersector; this.stickyIntersector = EmoticonsDropdown.menuOnClick(this.menu, this.scroll, menuScroll).stickyIntersector;
@ -329,6 +344,7 @@ export default class StickersTab implements EmoticonsTab {
}) })
]).finally(() => { ]).finally(() => {
this.mounted = true; this.mounted = true;
setTyping();
}); });
this.superStickerRenderer = new SuperStickerRenderer(EmoticonsDropdown.lazyLoadQueue, EMOTICONSSTICKERGROUP); this.superStickerRenderer = new SuperStickerRenderer(EmoticonsDropdown.lazyLoadQueue, EMOTICONSSTICKERGROUP);

3
src/lang.ts

@ -769,6 +769,7 @@ const lang = {
"Peer.Activity.User.SendingVideo": "sending a video", "Peer.Activity.User.SendingVideo": "sending a video",
"Peer.Activity.User.RecordingAudio": "recording voice", "Peer.Activity.User.RecordingAudio": "recording voice",
"Peer.Activity.User.SendingFile": "sending file", "Peer.Activity.User.SendingFile": "sending file",
"Peer.Activity.User.ChoosingSticker": "choosing a sticker",
"Peer.Activity.Chat.PlayingGame": "%@ is playing a game", "Peer.Activity.Chat.PlayingGame": "%@ is playing a game",
"Peer.Activity.Chat.TypingText": "%@ is typing", "Peer.Activity.Chat.TypingText": "%@ is typing",
"Peer.Activity.Chat.SendingPhoto": "%@ is sending a photo", "Peer.Activity.Chat.SendingPhoto": "%@ is sending a photo",
@ -776,6 +777,7 @@ const lang = {
"Peer.Activity.Chat.SendingVideo": "%@ is sending a video", "Peer.Activity.Chat.SendingVideo": "%@ is sending a video",
"Peer.Activity.Chat.RecordingAudio": "%@ is recording voice", "Peer.Activity.Chat.RecordingAudio": "%@ is recording voice",
"Peer.Activity.Chat.SendingFile": "%@ is sending a file", "Peer.Activity.Chat.SendingFile": "%@ is sending a file",
"Peer.Activity.Chat.ChoosingSticker": "%@ is choosing a sticker",
"Peer.Activity.Chat.Multi.PlayingGame1": "%@ and %d others are playing a game", "Peer.Activity.Chat.Multi.PlayingGame1": "%@ and %d others are playing a game",
"Peer.Activity.Chat.Multi.TypingText1": "%@ and %d others are typing", "Peer.Activity.Chat.Multi.TypingText1": "%@ and %d others are typing",
"Peer.Activity.Chat.Multi.SendingPhoto1": "%@ and %d others are sending photos", "Peer.Activity.Chat.Multi.SendingPhoto1": "%@ and %d others are sending photos",
@ -784,6 +786,7 @@ const lang = {
"Peer.Activity.Chat.Multi.RecordingAudio1": "%@ and %d others are recording voice", "Peer.Activity.Chat.Multi.RecordingAudio1": "%@ and %d others are recording voice",
//"Peer.Activity.Chat.Multi.SendingAudio1": "%@ and %d others are sending audio", //"Peer.Activity.Chat.Multi.SendingAudio1": "%@ and %d others are sending audio",
"Peer.Activity.Chat.Multi.SendingFile1": "%@ and %d others are sending files", "Peer.Activity.Chat.Multi.SendingFile1": "%@ and %d others are sending files",
"Peer.Activity.Chat.Multi.ChoosingSticker1": "%@ and %d others are choosing stickers",
"Peer.ServiceNotifications": "service notifications", "Peer.ServiceNotifications": "service notifications",
"Peer.RepliesNotifications": "Reply Notifications", "Peer.RepliesNotifications": "Reply Notifications",
"Peer.Status.justNow": "last seen just now", "Peer.Status.justNow": "last seen just now",

45
src/lib/appManagers/appImManager.ts

@ -200,6 +200,10 @@ export class AppImManager {
this.applyCurrentTheme(); this.applyCurrentTheme();
}); });
rootScope.addEventListener('choosing_sticker', (choosing) => {
this.setChoosingStickerTyping(!choosing);
});
rootScope.addEventListener('instance_deactivated', () => { rootScope.addEventListener('instance_deactivated', () => {
const popup = new PopupElement('popup-instance-deactivated', undefined, {overlayClosable: true}); const popup = new PopupElement('popup-instance-deactivated', undefined, {overlayClosable: true});
const c = document.createElement('div'); const c = document.createElement('div');
@ -1312,13 +1316,13 @@ export class AppImManager {
private getTypingElement(action: SendMessageAction) { private getTypingElement(action: SendMessageAction) {
const el = document.createElement('span'); const el = document.createElement('span');
el.classList.add('peer-typing'); let c = 'peer-typing';
el.classList.add(c);
el.dataset.action = action._; el.dataset.action = action._;
switch(action._) { switch(action._) {
case 'sendMessageTypingAction': { case 'sendMessageTypingAction': {
//default: { //default: {
const c = 'peer-typing-text'; c += '-text';
el.classList.add(c);
for(let i = 0; i < 3; ++i) { for(let i = 0; i < 3; ++i) {
const dot = document.createElement('span'); const dot = document.createElement('span');
dot.className = c + '-dot'; dot.className = c + '-dot';
@ -1332,8 +1336,7 @@ export class AppImManager {
case 'sendMessageUploadRoundAction': case 'sendMessageUploadRoundAction':
case 'sendMessageUploadVideoAction': case 'sendMessageUploadVideoAction':
case 'sendMessageUploadPhotoAction': { case 'sendMessageUploadPhotoAction': {
const c = 'peer-typing-upload'; c += '-upload';
el.classList.add(c);
/* const trail = document.createElement('span'); /* const trail = document.createElement('span');
trail.className = c + '-trail'; trail.className = c + '-trail';
el.append(trail); */ el.append(trail); */
@ -1343,12 +1346,23 @@ export class AppImManager {
case 'sendMessageRecordAudioAction': case 'sendMessageRecordAudioAction':
case 'sendMessageRecordRoundAction': case 'sendMessageRecordRoundAction':
case 'sendMessageRecordVideoAction': { case 'sendMessageRecordVideoAction': {
const c = 'peer-typing-record'; c += '-record';
el.classList.add(c); break;
}
case 'sendMessageChooseStickerAction': {
c += '-choosing-sticker';
for(let i = 0; i < 2; ++i) {
const eye = document.createElement('div');
eye.className = c + '-eye';
el.append(eye);
}
break; break;
} }
} }
el.classList.add(c);
return el; return el;
} }
@ -1374,7 +1388,8 @@ export class AppImManager {
'sendMessageRecordVideoAction': 'Peer.Activity.User.RecordingVideo', 'sendMessageRecordVideoAction': 'Peer.Activity.User.RecordingVideo',
'sendMessageRecordAudioAction': 'Peer.Activity.User.RecordingAudio', 'sendMessageRecordAudioAction': 'Peer.Activity.User.RecordingAudio',
'sendMessageRecordRoundAction': 'Peer.Activity.User.RecordingVideo', 'sendMessageRecordRoundAction': 'Peer.Activity.User.RecordingVideo',
'sendMessageGamePlayAction': 'Peer.Activity.User.PlayingGame' 'sendMessageGamePlayAction': 'Peer.Activity.User.PlayingGame',
'sendMessageChooseStickerAction': 'Peer.Activity.User.ChoosingSticker'
}, },
chat: { chat: {
'sendMessageTypingAction': 'Peer.Activity.Chat.TypingText', 'sendMessageTypingAction': 'Peer.Activity.Chat.TypingText',
@ -1386,7 +1401,8 @@ export class AppImManager {
'sendMessageRecordVideoAction': 'Peer.Activity.Chat.RecordingVideo', 'sendMessageRecordVideoAction': 'Peer.Activity.Chat.RecordingVideo',
'sendMessageRecordAudioAction': 'Peer.Activity.Chat.RecordingAudio', 'sendMessageRecordAudioAction': 'Peer.Activity.Chat.RecordingAudio',
'sendMessageRecordRoundAction': 'Peer.Activity.Chat.RecordingVideo', 'sendMessageRecordRoundAction': 'Peer.Activity.Chat.RecordingVideo',
'sendMessageGamePlayAction': 'Peer.Activity.Chat.PlayingGame' 'sendMessageGamePlayAction': 'Peer.Activity.Chat.PlayingGame',
'sendMessageChooseStickerAction': 'Peer.Activity.Chat.ChoosingSticker'
}, },
multi: { multi: {
'sendMessageTypingAction': 'Peer.Activity.Chat.Multi.TypingText1', 'sendMessageTypingAction': 'Peer.Activity.Chat.Multi.TypingText1',
@ -1398,7 +1414,8 @@ export class AppImManager {
'sendMessageRecordVideoAction': 'Peer.Activity.Chat.Multi.RecordingVideo1', 'sendMessageRecordVideoAction': 'Peer.Activity.Chat.Multi.RecordingVideo1',
'sendMessageRecordAudioAction': 'Peer.Activity.Chat.Multi.RecordingAudio1', 'sendMessageRecordAudioAction': 'Peer.Activity.Chat.Multi.RecordingAudio1',
'sendMessageRecordRoundAction': 'Peer.Activity.Chat.Multi.RecordingVideo1', 'sendMessageRecordRoundAction': 'Peer.Activity.Chat.Multi.RecordingVideo1',
'sendMessageGamePlayAction': 'Peer.Activity.Chat.Multi.PlayingGame1' 'sendMessageGamePlayAction': 'Peer.Activity.Chat.Multi.PlayingGame1',
'sendMessageChooseStickerAction': 'Peer.Activity.Chat.Multi.ChoosingSticker1'
} }
}; };
@ -1430,6 +1447,10 @@ export class AppImManager {
container.classList.add('online', 'peer-typing-container'); container.classList.add('online', 'peer-typing-container');
} }
if(action._ === 'sendMessageChooseStickerAction') {
container.classList.add('peer-typing-flex');
}
let typingElement = container.firstElementChild as HTMLElement; let typingElement = container.firstElementChild as HTMLElement;
if(!typingElement) { if(!typingElement) {
typingElement = this.getTypingElement(action); typingElement = this.getTypingElement(action);
@ -1533,6 +1554,10 @@ export class AppImManager {
replaceContent(element, subtitle || (useWhitespace ? '' : '')); replaceContent(element, subtitle || (useWhitespace ? '' : ''));
}); });
} }
public setChoosingStickerTyping(cancel: boolean) {
appMessagesManager.setTyping(this.chat.peerId, {_: cancel ? 'sendMessageCancelAction' : 'sendMessageChooseStickerAction'});
}
} }
const appImManager = new AppImManager(); const appImManager = new AppImManager();

3
src/lib/rootScope.ts

@ -135,7 +135,8 @@ export type BroadcastEvents = {
'download_progress': any, 'download_progress': any,
'document_downloaded': MyDocument, 'document_downloaded': MyDocument,
'context_menu_toggle': boolean 'context_menu_toggle': boolean,
'choosing_sticker': boolean
}; };
export class RootScope extends EventListenerBase<{ export class RootScope extends EventListenerBase<{

94
src/scss/partials/_peerTyping.scss

@ -20,7 +20,12 @@
@include text-overflow(); @include text-overflow();
} */ } */
&:not(.peer-typing-text) { &-flex {
display: flex;
align-items: center;
}
&:not(.peer-typing-text):not(.peer-typing-choosing-sticker) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
transform: translateY(-1px); transform: translateY(-1px);
@ -92,6 +97,41 @@
animation: recordBlink 1.25s infinite; animation: recordBlink 1.25s infinite;
} }
} }
&-choosing-sticker {
margin-right: .375rem;
flex: 0 0 auto;
display: flex;
align-items: center;
height: 16px;
&-eye {
width: 8px;
height: 14px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
border: 1px solid var(--color);
margin: 0 .0625rem;
position: relative;
animation: eye 1.8s ease-in-out infinite;
&:before {
content: " ";
display: block;
width: .25rem;
height: .25rem;
background-color: var(--color);
border-radius: 50%;
position: absolute;
// left: 50%;
top: 50%;
// transform: translate(-50%, -50%);
animation: eye-move 1.8s ease-in-out infinite;
transform: translate(-1px, -50%);
}
}
}
} }
$scale-max: 1; $scale-max: 1;
@ -182,3 +222,55 @@ $opacity-min: $opacity-max - ($opacity-step * 2);
transform: translate(13px); transform: translate(13px);
} }
} }
@keyframes eye {
0% {
transform: scale(1.1) translateX(-.75px);
}
12.5% {
transform: scale(1) translateX(0px);
}
25% {
transform: scale(1.1) translateX(.375px);
}
50% {
transform: scale(1.1) translateX(.75px);
}
62.5% {
transform: scale(1) translateX(0px);
}
75% {
transform: scale(1.1) translateX(-.375px);
}
100% {
transform: scale(1.1) translateX(-.75px);
}
}
@keyframes eye-move {
0% {
transform: translate(-1px, -50%);
}
25% {
transform: translate(3px, -50%);
}
50% {
transform: translate(3px, -50%);
}
75% {
transform: translate(-1px, -50%);
}
100% {
transform: translate(-1px, -50%);
}
}

Loading…
Cancel
Save