Filter out WebM DASH formats

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

@@ -113,6 +113,10 @@ export default defineComponent({
  return this.$store.getters.getDefaultQuality
  },
 
+ allowDashAv1Formats: function () {
+ return this.$store.getters.getAllowDashAv1Formats
+ },
+
  defaultTheatreMode: function () {
  return this.$store.getters.getDefaultTheatreMode
  },
@@ -276,6 +280,7 @@ export default defineComponent({
  'updateDefaultPlayback',
  'updateDefaultVideoFormat',
  'updateDefaultQuality',
+ 'updateAllowDashAv1Formats',
  'updateVideoVolumeMouseScroll',
  'updateVideoPlaybackRateMouseScroll',
  'updateVideoSkipMouseScroll',

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

@@ -1,3 +1,7 @@
+.av1Switch {
+ align-self: center;
+}
+
 .screenshotFolderContainer {
  align-items: center;
  column-gap: 1rem;

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

@@ -159,6 +159,14 @@
  :select-values="qualityValues"
  @change="updateDefaultQuality"
  />
+ <ft-toggle-switch
+ class="av1Switch"
+ :label="$t('Settings.Player Settings.Allow DASH AV1 formats')"
+ :compact="true"
+ :default-value="allowDashAv1Formats"
+ :tooltip="$t('Tooltips.Player Settings.Allow DASH AV1 formats')"
+ @change="updateAllowDashAv1Formats"
+ />
  </ft-flex-box>
  <br>
  <ft-flex-box>

src/renderer/helpers/api/local.js

@@ -495,3 +495,33 @@ export function parseLocalComment(comment, commentThread = undefined) {
  replies: []
  }
 }
+
+/**
+ * video.js only supports MP4 DASH not WebM DASH
+ * so we filter out the WebM DASH formats
+ * @param {Format[]} formats
+ * @param {boolean} allowAv1 Use the AV1 formats if they are available
+ */
+export function filterFormats(formats, allowAv1 = false) {
+ const audioFormats = []
+ const h264Formats = []
+ const av1Formats = []
+
+ formats.forEach(format => {
+ const mimeType = format.mime_type
+
+ if (mimeType.startsWith('audio/mp4')) {
+ audioFormats.push(format)
+ } else if (allowAv1 && mimeType.startsWith('video/mp4; codecs="av01')) {
+ av1Formats.push(format)
+ } else if (mimeType.startsWith('video/mp4; codecs="avc')) {
+ h264Formats.push(format)
+ }
+ })
+
+ if (allowAv1 && av1Formats.length > 0) {
+ return [...audioFormats, ...av1Formats]
+ } else {
+ return [...audioFormats, ...h264Formats]
+ }
+}

src/renderer/store/modules/settings.js

@@ -278,7 +278,8 @@ const state = {
  screenshotFolderPath: '',
  screenshotFilenamePattern: '%Y%M%D-%H%N%S',
  fetchSubscriptionsAutomatically: true,
- settingsPassword: ''
+ settingsPassword: '',
+ allowDashAv1Formats: false,
 }
 
 const stateWithSideEffects = {

src/renderer/views/Watch/Watch.js

@@ -23,6 +23,7 @@ import {
  showToast
 } from '../../helpers/utils'
 import {
+ filterFormats,
  getLocalVideoInfo,
  mapLocalFormat,
  parseLocalTextRuns,
@@ -176,6 +177,9 @@ export default defineComponent({
  },
  hideChapters: function () {
  return this.$store.getters.getHideChapters
+ },
+ allowDashAv1Formats: function () {
+ return this.$store.getters.getAllowDashAv1Formats
  }
  },
  watch: {
@@ -515,7 +519,7 @@ export default defineComponent({
  if (result.streaming_data.formats.length > 0) {
  this.videoSourceList = result.streaming_data.formats.map(mapLocalFormat).reverse()
  } else {
- this.videoSourceList = result.streaming_data.adaptive_formats.map(mapLocalFormat).reverse()
+ this.videoSourceList = filterFormats(result.streaming_data.adaptive_formats, this.allowDashAv1Formats).map(mapLocalFormat).reverse()
  }
  this.adaptiveFormats = this.videoSourceList
 
@@ -585,13 +589,6 @@ export default defineComponent({
  }
 
  if (result.streaming_data?.adaptive_formats.length > 0) {
- this.adaptiveFormats = result.streaming_data.adaptive_formats.map(mapLocalFormat)
- if (this.proxyVideos) {
- this.dashSrc = await this.createInvidiousDashManifest()
- } else {
- this.dashSrc = await this.createLocalDashManifest(result)
- }
-
  this.audioSourceList = result.streaming_data.adaptive_formats.filter((format) => {
  return format.has_audio
  }).sort((a, b) => {
@@ -619,6 +616,16 @@ export default defineComponent({
  }
  }).reverse()
 
+ // we need to alter the result object so the toDash function uses the filtered formats too
+ result.streaming_data.adaptive_formats = filterFormats(result.streaming_data.adaptive_formats, this.allowDashAv1Formats)
+
+ this.adaptiveFormats = result.streaming_data.adaptive_formats.map(mapLocalFormat)
+ if (this.proxyVideos) {
+ this.dashSrc = await this.createInvidiousDashManifest()
+ } else {
+ this.dashSrc = await this.createLocalDashManifest(result)
+ }
+
  if (this.activeFormat === 'audio') {
  this.activeSourceList = this.audioSourceList
  } else {

static/locales/en-US.yaml

@@ -263,6 +263,7 @@ Settings:
  1440p: 1440p
  4k: 4k
  8k: 8k
+ Allow DASH AV1 formats: Allow DASH AV1 formats
  Screenshot:
  Enable: Enable Screenshot
  Format Label: Screenshot Format
@@ -778,6 +779,9 @@ Tooltips:
  Default Video Format: Set the formats used when a video plays. DASH formats can
  play higher qualities. Legacy formats are limited to a max of 720p but use less
  bandwidth. Audio formats are audio only streams.
+ Allow DASH AV1 formats: DASH AV1 formats may look better than DASH H.264 formats.
+ DASH AV1 formats require more power to playback! They are not available on all videos,
+ in those cases the player will use the DASH H.264 formats instead.
  Scroll Playback Rate Over Video Player: While the cursor is over the video, press and
  hold the Control key (Command Key on Mac) and scroll the mouse wheel forwards or backwards to control
  the playback rate. Press and hold the Control key (Command Key on Mac) and left click the mouse