Add ability to listen to audio only formats for videos

src/renderer/components/ft-video-player/ft-video-player.js

@@ -41,6 +41,10 @@ export default Vue.extend({
     storyboardSrc: {
       type: String,
       default: ''
+    },
+    thumbnail: {
+      type: String,
+      default: ''
     }
   },
   data: function () {
@@ -113,10 +117,14 @@ export default Vue.extend({
     },
 
     selectedDefaultQuality: function () {
-      let selectedQuality = null
+      let selectedQuality = ''
 
       if (this.sourceList.length === 0) {
-        return this.defaultQuality
+        return ''
+      }
+
+      if (typeof (this.sourceList[0].qualityLabel) === 'number') {
+        return ''
       }
 
       const maxAvailableQuality = parseInt(this.sourceList[this.sourceList.length - 1].qualityLabel.replace(/p|k/, ''))

src/renderer/components/ft-video-player/ft-video-player.vue

@@ -3,6 +3,7 @@
     <video
       :id="id"
       class="ftVideoPlayer video-js vjs-default-skin"
+      :poster="thumbnail"
       controls
       preload="auto"
       :data-setup="JSON.stringify(dataSetup)"

src/renderer/components/player-settings/player-settings.js

@@ -21,12 +21,12 @@ export default Vue.extend({
       formatNames: [
         'Dash Formats',
         'Legacy Formats',
-        'YouTube Player'
+        'Audio Formats'
       ],
       formatValues: [
         'dash',
         'legacy',
-        'youtube'
+        'audio'
       ],
       qualityNames: [
         'Auto',

src/renderer/components/watch-video-info/watch-video-info.js

@@ -56,12 +56,13 @@ export default Vue.extend({
       formatTypeLabel: 'VIDEO FORMATS',
       formatTypeNames: [
         'USE DASH FORMATS',
-        'USE LEGACY FORMATS'
+        'USE LEGACY FORMATS',
+        'USE AUDIO FORMATS'
       ],
       formatTypeValues: [
         'dash',
         'legacy',
-        'youtube'
+        'audio'
       ],
       shareLabel: 'SHARE VIDEO',
       shareNames: [
@@ -132,6 +133,9 @@ export default Vue.extend({
         case 'legacy':
           this.$parent.enableLegacyFormat()
           break
+        case 'audio':
+          this.$parent.enableAudioFormat()
+          break
       }
     },
 

src/renderer/views/Watch/Watch.js

@@ -51,7 +51,9 @@ export default Vue.extend({
       videoPublished: 0,
       videoStoryboardSrc: '',
       audioUrl: '',
+      activeSourceList: [],
       videoSourceList: [],
+      audioSourceList: [],
       captionSourceList: [],
       recommendedVideos: [],
       watchingPlaylist: false,
@@ -91,6 +93,23 @@ export default Vue.extend({
       return this.$store.getters.getForceLocalBackendForLegacy
     },
 
+    thumbnailPreference: function () {
+      return this.$store.getters.getThumbnailPreference
+    },
+
+    thumbnail: function () {
+      switch (this.thumbnailPreference) {
+        case 'start':
+          return `https://i.ytimg.com/vi/${this.videoId}/mq1.jpg`
+        case 'middle':
+          return `https://i.ytimg.com/vi/${this.videoId}/mq2.jpg`
+        case 'end':
+          return `https://i.ytimg.com/vi/${this.videoId}/mq3.jpg`
+        default:
+          return `https://i.ytimg.com/vi/${this.videoId}/mqdefault.jpg`
+      }
+    },
+
     youtubeNoCookieEmbeddedFrame: function () {
       return `<iframe width='560' height='315' src='https://www.youtube-nocookie.com/embed/${this.videoId}?rel=0' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>`
     },
@@ -205,6 +224,25 @@ export default Vue.extend({
             }).reverse()
           } else {
             this.videoSourceList = result.player_response.streamingData.formats
+
+            this.audioSourceList = result.player_response.streamingData.adaptiveFormats.filter((format) => {
+              return format.mimeType.includes('audio')
+            }).map((format) => {
+              return {
+                url: format.url,
+                type: format.mimeType,
+                label: 'Audio',
+                qualityLabel: format.bitrate
+              }
+            }).sort((a, b) => {
+              return a.qualityLabel - b.qualityLabel
+            })
+
+            if (this.activeFormat === 'audio') {
+              this.activeSourceList = this.audioSourceList
+            } else {
+              this.activeSourceList = this.videoSourceList
+            }
           }
 
           // The response provides a storyboard, however it returns a 403 error.
@@ -319,6 +357,25 @@ export default Vue.extend({
             this.getLegacyFormats()
           } else {
             this.videoSourceList = result.formatStreams.reverse()
+
+            this.audioSourceList = result.adaptiveFormats.filter((format) => {
+              return format.type.includes('audio')
+            }).map((format) => {
+              return {
+                url: format.url,
+                type: format.type,
+                label: 'Audio',
+                qualityLabel: parseInt(format.bitrate)
+              }
+            }).sort((a, b) => {
+              return a.qualityLabel - b.qualityLabel
+            })
+
+            if (this.activeFormat === 'audio') {
+              this.activeSourceList = this.audioSourceList
+            } else {
+              this.activeSourceList = this.videoSourceList
+            }
           }
 
           this.isLoading = false
@@ -378,6 +435,21 @@ export default Vue.extend({
       }
 
       this.activeFormat = 'legacy'
+      this.activeSourceList = this.videoSourceList
+      this.hidePlayer = true
+
+      setTimeout(() => {
+        this.hidePlayer = false
+      }, 100)
+    },
+
+    enableAudioFormat: function () {
+      if (this.activeFormat === 'audio') {
+        return
+      }
+
+      this.activeFormat = 'audio'
+      this.activeSourceList = this.audioSourceList
       this.hidePlayer = true
 
       setTimeout(() => {

src/renderer/views/Watch/Watch.vue

@@ -7,10 +7,11 @@
     <ft-video-player
       v-if="!isLoading && !hidePlayer"
       :dash-src="dashSrc"
-      :source-list="videoSourceList"
+      :source-list="activeSourceList"
       :caption-list="captionSourceList"
       :storyboard-src="videoStoryboardSrc"
       :format="activeFormat"
+      :thumbnail="thumbnail"
       class="videoPlayer"
       :class="{ theatrePlayer: useTheatreMode }"
       ref="videoPlayer"