@@ -483,8 +488,8 @@ export function AddVoicePlate({ onSuccess }: AddVoicePlateProps) {
Загрузите примеры голоса
для клонирования
- аудиофайлы в формате .mp3 или{' '}
- .wav, не более{' '}
+ аудиофайлы в формате .mp3,{' '} или {' '}
+ .wav не более{' '}
10MB каждый
e.stopPropagation()}>
@@ -36,6 +36,24 @@
}
}
+/* мобилка: поповер слева от кнопки — стрелка справа кнопки, смотрит на неё */
+.deleteConfirmPaperMobile {
+ margin-bottom: 0;
+ margin-right: 6px;
+
+ &::after {
+ bottom: auto;
+ left: auto;
+ right: -6px;
+ top: 50%;
+ transform: translateY(-50%);
+ border-top: 6px solid transparent;
+ border-bottom: 6px solid transparent;
+ border-left: 6px solid #4b4b4b;
+ border-right: none;
+ }
+}
+
.deleteConfirmContent {
display: flex;
align-items: center;
@@ -1,5 +1,4 @@
import { Pause, PlayArrow } from '@mui/icons-material'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
import {
Box,
IconButton,
@@ -10,10 +9,13 @@ import {
SelectChangeEvent,
Stack,
Typography,
+ useMediaQuery,
} from '@mui/material'
import type { MenuProps } from '@mui/material/Menu'
import Image from 'next/image'
-import { useCallback, useEffect, useRef, useState, type SVGProps } from 'react'
+import { forwardRef, useCallback, useEffect, useRef, useState, type ComponentProps, type SVGProps } from 'react'
+
+import VoiceSelectArrowsSvg from '#/assets/svg/voice-select-arrows.svg?react'
import {
deleteMediaVoice,
@@ -33,6 +35,13 @@ import styles from './voice-clone-select.module.scss'
const VOICE_TITLE_DISPLAY_MAX = 15
+/** Иконка раскрытия селекта (Frame 48097616.svg), ref нужен для MUI Select IconComponent */
+const VoiceSelectArrowsIcon = forwardRef>(
+ function VoiceSelectArrowsIcon(props, ref) {
+ return
+ }
+)
+
function formatVoiceSelectLabel(full: string): { text: string; tooltip?: string } {
if (full.length <= VOICE_TITLE_DISPLAY_MAX) return { text: full }
return { text: `${full.slice(0, VOICE_TITLE_DISPLAY_MAX)}…`, tooltip: full }
@@ -41,7 +50,7 @@ function formatVoiceSelectLabel(full: string): { text: string; tooltip?: string
function VoiceSelectLabel({ full }: { full: string }) {
const { text, tooltip } = formatVoiceSelectLabel(full)
const typo = (
-
+
{text}
)
@@ -125,10 +134,11 @@ const selectSx = {
borderRadius: '13px',
backgroundColor: '#4B4B4B',
border: '2px solid #40404E;',
- color: '#A6A5A5',
+ color: '#FFFFFF',
'.MuiOutlinedInput-root': {
minHeight: VOICE_SELECT_ROW_HEIGHT,
height: VOICE_SELECT_ROW_HEIGHT,
+ color: '#FFFFFF',
},
'.MuiSelect-select': {
display: 'flex',
@@ -138,9 +148,13 @@ const selectSx = {
paddingTop: 0,
paddingBottom: 0,
boxSizing: 'border-box',
+ color: '#FFFFFF',
},
'.MuiSelect-icon': {
- color: '#A6A5A5',
+ marginRight: 1,
+ color: '#FFFFFF',
+ width: 18,
+ height: 18,
},
'&& fieldset': {
border: '0px solid transparent',
@@ -172,10 +186,10 @@ const VOICE_SELECT_MENU_PROPS: Partial = {
boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 32px rgba(0, 0, 0, 0.16)',
},
},
- MenuListProps: {
+ MenuListProps: {
className: 'smallScroll',
sx: {
- color: '#A6A5A5',
+ color: '#FFFFFF',
backgroundColor: '#151518',
maxHeight: VOICE_SELECT_MENU_LIST_MAX_HEIGHT,
overflowY: 'auto',
@@ -210,6 +224,7 @@ export function VoiceCloneSelect({
onVoiceListChanged,
onDeletedVoice,
}: Props) {
+ const isMobile = useMediaQuery('(max-width: 768px)', { noSsr: true })
const { showMessage } = useShowDataStore()
const all = [...voices, ...presets]
const audioRef = useRef(null)
@@ -453,13 +468,21 @@ export function VoiceCloneSelect({
open={Boolean(deleteConfirm)}
anchorEl={deleteConfirm?.anchorEl ?? null}
onClose={() => setDeleteConfirm(null)}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+ anchorOrigin={
+ isMobile
+ ? { vertical: 'center', horizontal: 'left' }
+ : { vertical: 'top', horizontal: 'center' }
+ }
+ transformOrigin={
+ isMobile
+ ? { vertical: 'center', horizontal: 'right' }
+ : { vertical: 'bottom', horizontal: 'center' }
+ }
disableAutoFocus
disableEnforceFocus
sx={{ zIndex: 1600 }}
PaperProps={{
- className: styles.deleteConfirmPaper,
+ className: c(styles.deleteConfirmPaper, isMobile && styles.deleteConfirmPaperMobile),
}}
>
{deleteConfirm ? (
@@ -486,14 +509,14 @@ export function VoiceCloneSelect({