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
Download Patch File Download Diff File Expand all files Collapse all files

68
static/css/custom.css
View File

@@ -8,33 +8,6 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; 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 { .tag-click {
cursor: pointer; cursor: pointer;
transition: 400ms; transition: 400ms;
@@ -129,4 +102,43 @@
.floating-button:hover { .floating-button:hover {
background-color: hsl(0, 0%, 43%); background-color: hsl(0, 0%, 43%);
color: white; 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); 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; var volume_update_timer;
function setVolumeDelayed(new_volume_value) { function setVolumeDelayed(new_volume_value) {
window.clearTimeout(volume_update_timer); window.clearTimeout(volume_update_timer);

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

File diff suppressed because one or more lines are too long

106
templates/index.html
View File

@@ -13,62 +13,68 @@
</head> </head>
<body> <body>
<div class="container page-header mb-5" id="banner"> <div class="container page-header mb-5" id="banner">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<img src="static/image/logo.png" height="200px"> <img src="static/image/logo.png" height="200px">
</div> </div>
<div class="col my-auto"> <div class="col my-auto">
<h1>botamusique Web Interface</h1> <h1>botamusique Web Interface</h1>
</div>
</div> </div>
</div> </div>
</div>
<div id="playlist" class="container mb-5">
<div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls"> <div id="playlist" class="container mb-5">
<button type="button" id="play-pause-btn" class="btn btn-info mb-2 mr-1" onclick="togglePlayPause()" disabled> <div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls">
<i class="fas fa-play"></i> <button type="button" id="play-pause-btn" class="btn btn-info mb-2 btn-space" onclick="togglePlayPause()">
</button> <i class="fas fa-play"></i>
<button type="button" id="fast-forward-btn" class="btn btn-info mb-2 mr-1" onclick="request('post', {action : 'next'})" disabled> </button>
<i class="fas fa-fast-forward"></i> <button type="button" id="fast-forward-btn" class="btn btn-info mb-2" onclick="request('post', {action : 'next'})">
</button> <i class="fas fa-fast-forward"></i>
<div class="ml-auto"> </button>
<div class="dropdown d-inline-block mr-2"> <div class="ml-auto">
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode" <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"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i> <i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
</button> </button>
<div class="dropdown-menu" aria-labelledby="play-mode"> <div class="dropdown-menu" aria-labelledby="play-mode">
<a class="dropdown-item" href="#" id="one-shot-mode-btn" onclick="changePlayMode('one-shot')"> <a class="dropdown-item" href="#" id="one-shot-mode-btn" onclick="changePlayMode('one-shot')">
<i class="fas fa-tasks mr-2" aria-hidden="true"></i>One-shot <i class="fas fa-tasks mr-2" aria-hidden="true"></i>One-shot
</a> </a>
<a class="dropdown-item" href="#" id="random-mode-btn" onclick="changePlayMode('randomize')"> <a class="dropdown-item" href="#" id="random-mode-btn" onclick="changePlayMode('randomize')">
<i class="fas fa-random mr-2" aria-hidden="true"></i>Random <i class="fas fa-random mr-2" aria-hidden="true"></i>Random
</a> </a>
<a class="dropdown-item" href="#" id="repeat-mode-btn" onclick="changePlayMode('repeat')"> <a class="dropdown-item" href="#" id="repeat-mode-btn" onclick="changePlayMode('repeat')">
<i class="fas fa-redo mr-2" aria-hidden="true"></i>Repeat <i class="fas fa-redo mr-2" aria-hidden="true"></i>Repeat
</a> </a>
<a class="dropdown-item" href="#" id="autoplay-mode-btn" onclick="changePlayMode('autoplay')"> <a class="dropdown-item" href="#" id="autoplay-mode-btn" onclick="changePlayMode('autoplay')">
<i class="fas fa-robot mr-2" aria-hidden="true"></i>Autoplay <i class="fas fa-robot mr-2" aria-hidden="true"></i>Autoplay
</a> </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>
<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>
</div> </div>
</div> </div>
<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)" />
<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>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
@@ -462,4 +468,4 @@
<script src="static/js/custom.js"></script> <script src="static/js/custom.js"></script>
</body> </body>
</html> </html>