Xefir/nextcloud-app-radio
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

added native volume slider

Browse Source
This commit is contained in:
Jonas Heinrich 2020-10-21 10:43:37 +02:00
parent b29a077c47
commit 94064c574c
2 changed files with 62 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Main.vue
View File

@ -125,7 +125,9 @@ export default {
loadStations() {
// FIXME https://de1.api.radio-browser.info/json/stations/lastchange?limit=10
const vm = this
vm.loading = true
if (vm.offset === 0) {
vm.loading = true
}
this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations',
{
limit: 20,

113
src/components/Player.vue
View File

@ -2,7 +2,12 @@
<div id="app-settings">
<button id="playbutton" class="play" :style="playerIcon" />
<div id="volumeicon" class="full" />
<div id="volumeslider" />
<input
class="volume"
type="range"
name="volume"
min="0"
max="50">
<span id="stationMetadata" />
</div>
</template>
@ -21,68 +26,68 @@ export default {
<style>
#playbutton{
height:50px;
width: 50px;
margin: 10px;
border: none;
background-size: 100%;
background-position: center;
float: left;
transition: background-image 0.4s ease-in-out;
}
#playbutton{
height:50px;
width: 50px;
margin: 10px;
border: none;
background-size: 100%;
background-position: center;
float: left;
transition: background-image 0.4s ease-in-out;
}
.buffering {
animation:spin 4s linear infinite;
/* background: url('../img/wheel.png') no-repeat; */
transition: background-image 0.4s ease-in-out;
}
.buffering {
animation:spin 4s linear infinite;
/* background: url('../img/wheel.png') no-repeat; */
transition: background-image 0.4s ease-in-out;
}
@keyframes spin { 100% { transform:rotate(360deg); } }
@keyframes spin { 100% { transform:rotate(360deg); } }
#station_metadata{
margin: 2px 20px 5px 20px;
padding-left: 5px;
white-space:nowrap;
overflow:hidden;
}
#station_metadata{
margin: 2px 20px 5px 20px;
padding-left: 5px;
white-space:nowrap;
overflow:hidden;
}
.play{
/* background: url('../img/play.png') no-repeat; */
}
.play{
/* background: url('../img/play.png') no-repeat; */
}
.pause{
/* background: url('../img/pause.png') no-repeat; */
}
.pause{
/* background: url('../img/pause.png') no-repeat; */
}
#volumeicon {
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
position: relative;
left: 75px;
top: 14px;
}
#volumeicon {
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
position: relative;
left: 75px;
top: 14px;
}
#volumeicon.full {
/* background-image: url('../img/sound_full.png'); */
}
#volumeicon.full {
/* background-image: url('../img/sound_full.png'); */
}
#volumeicon.mid {
/* background-image: url('../img/sound_mid.png'); */
}
#volumeicon.mid {
/* background-image: url('../img/sound_mid.png'); */
}
#volumeicon.silent {
/* background-image: url('../img/sound_silent.png'); */
}
#volumeicon.silent {
/* background-image: url('../img/sound_silent.png'); */
}
#volumeslider{
width: 170px;
display: inline-block;
position: relative;
left: 40px;
top: -7px;
}
.volume{
width: 170px;
display: inline-block;
position: relative;
left: 40px;
top: -7px;
}
</style>