Initial implementation of "audio mode"
This commit is contained in:
N Pex
parent
d5942fdb8e
commit
09173a65f1
14 changed files with 944 additions and 410 deletions
|
|
@ -5,6 +5,17 @@
|
|||
$admin-bg: black;
|
||||
$admin-fg: white;
|
||||
|
||||
body {
|
||||
--v-background-color: white;
|
||||
--v-foreground-color: black;
|
||||
--v-divider-color: #eeeeee;
|
||||
&.dark {
|
||||
--v-background-color: black;
|
||||
--v-foreground-color: white;
|
||||
--v-divider-color: rgba(221, 221, 221, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.home {
|
||||
.v-card {
|
||||
background-color: white;
|
||||
|
|
@ -30,8 +41,8 @@ $admin-fg: white;
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
height: 72px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
background-color: var(--v-background-color);
|
||||
border-bottom: 1px solid var(--v-divider-color);
|
||||
.chat-header-row {
|
||||
margin: 0;
|
||||
padding: 4px 10px;
|
||||
|
|
@ -47,15 +58,15 @@ $admin-fg: white;
|
|||
font-family: "Inter", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 12 * $chat-text-size;
|
||||
color: black;
|
||||
color: var(--v-foreground-color);
|
||||
}
|
||||
.v-btn.leave-button {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: black;
|
||||
background-color: white !important;
|
||||
border: 1px solid black;
|
||||
color: var(--v-foreground-color);
|
||||
background-color: var(--v-background-color) !important;
|
||||
border: 1px solid var(--v-foreground-color);
|
||||
border-radius: $chat-standard-padding / 2;
|
||||
height: $chat-standard-padding;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
|
|
@ -65,9 +76,9 @@ $admin-fg: white;
|
|||
font-family: "Inter", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: black;
|
||||
background-color: white !important;
|
||||
border: 1px solid black;
|
||||
color: var(--v-foreground-color);
|
||||
background-color: var(--v-background-color) !important;
|
||||
border: 1px solid var(--v-foreground-color);
|
||||
border-radius: $chat-standard-padding / 2;
|
||||
height: $chat-standard-padding;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
|
|
@ -699,7 +710,7 @@ $admin-fg: white;
|
|||
font-weight: 700;
|
||||
font-size: 18 * $chat-text-size;
|
||||
text-transform: uppercase;
|
||||
color: black;
|
||||
color: var(--v-foreground-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -1217,3 +1228,104 @@ $admin-fg: white;
|
|||
opacity: 1;
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.auto-audio-player-root {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
background-color: var(--v-background-color);
|
||||
color: var(--v-foreground-color);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
.load-earlier {
|
||||
flex: 1 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.load-later {
|
||||
flex: 1 0 auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
.mic-button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.senderAndTime {
|
||||
.sender {
|
||||
margin-left: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.time {
|
||||
color: inherit;
|
||||
}
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
}
|
||||
.sound-wave-view {
|
||||
width: 80%;
|
||||
max-width: 40vh;
|
||||
aspect-ratio: 1/1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.volume-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
div {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.avatar {
|
||||
width: 103px !important;
|
||||
height: 103px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
#btn-play, #btn-pause {
|
||||
margin: 26px;
|
||||
}
|
||||
.mic-button {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-layout.voice-recorder {
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
12
src/assets/icons/forward.vue
Normal file
12
src/assets/icons/forward.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.1139 12.9866V18.8048H10.8838V14.1542H10.8497L9.5173 14.9894V13.8985L10.9576 12.9866H12.1139Z"
|
||||
fill="white" />
|
||||
<path
|
||||
d="M16.0217 18.8843C15.6202 18.8843 15.2622 18.8105 14.9478 18.6627C14.6353 18.515 14.3872 18.3114 14.2035 18.0519C14.0198 17.7925 13.9242 17.4951 13.9166 17.1599H15.1098C15.123 17.3853 15.2177 17.568 15.3939 17.7082C15.57 17.8483 15.7793 17.9184 16.0217 17.9184C16.2149 17.9184 16.3853 17.8758 16.5331 17.7906C16.6827 17.7035 16.7992 17.5832 16.8825 17.4298C16.9677 17.2745 17.0103 17.0965 17.0103 16.8957C17.0103 16.6911 16.9668 16.5112 16.8797 16.3559C16.7944 16.2006 16.6761 16.0794 16.5245 15.9923C16.373 15.9052 16.1997 15.8607 16.0047 15.8588C15.8342 15.8588 15.6685 15.8938 15.5075 15.9639C15.3484 16.034 15.2244 16.1296 15.1353 16.2508L14.0416 16.0548L14.3172 12.9866H17.874V13.9923H15.3314L15.1808 15.4497H15.2149C15.3172 15.3057 15.4715 15.1864 15.678 15.0917C15.8844 14.997 16.1155 14.9497 16.3711 14.9497C16.7215 14.9497 17.034 15.0321 17.3086 15.1968C17.5833 15.3616 17.8001 15.5879 17.9592 15.8758C18.1183 16.1618 18.1969 16.4913 18.195 16.8644C18.1969 17.2565 18.106 17.605 17.9223 17.9099C17.7405 18.2129 17.4857 18.4516 17.1581 18.6258C16.8323 18.7982 16.4535 18.8843 16.0217 18.8843Z"
|
||||
fill="white" />
|
||||
<path
|
||||
d="M23.3999 3.78127C22.5345 3.06825 21.5861 2.44517 20.5684 1.95368C18.6714 1.02603 16.5392 0.499957 14.303 0.499957C10.3568 0.499957 6.77761 2.10604 4.18839 4.69517C1.60608 7.27737 -7.82013e-05 10.8564 -7.82013e-05 14.8024C-7.82013e-05 18.7484 1.60608 22.3275 4.18839 24.9097C6.77767 27.4989 10.3568 29.1049 14.303 29.1049C17.2799 29.1049 20.063 28.1841 22.3545 26.6058C24.7153 24.9927 26.5638 22.6805 27.623 19.9599C27.8099 19.4753 27.5676 18.9215 27.076 18.7346C26.5914 18.5476 26.0376 18.79 25.8507 19.2815C24.9368 21.6353 23.3307 23.6428 21.2884 25.0412C19.3015 26.3981 16.8922 27.2011 14.303 27.2011C10.876 27.2011 7.77451 25.8097 5.53143 23.5667C3.29528 21.3306 1.90374 18.2292 1.90374 14.8024C1.90374 11.3756 3.29522 8.27422 5.53143 6.03816C7.77457 3.79512 10.876 2.40369 14.303 2.40369C16.2553 2.40369 18.1037 2.8606 19.7376 3.65675C20.5614 4.05833 21.3368 4.55668 22.0499 5.12435L18.5122 8.6619C18.3323 8.84184 18.3323 9.14652 18.5122 9.33344C18.6022 9.42346 18.7269 9.47191 18.8515 9.47191H27.2146C27.4777 9.47191 27.6922 9.25727 27.6922 9.00116V0.631513C27.6922 0.368415 27.4776 0.15387 27.2215 0.15387C27.09 0.15387 26.9722 0.209307 26.8822 0.292348L23.3999 3.78143L23.3999 3.78127Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
7
src/assets/icons/pause_circle.vue
Normal file
7
src/assets/icons/pause_circle.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28ZM20 19C20 17.8954 20.8954 17 22 17H23C24.1046 17 25 17.8954 25 19V37C25 38.1046 24.1046 39 23 39H22C20.8954 39 20 38.1046 20 37V19ZM33 17C31.8954 17 31 17.8954 31 19V37C31 38.1046 31.8954 39 33 39H34C35.1046 39 36 38.1046 36 37V19C36 17.8954 35.1046 17 34 17H33Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
7
src/assets/icons/play_circle.vue
Normal file
7
src/assets/icons/play_circle.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28C0 43.464 12.536 56 28 56ZM38.6733 29.299C39.6733 28.7217 39.6733 27.2783 38.6733 26.7009L23.7887 18.1073C22.7887 17.53 21.5387 18.2516 21.5387 19.4063V36.5936C21.5387 37.7483 22.7887 38.47 23.7887 37.8927L38.6733 29.299Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
12
src/assets/icons/rewind.vue
Normal file
12
src/assets/icons/rewind.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.1138 12.9866V18.8048H10.8837V14.1542H10.8496L9.51721 14.9894V13.8985L10.9576 12.9866H12.1138Z"
|
||||
fill="white" />
|
||||
<path
|
||||
d="M16.0216 18.8843C15.6201 18.8843 15.2621 18.8105 14.9478 18.6627C14.6353 18.515 14.3871 18.3114 14.2034 18.0519C14.0197 17.7925 13.9241 17.4951 13.9165 17.1599H15.1097C15.1229 17.3853 15.2176 17.568 15.3938 17.7082C15.5699 17.8483 15.7792 17.9184 16.0216 17.9184C16.2148 17.9184 16.3853 17.8758 16.533 17.7906C16.6826 17.7035 16.7991 17.5832 16.8824 17.4298C16.9676 17.2745 17.0103 17.0965 17.0103 16.8957C17.0103 16.6911 16.9667 16.5112 16.8796 16.3559C16.7943 16.2006 16.676 16.0794 16.5245 15.9923C16.3729 15.9052 16.1996 15.8607 16.0046 15.8588C15.8341 15.8588 15.6684 15.8938 15.5074 15.9639C15.3483 16.034 15.2243 16.1296 15.1353 16.2508L14.0415 16.0548L14.3171 12.9866H17.8739V13.9923H15.3313L15.1807 15.4497H15.2148C15.3171 15.3057 15.4714 15.1864 15.6779 15.0917C15.8843 14.997 16.1154 14.9497 16.371 14.9497C16.7214 14.9497 17.0339 15.0321 17.3085 15.1968C17.5832 15.3616 17.8 15.5879 17.9591 15.8758C18.1182 16.1618 18.1968 16.4913 18.1949 16.8644C18.1968 17.2565 18.1059 17.605 17.9222 17.9099C17.7404 18.2129 17.4856 18.4516 17.158 18.6258C16.8322 18.7982 16.4534 18.8843 16.0216 18.8843Z"
|
||||
fill="white" />
|
||||
<path
|
||||
d="M4.29231 3.75701C5.15769 3.04876 6.10612 2.42985 7.12385 1.94165C9.02083 1.0202 11.1531 0.497642 13.3892 0.497642C17.3354 0.497642 20.9146 2.09299 23.5038 4.66479C26.0862 7.22972 27.6923 10.7849 27.6923 14.7045C27.6923 18.6241 26.0862 22.1792 23.5038 24.7441C20.9146 27.316 17.3354 28.9113 13.3892 28.9113C10.4123 28.9113 7.62923 27.9966 5.33769 26.4288C2.97692 24.8266 1.12846 22.5299 0.0692308 19.8274C-0.117707 19.346 0.12467 18.7959 0.616183 18.6103C1.10083 18.4246 1.65464 18.6653 1.84157 19.1535C2.75541 21.4916 4.36154 23.4857 6.40388 24.8748C8.39077 26.2225 10.8 27.0202 13.3893 27.0202C16.8162 27.0202 19.9177 25.6381 22.1608 23.4101C24.397 21.1889 25.7885 18.1083 25.7885 14.7044C25.7885 11.3006 24.397 8.2199 22.1608 5.9988C19.9177 3.77076 16.8162 2.38865 13.3893 2.38865C11.437 2.38865 9.58849 2.84249 7.95464 3.63332C7.13083 4.03221 6.35538 4.52723 5.64234 5.0911L9.18003 8.60499C9.35998 8.78373 9.35998 9.08637 9.18003 9.27203C9.09 9.36146 8.96537 9.40959 8.84074 9.40959H0.477664C0.214555 9.40959 0 9.19638 0 8.94199V0.628318C0 0.36698 0.214656 0.15387 0.470769 0.15387C0.602268 0.15387 0.720017 0.208936 0.810058 0.291422L4.29237 3.75717L4.29231 3.75701Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -242,7 +242,9 @@
|
|||
"scan_code": "Scan to join the room",
|
||||
"export_room": "Export chat",
|
||||
"user_admin": "Administrator",
|
||||
"user_moderator": "Moderator"
|
||||
"user_moderator": "Moderator",
|
||||
"ui_options": "UI Options",
|
||||
"audio_layout": "Use audio layout"
|
||||
},
|
||||
"room_info_sheet": {
|
||||
"this_room": "This room",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue