lx-music-mobile
lx-music-mobile copied to clipboard
lyswhut
希望能加入状态栏歌词 功能
我个人觉得像魅族手机那样的状态栏歌词很好，桌面歌词会占用一部分触控区域，影响使用体验，状态栏歌词就好很多，还有点极客风。但是，目前好像只有flyme系统有系统原生的对状态栏歌词的支持，其他手机厂商都没有原生支持，若要实现这个功能，可能需要耗费开发者太多的时间，并且不同的手机前置摄像头的位置不同，适配难度就更大了，如果开发者感兴趣的话，希望能对这个功能进行实现
我对安卓原生不熟悉，目前不打算去适配它， 熟悉安卓的同学可以去帮忙适配（JS部分的实现可以交给我做）， 项目运行方式看：https://github.com/lyswhut/lx-music-mobile#%E6%BA%90%E4%BB%A3%E7%A0%81%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F
若遇到问题可以回帖讨论 :)
桌面歌词相关的信息：https://github.com/lyswhut/lx-music-mobile/issues/30
@lyswhut
安装好应用之后，可以进入启动页，然后就报错了：
error: Error: While trying to resolve module react-native-track-player from file /Users/codelang/android_project/lx-music-mobile/src/plugins/player/index.js, the package /Users/codelang/android_project/lx-music-mobile/node_modules/react-native-track-player/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/codelang/android_project/lx-music-mobile/node_modules/react-native-track-player/lib/index.js. Indeed, none of these files exist:
@MRwangqi 你是不是执行npm install时报错了？如果你有代理可以尝试为npm设置代理：
npm config set proxy http://host:port
npm config set https-proxy http://host:port
然后删除项目下的node_modules文件夹，重新执行npm install
@lyswhut 回看了下 npm install ，确实
npm ERR! > [email protected] prepare
npm ERR! > yarn build
npm ERR!
npm ERR! yarn run v1.22.17
npm ERR! $ rimraf lib && tsc
npm ERR! node_modules/@types/node/url.d.ts(861,19): error TS2300: Duplicate identifier 'URLSearchParams'.
npm ERR! node_modules/@types/node/url.d.ts(882,13): error TS2300: Duplicate identifier 'URLSearchParams'.
npm ERR! node_modules/@types/react-native/globals.d.ts(258,15): error TS2300: Duplicate identifier 'URLSearchParams'.
npm ERR! info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm ERR! npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm ERR! npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm ERR! npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm ERR! npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm ERR! npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm ERR! npm WARN deprecated [email protected]: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm ERR! error Command failed with exit code 2.
npm ERR! npm ERR! code 2
npm ERR! npm ERR! path /Users/codelang/.npm/_cacache/tmp/git-cloneefUNrA
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command sh -c yarn build
重复：https://github.com/lyswhut/lx-music-desktop/issues/359#issuecomment-727141278
我对安卓原生不熟悉，目前不打算去适配它， 熟悉安卓的同学可以去帮忙适配（JS部分的实现可以交给我做）， 可能有帮助的信息：
项目运行方式
项目环境准备
- 安装Node.js环境（如已安装请跳过）: 去 https://nodejs.org/download/release/v14.19.0/ 下载Node.js安装，安装完成后，打开命令行输入
node -v将会输出Node.js的版本号即表示已安装完成- 拉取代码: 克隆本仓库代码
- 安装依赖: 在项目根目录打开命令行，执行命令：
npm install，若此命令执行的过程中报错可以尝试百度报错内容找解决方法，或在此处贴出报错日志一起讨论解决- 使用Android Studio打开项目根目录下的
android文件夹，加载一遍gradle项目启动步骤
- 启动模拟器或连接真实设备
- 启动开发服务器: 在项目根目录打开命令行，执行命令：
npm run ar，若开发服务器意外停止了，可以执行npm start重新启动- 开发: 使用Android Studio打开项目根目录下的
android文件夹，即可在Android Studio内进行安卓代码的开发与调试若遇到问题可以回帖讨论 :)
桌面歌词相关的信息：#30
请问如何使用gradle构建目标平台？
请问如何使用gradle构建目标平台？
@Pr0pHesyer 将你的签名文件放在android/app/，然后在android/新建keystore.properties文件，填入你的签名信息：
storeFile=
storePassword=
keyAlias=
keyPassword=
最后在android/执行命令./gradlew assembleRelease，构建的安装包在android/app/build/outputs/apk/release/
@Pr0pHesyer 将你的签名文件放在
android/app/，然后在android/新建keystore.properties文件，填入你的签名信息：storeFile= storePassword= keyAlias= keyPassword=最后在
android/执行命令./gradlew assembleRelease，构建的安装包在android/app/build/outputs/apk/release/
十分感谢
实现方式1(图片效果)
需要开启桌面，自动判定是否有开启【墨•状态栏歌词】模块，开启了显示状态栏歌词，占用桌面歌词(无法显示)，模块关闭则继续显示回桌面歌词。
1、在 android/app/build.gradle 引入【墨•状态栏歌词】依赖 implementation 'com.github.577fkj:StatusBarApiExample:v2.0'
2、在 android/app/proguard-rules.pro 添加排除混淆语句 -keep class StatusBarLyric.API.StatusBarLyric {*;}
3、添加修改 android/app/src/main/java/cn/toside/music/mobile/lyric/LyricView 文件对应位置
【LyricView】（位置带行号）
1、引入包 import StatusBarLyric.API.StatusBarLyric; import cn.toside.music.mobile.R;
2、初始化状态栏歌词对象 // 初始化状态栏歌词 this.statusBarLyric = new StatusBarLyric(reactContext, ContextCompat.getDrawable(reactContext, R.mipmap.ic_launcher), reactContext.getPackageName(), true);
3、判断处理状态栏与桌面歌词1(结束还有1个}花括号需要添加) // 如果状态栏歌词模块未开启则显示原桌面歌词 if (!statusBarLyric.hasEnable()) {
4、判断处理状态栏与桌面歌词1 // 如果状态栏歌词模块未开启则显示原桌面歌词 if (!statusBarLyric.hasEnable()) handleShowLyric();
5、更新状态栏歌词 // 更新状态栏歌词 updateStatusBarLyric(text); private void updateStatusBarLyric(String lyric) { if (!statusBarLyric.hasEnable()) return; // 更新状态栏歌词 if (!TextUtils.isEmpty(lyric)) statusBarLyric.updateLyric(lyric); // 判断隐藏隐藏桌面歌词 if (textView != null) { destroyView(); windowManager = null; layoutParams = null; } }
6、停止状态栏歌词 public void destroy() { // 判断状态栏歌词是否开启，处理停止状态栏歌词还是桌面歌词 if (statusBarLyric != null && statusBarLyric.hasEnable()) { statusBarLyric.stopLyric(); } else { destroyView(); windowManager = null; layoutParams = null; } }
实现方式2(提供React方法需要JS配合处理)
该方式可配置开关，与桌面歌词互相独立不影响，由JS调用方法每次传入单条歌词。
1、同样添加依赖步骤
2、在 android/app/src/main/java/cn/toside/music/mobile/lyric/LyricModule 文件添加2个方法
@ReactMethod public void updateStatusBarLyric(String lyric) { if (statusBarLyric == null) { statusBarLyric = new StatusBarLyric(reactContext, ContextCompat.getDrawable(reactContext, R.mipmap.ic_launcher), reactContext.getPackageName(), true); } if (statusBarLyric.hasEnable()) statusBarLyric.updateLyric(lyric); }
@ReactMethod public void stopStatusBarLyric() { if (statusBarLyric != null && statusBarLyric.hasEnable()) { statusBarLyric.stopLyric(); } }
3、JS代码实现
实现方式2(提供React方法需要JS配合处理) 该方式可配置开关，与桌面歌词互相独立不影响，由JS调用方法每次传入单条歌词。
方式2需要依赖第三方插件吗？如果可以的话，尽量不要依赖第三方插件，因为大部分人还是没有ROOT手机的，
由于软件切后台后js一般会被抑制运行，歌词的更新还是需要在原生层更新，让桌面歌词、状态栏歌词共用一个LyricPlayer实例就行了，你可以提个PR吗？如果遇到什么问题我们可以讨论实现:)
从现在起，有了一个显示状态栏歌词的方式：通过调用第三方Xposed模块【墨•状态栏歌词】的API支持来状态栏歌词。
但考虑到要依赖第三方应用，并且是Xposed模块，预计用的人会比较少，所以暂不考虑将此特性合并到主分支（不会包含在正式版中）。
我现在将此特性放到statusbar-lyric分支上，并设置了构建任务，想要此功能的人可以去这里下载构建包：https://github.com/lyswhut/lx-music-mobile/actions/workflows/statusbar-lyric.yml
注：需要登录GitHub才能下载，如果你不知道怎么下载，可以去测试群文件下
从现在起，有了一个显示状态栏歌词的方式：通过调用第三方Xposed模块【墨•状态栏歌词】的API支持来状态栏歌词。 但考虑到要依赖第三方应用，并且是Xposed模块，预计用的人会比较少，所以暂不考虑将此特性合并到主分支（不会包含在正式版中）。 我现在将此特性放到
statusbar-lyric分支上，并设置了构建任务，想要此功能的人可以去这里下载构建包：https://github.com/lyswhut/lx-music-mobile/actions/workflows/statusbar-lyric.yml
这个特性分支也会一直合并 新的功能是么，它是一个不断类似于 rebase到 master分支的分支？
