Adjust paella quality selector css (#1122)

fixes #1121 Also removes duration from the displayed metadata table of live events, as that is a very large number and therefore hard to parse at a glance and also not really relevant in my opinion.
elan-ev · Feb 26, 2024 · b3f43a0 · b3f43a0
2 parents 97d28b2 + 42d2cfa
commit b3f43a0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/frontend/src/routes/Video.tsx b/frontend/src/routes/Video.tsx
@@ -880,7 +880,7 @@ const MetadataTable = React.forwardRef<HTMLDListElement, MetadataTableProps>(({
         }
     }
 
-    if (event.syncedData?.duration) {
+    if (event.syncedData?.duration && !event.isLive) {
         pairs.push([
             t("video.duration"),
             formatDuration(event.syncedData.duration),

diff --git a/frontend/src/ui/player/Paella.tsx b/frontend/src/ui/player/Paella.tsx
@@ -223,6 +223,23 @@ const PaellaPlayer: React.FC<PaellaPlayerProps> = ({
                     },
                 },
 
+                '& button[name="es.upv.paella.qualitySelector"] div': {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    i: {
+                        display: "none",
+                    },
+                    span: {
+                        color: "black",
+                        backgroundColor: "var(--main-fg-color)",
+                        borderRadius: 3,
+                        margin: "0 !important",
+                        fontSize: "10px !important",
+                        padding: "2px 3px",
+                    },
+                },
+
                 "&.paella-fallback-fullscreen": {
                     position: "fixed",
                     top: 0,