From e1ec5d87ad4e8cc15ed017152fb9281b4229296d Mon Sep 17 00:00:00 2001
From: Maxim Volkov <ketkette7@gmail.com>
Date: Thu, 17 Jul 2025 19:57:39 +0400
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D1=81=D1=83=D0=B1=D1=82=D0=B8=D1=82=D1=80=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/ui/player/player.module.scss |  8 ++++++++
 app/ui/player/player.tsx         | 10 ++++++++++
 2 files changed, 18 insertions(+)

diff --git a/app/ui/player/player.module.scss b/app/ui/player/player.module.scss
index 5131659..590adab 100644
--- a/app/ui/player/player.module.scss
+++ b/app/ui/player/player.module.scss
@@ -217,6 +217,14 @@
   }
 }
 
+.captions-btn {
+  @apply cursor-pointer;
+  transition-duration: 200ms;
+  &:hover {
+    scale: 105%;
+  }
+}
+
 // Для мобилок
 
 .mob-buttons {
diff --git a/app/ui/player/player.tsx b/app/ui/player/player.tsx
index 3bd0895..57afb24 100644
--- a/app/ui/player/player.tsx
+++ b/app/ui/player/player.tsx
@@ -13,6 +13,7 @@ import {
   VolumeSlider,
   Captions,
   MediaPlayerInstance,
+  CaptionButton,
 } from "@vidstack/react";
 import Image from "next/image";
 import clsx from "clsx";
@@ -282,6 +283,15 @@ export default function Player({
             <div className="mobile:hidden compact:block relative">
               <PlayerSettings />
             </div>
+            <CaptionButton className={styles["captions-btn"]}>
+              <Image
+                className={styles["captions-btn-image"]}
+                src="/player/subtitles.svg"
+                alt="captions"
+                width={32}
+                height={32}
+              />
+            </CaptionButton>
           </div>
         </div>
       </div>

From c9d58fe85ec99c416ecf6cf78cecebcfce058d0b Mon Sep 17 00:00:00 2001
From: Maxim Volkov <ketkette7@gmail.com>
Date: Sat, 19 Jul 2025 22:59:57 +0400
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=D0=9F=D0=BE=D1=8F=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=D1=81=D1=8C=20=D0=B0=D0=BA=D1=82=D0=B8=D0=B2=D0=BD?=
 =?UTF-8?q?=D0=B0=D1=8F=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F=20=D1=81?=
 =?UTF-8?q?=D1=83=D0=B1=D1=82=D0=B8=D1=82=D1=80=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/ui/player/player.module.scss  | 5 +++++
 app/ui/player/player.tsx          | 7 +++++++
 public/player/activeSubtitles.svg | 3 +++
 3 files changed, 15 insertions(+)
 create mode 100644 public/player/activeSubtitles.svg

diff --git a/app/ui/player/player.module.scss b/app/ui/player/player.module.scss
index ad4655f..13fdffa 100644
--- a/app/ui/player/player.module.scss
+++ b/app/ui/player/player.module.scss
@@ -225,6 +225,11 @@
   }
 }
 
+.captions-btn[data-active] .captions-btn-image,
+.captions-btn:not([data-active]) .close-captions-btn-image {
+  display: none;
+}
+
 // Для мобилок
 
 .mob-buttons {
diff --git a/app/ui/player/player.tsx b/app/ui/player/player.tsx
index 57afb24..b098036 100644
--- a/app/ui/player/player.tsx
+++ b/app/ui/player/player.tsx
@@ -291,6 +291,13 @@ export default function Player({
                 width={32}
                 height={32}
               />
+              <Image
+                className={styles["close-captions-btn-image"]}
+                src="/player/activeSubtitles.svg"
+                alt="close captions"
+                width={32}
+                height={32}
+              />
             </CaptionButton>
           </div>
         </div>
diff --git a/public/player/activeSubtitles.svg b/public/player/activeSubtitles.svg
new file mode 100644
index 0000000..193ab5a
--- /dev/null
+++ b/public/player/activeSubtitles.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.6957 5.47413C23.3815 5.01913 22.9807 4.61829 22.5257 4.30413C21.4965 3.55663 20.1532 3.16663 18.539 3.16663H9.46067C9.244 3.16663 9.02734 3.17746 8.8215 3.19913C5.26817 3.42663 3.1665 5.73413 3.1665 9.46079V18.5391C3.1665 20.1533 3.5565 21.4966 4.304 22.5258C4.61817 22.9808 5.019 23.3816 5.474 23.6958C6.36234 24.3458 7.489 24.725 8.8215 24.8116C9.02734 24.8225 9.244 24.8333 9.46067 24.8333H18.539C22.4823 24.8333 24.8332 22.4825 24.8332 18.5391V9.46079C24.8332 7.84663 24.4432 6.50329 23.6957 5.47413ZM13.339 18.2033H10.2298C9.78567 18.2033 9.41734 17.835 9.41734 17.3908C9.41734 16.9466 9.78567 16.5783 10.2298 16.5783H11.3132V9.56913H8.529C8.40984 9.56913 8.31234 9.66663 8.31234 9.78579V10.6308C8.31234 11.075 7.944 11.4325 7.49984 11.4325C7.05567 11.4325 6.68734 11.075 6.68734 10.62V9.77496C6.68734 8.75663 7.51067 7.93329 8.529 7.93329H15.7223C16.7407 7.93329 17.564 8.75663 17.564 9.77496V10.62C17.564 11.0641 17.1957 11.4325 16.7515 11.4325C16.3073 11.4325 15.939 11.0641 15.939 10.62V9.77496C15.939 9.65579 15.8415 9.55829 15.7223 9.55829H12.9382V16.5783H13.339C13.7832 16.5783 14.1515 16.9466 14.1515 17.3908C14.1515 17.835 13.7832 18.2033 13.339 18.2033ZM21.3123 14.2491C21.3123 14.6933 20.944 15.0616 20.4998 15.0616C20.0557 15.0616 19.6873 14.6933 19.6873 14.2491V13.8916H18.0082V18.4416H18.3873C18.8315 18.4416 19.1998 18.81 19.1998 19.2541C19.1998 19.6983 18.8315 20.0666 18.3873 20.0666H16.004C15.5598 20.0666 15.1915 19.6983 15.1915 19.2541C15.1915 18.81 15.5598 18.4416 16.004 18.4416H16.3832V13.8916H15.8632C15.419 13.8916 15.0507 13.5233 15.0507 13.0791C15.0507 12.635 15.419 12.2666 15.8632 12.2666H19.7632C20.619 12.2666 21.3123 12.96 21.3123 13.8158V14.2491Z" fill="#ff9843"/>
+</svg>