Add 50fps and live support to frame by frame keyboard shortcuts (#3420)

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

@@ -97,7 +97,6 @@ export default defineComponent({
       selectedMimeType: '',
       selectedFPS: 0,
       using60Fps: false,
-      maxFramerate: 0,
       activeSourceList: [],
       activeAdaptiveFormats: [],
       playerStats: null,
@@ -337,7 +336,6 @@ export default defineComponent({
     this.createToggleTheatreModeButton()
     this.createScreenshotButton()
     this.determineFormatType()
-    this.determineMaxFramerate()
 
     if ('mediaSession' in navigator) {
       navigator.mediaSession.setActionHandler('play', () => this.player.play())
@@ -847,25 +845,6 @@ export default defineComponent({
       }
     },
 
-    determineMaxFramerate: async function() {
-      if (this.dashSrc.length === 0) {
-        this.maxFramerate = 60
-        return
-      }
-
-      try {
-        const data = await fs.readFile(this.dashSrc[0].url)
-
-        if (data.includes('frameRate="60"')) {
-          this.maxFramerate = 60
-        } else {
-          this.maxFramerate = 30
-        }
-      } catch {
-        this.maxFramerate = 60
-      }
-    },
-
     determineDefaultQualityLegacy: function () {
       if (this.useDash) {
         return
@@ -1210,17 +1189,24 @@ export default defineComponent({
     },
 
     framebyframe: function (step) {
+      if (this.format === 'audio') {
+        return
+      }
+
       this.player.pause()
-      const quality = this.useDash ? this.player.qualityLevels()[this.player.qualityLevels().selectedIndex] : {}
-      let fps = 30
-      // Non-Dash formats are 30fps only
-      if (this.maxFramerate === 60 && quality.height >= 480) {
-        for (let i = 0; i < this.adaptiveFormats.length; i++) {
-          if (this.adaptiveFormats[i].bitrate === quality.bitrate) {
-            fps = this.adaptiveFormats[i].fps ? this.adaptiveFormats[i].fps : 30
-            break
-          }
-        }
+
+      let fps
+      if (this.useDash) {
+        const qualityLevels = this.player.qualityLevels()
+        fps = qualityLevels[qualityLevels.selectedIndex].frameRate
+      } else {
+        // legacy formats
+        const currentPlayerSourceUrl = this.player.currentSource().src
+        fps = this.sourceList.find(source => source.url === currentPlayerSourceUrl)?.fps
+      }
+
+      if (isNaN(fps)) {
+        fps = 30
       }
 
       // The 3 lines below were taken from the videojs-framebyframe node module by Helena Rasche

src/renderer/helpers/utils.js

@@ -158,6 +158,7 @@ export async function getFormatsFromHLSManifest(manifestUrl) {
 
   const formats = []
   let currentHeight = 0
+  let currentFPS = 0
 
   for (const line of lines) {
     if (line.startsWith('#')) {
@@ -165,14 +166,17 @@ export async function getFormatsFromHLSManifest(manifestUrl) {
         continue
       }
 
-      const height = line
-        .split(',')
-        .find(part => part.startsWith('RESOLUTION'))
+      const parts = line.split(',')
+      const height = parts.find(part => part.startsWith('RESOLUTION'))
         .split('x')[1]
+      const fps = parts.find(part => part.startsWith('FRAME-RATE'))
+        .split('=')[1]
       currentHeight = parseInt(height)
+      currentFPS = parseInt(fps)
     } else {
       formats.push({
         height: currentHeight,
+        fps: currentFPS,
         url: line.trim()
       })
     }

src/renderer/views/Watch/Watch.js

@@ -408,6 +408,7 @@ export default defineComponent({
               .map((format) => {
                 return {
                   url: format.url,
+                  fps: format.fps,
                   type: 'application/x-mpegURL',
                   label: 'Dash',
                   qualityLabel: `${format.height}p`