From 14182e78cda99ac90a960bdec80986cffe9862fd Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sat, 2 Jul 2022 11:02:29 +0300
Subject: [PATCH] add a bottom padding when the bottom area is expanded

- attach a ''resetBottomPadding" event to the album header component
- add function documentation to the header and albumview components.
---
 src/components/AlbumView/Header.vue | 73 ++++++++++++++++++++++++-----
 src/components/shared/SongItem.vue  |  1 -
 src/views/AlbumView.vue             | 31 +++++++++---
 3 files changed, 87 insertions(+), 18 deletions(-)

diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 30bc63c5..26a979d9 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -61,18 +61,37 @@ const props = defineProps<{
   album: AlbumInfo;
 }>();
 
+const emit = defineEmits<{
+  (event: "resetBottomPadding"): void;
+}>();
+
 const albumheaderthing = ref<HTMLElement>(null);
 const imguri = paths.images.thumb;
 const nav = useNavStore();
 
-const colors = reactive({
-  color1: props.album.colors[0],
-  color2: props.album.colors[3],
-});
+/**
+ * Calls the `toggleShowPlay` method which toggles the play button in the nav.
+ * Emits the `resetBottomPadding` event to reset the album page content bottom padding.
+ *
+ * @param {boolean} state the new visibility state of the album page header.
+ */
+function handleVisibilityState(state: boolean) {
+  if (state) {
+    emit("resetBottomPadding");
+  }
 
-useVisibility(albumheaderthing, nav.toggleShowPlay);
+  nav.toggleShowPlay(state);
+}
 
-function isLight(rgb: string = props.album.colors[0]) {
+useVisibility(albumheaderthing, handleVisibilityState);
+
+/**
+ * Returns `true` if the rgb color passed is light.
+ *
+ * @param {string} rgb The color to check whether it's light or dark.
+ * @returns {boolean} true if color is light, false if color is dark.
+ */
+function isLight(rgb: string = props.album.colors[0]): boolean {
   if (rgb == null || undefined) return false;
 
   const [r, g, b] = rgb.match(/\d+/g)!.map(Number);
@@ -81,7 +100,18 @@ function isLight(rgb: string = props.album.colors[0]) {
   return brightness > 170;
 }
 
-function getButtonColor(colors: string[] = props.album.colors) {
+interface BtnColor {
+  color: string;
+  isDark: boolean;
+}
+
+/**
+ * Returns the first contrasting color in the album colors.
+ *
+ * @param {string[]} colors The album colors to choose from.
+ * @returns {BtnColor} A color to use as the play button background
+ */
+function getButtonColor(colors: string[] = props.album.colors): BtnColor {
   const base_color = colors[0];
   if (colors.length === 0) return { color: "#fff", isDark: true };
 
@@ -100,6 +130,12 @@ function getButtonColor(colors: string[] = props.album.colors) {
   };
 }
 
+/**
+ * Returns the luminance of a color.
+ * @param r The red value of the color.
+ * @param g The green value of the color.
+ * @param b The blue value of the color.
+ */
 function luminance(r: any, g: any, b: any) {
   let a = [r, g, b].map(function (v) {
     v /= 255;
@@ -108,18 +144,33 @@ function luminance(r: any, g: any, b: any) {
   return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
 }
 
-function contrast(rgb1: number[], rgb2: number[]) {
-  let lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
-  let lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
+/**
+ * Returns a contrast ratio of `color1`:`color2`
+ * @param {string} color1 The first color
+ * @param {string} color2 The second color
+ */
+function contrast(color1: number[], color2: number[]): number {
+  let lum1 = luminance(color1[0], color1[1], color1[2]);
+  let lum2 = luminance(color2[0], color2[1], color2[2]);
   let brightest = Math.max(lum1, lum2);
   let darkest = Math.min(lum1, lum2);
   return (brightest + 0.05) / (darkest + 0.05);
 }
 
-function rgbToArray(rgb: string) {
+/**
+ * Converts a rgb color string to an array of the form: `[r, g, b]`
+ * @param rgb The color to convert
+ * @returns {number[]} The array representation of the color
+ */
+function rgbToArray(rgb: string): number[] {
   return rgb.match(/\d+/g)!.map(Number);
 }
 
+/**
+ * Returns true if the `color2` contrast with `color1`.
+ * @param color1 The first color
+ * @param color2 The second color
+ */
 function theyContrast(color1: string, color2: string) {
   return contrast(rgbToArray(color1), rgbToArray(color2)) > 3;
 }
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index d904db8c..8d2d63a7 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -127,7 +127,6 @@ function emitUpdate(track: Track) {
   text-align: left;
   gap: $small;
   user-select: none;
-  -moz-user-select: none;
 
   @include tablet-landscape {
     grid-template-columns: 1.5rem 1.5fr 1fr 1fr 2.5rem;
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index 157bcc4e..d21ffdd0 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="al-view rounded">
-    <div class="al-content">
+    <div class="al-content" id="albumcontent">
       <div>
-        <Header :album="album.info" />
+        <Header :album="album.info" @resetBottomPadding="resetBottomPadding" />
       </div>
       <div class="songs rounded">
         <SongList :tracks="album.tracks" :on_album_page="true" />
@@ -42,23 +42,37 @@ import SongList from "../components/FolderView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 import useAStore from "../stores/pages/album";
 import { onBeforeRouteUpdate } from "vue-router";
-import { reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
 
 const album = useAStore();
 const albumbottomcards = ref<HTMLElement>(null);
+const bottomContainerState = ref(true);
+let classlist: DOMTokenList = null;
+
+onMounted(() => {
+  classlist = document.getElementById("albumcontent").classList;
+});
 
 onBeforeRouteUpdate(async (to) => {
   await album.fetchTracksAndArtists(to.params.hash.toString());
   album.fetchBio(to.params.hash.toString());
 });
 
+/**
+ * Toggles the state of the bottom container. Adds the `addbottompadding` class that adds a bottom padding to the album content div.
+ */
 function toggleBottom() {
-  // const elem = albumbottomcards.value;
-  // elem.style.height = `${40}rem`;
   bottomContainerState.value = !bottomContainerState.value;
+  classlist.add("addbottompadding");
 }
 
-const bottomContainerState = ref(true);
+/**
+ * Called when the album page header gets into the viewport.
+ * Removes the bottom padding which was added when you expand the bottom container.
+ */
+function resetBottomPadding() {
+  classlist.remove("addbottompadding");
+}
 </script>
 
 <style lang="scss">
@@ -72,6 +86,11 @@ const bottomContainerState = ref(true);
     height: 100%;
     overflow: auto;
     padding-bottom: 17rem;
+    transition: all 0.5s;
+  }
+
+  .addbottompadding {
+    padding-bottom: 37rem;
   }
 
   .songs {