+
![]()
\ No newline at end of file
diff --git a/src/components/Track.vue b/src/components/Track.vue
index 51cb20e..c4051ec 100644
--- a/src/components/Track.vue
+++ b/src/components/Track.vue
@@ -66,12 +66,14 @@ export default {
this.$nextTick(() => {
element.scrollIntoView({
block: "start",
+ behavior: "smooth",
});
});
} else if (scrollUp) {
this.$nextTick(() => {
element.scrollIntoView({
block: "end",
+ behavior: "smooth",
});
});
}
diff --git a/src/components/base-components/Dialog.vue b/src/components/base-components/Dialog.vue
index 1ceec56..190bef2 100644
--- a/src/components/base-components/Dialog.vue
+++ b/src/components/base-components/Dialog.vue
@@ -299,7 +299,7 @@ export default {
right: 0;
bottom: 0;
z-index: 1000;
- animation: fadeIn ease 0.15s;
+ animation: fadeIn ease 0.20s;
}
.dialog-window {
box-shadow: 0px 8px 32px var(--shadow);
diff --git a/src/components/base-components/PopUp.vue b/src/components/base-components/PopUp.vue
new file mode 100644
index 0000000..365a132
--- /dev/null
+++ b/src/components/base-components/PopUp.vue
@@ -0,0 +1,79 @@
+
+
+
+
+
+
{{ item.title }}
+
{{ item.message }}
+
+
+
-
+
+
-
-
-
@@ -156,6 +135,14 @@ export default {
}
}
},
+ playProgress() {
+ let track = this.selectedAlbum.tracks.find(
+ (f) => f._id == this.selectedAlbum.progress.id
+ );
+ if (track) {
+ this.$store.dispatch("tracks/play", track);
+ }
+ },
closed() {
if (
(window.history.state.back &&
@@ -201,19 +188,19 @@ export default {
return visibility == "global"
? "globe"
: visibility == "instance"
- ? "server"
- : visibility == "hidden"
- ? "eye-slash"
- : "user";
+ ? "server"
+ : visibility == "hidden"
+ ? "eye-slash"
+ : "user";
},
getVisibilityText(visibility) {
return visibility == "global"
? "Global"
: visibility == "instance"
- ? "On this server"
- : visibility == "hidden"
- ? "Hide this Album"
- : "Only for me";
+ ? "On this server"
+ : visibility == "hidden"
+ ? "Hide this Album"
+ : "Only for me";
},
selectAlbum(album) {
this.$store.dispatch("albums/selectAlbum", album);
@@ -228,6 +215,15 @@ export default {
shareDisable() {
this.$store.dispatch("albums/shareDisable", this.selectedAlbum);
},
+ loadUserProgress() {
+ if (this.selectedTrack.parent._id != this.selectedAlbum._id) {
+ this.$store
+ .dispatch("user/getProgress", this.selectedAlbum)
+ .then(() => {
+ this.gotoTrack();
+ });
+ }
+ }
},
computed: {
...mapGetters({
@@ -287,19 +283,19 @@ export default {
return this.selectedAlbum.visibility == "global"
? "globe"
: this.selectedAlbum.visibility == "instance"
- ? "server"
- : this.selectedAlbum.visibility == "hidden"
- ? "eye-slash"
- : "user";
+ ? "server"
+ : this.selectedAlbum.visibility == "hidden"
+ ? "eye-slash"
+ : "user";
},
visibility_text() {
return this.selectedAlbum.visibility == "global"
? "Visible for the whole world"
: this.selectedAlbum.visibility == "instance"
- ? "Visible on this instance"
- : this.selectedAlbum.visibility == "hidden"
- ? "Hidden for all users"
- : "Visible only for me";
+ ? "Visible on this instance"
+ : this.selectedAlbum.visibility == "hidden"
+ ? "Hidden for all users"
+ : "Visible only for me";
},
isFavourite() {
return (
@@ -318,7 +314,7 @@ export default {
this.$refs.dialogWindow.open();
window.addEventListener("keydown", this.keydownListener);
}
- this.gotoTrack();
+ this.loadUserProgress();
} else {
if (this.$refs.dialogWindow.visible) {
this.$refs.dialogWindow.close();
@@ -339,14 +335,17 @@ export default {
height: 366px;
width: 640px;
}
+
#header {
position: relative;
background-color: black;
}
+
#header img {
align-self: center;
width: 256px;
}
+
#stats {
z-index: 2;
align-items: center;
@@ -357,10 +356,12 @@ export default {
border-top: 1px solid #ffffff20;
border-bottom: 1px solid #00000020;
}
+
.dropdown-activator button {
width: 32px;
height: 32px;
}
+
#trackList {
background-color: var(--white);
z-index: 1;
@@ -370,15 +371,19 @@ export default {
#header {
width: 100%;
}
+
#albumViewer {
flex-direction: column;
}
}
-@media (max-width: 480px), (max-height: 480px) {
+
+@media (max-width: 480px),
+(max-height: 480px) {
#albumViewer {
width: 100%;
height: 100%;
}
+
#trackList {
height: initial;
flex-grow: 1;
diff --git a/src/components/dialogs/ArtistViewer.vue b/src/components/dialogs/ArtistViewer.vue
index 5ed7943..f24861d 100644
--- a/src/components/dialogs/ArtistViewer.vue
+++ b/src/components/dialogs/ArtistViewer.vue
@@ -1,24 +1,10 @@
-
+
-
+
+
{{ selectedArtist.name }}
@@ -28,41 +14,20 @@
{{ artist_duration }}
-
+
-
+
-
@@ -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,15 @@ export default {
uploadNewCover() {
this.$store.dispatch("artists/uploadNewCover", this.selectedArtist);
},
+ loadUserProgress() {
+ if (!this.isPlaying || !this.selectedTrack.parent.parent || this.selectedTrack.parent.parent._id != this.selectedArtist._id) {
+ this.$store.dispatch("user/getProgress", this.selectedArtist).then(() => {
+ this.gotoTrack();
+ });
+ } else {
+ this.gotoTrack();
+ }
+ }
},
computed: {
...mapGetters({
@@ -202,6 +170,7 @@ export default {
selectedArtist: ["artists/selectedArtist"],
selectedTrack: ["tracks/selectedTrack"],
favourites: ["user/favourites"],
+ isPlaying: ["player/isPlaying"]
}),
cover() {
let covers = this.selectedArtist.covers;
@@ -266,7 +235,7 @@ export default {
this.$refs.dialogWindow.open();
window.addEventListener("keydown", this.keydownListener);
}
- this.gotoTrack();
+ this.loadUserProgress();
} else {
if (this.$refs.dialogWindow.visible) {
this.$refs.dialogWindow.close();
@@ -289,6 +258,7 @@ export default {
flex-direction: column;
overflow: hidden;
}
+
h1,
#stats {
z-index: 1;
@@ -297,33 +267,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 +315,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 +333,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) {}
\ No newline at end of file
diff --git a/src/components/dialogs/Radios.vue b/src/components/dialogs/Radios.vue
index 008836d..a8e6616 100644
--- a/src/components/dialogs/Radios.vue
+++ b/src/components/dialogs/Radios.vue
@@ -53,7 +53,7 @@
![]()
|
@@ -116,6 +116,13 @@ export default {
updateCover(radio) {
this.$store.dispatch("radios/updateRadio", radio);
},
+ cover(radio) {
+ let res = "/static/icons/dummy/radio.svg";
+ if (radio.cover32) {
+ res = radio.cover32;
+ }
+ return res;
+ },
},
};
\ No newline at end of file
diff --git a/src/components/dialogs/SharedItems.vue b/src/components/dialogs/SharedItems.vue
index 61d0f81..f991491 100644
--- a/src/components/dialogs/SharedItems.vue
+++ b/src/components/dialogs/SharedItems.vue
@@ -1,6 +1,6 @@
-
+
-
{{ share.title }}
-
@@ -107,4 +111,8 @@ li p {
li .cover {
width: 32px;
}
+
+#sharedContent {
+ min-width: 320px;
+}
\ No newline at end of file
diff --git a/src/components/dialogs/Users.vue b/src/components/dialogs/Users.vue
index 1021b99..dee4b63 100644
--- a/src/components/dialogs/Users.vue
+++ b/src/components/dialogs/Users.vue
@@ -87,7 +87,7 @@
+
@@ -68,6 +68,6 @@ export default {
\ No newline at end of file