fix: player settings open/close animation and media playback rates

app/components/ReleasePlayer/MediaPlayer.module.css

@@ -96,7 +96,7 @@
   background: linear-gradient(to bottom, var(--gradient-steps));
 }
 
-.media-controller :global(media-settings-menu) {
+.media-settings-menu {
   --media-menu-icon-height: 20px;
   --media-menu-item-icon-height: 20px;
   --media-settings-menu-min-width: calc(10 * var(--base));
@@ -110,8 +110,14 @@
   user-select: none;
 }
 
-.media-controller :global(media-settings-menu-item),
+.media-settings-menu[hidden] {
-.media-controller :global([role="menu"]::part(menu-item)) {
+  display: block;
+  visibility: visible;
+  opacity: 0;
+}
+
+.media-settings-menu-item,
+.media-controller [role="menu"]::part(menu-item) {
   --media-icon-color: var(--_primary-color);
   margin-inline: calc(0.45 * var(--base));
   height: calc(1.6 * var(--base));
@@ -124,32 +130,31 @@
   text-shadow: none;
 }
 
-.media-controller :global([slot="submenu"]::part(back button)) {
+.media-controller [slot="submenu"]::part(back button) {
   font-size: calc(0.7 * var(--base));
 }
 
-.media-controller :global(media-settings-menu-item:hover) {
+.media-settings-menu-item:hover {
   --media-icon-color: #000;
   color: #000;
   background-color: #fff;
 }
 
-.media-controller :global(media-settings-menu-item:hover [slot="submenu"]::part(menu-item)),
+.media-settings-menu-item:hover [slot="submenu"]::part(menu-item),
-.media-controller :global([slot="submenu"]::part(back indicator)) {
+.media-controller [slot="submenu"]::part(back indicator) {
   --media-icon-color: var(--_primary-color);
 }
 
-.media-controller :global(media-settings-menu-item:hover [slot="submenu"]::part(menu-item):hover) {
+.media-settings-menu-item:hover [slot="submenu"]::part(menu-item):hover {
   --media-icon-color: #000;
   color: #000;
   background-color: #fff;
 }
 
-.media-controller :global(media-settings-menu-item[submenusize="0"]) {
+.media-settings-menu-item[submenusize="0"] {
   display: none;
 }
 
-/* Also hide if only Auto is added. */
 .quality-settings[submenusize="1"] {
   display: none;
 }

app/components/ReleasePlayer/ReleasePlayerCustom.tsx

@@ -12,7 +12,7 @@ import { useUserPlayerPreferencesStore } from "#/store/player";
 
 import HlsVideo from "hls-video-element/react";
 import VideoJS from "videojs-video-element/react";
-import MediaThemeSutro from "./MediaThemeSutro";
+// import MediaThemeSutro from "./MediaThemeSutro";
 import { getAnonEpisodesWatched } from "./ReleasePlayer";
 import { tryCatchPlayer, tryCatchAPI } from "#/api/utils";
 
@@ -25,7 +25,6 @@ import {
   MediaTimeDisplay,
   MediaVolumeRange,
   MediaPlayButton,
-  MediaSeekBackwardButton,
   MediaSeekForwardButton,
   MediaMuteButton,
   MediaFullscreenButton,
@@ -489,6 +488,7 @@ export const ReleasePlayerCustom = (props: {
               />
             )}
           </div>
+
           <HlsVideo
             className="object-contain h-full aspect-video"
             slot="media"
@@ -502,7 +502,7 @@ export const ReleasePlayerCustom = (props: {
           />
           <div className={`${Styles["media-gradient-bottom"]}`}></div>
           <MediaSettingsMenu
-            hidden={true}
+            hidden
             anchor="auto"
             className={`${Styles["media-settings-menu"]}`}
           >
@@ -512,8 +512,9 @@ export const ReleasePlayerCustom = (props: {
               Скорость воспроизведения
               <MediaPlaybackRateMenu
                 slot="submenu"
-                rates={[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]}
+                rates={"0.5 0.75 1 1.25 1.5 1.75 2" as any}
-                hidden={true}
+                // rates={[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]}
+                hidden
               >
                 <div slot="title">Скорость воспроизведения</div>
               </MediaPlaybackRateMenu>
@@ -522,7 +523,7 @@ export const ReleasePlayerCustom = (props: {
               className={`${Styles["media-settings-menu-item"]} ${Styles["quality-settings"]}`}
             >
               Качество
-              <MediaRenditionMenu slot="submenu" hidden={true}>
+              <MediaRenditionMenu slot="submenu" hidden>
                 <div slot="title">Качество</div>
               </MediaRenditionMenu>
             </MediaSettingsMenuItem>

package-lock.json

@@ -15,7 +15,7 @@
         "flowbite-react": "^0.11.7",
         "hls-video-element": "^1.5.0",
         "markdown-to-jsx": "^7.4.7",
-        "media-chrome": "^4.8.0",
+        "media-chrome": "^4.9.0",
         "next": "^14.2.26",
         "next-plausible": "^3.12.1",
         "prettier": "^3.5.3",

package.json

@@ -16,7 +16,7 @@
     "flowbite-react": "^0.11.7",
     "hls-video-element": "^1.5.0",
     "markdown-to-jsx": "^7.4.7",
-    "media-chrome": "^4.8.0",
+    "media-chrome": "^4.9.0",
     "next": "^14.2.26",
     "next-plausible": "^3.12.1",
     "prettier": "^3.5.3",