1.1.12
This commit is contained in:
exttex
67
app/client/src/components/AlbumContext.vue
Normal file
67
app/client/src/components/AlbumContext.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<v-list dense>
|
||||
<!-- Play album -->
|
||||
<v-list-item dense @click='$emit("play")'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-play</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Play")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Add to queue -->
|
||||
<v-list-item dense @click='$emit("addQueue")'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-playlist-plus</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Add to queue")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Add to library -->
|
||||
<v-list-item dense @click='$emit("library")' v-if='!album.library'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-heart</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Add to library")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Remove from library -->
|
||||
<v-list-item dense @click='$emit("library")' v-if='album.library'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-heart-remove</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Remove from library")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Share -->
|
||||
<v-list-item dense @click='$emit("share")'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-share-variant</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Share")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Download -->
|
||||
<v-list-item dense @click='$emit("download")'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-download</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Download")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AlbumContext',
|
||||
props: {
|
||||
album: Object,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -19,68 +19,28 @@
|
||||
<v-list-item-subtitle>{{album.artistString}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<!-- Context menu -->
|
||||
<v-menu v-model='menu' offset-y offset-x absolue>
|
||||
<!-- Context -->
|
||||
<v-menu offset-y offset-x absolue>
|
||||
<template v-slot:activator="{on, attrs}">
|
||||
<v-btn v-on='on' v-bind='attrs' icon>
|
||||
<v-icon>mdi-dots-vertical</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<!-- Play album -->
|
||||
<v-list-item dense @click='play'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-play</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Play")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Add to library -->
|
||||
<v-list-item dense @click='library' v-if='!album.library'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-heart</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Add to library")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Remove from library -->
|
||||
<v-list-item dense @click='library' v-if='album.library'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-heart-remove</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Remove from library")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Share -->
|
||||
<v-list-item dense @click='share'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-share-variant</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Share")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<!-- Download -->
|
||||
<v-list-item dense @click='download'>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-download</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{$t("Download")}}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
</v-list>
|
||||
<AlbumContext
|
||||
:album='album'
|
||||
@play='play'
|
||||
@download='download'
|
||||
@addQueue='addQueue'
|
||||
@share='share'
|
||||
@library='library'
|
||||
></AlbumContext>
|
||||
</v-menu>
|
||||
|
||||
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<!-- Card version -->
|
||||
<v-card v-if='card' max-width='175px' max-height='230px' @click='click' color='transparent' elevation='0'>
|
||||
<v-card v-if='card' max-width='175px' max-height='230px' @click='click' color='transparent' elevation='0' @contextmenu="showMenu">
|
||||
<v-hover v-slot:default='{hover}'>
|
||||
<div>
|
||||
|
||||
@ -96,6 +56,26 @@
|
||||
</div>
|
||||
</v-hover>
|
||||
|
||||
<!-- Context -->
|
||||
<v-menu
|
||||
v-model='menu'
|
||||
:position-x='menuX'
|
||||
:position-y='menuY'
|
||||
absolute
|
||||
offset-y
|
||||
close-on-click>
|
||||
|
||||
<AlbumContext
|
||||
:album='album'
|
||||
@play='play'
|
||||
@download='download'
|
||||
@addQueue='addQueue'
|
||||
@share='share'
|
||||
@library='library'
|
||||
></AlbumContext>
|
||||
</v-menu>
|
||||
|
||||
|
||||
<div class='px-2 pt-2 pb-1 text-subtitle-2 text-center text-truncate'>{{album.title}}</div>
|
||||
<div class='pb-1 px-2 text-caption text-center text-truncate'>{{album.artistString}}</div>
|
||||
|
||||
@ -108,15 +88,18 @@
|
||||
|
||||
<script>
|
||||
import DownloadDialog from '@/components/DownloadDialog.vue';
|
||||
import AlbumContext from '@/components/AlbumContext.vue';
|
||||
|
||||
export default {
|
||||
name: 'AlbumTile',
|
||||
components: {DownloadDialog},
|
||||
components: {DownloadDialog, AlbumContext},
|
||||
data() {
|
||||
return {
|
||||
menu: false,
|
||||
hover: false,
|
||||
downloadDialog: false
|
||||
downloadDialog: false,
|
||||
menuX: 0,
|
||||
menuY: 0,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -127,6 +110,15 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showMenu(e) {
|
||||
e.preventDefault();
|
||||
this.menu = false;
|
||||
this.menuX = e.clientX;
|
||||
this.menuY = e.clientY;
|
||||
this.$nextTick(() => {
|
||||
this.menu = true;
|
||||
});
|
||||
},
|
||||
async play() {
|
||||
let album = this.album;
|
||||
//Load album from API if tracks are missing
|
||||
@ -145,6 +137,18 @@ export default {
|
||||
this.$root.replaceQueue(album.tracks);
|
||||
this.$root.playIndex(0);
|
||||
},
|
||||
//Add to queue
|
||||
async addQueue() {
|
||||
let album = this.album;
|
||||
//Load album from API if tracks are missing
|
||||
if (album.tracks.length == 0) {
|
||||
let data = await this.$axios.get(`/album/${album.id}`)
|
||||
album = data.data;
|
||||
}
|
||||
if (!album) return;
|
||||
|
||||
this.$root.queue.data = this.$root.queue.data.concat(album.tracks);
|
||||
},
|
||||
//On click navigate to details
|
||||
click() {
|
||||
this.$router.push({
|
||||
@ -188,7 +192,7 @@ export default {
|
||||
document.body.removeChild(copyElem);
|
||||
this.$root.globalSnackbar = this.$t('Link copied!');
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-scroll.self='scroll'>
|
||||
<div>
|
||||
<div class='px-4 pt-2 d-flex' style='max-height: 50px;'>
|
||||
<div class='text-overline px-2 pt-1'>
|
||||
{{count}} {{$t("TRACKS")}}
|
||||
@ -24,7 +24,7 @@
|
||||
></v-text-field>
|
||||
</div>
|
||||
|
||||
<v-list :height='height' class='overflow-y-auto'>
|
||||
<v-list :height='height' class='overflow-y-auto' v-scroll.self='scroll' >
|
||||
<v-lazy
|
||||
v-for='(track, index) in filtered'
|
||||
:key='index + "t" + track.id'
|
||||
@ -69,7 +69,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
scroll(event) {
|
||||
let loadOffset = event.target.scrollHeight - event.target.offsetHeight - 100;
|
||||
console.log(event);
|
||||
let loadOffset = event.target.scrollHeight - event.target.offsetHeight - 150;
|
||||
if (event.target.scrollTop > loadOffset) {
|
||||
if (!this.loading) this.load();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user