refactor track list components
This commit is contained in:
Thomas Amland
@@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<table class="table table-hover table-borderless table-numbered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
#
|
||||
</th>
|
||||
<th class="text-left">
|
||||
Title
|
||||
</th>
|
||||
<th v-if="!noArtist" class="text-left d-none d-lg-table-cell">
|
||||
Artist
|
||||
</th>
|
||||
<th v-if="!noAlbum" class="text-left d-none d-md-table-cell">
|
||||
Album
|
||||
</th>
|
||||
<th v-if="!noDuration" class="text-right d-none d-md-table-cell">
|
||||
Duration
|
||||
</th>
|
||||
<th class="text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in tracks"
|
||||
:key="index"
|
||||
:class="{'active': item.id === playingTrackId}"
|
||||
:draggable="true"
|
||||
@dragstart="dragstart(item.id, $event)"
|
||||
@click="play(index)"
|
||||
>
|
||||
<td>
|
||||
<button>
|
||||
<Icon class="icon" :icon="isPlaying && item.id === playingTrackId ? 'pause-fill' :'play-fill'" />
|
||||
<span class="number">{{ item.track || 1 }}</span>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
{{ item.title }}
|
||||
<div class="d-lg-none text-muted">
|
||||
<small>{{ item.artist }}</small>
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="!noArtist" class="d-none d-lg-table-cell">
|
||||
<template v-if="item.artistId">
|
||||
<router-link :to="{name: 'artist', params: {id: item.artistId}}" @click.native.stop>
|
||||
{{ item.artist }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item.artist }}
|
||||
</template>
|
||||
</td>
|
||||
<td v-if="!noAlbum" class="d-none d-md-table-cell">
|
||||
<template v-if="item.albumId">
|
||||
<router-link :to="{name: 'album', params: {id: item.albumId}}" disabled @click.native.stop>
|
||||
{{ item.album }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item.album }}
|
||||
</template>
|
||||
</td>
|
||||
<td v-if="!noDuration" class="text-right d-none d-md-table-cell">
|
||||
{{ $formatDuration(item.duration) }}
|
||||
</td>
|
||||
<td class="text-right" @click.stop="">
|
||||
<TrackContextMenu :track="item">
|
||||
<slot name="context-menu" :index="index" :item="item" />
|
||||
</TrackContextMenu>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import TrackContextMenu from '@/library/TrackContextMenu.vue'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
TrackContextMenu,
|
||||
},
|
||||
props: {
|
||||
tracks: { type: Array, required: true },
|
||||
noAlbum: { type: Boolean, default: false },
|
||||
noArtist: { type: Boolean, default: false },
|
||||
noDuration: { type: Boolean, default: false },
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
playingTrackId: 'player/trackId',
|
||||
isPlaying: 'player/isPlaying',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
playPause: 'player/playPause',
|
||||
}),
|
||||
play(index: number) {
|
||||
if ((this.tracks as any)[index].id === this.playingTrackId) {
|
||||
return this.$store.dispatch('player/playPause')
|
||||
}
|
||||
return this.$store.dispatch('player/playTrackList', {
|
||||
index,
|
||||
tracks: this.tracks,
|
||||
})
|
||||
},
|
||||
dragstart(id: string, event: any) {
|
||||
event.dataTransfer.setData('id', id)
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -54,7 +54,7 @@
|
||||
</style>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import TrackList from '@/library/TrackList.vue'
|
||||
import TrackList from '@/library/track/TrackList.vue'
|
||||
import { Album } from '@/shared/api'
|
||||
|
||||
export default Vue.extend({
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import AlbumList from '@/library/album/AlbumList.vue'
|
||||
import TrackList from '@/library/TrackList.vue'
|
||||
import TrackList from '@/library/track/TrackList.vue'
|
||||
import InfiniteList from '@/shared/components/InfiniteList.vue'
|
||||
|
||||
export default Vue.extend({
|
||||
|
||||
@@ -2,58 +2,44 @@
|
||||
<ContentLoader v-slot :loading="podcast ==null">
|
||||
<h1>{{ podcast.name }}</h1>
|
||||
<p>{{ podcast.description }}</p>
|
||||
<table class="table table-hover table-borderless table-numbered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
#
|
||||
</th>
|
||||
<th class="text-left">
|
||||
Title
|
||||
</th>
|
||||
<th class="text-right d-none d-md-table-cell">
|
||||
Duration
|
||||
</th>
|
||||
<th class="text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<BaseTable>
|
||||
<BaseTableHead>
|
||||
<th class="text-right d-none d-md-table-cell">
|
||||
Duration
|
||||
</th>
|
||||
</BaseTableHead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in podcast.tracks"
|
||||
:key="index"
|
||||
<tr v-for="(item, index) in podcast.tracks" :key="index"
|
||||
:class="{'active': item.id === playingTrackId, 'disabled': !item.playable}"
|
||||
@click="click(item)">
|
||||
<td>
|
||||
<button>
|
||||
<Icon class="icon" :icon="isPlaying && item.id === playingTrackId ? 'pause-fill' :'play-fill'" />
|
||||
<span class="number">{{ item.track }}</span>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
{{ item.title }}
|
||||
<div class="text-muted">
|
||||
<small>{{ item.description }}</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right d-none d-md-table-cell">
|
||||
<template v-if="item.duration">
|
||||
{{ $formatDuration(item.duration) }}
|
||||
</template>
|
||||
</td>
|
||||
<td class="text-right" @click.stop="">
|
||||
<OverflowMenu :disabled="!item.playable" />
|
||||
</td>
|
||||
@click="play(item)">
|
||||
<CellTrackNumber :active="item.id === playingTrackId && isPlaying" :track="item" />
|
||||
<CellTitle :track="item" />
|
||||
<CellDuration :track="item" />
|
||||
<CellActions :track="item" />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</BaseTable>
|
||||
</ContentLoader>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
import CellTrackNumber from '@/library/track/CellTrackNumber.vue'
|
||||
import CellActions from '@/library/track/CellActions.vue'
|
||||
import CellDuration from '@/library/track/CellDuration.vue'
|
||||
import CellTitle from '@/library/track/CellTitle.vue'
|
||||
import BaseTable from '@/library/track/BaseTable.vue'
|
||||
import BaseTableHead from '@/library/track/BaseTableHead.vue'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
BaseTableHead,
|
||||
BaseTable,
|
||||
CellTitle,
|
||||
CellDuration,
|
||||
CellActions,
|
||||
CellTrackNumber
|
||||
},
|
||||
props: {
|
||||
id: { type: String, required: true },
|
||||
},
|
||||
@@ -72,7 +58,7 @@
|
||||
this.podcast = await this.$api.getPodcast(this.id)
|
||||
},
|
||||
methods: {
|
||||
async click(track: any) {
|
||||
async play(track: any) {
|
||||
if (!track.playable) {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -1,56 +1,37 @@
|
||||
<template>
|
||||
<div v-if="items">
|
||||
<h1>Radio</h1>
|
||||
<table class="table table-hover table-borderless table-numbered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
#
|
||||
</th>
|
||||
<th class="text-left">
|
||||
Title
|
||||
</th>
|
||||
<th class="text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<BaseTable>
|
||||
<BaseTableHead />
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in items"
|
||||
:key="index"
|
||||
<tr v-for="(item, index) in items" :key="index"
|
||||
:class="{'active': item.id === playingTrackId}"
|
||||
@click="play(index)">
|
||||
<td>
|
||||
<button>
|
||||
<Icon class="icon" :icon="isPlaying && item.id === playingTrackId ? 'pause-fill' :'play-fill'" />
|
||||
<span class="number">{{ index + 1 }}</span>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
{{ item.title }}
|
||||
<div>
|
||||
<small class="text-muted">
|
||||
{{ item.description }}
|
||||
</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right" @click.stop="">
|
||||
<TrackContextMenu :track="item" />
|
||||
</td>
|
||||
<CellTrackNumber :active="item.id === playingTrackId && isPlaying" :track="item" />
|
||||
<CellTitle :track="item" />
|
||||
<CellActions :track="item" />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</BaseTable>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import TrackContextMenu from '@/library/TrackContextMenu.vue'
|
||||
import { RadioStation } from '@/shared/api'
|
||||
import { mapGetters } from 'vuex'
|
||||
import CellTrackNumber from '@/library/track/CellTrackNumber.vue'
|
||||
import CellActions from '@/library/track/CellActions.vue'
|
||||
import CellTitle from '@/library/track/CellTitle.vue'
|
||||
import BaseTable from '@/library/track/BaseTable.vue'
|
||||
import BaseTableHead from '@/library/track/BaseTableHead.vue'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
TrackContextMenu,
|
||||
BaseTableHead,
|
||||
BaseTable,
|
||||
CellTitle,
|
||||
CellActions,
|
||||
CellTrackNumber,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
import Vue from 'vue'
|
||||
import AlbumList from '@/library/album/AlbumList.vue'
|
||||
import ArtistList from '@/library/artist/ArtistList.vue'
|
||||
import TrackList from '@/library/TrackList.vue'
|
||||
import TrackList from '@/library/track/TrackList.vue'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<template functional>
|
||||
<table class="table table-hover table-borderless table-numbered">
|
||||
<slot />
|
||||
</table>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template functional>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th class="text-left">
|
||||
Title
|
||||
</th>
|
||||
<slot />
|
||||
<th class="text-right">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</template>
|
||||
@@ -1,22 +1,21 @@
|
||||
<template>
|
||||
<b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0">
|
||||
<template #button-content>
|
||||
<Icon icon="three-dots-vertical" />
|
||||
</template>
|
||||
<b-dropdown-item-button @click="setNextInQueue()">
|
||||
Play next
|
||||
</b-dropdown-item-button>
|
||||
<b-dropdown-item-button @click="addToQueue()">
|
||||
Add to queue
|
||||
</b-dropdown-item-button>
|
||||
<b-dropdown-item-button @click="toggleStarred()">
|
||||
{{ starred ? 'Unstar' : 'Star' }}
|
||||
</b-dropdown-item-button>
|
||||
<b-dropdown-item-button @click="download()">
|
||||
Download
|
||||
</b-dropdown-item-button>
|
||||
<slot :item="track" />
|
||||
</b-dropdown>
|
||||
<td class="text-right" @click.stop="">
|
||||
<OverflowMenu :disabled="track.playable === false">
|
||||
<b-dropdown-item-button @click="setNextInQueue()">
|
||||
Play next
|
||||
</b-dropdown-item-button>
|
||||
<b-dropdown-item-button @click="addToQueue()">
|
||||
Add to queue
|
||||
</b-dropdown-item-button>
|
||||
<b-dropdown-item-button @click="toggleStarred()">
|
||||
{{ starred ? 'Unstar' : 'Star' }}
|
||||
</b-dropdown-item-button>
|
||||
<b-dropdown-item-button @click="download()">
|
||||
Download
|
||||
</b-dropdown-item-button>
|
||||
<slot :item="track" />
|
||||
</OverflowMenu>
|
||||
</td>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
@@ -0,0 +1,12 @@
|
||||
<template functional>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<template v-if="props.track.albumId">
|
||||
<router-link :to="{name: 'album', params: {id: props.track.albumId}}" @click.native.stop>
|
||||
{{ props.track.album }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ props.track.album }}
|
||||
</template>
|
||||
</td>
|
||||
</template>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template functional>
|
||||
<td class="d-none d-lg-table-cell">
|
||||
<template v-if="props.track.artistId">
|
||||
<router-link :to="{name: 'artist', params: {id: props.track.artistId}}" @click.native.stop>
|
||||
{{ props.track.artist }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ props.track.artist }}
|
||||
</template>
|
||||
</td>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template functional>
|
||||
<td class="text-right d-none d-md-table-cell">
|
||||
<template v-if="props.track.duration">
|
||||
{{ parent.$formatDuration(props.track.duration) }}
|
||||
</template>
|
||||
</td>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template functional>
|
||||
<td>
|
||||
{{ props.track.title }}
|
||||
<div v-if="props.track.description" class="text-muted">
|
||||
<small>{{ props.track.description }}</small>
|
||||
</div>
|
||||
<div v-else-if="props.track.artist" class="d-lg-none text-muted">
|
||||
<small>{{ props.track.artist }}</small>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template functional>
|
||||
<td>
|
||||
<button>
|
||||
<Icon class="icon" :icon="props.active ? 'pause-fill' :'play-fill'" />
|
||||
<span class="number">{{ props.track.track || 1 }}</span>
|
||||
</button>
|
||||
</td>
|
||||
</template>
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<BaseTable>
|
||||
<BaseTableHead>
|
||||
<th v-if="!noArtist" class="text-left d-none d-lg-table-cell">
|
||||
Artist
|
||||
</th>
|
||||
<th v-if="!noAlbum" class="text-left d-none d-md-table-cell">
|
||||
Album
|
||||
</th>
|
||||
<th v-if="!noDuration" class="text-right d-none d-md-table-cell">
|
||||
Duration
|
||||
</th>
|
||||
</BaseTableHead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in tracks" :key="index"
|
||||
:class="{'active': item.id === playingTrackId}"
|
||||
:draggable="true" @dragstart="dragstart(item.id, $event)"
|
||||
@click="play(index)">
|
||||
<CellTrackNumber :active="item.id === playingTrackId && isPlaying" :track="item" />
|
||||
<CellTitle :track="item" />
|
||||
<CellArtist v-if="!noArtist" :track="item" />
|
||||
<CellAlbum v-if="!noAlbum" :track="item" />
|
||||
<CellDuration v-if="!noDuration" :track="item" />
|
||||
<CellActions :track="item">
|
||||
<slot name="context-menu" :index="index" :item="item" />
|
||||
</CellActions>
|
||||
</tr>
|
||||
</tbody>
|
||||
</BaseTable>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import CellDuration from '@/library/track/CellDuration.vue'
|
||||
import CellArtist from '@/library/track/CellArtist.vue'
|
||||
import CellAlbum from '@/library/track/CellAlbum.vue'
|
||||
import CellTrackNumber from '@/library/track/CellTrackNumber.vue'
|
||||
import CellActions from '@/library/track/CellActions.vue'
|
||||
import CellTitle from '@/library/track/CellTitle.vue'
|
||||
import BaseTable from '@/library/track/BaseTable.vue'
|
||||
import BaseTableHead from '@/library/track/BaseTableHead.vue'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
BaseTableHead,
|
||||
BaseTable,
|
||||
CellTitle,
|
||||
CellActions,
|
||||
CellTrackNumber,
|
||||
CellAlbum,
|
||||
CellArtist,
|
||||
CellDuration,
|
||||
},
|
||||
props: {
|
||||
tracks: { type: Array, required: true },
|
||||
noAlbum: { type: Boolean, default: false },
|
||||
noArtist: { type: Boolean, default: false },
|
||||
noDuration: { type: Boolean, default: false },
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
playingTrackId: 'player/trackId',
|
||||
isPlaying: 'player/isPlaying',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
playPause: 'player/playPause',
|
||||
}),
|
||||
play(index: number) {
|
||||
if ((this.tracks as any)[index].id === this.playingTrackId) {
|
||||
return this.$store.dispatch('player/playPause')
|
||||
}
|
||||
return this.$store.dispatch('player/playTrackList', {
|
||||
index,
|
||||
tracks: this.tracks,
|
||||
})
|
||||
},
|
||||
dragstart(id: string, event: any) {
|
||||
event.dataTransfer.setData('id', id)
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user