From 30963788be1d1840f9d8671cf8e91cbeaa721f10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <ladvan91@hotmail.com>
Date: Mon, 9 Oct 2023 11:03:10 +0200
Subject: [PATCH] feat(UI): Display frame rates in the quality selector (#5753)

Closes https://github.com/shaka-project/shaka-player/issues/5749
---
 ui/resolution_selection.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/ui/resolution_selection.js b/ui/resolution_selection.js
index e65e538b5b..ce0355325a 100644
--- a/ui/resolution_selection.js
+++ b/ui/resolution_selection.js
@@ -89,10 +89,17 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     // Remove duplicate entries with the same resolution or quality depending
     // on content type.  Pick an arbitrary one.
     tracks = tracks.filter((track, idx) => {
-      // Keep the first one with the same height or bandwidth.
-      const otherIdx = this.player.isAudioOnly() ?
-          tracks.findIndex((t) => t.bandwidth == track.bandwidth) :
-          tracks.findIndex((t) => t.height == track.height);
+      // Keep the first one with the same height and framrate or bandwidth.
+      let otherIdx = -1;
+      if (this.player.isAudioOnly()) {
+        otherIdx = tracks.findIndex((t) => t.bandwidth == track.bandwidth);
+      } else {
+        otherIdx = tracks.findIndex((t) => {
+          return t.height == track.height &&
+              t.frameRate == track.frameRate &&
+              t.hdr == track.hdr;
+        });
+      }
       return otherIdx == idx;
     });
 
@@ -135,11 +142,15 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
       if (this.player.isAudioOnly()) {
         span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
       } else {
+        let text = track.height + 'p';
+        const frameRate = track.frameRate;
+        if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
+          text += Math.round(track.frameRate);
+        }
         if (track.hdr == 'PQ' || track.hdr == 'HLG') {
-          span.textContent = track.height + 'p (HDR)';
-        } else {
-          span.textContent = track.height + 'p';
+          text += ' (HDR)';
         }
+        span.textContent = text;
       }
       button.appendChild(span);