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 +40 -41
3 changed files with 40 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/static/app.css
View File

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

4
public/static/style.css
View File

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

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

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