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() { loadStations() {
// FIXME https://de1.api.radio-browser.info/json/stations/lastchange?limit=10 // FIXME https://de1.api.radio-browser.info/json/stations/lastchange?limit=10
const vm = this const vm = this
vm.loading = true if (vm.offset === 0) {
vm.loading = true
}
this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations', this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations',
{ {
limit: 20, limit: 20,

113
src/components/Player.vue
View File

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