butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Initial implementation of "audio mode"

Browse source
This commit is contained in:
N Pex 2023-01-30 08:36:02 +00:00
parent d5942fdb8e
commit 09173a65f1
14 changed files with 944 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/assets/css/chat.scss
View file

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