Merge branch 'dev'

2022-07-08 16:33:22 +02:00 · 2022-07-08 16:33:22 +02:00 · 5f33782863
commit 5f33782863
parent f3999308cc 3a474f4981
43 changed files with 2006 additions and 1241 deletions
--- a/src/assets/config.json
+++ b/src/assets/config.json
@ -9,24 +9,35 @@
    "productLink": "letsconvene.im",
    "defaultServer": "https://neo.keanu.im",
    "rtl": false,
-    "analytics": {
-        "enabled": true,
-        "config": {
-            "server": "https://metrics.cleaninsights.org/cleaninsights.php",
-            "siteId": 14,
-            "timeout": 5,
-            "persistEveryNTimes": 1,
-            "debug": true,
-            "campaigns": {
-                "beta": {
-                    "start": "2021-01-01T00:00:00-00:00",
-                    "end": "2021-12-31T23:59:59-00:00",
-                    "aggregationPeriodLength": 1,
-                    "numberOfPeriods": 90,
-                    "onlyRecordOnce": false,
-                    "eventAggregationRule": "avg"
+    "analytics": [
+        {
+            "enabled": true,
+            "type": "ci",
+            "config": {
+                "server": "https://metrics.cleaninsights.org/cleaninsights.php",
+                "siteId": 14,
+                "timeout": 5,
+                "persistEveryNTimes": 1,
+                "debug": true,
+                "campaigns": {
+                    "beta": {
+                        "start": "2021-01-01T00:00:00-00:00",
+                        "end": "2021-12-31T23:59:59-00:00",
+                        "aggregationPeriodLength": 1,
+                        "numberOfPeriods": 90,
+                        "onlyRecordOnce": false,
+                        "eventAggregationRule": "avg"
+                    }
                }
            }
+        },
+        {
+            "enabled": true,
+            "type": "matomo",
+            "config": {
+                "server": "https://metrics.cleaninsights.org/",
+                "siteId": "17"
+            }
        }
-    }
+    ]
 }
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
--- a/src/assets/css/components/_poll.scss
+++ b/src/assets/css/components/_poll.scss
@ -1,5 +1,6 @@
 .poll-bubble {
  width: 70%;
+  text-align: start;
 }

 .poll-bubble {
@ -36,6 +37,7 @@
  border-radius: 4px;
  padding: 15px 14px;
  margin: 0px;
+  height: 48px;
  &.winner {
    font-weight: 700;
  }
@ -77,40 +79,189 @@

 .poll-status {
  justify-content: space-between;
+  align-items: flex-start;
  font-size: 13px;
  line-height: 117%;
-  margin: 0px;
+  margin: 17px 0px 0px 0px;
  .poll-status-title {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 117%;
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.4px;
+    color: #1d1d1d;
+    opacity: 0.8;
+    .from-admin & {
+      color: white;
+    }
  }

  .poll-status-close {
-    color: $poll-hilite-color;
+    background: transparent;
+    border: 1px solid #000000;
+    border-radius: 32px;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 133%;
+    letter-spacing: 0.34px;
+    text-transform: uppercase;
+    color: #181719;
+    padding: 7px 14px;
+    text-align: center;
+  }
+
+  .poll-status-closed {
+    background: white;
+    border-radius: 32px;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 133%;
+    letter-spacing: 0.34px;
+    text-transform: uppercase;
+    color: #181719;
+    padding: 7px 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+      width: 9px;
+      height: 8px;
+      margin-right: 3px;
+    }
  }
 }

 .poll-submit {
-  .v-btn {
-    font-family: "Inter", sans-serif;
-    font-weight: 700;
-    font-size: 11 * $chat-text-size;
-    color: white;
-    text-transform: uppercase;
-    background-color: $poll-hilite-color !important;
-    border: 1px solid black;
-    border-radius: 21px !important;
-    height: 42px !important;
-    margin-top: $chat-standard-padding-xs;
-    margin-bottom: $chat-standard-padding-xs;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe;
+  border-radius: 32px;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 11.5411px;
+  line-height: 140%;
+  text-align: center;
+  letter-spacing: 0.34px;
+  text-transform: uppercase;
+  color: #ffffff;
+  padding: 14px 18px;
+  color: white;
+  text-transform: uppercase;
+  height: 42px;
+}
+
+.poll-disclose {
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.4px;
+  color: #1d1d1d;
+  opacity: 0.8;
+  .poll-disclose-track {
+    position: relative;
+    width: 30px;
+    height: 18px;
+    background: #ededed;
+    border-radius: 16px;
+    transform: rotate(180deg);
+    margin-left: 8px;
+    transition: background-color 0.3s linear;
+    .poll-disclose-knob {
+      position: absolute;
+      background: #ffffff;
+      box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.12);
+      border-radius: 16px;
+      transform: rotate(180deg);
+      width: 16px;
+      right: 1px;
+      top: 1px;
+      bottom: 1px;
+      transition: right 0.3s linear;
+    }
+  }
+
+  &.selected .poll-disclose-track {
+    background: #1d1d1d;
+    .poll-disclose-knob {
+      right: 13px;
+    }
  }
 }

 // Creation dialog
 //
-.poll-create-dialog-content {
-  max-height: 50vh;
+.poll-create {
  overflow-x: hidden;
  overflow-y: auto;
-}
-.poll-create-status {
-  font-size: 0.7rem;
+  .poll-create-dialog-content {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+    color: rgba(0, 0, 0, 0.7);
+
+    .add-answer-button {
+      border-radius: 4px;
+      height: 48px;
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid #242424;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+      transition: opacity 1s linear, height 0.3s linear;
+      &.hidden {
+        opacity: 0;
+        height: 0;
+        transition: opacity 0s linear, height 0s linear;
+      }
+      img {
+        width: 14.88px;
+        height: 14.88px;
+        object-fit: contain;
+      }
+    }
+  }
+  .filled-button.publish-button {
+    background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe !important;
+    padding-left: 30px;
+    padding-right: 30px;
+    height: 42px !important;
+    border-radius: 32px;
+  }
+  .tip {
+    font-family: "Inter";
+    font-style: normal;
+    font-size: 13px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+    color: #1d1d1d;
+    opacity: 0.8;
+    text-align: left;
+    b {
+      margin-right: 4px;
+    }
+  }
+  .poll-create-status {
+    font-size: 0.7rem;
+  }
 }
--- a/src/assets/icons/ic_add.svg
+++ b/src/assets/icons/ic_add.svg
@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7674 6.32558H8.55814V1.11628C8.55814 0.483721 8.07442 0 7.44186 0C6.8093 0 6.32558 0.483721 6.32558 1.11628V6.32558H1.11628C0.483721 6.32558 0 6.8093 0 7.44186C0 8.07442 0.483721 8.55814 1.11628 8.55814H6.32558V13.7674C6.32558 14.4 6.8093 14.8837 7.44186 14.8837C8.07442 14.8837 8.55814 14.4 8.55814 13.7674V8.55814H13.7674C14.4 8.55814 14.8837 8.07442 14.8837 7.44186C14.8837 6.8093 14.4 6.32558 13.7674 6.32558Z" fill="black" fill-opacity="0.5"/>
+<path d="M13.7674 6.32558H8.55814V1.11628C8.55814 0.483721 8.07442 0 7.44186 0C6.8093 0 6.32558 0.483721 6.32558 1.11628V6.32558H1.11628C0.483721 6.32558 0 6.8093 0 7.44186C0 8.07442 0.483721 8.55814 1.11628 8.55814H6.32558V13.7674C6.32558 14.4 6.8093 14.8837 7.44186 14.8837C8.07442 14.8837 8.55814 14.4 8.55814 13.7674V8.55814H13.7674C14.4 8.55814 14.8837 8.07442 14.8837 7.44186C14.8837 6.8093 14.4 6.32558 13.7674 6.32558Z" fill="#242424"/>
+</svg>
--- a/src/assets/icons/ic_check_small.svg
+++ b/src/assets/icons/ic_check_small.svg
@ -0,0 +1,3 @@
+<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.83799 0.185699C8.63338 -0.0470852 8.2762 -0.0635505 8.05605 0.150657L3.00935 5.0643C2.96298 5.11167 2.89351 5.11379 2.84524 5.07047L1.55358 3.95998C1.40102 3.83021 1.22148 3.76012 1.03229 3.76012C0.777422 3.76012 0.536097 3.88787 0.371977 4.10621L0.20399 4.33081C-0.0971529 4.73456 -0.0605251 5.328 0.285096 5.68226L2.31232 7.74863C2.47065 7.91143 2.67725 8 2.88963 8C3.13285 8 3.36453 7.88467 3.52865 7.68068L8.85337 1.05907C9.0542 0.809911 9.04842 0.42676 8.83794 0.185681L8.83799 0.185699Z" fill="black"/>
+</svg>
--- a/src/assets/translations/bo.json
+++ b/src/assets/translations/bo.json
@ -214,6 +214,9 @@
        "text_public": "གལ་ཏེ་ཁྱེད་ཀྱིས་འབྲེལ་ཐག་དེ་ཧ་གོ་ཚེ། ག་དུས་ཡིན་ཡང་། ཁ་བརྡ་ཁང་དུ་འཛུལ་ཆོག",
        "title_public": "{user} ག་ལེེར་བཞུགས།"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "join": {
        "status_joining": "ཁ་བརྡ་ཁང་དུ་འཛུལ་བཞིན་པ།...",
        "status_logging_in": "ནང་འཛུལ་བྱེད་བཞིན་པ།...",
--- a/src/assets/translations/de.json
+++ b/src/assets/translations/de.json
@ -165,6 +165,9 @@
        "leave": "Verlassen",
        "title_invite": "Bist du sicher, dass du gehen willst?"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "purge_room": {
        "info": "Alle Mitglieder und Nachrichten werden entfernt. Diese Aktion kann nicht rückgängig gemacht werden.",
        "button": "Löschen",
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@ -179,6 +179,9 @@
    "go_back": "Go back",
    "leave": "Leave"
  },
+  "logout": {
+    "confirm_text": "Are you sure you want to logout ?"
+  },
  "purge_room": {
    "title": "Delete room?",
    "info": "All members and messages will be removed. This action cannot be undone.",
@ -238,26 +241,31 @@
    "download_name": "Download"
  },
  "poll_create": {
-    "title": "Create poll",
-    "intro": "Please fill in details below.",
-    "create": "Create",
+    "title": "New Poll",
+    "create": "Publish",
    "creating": "Creating poll",
    "poll_disclosed": "Open - current results are shown at all times.",
    "poll_undisclosed": "Closed - users will see the results when poll is closed.",
    "add_answer": "Add answer",
    "failed": "Failed to create poll, please try again later.",
-    "question_label": "Type your question here",
+    "question_label": "Ask your question*",
    "question_required": "You need to enter a question!",
-    "answer_label": "Answer no {index}",
+    "answer_label_1": "Answer*",
+    "answer_label_n": "Answer",
+    "please_complete": "Please complete",
    "answer_required": "Answer can't be empty. Please enter some text or remove this option.",
+    "tip_title": "PRO TIP",
+    "tip_text": "Members will see the poll results after they answer. Close the poll when you're done to show results to everyone in the room..",
    "create_poll_menu_option": "Create poll",
    "poll_status_closed": "Poll is closed",
    "poll_status_disclosed": "Results will be shown when poll is closed.",
    "poll_status_open": "Poll is open",
    "poll_status_open_not_voted": "Poll is open - vote to see the results",
+    "view_results": "View Results",
    "close_poll": "Close poll",
    "poll_submit": "Submit",
-    "num_answered": "{count} have answered"
+    "num_answered": "{count} answers",
+    "results_shared": "Results shared to the room."
  },
  "export": {
    "exported_date": "Exported on {date}",
--- a/src/assets/translations/es.json
+++ b/src/assets/translations/es.json
@ -47,6 +47,9 @@
        "text_public": "Siempre puedes volver a unirte a esta sala si conoces el enlace.",
        "title_public": "Adios, [user}"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "invite": {
        "status_error": "No se pudo invitar a uno o más amigos!",
        "status_inviting": "Invitando amigo {index} de {count}",
--- a/src/assets/translations/fi.json
+++ b/src/assets/translations/fi.json
@ -84,6 +84,9 @@
        "leave": "Poistu",
        "text_invite": "Tämä huone on lukittu. Et pääse takaisin ilman erillistä lupaa."
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "message": {
        "you": "Sinä",
        "user_created_room": "{user} loi huoneen",
--- a/src/assets/translations/fr.json
+++ b/src/assets/translations/fr.json
@ -165,6 +165,9 @@
        "text_invite": "Ce salon est verrouillé. Vous ne pouvez pas le rejoindre sans une autorisation spéciale.",
        "go_back": "Retour"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "purge_room": {
        "title": "Supprimer le salon ?",
        "info": "Tous les membres et les messages seront supprimés. Cette action ne peut être annulée.",
--- a/src/assets/translations/it.json
+++ b/src/assets/translations/it.json
@ -164,6 +164,9 @@
        "leave": "Lascia",
        "text_public_lastroom": "Se vuoi unirti di nuovo a questa stanza, puoi farlo con una nuova identità. Per mantenere {user}, {action}."
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "purge_room": {
        "info": "Tutti i membri e i messaggi saranno rimossi. Questa azione non può essere annullata.",
        "button": "Elimina",
--- a/src/assets/translations/nb_NO.json
+++ b/src/assets/translations/nb_NO.json
@ -139,6 +139,9 @@
        "create_account": "opprett en konto",
        "title_public": "Adjø, {user}"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "invite": {
        "status_inviting": "Inviterer venn {index} av {count}",
        "send_invites_to": "Send invitasjoner til",
--- a/src/assets/translations/pt_BR.json
+++ b/src/assets/translations/pt_BR.json
@ -118,7 +118,7 @@
        "status_creating": "Criando a sala",
        "status_avatar_total": "Enviando o avatar: {count} de {total}",
        "status_avatar": "Enviando avatar: {count}",
-        "room_name_limit_error_msg": ""
+        "room_name_limit_error_msg": "O máximo de 50 caracteres são permitidos"
    },
    "device_list": {
        "title": "DISPOSITIVOS",
@ -173,7 +173,7 @@
        "status_logging_in": "Fazendo login...",
        "status_joining": "Entrando na sala...",
        "join_failed": "Houve uma falha ao entrar na sala.",
-        "choose_name": ""
+        "choose_name": "Escolha um nome para usar"
    },
    "leave": {
        "title_public": "Adeus, {user}",
@ -185,6 +185,9 @@
        "go_back": "Retorna",
        "leave": "Sair"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "purge_room": {
        "title": "Exclui a sala?",
        "info": "Todos os membros e as mensagens serão excluídos. Essa ação não pode ser desfeita.",
@ -216,7 +219,8 @@
        "show_all": "Mostre tudo >",
        "leave_room": "Sair",
        "version_info": "Desenvolvido por Guardian Project. Versão: {version}",
-        "scan_code": "Faça a varredura para entrar na sala"
+        "scan_code": "Faça a varredura para entrar na sala",
+        "export_room": "Exportar a conversa"
    },
    "room_info_sheet": {
        "this_room": "Esta sala",
@ -235,5 +239,34 @@
        "default": "padrão",
        "custom": "personalizado ({level})",
        "restricted": "restrito"
+    },
+    "poll_create": {
+        "title": "Criar uma enquete",
+        "intro": "Preencha os detalhes abaixo.",
+        "create": "Criar",
+        "creating": "Criando a enquete",
+        "poll_disclosed": "Aberto - os resultados atuais são mostrados em todos os momentos.",
+        "add_answer": "Adicionar uma resposta",
+        "failed": "Houve uma falha ao criar a enquete. Tente novamente mais tarde.",
+        "question_label": "Digite a sua pergunta aqui",
+        "question_required": "Você precisa inserir uma pergunta!",
+        "answer_label": "Responda sem {index}",
+        "answer_required": "A resposta não pode estar vazia. Insira algum texto ou remova esta opção.",
+        "create_poll_menu_option": "Criar uma enquete",
+        "poll_status_closed": "A enquete foi encerrada",
+        "poll_status_disclosed": "Os resultados serão mostrados quando a enquete for encerrada.",
+        "poll_status_open": "A enquete está aberta",
+        "poll_status_open_not_voted": "A enquete está aberta - vote para ver os resultados",
+        "close_poll": "Fechar a enquete",
+        "poll_submit": "Enviar",
+        "num_answered": "{count} responderam",
+        "poll_undisclosed": "Fechado - os usuários verão os resultados quando a pesquisa for fechada."
+    },
+    "export": {
+        "exported_date": "Foi exportado em {date}",
+        "fetched_n_events": "{count} eventos buscados",
+        "fetched_n_of_total_events": "Obteve {count} de {total} eventos",
+        "processed_n_of_total_events": "Mídia processada para {count} de {total} eventos",
+        "export_filename": "Bate-papo exportado {date}"
    }
 }
--- a/src/assets/translations/ro.json
+++ b/src/assets/translations/ro.json
@ -83,6 +83,9 @@
        "text_public": "Puteți oricând să vă alăturați din nou acestei camere dacă știți link-ul.",
        "title_public": "La revedere, {user}"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "invite": {
        "status_error": "Nu ați reușit să invitați unul sau mai mulți prieteni!",
        "status_inviting": "Invitați prietenul {index} din {count}",
--- a/src/assets/translations/si.json
+++ b/src/assets/translations/si.json
@ -29,5 +29,8 @@
    },
    "login": {
        "invalid_message": ""
+    },
+    "logout": {
+        "confirm_text": ""
    }
 }
--- a/src/assets/translations/ug.json
+++ b/src/assets/translations/ug.json
@ -106,6 +106,9 @@
        "text_public": "ئۇلىنىشنى بىلسىڭىز ھەمىشە بۇ ئۆيگە قايتا كىرەلەيسىز.",
        "title_public": "خەير خوش ، {ئىشلەتكۈچى}"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "join": {
        "join_failed": "مۇنازىرە ئۆيىگە قوشۇلۇش مەغلۇب بولدى.",
        "status_joining": "مۇنازىرىگە كىرىش...",
--- a/src/assets/translations/zh_Hans.json
+++ b/src/assets/translations/zh_Hans.json
@ -42,6 +42,9 @@
        "text_public": "如果您知道链接，您可以随时再次加入此聊天室。",
        "title_public": "再见，{user}"
    },
+    "logout": {
+        "confirm_text": ""
+    },
    "login": {
        "login": "登录",
        "password": "输入密码",
--- a/src/components/BottomSheet.vue
+++ b/src/components/BottomSheet.vue
@ -17,6 +17,16 @@
      ref="pan"
      :style="{ top: `${isMove ? y : calcY()}px` }"
    >
+      <v-btn
+        fab
+        x-small
+        elevation="0"
+        color="black"
+        @click.stop="onBackgroundClick"
+        class="bottom-sheet-close"
+      >
+        <v-icon color="white" >cancel</v-icon>
+      </v-btn>
      <div class="bottom-sheet-handle"><div class="bottom-sheet-handle-decoration" /></div>
      <div ref="sheetContent" class="sheetContent">
        <slot></slot>
@ -203,6 +213,13 @@ export default {
  background-color: white;
  overflow: hidden;

+  .bottom-sheet-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  }
+
  @media #{map-get($display-breakpoints, 'lg-and-up')} {
    margin: 0 auto;
    width: $dialog-desktop-width;
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@ -26,7 +26,10 @@
          v-on:edit="edit(selectedEvent)"
          v-on:redact="redact(selectedEvent)"
          v-on:download="download(selectedEvent)"
-          v-on:more="showMoreMessageOperations"
+          v-on:more="
+            isEmojiQuickReaction= true
+            showMoreMessageOperations($event)
+          "
          :event="selectedEvent"
        />
      </div>
@ -72,13 +75,13 @@
              :room="room"
              :event="event"
              :nextEvent="events[index + 1]"
-              :reactions="timelineSet.getRelationsForEvent(event.getId(), 'm.annotation', 'm.reaction')"
              :timelineSet="timelineSet"
              v-on:send-quick-reaction="sendQuickReaction"
              v-on:context-menu="showContextMenuForEvent($event)"
              v-on:own-avatar-clicked="viewProfile"
              v-on:other-avatar-clicked="showAvatarMenuForEvent($event)"
              v-on:download="download(event)"
+              v-on:poll-closed="pollWasClosed(event)"
            />
            <!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
            <!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
@ -164,6 +167,32 @@
            </v-btn>
          </v-col>

+          <v-col
+            v-if="(!currentInput || currentInput.length == 0) && !showRecorder && canCreatePoll"
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
+          >
+            <v-btn icon large color="black" @click="showCreatePollDialog = true">
+                <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M3.31462 16.4718C3.31462 16.9496 3.70026 17.3368 4.17609 17.3368L16.1385 17.3368C16.6144 17.3368 17 16.9496 17 16.4718L16.9998 13.6229C16.9998 13.1452 16.6142 12.7579 16.1383 12.7579L4.1764 12.7579C3.70056 12.7579 3.31492 13.1452 3.31492 13.6229L3.31512 16.4718L3.31462 16.4718Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M3.31462 10.4557C3.31462 10.9335 3.70026 11.3208 4.17609 11.3208L11.3428 11.3208C11.8186 11.3208 12.2043 10.9335 12.2043 10.4557L12.2043 7.60711C12.2043 7.12931 11.8186 6.74208 11.3428 6.74208L4.17609 6.74208C3.70026 6.74208 3.31462 7.12932 3.31462 7.60711L3.31462 10.4557Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M3.31451 1.59127L3.31451 4.44011C3.31451 4.91791 3.70016 5.30514 4.17598 5.30514L6.99509 5.30514C7.47093 5.30514 7.85657 4.91791 7.85657 4.44011L7.85637 1.59127C7.85637 1.11347 7.47073 0.726242 6.9949 0.726242L4.17599 0.726242C3.70035 0.726242 3.31452 1.11348 3.31452 1.59127L3.31451 1.59127Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M-2.00529e-05 0.587841L-2.0791e-05 17.4747C-2.08052e-05 17.7995 0.262306 18.0625 0.585404 18.0625L1.38198 18.0625C1.70528 18.0625 1.96741 17.7995 1.96741 17.4747L1.96741 0.587841C1.96741 0.263208 1.70508 -1.14667e-08 1.38198 -2.55897e-08L0.585405 -6.04092e-08C0.261911 -7.45496e-08 -2.00387e-05 0.263213 -2.00529e-05 0.587841Z"
+                    fill="currentColor"
+                  />
+                </svg>
+            </v-btn>
+          </v-col>
+
          <v-col
            class="input-area-button text-center flex-grow-0 flex-shrink-1"
            v-if="!currentInput || currentInput.length == 0 || showRecorder"
@ -207,6 +236,23 @@
            </v-btn>
          </v-col>

+          <v-col
+            class="input-area-button text-center flex-grow-0 flex-shrink-1 input-more-icon"
+          >
+            <v-btn
+              fab
+              small
+              elevation="0"
+              v-blur
+              @click.stop="
+                isEmojiQuickReaction = false
+                showMoreMessageOperations($event)
+              "
+            >
+              <v-icon>$vuetify.icons.addReaction</v-icon>
+            </v-btn>
+          </v-col>
+
          <v-col v-if="$config.shortCodeStickers" class="input-area-button text-center flex-grow-0 flex-shrink-1">
            <v-btn
              v-if="!showRecorder"
@ -243,45 +289,6 @@
              />
            </label>
          </v-col>
-
-          <v-col
-            v-if="!showRecorder && canCreatePoll"
-            ref="sendOptions"
-            class="input-area-button text-center flex-grow-0 flex-shrink-1 send-options"
-          >
-            <v-menu close-on-click>
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn icon v-bind="attrs" v-on="on">
-                  <v-icon>more_vert</v-icon>
-                </v-btn>
-              </template>
-              <v-list>
-                <v-list-item @click="showCreatePollDialog = true">
-                  <v-list-item-icon>
-                    <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        d="M3.31462 16.4718C3.31462 16.9496 3.70026 17.3368 4.17609 17.3368L16.1385 17.3368C16.6144 17.3368 17 16.9496 17 16.4718L16.9998 13.6229C16.9998 13.1452 16.6142 12.7579 16.1383 12.7579L4.1764 12.7579C3.70056 12.7579 3.31492 13.1452 3.31492 13.6229L3.31512 16.4718L3.31462 16.4718Z"
-                        fill="currentColor"
-                      />
-                      <path
-                        d="M3.31462 10.4557C3.31462 10.9335 3.70026 11.3208 4.17609 11.3208L11.3428 11.3208C11.8186 11.3208 12.2043 10.9335 12.2043 10.4557L12.2043 7.60711C12.2043 7.12931 11.8186 6.74208 11.3428 6.74208L4.17609 6.74208C3.70026 6.74208 3.31462 7.12932 3.31462 7.60711L3.31462 10.4557Z"
-                        fill="currentColor"
-                      />
-                      <path
-                        d="M3.31451 1.59127L3.31451 4.44011C3.31451 4.91791 3.70016 5.30514 4.17598 5.30514L6.99509 5.30514C7.47093 5.30514 7.85657 4.91791 7.85657 4.44011L7.85637 1.59127C7.85637 1.11347 7.47073 0.726242 6.9949 0.726242L4.17599 0.726242C3.70035 0.726242 3.31452 1.11348 3.31452 1.59127L3.31451 1.59127Z"
-                        fill="currentColor"
-                      />
-                      <path
-                        d="M-2.00529e-05 0.587841L-2.0791e-05 17.4747C-2.08052e-05 17.7995 0.262306 18.0625 0.585404 18.0625L1.38198 18.0625C1.70528 18.0625 1.96741 17.7995 1.96741 17.4747L1.96741 0.587841C1.96741 0.263208 1.70508 -1.14667e-08 1.38198 -2.55897e-08L0.585405 -6.04092e-08C0.261911 -7.45496e-08 -2.00387e-05 0.263213 -2.00529e-05 0.587841Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </v-list-item-icon>
-                  <v-list-item-title>{{ $t("poll_create.create_poll_menu_option") }}</v-list-item-title></v-list-item
-                >
-              </v-list>
-            </v-menu>
-          </v-col>
        </v-row>
        <VoiceRecorder
          :micButtonRef="$refs.mic_button"
@ -508,6 +515,8 @@ export default {

      /** Calculated style for message operations. We position the "popup" at the selected message. */
      opStyle: "",
+
+      isEmojiQuickReaction: true
    };
  },

@ -897,7 +906,11 @@ export default {
        this.handleScrolledToBottom(false);
      }

-      this.showScrollToEnd = container.scrollHeight === container.clientHeight ? false : container.scrollHeight - container.scrollTop.toFixed(0) > container.clientHeight || (this.timelineWindow && this.timelineWindow.canPaginate(EventTimeline.FORWARDS));
+      this.showScrollToEnd =
+        container.scrollHeight === container.clientHeight
+          ? false
+          : container.scrollHeight - container.scrollTop.toFixed(0) > container.clientHeight ||
+            (this.timelineWindow && this.timelineWindow.canPaginate(EventTimeline.FORWARDS));

      this.restartRRTimer();
    },
@ -1263,13 +1276,21 @@ export default {
    },

    emojiSelected(e) {
+      if(this.isEmojiQuickReaction) {
+         // When quick emoji picker is clicked
+        if (this.selectedEvent) {
+          const event = this.selectedEvent;
+          this.selectedEvent = null;
+          this.sendQuickReaction({ reaction: e.data, event: event });
+        }
+      } else {
+        // When text input emoji picker is clicked
+        this.currentInput = e.data;
+        this.$refs.messageInput.focus();
+      }
+
      this.showEmojiPicker = false;
      this.$refs.messageOperationsSheet.close();
-      if (this.selectedEvent) {
-        const event = this.selectedEvent;
-        this.selectedEvent = null;
-        this.sendQuickReaction({ reaction: e.data, event: event });
-      }
    },

    sendQuickReaction(e) {
@ -1438,8 +1459,8 @@ export default {
      this.sendAttachment(text);
      this.showRecorder = false;

-      // Log event to Clean Insights
-      this.$ci.event("Audio", "Voice message sent");
+      // Log event
+      this.$analytics.event("Audio", "Voice message sent");
    },

    closeCreateRoomWelcomeHeader() {
@ -1482,6 +1503,15 @@ export default {
    onInvitationsClick() {
      this.$navigation.push({ name: "Home" }, -1);
    },
+    pollWasClosed(ignoredE) {
+      let div = document.createElement("div");
+      div.classList.add("toast");
+      div.innerText = this.$t("poll_create.results_shared");
+      this.$refs.chatContainer.parentElement.appendChild(div);
+      setTimeout(() => {
+        this.$refs.chatContainer.parentElement.removeChild(div);
+      }, 3000);
+    }
  },
 };
 </script>
--- a/src/components/CreatePollDialog.vue
+++ b/src/components/CreatePollDialog.vue
@ -1,16 +1,18 @@
 <template>
-  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
-    <div class="dialog-content text-center">
-      <template>
-        <v-icon color="black" size="30">poll</v-icon>
-        <h2 class="dialog-title">
-          {{ $t("poll_create.title") }}
-        </h2>
-        <div class="dialog-text">{{ $t("poll_create.intro") }}</div>
-      </template>
+  <div v-if="showDialog" v-show="room" class="ma-0 pa-0 fullscreen-dialog poll-create">
+    <div class="chat-header">
+      <v-container fluid>
+        <div class="room-name no-upper">{{ $t("poll_create.title") }}</div>
+        <v-btn id="btn-close" text class="header-button-right" @click.stop="showDialog = false">
+          <v-icon>close</v-icon>
+        </v-btn>
+      </v-container>
+    </div>
+
+    <div class="text-center">
      <v-form v-model="isValid" ref="pollcreateform">
        <v-container fluid class="poll-create-dialog-content">
-          <v-row cols="12">
+          <!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
            <v-col cols="12">
              <v-switch
                v-model="pollIsDisclosed"
@ -18,78 +20,79 @@
                :label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
              ></v-switch>
            </v-col>
-          </v-row>
-          <v-row cols="12">
-            <v-col cols="12">
-              <v-text-field
-                outlined
-                :disabled="isCreating"
+          </v-row> -->
+          <v-row cols="12" no-gutters class="ma-0 pa-0">
+            <v-col cols="12" class="ma-0 pa-0">
+              <InputControl
                v-model="pollQuestion"
                :label="$t('poll_create.question_label')"
-                :rules="[(v) => !!v || $t('poll_create.question_required')]"
-              ></v-text-field>
-            </v-col>
-          </v-row>
-
-          <v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id">
-            <v-col cols="12">
-              <v-text-field
-                outlined
                :disabled="isCreating"
-                v-model="answer.text"
-                :label="$t('poll_create.answer_label', { index: index + 1 })"
-                :append-icon="pollAnswers.length > 1 ? 'delete' : null"
-                @click:append="removeAnswer(index)"
-                :rules="[(v) => !!v || $t('poll_create.answer_required')]"
-              ></v-text-field>
+                :error="$t('poll_create.please_complete')"
+              />
            </v-col>
          </v-row>

-          <v-row
-            ><v-col
-              ><v-btn @click.stop="addAnswer">{{ $t("poll_create.add_answer") }}</v-btn></v-col
-            ></v-row
-          >
+          <v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
+            <v-col cols="12" class="ma-0 pa-0">
+              <InputControl
+                v-model="answer.text"
+                :label="
+                  index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 })
+                "
+                :disabled="isCreating"
+                :error="$t('poll_create.please_complete')"
+                :class="{ deletable: pollAnswers.length > 1 }"
+                ref="answerInput"
+              >
+                <v-btn v-if="pollAnswers.length > 1" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
+              </InputControl>
+            </v-col>
+          </v-row>
+
+          <v-row cols="12" no-gutters class="ma-0 pa-0">
+            <v-col class="ma-0 pa-0">
+                <div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer">
+                  <img src="@/assets/icons/ic_add.svg" />
+                </div>
+            </v-col>
+          </v-row>
        </v-container>
      </v-form>
      <div class="poll-create-status">
        {{ status }}
        <v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
      </div>
-      <v-container fluid>
-        <v-row cols="12">
-          <v-col cols="6">
-            <v-btn
-              id="btn-create-poll-cancel"
-              depressed
-              text
-              block
-              class="text-button"
-              @click="showDialog = false"
-              :disabled="isCreating"
-              >{{ $t("menu.cancel") }}</v-btn
-            >
-          </v-col>
-          <v-col cols="6" align="center">
+      <v-container>
+        <v-row justify="center">
+          <v-col cols="auto">
            <v-btn
              id="btn-create-poll"
              color="red"
              depressed
              block
-              class="filled-button"
+              class="filled-button publish-button"
              @click.stop="onCreatePoll()"
-              :disabled="isCreating"
+              :disabled="isCreating || !publishButtonEnabled"
              >{{ $t("poll_create.create") }}</v-btn
            >
          </v-col>
        </v-row>
+        <v-row>
+          <v-col cols="auto">
+            <div class="tip">
+              <b>{{ $t("poll_create.tip_title") }}</b
+              >{{ $t("poll_create.tip_text") }}
+            </div>
+          </v-col>
+        </v-row>
      </v-container>
    </div>
-  </v-dialog>
+  </div>
 </template>
 <script>
 import roomInfoMixin from "./roomInfoMixin";
 import util from "../plugins/utils";
+import InputControl from "./InputControl.vue";

 export default {
  name: "CreatePollDialog",
@ -124,13 +127,13 @@ export default {
        this.pollQuestion = defaults.pollQuestion;
        this.pollAnswers = defaults.pollAnswers;
        this.autoIncrementId = defaults.autoIncrementId;
+        this.addingAnswer = defaults.addingAnswer;
        if (this.$refs.pollcreateform) {
          this.$refs.pollcreateform.resetValidation();
        }
      }
    },
  },
-
  methods: {
    defaultData() {
      return {
@ -138,20 +141,29 @@ export default {
        isValid: true,
        isCreating: false,
        status: String.fromCharCode(160),
-        pollIsDisclosed: true,
-        pollQuestion: "",
+        pollIsDisclosed: false,
+        pollQuestion: null,
        pollAnswers: [
-          { id: "1", text: "" },
-          { id: "2", text: "" },
+          { id: "1", text: null },
+          { id: "2", text: null },
        ],
        autoIncrementId: 2,
+        addingAnswer: false,
      };
    },
    addAnswer() {
      if (this.pollAnswers.length < 20) {
        // MAX length according to spec
+        this.addingAnswer = true;
+        const idx = this.pollAnswers.length;
        this.autoIncrementId += 1;
-        this.pollAnswers.push({ id: "" + this.autoIncrementId, text: "" });
+        this.pollAnswers.push({ id: "" + this.autoIncrementId, text: null });
+        this.$nextTick(() => {
+          this.$refs.answerInput[idx].focus();
+          this.$nextTick(() => {
+            this.addingAnswer = false;
+          });
+        });
      }
    },
    removeAnswer(index) {
@ -179,17 +191,35 @@ export default {
            this.isCreating = false;
            this.status = this.$t("poll_create.failed");
          });
-
        setTimeout(() => {}, 3000);
      } else {
        this.isValid = false;
      }
    },
  },
+  computed: {
+    publishButtonEnabled() {
+      return this.pollQuestion && this.pollAnswers.length > 0 && this.pollAnswers.every(a => a.text);
+    }
+  },
+  components: { InputControl },
 };
 </script>

 <style lang="scss">
@import "@/assets/css/chat.scss";
@import "@/assets/css/components/poll.scss";
+.fullscreen-dialog {
+  background-color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  .chat-header {
+    position: static;
+    border: none;
+  }
+}
 </style>
--- a/src/components/InputControl.vue
+++ b/src/components/InputControl.vue
@ -0,0 +1,163 @@
+<template>
+  <div :class="{ 'input-field': true, errored: modelValue !== null && modelValue.length <= 0 }">
+    <input
+      ref="input"
+      type="text"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+      v-on:blur="onBlur"
+    />
+    <div class="placeholder-container">
+      <div :class="{ placeholder: true, large: !modelValue || modelValue.length == 0 }">
+        {{ label }}
+      </div>
+      <div class="error-message" v-if="modelValue !== null && modelValue.length <= 0">{{ error }}</div>
+    </div>
+    <div class="slot">
+     <slot></slot>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InputControl",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue",
+  },
+  props: {
+    label: {
+      type: String,
+      default: function() {
+        return "";
+      },
+    },
+    error: {
+      type: String,
+      default: function() {
+        return "";
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default: function() {
+        return false;
+      },
+    },
+    modelValue: {
+      type: String,
+      default: function() {
+        return null;
+      },
+    },
+  },
+
+  methods: {
+    focus() {
+      this.$refs.input.focus();
+    },
+    onBlur() {
+      if (this.modelValue === null) {
+        this.$emit("update:modelValue", "");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+
+.input-field {
+  width: 100%;
+  display: flex;
+  position: relative;
+  min-height: 48px;
+
+  background: #f5f5f5;
+  border-radius: 4px;
+  transition: background-color 0.4s, box-shadow 0.4s;
+  margin-bottom: 12px;
+  &.errored {
+    border: 1px solid #e31b00;
+  }
+
+  &:focus-within {
+    background: white;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+  }
+
+  .placeholder-container {
+    position: absolute;
+    top: 8px;
+    left: 16px;
+    right: 16px;
+    display: flex;
+  }
+  .placeholder {
+    text-align: start;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    user-select: none;
+    pointer-events: none;
+    font-size: 12px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+    margin-right: 4px;
+  }
+
+  .error-message {
+    color: #e31b00;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+  }
+
+  &:not(:focus-within) .placeholder.large {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 14px;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.7);
+    margin-right: 0px;
+    &:only-child {
+      top: 8px;
+    }
+  }
+
+  input {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+    color: #000000;
+    position: absolute;
+    top: 12px;
+    left: 16px;
+    right: 16px;
+    bottom: 0;
+    &:focus {
+      top: 12px;
+    }
+    &:focus,
+    &:focus-visible {
+      border: none;
+      outline: none;
+    }
+  }
+
+  .slot {
+    position: absolute;
+    right: 16px;
+    align-self: center;
+  }
+}
+</style>
--- a/src/components/LogoutRoomDialog.vue
+++ b/src/components/LogoutRoomDialog.vue
@ -0,0 +1,54 @@
+<template>
+  <v-dialog
+    :value="showLogoutPopup"
+    class="ma-0 pa-0"
+    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+    @click:outside="$emit('onOutsideLogoutPopupClicked')"
+  >
+    <div class="dialog-content text-center">
+      <template>
+        <h2 class="dialog-title">
+         {{ $t("logout.confirm_text")}}
+        </h2>
+      </template>
+      <v-container fluid>
+        <v-row cols="12">
+          <v-col cols="6">
+            <v-btn
+              depressed
+              text
+              block
+              class="text-button"
+              @click.stop="$emit('onCancelLogoutClicked')"
+              >{{ $t("menu.cancel") }}</v-btn
+            >
+          </v-col>
+          <v-col cols="6" align="center">
+            <v-btn
+              color="red"
+              depressed
+              block
+              class="filled-button"
+              @click.stop="logout"
+              >{{ $t("menu.logout") }}</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </v-dialog>
+</template>
+<script>
+import profileInfoMixin from "./profileInfoMixin";
+
+export default {
+  name: "LogoutRoomDialog",
+  mixins: [profileInfoMixin],
+  props: {
+    showLogoutPopup: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@ -53,9 +53,14 @@
          <!-- <div v-if="$matrix.currentUser.is_guest">
            {{ $t("profile.temporary_identity") }}
          </div> -->
-          <v-btn id="btn-logout" depressed block class="outlined-button" @click.stop="logout">{{
-            $t("menu.logout")
-          }}</v-btn>
+          <v-btn id="btn-logout" depressed block class="outlined-button" @click.stop="showLogoutPopup=true">
+            {{ $t("menu.logout") }}
+          </v-btn>
+          <LogoutRoomDialog
+            :showLogoutPopup="showLogoutPopup"
+            @onOutsideLogoutPopupClicked="showLogoutPopup=false"
+            @onCancelLogoutClicked="showLogoutPopup=false"
+          />
        </v-col>
      </v-row>
    </v-container>
@ -182,6 +187,7 @@ const sizeOf = require("image-size");
 //const dataUriToBuffer = require("data-uri-to-buffer");
 import util from "../plugins/utils";
 import profileInfoMixin from "./profileInfoMixin";
+import LogoutRoomDialog from './LogoutRoomDialog.vue';

 export default {
  name: "Profile",
@ -189,12 +195,14 @@ export default {
  components: {
    ActionRow,
    SelectLanguageDialog,
+    LogoutRoomDialog,
  },
  data() {
    return {
      showEditPasswordDialog: false,
      showEditDisplaynameDialog: false,
      showSelectLanguageDialog: false,
+      showLogoutPopup: false,
      editValue: null,
      password: null,
      newPassword1: null,
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@ -60,10 +60,15 @@
            :text="$t('profile_info_popup.edit_profile')"
          />
          <ActionRow
-            @click="logout"
+            @click.stop="showLogoutPopup=true"
            :icon="'logout'"
            :text="$t('profile_info_popup.logout')"
          />
+          <LogoutRoomDialog
+            :showLogoutPopup="showLogoutPopup"
+            @onOutsideLogoutPopupClicked="showLogoutPopup=false"
+            @onCancelLogoutClicked="showLogoutPopup=false"
+          />
        </v-container>

        <div class="more-container">
@ -89,12 +94,14 @@
 <script>
 import profileInfoMixin from "./profileInfoMixin";
 import ActionRow from "./ActionRow.vue";
+import LogoutRoomDialog from './LogoutRoomDialog.vue';

 export default {
  name: "ProfileInfoPopup",
  mixins: [profileInfoMixin],
  components: {
    ActionRow,
+    LogoutRoomDialog
  },
  props: {
    show: {
@ -107,7 +114,8 @@ export default {
  data() {
    return {
      showDialog: false,
-      editDisplayName: false
+      editDisplayName: false,
+      showLogoutPopup: false
    };
  },
  computed: {
--- a/src/components/RoomAvatarPicker.vue
+++ b/src/components/RoomAvatarPicker.vue
@ -0,0 +1,68 @@
+<template>
+  <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker:null" v-if="isRoomAvatarLoaded">
+    <v-img v-if="roomAvatar" :src="roomAvatar"/>
+    <span v-else class="white--text headline">{{
+      roomName.substring(0, 1).toUpperCase()
+    }}</span>
+      <input
+      id="room-avatar-picker"
+      ref="roomAvatar"
+      type="file"
+      name="roomAvatar"
+      @change="handleRoomPickedAvatar($event)"
+      accept="image/*"
+      class="d-none"
+    />
+  </v-avatar>
+  <v-progress-circular
+    :rotate="360"
+    v-else
+    :width="3"
+    :value="loadValue"
+    color="primary"
+  >
+    {{ loadValue }}
+  </v-progress-circular>
+</template>
+
+<script>
+import util from "../plugins/utils";
+import roomInfoMixin from "./roomInfoMixin";
+
+export default {
+  name: "RoomAvatarPicker",
+  mixins: [roomInfoMixin],
+  data() {
+    return {
+      isRoomAvatarLoaded: true,
+      loadValue: 0
+    };
+  },
+  methods: {
+    showRoomAvatarPicker() {
+      this.$refs.roomAvatar.click();
+    },
+
+    setRoomAvatar(file) {
+      const self = this;
+      this.isRoomAvatarLoaded = false;
+      return util.setRoomAvatar(
+        this.$matrix.matrixClient,
+        this.room.roomId,
+        file,
+        function (progress) {
+          self.loadValue = Math.round(progress.loaded/progress.total * 100);
+          if(progress.loaded === progress.total) {
+            self.isRoomAvatarLoaded = true;
+          }
+        }
+      )
+    },
+    handleRoomPickedAvatar(event) {
+      if (event.target.files && event.target.files[0]) {
+        this.setRoomAvatar(event.target.files[0]);
+      }
+    }
+  }
+};
+</script>
--- a/src/components/RoomExport.vue
+++ b/src/components/RoomExport.vue
@ -33,7 +33,6 @@
                :room="room"
                :event="event"
                :nextEvent="events[index + 1]"
-                :reactions="timelineSet.getRelationsForEvent(event.getId(), 'm.annotation', 'm.reaction')"
                :timelineSet="timelineSet"
                ref="exportedEvent"
              />
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@ -24,12 +24,7 @@
    </div>

    <div class="members ma-3 pa-3 mt-0 pt-0 text-center">
-      <v-avatar class="room-avatar">
-        <v-img v-if="roomAvatar" :src="roomAvatar" />
-        <span v-else class="white--text headline">{{
-          roomName.substring(0, 1).toUpperCase()
-        }}</span>
-      </v-avatar>
+      <room-avatar-picker />
      <div class="name">{{ roomName }}</div>
      <div class="topic">{{ roomTopic }}</div>
      <div class="created-by">
@ -190,7 +185,7 @@
        >{{ $t("room_info.purge") }}</v-btn
      >
    </div>
-    
+
    <div class="build-version">
      {{ $t("room_info.version_info", { version: buildVersion }) }}
    </div>
@ -218,6 +213,7 @@ import LeaveRoomDialog from "../components/LeaveRoomDialog";
 import PurgeRoomDialog from "../components/PurgeRoomDialog";
 import DeviceList from "../components/DeviceList";
 import RoomExport from "../components/RoomExport";
+import RoomAvatarPicker from "../components/RoomAvatarPicker";
 import QRCode from "qrcode";
 import roomInfoMixin from "./roomInfoMixin";
 import QRCodePopup from './QRCodePopup.vue';
@ -232,6 +228,7 @@ export default {
    DeviceList,
    RoomExport,
    QRCodePopup,
+    RoomAvatarPicker
  },
  data() {
    return {
--- a/src/components/RoomInfoBottomSheet.vue
+++ b/src/components/RoomInfoBottomSheet.vue
@ -1,34 +1,12 @@
 <template>
  <BottomSheet
    class="room-info-bottom-sheet"
+    :halfY="0.12"
    ref="sheet"
  >
    <div class="room-info-sheet" ref="roomInfoSheetContent">
      <div class="text-center current-room">
-        <v-avatar class="room-avatar cursor-pointer" @click="showRoomAvatarPicker" v-if="isRoomAvatarLoaded">
-          <v-img v-if="roomAvatar" :src="roomAvatar"/>
-          <span v-else class="white--text headline">{{
-            roomName.substring(0, 1).toUpperCase()
-          }}</span>
-           <input
-            id="room-avatar-picker"
-            ref="roomAvatar"
-            type="file"
-            name="roomAvatar"
-            @change="handleRoomPickedAvatar($event)"
-            accept="image/*"
-            class="d-none"
-          />
-        </v-avatar>
-        <v-progress-circular
-          :rotate="360"
-          v-else
-          :width="3"
-          :value="loadValue"
-          color="primary"
-        >
-          {{ loadValue }}
-        </v-progress-circular>
+        <room-avatar-picker />
        <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
        <div class="h2">{{ roomName }}</div>
        <v-btn
@ -46,23 +24,18 @@
 </template>

 <script>
-import util from "../plugins/utils";
 import BottomSheet from "./BottomSheet";
-import RoomList from "./RoomList.vue";
+import RoomAvatarPicker from "./RoomAvatarPicker";
+import RoomList from "./RoomList";
 import roomInfoMixin from "./roomInfoMixin";

 export default {
  name: "RoomInfoBottomSheet",
  mixins: [roomInfoMixin],
-  data() {
-    return {
-      isRoomAvatarLoaded: true,
-      loadValue: 0
-    }
-  },
  components: {
    BottomSheet,
    RoomList,
+    RoomAvatarPicker,
  },
  methods: {
    open() {
@ -81,35 +54,7 @@ export default {
    createRoom() {
      this.close();
      this.$navigation.push({ name: "CreateRoom" });
-    },
-
-    showRoomAvatarPicker() {
-      this.$refs.roomAvatar.click();
-    },
-
-    setRoomAvatar(file) {
-      const self = this;
-      this.isRoomAvatarLoaded = false;
-      return util.setRoomAvatar(
-        this.$matrix.matrixClient,
-        this.room.roomId,
-        file,
-        function (progress) {
-          self.loadValue = Math.round(progress.loaded/progress.total * 100);
-          if(progress.loaded === progress.total) {
-            self.isRoomAvatarLoaded = true;
-          }
-        }
-      );
-    },
-    /**
-     * Handle room picked avatar
-     */
-    handleRoomPickedAvatar(event) {
-      if (event.target.files && event.target.files[0]) {
-        this.setRoomAvatar(event.target.files[0]);
-      }
-    },
+    }
  }
 };
 </script>
--- a/src/components/messages/ContactLeave.vue
+++ b/src/components/messages/ContactLeave.vue
@ -10,6 +10,11 @@ import messageMixin from "./messageMixin";

 export default {
  mixins: [messageMixin],
+  mounted() {
+    if(this.room.getJoinedMemberCount() === 0) {
+      this.$navigation.push({ name: "Home", params: { roomId: null } }, -1);
+    }
+  }
 };
 </script>

--- a/src/components/messages/MessageIncoming.vue
+++ b/src/components/messages/MessageIncoming.vue
@ -20,7 +20,7 @@
        ><v-icon>more_vert</v-icon></v-btn
      >
    </div>
-    <QuickReactions :event="event" :reactions="reactions" />
+    <QuickReactions :event="event" :timelineSet="timelineSet" />
  </div>
 </template>

--- a/src/components/messages/MessageIncomingPoll.vue
+++ b/src/components/messages/MessageIncomingPoll.vue
@ -21,6 +21,7 @@
          />
        </svg>
      </div>
+
      <div class="poll-question">{{ pollQuestion }}</div>
      <v-container fluid ma-0 pa-0>
        <v-row
@ -30,8 +31,8 @@
          :class="{
            'poll-answer': true,
            selected: !userHasVoted && answer.id == pollTentativeAnswer,
-            result: userHasVoted || pollIsClosed,
-            winner: answer.winner,
+            result: userHasVoted || pollIsClosed || pollViewResults,
+            winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
          }"
          ma-0
          pa-0
@ -41,41 +42,55 @@
            ><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
          /></v-col>
          <v-col
-            v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
+            v-if="
+              pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
+            "
            cols="auto"
            class="ma-0 pa-0 poll-answer-num-votes"
            >{{ answer.percentage }}%</v-col
          >
-          <div v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin" class="poll-percent-indicator">
+          <div
+            v-if="
+              pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
+            "
+            class="poll-percent-indicator"
+          >
            <div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
          </div>
        </v-row>
-        <v-row class="poll-status">
-          <v-col cols="auto" class="ma-0 pa-0 poll-status-title">
+        <v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
+          <v-col class="ma-0 pa-0" cols="auto"
+            ><div class="poll-submit clickable" @click.stop="pollAnswerSubmit">
+              {{ $t("poll_create.poll_submit") }}
+            </div>
+          </v-col>
+        </v-row>
+        <v-row v-else class="pa-0 poll-status">
+          <v-col class="ma-0 pa-0 poll-status-title">
            {{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
          </v-col>
-          <!-- <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
-            pollIsClosed
-              ? $t("poll_create.poll_status_closed")
-              : pollIsDisclosed
-              ? userHasVoted
-                ? $t("poll_create.poll_status_open")
-                : $t("poll_create.poll_status_open_not_voted")
-              : $t("poll_create.poll_status_disclosed")
-          }}</v-col> -->
-          <v-col
-            cols="auto"
-            class="ma-0 pa-0 poll-status-close clickable"
-            v-if="!pollIsClosed && userCanClosePoll"
-            @click.stop="pollClose"
-            >{{ $t("poll_create.close_poll") }}</v-col
-          >
-        </v-row>
-        <v-row v-if="pollTentativeAnswer" justify="center">
-          <v-col cols="auto" class="ma-0 pa-0 poll-submit">
-            <v-btn @click.stop="pollAnswerSubmit">
-              {{ $t("poll_create.poll_submit") }}
-            </v-btn>
+          <v-col cols="auto" class="ma-0 pa-0">
+            <div
+              :class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
+              v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
+            >
+              {{ $t("poll_create.view_results") }}
+
+              <div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
+                <div class="poll-disclose-knob"></div>
+              </div>
+            </div>
+            <div
+              class="poll-status-close clickable"
+              v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
+              @click.stop="pollClose"
+            >
+              {{ $t("poll_create.close_poll") }}
+            </div>
+            <div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
+              <img class="icon" src="@/assets/icons/ic_check_small.svg" />
+              {{ $t("poll_create.poll_status_closed") }}
+            </div>
          </v-col>
        </v-row>
      </v-container>
--- a/src/components/messages/MessageOutgoing.vue
+++ b/src/components/messages/MessageOutgoing.vue
@ -8,7 +8,7 @@
      <div class="status">{{ event.status }}</div>
    </div>

-    <QuickReactions :event="event" :reactions="reactions" />
+    <QuickReactions :event="event" :timelineSet="timelineSet" />
    <div class="op-button" ref="opbutton">
      <v-btn id="btn-show-menu" icon @click.stop="showContextMenu($refs.opbutton)"
        ><v-icon>more_vert</v-icon></v-btn
--- a/src/components/messages/MessageOutgoingPoll.vue
+++ b/src/components/messages/MessageOutgoingPoll.vue
@ -31,8 +31,8 @@
          :class="{
            'poll-answer': true,
            selected: !userHasVoted && answer.id == pollTentativeAnswer,
-            result: userHasVoted || pollIsClosed,
-            winner: answer.winner,
+            result: userHasVoted || pollIsClosed || pollViewResults,
+            winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
          }"
          ma-0
          pa-0
@ -42,41 +42,55 @@
            ><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
          /></v-col>
          <v-col
-            v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
+            v-if="
+              pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
+            "
            cols="auto"
            class="ma-0 pa-0 poll-answer-num-votes"
            >{{ answer.percentage }}%</v-col
          >
-          <div v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin" class="poll-percent-indicator">
+          <div
+            v-if="
+              pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
+            "
+            class="poll-percent-indicator"
+          >
            <div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
          </div>
        </v-row>
-        <v-row class="poll-status">
-          <v-col cols="auto" class="ma-0 pa-0 poll-status-title">
+        <v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
+          <v-col class="ma-0 pa-0" cols="auto"
+            ><div class="poll-submit clickable" @click.stop="pollAnswerSubmit">
+              {{ $t("poll_create.poll_submit") }}
+            </div>
+          </v-col>
+        </v-row>
+        <v-row v-else class="pa-0 poll-status">
+          <v-col class="ma-0 pa-0 poll-status-title">
            {{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
          </v-col>
-          <!-- <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
-            pollIsClosed
-              ? $t("poll_create.poll_status_closed")
-              : pollIsDisclosed
-              ? userHasVoted
-                ? $t("poll_create.poll_status_open")
-                : $t("poll_create.poll_status_open_not_voted")
-              : $t("poll_create.poll_status_disclosed")
-          }}</v-col> -->
-          <v-col
-            cols="auto"
-            class="ma-0 pa-0 poll-status-close clickable"
-            v-if="!pollIsClosed && userCanClosePoll"
-            @click.stop="pollClose"
-            >{{ $t("poll_create.close_poll") }}</v-col
-          >
-        </v-row>
-        <v-row v-if="pollTentativeAnswer" justify="center">
-          <v-col cols="auto" class="ma-0 pa-0 poll-submit">
-            <v-btn @click.stop="pollAnswerSubmit">
-              {{ $t("poll_create.poll_submit") }}
-            </v-btn>
+          <v-col cols="auto" class="ma-0 pa-0">
+            <div
+              :class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
+              v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
+            >
+              {{ $t("poll_create.view_results") }}
+
+              <div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
+                <div class="poll-disclose-knob"></div>
+              </div>
+            </div>
+            <div
+              class="poll-status-close clickable"
+              v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
+              @click.stop="pollClose"
+            >
+              {{ $t("poll_create.close_poll") }}
+            </div>
+            <div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
+              <img class="icon" src="@/assets/icons/ic_check_small.svg" />
+              {{ $t("poll_create.poll_status_closed") }}
+            </div>
          </v-col>
        </v-row>
      </v-container>
--- a/src/components/messages/QuickReactions.vue
+++ b/src/components/messages/QuickReactions.vue
@ -15,24 +15,33 @@ export default {
        return {}
      }
    },
-    reactions: {
+        timelineSet: {
      type: Object,
      default: function () {
        return null
      }
-    }
+    },
  },
  data() {
    return {
-      reactionMap: {}
+      reactionMap: {},
+      reactions: null
    }
  },
+  mounted() {
+    this.reactions = this.timelineSet.getRelationsForEvent(this.event.getId(), 'm.annotation', 'm.reaction');
+    this.event.on("Event.relationsCreated", this.onRelationsCreated);
+  },
  beforeDestroy() {
+    this.event.off("Event.relationsCreated", this.onRelationsCreated);
    if (this.reactions) {
      this.reactions.off('Relations.add', this.onAddRelation);
    }
  },
  methods: {
+    onRelationsCreated() {
+      this.reactions = this.timelineSet.getRelationsForEvent(this.event.getId(), 'm.annotation', 'm.reaction');
+    },
    onClickEmoji(emoji) {
      this.$bubble('send-quick-reaction', {reaction:emoji, event:this.event});
    },
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@ -27,12 +27,6 @@ export default {
        return null
      }
    },
-    reactions: {
-      type: Object,
-      default: function () {
-        return null
-      }
-    },
    timelineSet: {
      type: Object,
      default: function () {
--- a/src/components/messages/pollMixin.js
+++ b/src/components/messages/pollMixin.js
@ -11,6 +11,7 @@ export default {
      pollEndTs: null,
      pollIsDisclosed: true,
      pollTentativeAnswer: null,
+      pollViewResults: false,
    };
  },
  mounted() {
@ -145,8 +146,13 @@ export default {
      this.pollTotalVotes = totalVotes;
    },
    pollAnswer(id) {
-      if (!this.userHasVoted) {
-        this.pollTentativeAnswer = id;
+      // Only if not voted and not currently viewing poll results.
+      if (!this.userHasVoted && !this.pollViewResults) {
+        if (id == this.pollTentativeAnswer) {
+          this.pollTentativeAnswer = null;
+        } else {
+          this.pollTentativeAnswer = id;
+        }
      }
    },
    pollAnswerSubmit() {
@ -163,7 +169,9 @@ export default {
        });
    },
    pollClose() {
-      util.closePoll(this.$matrix.matrixClient, this.room.roomId, this.event).catch((err) => {
+      util.closePoll(this.$matrix.matrixClient, this.room.roomId, this.event).then(() => {
+        this.$emit("poll-closed", this);
+      }).catch((err) => {
        console.log("Failed to send:", err);
      });
    },
--- a/src/main.js
+++ b/src/main.js
@ -7,7 +7,7 @@ import router from './router'
 import matrix from './services/matrix.service'
 import navigation from './services/navigation.service'
 import config from './services/config.service'
-import cleaninsights from './services/cleaninsights.service'
+import analytics from './services/analytics.service'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import 'material-design-icons-iconfont/dist/material-design-icons.css'
 import VEmojiPicker from 'v-emoji-picker';
@ -27,7 +27,7 @@ Vue.use(VueResize);
 Vue.use(VEmojiPicker);
 Vue.use(matrix, { store: store, i18n: i18n });
 Vue.use(config); // Use this before cleaninsights below, it depends on config!
-Vue.use(cleaninsights);
+Vue.use(analytics);
 Vue.use(VueClipboard);

 // Add bubble functionality to custom events.
@ -159,6 +159,6 @@ new Vue({
  router,
  matrix,
  config,
-  cleaninsights,
+  analytics,
  render: h => h(App)
 }).$mount('#app');
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@ -389,8 +389,12 @@ class Util {
    }

    /** Generate a random user name */
-    randomUser() {
-        return this.randomString(
+    randomUser(prefix) {
+        var pfx = prefix ? prefix.replace(/[^0-9a-zA-Z\-_]/gi, '') : null;
+        if (!pfx || pfx.length == 0) {
+            pfx = "weblite-";
+        }
+        return pfx + this.randomString(
            12,
            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
        );
--- a/src/services/analytics.service.js
+++ b/src/services/analytics.service.js
@ -0,0 +1,65 @@
+import cleaninsights from './cleaninsights.service'
+import matomo from './matomo.service'
+
+export default {
+    install(Vue) {
+        const analyticsService = new Vue({
+            data() {
+                return {
+                    engines: [],
+                    cachedEvents: [],
+                    initialized: false
+                }
+            },
+            created() {
+                this.$config.promise.then((config) => {
+                    var analytics = config.analytics || {};
+                    if (!Array.isArray(analytics)) {
+                        analytics = [analytics];
+                    }
+                    for (const engineConfig of analytics) {
+                        if (engineConfig.enabled) {
+                            let type = engineConfig.type || "ci";
+                            switch (type) {
+                                case "ci":
+                                    {
+                                        let engine = cleaninsights.install(Vue, engineConfig.config);
+                                        this.engines.push(engine);
+                                    }
+                                    break;
+                                case "matomo":
+                                    {
+                                        let engine = matomo.install(Vue, engineConfig.config);
+                                        this.engines.push(engine);
+                                    }
+                                    break;
+                                }
+                        }
+                    }
+
+                    this.initialized = true;
+
+                    // Handle cached events
+                    this.cachedEvents.forEach(([category, action]) => {
+                        this.event(category, action);
+                    })
+                    this.cachedEvents = [];
+                });
+            },
+            methods: {
+                event(category, action) {
+                    if (!this.initialized) {
+                        this.cachedEvents.push([category, action]);
+                        return
+                    }
+
+                    // Send the event to each configured analytics engine.
+                    this.engines.forEach((engine) => {
+                        engine.event(category, action);
+                    });
+                }
+            }
+        });
+        Vue.prototype.$analytics = analyticsService;
+    }
+}
--- a/src/services/cleaninsights.service.js
+++ b/src/services/cleaninsights.service.js
@ -1,7 +1,7 @@
 import { CleanInsights, ConsentRequestUi } from 'clean-insights-sdk';

 export default {
-    install(Vue) {
+    install(Vue, config) {

        class RequestUi extends ConsentRequestUi {
            showForCampaign(campaignId, campaign, complete) {
@ -18,6 +18,7 @@ export default {
        }

        const cleanInsightsService = new Vue({
+            config: config,
            data() {
                return {
                    ci: null,
@ -26,17 +27,14 @@ export default {
                }
            },
            created() {
-                const self = this;
-                this.$config.promise.then(function (config) {
-                    const analytics = config.analytics || {};
-                    if (analytics.enabled && analytics.config) {
-                        self.ci = new CleanInsights(analytics.config);
+                if (this.$options.config) {
+                    const config = this.$options.config;
+                    this.ci = new CleanInsights(config);

-                        // Get name of first campaign in the config.
-                        self.campaignId = Object.keys(analytics.config.campaigns || { invalid: {} })[0];
-                    }
+                    // Get name of first campaign in the config.
+                    this.campaignId = Object.keys(config.campaigns || { invalid: {} })[0];                

-                });
+                }
            },
            methods: {
                event(category, action) {
@ -55,6 +53,6 @@ export default {
                }
            }
        });
-        Vue.prototype.$ci = cleanInsightsService;
+        return cleanInsightsService;
    }
 }
--- a/src/services/matomo.service.js
+++ b/src/services/matomo.service.js
@ -0,0 +1,51 @@
+
+export default {
+    install(Vue, config) {
+
+        const matomoService = new Vue({
+            config: config,
+            data() {
+                return {
+                    initialized: false
+                }
+            },
+            created() {
+                if (this.$options.config) {
+                    const config = this.$options.config;
+                    let server = config.server;
+                    let siteId = config.siteId;
+                    if (server && siteId) {
+                        if (!server.endsWith("/")) {
+                            server = server + "/";
+                        }
+                        let script = `
+                          var _paq = window._paq = window._paq || [];
+                          /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+                          _paq.push(['trackPageView']);
+                          _paq.push(['enableLinkTracking']);
+                          (function() {
+                            var u="${server}";
+                            _paq.push(['setTrackerUrl', u+'matomo.php']);
+                            _paq.push(['setSiteId', '${siteId}']);
+                            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                            g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+                          })();
+                        `;
+                        var s = document.createElement('script');
+                        s.innerHTML = script;
+                        document.body.appendChild(s);   
+                        this.initialized = true;
+                    }
+                }
+            },
+            methods: {
+                event(category, action) {
+                    if (this.initialized) {
+                        window._paq.push(['trackEvent', category, action]);
+                    }
+                }
+            }
+        });
+        return matomoService;
+    }
+}
--- a/src/services/matrix.service.js
+++ b/src/services/matrix.service.js
@ -115,7 +115,7 @@ export default {
            // can not use avatars and 3. They can not seamlessly be upgraded to real accounts.
            //
            // Instead, we use an ILAG approach, Improved Landing as Guest.
-            const user = util.randomUser();
+            const user = util.randomUser(this.$config.userIdPrefix);
            const pass = util.randomPass();
            promiseLogin = tempMatrixClient
              .register(user, pass, null, {
@ -854,7 +854,7 @@ export default {
            if (tempUser) {
              clientPromise = Promise.resolve(tempUser);
            } else {
-              const user = util.randomUser();
+              const user = util.randomUser(this.$config.userIdPrefix);
              const pass = util.randomPass();
              clientPromise = tempMatrixClient
                .register(user, pass, null, {