feat: add skip bar

app/components/ReleasePlayer/MediaPlayer.module.css

@@ -38,11 +38,20 @@
   position: absolute;
   height: calc(2 * var(--base));
   line-height: calc(2 * var(--base));
-  bottom: calc(1 * var(--base));
+  bottom: calc(2 * var(--base));
   left: var(--base);
   right: var(--base);
 }
 
+.media-skip-bar {
+  position: absolute;
+  height: calc(1 * var(--base));
+  line-height: calc(2 * var(--base));
+  bottom: calc(1 * var(--base));
+  left: calc(1.25 * var(--base));
+  right: var(--base);
+}
+
 .media-button {
   --media-control-hover-background: var(--_secondary-color);
   --media-tooltip-background: rgb(28 28 28 / 0.24);
@@ -56,6 +65,11 @@
   transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
 }
 
+.media-skip-bar .media-button {
+  width: calc(1.5 * var(--base));
+  height: calc(1.5 * var(--base));
+}
+
 .svg {
   fill: none;
   stroke: var(--_primary-color, #fff);
@@ -122,7 +136,7 @@
   min-height: var(--media-settings-menu-min-height, 170px);
   position: absolute;
   right: 10px;
-  bottom: calc(3 * var(--base));
+  bottom: calc(4 * var(--base));
   padding: 0;
   padding-block: calc(0.15 * var(--base));
   padding-inline: calc(0.6 * var(--base));

app/components/ReleasePlayer/ReleasePlayerCustom.tsx

@@ -20,6 +20,7 @@ import {
   MediaChromeDialog,
   MediaLoadingIndicator,
   MediaPosterImage,
+  MediaSeekBackwardButton,
 } from "media-chrome/react";
 import {
   MediaPlaybackRateMenu,
@@ -400,7 +401,10 @@ export const ReleasePlayerCustom = (props: {
                 className={`${Styles["media-preview-time-display"]}`}
               ></MediaPreviewTimeDisplay>
             </MediaTimeRange>
-            <MediaSeekForwardButton className={`${Styles["media-button"]}`} seekOffset={90}>
+            <MediaSeekForwardButton
+              className={`${Styles["media-button"]}`}
+              seekOffset={90}
+            >
               <div slot="tooltip-content">Пропустить 1.5 минуты</div>
               <svg
                 {...({ slot: "icon" } as any)}
@@ -581,6 +585,46 @@ export const ReleasePlayerCustom = (props: {
               </svg>
             </MediaFullscreenButton>
           </MediaControlBar>
+          <div className={`flex gap-2 ${Styles["media-skip-bar"]}`}>
+            <MediaSeekBackwardButton
+              className={`${Styles["media-button"]}`}
+              noTooltip
+              seekOffset={10}
+            >
+              <div
+                slot="icon"
+                className="w-[var(--base)] h-[var(--base)] iconify hugeicons--go-backward-10-sec"
+              ></div>
+            </MediaSeekBackwardButton>
+            <MediaSeekBackwardButton
+              className={`${Styles["media-button"]}`}
+              noTooltip
+            >
+              <div
+                slot="icon"
+                className="w-[var(--base)] h-[var(--base)] iconify hugeicons--go-backward-30-sec"
+              ></div>
+            </MediaSeekBackwardButton>
+            <MediaSeekForwardButton
+              className={`${Styles["media-button"]}`}
+              noTooltip
+            >
+              <div
+                slot="icon"
+                className="w-[var(--base)] h-[var(--base)] iconify hugeicons--go-forward-30-sec"
+              ></div>
+            </MediaSeekForwardButton>
+            <MediaSeekForwardButton
+              className={`${Styles["media-button"]}`}
+              noTooltip
+              seekOffset={10}
+            >
+              <div
+                slot="icon"
+                className="w-[var(--base)] h-[var(--base)] iconify hugeicons--go-forward-10-sec"
+              ></div>
+            </MediaSeekForwardButton>
+          </div>
         </MediaController>
       </div>
     </Card>