2017-06-23 21:00:42 +00:00
|
|
|
<template>
|
2018-02-18 13:31:52 +00:00
|
|
|
<div class="ui inverted segment player-wrapper" :style="style">
|
|
|
|
<div class="player">
|
2018-07-23 21:21:08 +00:00
|
|
|
<audio-track
|
|
|
|
ref="currentAudio"
|
|
|
|
v-if="currentTrack"
|
2018-10-26 13:21:35 +00:00
|
|
|
@errored="handleError"
|
2018-07-23 21:21:08 +00:00
|
|
|
:is-current="true"
|
|
|
|
:start-time="$store.state.player.currentTime"
|
|
|
|
:autoplay="$store.state.player.playing"
|
|
|
|
:key="audioKey"
|
|
|
|
:track="currentTrack">
|
|
|
|
</audio-track>
|
2018-02-18 13:31:52 +00:00
|
|
|
<div v-if="currentTrack" class="track-area ui unstackable items">
|
|
|
|
<div class="ui inverted item">
|
|
|
|
<div class="ui tiny image">
|
2018-07-18 13:37:07 +00:00
|
|
|
<img ref="cover" @load="updateBackground" v-if="currentTrack.album.cover && currentTrack.album.cover.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.medium_square_crop)">
|
2018-02-18 13:31:52 +00:00
|
|
|
<img v-else src="../../assets/audio/default-cover.png">
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
2018-02-18 13:31:52 +00:00
|
|
|
<div class="middle aligned content">
|
|
|
|
<router-link class="small header discrete link track" :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}">
|
|
|
|
{{ currentTrack.title }}
|
|
|
|
</router-link>
|
|
|
|
<div class="meta">
|
|
|
|
<router-link class="artist" :to="{name: 'library.artists.detail', params: {id: currentTrack.artist.id }}">
|
|
|
|
{{ currentTrack.artist.name }}
|
|
|
|
</router-link> /
|
|
|
|
<router-link class="album" :to="{name: 'library.albums.detail', params: {id: currentTrack.album.id }}">
|
|
|
|
{{ currentTrack.album.title }}
|
|
|
|
</router-link>
|
|
|
|
</div>
|
|
|
|
<div class="description">
|
2018-03-19 16:39:03 +00:00
|
|
|
<track-favorite-icon
|
|
|
|
v-if="$store.state.auth.authenticated"
|
2018-10-21 13:41:31 +00:00
|
|
|
:class="{'inverted': !$store.getters['favorites/isFavorite'](currentTrack.id)}"
|
2018-03-19 16:39:03 +00:00
|
|
|
:track="currentTrack"></track-favorite-icon>
|
|
|
|
<track-playlist-icon
|
|
|
|
v-if="$store.state.auth.authenticated"
|
2018-10-21 13:41:31 +00:00
|
|
|
:class="['inverted']"
|
2018-03-19 16:39:03 +00:00
|
|
|
:track="currentTrack"></track-playlist-icon>
|
2018-02-18 13:31:52 +00:00
|
|
|
</div>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-10-26 13:21:35 +00:00
|
|
|
<div class="progress-area" v-if="currentTrack && !errored">
|
2018-02-18 13:31:52 +00:00
|
|
|
<div class="ui grid">
|
|
|
|
<div class="left floated four wide column">
|
|
|
|
<p class="timer start" @click="updateProgress(0)">{{currentTimeFormatted}}</p>
|
|
|
|
</div>
|
2017-06-23 21:00:42 +00:00
|
|
|
|
2018-10-26 13:21:35 +00:00
|
|
|
<div v-if="!isLoadingAudio" class="right floated four wide column">
|
2018-02-18 13:31:52 +00:00
|
|
|
<p class="timer total">{{durationFormatted}}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-10-23 18:24:36 +00:00
|
|
|
<div
|
|
|
|
ref="progress"
|
|
|
|
:class="['ui', 'small', 'orange', 'inverted', {'indicating': isLoadingAudio}, 'progress']"
|
|
|
|
@click="touchProgress">
|
|
|
|
<div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
|
2018-02-18 13:31:52 +00:00
|
|
|
<div class="bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-10-26 13:21:35 +00:00
|
|
|
<div class="ui small warning message" v-if="currentTrack && errored">
|
|
|
|
<div class="header">
|
|
|
|
<translate>We cannot load this track</translate>
|
|
|
|
</div>
|
|
|
|
<p v-if="hasNext && playing && $store.state.player.errorCount < $store.state.player.maxConsecutiveErrors">
|
|
|
|
<translate>The next track will play automatically in a few seconds...</translate>
|
|
|
|
<i class="loading spinner icon"></i>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<translate>You may have a connectivity issue.</translate>
|
|
|
|
</p>
|
|
|
|
</div>
|
2018-02-18 13:31:52 +00:00
|
|
|
<div class="two wide column controls ui grid">
|
2018-10-21 13:41:31 +00:00
|
|
|
<a
|
|
|
|
href
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.previousTrack"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.previousTrack"
|
2018-04-01 15:21:52 +00:00
|
|
|
class="two wide column control"
|
2018-10-21 13:41:31 +00:00
|
|
|
@click.prevent.stop="previous"
|
2018-04-01 15:21:52 +00:00
|
|
|
:disabled="emptyQueue">
|
2018-10-21 13:41:31 +00:00
|
|
|
<i :class="['ui', 'backward', {'disabled': emptyQueue}, 'secondary', 'icon']"></i>
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href
|
2018-02-18 13:31:52 +00:00
|
|
|
v-if="!playing"
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.play"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.play"
|
|
|
|
@click.prevent.stop="togglePlay"
|
2018-02-18 13:31:52 +00:00
|
|
|
class="two wide column control">
|
2018-10-21 13:41:31 +00:00
|
|
|
<i :class="['ui', 'play', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href
|
2018-02-18 13:31:52 +00:00
|
|
|
v-else
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.pause"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.pause"
|
|
|
|
@click.prevent.stop="togglePlay"
|
2018-02-18 13:31:52 +00:00
|
|
|
class="two wide column control">
|
2018-10-21 13:41:31 +00:00
|
|
|
<i :class="['ui', 'pause', {'disabled': !currentTrack}, 'secondary', 'icon']"></i>
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.next"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.next"
|
2018-02-18 13:31:52 +00:00
|
|
|
class="two wide column control"
|
2018-10-21 13:41:31 +00:00
|
|
|
@click.prevent.stop="next"
|
2018-02-18 13:31:52 +00:00
|
|
|
:disabled="!hasNext">
|
2018-11-19 06:36:21 +00:00
|
|
|
<i :class="['ui', {'disabled': !hasNext}, 'forward', 'secondary', 'icon']" ></i>
|
2018-10-21 13:41:31 +00:00
|
|
|
</a>
|
2018-07-11 12:09:26 +00:00
|
|
|
<div
|
|
|
|
class="wide column control volume-control"
|
|
|
|
v-on:mouseover="showVolume = true"
|
|
|
|
v-on:mouseleave="showVolume = false"
|
|
|
|
v-bind:class="{ active : showVolume }">
|
2018-10-21 13:41:31 +00:00
|
|
|
<a
|
|
|
|
href
|
|
|
|
v-if="volume === 0"
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.unmute"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.unmute"
|
|
|
|
@click.prevent.stop="unmute">
|
|
|
|
<i class="volume off secondary icon"></i>
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href
|
|
|
|
v-else-if="volume < 0.5"
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.mute"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.mute"
|
|
|
|
@click.prevent.stop="mute">
|
|
|
|
<i class="volume down secondary icon"></i>
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href
|
|
|
|
v-else
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.mute"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.mute"
|
|
|
|
@click.prevent.stop="mute">
|
|
|
|
<i class="volume up secondary icon"></i>
|
|
|
|
</a>
|
2018-07-11 12:09:26 +00:00
|
|
|
<input
|
|
|
|
type="range"
|
|
|
|
step="0.05"
|
|
|
|
min="0"
|
|
|
|
max="1"
|
|
|
|
v-model="sliderVolume"
|
|
|
|
v-if="showVolume" />
|
2018-02-18 13:31:52 +00:00
|
|
|
</div>
|
2018-07-11 12:09:26 +00:00
|
|
|
<div class="two wide column control looping" v-if="!showVolume">
|
2018-10-21 13:41:31 +00:00
|
|
|
<a
|
|
|
|
href
|
2018-02-18 13:31:52 +00:00
|
|
|
v-if="looping === 0"
|
2018-10-21 13:41:31 +00:00
|
|
|
:title="labels.loopingDisabled"
|
|
|
|
:aria-label="labels.loopingDisabled"
|
|
|
|
@click.prevent.stop="$store.commit('player/looping', 1)"
|
|
|
|
:disabled="!currentTrack">
|
|
|
|
<i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i>
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href
|
|
|
|
@click.prevent.stop="$store.commit('player/looping', 2)"
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.loopingSingle"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.loopingSingle"
|
2018-02-18 13:31:52 +00:00
|
|
|
v-if="looping === 1"
|
2018-10-21 13:41:31 +00:00
|
|
|
:disabled="!currentTrack">
|
|
|
|
<i
|
|
|
|
class="repeat secondary icon">
|
|
|
|
<span class="ui circular tiny orange label">1</span>
|
|
|
|
</i>
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.loopingWhole"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.loopingWhole"
|
2018-02-18 13:31:52 +00:00
|
|
|
v-if="looping === 2"
|
|
|
|
:disabled="!currentTrack"
|
2018-10-21 13:41:31 +00:00
|
|
|
@click.prevent.stop="$store.commit('player/looping', 0)">
|
|
|
|
<i
|
|
|
|
class="repeat orange secondary icon">
|
|
|
|
</i>
|
|
|
|
</a>
|
2018-02-18 13:31:52 +00:00
|
|
|
</div>
|
2018-10-21 13:41:31 +00:00
|
|
|
<a
|
|
|
|
href
|
2018-02-18 13:31:52 +00:00
|
|
|
:disabled="queue.tracks.length === 0"
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.shuffle"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.shuffle"
|
2018-07-11 12:09:26 +00:00
|
|
|
v-if="!showVolume"
|
2018-10-21 13:41:31 +00:00
|
|
|
@click.prevent.stop="shuffle()"
|
2018-02-18 13:31:52 +00:00
|
|
|
class="two wide column control">
|
2018-07-12 14:04:11 +00:00
|
|
|
<div v-if="isShuffling" class="ui inline shuffling inverted tiny active loader"></div>
|
2018-10-21 13:41:31 +00:00
|
|
|
<i v-else :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
|
|
|
|
</a>
|
2018-07-11 12:09:26 +00:00
|
|
|
<div class="one wide column" v-if="!showVolume"></div>
|
2018-10-21 13:41:31 +00:00
|
|
|
<a
|
|
|
|
href
|
2018-02-18 13:31:52 +00:00
|
|
|
:disabled="queue.tracks.length === 0"
|
2018-07-01 19:50:50 +00:00
|
|
|
:title="labels.clear"
|
2018-10-21 13:41:31 +00:00
|
|
|
:aria-label="labels.clear"
|
2018-07-11 12:09:26 +00:00
|
|
|
v-if="!showVolume"
|
2018-10-21 13:41:31 +00:00
|
|
|
@click.prevent.stop="clean()"
|
2018-02-18 13:31:52 +00:00
|
|
|
class="two wide column control">
|
2018-10-21 13:41:31 +00:00
|
|
|
<i :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
|
|
|
|
</a>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
2018-02-18 13:31:52 +00:00
|
|
|
<GlobalEvents
|
|
|
|
@keydown.space.prevent.exact="togglePlay"
|
|
|
|
@keydown.ctrl.left.prevent.exact="previous"
|
|
|
|
@keydown.ctrl.right.prevent.exact="next"
|
|
|
|
@keydown.ctrl.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
|
|
|
|
@keydown.ctrl.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
|
|
|
|
@keydown.l.prevent.exact="$store.commit('player/toggleLooping')"
|
|
|
|
@keydown.s.prevent.exact="shuffle"
|
|
|
|
/>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2017-12-23 15:41:19 +00:00
|
|
|
import {mapState, mapGetters, mapActions} from 'vuex'
|
2017-12-12 21:15:50 +00:00
|
|
|
import GlobalEvents from '@/components/utils/global-events'
|
2018-02-18 13:31:52 +00:00
|
|
|
import ColorThief from '@/vendor/color-thief'
|
2018-07-23 21:21:08 +00:00
|
|
|
import {Howl} from 'howler'
|
2017-12-11 20:09:17 +00:00
|
|
|
|
2017-12-23 15:41:19 +00:00
|
|
|
import AudioTrack from '@/components/audio/Track'
|
2017-06-23 21:00:42 +00:00
|
|
|
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
|
2018-03-19 16:39:03 +00:00
|
|
|
import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon'
|
2017-06-23 21:00:42 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2017-12-11 20:09:17 +00:00
|
|
|
TrackFavoriteIcon,
|
2018-03-19 16:39:03 +00:00
|
|
|
TrackPlaylistIcon,
|
2017-12-23 15:41:19 +00:00
|
|
|
GlobalEvents,
|
|
|
|
AudioTrack
|
2017-06-23 21:00:42 +00:00
|
|
|
},
|
|
|
|
data () {
|
2018-02-18 13:31:52 +00:00
|
|
|
let defaultAmbiantColors = [[46, 46, 46], [46, 46, 46], [46, 46, 46], [46, 46, 46]]
|
2017-06-23 21:00:42 +00:00
|
|
|
return {
|
2018-06-07 11:05:26 +00:00
|
|
|
isShuffling: false,
|
2017-12-23 15:41:19 +00:00
|
|
|
sliderVolume: this.volume,
|
2018-02-18 13:31:52 +00:00
|
|
|
defaultAmbiantColors: defaultAmbiantColors,
|
2018-07-11 12:09:26 +00:00
|
|
|
showVolume: false,
|
2018-07-23 21:21:08 +00:00
|
|
|
ambiantColors: defaultAmbiantColors,
|
|
|
|
audioKey: String(new Date()),
|
|
|
|
dummyAudio: null
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
// we trigger the watcher explicitely it does not work otherwise
|
2017-12-23 15:41:19 +00:00
|
|
|
this.sliderVolume = this.volume
|
2018-07-23 21:21:08 +00:00
|
|
|
// this is needed to unlock audio playing under some browsers,
|
|
|
|
// cf https://github.com/goldfire/howler.js#mobilechrome-playback
|
|
|
|
// but we never actually load those audio files
|
|
|
|
this.dummyAudio = new Howl({
|
|
|
|
preload: false,
|
|
|
|
autoplay: false,
|
|
|
|
src: ['noop.webm', 'noop.mp3']
|
|
|
|
})
|
|
|
|
},
|
|
|
|
destroyed () {
|
|
|
|
this.dummyAudio.unload()
|
2017-06-23 21:00:42 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2017-12-23 15:41:19 +00:00
|
|
|
...mapActions({
|
|
|
|
togglePlay: 'player/togglePlay',
|
2018-09-06 17:38:30 +00:00
|
|
|
mute: 'player/mute',
|
|
|
|
unmute: 'player/unmute',
|
2017-12-23 15:41:19 +00:00
|
|
|
clean: 'queue/clean',
|
|
|
|
updateProgress: 'player/updateProgress'
|
|
|
|
}),
|
2018-06-07 11:05:26 +00:00
|
|
|
shuffle () {
|
2018-07-12 14:04:11 +00:00
|
|
|
let disabled = this.queue.tracks.length === 0
|
|
|
|
if (this.isShuffling || disabled) {
|
2018-06-07 11:05:26 +00:00
|
|
|
return
|
|
|
|
}
|
|
|
|
let self = this
|
2018-06-30 14:27:26 +00:00
|
|
|
let msg = this.$gettext('Queue shuffled!')
|
2018-06-07 11:05:26 +00:00
|
|
|
this.isShuffling = true
|
|
|
|
setTimeout(() => {
|
|
|
|
self.$store.dispatch('queue/shuffle', () => {
|
|
|
|
self.isShuffling = false
|
|
|
|
self.$store.commit('ui/addMessage', {
|
2018-06-30 14:27:26 +00:00
|
|
|
content: msg,
|
2018-06-07 11:05:26 +00:00
|
|
|
date: new Date()
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}, 100)
|
|
|
|
},
|
2018-04-23 17:05:48 +00:00
|
|
|
next () {
|
|
|
|
let self = this
|
|
|
|
this.$store.dispatch('queue/next').then(() => {
|
|
|
|
self.$emit('next')
|
|
|
|
})
|
|
|
|
},
|
|
|
|
previous () {
|
|
|
|
let self = this
|
|
|
|
this.$store.dispatch('queue/previous').then(() => {
|
|
|
|
self.$emit('previous')
|
|
|
|
})
|
|
|
|
},
|
2017-06-23 21:00:42 +00:00
|
|
|
touchProgress (e) {
|
|
|
|
let time
|
|
|
|
let target = this.$refs.progress
|
2017-12-23 15:41:19 +00:00
|
|
|
time = e.layerX / target.offsetWidth * this.duration
|
|
|
|
this.$refs.currentAudio.setCurrentTime(time)
|
2018-02-18 13:31:52 +00:00
|
|
|
},
|
|
|
|
updateBackground () {
|
|
|
|
if (!this.currentTrack.album.cover) {
|
|
|
|
this.ambiantColors = this.defaultAmbiantColors
|
|
|
|
return
|
|
|
|
}
|
|
|
|
let image = this.$refs.cover
|
|
|
|
this.ambiantColors = ColorThief.prototype.getPalette(image, 4).slice(0, 4)
|
2018-10-26 13:21:35 +00:00
|
|
|
},
|
|
|
|
handleError ({sound, error}) {
|
|
|
|
this.$store.commit('player/isLoadingAudio', false)
|
|
|
|
this.$store.dispatch('player/trackErrored')
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2017-12-23 15:41:19 +00:00
|
|
|
...mapState({
|
|
|
|
currentIndex: state => state.queue.currentIndex,
|
|
|
|
playing: state => state.player.playing,
|
2018-10-23 18:24:36 +00:00
|
|
|
isLoadingAudio: state => state.player.isLoadingAudio,
|
2017-12-23 15:41:19 +00:00
|
|
|
volume: state => state.player.volume,
|
|
|
|
looping: state => state.player.looping,
|
|
|
|
duration: state => state.player.duration,
|
2018-10-23 18:24:36 +00:00
|
|
|
bufferProgress: state => state.player.bufferProgress,
|
2018-10-26 13:21:35 +00:00
|
|
|
errored: state => state.player.errored,
|
2017-12-23 15:41:19 +00:00
|
|
|
queue: state => state.queue
|
|
|
|
}),
|
|
|
|
...mapGetters({
|
|
|
|
currentTrack: 'queue/currentTrack',
|
|
|
|
hasNext: 'queue/hasNext',
|
2018-04-01 15:21:52 +00:00
|
|
|
emptyQueue: 'queue/isEmpty',
|
2017-12-23 15:41:19 +00:00
|
|
|
durationFormatted: 'player/durationFormatted',
|
|
|
|
currentTimeFormatted: 'player/currentTimeFormatted',
|
|
|
|
progress: 'player/progress'
|
2018-02-18 13:31:52 +00:00
|
|
|
}),
|
2018-07-01 19:50:50 +00:00
|
|
|
labels () {
|
|
|
|
let previousTrack = this.$gettext('Previous track')
|
|
|
|
let play = this.$gettext('Play track')
|
|
|
|
let pause = this.$gettext('Pause track')
|
|
|
|
let next = this.$gettext('Next track')
|
|
|
|
let unmute = this.$gettext('Unmute')
|
|
|
|
let mute = this.$gettext('Mute')
|
|
|
|
let loopingDisabled = this.$gettext('Looping disabled. Click to switch to single-track looping.')
|
|
|
|
let loopingSingle = this.$gettext('Looping on a single track. Click to switch to whole queue looping.')
|
|
|
|
let loopingWhole = this.$gettext('Looping on whole queue. Click to disable looping.')
|
|
|
|
let shuffle = this.$gettext('Shuffle your queue')
|
|
|
|
let clear = this.$gettext('Clear your queue')
|
|
|
|
return {
|
|
|
|
previousTrack,
|
|
|
|
play,
|
|
|
|
pause,
|
|
|
|
next,
|
|
|
|
unmute,
|
|
|
|
mute,
|
|
|
|
loopingDisabled,
|
|
|
|
loopingSingle,
|
|
|
|
loopingWhole,
|
|
|
|
shuffle,
|
|
|
|
clear
|
|
|
|
}
|
|
|
|
},
|
2018-02-18 13:31:52 +00:00
|
|
|
style: function () {
|
|
|
|
let style = {
|
|
|
|
'background': this.ambiantGradiant
|
|
|
|
}
|
|
|
|
return style
|
|
|
|
},
|
|
|
|
ambiantGradiant: function () {
|
|
|
|
let indexConf = [
|
|
|
|
{orientation: 330, percent: 100, opacity: 0.7},
|
|
|
|
{orientation: 240, percent: 90, opacity: 0.7},
|
|
|
|
{orientation: 150, percent: 80, opacity: 0.7},
|
|
|
|
{orientation: 60, percent: 70, opacity: 0.7}
|
|
|
|
]
|
|
|
|
let gradients = this.ambiantColors.map((e, i) => {
|
|
|
|
let [r, g, b] = e
|
|
|
|
let conf = indexConf[i]
|
|
|
|
return `linear-gradient(${conf.orientation}deg, rgba(${r}, ${g}, ${b}, ${conf.opacity}) 10%, rgba(255, 255, 255, 0) ${conf.percent}%)`
|
|
|
|
}).join(', ')
|
|
|
|
return gradients
|
|
|
|
}
|
2017-06-23 21:00:42 +00:00
|
|
|
},
|
|
|
|
watch: {
|
2018-09-07 09:46:20 +00:00
|
|
|
currentTrack (newValue, oldValue) {
|
|
|
|
if (!this.isShuffling && newValue != oldValue) {
|
2018-07-23 21:21:08 +00:00
|
|
|
this.audioKey = String(new Date())
|
|
|
|
}
|
2018-02-18 14:08:18 +00:00
|
|
|
if (!newValue || !newValue.album.cover) {
|
2018-02-18 13:31:52 +00:00
|
|
|
this.ambiantColors = this.defaultAmbiantColors
|
|
|
|
}
|
|
|
|
},
|
2017-12-23 15:41:19 +00:00
|
|
|
volume (newValue) {
|
2017-06-23 21:00:42 +00:00
|
|
|
this.sliderVolume = newValue
|
|
|
|
},
|
|
|
|
sliderVolume (newValue) {
|
2017-12-23 15:41:19 +00:00
|
|
|
this.$store.commit('player/volume', newValue)
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
.ui.progress {
|
|
|
|
margin: 0.5rem 0 1rem;
|
|
|
|
}
|
|
|
|
.progress {
|
|
|
|
cursor: pointer;
|
|
|
|
.bar {
|
|
|
|
min-width: 0 !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ui.inverted.item > .content > .description {
|
|
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ui.item {
|
|
|
|
.meta {
|
|
|
|
font-size: 90%;
|
|
|
|
line-height: 1.2
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.timer.total {
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
.timer.start {
|
|
|
|
cursor: pointer
|
|
|
|
}
|
|
|
|
.track-area {
|
2018-03-19 16:39:03 +00:00
|
|
|
margin-top: 0;
|
2017-06-23 21:00:42 +00:00
|
|
|
.header, .meta, .artist, .album {
|
|
|
|
color: white !important;
|
|
|
|
}
|
|
|
|
}
|
2018-10-21 13:41:31 +00:00
|
|
|
.controls a {
|
|
|
|
color: white;
|
|
|
|
}
|
2017-06-23 21:00:42 +00:00
|
|
|
|
|
|
|
.controls .icon.big {
|
|
|
|
cursor: pointer;
|
|
|
|
font-size: 2em !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.controls .icon {
|
|
|
|
cursor: pointer;
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
|
|
|
|
.secondary.icon {
|
|
|
|
font-size: 1.5em;
|
|
|
|
}
|
|
|
|
.progress-area .actions {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.volume-control {
|
|
|
|
position: relative;
|
2018-07-11 12:09:26 +00:00
|
|
|
width: 12.5% !important;
|
2017-06-23 21:00:42 +00:00
|
|
|
[type="range"] {
|
2018-07-11 12:09:26 +00:00
|
|
|
max-width: 70%;
|
2017-06-23 21:00:42 +00:00
|
|
|
position: absolute;
|
2018-07-11 12:09:26 +00:00
|
|
|
bottom: 1.1rem;
|
|
|
|
left: 25%;
|
2017-06-23 21:00:42 +00:00
|
|
|
cursor: pointer;
|
2017-12-17 16:07:15 +00:00
|
|
|
}
|
2018-02-24 16:55:05 +00:00
|
|
|
input[type=range]:focus {
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
|
|
background: white;
|
|
|
|
cursor: pointer;
|
|
|
|
-webkit-appearance: none;
|
2018-07-11 12:09:26 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
width: 10px;
|
2018-02-24 16:55:05 +00:00
|
|
|
}
|
|
|
|
input[type=range]::-moz-range-track {
|
|
|
|
cursor: pointer;
|
|
|
|
background: white;
|
2018-07-11 12:09:26 +00:00
|
|
|
opacity: 0.3;
|
2018-02-24 16:55:05 +00:00
|
|
|
}
|
2018-07-11 17:54:27 +00:00
|
|
|
input[type=range]::-moz-focus-outer {
|
|
|
|
border: 0;
|
|
|
|
}
|
2018-02-24 16:55:05 +00:00
|
|
|
input[type=range]::-moz-range-thumb {
|
|
|
|
background: white;
|
|
|
|
cursor: pointer;
|
2018-07-11 12:09:26 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
width: 10px;
|
2018-02-24 16:55:05 +00:00
|
|
|
}
|
|
|
|
input[type=range]::-ms-track {
|
|
|
|
cursor: pointer;
|
|
|
|
background: transparent;
|
|
|
|
border-color: transparent;
|
|
|
|
color: transparent;
|
|
|
|
}
|
|
|
|
input[type=range]::-ms-fill-lower {
|
|
|
|
background: white;
|
2018-07-11 12:09:26 +00:00
|
|
|
opacity: 0.3;
|
2018-02-24 16:55:05 +00:00
|
|
|
}
|
|
|
|
input[type=range]::-ms-fill-upper {
|
|
|
|
background: white;
|
2018-07-11 12:09:26 +00:00
|
|
|
opacity: 0.3;
|
2018-02-24 16:55:05 +00:00
|
|
|
}
|
|
|
|
input[type=range]::-ms-thumb {
|
|
|
|
background: white;
|
|
|
|
cursor: pointer;
|
2018-07-11 12:09:26 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
width: 10px;
|
2018-02-24 16:55:05 +00:00
|
|
|
}
|
|
|
|
input[type=range]:focus::-ms-fill-lower {
|
|
|
|
background: white;
|
|
|
|
}
|
|
|
|
input[type=range]:focus::-ms-fill-upper {
|
2018-07-23 21:21:08 +00:00
|
|
|
background: white;
|
2018-02-24 16:55:05 +00:00
|
|
|
}
|
2018-07-11 12:09:26 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.active.volume-control {
|
|
|
|
width: 60% !important;
|
2017-12-17 16:07:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.looping.control {
|
|
|
|
i {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.label {
|
|
|
|
position: absolute;
|
|
|
|
font-size: 0.7rem;
|
|
|
|
bottom: -0.7rem;
|
|
|
|
right: -0.7rem;
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
.ui.feed.icon {
|
|
|
|
margin: 0;
|
|
|
|
}
|
2018-06-07 11:05:26 +00:00
|
|
|
.shuffling.loader.inline {
|
|
|
|
margin: 0;
|
|
|
|
}
|
2018-03-19 16:39:03 +00:00
|
|
|
|
2018-10-23 18:24:36 +00:00
|
|
|
|
|
|
|
@keyframes MOVE-BG {
|
|
|
|
from {
|
|
|
|
transform: translateX(0px);
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
transform: translateX(46px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.indicating.progress {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ui.progress .bar {
|
|
|
|
transition: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ui.inverted.progress .buffer.bar {
|
|
|
|
position: absolute;
|
|
|
|
background-color:rgba(255, 255, 255, 0.15);
|
|
|
|
}
|
|
|
|
.indicating.progress .bar {
|
|
|
|
left: -46px;
|
|
|
|
width: 200% !important;
|
|
|
|
color: grey;
|
|
|
|
background: repeating-linear-gradient(
|
|
|
|
-55deg,
|
|
|
|
grey 1px,
|
|
|
|
grey 10px,
|
|
|
|
transparent 10px,
|
|
|
|
transparent 20px,
|
|
|
|
) !important;
|
|
|
|
|
|
|
|
animation-name: MOVE-BG;
|
|
|
|
animation-duration: 2s;
|
|
|
|
animation-timing-function: linear;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
2017-06-23 21:00:42 +00:00
|
|
|
</style>
|