From 2d17c8abaa701ec1a696f1e2713b5f8af8819a26 Mon Sep 17 00:00:00 2001
From: Isra <byzkk@protonmail.com>
Date: Thu, 30 Mar 2023 19:10:35 -0500
Subject: [PATCH] Remove duplicate label

---
 src/components/Slider.tsx                     |  8 +--
 .../popouts/CaptionSettingsPopout.tsx         |  4 +-
 .../popouts/PlaybackSpeedPopout.tsx           |  1 -
 yarn.lock                                     | 53 ++++++++++++++-----
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index c4ea9a1a..39b63e6e 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -1,7 +1,7 @@
 import { ChangeEventHandler, useEffect, useRef } from "react";
 
 export type SliderProps = {
-  label: string;
+  label?: string;
   min: number;
   max: number;
   step: number;
@@ -23,11 +23,13 @@ export function Slider(props: SliderProps) {
   return (
     <div className="mb-6 flex flex-row gap-4">
       <div className="flex w-full flex-col gap-2">
-        <label className="font-bold">{props.label}</label>
+        {props.label ? (
+          <label className="font-bold">{props.label}</label>
+        ) : null}
         <input
           type="range"
           ref={ref}
-          className="styled-slider slider-progress"
+          className="styled-slider slider-progress mt-[20px]"
           onChange={props.onChange}
           value={props.value}
           max={props.max}
diff --git a/src/video/components/popouts/CaptionSettingsPopout.tsx b/src/video/components/popouts/CaptionSettingsPopout.tsx
index 6f85ac87..35bf8010 100644
--- a/src/video/components/popouts/CaptionSettingsPopout.tsx
+++ b/src/video/components/popouts/CaptionSettingsPopout.tsx
@@ -30,7 +30,7 @@ export function CaptionSettingsPopout(props: {
       />
       <FloatingCardView.Content>
         <Slider
-          label={t("videoPlayer.popouts.captionPreferences.delay")}
+          label={t("videoPlayer.popouts.captionPreferences.delay") as string}
           max={10}
           min={-10}
           step={0.1}
@@ -47,7 +47,7 @@ export function CaptionSettingsPopout(props: {
           onChange={(e) => setCaptionFontSize(e.target.valueAsNumber)}
         />
         <Slider
-          label={t("videoPlayer.popouts.captionPreferences.opacity")}
+          label={t("videoPlayer.popouts.captionPreferences.opacity") as string}
           step={1}
           min={0}
           max={255}
diff --git a/src/video/components/popouts/PlaybackSpeedPopout.tsx b/src/video/components/popouts/PlaybackSpeedPopout.tsx
index 1de3c363..1013647a 100644
--- a/src/video/components/popouts/PlaybackSpeedPopout.tsx
+++ b/src/video/components/popouts/PlaybackSpeedPopout.tsx
@@ -56,7 +56,6 @@ export function PlaybackSpeedPopout(props: {
         <PopoutSection className="pt-0">
           <div>
             <Slider
-              label={t("videoPlayer.popouts.speed")}
               min={0.1}
               max={10}
               step={0.1}
diff --git a/yarn.lock b/yarn.lock
index 4b57d8ae..effbeff8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1907,7 +1907,23 @@ chalk@^2.0.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.1:
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.0.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.1.1:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -1967,7 +1983,12 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -4364,22 +4385,19 @@ screenfull@^5.1.0:
   resolved "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz"
   integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
 
-semver@^6.1.1:
+semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^6.1.2:
-  version "6.3.0"
-  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+semver@^7.3.4:
+  version "7.3.8"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
 
-semver@^7.3.4, semver@^7.3.7:
+semver@^7.3.7:
   version "7.3.8"
   resolved "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz"
   integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
@@ -4628,7 +4646,14 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.0.0, supports-color@^7.1.0:
+supports-color@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==