diff --git a/app/ui/player/player.module.scss b/app/ui/player/player.module.scss index ad6c5ff5..13fdffa6 100644 --- a/app/ui/player/player.module.scss +++ b/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 { diff --git a/app/ui/player/player.tsx b/app/ui/player/player.tsx index 3bd08959..b0980369 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,22 @@ export default function Player({
+ + captions + close captions + diff --git a/public/player/activeSubtitles.svg b/public/player/activeSubtitles.svg new file mode 100644 index 00000000..193ab5ac --- /dev/null +++ b/public/player/activeSubtitles.svg @@ -0,0 +1,3 @@ + + +