mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-30 09:59:41 +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;
|
position: absolute;
|
||||||
height: calc(2 * var(--base));
|
height: calc(2 * var(--base));
|
||||||
line-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));
|
bottom: calc(1 * var(--base));
|
||||||
left: calc(1.25 * var(--base));
|
left: var(--base);
|
||||||
right: var(--base);
|
right: var(--base);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -65,11 +56,6 @@
|
||||||
transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
|
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 {
|
.svg {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: var(--_primary-color, #fff);
|
stroke: var(--_primary-color, #fff);
|
||||||
|
|
@ -169,7 +155,7 @@
|
||||||
min-height: var(--media-settings-menu-min-height, 170px);
|
min-height: var(--media-settings-menu-min-height, 170px);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
bottom: calc(4 * var(--base));
|
bottom: calc(3 * var(--base));
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-block: calc(0.15 * var(--base));
|
padding-block: calc(0.15 * var(--base));
|
||||||
padding-inline: calc(0.6 * var(--base));
|
padding-inline: calc(0.6 * var(--base));
|
||||||
|
|
|
||||||
|
|
@ -427,6 +427,62 @@ export const ReleasePlayerCustom = (props: {
|
||||||
className={`${Styles["media-preview-time-display"]}`}
|
className={`${Styles["media-preview-time-display"]}`}
|
||||||
></MediaPreviewTimeDisplay>
|
></MediaPreviewTimeDisplay>
|
||||||
</MediaTimeRange>
|
</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
|
<MediaSeekForwardButton
|
||||||
className={`${Styles["media-button"]}`}
|
className={`${Styles["media-button"]}`}
|
||||||
seekOffset={90}
|
seekOffset={90}
|
||||||
|
|
@ -458,11 +514,16 @@ export const ReleasePlayerCustom = (props: {
|
||||||
height="24"
|
height="24"
|
||||||
viewBox="-8 -8 40 40"
|
viewBox="-8 -8 40 40"
|
||||||
>
|
>
|
||||||
<path
|
<g
|
||||||
fill="#fff"
|
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>
|
</svg>
|
||||||
</MediaSettingsMenuButton>
|
</MediaSettingsMenuButton>
|
||||||
<MediaSettingsMenuButton
|
<MediaSettingsMenuButton
|
||||||
|
|
@ -611,46 +672,6 @@ export const ReleasePlayerCustom = (props: {
|
||||||
</svg>
|
</svg>
|
||||||
</MediaFullscreenButton>
|
</MediaFullscreenButton>
|
||||||
</MediaControlBar>
|
</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>
|
</MediaController>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
22
package-lock.json
generated
22
package-lock.json
generated
|
|
@ -9,7 +9,6 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iconify-json/hugeicons": "^1.2.4",
|
|
||||||
"apexcharts": "^3.52.0",
|
"apexcharts": "^3.52.0",
|
||||||
"deepmerge-ts": "^7.1.0",
|
"deepmerge-ts": "^7.1.0",
|
||||||
"flowbite": "^2.4.1",
|
"flowbite": "^2.4.1",
|
||||||
|
|
@ -33,6 +32,7 @@
|
||||||
"@iconify-json/fa6-brands": "^1.1.21",
|
"@iconify-json/fa6-brands": "^1.1.21",
|
||||||
"@iconify-json/material-symbols": "^1.1.83",
|
"@iconify-json/material-symbols": "^1.1.83",
|
||||||
"@iconify-json/mdi": "^1.1.67",
|
"@iconify-json/mdi": "^1.1.67",
|
||||||
|
"@iconify-json/solar": "^1.2.2",
|
||||||
"@iconify-json/twemoji": "^1.1.15",
|
"@iconify-json/twemoji": "^1.1.15",
|
||||||
"@iconify/tailwind": "^1.1.1",
|
"@iconify/tailwind": "^1.1.1",
|
||||||
"@types/node": "20.14.12",
|
"@types/node": "20.14.12",
|
||||||
|
|
@ -262,15 +262,6 @@
|
||||||
"@iconify/types": "*"
|
"@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": {
|
"node_modules/@iconify-json/material-symbols": {
|
||||||
"version": "1.2.17",
|
"version": "1.2.17",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.17.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.17.tgz",
|
||||||
|
|
@ -291,6 +282,16 @@
|
||||||
"@iconify/types": "*"
|
"@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": {
|
"node_modules/@iconify-json/twemoji": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify-json/twemoji/-/twemoji-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify-json/twemoji/-/twemoji-1.2.2.tgz",
|
||||||
|
|
@ -318,6 +319,7 @@
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
|
||||||
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
|
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
|
||||||
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@isaacs/cliui": {
|
"node_modules/@isaacs/cliui": {
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
"postinstall": "flowbite-react patch"
|
"postinstall": "flowbite-react patch"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iconify-json/hugeicons": "^1.2.4",
|
|
||||||
"apexcharts": "^3.52.0",
|
"apexcharts": "^3.52.0",
|
||||||
"deepmerge-ts": "^7.1.0",
|
"deepmerge-ts": "^7.1.0",
|
||||||
"flowbite": "^2.4.1",
|
"flowbite": "^2.4.1",
|
||||||
|
|
@ -34,6 +33,7 @@
|
||||||
"@iconify-json/fa6-brands": "^1.1.21",
|
"@iconify-json/fa6-brands": "^1.1.21",
|
||||||
"@iconify-json/material-symbols": "^1.1.83",
|
"@iconify-json/material-symbols": "^1.1.83",
|
||||||
"@iconify-json/mdi": "^1.1.67",
|
"@iconify-json/mdi": "^1.1.67",
|
||||||
|
"@iconify-json/solar": "^1.2.2",
|
||||||
"@iconify-json/twemoji": "^1.1.15",
|
"@iconify-json/twemoji": "^1.1.15",
|
||||||
"@iconify/tailwind": "^1.1.1",
|
"@iconify/tailwind": "^1.1.1",
|
||||||
"@types/node": "20.14.12",
|
"@types/node": "20.14.12",
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ module.exports = {
|
||||||
".flowbite-react\\class-list.json"
|
".flowbite-react\\class-list.json"
|
||||||
],
|
],
|
||||||
plugins: [
|
plugins: [
|
||||||
addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands", "hugeicons"]),
|
addIconSelectors(["mdi", "material-symbols", "twemoji", "fa6-brands", "solar"]),
|
||||||
flowbiteReact,
|
flowbiteReact,
|
||||||
require("tailwind-scrollbar")
|
require("tailwind-scrollbar")
|
||||||
],
|
],
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue