From 73c2c8ca15db85634fa874b5fa38bbbeb435b0e8 Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Thu, 13 Jan 2022 19:42:57 +0400
Subject: [PATCH 1/2] Show a generated artwork when the audio thumbnail is
 absent

---
 .../AudioThumbnail/AudioThumbnail.vue         | 111 +++++++++++++++++-
 1 file changed, 110 insertions(+), 1 deletion(-)

diff --git a/src/components/AudioThumbnail/AudioThumbnail.vue b/src/components/AudioThumbnail/AudioThumbnail.vue
index c21415f604..b0e04c3d26 100644
--- a/src/components/AudioThumbnail/AudioThumbnail.vue
+++ b/src/components/AudioThumbnail/AudioThumbnail.vue
@@ -3,16 +3,37 @@
   <div class="relative h-0 w-full pt-full" :title="helpText">
     <div class="thumbnail absolute inset-0 bg-yellow">
       <img
-        v-if="audio.thumbnail"
+        v-if="audio.thumbnail && ok"
         class="h-full w-full object-cover object-center overflow-clip"
         :src="audio.thumbnail"
         :alt="helpText"
+        @error="handleError"
       />
+
+      <!-- Programmatic thumbnail -->
+      <svg
+        v-else
+        class="h-full w-full"
+        :viewBox="`0 0 ${canvasSize} ${canvasSize}`"
+      >
+        <template v-for="i in dotCount">
+          <circle
+            v-for="j in dotCount"
+            :key="`${i}-${j}`"
+            class="fill-dark-charcoal"
+            :cx="offset(j)"
+            :cy="offset(i)"
+            :r="radius(i, j)"
+          />
+        </template>
+      </svg>
     </div>
   </div>
 </template>
 
 <script>
+import { ref } from '@nuxtjs/composition-api'
+
 /**
  * Displays the cover art for the audio in a square aspect ratio.
  */
@@ -28,6 +49,94 @@ export default {
       required: true,
     },
   },
+  setup() {
+    /* Switching */
+
+    const ok = ref(true)
+    const handleError = () => {
+      ok.value = false
+    }
+
+    /* Math utilities */
+
+    /**
+     * Perform linear interpolation to find a value that is fractionally between
+     * the low and high limits of the given range.
+     *
+     * @param {number} low - the lower limit of the range
+     * @param {number} high - the upper limit of the range
+     * @param {number} frac - fraction controlling position of interpolated number
+     * @returns {number} the interpolated number
+     */
+    const lerp = (low, high, frac) => low + (high - low) * frac
+
+    /**
+     * Interpolate twice to solve the Bézier equation for three points P0, P1
+     * and P2.
+     *
+     * @param {[number, number]} p0 - point #0
+     * @param {[number, number]} p1 - point #1
+     * @param {[number, number]} p2 - point #2
+     * @param {number} frac - the fraction at which to solve the Bézier equation
+     * @returns {[number,number]} a solution to the 3-point Bézier equation
+     */
+    const doubleLerp = (p0, p1, p2, frac) => [
+      lerp(lerp(p0[0], p1[0], frac), lerp(p1[0], p2[0], frac), frac),
+      lerp(lerp(p0[1], p1[1], frac), lerp(p1[1], p2[1], frac), frac),
+    ]
+
+    /**
+     * Find the distance between two points P0 and P1.
+     *
+     * @param {[number, number]} p0 - point #0
+     * @param {[number, number]} p1 - point #1
+     * @returns {number} the distance between the two points
+     */
+    const dist = (p0, p1) =>
+      Math.sqrt(Math.pow(p0[0] - p1[0], 2) + Math.pow(p0[1] - p1[1], 2))
+
+    /* Artwork */
+
+    const dotCount = 10
+    const canvasSize = 768
+    const minRadius = 2
+    const maxRadius = 27
+
+    const ctrlPts = Array.from({ length: 4 }, (_, idx) => [
+      Math.random() * canvasSize,
+      (idx / 3) * canvasSize,
+    ])
+
+    const pointCount = dotCount + 1
+    const bezierPoints = []
+    for (let i = 0; i <= pointCount; i++) {
+      const frac = i / pointCount
+      const a = doubleLerp(ctrlPts[0], ctrlPts[1], ctrlPts[2], frac)
+      const b = doubleLerp(ctrlPts[1], ctrlPts[2], ctrlPts[3], frac)
+      const x = lerp(a[0], b[0], frac)
+      bezierPoints.push(x)
+    }
+
+    const offset = (i) => {
+      return i * (canvasSize / (dotCount + 1))
+    }
+    const radius = (i, j) => {
+      const bezierPoint = bezierPoints[i]
+      const distance = dist([0, bezierPoint], [0, offset(j)])
+      const maxFeasibleDistance = canvasSize * ((dotCount - 1) / (dotCount + 1))
+      return lerp(maxRadius, minRadius, distance / maxFeasibleDistance)
+    }
+
+    return {
+      ok,
+      handleError,
+
+      canvasSize,
+      dotCount,
+      offset,
+      radius,
+    }
+  },
   computed: {
     helpText() {
       return this.$t('audio-thumbnail.alt', {

From 64d908611adbf5ba54c7dfbe734bac5afef36a2f Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Thu, 13 Jan 2022 19:55:50 +0400
Subject: [PATCH 2/2] Add the 'V-' prefix to audio thumbnail

---
 .../VAudioThumbnail.vue}                       |  2 +-
 .../meta/VAudioThumbnail.stories.mdx}          | 18 +++++++++---------
 .../VAudioTrack/layouts/VGlobalLayout.vue      |  6 +++---
 .../VAudioTrack/layouts/VRowLayout.vue         |  6 +++---
 4 files changed, 16 insertions(+), 16 deletions(-)
 rename src/components/{AudioThumbnail/AudioThumbnail.vue => VAudioThumbnail/VAudioThumbnail.vue} (99%)
 rename src/components/{AudioThumbnail/meta/AudioThumbnail.stories.mdx => VAudioThumbnail/meta/VAudioThumbnail.stories.mdx} (89%)

diff --git a/src/components/AudioThumbnail/AudioThumbnail.vue b/src/components/VAudioThumbnail/VAudioThumbnail.vue
similarity index 99%
rename from src/components/AudioThumbnail/AudioThumbnail.vue
rename to src/components/VAudioThumbnail/VAudioThumbnail.vue
index b0e04c3d26..46d1a3e487 100644
--- a/src/components/AudioThumbnail/AudioThumbnail.vue
+++ b/src/components/VAudioThumbnail/VAudioThumbnail.vue
@@ -38,7 +38,7 @@ import { ref } from '@nuxtjs/composition-api'
  * Displays the cover art for the audio in a square aspect ratio.
  */
 export default {
-  name: 'AudioThumbnail',
+  name: 'VAudioThumbnail',
   props: {
     /**
      * the details of the audio whose artwork is to be shown; The properties
diff --git a/src/components/AudioThumbnail/meta/AudioThumbnail.stories.mdx b/src/components/VAudioThumbnail/meta/VAudioThumbnail.stories.mdx
similarity index 89%
rename from src/components/AudioThumbnail/meta/AudioThumbnail.stories.mdx
rename to src/components/VAudioThumbnail/meta/VAudioThumbnail.stories.mdx
index aa0d2beff3..7716d019fb 100644
--- a/src/components/AudioThumbnail/meta/AudioThumbnail.stories.mdx
+++ b/src/components/VAudioThumbnail/meta/VAudioThumbnail.stories.mdx
@@ -6,11 +6,11 @@ import {
   Story,
 } from '@storybook/addon-docs'
 
-import AudioThumbnail from '~/components/AudioThumbnail/AudioThumbnail.vue'
+import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 
 <Meta
-  title="Components/Audio thumbnail"
-  components={AudioThumbnail}
+  title="Components/VAudioThumbnail"
+  components={VAudioThumbnail}
   argTypes={{
     toggle: {
       action: 'toggle',
@@ -21,18 +21,18 @@ import AudioThumbnail from '~/components/AudioThumbnail/AudioThumbnail.vue'
 export const Template = (args, { argTypes }) => ({
   template: `
     <div class="w-30">
-      <AudioThumbnail v-bind="$props" v-on="$props"/>
+      <VAudioThumbnail v-bind="$props" v-on="$props"/>
     </div>
   `,
-  components: { AudioThumbnail },
+  components: { VAudioThumbnail },
   props: Object.keys(argTypes),
 })
 
-# Audio thumbnail
+# VAudioThumbnail
 
-<Description of={AudioThumbnail} />
+<Description of={VAudioThumbnail} />
 
-<ArgsTable of={AudioThumbnail} />
+<ArgsTable of={VAudioThumbnail} />
 
 It does not have any intrinsic width and scales horizontally to take up the full
 width of the parent. It also does not have any rounding so the parent layout
@@ -129,7 +129,7 @@ André Karwath aka [Aka](https://commons.wikimedia.org/wiki/User:Aka)
 
 ## Fallback
 
-In the absence of album art, some generic imagery can be shown.
+In the absence of album art, a randomised artwork is generated.
 
 <Canvas>
   <Story
diff --git a/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/src/components/VAudioTrack/layouts/VGlobalLayout.vue
index 1626e5ff8d..3e4b2be403 100644
--- a/src/components/VAudioTrack/layouts/VGlobalLayout.vue
+++ b/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="global-track flex flex-row w-full">
     <div class="flex-shrink-0">
-      <AudioThumbnail :audio="audio" />
+      <VAudioThumbnail :audio="audio" />
       <slot name="play-pause" size="medium" />
     </div>
 
@@ -20,12 +20,12 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 
-import AudioThumbnail from '~/components/AudioThumbnail/AudioThumbnail.vue'
+import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 
 export default defineComponent({
   name: 'VGlobalLayout',
   components: {
-    AudioThumbnail,
+    VAudioThumbnail,
   },
   props: ['audio'],
 })
diff --git a/src/components/VAudioTrack/layouts/VRowLayout.vue b/src/components/VAudioTrack/layouts/VRowLayout.vue
index f1784b328c..d539c657a3 100644
--- a/src/components/VAudioTrack/layouts/VRowLayout.vue
+++ b/src/components/VAudioTrack/layouts/VRowLayout.vue
@@ -4,7 +4,7 @@
       class="relative flex-shrink-0 rounded-sm overflow-hidden"
       :class="isLarge ? 'w-30 me-6' : 'w-20 me-4'"
     >
-      <AudioThumbnail :audio="audio" />
+      <VAudioThumbnail :audio="audio" />
       <div v-if="isSmall" class="absolute bottom-0 end-0">
         <slot name="play-pause" size="tiny" />
       </div>
@@ -80,13 +80,13 @@
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
-import AudioThumbnail from '~/components/AudioThumbnail/AudioThumbnail.vue'
+import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 import VLicense from '~/components/License/VLicense.vue'
 
 export default defineComponent({
   name: 'VRowLayout',
   components: {
-    AudioThumbnail,
+    VAudioThumbnail,
     VLicense,
   },
   props: ['audio', 'size'],