Notices for Jamendo tracks when seeking is impossible

nuxt.config.js

@@ -122,6 +122,7 @@ export default {
     { src: '~/plugins/ga.js', mode: 'client' },
     { src: '~/plugins/url-change.js' },
     { src: '~/plugins/migration-notice.js' },
+    { src: '~/plugins/ua-parse.js' },
   ],
   css: [
     '~/styles/tailwind.css',

package.json

@@ -57,6 +57,7 @@
     "clipboard": "^2.0.8",
     "core-js": "^3.16.1",
     "deepmerge": "^4.2.2",
+    "express-useragent": "^1.0.15",
     "filesize": "^8.0.2",
     "focus-trap": "^6.7.1",
     "focus-trap-vue": "1.1.1",

src/components/VAudioTrack/VWaveform.vue

@@ -149,6 +149,14 @@
     >
       {{ message }}
     </div>
+
+    <!-- Seek disabled message overlay -->
+    <div
+      v-if="seekDisabledNotice"
+      class="invisible group-hover:visible group-focus:visible absolute w-full inset-0 flex items-center justify-center font-bold text-xsm bg-yellow/75 z-40"
+    >
+      {{ seekDisabledNotice }}
+    </div>
   </div>
 </template>
 
@@ -216,6 +224,14 @@ export default defineComponent({
       type: Array,
       default: () => ['timestamps', 'seek'],
     },
+    /**
+     * An object of notices to display when a feature is disabled.
+     * `'timestamp'`, `'duration'`, `'seek'`.
+     */
+    featureNotices: {
+      type: Object,
+      default: () => {},
+    },
   },
   emits: [
     /**
@@ -297,6 +313,9 @@ export default defineComponent({
     const showTimestamps = computed(() => props.features.includes('timestamps'))
     const isSeekable = computed(() => props.features.includes('seek'))
 
+    /* Feature notices */
+    const seekDisabledNotice = computed(() => props.featureNotices?.seek)
+
     /* State */
 
     const isReady = computed(() => !props.message)
@@ -487,6 +506,8 @@ export default defineComponent({
       showTimestamps,
       isSeekable,
 
+      seekDisabledNotice,
+
       isReady,
       isInteractive,
 

src/components/VAudioTrack/layouts/VRowLayout.vue

@@ -74,15 +74,18 @@
         <slot name="play-pause" :size="isLarge ? 'medium' : 'large'" />
         <slot
           name="controller"
-          :features="['timestamps', 'duration', 'seek']"
+          :features="features"
+          :feature-notices="featureNotices"
         />
       </div>
     </div>
   </article>
 </template>
 
 <script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+import { useBrowserIsBlink } from '~/composables/use-browser-detection'
+
 import VAudioThumbnail from '~/components/VAudioThumbnail/VAudioThumbnail.vue'
 import VLicense from '~/components/License/VLicense.vue'
 
@@ -95,6 +98,15 @@ export default defineComponent({
   props: ['audio', 'size'],
   setup(props) {
     /* Utils */
+    const browserIsBlink = useBrowserIsBlink()
+    const { i18n } = useContext()
+
+    const featureNotices = {}
+    const features = ['timestamps', 'duration', 'seek']
+    if (browserIsBlink && props.audio.source === 'jamendo') {
+      features.pop()
+      featureNotices.seek = i18n.t('audio-track.messages.blink_seek_disabled')
+    }
 
     /**
      * Format the time as hh:mm:ss, dropping the hour part if it is zero.
@@ -117,6 +129,9 @@ export default defineComponent({
     return {
       timeFmt,
 
+      features,
+      featureNotices,
+
       isSmall,
       isMedium,
       isLarge,

src/composables/use-browser-detection.js

@@ -0,0 +1,11 @@
+import { useContext } from '@nuxtjs/composition-api'
+
+export const useBrowserDetection = () => {
+  const { app } = useContext()
+  return app.$ua
+}
+
+export const useBrowserIsBlink = () => {
+  const browser = useBrowserDetection()
+  return browser.isChrome || browser.isEdge || browser.isOpera
+}

src/locales/en.json

@@ -639,6 +639,7 @@
   "audio-track": {
     "aria-label": "Audio Player",
     "messages": {
+      "blink_seek_disabled": "Seeking for Jamendo tracks is limited to Firefox and Safari.",
       "err_aborted": "You aborted playback.",
       "err_network": "A network error occurred.",
       "err_decode": "Could not decode audio.",

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-01-21T13:57:45+00:00\n"
+"POT-Creation-Date: 2022-01-21T15:40:19+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -192,6 +192,11 @@ msgctxt "audio-track.creator"
 msgid "by ###creator###"
 msgstr ""
 
+#: src/components/VAudioTrack/layouts/VRowLayout.vue:108
+msgctxt "audio-track.messages.blink_seek_disabled"
+msgid "Seeking for Jamendo tracks is limited to Firefox and Safari."
+msgstr ""
+
 msgctxt "audio-track.messages.err_aborted"
 msgid "You aborted playback."
 msgstr ""
@@ -224,7 +229,7 @@ msgid "Audio seek bar"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAudioTrack/VWaveform.vue:533
+#: src/components/VAudioTrack/VWaveform.vue:554
 msgctxt "waveform.current-time"
 msgid "###time### seconds"
 msgstr ""

src/plugins/ua-parse.js

@@ -0,0 +1,16 @@
+import useragent from 'express-useragent'
+
+export default function (context, inject) {
+  let userAgent
+
+  if (typeof context.req !== 'undefined') {
+    userAgent = context.req.headers['user-agent']
+  } else if (typeof navigator !== 'undefined') {
+    userAgent = navigator.userAgent
+  }
+
+  const ua = useragent.parse(userAgent)
+
+  context.$ua = ua
+  inject('ua', ua)
+}

test/unit/specs/components/AudioTrack/audio-track.spec.js

@@ -3,6 +3,10 @@ import { render } from '@testing-library/vue'
 import Vuei18n from 'vue-i18n'
 import Vuex from 'vuex'
 
+jest.mock('~/composables/use-browser-detection', () => ({
+  useBrowserIsBlink: jest.fn(() => false),
+}))
+
 const enMessages = require('~/locales/en.json')
 const useVueI18n = (vue) => {
   vue.use(Vuei18n)
@@ -46,6 +50,7 @@ const configureVue = (vue) => {
   return {
     i18n,
     store,
+    /** @todo Create a better mock that can be configured to test this behavior.  */
   }
 }
 
@@ -128,9 +133,9 @@ describe('AudioTrack', () => {
 
   it('should show audio title as main page title', () => {
     const { getByText } = render(VAudioTrack, options, configureVue)
-    const element = getByText(props.audio.title)
-    expect(element).toBeInstanceOf(HTMLHeadingElement)
-    expect(element.tagName).toEqual('H1')
+    // Title text appears multiple times in the track, so need to specify selector
+    const element = getByText(props.audio.title, { selector: 'H1' })
+    expect(element).toBeInTheDocument()
   })
 
   it('should show audio creator with link', () => {