storm/bragi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: volume slider inside popover

Browse Source
This commit is contained in:
Terry Geng 2020-05-12 19:06:24 +08:00
parent e2254cf89f
commit 612d633ff9
4 changed files with 136 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
static/css/custom.css
View File

@ -8,33 +8,6 @@
white-space: nowrap;
overflow: hidden;
}
#volume-slider {
margin-top: 8px;
width: 200px;
}
@media (max-width: 509.98px) {
#volume-slider {
width: 140px;
}
}
@media (max-width: 439.98px) {
#volume-slider {
width: 100px;
}
}
@media (max-width: 404.98px) {
#volume-slider {
width: 80px;
}
}
@media (max-width: 384.98px) {
#volume-slider {
display: none;
}
}
/* Library */
.tag-space {margin-right: 3px;}
.tag-click {
cursor: pointer;
transition: 400ms;
@ -130,3 +103,42 @@
background-color: hsl(0, 0%, 43%);
color: white;
}
#volume-slider {
margin-top: 4px;
margin-right: 5px;
}
.dropdown {
display: inline-block;
}
#volume-popover {
position: relative;
background: #333;
color: white;
font-weight: bold;
padding: 4px 8px;
font-size: 20px;
border-radius: 4px;
display: none;
}
#volume-popover[data-show] {
display: flex;
}
#volume-popover a {
cursor: pointer;
}
#volume-popover-arrow,
#volume-popover-arrow::before {
position: absolute;
width: 8px;
height: 8px;
z-index: -1;
}
#volume-popover-arrow::before {
content: '';
transform: rotate(45deg);
background: #333;
}
#volume-popover[data-popper-placement^='top'] > #volume-popover-arrow {
bottom: -4px;
}

34
static/js/custom.js
View File

@ -740,6 +740,40 @@ function addTagModalSubmit() {
updateResults(active_page);
}
// ---------------------
// ------- Volume ------
// ---------------------
var volume_popover_btn = document.querySelector("#volume-popover-btn");
var volume_popover_div = document.querySelector("#volume-popover");
var volume_popover_instance = null;
var volume_popover_show = false;
function toggleVolumePopover(){
if (volume_popover_show){
volume_popover_instance = Popper.createPopper(volume_popover_btn, volume_popover_div, {
placement: 'top',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8]
}
}
]
} );
volume_popover_div.setAttribute('data-show', '');
} else {
volume_popover_div.removeAttribute('data-show');
if (volume_popover_instance){
volume_popover_instance.destroy();
volume_popover_instance = null;
}
}
volume_popover_show = !volume_popover_show;
}
var volume_update_timer;
function setVolumeDelayed(new_volume_value) {
window.clearTimeout(volume_update_timer);

9
static/js/popper.min.js vendored
View File

File diff suppressed because one or more lines are too long

34
templates/index.html
View File

@ -13,7 +13,7 @@
</head>
<body>
<div class="container page-header mb-5" id="banner">
<div class="container page-header mb-5" id="banner">
<div class="row">
<div class="col-auto">
<img src="static/image/logo.png" height="200px">
@ -22,18 +22,19 @@
<h1>botamusique Web Interface</h1>
</div>
</div>
</div>
</div>
<div id="playlist" class="container mb-5">
<div id="playlist" class="container mb-5">
<div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls">
<button type="button" id="play-pause-btn" class="btn btn-info mb-2 mr-1" onclick="togglePlayPause()" disabled>
<button type="button" id="play-pause-btn" class="btn btn-info mb-2 btn-space" onclick="togglePlayPause()">
<i class="fas fa-play"></i>
</button>
<button type="button" id="fast-forward-btn" class="btn btn-info mb-2 mr-1" onclick="request('post', {action : 'next'})" disabled>
<button type="button" id="fast-forward-btn" class="btn btn-info mb-2" onclick="request('post', {action : 'next'})">
<i class="fas fa-fast-forward"></i>
</button>
<div class="ml-auto">
<div class="dropdown d-inline-block mr-2">
<div class="dropdown mr-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
@ -53,20 +54,25 @@
</a>
</div>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning ml-1"
onclick="request('post', {action : 'volume_down'})">
<i class="fas fa-volume-down" aria-hidden="true"></i>
<button type="button" id="volume-popover-btn" class="btn btn-warning ml-1"
onclick="toggleVolumePopover()">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</button>
<div id="volume-popover">
<a onclick="request('post', {action : 'volume_down'})">
<i class="fa fa-volume-down" aria-hidden="true"></i>
</a>
<input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01"
value="0.5" onchange="setVolumeDelayed(this.value)" />
<button type="button" class="btn btn-warning ml-1"
onclick="request('post', {action : 'volume_up'})">
<i class="fas fa-volume-up" aria-hidden="true"></i>
</button>
<a onclick="request('post', {action : 'volume_up'})">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</a>
<div id="volume-popover-arrow" data-popper-arrow></div>
</div>
</div>
</div>