From dd3e9e06c0f54b25b4e4ec92a3bd24ce6ceb1059 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Sun, 13 Jun 2021 16:39:29 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=98=AF=E5=90=A6=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=AD=8C=E8=AF=8D=E7=BF=BB=E8=AF=91=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 7 ++-- package-lock.json | 12 +++---- package.json | 2 +- publish/changeLog.md | 1 + src/config/defaultSetting.js | 3 +- src/lang/en_us.json | 1 + src/lang/zh_cn.json | 1 + src/plugins/lyric.js | 14 ++++++-- .../Home/Setting/Player/IsHandleAudioFocus.js | 2 +- .../Home/Setting/Player/IsPlayHighQuality.js | 2 +- .../Setting/Player/IsShowLyricTranslation.js | 20 +++++++++++ src/screens/Home/Setting/Player/index.js | 2 ++ .../PlayDetail/Portrait/Player/Lyric.js | 36 ++++++++++++++----- src/store/modules/common/action.js | 11 ++++++ src/store/modules/common/getter.js | 1 + src/store/modules/common/reducer.js | 12 +++++++ src/store/modules/player/action.js | 16 +++++++-- 17 files changed, 117 insertions(+), 26 deletions(-) create mode 100644 src/screens/Home/Setting/Player/IsShowLyricTranslation.js diff --git a/index.js b/index.js index 7afa8b6..3b8d789 100644 --- a/index.js +++ b/index.js @@ -16,7 +16,7 @@ import { action as commonAction } from '@/store/modules/common' import { action as playerAction } from '@/store/modules/player' import { action as listAction } from '@/store/modules/list' import { init as initMusicTools } from '@/utils/music' -import { init as initLyric } from '@/plugins/lyric' +import { init as initLyric, toggleTranslation } from '@/plugins/lyric' import { init as initI18n, supportedLngs } from '@/plugins/i18n' import { deviceLanguage, getPlayInfo, toast } from '@/utils/tools' import { LIST_ID_PLAY_TEMP } from '@/config/constant' @@ -39,7 +39,10 @@ const init = () => { initLyric(), registerPlaybackService(), ]).then(() => { - let lang = store.getState().common.setting.langId + let setting = store.getState().common.setting + toggleTranslation(setting.player.isShowTranslation) + + let lang = setting.langId let needSetLang = false if (!supportedLngs.includes(lang)) { if (typeof deviceLanguage == 'string' && supportedLngs.includes(deviceLanguage)) { diff --git a/package-lock.json b/package-lock.json index a241504..8bb89d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "lx-music-mobile", - "version": "0.4.1", + "version": "0.4.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -6834,9 +6834,9 @@ "dev": true }, "lrc-file-parser": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/lrc-file-parser/-/lrc-file-parser-1.0.7.tgz", - "integrity": "sha512-YaPa3xMMlN+cLXyINorMlWkXfO5U+AWpPywHiyVaVLgvRnI7xjArOyLpKH/I8XHmIPmdtJQfxFxT3K3hdCS91Q==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/lrc-file-parser/-/lrc-file-parser-1.1.0.tgz", + "integrity": "sha512-2C6j7lk2UpUae5+OnnQxXZ81ekg+LPWylAYzpCws3MFPSBqh4U3aA0cfLmjpIyDpKmS4hfNINfJZtt2jFX9peg==" }, "lru-cache": { "version": "6.0.0", @@ -8645,8 +8645,8 @@ "integrity": "sha512-Ls9qiNZzW/OLFoI25wfjjAcrf2DZ975hn2vr6U9gyuxi2nooVbzQeFoQS5vQcbCt9QX5NY8ASEEAtlLdIa6KVg==" }, "react-native-track-player": { - "version": "git+https://github.com/lyswhut/react-native-track-player.git#8c8acfa6f73c52b92fe8ed51d75aa60deba71ae7", - "from": "git+https://github.com/lyswhut/react-native-track-player.git#8c8acfa6f73c52b92fe8ed51d75aa60deba71ae7" + "version": "git+https://github.com/lyswhut/react-native-track-player.git#1dcfd07d31553bf5e1d32b9981445060f30f0160", + "from": "git+https://github.com/lyswhut/react-native-track-player.git#1dcfd07d31553bf5e1d32b9981445060f30f0160" }, "react-native-vector-icons": { "version": "8.1.0", diff --git a/package.json b/package.json index 9e97613..b40e95f 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "events": "^3.3.0", "i18next": "^20.3.1", "js-htmlencode": "^0.3.0", - "lrc-file-parser": "^1.0.7", + "lrc-file-parser": "^1.1.0", "pako": "^2.0.3", "process": "^0.11.10", "prop-types": "^15.7.2", diff --git a/publish/changeLog.md b/publish/changeLog.md index 429a274..42ec660 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -2,6 +2,7 @@ - 新增“其他应用播放声音时，自动暂停播放”设置，默认开启 - 新增“添加歌曲到列表时的位置”设置，可选项为列表的“顶部”与“底部” +- 新增“显示歌词翻译设置”，默认关闭 ### 变更 diff --git a/src/config/defaultSetting.js b/src/config/defaultSetting.js index 5f48d54..474e65f 100644 --- a/src/config/defaultSetting.js +++ b/src/config/defaultSetting.js @@ -3,7 +3,7 @@ // const { isMac } = require('./utils') const defaultSetting = { - version: '1.5', + version: '1.6', player: { togglePlayMethod: 'listLoop', highQuality: false, @@ -12,6 +12,7 @@ const defaultSetting = { timeoutExit: '', timeoutExitPlayed: true, isHandleAudioFocus: true, + isShowLyricTranslation: false, }, list: { isShowSource: true, diff --git a/src/lang/en_us.json b/src/lang/en_us.json index f5c4ad7..c04faca 100644 --- a/src/lang/en_us.json +++ b/src/lang/en_us.json @@ -112,6 +112,7 @@ "setting_play_lyric_transition": "Show lyrics translation", "setting_play_quality": "Play 320K quality songs first (if supported)", "setting_play_save_play_time": "Remember playback progress", + "setting_play_show_translation": "Show lyrics translation", "setting_version": "Software Update", "setting_version_show_ver_modal": "Open the update window 🚀", "singer": "Artist: {{name}}", diff --git a/src/lang/zh_cn.json b/src/lang/zh_cn.json index e38c702..af33ca0 100644 --- a/src/lang/zh_cn.json +++ b/src/lang/zh_cn.json @@ -113,6 +113,7 @@ "setting_play_lyric_transition": "显示歌词翻译", "setting_play_quality": "优先播放320K品质的歌曲（如果支持）", "setting_play_save_play_time": "记住播放进度", + "setting_play_show_translation": "显示歌词翻译", "setting_version": "软件更新", "setting_version_show_ver_modal": "打开更新窗口 🚀", "singer": "艺术家：{{name}}", diff --git a/src/plugins/lyric.js b/src/plugins/lyric.js index 53054a0..e03b7c7 100644 --- a/src/plugins/lyric.js +++ b/src/plugins/lyric.js @@ -10,6 +10,9 @@ const lrcTools = { playHooks: [], setLyricHooks: [], isPlay: false, + isShowTranslation: false, + lyricText: '', + translationText: '', init() { if (this.isInited) return this.isInited = true @@ -51,9 +54,16 @@ export const init = async() => { lrcTools.init() } -export const setLyric = lyric => { +export const setLyric = (lyric, translation) => { lrcTools.isPlay = false - lrcTools.lrc.setLyric(lyric) + lrcTools.lyricText = lyric + lrcTools.translationText = translation + lrcTools.lrc.setLyric(lrcTools.lyricText, lrcTools.isShowTranslation ? lrcTools.translationText : '') +} +export const toggleTranslation = isShow => { + lrcTools.isShowTranslation = isShow + if (!lrcTools.lyricText) return + lrcTools.lrc.setLyric(lrcTools.lyricText, isShow ? lrcTools.translationText : '') } export const play = time => { // console.log(time) diff --git a/src/screens/Home/Setting/Player/IsHandleAudioFocus.js b/src/screens/Home/Setting/Player/IsHandleAudioFocus.js index e5e83cd..a704178 100644 --- a/src/screens/Home/Setting/Player/IsHandleAudioFocus.js +++ b/src/screens/Home/Setting/Player/IsHandleAudioFocus.js @@ -18,7 +18,7 @@ export default memo(() => { } return ( - + ) diff --git a/src/screens/Home/Setting/Player/IsPlayHighQuality.js b/src/screens/Home/Setting/Player/IsPlayHighQuality.js index b6b57c6..fa52990 100644 --- a/src/screens/Home/Setting/Player/IsPlayHighQuality.js +++ b/src/screens/Home/Setting/Player/IsPlayHighQuality.js @@ -13,7 +13,7 @@ export default memo(() => { return ( - + ) diff --git a/src/screens/Home/Setting/Player/IsShowLyricTranslation.js b/src/screens/Home/Setting/Player/IsShowLyricTranslation.js new file mode 100644 index 0000000..1a27857 --- /dev/null +++ b/src/screens/Home/Setting/Player/IsShowLyricTranslation.js @@ -0,0 +1,20 @@ +import React, { memo } from 'react' +import { View } from 'react-native' + +import { useGetter, useDispatch } from '@/store' + +import CheckBoxItem from '../components/CheckBoxItem' +import { useTranslation } from '@/plugins/i18n' + +export default memo(() => { + const { t } = useTranslation() + const isShowLyricTranslation = useGetter('common', 'isShowLyricTranslation') + const setIsShowLyricTranslation = useDispatch('common', 'setIsShowLyricTranslation') + + + return ( + + + + ) +}) diff --git a/src/screens/Home/Setting/Player/index.js b/src/screens/Home/Setting/Player/index.js index fb82278..4ec28be 100644 --- a/src/screens/Home/Setting/Player/index.js +++ b/src/screens/Home/Setting/Player/index.js @@ -7,6 +7,7 @@ import { import Section from '../components/Section' import IsPlayHighQuality from './IsPlayHighQuality' import IsHandleAudioFocus from './IsHandleAudioFocus' +import IsShowLyricTranslation from './IsShowLyricTranslation' import MaxCache from './MaxCache' import { useTranslation } from '@/plugins/i18n' @@ -43,6 +44,7 @@ export default memo(() => {
+ {/* 播放歌曲切换方式 diff --git a/src/screens/PlayDetail/Portrait/Player/Lyric.js b/src/screens/PlayDetail/Portrait/Player/Lyric.js index 44c92e2..686e069 100644 --- a/src/screens/PlayDetail/Portrait/Player/Lyric.js +++ b/src/screens/PlayDetail/Portrait/Player/Lyric.js @@ -6,11 +6,18 @@ import { useLrcPlay, useLrcSet } from '@/plugins/lyric' import { log } from '@/utils/log' import { toast } from '@/utils/tools' -const LrcLine = memo(({ text, line, activeLine }) => { +const LrcLine = memo(({ lrc, line, activeLine }) => { const theme = useGetter('common', 'theme') return ( - {text} + + {lrc.text} + { + lrc.translation + ? {lrc.translation} + : null + } + ) }, (prevProps, nextProps) => { return prevProps.text == nextProps.text && @@ -111,7 +118,7 @@ export default memo(() => { const handleRenderItem = ({ item, index }) => { return ( - + ) } @@ -148,12 +155,23 @@ const styles = StyleSheet.create({ paddingTop: '80%', }, line: { - borderRadius: 4, - textAlign: 'center', - fontSize: 16, - lineHeight: 22, - paddingTop: 5, - paddingBottom: 5, + paddingTop: 8, + paddingBottom: 8, // opacity: 0, }, + lineText: { + textAlign: 'center', + fontSize: 16, + lineHeight: 20, + // paddingTop: 5, + // paddingBottom: 5, + // opacity: 0, + }, + lineTranslationText: { + textAlign: 'center', + fontSize: 13, + lineHeight: 17, + paddingTop: 5, + // paddingBottom: 5, + }, }) diff --git a/src/store/modules/common/action.js b/src/store/modules/common/action.js index 662eb8d..20189e9 100644 --- a/src/store/modules/common/action.js +++ b/src/store/modules/common/action.js @@ -34,6 +34,7 @@ export const TYPES = { setTimeoutExit: null, setIsHandleAudioFocus: null, setAddMusicLocationType: null, + setIsShowLyricTranslation: null, } for (const key of Object.keys(TYPES)) { TYPES[key] = `common__${key}` @@ -280,3 +281,13 @@ export const setAddMusicLocationType = type => async(dispatch, getState) => { await setData(settingKey, common.setting) } +export const setIsShowLyricTranslation = flag => async(dispatch, getState) => { + dispatch(playerAction.toggleTranslation(flag)) + dispatch({ + type: TYPES.setIsShowLyricTranslation, + payload: flag, + }) + const { common } = getState() + await setData(settingKey, common.setting) +} + diff --git a/src/store/modules/common/getter.js b/src/store/modules/common/getter.js index 3a4ff9c..107f3c3 100644 --- a/src/store/modules/common/getter.js +++ b/src/store/modules/common/getter.js @@ -44,6 +44,7 @@ export const sourceNameType = state => state.common.setting.sourceNameType export const timeoutExit = state => state.common.setting.player.timeoutExit export const timeoutExitPlayed = state => state.common.setting.player.timeoutExitPlayed +export const isShowLyricTranslation = state => state.common.setting.player.isShowTranslation export const activeApiSourceId = state => state.common.setting.apiSource diff --git a/src/store/modules/common/reducer.js b/src/store/modules/common/reducer.js index 5263f47..3002e17 100644 --- a/src/store/modules/common/reducer.js +++ b/src/store/modules/common/reducer.js @@ -274,6 +274,18 @@ const mutations = { }, } }, + [TYPES.setIsShowLyricTranslation](state, isShowTranslation) { + return { + ...state, + setting: { + ...state.setting, + player: { + ...state.setting.player, + isShowTranslation, + }, + }, + } + }, [TYPES.setVersionInfo](state, versionInfo) { return { ...state, diff --git a/src/store/modules/player/action.js b/src/store/modules/player/action.js index b6dd40d..eec39e6 100644 --- a/src/store/modules/player/action.js +++ b/src/store/modules/player/action.js @@ -17,7 +17,7 @@ import { import { getRandom } from '@/utils' import { getMusicUrl, saveMusicUrl, getLyric, saveLyric, assertApiSupport, savePlayInfo, saveList } from '@/utils/tools' import { playInfo as playInfoGetter } from './getter' -import { play as lrcPlay, setLyric, pause as lrcPause } from '@/plugins/lyric' +import { play as lrcPlay, setLyric, pause as lrcPause, toggleTranslation as lrcToggleTranslation } from '@/plugins/lyric' import { action as listAction } from '@/store/modules/list' import { LIST_ID_PLAY_LATER } from '@/config/constant' // import { defaultList } from '../list/getter' @@ -135,8 +135,8 @@ const handlePlayMusic = async({ getState, dispatch, playMusicInfo, musicInfo, is }) } dispatch(getLrc(musicInfo)).then(({ lyric, tlyric }) => { - setLyric(lyric) const player = getState().player + setLyric(lyric, tlyric) if (player.status == STATUS.playing && !player.isGettingUrl) { getPosition().then(position => { lrcPlay(position * 1000) @@ -199,8 +199,8 @@ const handlePlayMusic = async({ getState, dispatch, playMusicInfo, musicInfo, is } dispatch(getLrc(musicInfo)).then(({ lyric, tlyric }) => { if (playMusicId != id) return - setLyric(lyric) const player = getState().player + setLyric(lyric, tlyric) if (player.status == STATUS.playing && !player.isGettingUrl) { getPosition().then(position => { lrcPlay(position * 1000) @@ -742,6 +742,16 @@ export const setListInfo = listInfo => ({ payload: listInfo, }) +export const toggleTranslation = isShow => async(dispatch, getState) => { + lrcToggleTranslation(isShow) + const player = getState().player + if (player.status == STATUS.playing && !player.isGettingUrl) { + getPosition().then(position => { + lrcPlay(position * 1000) + }) + } +} + export const checkPlayList = listIds => async(dispatch, getState) => { const { player, list: listState } = getState() if (!_playMusicInfo || !listIds.some(id => player.listInfo.id === id)) return