feat: Добавлена кнопка субтитров

app/ui/player/player.module.scss

@@ -217,6 +217,19 @@
   }
 }
 
+.captions-btn {
+  @apply cursor-pointer;
+  transition-duration: 200ms;
+  &:hover {
+    scale: 105%;
+  }
+}
+
+.captions-btn[data-active] .captions-btn-image,
+.captions-btn:not([data-active]) .close-captions-btn-image {
+  display: none;
+}
+
 // Для мобилок
 
 .mob-buttons {

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,22 @@ 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}
+              />
+              <Image
+                className={styles["close-captions-btn-image"]}
+                src="/player/activeSubtitles.svg"
+                alt="close captions"
+                width={32}
+                height={32}
+              />
+            </CaptionButton>
           </div>
         </div>
       </div>