mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-30 01:49:40 +05:00
move buttons to main control bar in player
This commit is contained in:
parent
6c3ce44c76
commit
3b99b9a173
GPG key ID:
858E8EE696525EED
5 changed files with 81 additions and 72 deletions
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
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="#fff"
|
||||
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>
|
||||
|
|
|
|||
22
package-lock.json
generated
22
package-lock.json
generated
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue