Fix #1180: Fix broken media support detection

changes/changelog.d/1180.bugfix

@@ -0,0 +1 @@
+Fix broken media support detection (#1180)

front/src/EmbedFrame.vue

@@ -342,13 +342,19 @@ export default {
     },
     getSources (uploads) {
       let self = this;
-      let sources = uploads.map(u => {
+      let a = document.createElement('audio')
+      let allowed = ['probably', 'maybe']
+      let sources = uploads.filter(u => {
+        let canPlay = a.canPlayType(u.mimetype)
+        return allowed.indexOf(canPlay) > -1
+      }).map(u => {
         return {
           type: u.mimetype,
           src: self.fullUrl(u.listen_url),
           duration: u.duration
         }
       })
+      a.remove()
       if (sources.length > 0) {
         // We always add a transcoded MP3 src at the end
         // because transcoding is expensive, but we want browsers that do

front/src/components/audio/Player.vue

@@ -408,12 +408,18 @@ export default {
       return sound
     },
     getSrcs: function (trackData) {
-      let sources = trackData.uploads.map(u => {
+      let a = document.createElement('audio')
+      let allowed = ['probably', 'maybe']
+      let sources = trackData.uploads.filter(u => {
+        let canPlay = a.canPlayType(u.mimetype)
+        return allowed.indexOf(canPlay) > -1
+      }).map(u => {
         return {
           type: u.extension,
           url: this.$store.getters['instance/absoluteUrl'](u.listen_url),
         }
       })
+      a.remove()
       // We always add a transcoded MP3 src at the end
       // because transcoding is expensive, but we want browsers that do
       // not support other codecs to be able to play it :)
@@ -721,7 +727,7 @@ export default {
         }, 500);
         // If the session is playing as a PWA, populate the notification
         // with details from the track
-        if ('mediaSession' in navigator) {
+        if (this.currentTrack && 'mediaSession' in navigator) {
           let metadata = {
             title: this.currentTrack.title,
             artist: this.currentTrack.artist.name,

front/src/utils.js

@@ -47,7 +47,6 @@ export function setCsrf(xhr) {
 }
 
 export function checkRedirectToLogin (store, router) {
-  console.log('HELLO', store.state.auth.authenticated, router.currentRoute.fullPath)
   if (!store.state.auth.authenticated) {
     router.push({name: 'login', query: {next: router.currentRoute.fullPath}})
   }