Create the audio track component

.gitignore

@@ -20,5 +20,6 @@ selenium-debug.log
 vercel.json
 .eslintcache
 .nuxt
-
-.vercel
+.nuxt-storybook
+storybook-static
+.vercel

nuxt.config.js

@@ -183,4 +183,25 @@ export default {
     // https://github.com/nuxt-community/tailwindcss-module/issues/114#issuecomment-698885369
     configPath: '~~/tailwind.config.js',
   },
+  storybook: {
+    port: 6006, // standard port for Storybook
+    stories: ['~/**/*.stories.@(mdx|js)'],
+    addons: [
+      {
+        name: '@storybook/addon-essentials',
+        options: {
+          backgrounds: false,
+          viewport: false,
+          toolbars: false,
+        },
+      },
+    ],
+    parameters: {
+      options: {
+        storySort: {
+          order: ['Introduction', ['Openverse UI']],
+        },
+      },
+    },
+  },
 }

package.json

@@ -16,6 +16,7 @@
     "build": "nuxt build",
     "generate": "nuxt generate",
     "start": "nuxt start",
+    "storybook": "nuxt storybook",
     "test": "jest",
     "test:unit": "jest",
     "test:e2e": "cypress open",
@@ -59,14 +60,17 @@
     "vue-i18n": "^8.24.3"
   },
   "devDependencies": {
+    "@babel/runtime-corejs3": "^7.15.3",
     "@intlify/eslint-plugin-vue-i18n": "^0.11.1",
     "@nuxt/types": "^2.15.4",
     "@nuxtjs/eslint-module": "^3.0.2",
+    "@nuxtjs/storybook": "^4.1.1",
     "@nuxtjs/style-resources": "^1.0.0",
     "@nuxtjs/tailwindcss": "^4.2.1",
     "@types/jest": "^26.0.22",
     "@vue/test-utils": "^1.1.3",
     "autoprefixer": "^10.3.1",
+    "core-js": "^3.16.1",
     "cypress": "^6.0.0",
     "eslint": "^7.24.0",
     "eslint-config-prettier": "^8.1.0",

src/components/AudioTrack/AudioTrack.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="audio-track">
+    <div class="waveform-section">
+      <Waveform
+        class="h-30 w-full"
+        :is-ready="isReady"
+        :current-time="currentTime"
+        :duration="duration"
+        :peaks="audio.peaks"
+        @seeked="setPosition"
+      />
+    </div>
+    <div class="info-section flex flex-row gap-6">
+      <PlayPause
+        class="self-start flex-shrink-0"
+        :is-playing="isPlaying"
+        :disabled="!isReady"
+        @toggle="setPlayerState"
+      />
+      <div class="info self-end">
+        <i18n path="audio-track.title" tag="p">
+          <template #title>
+            <strong>{{ audio.title }}</strong>
+          </template>
+          <template #creator>
+            <a
+              class="text-pink hover:text-pink hover:underline"
+              :href="audio.creatorUrl"
+              >{{ audio.creator }}</a
+            >
+          </template>
+        </i18n>
+        <p class="-mt-2">
+          {{ durationFmt }}
+        </p>
+      </div>
+    </div>
+
+    <!-- eslint-disable vuejs-accessibility/media-has-caption -->
+    <audio
+      v-show="false"
+      ref="audio"
+      controls
+      :src="audio.url"
+      crossorigin="anonymous"
+      @loadedmetadata="
+        setIsReady()
+        updateTime()
+      "
+      @play="setIsPlaying(true)"
+      @pause="setIsPlaying(false)"
+    />
+    <!-- eslint-enable vuejs-accessibility/media-has-caption -->
+  </div>
+</template>
+
+<script>
+import Waveform from '~/components/AudioTrack/Waveform.vue'
+import PlayPause from '~/components/AudioTrack/PlayPause.vue'
+
+/**
+ * Displays the waveform and basic information about the track, along with
+ * controls to play, pause or seek to a point on the track.
+ */
+export default {
+  name: 'AudioTrack',
+  components: { PlayPause, Waveform },
+  props: {
+    /**
+     * the information about the track, typically from a track's detail endpoint
+     */
+    audio: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    player: null, // HTMLAudioElement
+    currentTime: 0,
+    duration: 0,
+
+    isReady: false,
+    isPlaying: false,
+  }),
+  computed: {
+    /**
+     * Get the duration of the song in hh:mm:ss format, dropping the hour part
+     * if it is zero.
+     * @returns {string} the duration in a human-friendly format
+     */
+    durationFmt() {
+      const seconds = (this.audio.duration ?? 0) / 1e3 // ms -> s
+      const date = new Date(0)
+      date.setSeconds(seconds)
+      return date.toISOString().substr(11, 8).replace(/^00:/, '')
+    },
+  },
+  mounted() {
+    this.player = this.$refs.audio
+  },
+  methods: {
+    updateTime() {
+      this.currentTime = this.player.currentTime
+      this.duration = this.player.duration
+    },
+    syncTime() {
+      if (this.player) {
+        this.updateTime()
+      }
+      if (this.isPlaying) {
+        // still playing, keep looping
+        window.requestAnimationFrame(this.syncTime)
+      }
+    },
+
+    // Subcomponent events
+    setPosition(percentage) {
+      if (this.player.duration) {
+        this.player.currentTime = this.player.duration * percentage
+        this.updateTime()
+      }
+    },
+    async setPlayerState(isPlaying) {
+      if (isPlaying) {
+        await this.player.play()
+        window.requestAnimationFrame(this.syncTime)
+      } else {
+        await this.player.pause()
+      }
+    },
+
+    // HTMLAudioElement events
+    setIsReady() {
+      this.isReady = true
+    },
+    setIsPlaying(isPlaying) {
+      this.isPlaying = isPlaying
+    },
+  },
+}
+</script>

src/components/AudioTrack/PlayPause.vue

@@ -0,0 +1,47 @@
+<template>
+  <button
+    class="bg-dark-charcoal h-20 w-20 flex items-center justify-center disabled:opacity-70"
+    @click="toggle"
+  >
+    <svg
+      class="text-white h-8 w-8"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+    >
+      <use v-if="isPlaying" :href="`${icons.pause}#icon`" />
+      <use v-else :href="`${icons.play}#icon`" />
+    </svg>
+  </button>
+</template>
+
+<script>
+import playIcon from '~/assets/icons/play.svg'
+import pauseIcon from '~/assets/icons/pause.svg'
+
+/**
+ * Displays the control for switching between the playing and paused states of
+ * a media file.
+ */
+export default {
+  name: 'PlayPause',
+  props: {
+    /**
+     * whether the media associated with the button is currently playing
+     */
+    isPlaying: {
+      type: Boolean,
+    },
+  },
+  data: () => ({
+    icons: {
+      play: playIcon,
+      pause: pauseIcon,
+    },
+  }),
+  methods: {
+    toggle() {
+      this.$emit('toggle', !this.isPlaying)
+    },
+  },
+}
+</script>