From eef6a189d84bd543a10927daa786d78f4361717d Mon Sep 17 00:00:00 2001 From: lyswhut Date: Sat, 23 Dec 2023 14:34:41 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EAPP=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E5=AD=97=E4=BD=93=E9=98=B4=E5=BD=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- publish/changeLog.md | 1 + src/components/common/Icon.tsx | 31 ++++++++-- src/components/common/Text.tsx | 60 ++++++++++++++----- src/config/constant.ts | 2 +- src/config/defaultSetting.ts | 7 ++- src/lang/en_us.json | 1 + src/lang/zh_cn.json | 1 + src/navigation/navigation.ts | 11 ---- src/screens/Home/Vertical/Main.tsx | 6 ++ .../Home/Views/Mylist/MusicList/ListMenu.tsx | 2 +- .../Setting/settings/Theme/IsDynamicBg.tsx | 2 +- .../Setting/settings/Theme/IsFontShadow.tsx | 29 +++++++++ .../Views/Setting/settings/Theme/index.tsx | 2 + src/screens/PlayDetail/Horizontal/Lyric.tsx | 2 +- src/screens/PlayDetail/Vertical/Lyric.tsx | 2 +- .../PlayDetail/Vertical/Player/index.tsx | 14 +---- src/store/theme/hook.ts | 21 ++++++- src/types/app_setting.d.ts | 5 ++ 18 files changed, 148 insertions(+), 51 deletions(-) create mode 100644 src/screens/Home/Views/Setting/settings/Theme/IsFontShadow.tsx diff --git a/publish/changeLog.md b/publish/changeLog.md index 83a3b87..4c72aae 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -5,6 +5,7 @@ - 新增实验性的添加本地歌曲到我的收藏支持，与PC端类似，在我的收藏的列表菜单中选择歌曲目录，将添加所选目录下的所有歌曲，目前支持mp3/flac/ogg/wav等格式 - 新增歌曲标签编辑功能，允许编辑本地源且文件歌曲存在的歌曲标签信息 - 新增动态背景，默认关闭，启用后将使用当前歌曲封面做APP背景 +- 新增APP全局字体阴影，默认开启，可到设置-主题设置关闭 ### 优化 diff --git a/src/components/common/Icon.tsx b/src/components/common/Icon.tsx index 7a8dd73..56f1385 100644 --- a/src/components/common/Icon.tsx +++ b/src/components/common/Icon.tsx @@ -1,8 +1,9 @@ import { createIconSetFromIcoMoon } from 'react-native-vector-icons' import icoMoonConfig from '@/resources/fonts/selection.json' import { scaleSizeW } from '@/utils/pixelRatio' -import { type ComponentProps } from 'react' -import { useTheme } from '@/store/theme/hook' +import { memo, type ComponentProps } from 'react' +import { useTextShadow, useTheme } from '@/store/theme/hook' +import { StyleSheet, type StyleProp, type TextStyle } from 'react-native' // import IconAntDesign from 'react-native-vector-icons/AntDesign' // import IconEntypo from 'react-native-vector-icons/Entypo' @@ -27,11 +28,31 @@ const IcoMoon = createIconSetFromIcoMoon(icoMoonConfig) type IconType = ReturnType -export const Icon = ({ size = 15, rawSize, color, ...props }: ComponentProps & { rawSize?: number }) => { - const theme = useTheme() - return +interface IconProps extends Omit, 'style'> { + style?: StyleProp + rawSize?: number } +export const Icon = memo(({ size = 15, rawSize, color, style, ...props }: IconProps) => { + const theme = useTheme() + const textShadow = useTextShadow() + const newStyle = textShadow ? StyleSheet.compose({ + textShadowColor: theme['c-primary-alpha-700'], + textShadowOffset: { width: 0, height: 0.2 }, + textShadowRadius: 2, + }, style) : style + return ( + + ) +}) + + export { // IconAntDesign, // IconEntypo, diff --git a/src/components/common/Text.tsx b/src/components/common/Text.tsx index c9ac45d..547d8e2 100644 --- a/src/components/common/Text.tsx +++ b/src/components/common/Text.tsx @@ -1,6 +1,6 @@ import { type ComponentProps } from 'react' import { Text, type TextProps as _TextProps, StyleSheet, Animated, type ColorValue, type TextStyle } from 'react-native' -import { useTheme } from '@/store/theme/hook' +import { useTextShadow, useTheme } from '@/store/theme/hook' import { setSpText } from '@/utils/pixelRatio' import { useAnimateColor } from '@/utils/hooks/useAnimateColor' import { DEFAULT_DURATION, useAnimateNumber } from '@/utils/hooks/useAnimateNumber' @@ -31,10 +31,23 @@ export interface TextProps extends _TextProps { export default ({ style, size = 15, color, children, ...props }: TextProps) => { const theme = useTheme() + const textShadow = useTextShadow() + style = StyleSheet.compose(textShadow ? { + fontFamily: 'System', + textShadowColor: theme['c-primary-alpha-700'], + textShadowOffset: { width: 0, height: 0.2 }, + textShadowRadius: 2, + fontSize: setSpText(size), + color: color ?? theme['c-font'], + } : { + fontFamily: 'System', + fontSize: setSpText(size), + color: color ?? theme['c-font'], + }, style) return ( {children} ) @@ -52,13 +65,21 @@ export interface AnimatedTextProps extends _AnimatedTextProps { } export const AnimatedText = ({ style, size = 15, color, children, ...props }: AnimatedTextProps) => { const theme = useTheme() + const textShadow = useTextShadow() + style = StyleSheet.compose(textShadow ? { + fontFamily: 'System', + textShadowColor: theme['c-primary-alpha-700'], + textShadowOffset: { width: 0, height: 0.2 }, + textShadowRadius: 2, + fontSize: setSpText(size), + color: color ?? theme['c-font'], + } : { + fontFamily: 'System', + fontSize: setSpText(size), + color: color ?? theme['c-font'], + }, style as TextStyle) - return ( - {children} - ) + return {children} } @@ -79,14 +100,25 @@ export interface AnimatedColorTextProps extends _AnimatedTextProps { } export const AnimatedColorText = ({ style, size = 15, opacity: _opacity, color: _color, children, ...props }: AnimatedColorTextProps) => { const theme = useTheme() + const textShadow = useTextShadow() const [color] = useAnimateColor(_color ?? theme['c-font']) const [opacity] = useAnimateNumber(_opacity ?? 1, DEFAULT_DURATION, false) - return ( - {children} - ) + style = StyleSheet.compose(textShadow ? { + fontFamily: 'System', + textShadowColor: theme['c-primary-alpha-700'], + textShadowOffset: { width: 0, height: 0.2 }, + textShadowRadius: 2, + fontSize: setSpText(size), + color: color as unknown as ColorValue, + opacity, + } : { + fontFamily: 'System', + fontSize: setSpText(size), + color: color as unknown as ColorValue, + opacity, + }, style as TextStyle) + + return {children} } diff --git a/src/config/constant.ts b/src/config/constant.ts index 1b1b1c0..284274a 100644 --- a/src/config/constant.ts +++ b/src/config/constant.ts @@ -30,7 +30,7 @@ export enum COMPONENT_IDS { export enum NAV_SHEAR_NATIVE_IDS { playDetail_pic = 'playDetail_pic', playDetail_header = 'playDetail_header', - playDetail_pageIndicator = 'playDetail_pageIndicator', + // playDetail_pageIndicator = 'playDetail_pageIndicator', playDetail_player = 'playDetail_player', songlistDetail_pic = 'songlistDetail_pic', songlistDetail_title = 'songlistDetail_title', diff --git a/src/config/defaultSetting.ts b/src/config/defaultSetting.ts index 4ff2748..1334e8e 100644 --- a/src/config/defaultSetting.ts +++ b/src/config/defaultSetting.ts @@ -30,9 +30,9 @@ const defaultSetting: LX.AppSetting = { // 'playDetail.isZoomActiveLrc': false, // 'playDetail.isShowLyricProgressSetting': false, - 'playDetail.style.align': 'center', - 'playDetail.vertical.style.lrcFontSize': 176, - 'playDetail.horizontal.style.lrcFontSize': 180, + 'playDetail.style.align': 'left', + 'playDetail.vertical.style.lrcFontSize': 210, + 'playDetail.horizontal.style.lrcFontSize': 220, 'playDetail.isShowLyricProgressSetting': false, 'desktopLyric.enable': false, @@ -71,6 +71,7 @@ const defaultSetting: LX.AppSetting = { 'theme.darkId': 'black', 'theme.hideBgDark': false, 'theme.dynamicBg': false, + 'theme.fontShadow': true, } diff --git a/src/lang/en_us.json b/src/lang/en_us.json index ef710b1..03a24a7 100644 --- a/src/lang/en_us.json +++ b/src/lang/en_us.json @@ -264,6 +264,7 @@ "setting_basic_theme": "Theme", "setting_basic_theme_auto_theme": "Follow the system light and dark mode to switch themes", "setting_basic_theme_dynamic_bg": "Use dynamic backgrounds", + "setting_basic_theme_font_shadow": "Enable font shadow", "setting_basic_theme_hide_bg_dark": "Hide black theme", "setting_basic_theme_more_btn_show": "Expand themes", "setting_dislike_list_input_tip": "song name@artist name\nSong name\n@ singer name", diff --git a/src/lang/zh_cn.json b/src/lang/zh_cn.json index 2c0c6ee..ea1fb8b 100644 --- a/src/lang/zh_cn.json +++ b/src/lang/zh_cn.json @@ -264,6 +264,7 @@ "setting_basic_theme": "主题颜色", "setting_basic_theme_auto_theme": "跟随系统亮、暗模式切换主题", "setting_basic_theme_dynamic_bg": "使用动态背景", + "setting_basic_theme_font_shadow": "启用字体阴影", "setting_basic_theme_hide_bg_dark": "隐藏黑色主题背景", "setting_basic_theme_more_btn_show": "更多主题", "setting_dislike_list_input_tip": "歌曲名@歌手名\n歌曲名\n@歌手名", diff --git a/src/navigation/navigation.ts b/src/navigation/navigation.ts index 7c534f8..11b7300 100644 --- a/src/navigation/navigation.ts +++ b/src/navigation/navigation.ts @@ -165,17 +165,6 @@ export function pushPlayDetailScreen(componentId: string) { duration: 300, }, }, - { - id: NAV_SHEAR_NATIVE_IDS.playDetail_pageIndicator, - alpha: { - from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1 - duration: 300, - }, - translationX: { - from: -32, // Animate translationY from 16dp to 0dp - duration: 300, - }, - }, { id: NAV_SHEAR_NATIVE_IDS.playDetail_player, alpha: { diff --git a/src/screens/Home/Vertical/Main.tsx b/src/screens/Home/Vertical/Main.tsx index 8972dd1..4981994 100644 --- a/src/screens/Home/Vertical/Main.tsx +++ b/src/screens/Home/Vertical/Main.tsx @@ -13,6 +13,7 @@ import { setNavActiveId } from '@/core/common' const hideKeys = [ 'list.isShowAlbumName', 'list.isShowInterval', + 'theme.fontShadow', ] as Readonly> const SearchPage = () => { @@ -71,14 +72,19 @@ const SongListPage = () => { if (currentId != 'nav_setting') return setVisible(false) } + const handleConfigUpdated = (keys: Array) => { + if (keys.some(k => hideKeys.includes(k))) handleHide() + } global.state_event.on('navActiveIdUpdated', handleNavIdUpdate) global.state_event.on('themeUpdated', handleHide) global.state_event.on('languageChanged', handleHide) + global.state_event.on('configUpdated', handleConfigUpdated) return () => { global.state_event.off('navActiveIdUpdated', handleNavIdUpdate) global.state_event.off('themeUpdated', handleHide) global.state_event.off('languageChanged', handleHide) + global.state_event.on('configUpdated', handleConfigUpdated) } }, []) diff --git a/src/screens/Home/Views/Mylist/MusicList/ListMenu.tsx b/src/screens/Home/Views/Mylist/MusicList/ListMenu.tsx index 63ed1fc..fdaca7a 100644 --- a/src/screens/Home/Views/Mylist/MusicList/ListMenu.tsx +++ b/src/screens/Home/Views/Mylist/MusicList/ListMenu.tsx @@ -73,7 +73,7 @@ export default forwardRef((props, ref) => { if (musicInfo.source == 'local') menu.splice(4, 0, { action: 'editMetadata', disabled: !edit_metadata, label: t('edit_metadata') }) setMenus(menu) void Promise.all([hasEditMetadata(musicInfo)]).then(([_edit_metadata]) => { - console.log(_edit_metadata) + // console.log(_edit_metadata) let isUpdated = true if (edit_metadata != _edit_metadata) { edit_metadata = _edit_metadata diff --git a/src/screens/Home/Views/Setting/settings/Theme/IsDynamicBg.tsx b/src/screens/Home/Views/Setting/settings/Theme/IsDynamicBg.tsx index 39be67d..cc4a1b5 100644 --- a/src/screens/Home/Views/Setting/settings/Theme/IsDynamicBg.tsx +++ b/src/screens/Home/Views/Setting/settings/Theme/IsDynamicBg.tsx @@ -25,6 +25,6 @@ export default memo(() => { const styles = createStyle({ content: { marginTop: 5, - marginBottom: 15, + // marginBottom: 15, }, }) diff --git a/src/screens/Home/Views/Setting/settings/Theme/IsFontShadow.tsx b/src/screens/Home/Views/Setting/settings/Theme/IsFontShadow.tsx new file mode 100644 index 0000000..2d51386 --- /dev/null +++ b/src/screens/Home/Views/Setting/settings/Theme/IsFontShadow.tsx @@ -0,0 +1,29 @@ +import { memo } from 'react' +import { View } from 'react-native' + +import CheckBoxItem from '../../components/CheckBoxItem' +import { createStyle } from '@/utils/tools' +import { useI18n } from '@/lang' +import { updateSetting } from '@/core/common' +import { useSettingValue } from '@/store/setting/hook' + +export default memo(() => { + const t = useI18n() + const isFontShadow = useSettingValue('theme.fontShadow') + const setIsFontShadow = (isFontShadow: boolean) => { + updateSetting({ 'theme.fontShadow': isFontShadow }) + } + + return ( + + + + ) +}) + +const styles = createStyle({ + content: { + marginTop: 5, + marginBottom: 15, + }, +}) diff --git a/src/screens/Home/Views/Setting/settings/Theme/index.tsx b/src/screens/Home/Views/Setting/settings/Theme/index.tsx index 8d5176a..f90d882 100644 --- a/src/screens/Home/Views/Setting/settings/Theme/index.tsx +++ b/src/screens/Home/Views/Setting/settings/Theme/index.tsx @@ -5,6 +5,7 @@ import Theme from './Theme' import IsAutoTheme from './IsAutoTheme' import IsHideBgDark from './IsHideBgDark' import IsDynamicBg from './IsDynamicBg' +import IsFontShadow from './IsFontShadow' // import { useI18n } from '@/lang/i18n' export default memo(() => { @@ -14,6 +15,7 @@ export default memo(() => { + ) }) diff --git a/src/screens/PlayDetail/Horizontal/Lyric.tsx b/src/screens/PlayDetail/Horizontal/Lyric.tsx index f3d57b1..60857f4 100644 --- a/src/screens/PlayDetail/Horizontal/Lyric.tsx +++ b/src/screens/PlayDetail/Horizontal/Lyric.tsx @@ -28,7 +28,7 @@ const LrcLine = memo(({ line, lineNum, activeLine, onLayout }: LineProps) => { const lrcFontSize = useSettingValue('playDetail.horizontal.style.lrcFontSize') const textAlign = useSettingValue('playDetail.style.align') const size = lrcFontSize / 10 - const lineHeight = setSpText(size) * 1.25 + const lineHeight = setSpText(size) * 1.3 const colors = useMemo(() => { const active = activeLine == lineNum diff --git a/src/screens/PlayDetail/Vertical/Lyric.tsx b/src/screens/PlayDetail/Vertical/Lyric.tsx index 8a6f57d..5358f28 100644 --- a/src/screens/PlayDetail/Vertical/Lyric.tsx +++ b/src/screens/PlayDetail/Vertical/Lyric.tsx @@ -67,7 +67,7 @@ const LrcLine = memo(({ line, lineNum, activeLine, onLayout }: LineProps) => { const lrcFontSize = useSettingValue('playDetail.vertical.style.lrcFontSize') const textAlign = useSettingValue('playDetail.style.align') const size = lrcFontSize / 10 - const lineHeight = setSpText(size) * 1.25 + const lineHeight = setSpText(size) * 1.3 const colors = useMemo(() => { const active = activeLine == lineNum diff --git a/src/screens/PlayDetail/Vertical/Player/index.tsx b/src/screens/PlayDetail/Vertical/Player/index.tsx index 6fdd5a3..215682c 100644 --- a/src/screens/PlayDetail/Vertical/Player/index.tsx +++ b/src/screens/PlayDetail/Vertical/Player/index.tsx @@ -12,13 +12,9 @@ import { NAV_SHEAR_NATIVE_IDS } from '@/config/constant' export default memo(() => { return ( - - - + - - - + ) }) @@ -38,12 +34,6 @@ const styles = createStyle({ // backgroundColor: 'red', flexDirection: 'column', }, - info: { - flex: 0, - flexDirection: 'row', - // paddingBottom: 5, - // justifyContent: 'flex-end', - }, status: { marginTop: 10, flexDirection: 'column', diff --git a/src/store/theme/hook.ts b/src/store/theme/hook.ts index a7d5e48..693fd23 100644 --- a/src/store/theme/hook.ts +++ b/src/store/theme/hook.ts @@ -1,5 +1,6 @@ -import { useContext } from 'react' +import { useContext, useEffect, useState } from 'react' import { ThemeContext } from './state' +import settingState from '@/store/setting/state' // export const useSetting = () => { // const [setting, updateSetting] = useState(state.setting) @@ -36,3 +37,21 @@ import { ThemeContext } from './state' export const useTheme = () => useContext(ThemeContext) +export const useTextShadow = () => { + const [value, update] = useState(settingState.setting['theme.fontShadow']) + + useEffect(() => { + const handleUpdate = (keys: Array, setting: Partial) => { + if (!keys.includes('theme.fontShadow')) return + requestAnimationFrame(() => { + update(setting['theme.fontShadow']!) + }) + } + global.state_event.on('configUpdated', handleUpdate) + return () => { + global.state_event.off('configUpdated', handleUpdate) + } + }, []) + + return value +} diff --git a/src/types/app_setting.d.ts b/src/types/app_setting.d.ts index be7e08d..4acb4d9 100644 --- a/src/types/app_setting.d.ts +++ b/src/types/app_setting.d.ts @@ -81,6 +81,11 @@ declare global { */ 'theme.dynamicBg': boolean + /** + * 字体阴影 + */ + 'theme.fontShadow': boolean + /** * 启动时自动播放歌曲 */