Feature/polls

src/cache/fastStorages/indices/pollsIndex.ts

@@ -0,0 +1,83 @@
+import { Message, PollResults, Update } from 'mtproto-js';
+import Collection from '../collection';
+
+const decoder = new TextDecoder();
+
+export default function pollsIndex(collection: Collection<Message, any, string>) {
+  const pollMessageIds = new Map<string, Set<string>>();
+  collection.changes.subscribe((collectionChanges) => {
+    collectionChanges.forEach(([action, item, key]) => {
+      if (item._ !== 'message' || item.media?._ !== 'messageMediaPoll') {
+        return;
+      }
+      switch (action) {
+        case 'add': {
+          let messageIds = pollMessageIds.get(item.media.poll.id);
+          if (!messageIds) {
+            pollMessageIds.set(item.media.poll.id, messageIds = new Set());
+          }
+          messageIds.add(key);
+          break;
+        }
+        case 'remove': {
+          const messageIds = pollMessageIds.get(item.media.poll.id);
+          if (messageIds) {
+            messageIds.delete(key);
+            if (messageIds.size === 0) {
+              pollMessageIds.delete(item.media.poll.id);
+            }
+          }
+          break;
+        }
+        default:
+      }
+    },
+    );
+  });
+
+  const applyMinPollResults = (prevPollResults: PollResults, newPollResults: PollResults) => {
+    if (!newPollResults.min) {
+      return newPollResults;
+    }
+    const pollResults: PollResults = { ...prevPollResults, ...newPollResults };
+    if (prevPollResults.results && newPollResults.results) {
+      const results = pollResults.results = newPollResults.results.map((r) => ({ ...r }));
+      const prevResultOptions = new Map(prevPollResults.results.map((r) => [decoder.decode(r.option), r]));
+      for (let index = 0; index < results.length; index++) {
+        const result = results[index];
+        const prevResults = prevResultOptions.get(decoder.decode(result.option));
+        if (prevResults) {
+          result.correct = prevResults.correct;
+          result.chosen = prevResults.chosen;
+        }
+      }
+    }
+    return pollResults;
+  };
+
+  return {
+    updatePoll(update: Update.updateMessagePoll) {
+      const messageIds = pollMessageIds.get(update.poll_id);
+      if (messageIds) {
+        messageIds.forEach((messageId) => {
+          const message = collection.get(messageId);
+          if (message?._ === 'message' && message.media?._ === 'messageMediaPoll') {
+            const updatedResults = applyMinPollResults(message.media.results, update.results);
+            const updatedMedia = {
+              ...message.media,
+              results: updatedResults,
+            };
+            if (update.poll) {
+              updatedMedia.poll = update.poll;
+            }
+            const updatedMessage = {
+              ...message,
+              media: updatedMedia,
+            };
+            collection.change(messageId, updatedMessage);
+          }
+        });
+      }
+    },
+  };
+}

src/cache/index.ts

@@ -11,6 +11,7 @@ import Collection, { GetId, makeGetIdFromProp } from './fastStorages/collection'
 import { orderBy } from './fastStorages/indices';
 import messageHistory from './fastStorages/indices/messageHistory';
 import sharedMediaIndex from './fastStorages/indices/sharedMediaIndex';
+import pollsIndex from './fastStorages/indices/pollsIndex';
 
 // todo: Save the main part of the cache to a persistent storage
 
@@ -53,6 +54,7 @@ export const messageCache = new Collection({
     photoVideos: sharedMediaIndex,
     documents: sharedMediaIndex,
     links: sharedMediaIndex,
+    polls: pollsIndex,
   },
 });
 

src/client/workers/mocks/call.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import { MethodDeclMap } from 'mtproto-js';
+import { MethodDeclMap, PollResults, PollAnswerVoters, MessageEntity } from 'mtproto-js';
 import { users } from './user';
 import { chats } from './chat';
 import { mockDialogForPeers } from './dialog';
@@ -66,6 +66,55 @@ export function callMock<T extends keyof MethodDeclMap>(method: T, params: Metho
       });
       break;
 
+    case 'messages.sendVote': {
+      const { options } = params as MethodDeclMap['messages.sendVote']['req'];
+      const selectedOption = new Uint8Array(options[0])[0];
+      const pollAnswerVoters1 = Math.round(Math.random() * 100);
+      const pollAnswerVoters2 = Math.round(Math.random() * 100);
+      const pollAnswerVoters3 = Math.round(Math.random() * 100);
+      const result = {
+        _: 'updates',
+        updates: [
+          {
+            _: 'updateMessagePoll',
+            poll_id: '1',
+            results: {
+              _: 'pollResults',
+              results: [
+                {
+                  _: 'pollAnswerVoters',
+                  chosen: selectedOption === 0,
+                  correct: false,
+                  option: new Int8Array([0]).buffer,
+                  voters: pollAnswerVoters1,
+                },
+                {
+                  _: 'pollAnswerVoters',
+                  chosen: selectedOption === 1,
+                  correct: true,
+                  option: new Int8Array([1]).buffer,
+                  voters: pollAnswerVoters2,
+                },
+                {
+                  _: 'pollAnswerVoters',
+                  chosen: selectedOption === 2,
+                  correct: false,
+                  option: new Int8Array([2]).buffer,
+                  voters: pollAnswerVoters3,
+                },
+              ] as PollAnswerVoters[],
+              total_voters: pollAnswerVoters1 + pollAnswerVoters2 + pollAnswerVoters3,
+              recent_voters: [],
+              solution: 'string',
+              solution_entities: [] as MessageEntity[],
+            } as PollResults,
+          },
+        ],
+      };
+      timeout<T>(1000, cb, result);
+      break;
+    }
+
     case 'messages.search': {
       const { peer, filter, limit, offset_id } = params as MethodDeclMap['messages.search']['req'];
       const { count, messages } = mockHistorySearch(limit, offset_id, filter, peer);

src/client/workers/mocks/message.ts

@@ -37,6 +37,7 @@ export function mockMessage({
   grouped_id = '',
   restriction_reason = [],
   date = 0,
+  media = undefined,
 }: Partial<Message.message> & { from_id: number, to_id: Peer }): Message.message {
   return {
     _: 'message',
@@ -61,5 +62,6 @@ export function mockMessage({
     post_author,
     grouped_id,
     restriction_reason,
+    media,
   };
 }

src/client/workers/mocks/storybook.ts

@@ -1,5 +1,5 @@
 import { BehaviorSubject } from 'rxjs';
-import type { Photo } from 'mtproto-js';
+import { Photo } from 'mtproto-js';
 import { task } from 'client/context';
 import { getPhotoLocation } from 'helpers/photo';
 import { locationToURL } from 'helpers/files';
@@ -51,3 +51,32 @@ export const MessageRegular = mockMessage({
   from_id: users[1].id,
   to_id: { _: 'peerUser', user_id: me.id },
 });
+
+export const MessagePoll = mockMessage({
+  from_id: users[1].id,
+  to_id: { _: 'peerUser', user_id: me.id },
+  media: {
+    _: 'messageMediaPoll',
+    poll: {
+      _: 'poll' as const,
+      id: '1',
+      question: 'Question',
+      answers: [
+        {
+          _: 'pollAnswer',
+          text: 'Option 1',
+          option: new ArrayBuffer(1),
+        },
+        {
+          _: 'pollAnswer',
+          text: 'Option 2',
+          option: new ArrayBuffer(1),
+        },
+      ],
+
+    },
+    results: {
+      _: 'pollResults',
+    },
+  },
+});

src/components/media/document/file.ts

@@ -1,11 +1,11 @@
-import { Document, Message } from 'mtproto-js';
+import { cached as getCached, file } from 'client/media';
+import { materialSpinner } from 'components/icons';
+import { datetime } from 'components/ui';
+import { listen, mount, unmountChildren } from 'core/dom';
 import { div, text } from 'core/html';
-import { getAttributeFilename, getReadableSize, getDocumentLocation } from 'helpers/files';
+import { getAttributeFilename, getDocumentLocation, getReadableSize } from 'helpers/files';
 import { downloadByUrl } from 'helpers/other';
-import { datetime } from 'components/ui';
-import { listen, mount, unmountChildren, unmount } from 'core/dom';
-import { materialSpinner, down } from 'components/icons';
-import { download, cached as getCached, file } from 'client/media';
+import { Document, Message } from 'mtproto-js';
 import photoRenderer from '../photo/photo';
 import './file.scss';
 
@@ -64,7 +64,7 @@ export default function documentFile(document: Document.document, message?: Mess
     sizeEl.textContent = '0%';
 
     downloadByUrl(filename, file(getDocumentLocation(document, ''), { dc_id: document.dc_id, size: document.size, mime_type: document.mime_type }));
-  
+
     // download(
     //   getDocumentLocation(document, ''),
     //   { dc_id: document.dc_id, size: document.size, mime_type: document.mime_type },

src/components/media/poll/poll.scss

@@ -0,0 +1,78 @@
+.poll {
+  user-select: none;
+  font-size: 1rem;
+
+  &__body {
+    padding: 7PX 10PX 0 10PX;
+  }
+
+  &__footer {
+    display: grid;
+
+    >* {
+      grid-row: 1;
+      grid-column: 1;
+    }
+  }
+
+  &__message-info {
+    justify-self: end;
+    align-self: end;
+    margin: 0 10PX 1PX 0 !important;
+  }
+
+  &__question {
+    font-weight: 500;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+  }
+
+  &__type {
+    color: var(--accent-color-inactive);
+    font-size: 0.9rem;
+  }
+
+  &__recent-voters {
+    padding-left: 8px;
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  & &__avatar-wrapper {
+    position: relative;
+    width: 13px;
+    height: 18px;
+
+    .avatar {
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      min-width: 18px;
+      min-height: 18px;
+      border: 1px solid var(--bubble-background);
+      --initials-font-size: 0.6rem;
+    }
+  }
+
+  &__voters {
+    color: var(--accent-color-inactive);
+    font-size: 0.9rem;
+    padding: 10px 0 4px 10px;
+  }
+
+  &__vote-button {
+    margin: 8PX 0;
+    text-align: center;
+    color: var(--accent-color);
+    transition: color 0.3s;
+    cursor: pointer;
+  }
+
+  &__vote-button.-inactive {
+    color: var(--accent-color-inactive);
+    cursor: default;
+  }
+}