WebPlay/client
1
1
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

added first functions
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Artem Anufrij
2023-09-19 01:56:09 +02:00
parent 8248073a4d
commit 239b538c4b
4 changed files with 100 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/dialogs/AlbumViewer.vue
View File

@@ -1,25 +1,12 @@
<template>
<DialogBase
ref="dialogWindow"
:title="album_title"
@canceled="closed"
:showFooter="false"
:disableXscroll="true"
:disableYscroll="true"
>
<DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true">
<div id="albumViewer" class="flex-row">
<div id="header" class="flex-column">
<div id="background" :style="coverBackground" />
<div class="grow z1 center flex-column">
<img class="glow ma24" :src="cover" @dblclick="dblclick" />
</div>
<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" />
<div id="stats" class="flex-row z1">
<DropDown v-if="$store.getters['user/isAdministrator']">
<button class="flat center" :title="visibility_text">
@@ -27,11 +14,7 @@
</button>
<template v-slot:dropdown-content>
<div>
<button
v-for="(item, i) in $store.state.system.lists.visibility"
:key="i"
@click="setVisibility(item)"
>
<button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
<awesome-icon :icon="getVisibilityIcon(item)" />{{
getVisibilityText(item)
}}
@@ -40,10 +23,7 @@
<button v-if="!selectedAlbum.share._id" @click="shareEnable">
<awesome-icon icon="share" />Share this album
</button>
<button
v-if="selectedAlbum.share._id"
@click="addShareUrlToClipboard"
>
<button v-if="selectedAlbum.share._id" @click="addShareUrlToClipboard">
<awesome-icon icon="clipboard" />Copy url into clipboard
</button>
<button v-if="selectedAlbum.share._id" @click="shareDisable">
@@ -61,8 +41,7 @@
}}</b>
<br />
<span v-if="album_year">
from year <b>{{ album_year }}</b> </span
><br />
from year <b>{{ album_year }}</b> </span><br />
<b>{{ album_tracks.length }}</b> Tracks with a duration of
<b>{{ album_duration }}</b>
</span>
@@ -89,6 +68,7 @@
</DropDown>
</div>
</div>
<p v-if="selectedAlbum.progress" @click="playProgress">Progress</p>
<ul id="trackList" class="tracks">
<li v-for="track in selectedAlbum.tracks" :key="track._id">
@@ -156,6 +136,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 +189,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 +216,9 @@ export default {
shareDisable() {
this.$store.dispatch("albums/shareDisable", this.selectedAlbum);
},
loadUserProgress() {
this.$store.dispatch("user/getProgress", this.selectedAlbum);
}
},
computed: {
...mapGetters({
@@ -287,19 +278,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,6 +309,7 @@ export default {
this.$refs.dialogWindow.open();
window.addEventListener("keydown", this.keydownListener);
}
this.loadUserProgress();
this.gotoTrack();
} else {
if (this.$refs.dialogWindow.visible) {
@@ -339,14 +331,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 +352,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 +367,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;