jean/airsonic-refix
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

increase play button hit area

Browse Source
This commit is contained in:
Thomas Amland 2020-08-02 15:18:44 +02:00
parent 49a9499d1b
commit 60e1192e12
2 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/library/TrackList.vue
View File

@ -15,23 +15,23 @@
<tr v-for="(item, index) in tracks" :key="item.id" <tr v-for="(item, index) in tracks" :key="item.id"
draggable="true" @dragstart="dragstart(item.id, $event)" draggable="true" @dragstart="dragstart(item.id, $event)"
:class="{'text-primary': item.id === playingTrackId}"> :class="{'text-primary': item.id === playingTrackId}">
<td class="pl-0 pr-0 text-center text-muted" style="min-width: 20px; max-width: 20px;"> <td class="pl-0 pr-0 text-center text-muted"
<span class="track-status"> style="min-width: 20px; max-width: 20px;"
@click="play(index)">
<template v-if="item.id === playingTrackId"> <template v-if="item.id === playingTrackId">
<Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary"/> <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary"/>
</template> </template>
<template v-else>{{ item.track || 1 }}</template> <template v-else>
</span> <span class="track-number">{{ item.track || 1 }}</span>
<span class="track-status-hover"> <Icon class="track-number-hover" icon="play-fill"/>
<span v-if="item.id === playingTrackId" @click="playPause()"> </template>
<Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'" class="text-primary"/> </td>
</span> <td @click="play(index)">
<span v-else @click="play(index)"> {{ item.title }}
<Icon icon="play-fill"/> <div class="hidden-md text-muted">
</span> <small>{{ item.artist }}</small>
</span> </div>
</td> </td>
<td>{{ item.title }}</td>
<td> <td>
<template v-if="item.artistId"> <template v-if="item.artistId">
<router-link :to="{name: 'artist', params: {id: item.artistId}}"> <router-link :to="{name: 'artist', params: {id: item.artistId}}">
@ -63,14 +63,14 @@
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.track-status-hover { .track-number-hover {
display: none; display: none;
} }
tr:hover { tr:hover {
.track-status-hover { .track-number-hover {
display: inline; display: inline;
} }
.track-status { .track-number {
display: none; display: none;
} }
} }
@ -101,6 +101,10 @@ export default Vue.extend({
playPause: "player/playPause", playPause: "player/playPause",
}), }),
play(index: number) { play(index: number) {
if ((this.tracks as any)[index].id === this.playingTrackId) {
this.$store.commit("player/playPause")
return;
}
this.$store.dispatch('player/play', { this.$store.dispatch('player/play', {
index, index,
queue: this.tracks, queue: this.tracks,

2
src/shared/components/Icon.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<BIcon :icon="icon"/> <BIcon :icon="icon" v-bind="$attrs"/>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'