From 7f344631a83e74a9c3cf60d63756004170c38301 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Fri, 6 Aug 2021 22:13:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=A1=8C=E9=9D=A2=E6=AD=8C?= =?UTF-8?q?=E8=AF=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- android/app/src/main/AndroidManifest.xml | 22 ++-- .../java/com/lxmusicmobile/lyric/Lyric.java | 100 ++++++++++++++++-- .../com/lxmusicmobile/lyric/LyricEvent.java | 23 ++++ .../com/lxmusicmobile/lyric/LyricModule.java | 36 +++++-- .../com/lxmusicmobile/lyric/LyricPlayer.java | 49 ++++++--- .../com/lxmusicmobile/lyric/LyricView.java | 76 +++++++++---- .../src/main/res/drawable/rounded_corner.xml | 12 +++ index.js | 7 +- src/config/defaultSetting.js | 10 +- .../Home/Setting/LyricDesktop/Theme.js | 68 ++++++++++++ .../Home/Setting/LyricDesktop/index.js | 2 + src/store/modules/common/action.js | 19 ++++ src/store/modules/common/getter.js | 2 + src/store/modules/common/reducer.js | 24 +++++ src/store/modules/player/action.js | 8 +- src/utils/lyricDesktop.js | 37 ++++++- 16 files changed, 425 insertions(+), 70 deletions(-) create mode 100644 android/app/src/main/java/com/lxmusicmobile/lyric/LyricEvent.java create mode 100644 android/app/src/main/res/drawable/rounded_corner.xml create mode 100644 src/screens/Home/Setting/LyricDesktop/Theme.js diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index bbe3ebb..ca07e63 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -1,17 +1,15 @@ + + xmlns:tools="http://schemas.android.com/tools" + package="cn.toside.music.mobile"> - - - - - - - - - - + + + + + + + constants = new HashMap<>(); LyricModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; - lyric = new Lyric(); + + // constants.put("THEME_GREEN", "#07c556"); + // constants.put("THEME_YELLOW", "#fffa12"); + // constants.put("THEME_BLUE", "#19b5fe"); + // constants.put("THEME_RED", "#ff1222"); + // constants.put("THEME_PINK", "#f1828d"); + // constants.put("THEME_PURPLE", "#c851d4"); + // constants.put("THEME_ORANGE", "#fffa12"); + // constants.put("THEME_GREY", "#bdc3c7"); } @Override @@ -22,9 +31,15 @@ public class LyricModule extends ReactContextBaseJavaModule { return "LyricModule"; } +// @Override +// public Map getConstants() { +// return constants; +// } + @ReactMethod - public void showLyric(boolean isLook, Promise promise) { - lyric.showLyric(reactContext, isLook); + public void showLyric(boolean isLook, String themeColor, int lyricViewX, int lyricViewY, Promise promise) { + if (lyric == null) lyric = new Lyric(reactContext); + lyric.showLyric(isLook, themeColor, lyricViewX, lyricViewY); promise.resolve(null); } @@ -37,8 +52,8 @@ public class LyricModule extends ReactContextBaseJavaModule { @ReactMethod public void setLyric(String lyric, String translation, Promise promise) { - Log.e("Lyric", "set lyric: " + lyric); - Log.e("Lyric", "set lyric translation: " + translation); + // Log.d("Lyric", "set lyric: " + lyric); + // Log.d("Lyric", "set lyric translation: " + translation); this.lyric.setLyric(lyric, translation); promise.resolve(null); } @@ -51,14 +66,14 @@ public class LyricModule extends ReactContextBaseJavaModule { @ReactMethod public void play(int time, Promise promise) { - Log.e("Lyric", "play lyric: " + time); + Log.d("Lyric", "play lyric: " + time); lyric.play(time); promise.resolve(null); } @ReactMethod public void pause(Promise promise) { - Log.e("Lyric", "play pause"); + Log.d("Lyric", "play pause"); lyric.pause(); promise.resolve(null); } @@ -70,5 +85,12 @@ public class LyricModule extends ReactContextBaseJavaModule { } else { lyric.unlockLyric(); } + promise.resolve(null); + } + + @ReactMethod + public void setColor(String themeColor, Promise promise) { + lyric.setColor(themeColor); + promise.resolve(null); } } diff --git a/android/app/src/main/java/com/lxmusicmobile/lyric/LyricPlayer.java b/android/app/src/main/java/com/lxmusicmobile/lyric/LyricPlayer.java index d1c850a..42c2057 100644 --- a/android/app/src/main/java/com/lxmusicmobile/lyric/LyricPlayer.java +++ b/android/app/src/main/java/com/lxmusicmobile/lyric/LyricPlayer.java @@ -1,7 +1,5 @@ package com.lxmusicmobile.lyric; -import android.util.Log; - import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; @@ -26,10 +24,12 @@ public class LyricPlayer { int curLineNum = 0; int maxLine = 0; int offset = 150; - boolean isOffseted = false; + boolean isOffered = false; long performanceTime = 0; int delay = 0; Object tid = null; + boolean tempPause = false; + boolean tempPaused = false; LyricPlayer() { // tagRegMap = new HashMap(); @@ -43,6 +43,17 @@ public class LyricPlayer { timePattern = Pattern.compile(timeExp); } + public void setTempPause(boolean isPaused) { + if (isPaused) { + tempPause = true; + } else { + tempPause = false; + if (tempPaused) { + tempPaused = false; + if (isPlay) refresh(); + } + } + } // @RequiresApi(api = Build.VERSION_CODES.N) // private void initTag() { @@ -167,7 +178,8 @@ public class LyricPlayer { public void pause() { if (!isPlay) return; isPlay = false; - isOffseted = false; + isOffered = false; + tempPaused = false; stopTimeout(); if (curLineNum == maxLine) return; int curLineNum = this.findCurLineNum(getCurrentTime()); @@ -192,7 +204,7 @@ public class LyricPlayer { private int findCurLineNum(int curTime) { int length = lines.size(); for (int index = 0; index < length; index++) { - if (curTime <= (Integer) ((HashMap)lines.get(index)).get("time")) return index == 0 ? 0 : index - 1; + if (curTime <= (int) ((HashMap)lines.get(index)).get("time")) return index == 0 ? 0 : index - 1; } return length - 1; } @@ -203,6 +215,9 @@ public class LyricPlayer { } private void refresh() { + if (tempPaused) tempPaused = false; + // Log.d("Lyric", "refresh: " + curLineNum); + curLineNum++; if (curLineNum == maxLine) { handleMaxLine(); @@ -211,20 +226,26 @@ public class LyricPlayer { HashMap curLine = lines.get(curLineNum); HashMap nextLine = lines.get(curLineNum + 1); int currentTime = getCurrentTime(); - int driftTime = currentTime - (Integer) curLine.get("time"); - Log.e("Lyric", "driftTime: " + driftTime); + int driftTime = currentTime - (int) curLine.get("time"); + // Log.d("Lyric", "driftTime: " + driftTime); if (driftTime >= 0 || curLineNum == 0) { - delay = (Integer) nextLine.get("time") - (Integer) curLine.get("time") - driftTime; - Log.e("Lyric", "delay: " + delay + " driftTime: " + driftTime); + delay = (int) nextLine.get("time") - (int) curLine.get("time") - driftTime; + // Log.d("Lyric", "delay: " + delay + " driftTime: " + driftTime); if (delay > 0) { - if (!isOffseted && delay >= offset) { + if (!isOffered && delay >= offset) { delay -= offset; - isOffseted = true; + isOffered = true; + } + if (isPlay) { + startTimeout(() -> { + if (tempPause) { + tempPaused = true; + return; + } + refresh(); + }, delay); } - startTimeout(() -> { - refresh(); - }, delay); onPlay(curLineNum, (String) curLine.get("text")); return; } diff --git a/android/app/src/main/java/com/lxmusicmobile/lyric/LyricView.java b/android/app/src/main/java/com/lxmusicmobile/lyric/LyricView.java index be0427f..fc1159c 100644 --- a/android/app/src/main/java/com/lxmusicmobile/lyric/LyricView.java +++ b/android/app/src/main/java/com/lxmusicmobile/lyric/LyricView.java @@ -5,20 +5,29 @@ import android.content.Context; import android.graphics.Color; import android.graphics.PixelFormat; import android.os.Build; +import android.text.TextUtils; import android.util.DisplayMetrics; +import android.util.TypedValue; import android.view.Gravity; import android.view.MotionEvent; import android.view.View; import android.view.WindowManager; import android.widget.TextView; +import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.bridge.WritableMap; + +import cn.toside.music.mobile.R; + +import static android.view.ViewGroup.LayoutParams.MATCH_PARENT; public class LyricView extends Activity implements View.OnTouchListener { TextView textView = null; WindowManager windowManager = null; WindowManager.LayoutParams layoutParams = null; - ReactApplicationContext reactContext; + final private ReactApplicationContext reactContext; + final private LyricEvent lyricEvent; private int winWidth = 0; @@ -28,14 +37,22 @@ public class LyricView extends Activity implements View.OnTouchListener { private float nowY; private float tranX; //悬浮窗移动位置的相对值 private float tranY; + private int prevViewX = 0; + private int prevViewY = 0; private float preY = 0; // private static boolean isVibrated = false; - public static int ACTION_MANAGE_OVERLAY_PERMISSION_REQUEST_CODE = 5469; - - LyricView(ReactApplicationContext reactContext) { + LyricView(ReactApplicationContext reactContext, LyricEvent lyricEvent) { this.reactContext = reactContext; + this.lyricEvent = lyricEvent; + } + + private void sendPositionEvent(int x, int y) { + WritableMap params = Arguments.createMap(); + params.putInt("x", x); + params.putInt("y", y); + lyricEvent.sendEvent(lyricEvent.SET_VIEW_POSITION, params); } // public void permission(){ @@ -58,7 +75,7 @@ public class LyricView extends Activity implements View.OnTouchListener { // } // } - public void showLyricView(boolean isLock) { + public void showLyricView(boolean isLock, String themeColor, int lyricViewX, int lyricViewY) { if (windowManager == null) { windowManager = (WindowManager) reactContext.getSystemService(Context.WINDOW_SERVICE); //设置TextView的属性 @@ -66,7 +83,7 @@ public class LyricView extends Activity implements View.OnTouchListener { DisplayMetrics outMetrics = new DisplayMetrics(); windowManager.getDefaultDisplay().getMetrics(outMetrics); - winWidth = (int)(outMetrics.widthPixels * 0.6); + winWidth = (int)(outMetrics.widthPixels * 0.92); } // 注意，悬浮窗只有一个，而当打开应用的时候才会产生悬浮窗，所以要判断悬浮窗是否已经存在， @@ -77,14 +94,15 @@ public class LyricView extends Activity implements View.OnTouchListener { // 使用Application context // 创建UI控件，避免Activity销毁导致上下文出现问题,因为现在的悬浮窗是系统级别的，不依赖与Activity存在 //创建自定义的TextView - View view = new View(reactContext); textView = new TextView(reactContext); textView.setText("LX Music ^-^"); - textView.setTextColor(Color.rgb(205, 220, 57)); + textView.setTextSize(18); + // textView.setGravity(Gravity.CENTER); + textView.setTextColor(Color.parseColor(themeColor)); textView.setShadowLayer(1, 0, 0, Color.BLACK); + textView.setMaxLines(2); + textView.setEllipsize(TextUtils.TruncateAt.END); - - // textView.setBackgroundColor(0x66000000); //监听 OnTouch 事件 为了实现"移动歌词"功能 textView.setOnTouchListener(this); @@ -94,9 +112,16 @@ public class LyricView extends Activity implements View.OnTouchListener { WindowManager.LayoutParams.TYPE_SYSTEM_ALERT : WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY; - layoutParams.flags = isLock - ? WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE - : WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL; + // layoutParams.flags = isLock + // ? WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE + // : WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL; + if (isLock) { + layoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE; + textView.setBackgroundColor(Color.TRANSPARENT); + } else { + layoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL; + textView.setBackgroundResource(R.drawable.rounded_corner); + } // TYPE_SYSTEM_ALERT 系统提示,它总是出现在应用程序窗口之上 // TYPE_SYSTEM_OVERLAY 系统顶层窗口。显示在其他一切内容之上。此窗口不能获得输入焦点，否则影响锁屏 @@ -105,15 +130,16 @@ public class LyricView extends Activity implements View.OnTouchListener { layoutParams.gravity = Gravity.TOP | Gravity.CENTER_VERTICAL; //显示在屏幕上中部 //显示位置与指定位置的相对位置差 - layoutParams.x = 0; - layoutParams.y = 0; + layoutParams.x = this.prevViewX = lyricViewX; + layoutParams.y = this.prevViewY = lyricViewY; //悬浮窗的宽高 // layoutParams.width = WindowManager.LayoutParams.WRAP_CONTENT; // layoutParams.height = WindowManager.LayoutParams.WRAP_CONTENT; // layoutParams.width= DisplayUtil.dp2px(mContext,55); // layoutParams.height= DisplayUtil.dp2px(mContext,55); - layoutParams.width = winWidth; - layoutParams.height = 80; + layoutParams.width = MATCH_PARENT; + // layoutParams.height = 100; + layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, reactContext.getResources().getDisplayMetrics()); //设置透明 layoutParams.format = PixelFormat.TRANSPARENT; @@ -123,6 +149,7 @@ public class LyricView extends Activity implements View.OnTouchListener { } public void setLyric(String text) { + if (textView == null) return; textView.setText(text); } @@ -158,7 +185,7 @@ public class LyricView extends Activity implements View.OnTouchListener { break; case MotionEvent.ACTION_UP: // float dy = nowY - preY; - // Log.e("Lyric","dy: " + dy); + // Log.d("Lyric","dy: " + dy); // if (isVibrated){ // if (dy > 10){ // //down @@ -175,6 +202,11 @@ public class LyricView extends Activity implements View.OnTouchListener { //根据移动的位置来判断 // dy = 0; tranY = 0; + if (layoutParams.x != prevViewX || layoutParams.y != prevViewX) { + prevViewX = layoutParams.x; + prevViewY = layoutParams.y; + sendPositionEvent(prevViewX, prevViewY); + } break; } return ret; @@ -183,12 +215,20 @@ public class LyricView extends Activity implements View.OnTouchListener { public void lockView() { if (windowManager == null || textView == null) return; layoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE; + textView.setBackgroundColor(Color.TRANSPARENT); windowManager.updateViewLayout(textView, layoutParams); } public void unlockView() { if (windowManager == null || textView == null) return; layoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL; + textView.setBackgroundResource(R.drawable.rounded_corner); + windowManager.updateViewLayout(textView, layoutParams); + } + + public void setColor(String color) { + if (windowManager == null || textView == null) return; + textView.setTextColor(Color.parseColor(color)); windowManager.updateViewLayout(textView, layoutParams); } diff --git a/android/app/src/main/res/drawable/rounded_corner.xml b/android/app/src/main/res/drawable/rounded_corner.xml new file mode 100644 index 0000000..caf624d --- /dev/null +++ b/android/app/src/main/res/drawable/rounded_corner.xml @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/index.js b/index.js index 3b2b06c..9ee31de 100644 --- a/index.js +++ b/index.js @@ -17,7 +17,7 @@ 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, toggleTranslation } from '@/utils/lyric' -import { showLyric } from '@/utils/lyricDesktop' +import { showLyric, onPositionChange } from '@/utils/lyricDesktop' import { init as initI18n, supportedLngs } from '@/plugins/i18n' import { deviceLanguage, getPlayInfo, toast } from '@/utils/tools' import { LIST_ID_PLAY_TEMP } from '@/config/constant' @@ -44,7 +44,10 @@ const init = () => { let setting = store.getState().common.setting toggleTranslation(setting.player.isShowTranslation) if (setting.sync.enable) connect() - if (setting.desktopLyric.enable) showLyric(setting.desktopLyric.isLock) + if (setting.desktopLyric.enable) showLyric(setting.desktopLyric.isLock, setting.desktopLyric.theme, setting.desktopLyric.position.x, setting.desktopLyric.position.y) + onPositionChange(position => { + store.dispatch(commonAction.setDesktopLyricPosition(position)) + }) let lang = setting.langId let needSetLang = false diff --git a/src/config/defaultSetting.js b/src/config/defaultSetting.js index 50ae0c3..daa3be2 100644 --- a/src/config/defaultSetting.js +++ b/src/config/defaultSetting.js @@ -3,7 +3,7 @@ // const { isMac } = require('./utils') const defaultSetting = { - version: '1.8', + version: '1.10', player: { togglePlayMethod: 'listLoop', highQuality: false, @@ -17,11 +17,13 @@ const defaultSetting = { desktopLyric: { enable: false, isLock: false, + theme: 'green', // width: 380, // height: 420, - // x: null, - // y: null, - // theme: 0, + position: { + x: 0, + y: 0, + }, // style: { // fontSize: 120, // opacity: 95, diff --git a/src/screens/Home/Setting/LyricDesktop/Theme.js b/src/screens/Home/Setting/LyricDesktop/Theme.js new file mode 100644 index 0000000..161d35c --- /dev/null +++ b/src/screens/Home/Setting/LyricDesktop/Theme.js @@ -0,0 +1,68 @@ +import React, { memo, useMemo } from 'react' + +import { StyleSheet, View, TouchableOpacity } from 'react-native' +import { useGetter, useDispatch } from '@/store' + +import SubTitle from '../components/SubTitle' +import { useTranslation } from '@/plugins/i18n' +import { themes } from '@/utils/lyricDesktop' + +const useActive = id => { + const themeDesktopLyric = useGetter('common', 'themeDesktopLyric') + const isActive = useMemo(() => themeDesktopLyric == id, [themeDesktopLyric, id]) + return isActive +} + +const ThemeItem = ({ id, color, setTheme }) => { + const theme = useGetter('common', 'theme') + const isActive = useActive(id) + return ( + setTheme(id)}> + + + + + ) +} + +export default memo(() => { + const { t } = useTranslation() + const setThemeDesktopLyric = useDispatch('common', 'setThemeDesktopLyric') + + return ( + + + { + themes.map(({ id, value }) => ) + } + + + ) +}) + +const styles = StyleSheet.create({ + list: { + flexDirection: 'row', + flexWrap: 'wrap', + }, + item: { + marginRight: 15, + marginTop: 5, + alignItems: 'center', + width: 26, + // backgroundColor: 'rgba(0,0,0,0.2)', + }, + colorContent: { + width: 26, + height: 26, + borderRadius: 4, + borderWidth: 1.6, + alignItems: 'center', + justifyContent: 'center', + }, + image: { + width: 20, + height: 20, + borderRadius: 4, + }, +}) diff --git a/src/screens/Home/Setting/LyricDesktop/index.js b/src/screens/Home/Setting/LyricDesktop/index.js index 1118697..67b36ba 100644 --- a/src/screens/Home/Setting/LyricDesktop/index.js +++ b/src/screens/Home/Setting/LyricDesktop/index.js @@ -3,6 +3,7 @@ import React, { memo } from 'react' import Section from '../components/Section' import IsShowLyric from './IsShowLyric' import IsLockLyric from './IsLockLyric' +import Theme from './Theme' import { useTranslation } from '@/plugins/i18n' export default memo(() => { @@ -12,6 +13,7 @@ export default memo(() => {
+
) }) diff --git a/src/store/modules/common/action.js b/src/store/modules/common/action.js index 320749f..abd3038 100644 --- a/src/store/modules/common/action.js +++ b/src/store/modules/common/action.js @@ -39,6 +39,8 @@ export const TYPES = { setSyncStatus: null, setIsShowDesktopLyric: null, setIsLockDesktopLyric: null, + setThemeDesktopLyric: null, + setDesktopLyricPosition: null, } for (const key of Object.keys(TYPES)) { TYPES[key] = `common__${key}` @@ -313,6 +315,23 @@ export const setIsLockDesktopLyric = flag => async(dispatch, getState) => { const { common } = getState() await setData(settingKey, common.setting) } +export const setThemeDesktopLyric = theme => async(dispatch, getState) => { + dispatch(playerAction.setDesktopLyricTheme(theme)) + dispatch({ + type: TYPES.setThemeDesktopLyric, + payload: theme, + }) + const { common } = getState() + await setData(settingKey, common.setting) +} +export const setDesktopLyricPosition = position => async(dispatch, getState) => { + dispatch({ + type: TYPES.setDesktopLyricPosition, + payload: position, + }) + const { common } = getState() + await setData(settingKey, common.setting) +} export const setIsEnableSync = flag => async(dispatch, getState) => { dispatch({ diff --git a/src/store/modules/common/getter.js b/src/store/modules/common/getter.js index dd390a0..c646a5d 100644 --- a/src/store/modules/common/getter.js +++ b/src/store/modules/common/getter.js @@ -44,6 +44,8 @@ export const sourceNameType = state => state.common.setting.sourceNameType export const isEnableDesktopLyric = state => state.common.setting.desktopLyric.enable export const isLockDesktopLyric = state => state.common.setting.desktopLyric.isLock +export const themeDesktopLyric = state => state.common.setting.desktopLyric.theme +export const desktopLyricPosition = state => state.common.setting.desktopLyric.position export const timeoutExit = state => state.common.setting.player.timeoutExit export const timeoutExitPlayed = state => state.common.setting.player.timeoutExitPlayed diff --git a/src/store/modules/common/reducer.js b/src/store/modules/common/reducer.js index bbd729f..bc097ad 100644 --- a/src/store/modules/common/reducer.js +++ b/src/store/modules/common/reducer.js @@ -314,6 +314,30 @@ const mutations = { }, } }, + [TYPES.setThemeDesktopLyric](state, theme) { + return { + ...state, + setting: { + ...state.setting, + desktopLyric: { + ...state.setting.desktopLyric, + theme, + }, + }, + } + }, + [TYPES.setDesktopLyricPosition](state, position) { + return { + ...state, + setting: { + ...state.setting, + desktopLyric: { + ...state.setting.desktopLyric, + position, + }, + }, + } + }, [TYPES.setVersionInfo](state, versionInfo) { return { ...state, diff --git a/src/store/modules/player/action.js b/src/store/modules/player/action.js index 2b7a5d3..4433dfc 100644 --- a/src/store/modules/player/action.js +++ b/src/store/modules/player/action.js @@ -18,7 +18,7 @@ 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, toggleTranslation as lrcToggleTranslation } from '@/utils/lyric' -import { showLyric, hideLyric, setLyric as lrcdSetLyric, toggleLock } from '@/utils/lyricDesktop' +import { showLyric, hideLyric, setLyric as lrcdSetLyric, toggleLock, setTheme } from '@/utils/lyricDesktop' import { action as listAction } from '@/store/modules/list' import { LIST_ID_PLAY_LATER } from '@/config/constant' // import { defaultList } from '../list/getter' @@ -782,11 +782,12 @@ export const toggleTranslation = isShow => async(dispatch, getState) => { export const toggleDesktopLyric = isShow => async(dispatch, getState) => { if (isShow) { const { common, player } = getState() + const desktopLyric = common.setting.desktopLyric const [{ lyric, tlyric }] = await Promise.all([ _playMusicInfo ? getLyric(_playMusicInfo).catch(() => ({ lyric: '', tlyric: '' })) : Promise.resolve({ lyric: '', tlyric: '' }), - showLyric(common.setting.desktopLyric.isLock), + showLyric(desktopLyric.isLock, desktopLyric.theme, desktopLyric.position.x, desktopLyric.position.y), ]) await lrcdSetLyric(lyric, tlyric) if (player.status == STATUS.playing && !player.isGettingUrl) { @@ -802,6 +803,9 @@ export const toggleDesktopLyric = isShow => async(dispatch, getState) => { export const toggleDesktopLyricLock = isLock => async(dispatch, getState) => { toggleLock(isLock) } +export const setDesktopLyricTheme = theme => async(dispatch, getState) => { + setTheme(theme) +} export const checkPlayList = listIds => async(dispatch, getState) => { const { player, list: listState } = getState() diff --git a/src/utils/lyricDesktop.js b/src/utils/lyricDesktop.js index d798821..52afd9a 100644 --- a/src/utils/lyricDesktop.js +++ b/src/utils/lyricDesktop.js @@ -1,17 +1,31 @@ -import { NativeModules } from 'react-native' +import { NativeModules, NativeEventEmitter } from 'react-native' const { LyricModule } = NativeModules let isShowLyric = false + +export const themes = [ + { id: 'green', value: '#07c556' }, + { id: 'yellow', value: '#fffa12' }, + { id: 'blue', value: '#19b5fe' }, + { id: 'red', value: '#ff1222' }, + { id: 'pink', value: '#f1828d' }, + { id: 'purple', value: '#c851d4' }, + { id: 'orange', value: '#ffad12' }, + { id: 'grey', value: '#bdc3c7' }, +] + +const getThemeColor = themeId => (themes.find(t => t.id == themeId) || themes[0]).value + /** * show lyric * @param {Number} isLock is lock lyric window * @returns {Promise} Promise */ -export const showLyric = (isLock = false) => { +export const showLyric = (isLock = false, themeId, lyricViewX, lyricViewY) => { if (isShowLyric) return Promise.resolve() - return LyricModule.showLyric(isLock).then(() => { + return LyricModule.showLyric(isLock, getThemeColor(themeId), lyricViewX, lyricViewY).then(() => { isShowLyric = true }) } @@ -78,3 +92,20 @@ export const toggleLock = isLock => { return LyricModule.toggleLock(isLock) } + +export const setTheme = themeId => { + if (!isShowLyric) return Promise.resolve() + return LyricModule.setColor(getThemeColor(themeId)) +} + +export const onPositionChange = callback => { + console.log('onPositionChange') + const eventEmitter = new NativeEventEmitter(LyricModule) + const eventListener = eventEmitter.addListener('set-position', event => { + callback(event) + }) + + return () => { + eventListener.remove() + } +}