move buttons to main control bar in player

app/components/ReleasePlayer/MediaPlayer.module.css

@@ -38,17 +38,8 @@
   position: absolute;
   height: calc(2 * var(--base));
   line-height: calc(2 * 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));
+  left: var(--base);
   right: var(--base);
 }
 
@@ -65,11 +56,6 @@
   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);
@@ -169,7 +155,7 @@
   min-height: var(--media-settings-menu-min-height, 170px);
   position: absolute;
   right: 10px;
-  bottom: calc(4 * var(--base));
+  bottom: calc(3 * var(--base));
   padding: 0;
   padding-block: calc(0.15 * var(--base));
   padding-inline: calc(0.6 * var(--base));

app/components/ReleasePlayer/ReleasePlayerCustom.tsx

@@ -427,6 +427,62 @@ export const ReleasePlayerCustom = (props: {
                 className={`${Styles["media-preview-time-display"]}`}
               ></MediaPreviewTimeDisplay>
             </MediaTimeRange>
+            <MediaSeekBackwardButton
+              className={`${Styles["media-button"]}`}
+              seekOffset={10}
+            >
+              <div slot="tooltip-content">Вернуться на 10 секунд</div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                {...({ slot: "icon" } as any)}
+                className={`${Styles["svg"]}`}
+                width="24"
+                height="24"
+                viewBox="-8 -8 40 40"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linejoin="round"
+                    d="M14 4.5L12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-4.1 2.468-7.625 6-9.168"
+                  />
+                  <path stroke-linejoin="round" d="m7.5 10.5l2.5-2v7" />
+                  <path d="M12.5 13.75v-3.5a1.75 1.75 0 1 1 3.5 0v3.5a1.75 1.75 0 1 1-3.5 0Z" />
+                </g>
+              </svg>
+            </MediaSeekBackwardButton>
+            <MediaSeekForwardButton
+              className={`${Styles["media-button"]}`}
+              seekOffset={10}
+            >
+              <div slot="tooltip-content">Пропустить 10 секунд</div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                {...({ slot: "icon" } as any)}
+                className={`${Styles["svg"]}`}
+                width="24"
+                height="24"
+                viewBox="-8 -8 40 40"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linejoin="round"
+                    d="M10 4.5L12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10c0-4.1-2.468-7.625-6-9.168"
+                  />
+                  <path stroke-linejoin="round" d="m7.5 10.5l2.5-2v7" />
+                  <path d="M12.5 13.75v-3.5a1.75 1.75 0 1 1 3.5 0v3.5a1.75 1.75 0 1 1-3.5 0Z" />
+                </g>
+              </svg>
+            </MediaSeekForwardButton>
             <MediaSeekForwardButton
               className={`${Styles["media-button"]}`}
               seekOffset={90}
@@ -458,11 +514,16 @@ export const ReleasePlayerCustom = (props: {
                 height="24"
                 viewBox="-8 -8 40 40"
               >
-                <path
+                <g
                   fill="#fff"
-                  fill-rule="evenodd"
+                  stroke="#fff"
-                  d="M9.25 21.75c-.41 0-.75-.34-.75-.75V3c0-.41.34-.75.75-.75s.75.34.75.75v18c0 .41-.34.75-.75.75m-3-4c-.41 0-.75-.34-.75-.75V7c0-.41.34-.75.75-.75S7 6.59 7 7v10c0 .41-.34.75-.75.75m5.25.25c0 .41.34.75.75.75s.75-.34.75-.75V6c0-.41-.34-.75-.75-.75s-.75.34-.75.75zm3.75-2.25c-.41 0-.75-.34-.75-.75V9c0-.41.34-.75.75-.75s.75.34.75.75v6c0 .41-.34.75-.75.75M17.5 17c0 .41.34.75.75.75s.75-.34.75-.75V7c0-.41-.34-.75-.75-.75s-.75.34-.75.75zm3.75-3.25c-.41 0-.75-.34-.75-.75v-2c0-.41.34-.75.75-.75s.75.34.75.75v2c0 .41-.34.75-.75.75M2.5 13c0 .41.34.75.75.75S4 13.41 4 13v-2c0-.41-.34-.75-.75-.75s-.75.34-.75.75z"
+                  stroke-linecap="round"
-                />
+                  stroke-width="1.5"
+                >
+                  <path d="M12 4v16" />
+                  <path d="M16 7v10M8 7v10" opacity="0.5" />
+                  <path d="M20 11v2M4 11v2" />
+                </g>
               </svg>
             </MediaSettingsMenuButton>
             <MediaSettingsMenuButton
@@ -611,46 +672,6 @@ 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,7 +9,6 @@
       "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",
@@ -33,6 +32,7 @@
         "@iconify-json/fa6-brands": "^1.1.21",
         "@iconify-json/material-symbols": "^1.1.83",
         "@iconify-json/mdi": "^1.1.67",
+        "@iconify-json/solar": "^1.2.2",
         "@iconify-json/twemoji": "^1.1.15",
         "@iconify/tailwind": "^1.1.1",
         "@types/node": "20.14.12",
@@ -262,15 +262,6 @@
         "@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",
@@ -291,6 +282,16 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/solar": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/solar/-/solar-1.2.2.tgz",
+      "integrity": "sha512-lcTb6DWL4HZObiY1W3fHfuxxuQHUc6CFHFeywKEx7Ry0k+dU6POZCMC7oVLr0F8vuf+KgaQ3oOoGO/yFzOwrNg==",
+      "dev": true,
+      "license": "CC-BY-4.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/twemoji": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/twemoji/-/twemoji-1.2.2.tgz",
@@ -318,6 +319,7 @@
       "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,7 +10,6 @@
     "postinstall": "flowbite-react patch"
   },
   "dependencies": {
-    "@iconify-json/hugeicons": "^1.2.4",
     "apexcharts": "^3.52.0",
     "deepmerge-ts": "^7.1.0",
     "flowbite": "^2.4.1",
@@ -34,6 +33,7 @@
     "@iconify-json/fa6-brands": "^1.1.21",
     "@iconify-json/material-symbols": "^1.1.83",
     "@iconify-json/mdi": "^1.1.67",
+    "@iconify-json/solar": "^1.2.2",
     "@iconify-json/twemoji": "^1.1.15",
     "@iconify/tailwind": "^1.1.1",
     "@types/node": "20.14.12",

tailwind.config.js

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