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>

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@iconify-json/hugeicons": "^1.2.4",
         "apexcharts": "^3.52.0",
         "deepmerge-ts": "^7.1.0",
         "flowbite": "^2.4.1",
@@ -261,6 +262,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/hugeicons": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@iconify-json/hugeicons/-/hugeicons-1.2.4.tgz",
+      "integrity": "sha512-Rx1I42/wwqNiWx7rdQxtFWWOF1/DT1IMPrNReBVJiZe7NIdGT6Zv6Jw5gayqUtv7lDmE8eRmgd6MYRoVJrbuoA==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/material-symbols": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.17.tgz",
@@ -308,7 +318,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
       "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@isaacs/cliui": {

package.json

@@ -10,6 +10,7 @@
     "postinstall": "flowbite-react patch"
   },
   "dependencies": {
+    "@iconify-json/hugeicons": "^1.2.4",
     "apexcharts": "^3.52.0",
     "deepmerge-ts": "^7.1.0",
     "flowbite": "^2.4.1",

tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
     ".flowbite-react\\class-list.json"
   ],
   plugins: [
-    addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands"]),
+    addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands", "hugeicons"]),
     flowbiteReact,
     require("tailwind-scrollbar")
   ],