From a71bbf8dc76aee918fafaa6069fa64f7dfdd2849 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Sun, 12 Feb 2023 23:03:19 +0100
Subject: [PATCH] Clean up Album and Box view

---
 public/static/app.css                  |   2 +-
 public/static/style.css                | 104 ++++++++----
 src/components/dialogs/AlbumViewer.vue | 218 +++++--------------------
 src/components/dialogs/BoxViewer.vue   |  68 ++++----
 4 files changed, 157 insertions(+), 235 deletions(-)

diff --git a/public/static/app.css b/public/static/app.css
index c6b026d..d537a04 100644
--- a/public/static/app.css
+++ b/public/static/app.css
@@ -98,7 +98,7 @@ td.fillCell>* {
   bottom: -16px;
   position: absolute;
   filter: blur(8px);
-  opacity: 0.75;
+  opacity: 0.5;
 }
 
 /*
diff --git a/public/static/style.css b/public/static/style.css
index 9be4a5b..20c7b6e 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -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);
 }
diff --git a/src/components/dialogs/AlbumViewer.vue b/src/components/dialogs/AlbumViewer.vue
index 80a0470..27dd71e 100644
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/dialogs/BoxViewer.vue b/src/components/dialogs/BoxViewer.vue
index 236bffa..1f71d40 100644
--- a/src/components/dialogs/BoxViewer.vue
+++ b/src/components/dialogs/BoxViewer.vue
@@ -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>
\ No newline at end of file