feat: add anime title to player

app/components/ReleasePlayer/EpisodeSelectorMenu.tsx

@@ -97,7 +97,7 @@ export const EpisodeSelectorMenu = ({
             return (
               <button
                 key={`release-${release_id}-voiceover-${voiceover.id}-source-${source.id}-episode-${epis.position}`}
-                className={`h-fit px-2 justify-start items-start ${episode.position == epis.position ? "text-white" : "text-gray-400 hover:text-gray-100"} transition-colors`}
+                className={`h-fit px-2 justify-start items-start ${episode.position == epis.position ? "text-white" : "text-gray-300 hover:text-gray-100"} transition-colors`}
                 onClick={() => {
                   setEpisode({
                     selected: epis,

app/components/ReleasePlayer/MediaPlayer.module.css

@@ -110,6 +110,39 @@
   background: linear-gradient(to bottom, var(--gradient-steps));
 }
 
+.media-gradient-top {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: calc(8 * var(--base));
+  pointer-events: none;
+}
+
+.media-gradient-top::before {
+  content: "";
+  --gradient-steps:
+    hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,
+    hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%,
+    hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%,
+    hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%,
+    hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%,
+    hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%,
+    hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%, hsl(0 0% 0%) 100%;
+
+  position: absolute;
+  inset: 0;
+  opacity: 0.7;
+  background: linear-gradient(to top, var(--gradient-steps));
+}
+
+.anime-title {
+  position: absolute;
+  height: calc(2 * var(--base));
+  top: calc(0.5 * var(--base));
+  left: var(--base);
+  right: var(--base);
+}
+
 .media-settings-menu {
   --media-menu-icon-height: 20px;
   --media-menu-item-icon-height: 20px;

app/components/ReleasePlayer/ReleasePlayerCustom.tsx

@@ -45,6 +45,7 @@ import VideoJS from "videojs-video-element/react";
 
 export const ReleasePlayerCustom = (props: {
   id: number;
+  title: string;
   token: string | null;
 }) => {
   const [voiceover, setVoiceover] = useState({
@@ -234,6 +235,31 @@ export const ReleasePlayerCustom = (props: {
             </>
           : ""}
 
+          <div className={`${Styles["media-gradient-top"]}`}></div>
+
+          <div className={`${Styles["anime-title"]}`}>
+            <div className="flex flex-col gap-2">
+              <p className="text-xl text-white">{props.title}</p>
+              <div className="flex gap-2">
+                {voiceover.selected ?
+                  <p className="text-base font-light leading-none text-gray-200">
+                    {voiceover.selected.name}
+                  </p>
+                : ""}
+                {episode.selected ?
+                  <p className="text-base font-light leading-none text-gray-200">
+                    |{" "}
+                    {episode.selected.name ?
+                      episode.selected.name
+                    : ["Sibnet"].includes(source.selected.name) ?
+                      `${episode.selected.position + 1} Серия`
+                    : `${episode.selected.position} Серия`}
+                  </p>
+                : ""}
+              </div>
+            </div>
+          </div>
+
           <div className={`${Styles["media-gradient-bottom"]}`}></div>
           <MediaSettingsMenu
             id="settings"

app/components/ReleasePlayer/SourceSelectorMenu.tsx

@@ -79,7 +79,7 @@ export const SourceSelectorMenu = ({
             return (
               <button
                 key={`release-${release_id}-voiceover-${voiceover.id}-source-${src.id}`}
-                className={`h-fit ${source.id == src.id ? "text-white" : "text-gray-400 hover:text-gray-100"} transition-colors`}
+                className={`h-fit ${source.id == src.id ? "text-white" : "text-gray-300 hover:text-gray-100"} transition-colors`}
                 onClick={() => {
                   setSource({
                     selected: src,

app/components/ReleasePlayer/VoiceoverSelectorMenu.tsx

@@ -71,7 +71,7 @@ export const VoiceoverSelectorMenu = ({
             voiceoverList.map((vo: Voiceover) => {
               return (
                 <button key={`release-${release_id}-voiceover-${vo.id}`}
-                    className={`h-fit px-2 ${voiceover.id == vo.id ? "text-white" : "text-gray-400 hover:text-gray-100"} transition-colors`}
+                    className={`h-fit px-2 ${voiceover.id == vo.id ? "text-white" : "text-gray-300 hover:text-gray-100"} transition-colors`}
                     onClick={() => {
                             setVoiceover({
                                 selected: vo,
@@ -90,7 +90,7 @@ export const VoiceoverSelectorMenu = ({
                             {vo.icon ? <img alt="" className="w-6 h-6 rounded-full" src={vo.icon}></img> : ""}
                             <span className="text-[16px] leading-none whitespace-nowrap">{vo.name}</span>
                             {vo.pinned && (
-                                <span className={`h-4 iconify material-symbols--push-pin ${voiceover.id == vo.id ? "bg-white" : "bg-gray-400 hover:bg-gray-100"} transition-colors`}></span>
+                                <span className={`h-4 iconify material-symbols--push-pin ${voiceover.id == vo.id ? "bg-white" : "bg-gray-300 hover:bg-gray-100"} transition-colors`}></span>
                             )}
                         </div>
                         <div className="flex gap-2">

app/pages/Release.tsx

@@ -119,7 +119,7 @@ export const ReleasePage = (props: any) => {
             data.release.status.name.toLowerCase() != "анонс" && (
               <>
                 {preferenceStore.params.experimental.newPlayer ?
-                  <ReleasePlayerCustom id={props.id} token={userStore.token} />
+                  <ReleasePlayerCustom id={props.id} token={userStore.token} title={data.release.title_ru || data.release.title_original || ""} />
                 : <ReleasePlayer id={props.id} />}
               </>
             )}