Clean up Album and Box view
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Artem Anufrij
parent
268e913663
commit
a71bbf8dc7
@ -98,7 +98,7 @@ td.fillCell>* {
|
||||
bottom: -16px;
|
||||
position: absolute;
|
||||
filter: blur(8px);
|
||||
opacity: 0.75;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
--dark50: #31363b80;
|
||||
--dark25: #31363b40;
|
||||
--shadow: #23262940;
|
||||
--glow: #eff0f140;
|
||||
--glow: #eff0f180;
|
||||
|
||||
--light-gray: #d9dfe3;
|
||||
--dim-gray: #bdc3c7;
|
||||
@ -1231,41 +1231,15 @@ td.strech {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.ma-horizontal {
|
||||
margin-right: 12px;
|
||||
margin-left: 12px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.ma-vertical {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.ma {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.ma8-top {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.ma8-bottom {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ma8-right {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.ma8-left {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.ma8-vertical {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ma8-horizontal {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.ma8 {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.ma4-top {
|
||||
margin-top: 4px;
|
||||
}
|
||||
@ -1279,17 +1253,59 @@ td.strech {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.ma4-vertical {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.ma4-horizontal {
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.ma4 {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.ma8-top {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.ma8-bottom {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ma8-right {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.ma8-left {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.ma8-vertical {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.ma8-horizontal {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.ma8 {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.ma24-top {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.ma24-bottom {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.ma24-right {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.ma24-left {
|
||||
margin-left: 24px;
|
||||
}
|
||||
.ma24-vertical {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.ma24-horizontal {
|
||||
margin: 0 24px;
|
||||
}
|
||||
.ma24 {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
OPACITY
|
||||
*/
|
||||
@ -1397,6 +1413,28 @@ td.strech {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.pa24 {
|
||||
padding: 24px;
|
||||
}
|
||||
.pa24-vertical {
|
||||
padding: 24px 0;
|
||||
}
|
||||
.pa24-horizontal {
|
||||
padding: 0 24px;
|
||||
}
|
||||
.pa24-left {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.pa24-rigth {
|
||||
padding-right: 24px;
|
||||
}
|
||||
.pa24-top {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.pa24-bottom {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid var(--dark-border);
|
||||
}
|
||||
|
||||
@ -3,33 +3,15 @@
|
||||
ref="dialogWindow"
|
||||
:title="album_title"
|
||||
@canceled="closed"
|
||||
@opened="opened"
|
||||
:showFooter="false"
|
||||
:disableXscroll="true"
|
||||
:disableYscroll="true"
|
||||
>
|
||||
<div id="albumViewer">
|
||||
<div id="albumViewer" class="flex-row">
|
||||
<div id="header" class="flex-column">
|
||||
<div id="background" :style="coverBackground" />
|
||||
|
||||
<div id="albumList" class="flex-row z1" @scroll="loadingAlbums()">
|
||||
<div class="dummyAlbum" />
|
||||
<div id="loadPrevAlbums" />
|
||||
|
||||
<AlbumItem
|
||||
v-for="album in albums"
|
||||
:key="album._id"
|
||||
:item="album"
|
||||
class="ma"
|
||||
:class="{ focus: album._id == selectedAlbum._id }"
|
||||
:id="album._id"
|
||||
@touchend="albumAutoSelect"
|
||||
@click="selectAlbum(album)"
|
||||
@dblclick="dblclick"
|
||||
/>
|
||||
|
||||
<div id="loadNextAlbums" />
|
||||
<div class="dummyAlbum" />
|
||||
<div class="grow z1 center flex-column">
|
||||
<img class="glow ma24" :src="cover" @dblclick="dblclick" />
|
||||
</div>
|
||||
<awesome-icon
|
||||
icon="star"
|
||||
@ -38,9 +20,9 @@
|
||||
:class="{ active: isFavourite }"
|
||||
@click="toggleFavourite"
|
||||
/>
|
||||
<div id="stats" class="flex-row grow z1 pa4-bottom">
|
||||
<div id="stats" class="flex-row z1">
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat pa8-left pa8-right" :title="visibility_text">
|
||||
<button class="flat center" :title="visibility_text">
|
||||
<awesome-icon :icon="visibility_icon" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
@ -57,22 +39,25 @@
|
||||
</div>
|
||||
</template>
|
||||
</DropDown>
|
||||
|
||||
<span class="grow center" @click="scrollIntoCenter(selectedAlbum)">
|
||||
<b>{{ album_title }}</b> 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>
|
||||
<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>
|
||||
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat pa8-left pa8-right">
|
||||
<button class="flat center">
|
||||
<awesome-icon icon="ellipsis-v" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
@ -125,41 +110,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
albumAutoSelect() {
|
||||
this.albums.forEach((album) => {
|
||||
let center_client = document.documentElement.clientWidth / 2;
|
||||
let e = document.getElementById(album._id);
|
||||
let r = e.getBoundingClientRect();
|
||||
let center_element = center_client - r.left - r.width / 2;
|
||||
if (center_element < this.move / 2 && center_element > -this.move / 2) {
|
||||
if (album._id == this.selectedAlbum._id) {
|
||||
this.scrollIntoCenter(album, "smooth");
|
||||
} else {
|
||||
this.selectAlbum(album);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
readElements() {
|
||||
if (document.getElementById("header") == undefined) {
|
||||
return false;
|
||||
}
|
||||
this.elements.prev = document
|
||||
.getElementById("loadPrevAlbums")
|
||||
.getBoundingClientRect();
|
||||
|
||||
this.elements.next = document
|
||||
.getElementById("loadNextAlbums")
|
||||
.getBoundingClientRect();
|
||||
|
||||
this.elements.header = document
|
||||
.getElementById("header")
|
||||
.getBoundingClientRect();
|
||||
|
||||
this.elements.albums = document.getElementById("albumList");
|
||||
|
||||
return true;
|
||||
},
|
||||
dblclick() {
|
||||
this.$store.commit("tracks/resetSelectedTrack");
|
||||
this.$store.commit("radios/resetSelectedRadio");
|
||||
@ -180,16 +130,10 @@ export default {
|
||||
}
|
||||
},
|
||||
gotoNextAlbum() {
|
||||
let i = this.albums.indexOf(this.selectedAlbum);
|
||||
if (i < this.albums.length - 1) {
|
||||
this.selectAlbum(this.albums[++i]);
|
||||
}
|
||||
this.$store.dispatch("albums/gotoNextAlbum");
|
||||
},
|
||||
gotoPrevAlbum() {
|
||||
let i = this.albums.indexOf(this.selectedAlbum);
|
||||
if (i > 0) {
|
||||
this.selectAlbum(this.albums[--i]);
|
||||
}
|
||||
this.$store.dispatch("albums/gotoPrevAlbum");
|
||||
},
|
||||
gotoTrack() {
|
||||
if (this.$route.query.play) {
|
||||
@ -216,66 +160,16 @@ export default {
|
||||
keydownListener(e) {
|
||||
if (e.key == "ArrowLeft") {
|
||||
e.preventDefault();
|
||||
this.elements.albums.scrollLeft -= 0;
|
||||
this.gotoPrevAlbum();
|
||||
}
|
||||
if (e.key == "ArrowRight") {
|
||||
e.preventDefault();
|
||||
this.elements.albums.scrollLeft += 0;
|
||||
this.gotoNextAlbum();
|
||||
}
|
||||
},
|
||||
loadingAlbums() {
|
||||
clearTimeout(this.scrollTimer);
|
||||
if (!this.readElements()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let posPrev = this.elements.prev.left - this.elements.header.left;
|
||||
let posNext = this.elements.header.right - this.elements.next.right;
|
||||
|
||||
if (posPrev >= -this.move && !this.loadingPrev) {
|
||||
this.loadingPrev = true;
|
||||
this.$store
|
||||
.dispatch("albums/getPrevTo", this.albums[0])
|
||||
.then((album) => {
|
||||
if (album) {
|
||||
this.albums.unshift(album);
|
||||
this.elements.albums.scrollLeft += this.move;
|
||||
}
|
||||
this.loadingPrev = false;
|
||||
});
|
||||
} else if (posPrev < -this.move * 3 && !this.loadingPrev) {
|
||||
this.loadingPrev = true;
|
||||
this.elements.albums.scrollLeft -= this.move;
|
||||
this.albums.shift();
|
||||
this.loadingPrev = false;
|
||||
}
|
||||
|
||||
if (posNext >= -this.move && !this.loadingNext) {
|
||||
this.loadingNext = true;
|
||||
this.$store
|
||||
.dispatch("albums/getNextTo", this.albums[this.albums.length - 1])
|
||||
.then((album) => {
|
||||
if (album) {
|
||||
this.albums.push(album);
|
||||
}
|
||||
this.loadingNext = false;
|
||||
});
|
||||
} else if (posNext < -this.move * 3 && !this.loadingNext) {
|
||||
this.loadingNext = true;
|
||||
this.albums.pop();
|
||||
this.loadingNext = false;
|
||||
}
|
||||
},
|
||||
mergeAlbum() {
|
||||
this.$refs.mergeDialog.open(this.selectedAlbum);
|
||||
},
|
||||
opened() {
|
||||
this.$nextTick(() => {
|
||||
this.scrollIntoCenter(this.selectedAlbum);
|
||||
});
|
||||
},
|
||||
setVisibility(visibility) {
|
||||
this.selectedAlbum.visibility = visibility;
|
||||
this.$store.dispatch("albums/updateAlbum", this.selectedAlbum);
|
||||
@ -310,15 +204,8 @@ export default {
|
||||
? "Hide this Album"
|
||||
: "Only for me";
|
||||
},
|
||||
scrollIntoCenter(album, behavior = "auto") {
|
||||
let e = document.getElementById(album._id);
|
||||
if (e) {
|
||||
e.scrollIntoView({ behavior: behavior, inline: "center" });
|
||||
}
|
||||
},
|
||||
selectAlbum(album) {
|
||||
this.$store.dispatch("albums/selectAlbum", album);
|
||||
this.scrollIntoCenter(album);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
@ -367,7 +254,6 @@ export default {
|
||||
seconds
|
||||
);
|
||||
},
|
||||
|
||||
coverBackground() {
|
||||
return "background-image: url('" + this.cover + "')";
|
||||
},
|
||||
@ -376,7 +262,6 @@ export default {
|
||||
this.selectedAlbum.covers.cover256 || "/static/icons/dummy/album.svg"
|
||||
);
|
||||
},
|
||||
|
||||
visibility_icon() {
|
||||
return this.selectedAlbum.visibility == "global"
|
||||
? "globe"
|
||||
@ -430,30 +315,16 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
#albumViewer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
#albumList {
|
||||
overflow-x: overlay;
|
||||
max-width: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
#albumList::-webkit-scrollbar {
|
||||
display: none;
|
||||
height: 366px;
|
||||
width: 640px;
|
||||
}
|
||||
#header {
|
||||
position: relative;
|
||||
min-width: 280px;
|
||||
width: 456px;
|
||||
background: black;
|
||||
background-color: black;
|
||||
}
|
||||
#header img {
|
||||
align-self: center;
|
||||
}
|
||||
#navigation {
|
||||
width: 456px;
|
||||
overflow: auto;
|
||||
width: 256px;
|
||||
}
|
||||
#stats {
|
||||
z-index: 2;
|
||||
@ -464,31 +335,32 @@ export default {
|
||||
border-top: 1px solid #ffffff20;
|
||||
border-bottom: 1px solid #00000020;
|
||||
}
|
||||
|
||||
#stats button {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
#trackList {
|
||||
height: 360px;
|
||||
width: 456px;
|
||||
background-color: var(--white);
|
||||
z-index: 1;
|
||||
}
|
||||
.album {
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
.album.focus {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.dummyAlbum {
|
||||
min-width: 160px;
|
||||
}
|
||||
@media (max-width: 480px), (max-height: 480px) {
|
||||
@media (max-width: 480px) {
|
||||
#header {
|
||||
width: 100%;
|
||||
}
|
||||
#albumViewer {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px), (max-height: 480px) {
|
||||
#albumViewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#trackList {
|
||||
height: initial;
|
||||
width: 100%;
|
||||
}
|
||||
.dummyAlbum {
|
||||
min-width: 128px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -8,9 +8,12 @@
|
||||
:disableXscroll="true"
|
||||
:disableYscroll="true"
|
||||
>
|
||||
<div id="boxViewer">
|
||||
<div id="boxViewer" 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"
|
||||
@ -18,16 +21,10 @@
|
||||
:class="{ active: isFavourite }"
|
||||
@click="toggleFavourite"
|
||||
/>
|
||||
<div id="navigation" class="flex-row grow center z1">
|
||||
<img class="glow ma" :src="cover" @dblclick="dblclick" />
|
||||
</div>
|
||||
<div id="stats" class="z1 pa4">
|
||||
<div class="flex-row">
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button
|
||||
class="flat ma4 pa8-left pa8-right"
|
||||
:title="visibility_text"
|
||||
>
|
||||
<button class="flat center" :title="visibility_text">
|
||||
<awesome-icon :icon="visibility_icon" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
@ -44,13 +41,17 @@
|
||||
</div>
|
||||
</template>
|
||||
</DropDown>
|
||||
<span class="grow center">
|
||||
<b>{{ selectedBox.title }}</b>
|
||||
<br />
|
||||
<b>{{ box_videos.length }}</b> Videos
|
||||
</span>
|
||||
<div class="grow flex-column">
|
||||
<p class="ma4 center">
|
||||
<span class="">
|
||||
<b>{{ selectedBox.title }}</b>
|
||||
<br />
|
||||
<b>{{ box_videos.length }}</b> Videos
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat ma4 pa8-left pa8-right">
|
||||
<button class="flat center">
|
||||
<awesome-icon icon="ellipsis-v" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
@ -242,19 +243,19 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
#boxViewer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: 462px;
|
||||
}
|
||||
#header {
|
||||
position: relative;
|
||||
min-width: 280px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#header img {
|
||||
align-self: center;
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
#videoList {
|
||||
height: 440px;
|
||||
background-color: var(--white);
|
||||
z-index: 1;
|
||||
overflow: overlay;
|
||||
@ -270,6 +271,14 @@ export default {
|
||||
border-bottom: 1px solid #00000020;
|
||||
}
|
||||
|
||||
#stats button {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
#stats p {
|
||||
max-width: 192px;
|
||||
align-self: center;
|
||||
}
|
||||
.video {
|
||||
width: 220px;
|
||||
}
|
||||
@ -278,24 +287,27 @@ export default {
|
||||
#boxViewer {
|
||||
flex-direction: column;
|
||||
}
|
||||
#stats p {
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px), (max-height: 480px) {
|
||||
#boxViewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#header img {
|
||||
width: 192px;
|
||||
}
|
||||
#videoList {
|
||||
max-height: initial;
|
||||
height: initial;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.video {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
#navigation img{
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
@media (max-height: 480px) {
|
||||
#navigation {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user