pregress handling for artists
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Artem Anufrij
parent
62091a02a3
commit
724f35dfb1
@ -145,9 +145,9 @@ export default {
|
||||
|
||||
this.pushHistoryItem();
|
||||
|
||||
if (this.selectedTrack.parent.progress) {
|
||||
this.skipToSecond(this.selectedTrack.parent.progress.progress);
|
||||
this.selectedTrack.parent.progress = undefined;
|
||||
if (this.currentTrackParent.progress) {
|
||||
this.skipToSecond(this.currentTrackParent.progress.progress);
|
||||
this.currentTrackParent.progress = undefined;
|
||||
} else {
|
||||
// Try to fix SAFARI
|
||||
this.audio.play();
|
||||
@ -275,7 +275,7 @@ export default {
|
||||
this.progress = this.audio.currentTime;
|
||||
let item = {
|
||||
id: this.selectedTrack._id,
|
||||
parentId: this.selectedTrack.parent._id,
|
||||
parentId: this.currentTrackParent._id,
|
||||
type: "track",
|
||||
progress: Math.round(this.progress)
|
||||
}
|
||||
|
||||
@ -1,24 +1,10 @@
|
||||
<template>
|
||||
<DialogBase
|
||||
ref="dialogWindow"
|
||||
id="dialogWindow"
|
||||
:title="selectedArtist.name"
|
||||
@canceled="closed"
|
||||
:showFooter="false"
|
||||
:showFullscreenButton="true"
|
||||
:disableXscroll="true"
|
||||
:disableYscroll="true"
|
||||
>
|
||||
<DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
|
||||
<div id="artistViewer">
|
||||
<div id="header" class="flex-column">
|
||||
<div id="background" :style="coverBackground" />
|
||||
<awesome-icon
|
||||
icon="star"
|
||||
size="2x"
|
||||
class="favourite ma4"
|
||||
:class="{ active: isFavourite }"
|
||||
@click="toggleFavourite"
|
||||
/>
|
||||
<awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
|
||||
<awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" />
|
||||
<h1 @dblclick="dblclick">
|
||||
{{ selectedArtist.name }}
|
||||
</h1>
|
||||
@ -28,41 +14,20 @@
|
||||
<b>{{ artist_duration }}</b>
|
||||
</span>
|
||||
<div id="albumList" class="flex-row showOnMobilePortrait">
|
||||
<AlbumItem
|
||||
class="ma"
|
||||
:class="{ playing: playingAlbumId == album._id }"
|
||||
v-for="album in selectedArtist.albums"
|
||||
:key="album._id"
|
||||
:item="album"
|
||||
@click="scrollToAlbum(album)"
|
||||
@dblclick="playAlbum(album)"
|
||||
/>
|
||||
<AlbumItem class="ma" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
|
||||
</div>
|
||||
<div id="navigation" class="flex-row center ma-top">
|
||||
<div class="flex-row grow"></div>
|
||||
<div class="flex-row">
|
||||
<button
|
||||
@click="gotoPrevArtist"
|
||||
class="primary ma4"
|
||||
:title="prevArtist.name"
|
||||
:disabled="!prevArtist._id"
|
||||
>
|
||||
<button @click="gotoPrevArtist" class="primary ma4" :title="prevArtist.name" :disabled="!prevArtist._id">
|
||||
<awesome-icon icon="angle-left" class="ma4" />
|
||||
</button>
|
||||
<button
|
||||
@click="gotoNextArtist"
|
||||
class="primary ma4"
|
||||
:title="nextArtist.name"
|
||||
:disabled="!nextArtist._id"
|
||||
>
|
||||
<button @click="gotoNextArtist" class="primary ma4" :title="nextArtist.name" :disabled="!nextArtist._id">
|
||||
<awesome-icon icon="angle-right" class="ma4" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-row grow right center">
|
||||
<DropDown
|
||||
v-if="$store.getters['user/isAdministrator']"
|
||||
class="hideOnMobile"
|
||||
>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']" class="hideOnMobile">
|
||||
<button class="flat pa8-left pa8-right">
|
||||
<awesome-icon icon="ellipsis-v" />
|
||||
</button>
|
||||
@ -86,23 +51,9 @@
|
||||
</div>
|
||||
<div class="flex-row overflow-y">
|
||||
<div id="albumList" class="flex-column hideOnMobilePortrait">
|
||||
<AlbumItem
|
||||
class="ma-top ma-left ma-right"
|
||||
:class="{ playing: playingAlbumId == album._id }"
|
||||
v-for="album in selectedArtist.albums"
|
||||
:key="album._id"
|
||||
:item="album"
|
||||
:id="album._id"
|
||||
:ref="album._id"
|
||||
@click="scrollToAlbum(album)"
|
||||
@dblclick="playAlbum(album)"
|
||||
/>
|
||||
<AlbumItem class="ma-top ma-left ma-right" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" :id="album._id" :ref="album._id" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
|
||||
</div>
|
||||
<ul
|
||||
id="trackList"
|
||||
class="tracks"
|
||||
:class="{ playing: selectedTrack._id != null }"
|
||||
>
|
||||
<ul id="trackList" class="tracks" :class="{ playing: selectedTrack._id != null }">
|
||||
<li v-for="track in selectedArtist.tracks" :key="track._id">
|
||||
<TrackItem :track="track" :ref="track._id" />
|
||||
</li>
|
||||
@ -143,6 +94,14 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
playProgress() {
|
||||
let track = this.selectedArtist.tracks.find(
|
||||
(f) => f._id == this.selectedArtist.progress.id
|
||||
);
|
||||
if (track) {
|
||||
this.$store.dispatch("tracks/play", track);
|
||||
}
|
||||
},
|
||||
gotoNextArtist() {
|
||||
this.$store.dispatch("artists/gotoNextArtist");
|
||||
},
|
||||
@ -194,6 +153,10 @@ export default {
|
||||
uploadNewCover() {
|
||||
this.$store.dispatch("artists/uploadNewCover", this.selectedArtist);
|
||||
},
|
||||
loadUserProgress() {
|
||||
if (this.selectedTrack.parent._id != this.selectedArtist._id)
|
||||
this.$store.dispatch("user/getProgress", this.selectedArtist);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
@ -266,6 +229,7 @@ export default {
|
||||
this.$refs.dialogWindow.open();
|
||||
window.addEventListener("keydown", this.keydownListener);
|
||||
}
|
||||
this.loadUserProgress();
|
||||
this.gotoTrack();
|
||||
} else {
|
||||
if (this.$refs.dialogWindow.visible) {
|
||||
@ -289,6 +253,7 @@ export default {
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1,
|
||||
#stats {
|
||||
z-index: 1;
|
||||
@ -297,33 +262,40 @@ h1,
|
||||
color: var(--white);
|
||||
text-shadow: 0 1px 2px black;
|
||||
}
|
||||
|
||||
#artistImage {
|
||||
width: 512px;
|
||||
max-height: 256px;
|
||||
}
|
||||
|
||||
#header {
|
||||
position: relative;
|
||||
background-color: black;
|
||||
width: 760px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#albumList {
|
||||
z-index: 1;
|
||||
overflow-y: auto;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
#albumList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#albumList .album:last-child {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
z-index: 2;
|
||||
background-color: #ffffff40;
|
||||
border-top: 1px solid #ffffff20;
|
||||
border-bottom: 1px solid #00000020;
|
||||
}
|
||||
|
||||
#trackList {
|
||||
z-index: 1;
|
||||
background-color: var(--white);
|
||||
@ -338,12 +310,15 @@ h1,
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.dialog-body button {
|
||||
color: var(--darkgray);
|
||||
}
|
||||
|
||||
.container {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#albumList {
|
||||
background-color: initial;
|
||||
@ -353,19 +328,21 @@ h1,
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px), (max-height: 480px) {
|
||||
@media (max-width: 480px),
|
||||
(max-height: 480px) {
|
||||
#artistViewer {
|
||||
height: initial;
|
||||
}
|
||||
|
||||
#trackList {
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 480px) {
|
||||
}
|
||||
@media (max-height: 480px) {}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user