Merge branch 'main' into store_modules

# Conflicts:
#	src/constants/mutation-types.js
#	src/middleware/middleware.js
#	src/store-modules/nav-store.js
#	src/store/active-media-store.js
#	src/store/index.js

.github/workflows/new_prs.yml

@@ -2,7 +2,7 @@ name: New PR automation
 # ℹ️ https://github.com/WordPress/openverse/blob/main/.github/GITHUB.md#new-pr-automation
 
 on:
-  pull_request:
+  pull_request_target:
     types:
     - opened
     - converted_to_draft

README.md

@@ -1,4 +1,10 @@
-# openverse-frontend
+<img src="https://github.com/WordPress/openverse/raw/main/brand/banner.svg" width="100%"/>
+
+<p align="center">
+  <a href="https://github.com/orgs/WordPress/projects/3">Project Board</a> | <a href="https://make.wordpress.org/openverse/">Community Site</a> | <a href="https://make.wordpress.org/chat/">#openverse @ Slack</a> | <a href="https://make.wordpress.org/openverse/handbook/openverse-handbook/">Handbook</a> | <a href="https://www.figma.com/files/project/31962071/Openverse?fuid=979162431688906882">Figma</a>
+</p>
+
+# Openverse Frontend
 
 ![openverse-frontend-ci](https://github.com/wordpress/openverse-frontend/workflows/openverse-frontend-ci/badge.svg)
 

nuxt.config.js

@@ -1,17 +1,22 @@
 import pkg from './package.json'
 import locales from './src/locales/scripts/valid-locales.json'
+import stringToBoolean from './src/utils/string-to-boolean'
 
 /**
  * Default environment variables are set on this key. Defaults are fallbacks to existing env vars.
  */
 export const env = {
-  apiUrl: process.env.API_URL || 'https://api.creativecommons.engineering/v1/',
-  socialSharing: process.env.SOCIAL_SHARING || true,
-  enableGoogleAnalytics: process.env.ENABLE_GOOGLE_ANALYTICS || false,
-  googleAnalyticsUA: process.env.GOOGLE_ANALYTICS_UA || 'UA-2010376-36',
+  apiUrl: process.env.API_URL ?? 'https://api.creativecommons.engineering/v1/',
+  socialSharing: stringToBoolean(process.env.SOCIAL_SHARING) ?? true,
+  enableGoogleAnalytics:
+    stringToBoolean(process.env.ENABLE_GOOGLE_ANALYTICS) ?? false,
+  googleAnalyticsUA: process.env.GOOGLE_ANALYTICS_UA ?? 'UA-2010376-36',
   filterStorageKey: 'openverse-filter-visibility',
   notificationStorageKey: 'openverse-show-notification',
-  enableInternalAnalytics: process.env.ENABLE_INTERNAL_ANALYTICS || false,
+  enableInternalAnalytics:
+    stringToBoolean(process.env.ENABLE_INTERNAL_ANALYTICS) ?? false,
+  /** Feature flag to enable non-image media */
+  allMediaFeature: stringToBoolean(process.env.ALL_MEDIA_FEATURE) ?? true,
 }
 
 /**
@@ -117,7 +122,7 @@ export default {
   modern: 'client',
   server: { port: process.env.PORT || 8443 },
   router: {
-    middleware: 'embed',
+    middleware: 'middleware',
   },
   components: {
     dirs: [
@@ -132,7 +137,8 @@ export default {
   plugins: [
     { src: '~/plugins/ab-test-init.js', mode: 'client' },
     { src: '~/plugins/ga.js', mode: 'client' },
-    { src: '~/plugins/message.js' },
+    { src: '~/plugins/url-change.js' },
+    { src: '~/plugins/migration-notice.js' },
   ],
   css: [
     '~/assets/fonts.css',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "openverse-frontend",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Openverse",
   "repository": {
     "type": "git",

src/components/AudioTrack/AudioController.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="audio-controller">
+    <Waveform
+      :class="waveformClasses"
+      :message="message ? $t(`audio-track.messages.${message}`) : null"
+      :current-time="currentTime"
+      :duration="duration"
+      :peaks="audio.peaks"
+      @seeked="handleSeeked"
+    />
+
+    <!-- eslint-disable vuejs-accessibility/media-has-caption -->
+    <audio
+      v-show="false"
+      v-bind="$attrs"
+      :id="audio.id"
+      ref="audioEl"
+      class="audio-controller"
+      controls
+      :src="audio.url"
+      crossorigin="anonymous"
+      @loadedmetadata="handleReady"
+      @error="handleError"
+    />
+    <!-- eslint-enable vuejs-accessibility/media-has-caption -->
+  </div>
+</template>
+
+<script>
+import Waveform from '~/components/AudioTrack/Waveform'
+import { computed, ref, useStore, watch } from '@nuxtjs/composition-api'
+import {
+  SET_ACTIVE_MEDIA_ITEM,
+  UNSET_ACTIVE_MEDIA_ITEM,
+} from '~/store-modules/mutation-types'
+
+/**
+ * Controls the interaction between the parent Vue component, the underlying
+ * HTMLAudioElement and the Active Media Store. Also displays the waveform that
+ * is deeply linked to timekeeping for the HTMLAudioElement.
+ */
+export default {
+  name: 'AudioController',
+  components: { Waveform },
+  inheritAttrs: false,
+  model: {
+    prop: 'status',
+    event: 'change',
+  },
+  props: {
+    /**
+     * the information about the track, typically from a track's detail endpoint
+     */
+    audio: {
+      type: Object,
+      required: true,
+    },
+    /**
+     * the playing/paused status of the audio
+     */
+    status: {
+      type: String,
+      required: true,
+      validator: (val) => ['playing', 'paused'].includes(val),
+    },
+    /**
+     * the CSS classes to apply on the waveform; This can take any form
+     * acceptable to Vue class bindings.
+     */
+    waveformClasses: {},
+  },
+  setup(props, { emit }) {
+    const store = useStore()
+
+    const audioEl = ref(null) // template ref
+
+    /* Status */
+
+    const isActiveTrack = computed(
+      () =>
+        store.state.activeMediaType === 'audio' &&
+        store.state.activeMediaId === props.audio.id
+    )
+    // Sync status from parent to player and store
+    watch(
+      () => props.status,
+      (status) => {
+        if (!audioEl.value) return
+
+        switch (status) {
+          case 'playing':
+            audioEl.value.play()
+            store.commit(SET_ACTIVE_MEDIA_ITEM, {
+              type: 'audio',
+              id: props.audio.id,
+            })
+            window.requestAnimationFrame(updateTimeLoop)
+            break
+          case 'paused':
+            audioEl.value.pause()
+            if (isActiveTrack.value) {
+              store.commit(UNSET_ACTIVE_MEDIA_ITEM)
+            }
+            break
+        }
+      }
+    )
+    // Sync status from store to parent
+    watch(
+      () => [store.state.activeMediaType, store.state.activeMediaId],
+      () => {
+        const status = isActiveTrack.value ? 'playing' : 'paused'
+        emit('change', status)
+      }
+    )
+
+    /* Error handling */
+
+    const message = ref('loading')
+    const handleError = (event) => {
+      const error = event.target.error
+      let errorMsg
+      switch (error.code) {
+        case error.MEDIA_ERR_ABORTED:
+          errorMsg = 'err_aborted'
+          break
+        case error.MEDIA_ERR_NETWORK:
+          errorMsg = 'err_network'
+          break
+        case error.MEDIA_ERR_DECODE:
+          errorMsg = 'err_decode'
+          break
+        case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+          errorMsg = 'err_unsupported'
+          break
+      }
+      message.value = errorMsg
+    }
+
+    /* Timekeeping */
+
+    const currentTime = ref(0)
+    const duration = ref(0)
+    const updateTime = () => {
+      if (!audioEl.value) return
+
+      currentTime.value = audioEl.value.currentTime
+      duration.value = audioEl.value.duration
+    }
+    const updateTimeLoop = () => {
+      updateTime()
+      if (props.status === 'playing') {
+        // Audio is playing, keep looping
+        window.requestAnimationFrame(updateTimeLoop)
+      }
+    }
+
+    /* Metadata readiness */
+
+    const handleReady = () => {
+      message.value = null
+      updateTime()
+      emit('ready')
+    }
+
+    /* Seeking */
+
+    const handleSeeked = (frac) => {
+      if (audioEl.value && duration.value) {
+        audioEl.value.currentTime = duration.value * frac
+        updateTime()
+      }
+    }
+
+    return {
+      audioEl,
+
+      message,
+      handleError,
+
+      currentTime,
+      duration,
+
+      handleReady,
+
+      handleSeeked,
+    }
+  },
+}
+</script>

src/components/AudioTrack/AudioThumbnail.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- Should be wrapped by a fixed-width parent -->
+  <div class="h-0 w-full pt-full bg-yellow">&nbsp;</div>
+</template>
+
+<script>
+export default {
+  name: 'AudioThumbnail',
+  props: {
+    audio: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>