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

main #32

Merged
artem merged 4 commits from main into dev 2023-10-05 09:29:53 +02:00
Conversation 0 Commits 4 Files Changed 3 +39 -40
3 changed files with 39 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 426a024564 - Show all commits

13
public/static/app.css
View File

@ -85,23 +85,10 @@ td.fillCell>* {
text-align: center; text-align: center;
} }
.favourite {
z-index: 1;
position: absolute;
cursor: pointer;
}
.favourite.active { .favourite.active {
color: var(--yellow); color: var(--yellow);
} }
.keepPlaying {
z-index: 1;
position: absolute;
cursor: pointer;
right: 0;
}
/* /*
DIALOGS DIALOGS

4
public/static/style.css
View File

@ -1741,6 +1741,10 @@ td.strech {
box-shadow: 0 1px 4px var(--glow); box-shadow: 0 1px 4px var(--glow);
} }
.glow-text {
text-shadow: 0 1px 4px var(--glow);
}
.nowrap { .nowrap {
white-space: nowrap; white-space: nowrap;
} }

62
src/components/dialogs/ArtistViewer.vue
View File

@ -3,33 +3,35 @@
<div id="artistViewer"> <div id="artistViewer">
<div id="header" class="flex-column"> <div id="header" class="flex-column">
<div id="background" :style="coverBackground" /> <div id="background" :style="coverBackground" />
<awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" /> <div id="title" class="flex-column ma">
<awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" /> <h1>
<h1 @dblclick="dblclick"> {{ selectedArtist.name }}
{{ selectedArtist.name }} </h1>
</h1> <span id="stats" class="ma-bottom">
<span id="stats" class="ma-bottom"> <b>{{ artist_tracks.length }}</b> Tracks in
<b>{{ artist_tracks.length }}</b> Tracks in <b>{{ artist_albums.length }}</b> Albums with a duration of
<b>{{ artist_albums.length }}</b> Albums with a duration of <b>{{ artist_duration }}</b>
<b>{{ artist_duration }}</b> </span>
</span> <div class="flex-row ma-top ma-bottom">
<div id="albumList" class="flex-row showOnMobilePortrait"> <button class="flat ma-right">
<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)" /> <awesome-icon icon="star" size="2x" class="favourite" :class="{ active: isFavourite }" @click="toggleFavourite" />
</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">
<awesome-icon icon="angle-left" class="ma4" />
</button> </button>
<button @click="gotoNextArtist" class="primary ma4" :title="nextArtist.name" :disabled="!nextArtist._id"> <button class="flat ma-right" v-if="selectedArtist.progress">
<awesome-icon icon="angle-right" class="ma4" /> <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
</button> </button>
</div> <button class="flat ma-right" v-else>
<div class="flex-row grow right center"> <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Keep playing" />
<DropDown v-if="$store.getters['user/isAdministrator']" class="hideOnMobile"> </button>
<button class="flat pa8-left pa8-right"> <button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
<awesome-icon icon="ellipsis-v" /> <awesome-icon icon="angle-left" class="ma4 white-text" />
</button>
<button @click="gotoNextArtist" class="flat" :title="nextArtist.name" :disabled="!nextArtist._id">
<awesome-icon icon="angle-right" class="ma4 white-text" />
</button>
<DropDown v-if="$store.getters['user/isAdministrator']" class="ma-left hideOnMobile">
<button class="flat pa-left pa-right">
<awesome-icon icon="ellipsis-v" class="white-text"/>
</button> </button>
<template v-slot:dropdown-content> <template v-slot:dropdown-content>
<div> <div>
@ -48,6 +50,9 @@
</DropDown> </DropDown>
</div> </div>
</div> </div>
<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)" />
</div>
</div> </div>
<div class="flex-row overflow-y"> <div class="flex-row overflow-y">
<div id="albumList" class="flex-column hideOnMobilePortrait"> <div id="albumList" class="flex-column hideOnMobilePortrait">
@ -77,7 +82,7 @@ export default {
} }
}, },
methods: { methods: {
dblclick() { playArtist() {
this.$store.commit("tracks/resetSelectedTrack"); this.$store.commit("tracks/resetSelectedTrack");
this.$store.commit("radios/resetSelectedRadio"); this.$store.commit("radios/resetSelectedRadio");
this.$store.dispatch("tracks/playContainer", this.selectedArtist); this.$store.dispatch("tracks/playContainer", this.selectedArtist);
@ -262,7 +267,6 @@ export default {
h1, h1,
#stats { #stats {
z-index: 1; z-index: 1;
text-align: center;
width: 100%; width: 100%;
color: var(--white); color: var(--white);
text-shadow: 0 1px 2px black; text-shadow: 0 1px 2px black;
@ -280,6 +284,10 @@ h1,
max-width: 100%; max-width: 100%;
} }
#header #title {
z-index: 100;
}
#albumList { #albumList {
z-index: 1; z-index: 1;
overflow-y: auto; overflow-y: auto;