feature: improved audio player UX
This commit is contained in:
parent
ef98fc754d
commit
0ed013c968
6 changed files with 620 additions and 4 deletions
353
public/base.css
353
public/base.css
|
|
@ -206,6 +206,185 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
|||
height: unset;
|
||||
}
|
||||
|
||||
.audio-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
overflow: hidden;
|
||||
font-size: small;
|
||||
padding: 0.25rem;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
|
||||
white-space-collapse: discard;
|
||||
}
|
||||
|
||||
.audio-container audio {
|
||||
width: 100%;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.audio-container .audio-player-display-container {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.audio-container .audio-player-display-container canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
}
|
||||
|
||||
.audio-container .enhanced-audio-player-container {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.audio-container[data-audio-player] .enhanced-audio-player-container {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .blank {
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .progress-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .progress-container label[for="progress"] {
|
||||
display: block;
|
||||
margin-top: -0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .progress-container .time-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .progress-container .slider-container {
|
||||
width: 80%;
|
||||
padding: 0 1rem;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .progress-container .slider-container input[name="progress"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .buttons-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .volume {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.audio-container .audio-controls-container .blank {
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .volume {
|
||||
max-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container input[type="range"] {
|
||||
--c: var(--accent); /* active color */
|
||||
--g: 4px; /* the gap */
|
||||
--l: 2px; /* line thickness*/
|
||||
--s: 15px; /* thumb size*/
|
||||
|
||||
width: 100%;
|
||||
height: var(--s); /* needed for Firefox*/
|
||||
--_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
|
||||
-webkit-appearance :none;
|
||||
-moz-appearance :none;
|
||||
appearance :none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.audio-container .audio-controls-container input[type="range"]:focus-visible,
|
||||
.audio-container .audio-controls-container input[type="range"]:hover {
|
||||
--p: 25%;
|
||||
}
|
||||
.audio-container .audio-controls-container input[type="range"]:active,
|
||||
.audio-container .audio-controls-container input[type="range"]:focus-visible{
|
||||
--_b: var(--s)
|
||||
}
|
||||
/* chromium */
|
||||
.audio-container .audio-controls-container input[type="range"]::-webkit-slider-thumb{
|
||||
height: var(--s);
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
|
||||
border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
transition: .2s;
|
||||
}
|
||||
/* Firefox */
|
||||
.audio-container .audio-controls-container input[type="range"]::-moz-range-thumb {
|
||||
height: var(--s);
|
||||
width: var(--s);
|
||||
background: none;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
|
||||
border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
transition: .2s;
|
||||
}
|
||||
@supports not (color: color-mix(in srgb,red,red)) {
|
||||
.audio-container .audio-controls-container input[type="range"] {
|
||||
--_c: var(--c);
|
||||
}
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .volume label[for="volume"] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .audio-control {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.audio-container .audio-controls-container .audio-control .icon.play {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
.audio-container .audio-controls-container .audio-control .icon.pause {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.audio-container[data-playing] .audio-controls-container .audio-control .icon.play {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
.audio-container[data-playing] .audio-controls-container .audio-control .icon.pause {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ICONS */
|
||||
.icon {
|
||||
width: 24px;
|
||||
|
|
@ -313,6 +492,7 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
|||
border-top: 4px solid;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.icon.calendar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -790,3 +970,176 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
|||
.icon.left::after {
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
|
||||
/* AUDIO PLAYER ICONS */
|
||||
.icon.skip-back {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.icon.skip-back::after,
|
||||
.icon.skip-back::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
top: 5px;
|
||||
}
|
||||
.icon.skip-back::before {
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
right: 11px;
|
||||
background: currentColor;
|
||||
}
|
||||
.icon.skip-back::after {
|
||||
width: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-right: 5px solid;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.icon.rewind {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.icon.rewind::after,
|
||||
.icon.rewind::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-left: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
top: 6px;
|
||||
left: 5px;
|
||||
}
|
||||
.icon.rewind::after {
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
|
||||
.icon.play {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.icon.play::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 10px;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 6px solid;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.icon.pause {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.icon.pause::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
left: 6px;
|
||||
top: 6px;
|
||||
border-left: 2px solid;
|
||||
border-right: 2px solid;
|
||||
}
|
||||
|
||||
.icon.fastforward {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.icon.fastforward::after,
|
||||
.icon.fastforward::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-right: 2px solid;
|
||||
border-top: 2px solid;
|
||||
transform: rotate(45deg);
|
||||
top: 6px;
|
||||
right: 5px;
|
||||
}
|
||||
.icon.fastforward::after {
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
|
||||
.icon.skip-forward {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.icon.skip-forward::after,
|
||||
.icon.skip-forward::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
top: 5px;
|
||||
}
|
||||
.icon.skip-forward::before {
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
left: 11px;
|
||||
background: currentColor;
|
||||
}
|
||||
.icon.skip-forward::after {
|
||||
width: 0;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid;
|
||||
left: 5px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue