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

Compare commits

base: WebPlay:3dd098584c0748c0e251aa3021a4211c5f6d41b5
Branches Tags
WebPlay:main
WebPlay:dev
WebPlay:mongodb-6
..
compare: WebPlay:367067eff8208e6ac28e3d857ce0de51fe32fa77
Branches Tags
WebPlay:main
WebPlay:dev
WebPlay:mongodb-6

No commits in common. "3dd098584c0748c0e251aa3021a4211c5f6d41b5" and "367067eff8208e6ac28e3d857ce0de51fe32fa77" have entirely different histories.
3dd098584c ... 367067eff8

4 changed files with 77 additions and 91 deletions
Show Stats Expand all files Collapse all files

3
public/static/app.css
View File

@ -625,8 +625,9 @@ td.fillCell>* {
} }
#artists .artistCover { #artists .artistCover {
width: 160px; min-width: 100%;
height: initial; height: initial;
min-height: 128px;
} }
#artists .artistName { #artists .artistName {

1
src/components/base-components/Dialog.vue
View File

@ -420,7 +420,6 @@ export default {
flex-grow: 1; flex-grow: 1;
} }
.dialog-window.fullscreen
.dialog-body.flat-dialog-header { .dialog-body.flat-dialog-header {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;

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

@ -1,89 +1,72 @@
<template> <template>
<DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true"> <DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true">
<div id="albumViewer" class="flex-row"> <div id="albumViewer" class="flex-row">
<div id="header" class="flex-column grow"> <div id="header" class="flex-column">
<div id="background" :style="coverBackground" /> <div id="background" :style="coverBackground" />
<div it="title" class="flex-column pa grow z1"> <div class="grow z1 center flex-column">
<img class="glow ma" :src="cover" /> <img class="glow ma24" :src="cover" @dblclick="dblclick" />
</div>
<span id="stats" class="center"> <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" title="Favourite" />
{{ selectedAlbum.title }} <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedAlbum.progress" title="Keep playing" />
<br /> <div id="stats" class="flex-row z1">
by <DropDown v-if="$store.getters['user/isAdministrator']">
<b @click="gotoArtist" class="pointer">{{ selectedAlbum.artist_name }}</b> <button class="flat center" :title="visibility_text">
<br /> <awesome-icon :icon="visibility_icon" />
<span v-if="album_year"> </button>
from year <b>{{ album_year }}</b> </span><br /> <template v-slot:dropdown-content>
<b>{{ album_tracks.length }}</b> Tracks with a duration of <div>
<b>{{ album_duration }}</b> <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
<awesome-icon :icon="getVisibilityIcon(item)" />{{
</span> getVisibilityText(item)
<div class=" grow"> }}
</button>
<hr />
<button v-if="!selectedAlbum.share._id" @click="shareEnable">
<awesome-icon icon="share" />Share this album
</button>
<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">
<awesome-icon icon="share" />Remove share
</button>
</div>
</template>
</DropDown>
<div class="grow flex-column">
<p class="ma4 center">
<span class="grow center">
by
<b @click="gotoArtist" class="pointer">{{
selectedAlbum.artist_name
}}</b>
<br />
<span v-if="album_year">
from year <b>{{ album_year }}</b> </span><br />
<b>{{ album_tracks.length }}</b> Tracks with a duration of
<b>{{ album_duration }}</b>
</span>
</p>
</div> </div>
<div class="flex-row grow ma-top"> <DropDown v-if="$store.getters['user/isAdministrator']">
<button class="flat center">
<button class="flat ma-right" title="Favourite" @click="toggleFavourite"> <awesome-icon icon="ellipsis-v" />
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
</button> </button>
<button class="flat ma-right" @click="playProgress" v-if="selectedAlbum.progress"> <template v-slot:dropdown-content>
<awesome-icon icon="play" size="2x" class="primary-text" title="Keep playing" /> <div>
</button> <button @click="uploadNewCover">
<button class="flat ma-right" @click="playAlbum" v-else> <awesome-icon icon="image" />Set new Cover...
<awesome-icon icon="play" size="2x" class="white-text" title="Play" /> </button>
</button> <button @click="resetCover">
<button @click="gotoPrevAlbum" class="flat ma-left ma-right" :title="prevAlbum.name" :disabled="!prevAlbum._id"> <awesome-icon icon="eraser" />Reset Cover
<awesome-icon icon="angle-left" class="ma4 white-text" /> </button>
</button> <hr />
<button @click="gotoNextAlbum" class="flat" :title="nextAlbum.name" :disabled="!nextAlbum._id"> <button @click="mergeAlbum">
<awesome-icon icon="angle-right" class="ma4 white-text" /> <awesome-icon icon="compress-alt" />Merge Albums...
</button> </button>
<div class="grow"></div> </div>
<DropDown v-if="$store.getters['user/isAdministrator']"> </template>
<button class="flat center" :title="visibility_text"> </DropDown>
<awesome-icon :icon="visibility_icon" class="white-text" />
</button>
<template v-slot:dropdown-content>
<div>
<button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
<awesome-icon :icon="getVisibilityIcon(item)" />{{
getVisibilityText(item)
}}
</button>
<hr />
<button v-if="!selectedAlbum.share._id" @click="shareEnable">
<awesome-icon icon="share" />Share this album
</button>
<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">
<awesome-icon icon="share" />Remove share
</button>
</div>
</template>
</DropDown>
<DropDown v-if="$store.getters['user/isAdministrator']">
<button class="flat center">
<awesome-icon icon="ellipsis-v" class="white-text" />
</button>
<template v-slot:dropdown-content>
<div>
<button @click="uploadNewCover">
<awesome-icon icon="image" />Set new Cover...
</button>
<button @click="resetCover">
<awesome-icon icon="eraser" />Reset Cover
</button>
<hr />
<button @click="mergeAlbum">
<awesome-icon icon="compress-alt" />Merge Albums...
</button>
</div>
</template>
</DropDown>
</div>
</div> </div>
</div> </div>
<ul id="trackList" class="tracks"> <ul id="trackList" class="tracks">
@ -117,7 +100,7 @@ export default {
window.location.origin + "/#/share?id=" + this.selectedAlbum.share._id; window.location.origin + "/#/share?id=" + this.selectedAlbum.share._id;
navigator.clipboard.writeText(url); navigator.clipboard.writeText(url);
}, },
playAlbum() { dblclick() {
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.selectedAlbum); this.$store.dispatch("tracks/playContainer", this.selectedAlbum);
@ -349,13 +332,11 @@ export default {
<style scoped> <style scoped>
#albumViewer { #albumViewer {
height: 400px; height: 366px;
width: 640px; width: 640px;
} }
#header { #header {
width: 304px;
height: 400px;
position: relative; position: relative;
background-color: black; background-color: black;
} }
@ -367,8 +348,13 @@ export default {
#stats { #stats {
z-index: 2; z-index: 2;
align-items: center;
color: var(--white); color: var(--white);
text-shadow: 0 1px 2px black; text-shadow: 0 1px 2px black;
line-height: 1.4;
background-color: #ffffff40;
border-top: 1px solid #ffffff20;
border-bottom: 1px solid #00000020;
} }
.dropdown-activator button { .dropdown-activator button {

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

@ -17,11 +17,11 @@
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" /> <awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else /> <awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
</button> </button>
<button class="flat ma-right" @click="playProgress" title="Keep playing" v-if="selectedArtist.progress"> <button class="flat ma-right" v-if="selectedArtist.progress">
<awesome-icon icon="play" size="2x" class="primary-text" /> <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
</button> </button>
<button class="flat ma-right" @click="playArtist" title="Play" v-else> <button class="flat ma-right" v-else>
<awesome-icon icon="play" size="2x" class="white-text" /> <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Play" />
</button> </button>
<button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id"> <button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
<awesome-icon icon="angle-left" class="ma4 white-text" /> <awesome-icon icon="angle-left" class="ma4 white-text" />