Skip to content

Commit

Permalink
Merge pull request #101 from lovegaoshi/dev
Browse files Browse the repository at this point in the history 
fix: lrc search input style
  • Loading branch information
@lovegaoshi
lovegaoshi authored Nov 26, 2024
2 parents 99b126d + 9648ff9 commit be9bbe4
Show file tree
Hide file tree
Showing 13 changed files with 1,351 additions and 1,877 deletions.
2 changes: 1 addition & 1 deletion azusa-player-mobile
Submodule azusa-player-mobile updated 337 files
72 changes: 36 additions & 36 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,18 @@
"compile": "tsc"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.4",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.25.9",
"@babel/preset-typescript": "^7.26.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
"@types/base-64": "^1.0.2",
"@types/chrome": "^0.0.271",
"@types/chrome": "^0.0.287",
"@types/he": "^1.2.3",
"@types/js-base64": "^3.3.1",
"@types/md5": "^2.3.5",
"@types/react": "^18.3.7",
"@types/react-dom": "^18.3.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/uuid": "^10.0.0",
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
Expand All @@ -43,24 +43,24 @@
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-typescript": "^3.6.3",
"eslint-import-resolver-webpack": "^0.13.9",
"eslint-plugin-import": "^2.30.0",
"eslint-plugin-jsx-a11y": "^6.10.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.36.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.6.0",
"html-webpack-plugin": "^5.6.3",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^2.9.1",
"mini-css-extract-plugin": "^2.9.2",
"node-sass": "^9.0.0",
"prettier": "^3.3.3",
"prettier": "^3.4.1",
"progress-bar-webpack-plugin": "^2.1.0",
"react-refresh": "^0.14.2",
"sass-loader": "^16.0.1",
"sass-loader": "^16.0.3",
"style-loader": "^4.0.0",
"tsconfig-paths-webpack-plugin": "^4.1.0",
"typescript": "^5.6.2",
"webpack": "^5.94.0",
"tsconfig-paths-webpack-plugin": "^4.2.0",
"typescript": "^5.7.2",
"webpack": "^5.96.1",
"webpack-cli": "^5.1.4",
"webpack-config-utils": "^2.3.1",
"webpack-dev-server": "^5.1.0"
Expand All @@ -70,28 +70,28 @@
"not dead"
],
"dependencies": {
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@emotion/react": "^11.13.5",
"@emotion/styled": "^11.13.5",
"@ffmpeg/core": "^0.12.6",
"@ffmpeg/ffmpeg": "^0.12.10",
"@ffmpeg/util": "^0.12.1",
"@fontsource/roboto": "^5.1.0",
"@fortawesome/fontawesome-free": "^6.6.0",
"@fortawesome/free-brands-svg-icons": "^6.6.0",
"@fortawesome/fontawesome-free": "^6.7.1",
"@fortawesome/free-brands-svg-icons": "^6.7.1",
"@hello-pangea/dnd": "^17.0.0",
"@mui/icons-material": "^6.1.0",
"@mui/icons-material": "^6.1.8",
"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
"@mui/material": "^6.1.0",
"@mui/styles": "^6.1.0",
"axios": "^1.7.7",
"@mui/material": "^6.1.8",
"@mui/styles": "^6.1.8",
"axios": "^1.7.8",
"base-64": "^1.0.0",
"base64-js": "^1.5.1",
"big-integer": "^1.6.52",
"bottleneck": "^2.19.5",
"buffer": "^6.0.3",
"cheerio": "^1.0.0",
"cross-fetch": "^4.0.0",
"crypto-browserify": "^3.12.0",
"crypto-browserify": "^3.12.1",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.13",
"dotenv-webpack": "^8.1.0",
Expand All @@ -101,8 +101,8 @@
"file-saver": "^2.0.5",
"fs": "^0.0.1-security",
"he": "^1.2.0",
"i18next": "^23.15.1",
"libmuse": "https://github.com/lovegaoshi/muse.git#commit=4dc2e5446ba2eff4547d91cd06c7843cdac4401a",
"i18next": "^23.16.8",
"libmuse": "https://github.com/lovegaoshi/muse.git#commit=0bffe2319baf825037bece6869d360d6d307eb72",
"material-ui-confirm": "^3.0.16",
"md5": "^2.3.0",
"notistack": "^3.0.1",
Expand All @@ -114,17 +114,17 @@
"react-click-n-hold": "^1.0.7",
"react-contexify": "^6.0.0",
"react-dom": "^18.3.1",
"react-hotkeys-hook": "^4.5.1",
"react-i18next": "^15.0.2",
"react-hotkeys-hook": "^4.6.1",
"react-i18next": "^15.1.2",
"react-jinke-music-player": "git+https://[email protected]/lovegaoshi/react-music-player.git",
"react-lrc": "^3.2.1",
"react-swipeable": "^7.0.1",
"react-swipeable": "^7.0.2",
"react-window": "^1.8.10",
"stream-browserify": "^3.0.0",
"util": "^0.12.5",
"uuid": "^10.0.0",
"youtubei.js": "^10.4.0",
"zustand": "^5.0.0-rc.2"
"uuid": "^11.0.3",
"youtubei.js": "^11.0.1",
"zustand": "^5.0.1"
},
"packageManager": "yarn@4.4.1"
"packageManager": "yarn@4.5.0"
}
87 changes: 33 additions & 54 deletions src/components/lyric/Lyric.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,6 @@ import useApp from '@stores/useApp';
import useLyric from '@hooks/useLyric';
import LyricSearchBar from './LyricSearchBar';

const styles = () => ({
inputOffset: {
height: 40,
width: 123,
},
inputLrc: {
height: 40,
width: 375,
},
inputSelect: {
height: 40,
width: 500,
},
});

interface Props {
currentAudio: NoxMediaChrome.RJKMAudio;
}
Expand Down Expand Up @@ -81,7 +66,7 @@ function LrcView({ lyricOffset, lrc, className }: LrcViewProps) {
);
}

export default withStyles(styles)((props: Props) => {
export default (props: Props) => {
const { colorTheme, ScrollBar } = useApp((state) => state.playerStyle);
const [songTitle, setSongTitle] = useState('');
const debouncedSongTitle = useDebouncedValue(songTitle, 1000);
Expand Down Expand Up @@ -124,35 +109,34 @@ export default withStyles(styles)((props: Props) => {
}}
/>
</Grid>
<Grid sx={mStyles.lrcInputGrid} size={12} container spacing={0}>
<TextField
sx={mStyles.lrcOffsetGrid}
type='number'
variant='outlined'
label='歌词补偿(毫秒)'
InputProps={{
className: classes.inputOffset,
}}
value={usedLyric.currentTimeOffset}
onChange={onLrcOffsetChange}
/>
<TextField
variant='outlined'
label='歌词搜索'
InputProps={{
className: classes.inputLrc,
}}
InputLabelProps={{
shrink: true,
}}
placeholder={songTitle}
value={songTitle}
onChange={(e) => setSongTitle(e.target.value)}
/>
</Grid>

<Grid sx={mStyles.lrcSearchBarGrid} size={12}>
<LyricSearchBar currentAudio={currentAudio} usedLyric={usedLyric} />
<Grid sx={mStyles.lrcInputGrid} size={12} container spacing={1}>
<Grid size={3}>
<TextField
sx={mStyles.lrcOffsetGrid}
type='number'
inputProps={mStyles.lrcOffsetInput}
variant='outlined'
label='歌词补偿(毫秒)'
value={usedLyric.currentTimeOffset}
onChange={onLrcOffsetChange}
/>
</Grid>
<Grid size={'grow'}>
<TextField
sx={mStyles.lrcSearchGrid}
variant='outlined'
label='歌词搜索'
placeholder={songTitle}
value={songTitle}
onChange={(e) => setSongTitle(e.target.value)}
/>
</Grid>
<Grid sx={mStyles.lrcSearchBarGrid} size={12}>
<LyricSearchBar
currentAudio={currentAudio}
usedLyric={usedLyric}
/>
</Grid>
</Grid>
</Grid>
</Grid>
Expand All @@ -165,7 +149,7 @@ export default withStyles(styles)((props: Props) => {
</Grid>
</Grid>
);
});
};

const mStyles = {
mainContainer: { maxHeight: '100vh', minHeight: '100vh', overflow: 'hidden' },
Expand All @@ -184,29 +168,24 @@ const mStyles = {
overflow: 'hidden',
},
lrcInputGrid: {
paddingTop: '12px',
align: 'center',
paddingTop: '8px',
paddingLeft: '2px',
overflow: 'hidden',
width: '500px',
},
lrcOffsetGrid: {
align: 'right',
paddingTop: '8px',
paddingRight: '2px',
overflow: 'hidden',
},
lrcOffsetInput: { step: '500' },
lrcSearchGrid: {
align: 'center',
paddingTop: '8px',
overflow: 'hidden',
maxWidth: 'fit-content',
width: '-webkit-fill-available',
},
lrcSearchBarGrid: {
align: 'center',
paddingTop: '8px',
paddingLeft: '2px',
overflow: 'hidden',
},
lrcGrid: {
paddingBottom: 10,
Expand Down
6 changes: 5 additions & 1 deletion src/components/lyric/LyricSearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function LyricSearchBar({ currentAudio, usedLyric }: Props) {
onChange={onOptionSet}
id='LyricSearchBar'
options={lrcOptions}
sx={{ width: 500 }}
sx={style}
size='small'
renderInput={(params) => <TextField {...params} label='歌词选择' />}
renderOption={(props, option) => (
Expand All @@ -41,3 +41,7 @@ export default function LyricSearchBar({ currentAudio, usedLyric }: Props) {
</div>
);
}

const style = {
width: '-webkit-fill-available',
};
10 changes: 3 additions & 7 deletions src/components/setting/PlayerSettingsDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@ import TabContext from '@mui/lab/TabContext';
import TabList from '@mui/lab/TabList';
import SettingsIcon from '@mui/icons-material/Settings';
import BuildIcon from '@mui/icons-material/Build';
import { useStore } from 'zustand';

import playerSettingStore from '@APM/stores/playerSettingStore';
import { useNoxSetting } from '@APM/stores/useApp';
import SETTING_TAB from './enums';
import ToolboxTab from './ToolboxTab';
import SettingTab from './SettingTab';
Expand All @@ -24,17 +23,14 @@ interface Props {
settings: NoxStorage.PlayerSettingDict;
}
export default function SettingsDialog({ onClose, openState }: Props) {
const playerSettings = useStore(
playerSettingStore,
(state) => state.playerSetting,
);
const playerSetting = useNoxSetting((state) => state.playerSetting);
const [tabValue, setTabValue] = React.useState('1');

const handleTabChange = (_event: React.SyntheticEvent, newValue: string) => {
setTabValue(newValue);
};

const handleClose = () => onClose(playerSettings);
const handleClose = () => onClose(playerSetting);

return (
<Dialog open={openState} onClose={handleClose}>
Expand Down
18 changes: 6 additions & 12 deletions src/components/setting/SettingTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import { Checkbox } from '@mui/material';
import FormControlLabel from '@mui/material/FormControlLabel';
import Tooltip from '@mui/material/Tooltip';
import TabPanel from '@mui/lab/TabPanel';
import { useStore } from 'zustand';
import { useTranslation } from 'react-i18next';

import playerSettingStore from '@APM/stores/playerSettingStore';
import { useNoxSetting } from '@APM/stores/useApp';
import SyncSetting from './SyncSetting';
import SkinSetting from './SkinSetting';
import SETTING_TAB from './enums';
Expand All @@ -26,26 +25,21 @@ function BooleanCheckbox({
callback,
}: BooleanCheckboxProps) {
const { t } = useTranslation();
const playerSettings = useStore(
playerSettingStore,
(state) => state.playerSetting,
);
const setPlayerSettings = useStore(
playerSettingStore,
(state) => state.setPlayerSetting,
);
const playerSetting = useNoxSetting((state) => state.playerSetting);
const setPlayerSetting = useNoxSetting((state) => state.setPlayerSetting);

return (
<Tooltip title={tooltip ?? t(`${settingCategory}.${settingKey}Desc`)}>
<FormControlLabel
control={
<Checkbox
onChange={(e) => {
setPlayerSettings({ [settingKey]: e.target.checked });
setPlayerSetting({ [settingKey]: e.target.checked });
callback?.();
}}
/>
}
checked={playerSettings[settingKey]}
checked={playerSetting[settingKey]}
label={label ?? t(`${settingCategory}.${settingKey}Name`)}
/>
</Tooltip>
Expand Down
Loading

0 comments on commit be9bbe4

Please sign in to comment.