### 下载地址
[飞书云文档](https://r0rvr854dd1.feishu.cn/drive/folder/IrVEfD67KlWZGkdqwjecLHFNnBb?from=from_copylink)
## 特性
- 插件化：本软件仅仅是一个播放器，本身**并不集成**任何平台的任何音源，所有的搜索、播放、歌单导入等功能全部基于**插件**。这也就意味着，**只要可以在互联网上搜索到的音源，只要有对应的插件，你都可以使用本软件进行搜索、播放等功能。** 关于插件的详细说明请参考 [安卓版 Readme 的插件部分](https://github.com/maotoumao/MusicFree#%E6%8F%92%E4%BB%B6)。
- 插件支持的功能：搜索（音乐、专辑、作者、歌单）、播放、查看专辑、查看作者详细信息、导入单曲、导入歌单、获取歌词等。
- 定制化：本软件可以通过主题包定义软件外观及背景，详见下方主题包一节。
- 无广告：基于 AGPL3.0 协议开源，将会保持免费。
- 隐私：软件所有数据存储在本地，本软件不会上传你的个人信息。
## 插件
插件协议和安卓版完全相同。
[示例插件仓库](https://github.com/maotoumao/MusicFreePlugins)，你可以根据[插件开发文档](https://musicfree.catcat.work/plugin/introduction.html) 开发适配于任意音源的插件。
## 主题包
主题包是一个文件夹，文件夹内必须包含两个文件：
```bash
index.css
config.json
```
### index.css
index.css 中可以覆盖界面中的任何样式。你可以通过定义 css 变量来完成大部分颜色的替换，也可以查看源代码，根据类名等覆盖样式。
支持的 css 变量如下：
``` css
:root {
--primaryColor: #f17d34; // 主色调
--backgroundColor: #fdfdfd; // 背景色
--dividerColor: rgba(0, 0, 0, 0.1); // 分割线颜色
--listHoverColor: rgba(0, 0, 0, 0.05); // 列表悬浮颜色
--listActiveColor: rgba(0, 0, 0, 0.1); // 列表选中颜色
--textColor: #333333; // 主文本颜色
--maskColor: rgba(51, 51, 51, 0.2); // 遮罩层颜色
--shadowColor: rgba(0, 0, 0, 0.2); // 对话框等阴影颜色
/** --shadow: // shadow属性 */
--placeholderColor: #f4f4f4; // 输入区背景颜色
--successColor: #08A34C; // 成功颜色
--dangerColor: #FC5F5F; // 危险颜色
--infoColor: #0A95C8; // 通知颜色
--headerTextColor: white; // 顶部文本颜色
}
```
具体的例子可以参考 [暗黑模式](https://github.com/maotoumao/MusicFreeThemePacks/blob/master/darkmode/index.css)
除了通过 css 定义常规样式外，也可以通过在 config.json 中定义 iframes 字段，用来把任意的 html 文件作为软件背景，这样可以实现一些单纯用 css 无法实现的效果。
### config.json
config.json 是一个配置文件。
```json
{
"name": "主题包的名称",
"preview": "#000000", // 预览图，支持颜色或图片；
"description": "描述文本",
"iframes": {
"app": "http://musicfree.catcat.work", // 整个软件的背景
"header": "", // 头部区域的背景
"body": "", // 侧边栏+主页面区域的背景
"side-bar": "", // 侧边栏区域的背景
"page": "", // 主页面区域的背景
"music-bar": "", // 底部音乐栏的背景
}
}
```
如果需要指向本地的图片，可以通过 ```@/``` 表示主题包的路径；preview、iframes、以及 iframes 指向的 html 文件都会把 ```@/``` 替换为 ```主题包路径```。详情可参考 [樱花主题](https://github.com/maotoumao/MusicFreeThemePacks/tree/master/sakura)
### 主题包示例
示例仓库：https://github.com/maotoumao/MusicFreeThemePacks
几个主题包效果截图：
#### 暗黑模式
[源代码](https://github.com/maotoumao/MusicFreeThemePacks/tree/master/darkmode)
#### 背景图片
[源代码](https://github.com/maotoumao/MusicFreeThemePacks/tree/master/night-star)
#### fliqlo
[源代码](https://github.com/maotoumao/MusicFreeThemePacks/tree/master/fliqlo)
#### 樱花
[源代码](https://github.com/maotoumao/MusicFreeThemePacks/tree/master/sakura)
#### 雨季
[源代码](https://github.com/maotoumao/MusicFreeThemePacks/tree/master/rainy-season)
## 启动项目
下载仓库代码之后，在根目录下执行：
```bash
npm install
npm start
```
## 支持这个项目
如果你喜欢这个项目，或者希望我可以持续维护下去，你可以通过以下任何一种方式支持我;)
1. Star 这个项目，分享给你身边的人；
2. 关注公众号【一只猫头猫】获取最新信息；
## 截图
================================================
FILE: changelog.md
================================================
`2025-10-24 v0.0.8`
1. 【修复】修复了一些可能导致白屏的问题
`2025-03-30 v0.0.7`
1. 【功能】开发者模式：狂点托盘图标可打开开发者工具
2. 【修复】修复退出应用时可能出现的进程残留的问题（感谢@dyfllll）
3. 【修复】修复windows控制中心无法控制暂停/播放状态的问题
4. 【修复】修复打开歌词窗口/迷你模式窗口歌词可能始终为空的问题
5. 【修复】修复配置出错时软件白屏的问题
6. 【修复】修复任务栏上的关闭按钮表现和设置中的选项不一致的问题
`2024-12-25 v0.0.6`
1. 【优化】大量代码重构
2. 【功能】新增播放失败时不寻找其他音质版本的配置
3. 【功能】歌单内支持通过 ctrl 键盘多选歌曲批量操作
4. 【功能】支持自定义主窗口大小
5. 【功能】支持自定义歌词窗口大小
6. 【功能】调整播放详情页面的样式
7. 【功能】支持了评论功能（需要插件支持）
8. 【修复】修复了歌单id无法带特殊字符的问题
9. 【修复】修复了音源太多时布局异常的问题
`2024-06.25 v0.0.5`
【修复】修复重启软件后歌单丢失的问题；如果未出现上述问题可忽略此版本更新
`2024-06.16 v0.0.4`
1. 【功能】播放列表支持拖拽排序
2. 【功能】支持多语言。本次支持简体中文、繁体中文、英文、西班牙语
3. 【功能】支持歌词翻译功能（需要插件实现 getLyric 方法）
4. 【功能】新增最近播放，默认保存最近播放的 500 首歌
5. 【功能】新增小窗模式
6. 【功能】新增音频设备移除时的行为设置，现在可以让拔掉耳机的时候停止播放了
7. 【功能】新增单独的主题页，可以在主题市场中直接使用主题；本地.mftheme 主题可以直接拖拽到播放器安装
8. 【优化】本地音乐会尝试读取本地路径下的同名 .lrc 文件作为歌词；同时会读取同名 -tr.lrc 文件作为翻译
9. 【修复】修复部分情况下本地歌词无法读取的问题
10. 【修复】修复 linux 托盘点击无效的问题
`2023-12.23 v0.0.3`
1. 【功能】插件支持拖拽排序，该排序会影响到搜索结果、排行榜、热门歌单的展示顺序
2. 【功能】播放列表支持多选快捷键(Ctrl + A 全选、按住 Shift 批量选择)
3. 【功能】本地音乐新增搜索功能
4. 【功能】歌单内歌曲支持拖拽排序
5. 【功能】新增了一些插件设置，比如启动软件时自动更新插件
6. 【功能】新增缓存设置，可以在设置中清空软件缓存
7. 【功能】新增网络代理设置
8. 【功能】插件协议更新：新增支持「用户变量」。
9. 【功能】插件协议更新：榜单列表支持分页
10. 【功能】歌单支持 WebDAV 备份；插件预置的 npm 包新增 webdav，配合 WebDAV 插件即可播放 WebDAV 源
11. 【优化】排序/过滤后，点击歌单列表会播放排序/过滤后的歌曲，而非全部歌曲
12. 【优化】优化批量删除歌曲失败时的表现
13. 【优化】优化歌单内歌曲较多时的体验
14. 【优化】优化歌曲名称超长时右下角菜单的显示
15. 【优化】加载本地歌曲时会自动识别歌曲元信息的编码，减少出现乱码的可能性
16. 【优化】优化本地歌曲过多时的拖拽表现
17. 【优化】优化 windows7/8 部分按钮的表现
18. 【修复】修复 macos、linux 本地歌曲无法播放的问题
19. 【修复】修复部分情况下无法右键打开下载文件夹的问题
20. 【修复】修复 macos 输入框无法粘贴的问题
21. 【修复】修复部分情况下快捷键无法删除的问题
22. 【修复】重写了本地歌单逻辑，修复收藏歌单部分情况下无法点击的问题
`2023-11.5 v0.0.2`
1. 【功能】支持播放 .m3u8 源
2. 【功能】打开播放列表时锚定到当前正在播放的歌曲
3. 【功能】新增搜索歌词功能，你可以在歌曲详情页右键点击，并单击【搜索歌词】功能唤起搜索弹窗
4. 【功能】重写了本地歌曲的导入机制，新增本地音乐视图（列表、作者、专辑、文件夹）
5. 【功能】新增支持隐藏歌曲列表的部分列
6. 【功能】新增快捷键：喜欢/不喜欢歌曲
7. 【功能】已经下载的歌曲/本地歌曲支持右键打开
8. 【功能, windows】新增缩略图配置，你可以选择在任务栏悬浮图标时展示原窗口或专辑封面
9. 【功能, windows】新增任务栏播放控制按钮
10. 【优化】优化主题包安装机制：取消原本安装文件夹的机制，修改为安装 .mftheme 或 .zip 的文件，支持批量安装
11. 【优化】优化了从热门歌单页详情页返回时的表现
12. 【优化】优化了歌曲详情页右键按钮的表现
13. 【优化】优化了主窗口和歌词窗口的通信机制
14. 【修复】修复作者页歌曲显示不全的问题
15. 【修复】修复包含特殊字符时下载失败的问题
16. 【修复, macos】修复 macos 图标显示异常的问题
17. 【修复, linux】修复 linux 无法最小化的问题
18. 【打包】新增 windows 免安装版、mac m1/m2 版、linux 版
19. 【版本号】桌面版后缀取消 -alpha 后缀，以正式版本号发布。
`2023.9.5 v0.0.1-alpha.0`
1. 【功能】新增搜索历史记录
2. 【功能】新增下载歌词、调整歌词字体大小功能
3. 【功能】桌面歌词支持自定义字体
4. 【功能】支持选择音频输出设备
5. 【功能】下载歌曲功能
6. 【功能】设置中新增快捷键配置
7. 【功能】支持 windows8.1 及以下系统（下载链接中的 windows-legacy-setup.exe，win10/11 下载哪个 exe 都行）
8. 【优化】调整左下角歌曲信息的可响应区域
9. 【修复】修复本地歌曲只显示 100 首的问题
10. 【修复】修复 mac 系统无法移动桌面歌词的问题
11. 【修复】修复本地插件安装失败的问题
================================================
FILE: config/webpack.main.config.ts
================================================
import type { Configuration } from "webpack";
import path from "path";
import { rules } from "./webpack.rules";
export const mainConfig: Configuration = {
/**
* This is the main entry point for your application, it's the first file
* that runs in the main process.
*/
entry: {
index: "./src/main/index.ts",
},
// Put your normal webpack config below here
module: {
rules,
},
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json", '.node'],
alias: {
"@": path.join(__dirname, "../src"),
"@main": path.join(__dirname, "../src/main"),
"@native": path.join(__dirname, "../src/main/native_modules"),
"@shared": path.join(__dirname, "../src/shared")
},
},
output: {
filename: "[name].js",
},
externals: ['sharp']
};
================================================
FILE: config/webpack.plugins.ts
================================================
import type IForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const relocateLoader = require("@vercel/webpack-asset-relocator-loader");
export const plugins = [
new ForkTsCheckerWebpackPlugin({
logger: "webpack-infrastructure",
}),
{
apply(compiler: any) {
compiler.hooks.compilation.tap(
"webpack-asset-relocator-loader",
(compilation: any) => {
relocateLoader.initAssetCache(compilation, "native_modules");
}
);
},
},
];
================================================
FILE: config/webpack.renderer.config.ts
================================================
import type { Configuration } from "webpack";
import path from "path";
import { rules } from "./webpack.rules";
import { plugins } from "./webpack.plugins";
rules.push(
{
test: /\.css$/,
use: [{ loader: "style-loader" }, { loader: "css-loader" }],
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" },
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.svg$/,
use: [
{
loader: "@svgr/webpack",
options: {
prettier: false,
svgo: false,
svgoConfig: {
plugins: [{ removeViewBox: false }],
},
titleProp: true,
ref: true,
},
},
],
}
);
export const rendererConfig: Configuration = {
module: {
rules,
},
plugins,
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".scss"],
alias: {
"@": path.join(__dirname, "../src"),
"@renderer": path.join(__dirname, "../src/renderer"),
"@renderer-lrc": path.join(__dirname, "../src/renderer-lrc"),
"@shared": path.join(__dirname, "../src/shared")
},
},
externals: process.platform !== "darwin" ? ["fsevents"] : undefined,
};
================================================
FILE: config/webpack.rules.ts
================================================
import type { ModuleOptions } from 'webpack';
export const rules: Required {
onAnimationEnd?.(...args);
if (!showIf) {
// 如果showIf是false，表示当前播放的是卸载状态的动画
setShouldMount(false);
onUnmountAnimationEnd?.();
} else {
setShouldMount(true);
onMountAnimationEnd?.();
}
setAnimationPlaying(prev => !prev);
}}
>
) : null;
}
================================================
FILE: src/renderer/components/ArtistItem/index.scss
================================================
.components--artist-item-container {
$width: 140px;
$height: 216px;
width: $width;
height: $height;
& .artist-img-wrapper {
width: $width;
height: $width;
-webkit-user-drag: none;
border-radius: 8px;
overflow: hidden;
position: relative;
& .artist-play-info {
position: absolute;
box-sizing: border-box;
left: 0;
bottom: 0;
background-color: rgba($color: #000000, $alpha: 0.2);
backdrop-filter: blur(50px);
width: 100%;
height: 1.8rem;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: space-between;
color: #eee;
padding-left: 4px;
padding-right: 4px;
white-space: nowrap;
& .play-count {
display: flex;
align-items: center;
& svg {
margin-right: 2px;
}
}
}
& img {
position: absolute;
top: 0;
left: 0;
width: $width;
height: $width;
-webkit-user-drag: none;
border-radius: 8px;
object-fit: cover;
transition: transform ease-out 400ms;
&:hover {
transform: scale(1.1);
}
}
}
& .media-info {
margin-top: 6px;
height: $height - $width - 6px;
width: 100%;
& .title {
font-size: 1.1rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover {
color: var(--primaryColor);
}
}
& .desc {
font-size: 0.9rem;
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
opacity: 0.8;
overflow: hidden;
}
}
}
================================================
FILE: src/renderer/components/ArtistItem/index.tsx
================================================
import { setFallbackAlbum } from "@/renderer/utils/img-on-error";
import "./index.scss";
import albumImg from "@/assets/imgs/album-cover.jpg";
import { memo } from "react";
interface IArtistItemProps {
artistItem: IArtist.IArtistItem;
onClick?: (artistItem: IArtist.IArtistItem) => void;
}
function ArtistItem(props: IArtistItemProps) {
const { artistItem, onClick } = props;
return (
{
onClick?.(artistItem);
}}
>
{/*
*/}
);
}
export default memo(
ArtistItem,
(prev, curr) =>
prev.artistItem === curr.artistItem && prev.onClick === curr.onClick,
);
================================================
FILE: src/renderer/components/BottomLoadingState/index.scss
================================================
.bottom-loading-state {
width: 100%;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.bottom-loading-state--reach-end {
opacity: 0.8;
}
.bottom-loading-state--loadmore {
&:hover {
color: var(--primaryColor);
}
}
.bottom-loading-state--loading {
display: flex;
align-items: center;
}
$loading-size: 20px;
.lds-dual-ring {
display: inline-block;
width: $loading-size;
height: $loading-size;
margin-right: 0.5rem;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: $loading-size * 0.8;
height: $loading-size * 0.8;
margin: $loading-size * 0.1;
border-radius: 50%;
border: $loading-size * 0.1 solid var(--textColor);
border-color: var(--textColor) transparent var(--textColor) transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
================================================
FILE: src/renderer/components/BottomLoadingState/index.tsx
================================================
import { useEffect, useRef } from "react";
import { RequestStateCode } from "@/common/constant";
import "./index.scss";
import { useTranslation } from "react-i18next";
import AppConfig from "@shared/app-config/renderer";
interface IProps {
state: RequestStateCode;
onLoadMore?: () => void;
}
export default function BottomLoadingState(props: IProps) {
const { state, onLoadMore } = props;
const stateRef = useRef
{mediaItem?.createAt ? (
dayjs(mediaItem.createAt).format("YYYY-MM-DD")
) : (
)}
{artistItem?.name}
{(artistItem?.description ?? "").split("\\n").map((item, index) => (
{item}
))}
{component}
;
}
================================================
FILE: src/renderer/components/Checkbox/index.scss
================================================
.checkbox-container {
width: 1rem;
height: 1rem;
border-radius: 2px;
border: 1px solid currentColor;
position: relative;
& svg {
position: absolute;
width: 1rem;
height: 1rem;
left: 0;
top: 0;
}
}
================================================
FILE: src/renderer/components/Checkbox/index.tsx
================================================
import { CSSProperties } from "react";
import SvgAsset from "../SvgAsset";
import "./index.scss";
interface ICheckboxProps {
checked?: boolean;
onChange?: (newChecked: boolean) => void;
style?: CSSProperties
}
export default function Checkbox(props: ICheckboxProps) {
const { checked, onChange, style } = props;
return (
{
onChange?.(!checked);
}}
>
{checked ?
);
}
================================================
FILE: src/renderer/components/Condition/index.tsx
================================================
import { ReactNode } from "react";
interface IConditionProps {
condition: any;
truthy?: ReactNode;
falsy?: ReactNode;
children?: ReactNode;
}
export default function Condition(props: IConditionProps) {
const { condition, truthy, falsy, children } = props;
return <>{condition ? truthy ?? children : falsy};
}
interface IIfProps {
condition: any;
children?: any;
}
interface ICondProps {
children?: ReactNode | ReactNode[];
}
function Truthy(props: ICondProps) {
return <>{props?.children};
}
function Falsy(props: ICondProps) {
return <>{props?.children};
}
function If(props: IIfProps) {
const { condition, children } = props;
if (!children) {
return null;
}
let _children: any;
if (Array.isArray) {
_children = children.map((it: any) =>
condition
? it.type !== Falsy
? it
: null
: it.type !== Truthy
? it
: null,
);
} else {
_children = condition
? _children!.type !== Falsy
? _children
: null
: _children.type !== Truthy
? _children
: null;
}
return _children;
}
If.Truthy = Truthy;
If.Falsy = Falsy;
function IfTruthy(props: IIfProps) {
const { condition, children } = props;
return condition ? children : null;
}
function IfFalsy(props: IIfProps) {
const { condition, children } = props;
return condition ? null : children;
}
export { If, IfTruthy, IfFalsy };
================================================
FILE: src/renderer/components/ContextMenu/index.scss
================================================
.context-menu--single-column-container {
position: fixed;
overflow-y: auto;
z-index: 999999;
border-radius: 6px;
& .divider {
margin: 0;
height: 1px;
}
& .menu-item {
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
padding-left: 8px;
padding-right: 8px;
position: relative;
& span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
& .menu-item-icon {
$item-size: 1.2rem;
width: $item-size;
height: $item-size;
margin-right: 8px;
& svg {
width: $item-size;
height: $item-size;
}
}
& .menu-item-expand {
$tag-size: 4px;
border: $tag-size solid transparent;
border-left-color: currentColor;
position: absolute;
right: 12px;
}
&:hover {
background: var(--listHoverColor);
}
}
}
================================================
FILE: src/renderer/components/ContextMenu/index.tsx
================================================
import Store from "@/common/store";
import SvgAsset, { SvgAssetIconNames } from "../SvgAsset";
import "./index.scss";
import Condition, { If, IfTruthy } from "../Condition";
import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
export interface IContextMenuItem {
/** 左侧图标 */
icon?: SvgAssetIconNames;
/** 列表标题 */
title?: string;
/** 是否是分割线 */
divider?: boolean;
/** 是否展示 */
show?: boolean;
/** 点击事件 */
onClick?: (value?: IContextMenuItem) => void;
/** 子菜单 */
subMenu?: IContextMenuItem[];
}
interface IContextMenuData {
/** 菜单 */
menuItems?: IContextMenuItem[];
/** 出现位置 x */
x: number;
/** 出现位置 y */
y: number;
/** 设置子目录 */
setSubMenu?: (
subMenu?: Omit
{menuItems.map((item, index) => (
))}
);
}
const offset = 6;
export function ContextMenuComponent() {
const contextMenuData = contextMenuDataStore.useValue();
const { menuItems, x, y, width, height, component } = contextMenuData ?? {};
const [subMenuData, setSubMenuData] = useState {
item.onClick?.();
onItemClick?.(item);
}}
onMouseEnter={(e) => {
const subMenu = item.subMenu;
if (!subMenu) {
setSubMenu?.(null, item);
return;
}
const realPos =
y +
(e.target as HTMLDivElement).offsetTop -
menuContainerRef.current.scrollTop;
const realHeight = Math.min(
subMenu.length * menuItemHeight,
menuContainerMaxHeight,
);
let [subX, subY] = [
x - menuItemWidth - offset,
realPos - realHeight / 2,
];
if (x < window.innerWidth - x - offset - menuItemWidth) {
subX = x + menuItemWidth + offset;
}
if (subY < 54) {
subY = 54;
}
if (subY + realHeight > window.innerHeight - 64 - offset) {
subY = window.innerHeight - 64 - realHeight - offset;
}
setSubMenu?.(
{
menuItems: subMenu,
x: subX,
y: subY,
},
item,
);
}}
style={{
height: menuItemHeight,
}}
>
{item.title}
{component}
{
const itemIndex = +e.dataTransfer.getData("itemIndex");
const itemTag = e.dataTransfer.getData("itemTag");
setDraggingOver(false);
const _itemTag = (itemTag === "null" || itemTag === "undefined") ? null : `${itemTag}`;
const _tag = tag ? `${tag}` : null;
if (_itemTag !== _tag) {
// tag 不一致 忽略
return;
}
if (itemIndex >= 0) {
onDrop?.(itemIndex, rowIndex);
}
}}
>
);
return insideTable ? (
{t("empty.hint_empty")}
);
}
================================================
FILE: src/renderer/components/Header/index.scss
================================================
.header-container {
width: 100vw;
height: var(--appHeaderHeight, 54px);
background-color: var(--primaryColor);
display: flex;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
padding-left: 16px;
-webkit-app-region: drag;
flex-shrink: 0;
font-size: 1rem;
position: relative;
z-index: 2000;
& .left-part {
display: flex;
align-items: center;
& .logo {
width: 142px;
height: 1.2rem;
color: var(--headerTextColor);
display: flex;
align-items: center;
& svg {
height: 1.1rem;
width: auto;
}
}
& .header-search {
-webkit-app-region: none;
background-color: var(
--headerPlaceholderColor,
rgba($color: #000, $alpha: 0.14)
);
position: relative;
min-width: 220px;
border-radius: 8px;
padding: 0.5rem 8px;
display: flex;
align-items: center;
margin-left: 14px;
& .header-search-input {
flex: auto;
font-size: 1rem;
line-height: 1.2rem;
outline: none;
border: none;
background-color: transparent !important;
color: var(--headerTextColor);
padding: 0;
&::placeholder {
opacity: 0.7;
user-select: none;
color: var(--headerTextColor);
}
}
& .search-submit {
$box-size: 1.3em;
margin-left: 2px;
width: #{$box-size};
height: #{$box-size};
color: var(--headerTextColor);
opacity: 0.7;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
&:hover {
opacity: 1;
}
& svg {
width: #{$box-size};
height: #{$box-size};
}
}
}
}
& .right-part {
height: 100%;
color: var(--headerTextColor);
display: flex;
justify-content: flex-end;
align-items: center;
-webkit-app-region: none;
padding-right: 16px;
gap: 4px;
& .header-divider {
height: 16px;
width: 1px;
opacity: 0.2;
background-color: var(--headerTextColor);
}
& .sparkles-icon:hover {
animation: vibrate 0.3s linear infinite both;
}
& .header-button {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 20px;
opacity: 0.6;
cursor: pointer;
&:hover {
opacity: 1;
}
& svg {
width: 20px;
height: 20px;
}
}
}
}
@keyframes vibrate {
0% {
transform: translate(0);
}
20% {
transform: translate(-1px, 1px);
}
40% {
transform: translate(-1px, -1px);
}
60% {
transform: translate(1px, 1px);
}
80% {
transform: translate(1px, -1px);
}
100% {
transform: translate(0);
}
}
================================================
FILE: src/renderer/components/Header/index.tsx
================================================
import SvgAsset from "../SvgAsset";
import "./index.scss";
import { showModal } from "../Modal";
import { useNavigate } from "react-router-dom";
import { useRef, useState } from "react";
import HeaderNavigator from "./widgets/Navigator";
import MusicDetail from "../MusicDetail";
import Condition from "../Condition";
import SearchHistory from "./widgets/SearchHistory";
import { addSearchHistory } from "@/renderer/utils/search-history";
import { useTranslation } from "react-i18next";
import useAppConfig from "@/hooks/useAppConfig";
import AppConfig from "@shared/app-config/renderer";
import { appUtil, appWindowUtil } from "@shared/utils/renderer";
import { musicDetailShownStore } from "@renderer/components/MusicDetail/store";
export default function AppHeader() {
const navigate = useNavigate();
const inputRef = useRef
{
setShowSearchHistory(true);
}}
onKeyDown={(key) => {
if (key.key === "Enter") {
onSearchSubmit();
}
}}
onFocus={() => {
setShowSearchHistory(true);
}}
onBlur={() => {
setTimeout(() => {
if (!isHistoryFocusRef.current) {
setShowSearchHistory(false);
}
}, 0);
}}
>
{
search(item);
inputRef.current.value = item;
}}
onHistoryPanelBlur={() => {
isHistoryFocusRef.current = false;
setShowSearchHistory(false);
}}
onHistoryPanelFocus={() => {
isHistoryFocusRef.current = true;
setShowSearchHistory(true);
}}
>
{
showModal("Sparkles");
}}
>
{
navigate("/main/theme");
MusicDetail.hide();
}}
>
{
navigate("/main/setting");
MusicDetail.hide();
}}
>
{
appWindowUtil.setMinimodeWindow(!isMiniMode);
if (!isMiniMode) {
appWindowUtil.minMainWindow(true);
}
}}
>
{
appWindowUtil.minMainWindow();
}}
>
{
appWindowUtil.toggleMainWindowMaximize();
}}>
{
const exitBehavior = AppConfig.getConfig("normal.closeBehavior");
if (exitBehavior === "minimize") {
appWindowUtil.minMainWindow(true);
} else {
appUtil.exitApp();
}
}}
>
{
if (isMusicDetailShown()) {
MusicDetail.hide();
} else {
navigate(-1);
}
}}
>
{
if (isMusicDetailShown()) {
MusicDetail.hide();
} else {
navigate(1);
}
}}
>
{t("app_header.search_history")}
{
removeHistory();
}}
>
{
onHistoryClick?.(historyItem);
}}
>
{historyItem}
))}
{
e.stopPropagation();
removeHistory(historyItem);
}}
>
{
showModal("AddNewSheet", {
initMusicItems: musicItems,
});
}}
>
{t("modal.create_local_sheet")}
{allSheets.map((sheet) => (
{
MusicSheet.frontend.addMusicToSheet(musicItems, sheet.id);
hideModal();
}}
>
{sheet.id === defaultSheet.id
? t("media.default_favorite_sheet_name")
: sheet.title}
))}
{
if ((e.target as HTMLElement)?.id === baseId) {
trapCloseRef.current = true;
} else {
trapCloseRef.current = false;
}
}}
onMouseUp={(e) => {
if ((e.target as HTMLElement)?.id === baseId && trapCloseRef.current) {
if (defaultClose) {
hideModal();
} else {
onDefaultClick?.();
}
}
}}
onMouseLeave={() => {
trapCloseRef.current = false;
}}
onMouseOut={() => {
trapCloseRef.current = false;
}}
>
{children}
);
}
interface IHeaderProps {
children: ReactNode;
}
function Header(props: IHeaderProps) {
const { children } = props;
return (
{children}
);
}
Base.Header = Header;
export default Base;
================================================
FILE: src/renderer/components/Modal/templates/ExitConfirm/index.scss
================================================
.modal--exit-confirm-container {
width: 440px;
height: 240px;
border-radius: 8px;
}
================================================
FILE: src/renderer/components/Modal/templates/ExitConfirm/index.tsx
================================================
import { useTranslation } from "react-i18next";
import Base from "../Base";
import "./index.scss";
export default function ExitConfirm() {
const { t } = useTranslation();
return (
{
hideModal();
}}
>
{t("modal.exit_confirm")}
);
}
================================================
FILE: src/renderer/components/Modal/templates/ImportMusicSheet/index.scss
================================================
.modal--import-music-sheet {
width: 360px;
& .content-container {
max-height: 540px;
min-height: 100px;
}
& .plugin-item {
box-sizing: border-box;
width: 100%;
height: 3rem;
line-height: 3rem;
font-size: 1rem;
padding-left: 1rem;
padding-right: 1rem;
&:hover {
background: var(--listHoverColor);
}
}
}
================================================
FILE: src/renderer/components/Modal/templates/ImportMusicSheet/index.tsx
================================================
import { hideModal, showModal } from "../..";
import Base from "../Base";
import { toast } from "react-toastify";
import { useTranslation } from "react-i18next";
import "./index.scss";
import NoPlugin from "@renderer/components/NoPlugin";
import PluginManager from "@shared/plugin-manager/renderer";
interface IProps {
plugins: IPlugin.IPluginDelegate[];
}
export default function ImportMusicSheet(props: IProps) {
const { plugins } = props;
const { t } = useTranslation();
return (
{
plugins?.length > 0 ? <>{plugins.map((it) => (
{
hideModal();
showModal("SimpleInputWithState", {
title: t("plugin.method_import_music_sheet"),
withLoading: true,
loadingText: t("plugin_management_page.importing_media"),
placeholder: t(
"plugin_management_page.placeholder_import_music_sheet",
{
plugin: it.platform,
},
),
maxLength: 1000,
onOk(text) {
return PluginManager.callPluginDelegateMethod(
it,
"importMusicSheet",
text.trim(),
);
},
onPromiseResolved(result) {
hideModal();
showModal("AddMusicToSheet", {
musicItems: result as IMusic.IMusicItem[],
});
},
onPromiseRejected() {
toast.error(t("plugin_management_page.import_failed"));
},
hints: it.hints?.importMusicSheet,
});
}}
>
{it.platform}
))} :
{t("modal.subscription_remarks")}
{
setSubscription((prev) => {
const newSub = [...prev];
newSub[index].title = e.target.value;
return newSub;
});
}}
>
{t("modal.subscription_links")}
{
setSubscription((prev) => {
const newSub = [...prev];
newSub[index].srcUrl = e.target.value;
return newSub;
});
}}
>
{
setSubscription((prev) => [
...prev,
{
title: "",
srcUrl: "",
},
]);
}}
>
{t("common.add")}
{
setUserPreference(
"subscription",
subscription.filter((item) =>
item.srcUrl.match(/https?:\/\/.+\.js(on)?/),
),
);
toast.success(t("modal.subscription_save_success"));
hideModal();
}}
>
{t("common.save")}
{content}
{
onCancel?.();
hideModal();
}}
>
{t("common.cancel")}
{t("common.confirm")}
{
setInputSearch(evt.target.value);
}}
onKeyDown={(key) => {
if (key.key === "Enter") {
searchLyric(inputSearch);
}
}}
>
{
searchLyric(inputSearch);
}}
>
{
{(data?.data ?? []).map((it) => (
}
{
if (musicItem) {
try {
await linkLyric(musicItem, it);
if (trackPlayer.isCurrentMusic(musicItem)) {
trackPlayer.fetchCurrentLyric(true);
}
toast.success(t("modal.media_lyric_linked"));
hideModal();
} catch (e) {
toast.error(`${t("modal.media_lyric_link_failed")} ${e?.message ?? e}`);
}
}
}}
>
))}
{it.title}
{it.artist}
{choices.map((choice, index) => (
{
setSelectedIndex(index);
}}
>
{choice.label ?? choice.value}
))}
{
setExtraChecked((prev) => !prev);
}}
>
{extra}
{
hideModal();
}}
>
{t("common.cancel")}
{
onOk?.(choices[selectedIndex]?.value, extraChecked);
hideModal();
}}
>
{t("common.confirm")}
{
setInputText(e.target.value.slice(0, maxLength));
}}
value={inputText}
>
{
const result = onOk?.(inputText);
if (withLoading) {
setLoading(true);
}
result
?.then?.((res: any) => {
if (isMounted.current) {
onPromiseResolved?.(res);
setLoading(false);
}
})
?.catch((e: any) => {
if (isMounted.current) {
onPromiseRejected?.(e);
setLoading(false);
}
});
}}
>
{okText ?? t("common.confirm")}
{hints?.map((hint, index) => (
{hint}
))}
首先感谢你使用这款软件。开发这款软件的初衷首先是满足自己日常的需求，顺便分享出来，如果能对更多人有帮助那再好不过。
桌面版诞生于安卓版，在开发安卓版本的过程中逐渐发现有些地方的设计不合理，有些地方的代码也不太好，然后想到桌面版可以扩展出更多好玩的东西，所以趁着换工作的间隙，肝出了这个桌面版（的半成品）。安卓版本可以点击这里，后续如果有些更新可能会放在公众号上，也可以点个关注。（偶尔也会在公众号发一些技术文章，或者写个日记之类的，反正就随意吧）
本软件完全免费，并基于GPL协议开源，仅供学习参考使用，不可用于商业目的。代码地址： Github{" "} Gitee。
本软件仅仅是一个本地播放器，也可以通过插件扩展第三方源，插件可以完成包括播放、搜索在内的大部分功能；如果你是从第三方下载的插件，请一定谨慎识别这些插件的安全性，保护好自己。（注意：插件以及插件可能产生的数据与本软件无关，请使用者合理合法使用。）
还请注意本软件只是个人的业余项目，距离正式版也有很长一段距离。如果你在找成熟稳定的音乐软件，可以考虑其他优秀的软件。当然我会一直维护，让它变得尽可能的完善一些。业余时间用爱发电，进度慢还请见谅。如果你想帮忙提交代码或者开发一些功能，欢迎联系我（公众号留言/发邮件都行）。
最后，如果真的有人看到这里，希望这款软件可以帮到你，这也是这款软件存在的意义。
by: 猫头猫
但愿有一天，我可以不受客观因素约束，把足够的时间投入到我所热爱的事情中（猫猫叹气
{t("modal.latest_version")}
{update.version}
{t("modal.current_version")}
{currentVersion}
{update.changeLog.map((item, index) => (
{item}
))} {
setUserPreference("skipVersion", update.version);
hideModal();
}}
>
{t("modal.skip_this_version")}
{
shellUtil.openExternal(update.download[0]);
}}
>
{t("common.update")}
{t("modal.scan_local_music_hint")}
{
const result = await dialogUtil.showOpenDialog({
title: t("modal.scan_local_music"),
properties: ["openDirectory", "createDirectory"],
});
if (!result.canceled) {
const selected = result.filePaths[0];
if (!localDirs.includes(selected)) {
const changeLog = changeLogRef.current;
setCheckedDirs((prev) => {
return new Set([...prev, selected]);
});
setLocalDirs((prev) => [...prev, selected]);
changeLog.set(selected, "add");
}
}
}}
>
{t("modal.add_folder")}
{
setCheckedDirs((prev) => {
const changeLog = changeLogRef.current;
const itemChangeLog = changeLog.get(item);
const isChecked = prev.has(item);
// 如果此次没有任何变动，说明是旧有的，此时需要删除监听
if (!itemChangeLog) {
changeLog.set(item, isChecked ? "delete" : "add");
} else if (
(itemChangeLog === "add" && isChecked) ||
(itemChangeLog === "delete" && !isChecked)
) {
changeLog.delete(item);
}
if (isChecked) {
prev.delete(item);
} else {
prev.add(item);
}
return new Set(prev);
});
}}
>
);
})}
{item}
{
e.stopPropagation();
const changeLog = changeLogRef.current;
const itemChangeLog = changeLog.get(item);
// 如果此次没有任何变动，说明是旧有的，此时需要删除监听
if (!itemChangeLog) {
changeLog.set(item, "delete");
} else if (itemChangeLog === "add") {
// 此次新增，但是被删掉了
changeLog.delete(item);
console.log("heredelete", changeLog);
}
setLocalDirs((prev) =>
prev.filter((it) => it !== item),
);
setCheckedDirs((prev) => {
prev.delete(item);
return new Set(prev);
});
}}
>
{
setUserPreferenceIDB("localWatchDir", localDirs);
setUserPreferenceIDB("localWatchDirChecked", [...checkedDirs]);
localMusic.changeWatchPath(changeLogRef.current);
hideModal();
}}
>
{t("common.confirm")}
{
trackPlayer.skipToPrev();
}}>
{
if(playerState === PlayerState.Playing) {
trackPlayer.pause();
} else {
trackPlayer.resume();
}
}}
>
{
trackPlayer.skipToNext();
}}
>
{
trackPlayer.toggleRepeatMode();
}}
title={
repeatMode === RepeatMode.Loop
? t("media.music_repeat_mode_loop")
: repeatMode === RepeatMode.Queue
? t("media.music_repeat_mode_queue")
: t("media.music_repeat_mode_shuffle")
}
>
{
if (getCurrentPanel()?.type === "PlayList") {
hidePanel();
} else {
showPanel("PlayList", {
coverHeader: musicDetailShownStore.getValue(),
});
}
}}
>
{
setShowVolumeBubble(true);
}}
onMouseOut={() => {
setShowVolumeBubble(false);
}}
onClick={(e) => {
if (tmpVolumeRef.current === null) {
tmpVolumeRef.current = 0;
}
tmpVolumeRef.current =
tmpVolumeRef.current === volume
? volume === 0
? 1
: 0
: tmpVolumeRef.current;
trackPlayer.setVolume(tmpVolumeRef.current);
tmpVolumeRef.current = volume;
}}
>
);
}
function SpeedBtn() {
const speed = useSpeed();
const [showSpeedBubble, setShowSpeedBubble] = useState(false);
const tmpSpeedRef = useRef {
e.stopPropagation();
}}
>
{
trackPlayer.setVolume(val as number);
}}
value={volume}
styles={{
track: {
background: "var(--primaryColor)",
},
handle: {
height: 12,
width: 12,
marginLeft: -4,
borderColor: "var(--primaryColor)",
},
rail: {
background: "#d8d8d8",
},
}}
>
{(volume * 100).toFixed(0)}%
{
setShowSpeedBubble(true);
}}
onMouseOut={() => {
setShowSpeedBubble(false);
}}
onClick={() => {
if (tmpSpeedRef.current === null || tmpSpeedRef.current === speed) {
tmpSpeedRef.current = 1;
}
trackPlayer.setSpeed(tmpSpeedRef.current);
tmpSpeedRef.current = speed;
}}
>
);
}
function QualityBtn() {
const quality = useQuality();
const { t } = useTranslation();
return (
{
e.stopPropagation();
}}
>
{
trackPlayer.setSpeed(val as number);
}}
value={speed}
trackStyle={{
background: "var(--primaryColor)",
}}
handleStyle={{
height: 12,
width: 12,
marginLeft: -4,
borderColor: "var(--primaryColor)",
}}
railStyle={{
background: "#d8d8d8",
}}
>
{speed.toFixed(2)}x
{
showModal("SelectOne", {
title: t("music_bar.choose_music_quality"),
defaultValue: quality,
defaultExtra: true,
extra: t("music_bar.only_set_for_current_music"),
choices: [
{
value: "low",
label: t("media.music_quality_low"),
},
{
value: "standard",
label: t("media.music_quality_standard"),
},
{
value: "high",
label: t("media.music_quality_high"),
},
{
value: "super",
label: t("media.music_quality_super"),
},
],
onOk(value, extra) {
trackPlayer.setQuality(value as IMusic.IQualityKey);
if (!extra) {
AppConfig.setConfig({
"playMusic.defaultQuality": value,
});
}
},
});
}}
>
);
}
function LyricBtn() {
const enableDesktopLyric = useAppConfig("lyric.enableDesktopLyric");
const { t } = useTranslation();
return (
{
appWindowUtil.setLyricWindow(!enableDesktopLyric);
}}
>
);
}
================================================
FILE: src/renderer/components/MusicBar/widgets/MusicInfo/index.scss
================================================
$width: 290px;
.music-info-outer-container {
width: $width;
height: 100%;
position: relative;
overflow: hidden;
}
.music-info-content-container {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
transition: transform 0.3s ease;
&[data-detail-shown="true"] {
transform: translateY(-100%);
}
}
.music-info-operations-container {
box-sizing: border-box;
padding: 0 12px;
display: flex;
align-items: center;
gap: 12px;
font-size: 1rem;
& div[role='button'] {
width: 22px;
height: 22px;
}
& .music-info-operation-divider {
height: 40%;
width: 1px;
background: var(--dividerColor);
}
}
// 左边的信息区域
.music-info-container {
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
width: $width;
height: 48px;
/* border-right: 1px solid var(--dividerColor); */
padding-left: 10px;
& .open-detail {
width: 44px;
height: 44px;
color: rgba($color: white, $alpha: 0.5);
position: absolute;
left: 10px;
top: 2px;
transition: all 200ms linear;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba($color: #000000, $alpha: 0.5);
border-radius: 4px;
& svg {
width: 28px;
height: 28px;
}
&:hover {
opacity: 1;
backdrop-filter: blur(5px);
}
}
& .music-cover {
width: 44px;
height: 44px;
object-fit: cover;
flex-shrink: 0;
border-radius: 4px;
}
& .music-info {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 10px;
width: 226px;
height: 48px;
padding: 8px 8px 8px 0;
font-size: 1rem;
& .music-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1rem;
& span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
}
& .music-artist {
display: flex;
align-items: center;
& div {
opacity: 0.8;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 0.5rem;
}
& .artist {
flex: 1;
}
& .progress {
flex-shrink: 0;
}
}
}
}
================================================
FILE: src/renderer/components/MusicBar/widgets/MusicInfo/index.tsx
================================================
import SvgAsset from "@/renderer/components/SvgAsset";
import { setFallbackAlbum } from "@/renderer/utils/img-on-error";
import "./index.scss";
import Tag from "@/renderer/components/Tag";
import { secondsToDuration } from "@/common/time-util";
import MusicFavorite from "@/renderer/components/MusicFavorite";
import MusicDetail, { useMusicDetailShown } from "@/renderer/components/MusicDetail";
import albumImg from "@/assets/imgs/album-cover.jpg";
import { useTranslation } from "react-i18next";
import { useCurrentMusic, useProgress } from "@renderer/core/track-player/hooks";
import { hidePanel, showPanel } from "@renderer/components/Panel";
import MusicDownloaded from "@renderer/components/MusicDownloaded";
import PluginManager from "@shared/plugin-manager/renderer";
export default function MusicInfo() {
const musicItem = useCurrentMusic();
const musicDetailShown = useMusicDetailShown();
const { t } = useTranslation();
function toggleMusicDetail() {
if (musicDetailShown) {
MusicDetail.hide();
} else {
MusicDetail.show();
hidePanel();
}
}
return (
{!musicItem ? null : (
<>
{musicItem.title}
{musicItem.platform}
{musicItem.artist}
{
showPanel("MusicComment", {
musicItem: musicItem,
coverHeader: true,
});
}}>
{isFinite(duration)
? `${secondsToDuration(currentTime)}/${secondsToDuration(duration)}`
: null}
);
}
================================================
FILE: src/renderer/components/MusicBar/widgets/Slider/index.scss
================================================
@use "sass:math";
.music-bar--slider-container {
position: absolute;
width: 100%;
left: 0;
$height: 12px;
top: - math.div($height, 2);
height: $height;
display: flex;
justify-content: center;
align-items: center;
--slider-height: 2px;
&:hover,
&:active {
--slider-height: 6px;
}
& .bar {
width: 100%;
height: var(--slider-height);
transition: height 80ms linear;
background-color: #d8d8d8;
}
& .active-bar {
position: absolute;
width: 100%;
left: -100%;
height: var(--slider-height);
background-color: var(--primaryColor);
transform: translateX(0);
transition: height linear 80ms;
}
}
================================================
FILE: src/renderer/components/MusicBar/widgets/Slider/index.tsx
================================================
import { useEffect, useRef, useState } from "react";
import "./index.scss";
import trackPlayer from "@renderer/core/track-player";
import { useProgress } from "@renderer/core/track-player/hooks";
export default function Slider() {
const [seekPercent, _setSeekPercent] = useState {
if (isFinite(duration) && duration) {
isPressedRef.current = true;
}
}}
onClick={(e) => {
if (isFinite(duration) && duration) {
trackPlayer.seekTo((duration * e.clientX) / window.innerWidth);
}
}}
>
);
}
================================================
FILE: src/renderer/components/MusicDetail/index.scss
================================================
.music-detail--container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3000;
box-sizing: border-box;
padding-bottom: var(--appMusicBarHeight);
display: flex;
flex-direction: column;
-webkit-app-region: no-drag;
& .music-detail-background {
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
filter: blur(50px);
opacity: 0.5;
mask-image: linear-gradient(to bottom, #fff, transparent);
-webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
z-index: -1;
transition: background-image ease 300ms;
}
& .hide-music-detail {
position: fixed;
right: 36px;
top: 36px;
$size: 28px;
width: $size;
height: $size;
& svg {
width: $size;
height: $size;
}
}
& .music-title {
height: 4.8rem;
line-height: 4.8rem;
text-align: center;
font-size: 2rem;
font-weight: 500;
margin-top: 1.5rem;
width: 80vw;
margin-left: 10vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
& .music-info {
display: flex;
width: 70vw;
margin-left: 15vw;
font-size: 1.2rem;
justify-content: center;
& span {
opacity: 0.8;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 1rem;
font-weight: 300;
}
}
& .music-body {
width: 100%;
box-sizing: border-box;
padding: 4rem 0;
height: 0;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
column-gap: 54px;
& .music-album-options {
$size: 35vmin;
width: $size;
height: $size;
object-fit: cover;
-webkit-user-drag: none;
& .music-album {
width: $size;
height: $size;
border-radius: 8px;
object-fit: cover;
}
& .music-options {
margin-top: 18px;
height: 64px;
width: 100%;
display: flex;
gap: 12px;
}
}
}
}
================================================
FILE: src/renderer/components/MusicDetail/index.tsx
================================================
import AnimatedDiv from "../AnimatedDiv";
import "./index.scss";
import albumImg from "@/assets/imgs/album-cover.jpg";
import Tag from "../Tag";
import { setFallbackAlbum } from "@/renderer/utils/img-on-error";
import Header from "./widgets/Header";
import Lyric from "./widgets/Lyric";
import Condition from "../Condition";
import { useTranslation } from "react-i18next";
import { useCurrentMusic } from "@renderer/core/track-player/hooks";
import { useEffect } from "react";
import { musicDetailShownStore } from "@renderer/components/MusicDetail/store";
export const isMusicDetailShown = musicDetailShownStore.getValue;
export const useMusicDetailShown = musicDetailShownStore.useValue;
function MusicDetail() {
const musicItem = useCurrentMusic();
const musicDetailShown = musicDetailShownStore.useValue();
const { t } = useTranslation();
useEffect(() => {
const escHandler = (evt: KeyboardEvent) => {
if (evt.code === "Escape") {
evt.preventDefault();
musicDetailShownStore.setValue(false);
}
};
window.addEventListener("keydown", escHandler);
return () => {
window.removeEventListener("keydown", escHandler);
};
}, []);
return (
{musicItem?.title || t("media.unknown_title")}
{
musicDetailShownStore.setValue(false);
}}
>
{
appWindowUtil.minMainWindow();
}}
>
{
appWindowUtil.toggleMainWindowMaximize();
}}>
{
const exitBehavior = AppConfig.getConfig("normal.closeBehavior");
if (exitBehavior === "minimize") {
appWindowUtil.minMainWindow(true);
} else {
appUtil.exitApp();
}
}}
>
{
setShowTranslation(!showTranslation);
}}
>
{
showCustomContextMenu({
x: e.clientX,
y: e.clientY,
width: 200,
height: 146,
component: (
}
>
))}
}
{optionsComponent}
{t("music_detail.no_lyric")}
{
const currentMusic = trackPlayer.currentMusic;
showModal("SearchLyric", {
defaultTitle: currentMusic?.title,
musicItem: currentMusic,
});
}}
>
{t("music_detail.search_lyric")}
}
>
{lyricParser?.getLyricItems?.()?.map((lyricItem, index) => (
<>
{lyricItem.lrc}
{lyricItem.translation}
{t("music_detail.lyric_ctx_set_font_size")}
e.stopPropagation()}
>
{
if (fontSize) {
setFontSize((prev) => {
const newFontSize = +prev - 1;
handleFontSize(newFontSize);
if (newFontSize < 8) {
return "8";
} else if (newFontSize > 32) {
return "32";
}
return `${newFontSize}`;
});
}
}}
>
{
const val = e.target.value;
handleFontSize(val);
setFontSize(e.target.value.trim());
}}
>
{
if (fontSize) {
setFontSize((prev) => {
const newFontSize = +prev + 1;
handleFontSize(newFontSize);
if (newFontSize < 8) {
return "8";
} else if (newFontSize > 32) {
return "32";
}
return `${newFontSize}`;
});
}
}}
>
{
setShowTranslation(!showTranslation);
}}
>
{showTranslation
? t("music_detail.hide_translation")
: t("music_detail.show_translation")}
{
downloadLyric("lrc");
}}
>
{t("music_detail.lyric_ctx_download_lyric_lrc")}
{
downloadLyric("txt");
}}
>
{t("music_detail.lyric_ctx_download_lyric_txt")}
{
showModal("SearchLyric", {
defaultTitle: currentMusicRef.current.title,
musicItem: currentMusicRef.current,
});
}}
>
{linkedLyricInfo
? `${t("music_detail.media_lyric_linked")} ${getMediaPrimaryKey(
linkedLyricInfo,
)}`
: t("music_detail.search_lyric")}
{
try {
await unlinkLyric(currentMusicRef.current);
if (trackPlayer.isCurrentMusic(currentMusicRef.current)) {
trackPlayer.fetchCurrentLyric(true);
}
toast.success(t("music_detail.toast_media_lyric_unlinked"));
} catch {
// pass
}
}}
>
{t("music_detail.unlink_media_lyric")}
);
}
================================================
FILE: src/renderer/components/MusicDownloaded/index.scss
================================================
.music-download-base {
display: flex;
align-items: center;
justify-content: center;
}
.music-downloaded {
color: var(--infoColor, #0a95c8);
}
.music-can-download {
opacity: 0.6;
cursor: pointer;
&:hover {
opacity: 1;
}
}
================================================
FILE: src/renderer/components/MusicDownloaded/index.tsx
================================================
import { isSameMedia } from "@/common/media-util";
import SvgAsset, { SvgAssetIconNames } from "@/renderer/components/SvgAsset";
import { memo, useEffect, useState } from "react";
import "./index.scss";
import { DownloadState, localPluginName } from "@/common/constant";
import Downloader from "@/renderer/core/downloader";
import { useTranslation } from "react-i18next";
interface IMusicDownloadedProps {
musicItem: IMusic.IMusicItem;
size?: number;
}
function MusicDownloaded(props: IMusicDownloadedProps) {
const { musicItem, size = 18 } = props;
// const [loading, setLoading] = useState(false);
const downloadState = Downloader.useDownloadState(musicItem);
const { t } = useTranslation();
const isDownloadedOrLocal =
downloadState === DownloadState.DONE ||
musicItem?.platform === localPluginName;
let iconName: SvgAssetIconNames = "array-download-tray";
if (isDownloadedOrLocal) {
iconName = "check-circle";
} else if (
downloadState !== DownloadState.NONE &&
downloadState !== DownloadState.ERROR
) {
iconName = "rolling-1s";
}
return (
{
if (
musicItem && (downloadState === DownloadState.NONE ||
downloadState === DownloadState.ERROR)
) {
Downloader.startDownload(musicItem);
}
}}
>
);
}
export default memo(MusicDownloaded, (prev, curr) =>
isSameMedia(prev.musicItem, curr.musicItem),
);
================================================
FILE: src/renderer/components/MusicFavorite/index.tsx
================================================
import SvgAsset from "../SvgAsset";
import MusicSheet from "@/renderer/core/music-sheet";
interface IMusicFavoriteProps {
musicItem: IMusic.IMusicItem;
size: number;
}
export default function MusicFavorite(props: IMusicFavoriteProps) {
const { musicItem, size } = props;
const isFav = MusicSheet.frontend.useMusicIsFavorite(musicItem);
return (
{
e.stopPropagation();
if (isFav) {
MusicSheet.frontend.removeMusicFromFavorite(musicItem);
} else {
MusicSheet.frontend.addMusicToFavorite(musicItem);
}
}}
onDoubleClick={(e) => {
e.stopPropagation();
}}
style={{
color: isFav ? "red" : "var(--textColor)",
width: size,
height: size,
}}
>
);
}
================================================
FILE: src/renderer/components/MusicList/index.scss
================================================
.music-list-container {
width: 100%;
min-height: 300px;
&:focus-visible {
outline: none;
}
& th {
position: relative;
&:not([data-id="like"]):hover {
background-color: var(--listHoverColor);
& .sort-container[data-sorting="false"] {
opacity: 0.6;
}
}
&:nth-child(2) {
text-align: center;
}
& .sort-container {
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
& svg {
width: 0.6rem;
height: 0.6rem;
}
&[data-sorting="false"] {
opacity: 0;
}
}
}
& tr {
position: relative;
}
& td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:nth-child(2) {
text-align: center;
}
}
& .music-list-operations {
display: flex;
align-items: center;
gap: 6px;
}
// & .resizer {
// position: absolute;
// right: 0;
// top: 0;
// height: 100%;
// width: 4px;
// cursor: col-resize;
// user-select: none;
// touch-action: none;
// opacity: 0;
// &:hover {
// opacity: 1;
// }
// }
// & .resizer-resizing {
// opacity: 1;
// }
}
.music-list-drag-receiver {
position: absolute;
left: 0;
height: 12px;
width: 100%;
display: flex;
align-items: center;
& .music-list-drag-receiver-content {
width: 100%;
height: 2px;
background-color: var(--primaryColor);
pointer-events: none;
}
}
.music-list-drag-receiver-top {
top: -6px;
}
.music-list-drag-receiver-bottom {
bottom: -6px;
}
================================================
FILE: src/renderer/components/MusicList/index.tsx
================================================
import {
ColumnDef,
createColumnHelper,
flexRender,
getCoreRowModel,
getSortedRowModel,
SortingState,
useReactTable,
} from "@tanstack/react-table";
import "./index.scss";
import Tag from "../Tag";
import { secondsToDuration } from "@/common/time-util";
import MusicSheet from "@/renderer/core/music-sheet";
import trackPlayer from "@renderer/core/track-player";
import Condition, { IfTruthy } from "../Condition";
import Empty from "../Empty";
import MusicFavorite from "../MusicFavorite";
import MusicDownloaded from "../MusicDownloaded";
import { localPluginName, RequestStateCode } from "@/common/constant";
import BottomLoadingState from "../BottomLoadingState";
import { IContextMenuItem, showContextMenu } from "../ContextMenu";
import { getInternalData, getMediaPrimaryKey, isSameMedia } from "@/common/media-util";
import { CSSProperties, memo, useCallback, useEffect, useRef, useState } from "react";
import { showModal } from "../Modal";
import useVirtualList from "@/hooks/useVirtualList";
import hotkeys from "hotkeys-js";
import Downloader from "@/renderer/core/downloader";
import { toast } from "react-toastify";
import SwitchCase from "../SwitchCase";
import SvgAsset from "../SvgAsset";
import musicSheetDB from "@/renderer/core/db/music-sheet-db";
import DragReceiver, { startDrag } from "../DragReceiver";
import { i18n } from "@/shared/i18n/renderer";
import isLocalMusic from "@/renderer/utils/is-local-music";
import AppConfig from "@shared/app-config/renderer";
import { shellUtil } from "@shared/utils/renderer";
interface IMusicListProps {
/** 展示的播放列表 */
musicList: IMusic.IMusicItem[];
/** 实际的播放列表 */
getAllMusicItems?: () => IMusic.IMusicItem[];
/** 音乐列表所属的歌单信息 */
musicSheet?: IMusic.IMusicSheetItem;
// enablePagination?: boolean; // 分页/虚拟长列表
state?: RequestStateCode; // 网络状态
doubleClickBehavior?: "replace" | "normal"; // 双击行为
onPageChange?: (page?: number) => void; // 分页
/** 虚拟滚动参数 */
virtualProps?: {
offsetHeight?: number | (() => number); // 距离顶部的高度
getScrollElement?: () => HTMLElement; // 滚动
fallbackRenderCount?: number;
};
containerStyle?: CSSProperties;
hideRows?: Array<
"like" | "index" | "title" | "artist" | "album" | "duration" | "platform"
>;
/** 允许拖拽 */
enableDrag?: boolean;
/** 拖拽结束 */
onDragEnd?: (newMusicList: IMusic.IMusicItem[]) => void;
/** context */
contextMenu?: IContextMenuItem[];
}
const columnHelper = createColumnHelper {
hotkeys.setScope("music-list");
}}
onBlur={() => {
hotkeys.setScope("all");
}}
>
}
>
);
}
export default memo(
_MusicList,
(prev, curr) =>
prev.state === curr.state &&
prev.enableDrag === curr.enableDrag &&
prev.musicList === curr.musicList &&
prev.onPageChange === curr.onPageChange &&
prev.onDragEnd === curr.onDragEnd &&
prev.musicSheet &&
curr.musicSheet &&
isSameMedia(prev.musicSheet, curr.musicSheet),
);
================================================
FILE: src/renderer/components/MusicSheetlikeItem/index.scss
================================================
.components--albumlike-item-container {
$width: 140px;
$height: 216px;
width: $width;
height: $height;
& .album-img-wrapper {
width: $width;
height: $width;
-webkit-user-drag: none;
border-radius: 8px;
overflow: hidden;
position: relative;
& .album-play-info {
position: absolute;
box-sizing: border-box;
left: 0;
bottom: 0;
background-color: rgba($color: #000000, $alpha: 0.1);
backdrop-filter: blur(10px);
width: 100%;
height: 1.8rem;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: space-between;
color: #eee;
padding-left: 4px;
padding-right: 4px;
white-space: nowrap;
& .play-count {
display: flex;
align-items: center;
& svg {
margin-right: 2px;
}
}
}
& img {
position: absolute;
top: 0;
left: 0;
width: $width;
height: $width;
-webkit-user-drag: none;
border-radius: 8px;
object-fit: cover;
transition: transform ease-out 400ms;
&:hover {
transform: scale(1.1);
}
}
}
& .media-info {
margin-top: 6px;
height: $height - $width - 6px;
width: 100%;
& .title {
font-size: 1.1rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
&:hover {
color: var(--primaryColor);
}
}
& .author {
font-size: 0.9rem;
margin-top: 4px;
display: flex;
align-items: center;
& span {
opacity: 0.8;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
================================================
FILE: src/renderer/components/MusicSheetlikeItem/index.tsx
================================================
import { setFallbackAlbum } from "@/renderer/utils/img-on-error";
import "./index.scss";
import albumImg from "@/assets/imgs/album-cover.jpg";
import Condition from "../Condition";
import dayjs from "dayjs";
import SvgAsset from "../SvgAsset";
import { normalizeNumber } from "@/common/normalize-util";
import { memo } from "react";
import { isCN } from "@/shared/i18n/renderer";
interface IMusicSheetlikeItemProps {
mediaItem: IMusic.IMusicSheetItem;
onClick?: (mediaItem: IMusic.IMusicSheetItem) => void;
}
function MusicSheetlikeItem(props: IMusicSheetlikeItemProps) {
const { mediaItem, onClick } = props;
return (
|
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{
e.stopPropagation();
}}
className={classNames({
resizer: true,
"resizer-resizing": header.column.getIsResizing(),
})}
> */}
|
))}
|---|
| {flexRender(cell.column.columnDef.cell, cell.getContext())} | ))}
{
onClick?.(mediaItem);
}}
>
);
}
export default memo(
MusicSheetlikeItem,
(prev, curr) =>
prev.mediaItem === curr.mediaItem && prev.onClick === curr.onClick,
);
================================================
FILE: src/renderer/components/MusicSheetlikeList/index.scss
================================================
.music-sheet-like-list--container {
width: 100%;
& .music-sheet-like-list--body {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px;
}
}
================================================
FILE: src/renderer/components/MusicSheetlikeList/index.tsx
================================================
import { RequestStateCode } from "@/common/constant";
import { memo } from "react";
import "./index.scss";
import BottomLoadingState from "@/renderer/components/BottomLoadingState";
import MusicSheetlikeItem from "@/renderer/components/MusicSheetlikeItem";
import Condition from "../Condition";
import Empty from "../Empty";
interface IMusicSheetlikeListProps {
data: IMusic.IMusicSheetItem[];
state: RequestStateCode;
onLoadMore?: () => void;
onClick?: (mediaItem: IMusic.IMusicSheetItem) => void;
}
function MusicSheetlikeList(props: IMusicSheetlikeListProps) {
const { data = [], state, onLoadMore, onClick } = props;
return (
{mediaItem?.createAt ? (
dayjs(mediaItem.createAt).format("YYYY-MM-DD")
) : (
)}
{mediaItem?.title}
{mediaItem?.artist ?? mediaItem?.description ?? ""}
{data.map((mediaItem, index) => {
return (
{
onClick?.(mediaItem);
}}
mediaItem={mediaItem}
key={index}
>
);
})}
{
if (musicList.length) {
trackPlayer.playMusicWithReplaceQueue(musicList);
}
}}
>
{
showModal("AddMusicToSheet", {
musicItems: musicList,
});
}}
>
{options}
{
setInputSearch(evt.target.value);
}}
value={inputSearch}
className="search-in-music-list"
>
{(musicSheet?.platform && !hidePlatform) ? (
{musicSheet?.platform}
) : null}
{musicSheet?.title ?? t("media.unknown_title")}
{
const dataset = e.currentTarget.dataset;
dataset.fold = dataset.fold === "true" ? "false" : "true";
}}
>
{t("media.media_description")}： {musicSheet?.description}
{t("media.media_type_artist")} {musicSheet?.artist}
{supportMethod ? (
,
}}
>
);
}
================================================
FILE: src/renderer/components/Panel/index.tsx
================================================
import Store from "@/common/store";
import templates from "./templates";
import { useMemo } from "react";
type ITemplate = typeof templates;
type IPanelType = keyof ITemplate;
interface IPanelInfo {
type: IPanelType | null;
payload: any;
}
const panelStore = new Store {
if ((e.target as HTMLElement)?.id === baseId) {
trapCloseRef.current = true;
} else {
trapCloseRef.current = false;
}
}}
onMouseUp={(e) => {
if ((e.target as HTMLElement)?.id === baseId && trapCloseRef.current) {
if (defaultClose) {
hidePanel();
} else {
onDefaultClick?.();
}
}
}}
onMouseLeave={() => {
trapCloseRef.current = false;
}}
onMouseOut={() => {
trapCloseRef.current = false;
}}
>
);
}
interface IHeaderProps {
children: ReactNode;
right?: ReactNode;
}
function Header(props: IHeaderProps) {
const { children, right } = props;
return (
{children}
{children}
{right ?? (
);
}
Base.Header = Header;
export default Base;
================================================
FILE: src/renderer/components/Panel/templates/MusicComment/index.scss
================================================
.music-comment-panel--title-container {
margin: 24px 16px 8px;
font-size: 1.2rem;
font-weight: 600;
}
.music-comment-panel--body-container {
margin-bottom: 16px;
}
.music-comment-panel--comment-item-container {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
& .comment-title-container {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.1em;
& .avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
& span {
user-select: auto;
}
}
& .comment-body-container {
padding-left: 40px;
user-select: text;
cursor: text;
line-height: 1.5em;
}
& .comment-operations-container{
display: flex;
justify-content: space-between;
padding-left: 40px;
opacity: 0.7;
& .thumb-up {
display: flex;
align-items: center;
& svg {
width: 1.1em;
height: 1.1em;
}
& span {
margin-left: 4px;
}
}
}
}
================================================
FILE: src/renderer/components/Panel/templates/MusicComment/index.tsx
================================================
import Base from "@renderer/components/Panel/templates/Base";
import "./index.scss";
import { useTranslation } from "react-i18next";
import SvgAsset from "@renderer/components/SvgAsset";
import dayjs from "dayjs";
import useComment from "@renderer/components/Panel/templates/MusicComment/useComment";
import { RequestStateCode } from "@/common/constant";
import Loading from "@renderer/components/Loading";
import BottomLoadingState from "@renderer/components/BottomLoadingState";
interface IProps {
coverHeader?: boolean;
musicItem?: IMusic.IMusicItem;
}
export default function MusicComment(props: IProps) {
const { coverHeader, musicItem } = props;
const { t } = useTranslation();
const [comments, reqState, loadMore] = useComment(musicItem);
return {
hidePanel();
}}
>
)}
{t("media.media_type_comment")}
{(comments.length === 0 && (reqState & RequestStateCode.LOADING)) ?
;
}
interface IMusicCommentItemProps {
comment: IComment.IComment
}
function MusicCommentItem(props: IMusicCommentItemProps) {
const { comment } = props;
return
{comment.comment}
{comment.createAt ? {dayjs(comment.createAt).format("YYYY-MM-DD")} : null}
{
trackPlayer.reset();
}}
>
{t("common.clear")}
{
hotkeys.setScope("play-list");
}}
onBlur={() => {
hotkeys.setScope("all");
}}
>
{virtualController.virtualItems.map((virtualItem) => {
const musicItem = virtualItem.dataItem;
const rowIndex = virtualItem.rowIndex;
return (
{
startDrag(e, rowIndex, DRAG_TAG);
}}
onDoubleClick={() => {
trackPlayer.playMusic(musicItem);
}}
onContextMenu={(e) => {
if (
activeItems.size > 1
) {
const selectedItems: IMusic.IMusicItem[] = [];
activeItems.forEach(item => {
selectedItems.push(musicQueue[item]);
});
showMusicContextMenu(
selectedItems,
e.clientX,
e.clientY,
"play-list",
);
} else {
lastActiveIndexRef.current = virtualItem.rowIndex;
setActiveItems(new Set([virtualItem.rowIndex]));
showMusicContextMenu(
musicItem,
e.clientX,
e.clientY,
"play-list",
);
}
}}
onClick={() => {
// 如果点击的时候按下shift
if (hotkeys.shift) {
let start = lastActiveIndexRef.current;
let end = virtualItem.rowIndex;
if (start >= end) {
[start, end] = [end, start];
}
if (end > musicQueue.length) {
end = musicQueue.length - 1;
}
setActiveItems(
new Set(
Array.from({ length: end - start + 1 }, (_, i) => start + i),
),
);
} else if (hotkeys.ctrl) {
const newSet = new Set(activeItems);
if (newSet.has(virtualItem.rowIndex)) {
newSet.delete(virtualItem.rowIndex);
} else {
newSet.add(virtualItem.rowIndex);
}
setActiveItems(newSet);
} else {
setActiveItems(new Set([virtualItem.rowIndex]));
lastActiveIndexRef.current = virtualItem.rowIndex;
}
}}
>
);
})}
{musicItem?.title ?? "-"}
{musicItem?.artist ?? "-"}
{
trackPlayer.removeMusic(musicItem);
}}
>
{variables.map((variable) => (
);
}
================================================
FILE: src/renderer/components/Panel/templates/index.ts
================================================
import Base from "./Base";
import PlayList from "./PlayList";
import UserVariables from "./UserVariables";
import MusicComment from "./MusicComment";
export default {
Base,
UserVariables,
PlayList,
MusicComment,
};
================================================
FILE: src/renderer/components/SvgAsset/index.tsx
================================================
import { memo } from "react";
export type SvgAssetIconNames =
| "album"
| "array-download-tray"
| "arrow-left-end-on-rectangle"
| "cd"
| "chat-bubble-left-ellipsis"
| "check"
| "check-circle"
| "chevron-double-down"
| "chevron-double-up"
| "chevron-down"
| "chevron-left"
| "chevron-right"
| "clock"
| "code-bracket-square"
| "cog-8-tooth"
| "dashboard-speed"
| "document-plus"
| "fire"
| "folder-open"
| "font-size-larger"
| "font-size-smaller"
| "hand-thumb-up"
| "headphone"
| "heart-outline"
| "heart"
| "identification"
| "language"
| "list-bullet"
| "lock-closed"
| "lock-open"
| "logo"
| "lyric"
| "lyric-en"
| "magnifying-glass"
| "minus"
| "motion-play"
| "musical-note"
| "pause"
| "pencil-square"
| "picture-in-picture-line"
| "play"
| "playlist"
| "plus"
| "plus-circle"
| "question-mark-circle"
| "repeat-song-1"
| "repeat-song"
| "rolling-1s"
| "shuffle"
| "skip-left"
| "skip-right"
| "sort"
| "sort-asc"
| "sort-desc"
| "sparkles"
| "speaker-wave"
| "speaker-x-mark"
| "square"
| "trash"
| "trophy"
| "t-shirt-line"
| "user"
| "lq"
| "sd"
| "hq"
| "sq"
| "x-mark";
interface IProps {
iconName: SvgAssetIconNames;
size?: number;
title?: string;
color?: string;
}
/**
*
* @param props
* @returns
*/
function SvgAsset(props: IProps) {
// eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
const Svg = require(`@/assets/icons/${props.iconName}.svg`);
return (
{variable.name ?? variable.key}
{
valueRef.current[variable.key] = (
e.target as HTMLInputElement
).value;
}}
placeholder={variable.hint}
>
))}
{props.children}
);
}
================================================
FILE: src/renderer/core/backup-resume/index.ts
================================================
import MusicSheet from "../music-sheet";
/**
* 恢复
* @param data 数据
* @param overwrite 是否覆写歌单
*/
async function resume(data: string | Record
出现问题啦...
请点击上方【重置配置项】按钮尝试修复，如果还有问题请将错误信息反馈到 GitHub 或发送到公众号【一只猫头猫】
歌曲信息
{JSON.stringify(trackPlayer.currentMusic, null, 2)}
错误信息
{error.message}
{error.stack && (
{error.stack}
)}
{options.map((item) => (
{
navigate(`/main/${item.route}`);
}}
>
))}
);
}
================================================
FILE: src/renderer/pages/main-page/components/SideBar/widgets/ListItem/index.scss
================================================
.side-bar--list-item-container {
$height: 3rem;
height: $height;
font-size: 1rem;
width: 100%;
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 1rem;
user-select: none;
cursor: pointer;
color: var(--textColor);
transition: all linear 100ms;
& svg {
width: 1.6rem;
height: 1.6rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
& span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 0.5rem;
}
&:hover {
background: var(--listHoverColor);
}
&[data-selected="true"] {
color: var(--primaryColor);
background: var(--listActiveColor);
&::before {
content: "";
position: absolute;
width: 4px;
left: 0;
top: 0;
height: $height;
background-color: var(--primaryColor);
}
}
}
================================================
FILE: src/renderer/pages/main-page/components/SideBar/widgets/ListItem/index.tsx
================================================
import SvgAsset, { SvgAssetIconNames } from "@/renderer/components/SvgAsset";
import "./index.scss";
interface IProps {
selected?: boolean;
onClick?: () => void;
onContextMenu?: (...args: any) => void;
iconName?: SvgAssetIconNames;
title?: string;
}
export default function ListItem(props: IProps) {
const { selected, onClick, iconName, title, onContextMenu } = props ?? {};
return (
{iconName ?
);
}
================================================
FILE: src/renderer/pages/main-page/components/SideBar/widgets/MySheets/index.scss
================================================
.side-bar-container--my-sheets {
& .divider {
margin-top: 0.5rem;
width: 100%;
height: 1px;
background-color: var(--dividerColor);
}
& .title {
height: 3rem;
display: flex;
align-items: center;
padding-left: 1rem;
padding-right: 0.5rem;
opacity: 0.7;
user-select: none;
$tag-size: 4px;
& .my-sheets {
display: flex;
align-items: center;
flex: 1;
&::after {
content: "";
width: 0;
height: 0;
margin-left: 0.5rem;
border: $tag-size solid transparent;
border-left-color: currentColor;
transform-origin: left center;
transition: transform linear 100ms;
}
}
&[data-headlessui-state="open"] {
& .my-sheets {
&::after {
transform: rotate(90deg);
}
}
}
& .option-btn {
$size: 18px;
width: $size;
height: $size;
margin-left: 6px;
& svg {
width: $size;
height: $size;
}
}
}
}
================================================
FILE: src/renderer/pages/main-page/components/SideBar/widgets/MySheets/index.tsx
================================================
import "./index.scss";
import ListItem from "../ListItem";
import { useMatch, useNavigate } from "react-router-dom";
import { Disclosure } from "@headlessui/react";
import MusicSheet, { defaultSheet } from "@/renderer/core/music-sheet";
import SvgAsset from "@/renderer/components/SvgAsset";
import { hideModal, showModal } from "@/renderer/components/Modal";
import { localPluginName } from "@/common/constant";
import { showContextMenu } from "@/renderer/components/ContextMenu";
import { useTranslation } from "react-i18next";
import { useSupportedPlugin } from "@shared/plugin-manager/renderer";
export default function MySheets() {
const sheetIdMatch = useMatch(
`/main/musicsheet/${encodeURIComponent(localPluginName)}/:sheetId`,
);
const currentSheetId = sheetIdMatch?.params?.sheetId;
const musicSheets = MusicSheet.frontend.useAllSheets();
const navigate = useNavigate();
const { t } = useTranslation();
const importablePlugins = useSupportedPlugin("importMusicSheet");
return (
{t("side_bar.my_sheets")}
{
e.stopPropagation();
showModal("ImportMusicSheet", {
plugins: importablePlugins,
});
}}
>
{
e.stopPropagation();
showModal("AddNewSheet");
}}
>
{t("side_bar.starred_sheets")}
{artistItem?.name ?? t("media.unknown_artist")}
{
const dataset = e.currentTarget.dataset;
dataset.fold = dataset.fold === "true" ? "false" : "true";
}}
>
{artistItem?.description}
| {flexRender( header.column.columnDef.header, header.getContext(), )} | ))}
|---|
| {flexRender(cell.column.columnDef.cell, cell.getContext())} | ))}
{t("local_music_page.local_music")}
{
showModal("WatchLocalDir");
}}
>
{t("local_music_page.auto_scan")}
{
setInputSearch(evt.target.value);
}}
placeholder={t("local_music_page.search_local_music")}
>
{
setDisplayView(DisplayView.LIST);
}}
>
{
setDisplayView(DisplayView.ARTIST);
}}
>
{
setDisplayView(DisplayView.ALBUM);
}}
>
{
setDisplayView(DisplayView.FOLDER);
}}
>
{keys.map((it) => (
{
setSelectedKey(it);
}}
>
{it.split(" - ")[0]}
{it.split(" - ")[1]}
))}
{keys.map((it) => (
{
setSelectedKey(it);
}}
>
{it}
))}
{keys.map((it) => (
{
setSelectedKey(it);
}}
>
{it}
))}
{platform === localPluginName ? (
);
}
================================================
FILE: src/renderer/pages/main-page/views/music-sheet-view/local-sheet/index.tsx
================================================
import { useParams } from "react-router-dom";
import MusicSheetlikeView from "@/renderer/components/MusicSheetlikeView";
import { RequestStateCode } from "@/common/constant";
import MusicSheet, { defaultSheet } from "@/renderer/core/music-sheet";
import { useTranslation } from "react-i18next";
export default function LocalSheet() {
const { id } = useParams() ?? {};
const [musicSheet, loading] = MusicSheet.frontend.useMusicSheet(id);
const { t } = useTranslation();
const _musicSheet =
id === defaultSheet.id
? {
...musicSheet,
title: t("media.default_favorite_sheet_name"),
}
: musicSheet;
return (
{
if (isStarred) {
MusicSheet.frontend.unstarMusicSheet(sheetItem);
} else {
MusicSheet.frontend.starMusicSheet(sheetItem);
}
}}
>
);
}
================================================
FILE: src/renderer/pages/main-page/views/music-sheet-view/store/musicSheetStore.ts
================================================
import Store from "@/common/store";
export default new Store| {flexRender( header.column.columnDef.header, header.getContext(), )} | ))}
|---|
| {flexRender(cell.column.columnDef.cell, cell.getContext())} | ))}
{t("plugin_management_page.plugin_management")}
{
try {
const result = await dialogUtil.showOpenDialog({
title: t("plugin_management_page.choose_plugin"),
buttonLabel: t("plugin_management_page.install"),
filters: [
{
extensions: ["js", "json"],
name: t("plugin_management_page.musicfree_plugin"),
},
],
});
if (result.canceled) {
return;
}
await PluginManager.installPluginFromLocal(result.filePaths[0]);
toast.success(t("plugin_management_page.install_successfully"));
} catch (e) {
toast.warn(
`${t("plugin_management_page.install_failed")}: ${
e.message ?? t("plugin_management_page.invalid_plugin")
}`,
);
}
}}
>
{t("plugin_management_page.install_from_local_file")}
{
showModal("SimpleInputWithState", {
title: t("plugin_management_page.install_plugin_from_network"),
placeholder: t(
"plugin_management_page.error_hint_plugin_should_end_with_js_or_json",
),
okText: t("plugin_management_page.install"),
loadingText: t("plugin_management_page.installing"),
withLoading: true,
async onOk(text) {
if (
text.trim().endsWith(".json") ||
text.trim().endsWith(".js")
) {
return PluginManager.installPluginFromRemote(text);
} else {
throw new Error(
t(
"plugin_management_page.error_hint_plugin_should_end_with_js_or_json",
),
);
}
},
onPromiseResolved() {
toast.success(
t("plugin_management_page.install_successfully"),
);
hideModal();
},
onPromiseRejected(e) {
toast.warn(
`${t("plugin_management_page.install_failed")}: ${
e.message ?? t("plugin_management_page.invalid_plugin")
}`,
);
},
hints: [
,
}}
> ,
],
});
}}
>
{t("plugin_management_page.install_plugin_from_network")}
{/* {
showModal("SimpleInputWithState", {
title: "从网络安装插件",
placeholder: "请输入插件源地址(链接以json或js结尾)",
okText: "安装",
loadingText: "安装中",
withLoading: true,
async onOk(text) {
if (
text.trim().endsWith(".json") ||
text.trim().endsWith(".js")
) {
return ipcRendererInvoke("install-plugin-remote", text);
} else {
throw new Error("插件链接需要以json或者js结尾");
}
},
onPromiseResolved() {
toast.success("安装成功~");
hideModal();
},
onPromiseRejected(e) {
toast.warn(`安装失败: ${e.message ?? "无效插件"}`);
},
hints: [
"插件需要满足 MusicFree 特定的插件协议，具体可在官方网站中查看",
],
});
}}
>
一键更新
*/}
{
showModal("PluginSubscription");
}}
>
{t("plugin_management_page.subscription_setting")}
{
const subscription = getUserPreference("subscription");
if (subscription?.length) {
for (let i = 0; i < subscription.length; ++i) {
await PluginManager.installPluginFromRemote(subscription[i].srcUrl);
}
toast.success(t("plugin_management_page.update_successfully"));
} else {
toast.warn(t("plugin_management_page.no_subscription"));
}
}}
>
{t("plugin_management_page.update_subscription")}
{
clearRecentlyPlaylist();
}}
>
);
console.log(recentlyPlaylistSheet);
return (
{
setShowPanel((prev) => !prev);
}}
>
{firstTag.title}
{tags?.pinned?.map?.((tag) => (
{
setSelectedTag(tag);
const usr = history.state.usr ?? {};
navigate("", {
replace: true,
state: {
...usr,
tag: tag,
},
});
}}
>
{tag.title}
))}
{
onTagClick?.(defaultTag);
}}
>
{defaultTag.title}
{tagGroup.title}
{tagGroup.data.map((tag) => (
{
onTagClick?.(tag);
}}
>
{tag.title}
))}
{data.map((artistItem, index) => {
return {
navigate(
`/main/artist/${encodeURIComponent(artistItem.platform)}/${encodeURIComponent(artistItem.id)}`,
{
state: {
artistItem,
},
},
);
}}> ;
})}
{plugins?.map?.((plugin) => (
{
setSelectedPlugin(plugin);
const usr = history.state.usr ?? {};
// 获取history
navigate("", {
replace: true,
state: {
...usr,
plugin: plugin,
},
});
}}
data-selected={selectedPlugin?.hash === plugin.hash}
>
{plugin.platform}
))}
「{decodeURIComponent(query)}」
{t("search_result_page.search_result_title")}
{plugins.length ? (
{
const event = new Event("ConfigChanged", {
cancelable: true,
});
if (onChange) {
onChange(event, !checked);
}
if (!event.defaultPrevented) {
AppConfig.setConfig({
[keyPath]: !checked,
});
}
}}
>
{checked ?
{label}
{label}
{realColor as string}
{
AppConfig.setConfig({
[keyPath]: color as any,
});
close();
}}
>
提交
{
// setAppConfigPath(keyPath, !checked as any);
// }}
// >
//
);
}
================================================
FILE: src/renderer/pages/main-page/views/setting-view/components/FontPickerSettingItem/index.scss
================================================
.setting-view--list-box-setting-item-container {
& .options-container {
margin-top: 0.6rem;
display: flex;
gap: 0.5rem 3rem;
position: relative;
user-select: none;
& .listbox-button {
height: 2.6rem;
width: 200px;
position: relative;
display: flex;
align-items: center;
padding-left: 12px;
border-radius: 6px;
background-color: var(--placeholderColor);
border: 1px solid var(--dividerColor);
&::after {
position: absolute;
right: 6px;
content: "";
width: 0;
height: 0;
margin-left: 0.5rem;
border: 4px solid transparent;
border-left-color: currentColor;
transform-origin: left center;
transform: rotate(90deg);
}
}
& .listbox-options {
position: absolute;
padding-inline-start: 0;
margin-block-start: 0;
border-radius: 4px;
left: 0;
top: 3rem;
z-index: 10;
width: 212px;
height: 280px;
overflow-y: auto;
list-style: none;
& .listbox-option {
list-style: none;
height: 2.2rem;
line-height: 2.2rem;
padding-left: 12px;
vertical-align: middle;
cursor: default;
&[data-headlessui-state*="active"] {
color: var(--primaryColor);
}
}
&:focus {
outline: none;
}
}
}
}
================================================
FILE: src/renderer/pages/main-page/views/setting-view/components/FontPickerSettingItem/index.tsx
================================================
import { useMemo } from "react";
import ListBoxSettingItem from "../ListBoxSettingItem";
import { defaultFont as _defaultFont } from "@/common/constant";
import useLocalFonts from "@/hooks/useLocalFonts";
import { useTranslation } from "react-i18next";
import { IAppConfig } from "@/types/app-config";
import AppConfig from "@shared/app-config/renderer";
interface FontPickerSettingItemProps
//
//
// {checked ?
// {label}
//
{label ?
);
}
================================================
FILE: src/renderer/pages/main-page/views/setting-view/components/ListBoxSettingItem/index.scss
================================================
.setting-view--list-box-setting-item-container {
.question-mark-container {
$size: 1.1rem;
display: inline-block;
margin-left: 0.5rem;
width: $size;
height: 100%;
text-align: center;
vertical-align: middle;
& svg {
width: $size;
height: $size;
cursor: pointer;
}
}
& .options-container {
margin-top: 0.6rem;
display: flex;
gap: 0.5rem 3rem;
position: relative;
user-select: none;
$item-width: 220px;
& .listbox-button {
height: 2.6rem;
width: $item-width;
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 12px;
padding-right: 24px;
border-radius: 6px;
background-color: var(--placeholderColor);
border: 1px solid var(--dividerColor);
& span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&::after {
position: absolute;
right: 6px;
content: "";
width: 0;
height: 0;
margin-left: 0.5rem;
border: 4px solid transparent;
border-left-color: currentColor;
transform-origin: left center;
transform: rotate(90deg);
}
}
& .listbox-options {
position: absolute;
padding-inline-start: 0;
margin-block-start: 0;
border-radius: 4px;
left: 0;
top: 3rem;
z-index: 10;
width: $item-width;
max-height: 280px;
overflow-x: hidden;
overflow-y: auto;
list-style: none;
& .listbox-option {
list-style: none;
height: 2.2rem;
width: $item-width;
line-height: 2.2rem;
padding: 0 12px;
vertical-align: middle;
cursor: default;
box-sizing: border-box;
&[data-headlessui-state*="active"] {
color: var(--primaryColor);
}
& div {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&:focus {
outline: none;
}
}
}
}
================================================
FILE: src/renderer/pages/main-page/views/setting-view/components/ListBoxSettingItem/index.tsx
================================================
import { Listbox } from "@headlessui/react";
import "./index.scss";
import Condition, { IfTruthy } from "@/renderer/components/Condition";
import Loading from "@/renderer/components/Loading";
import { isBasicType } from "@/common/normalize-util";
import useVirtualList from "@/hooks/useVirtualList";
import { rem } from "@/common/constant";
import { ReactNode, useRef } from "react";
import SvgAsset from "@/renderer/components/SvgAsset";
import { Tooltip } from "react-tooltip";
import { IAppConfig } from "@/types/app-config";
import useAppConfig from "@/hooks/useAppConfig";
import AppConfig from "@shared/app-config/renderer";
interface ListBoxSettingItemProps{label}
: null}
{
setTmpValue(e.target.value ?? null);
}}
type={type}
onBlur={() => {
if (tmpValue === null) {
return;
}
const event = new Event("ConfigChanged", {
cancelable: true,
});
if (onChange) {
onChange(event, tmpValue as any);
}
if (!event.defaultPrevented) {
console.log(tmpValue);
AppConfig.setConfig({
[keyPath]: trim ? tmpValue.trim() as any : tmpValue as any,
});
}
}}
defaultValue={value as string}
value={(tmpValue || "") as string}
>
{label}
{virtualController.virtualItems?.map?.((virtualItem) => (
))}
{renderItem
? renderItem(virtualItem.dataItem)
: isBasicType(virtualItem.dataItem)
? (virtualItem.dataItem as string)
: ""}
{label}
{(options as any[]).map((option, index) => {
const checked = (value as Array)?.includes(option);
const title = renderItem ? renderItem(option) : (option as string);
return (
{
let newValue = [];
if (checked) {
newValue = (value as Array)?.filter(
(it) => it !== option,
) ?? [];
} else {
newValue = [...(value as Array || []), option];
}
AppConfig.setConfig({
[keyPath]: newValue,
});
}}
>
);
})}
{checked ?
{title}
{label}
{value as string}
{/* */}
{
const result = await dialogUtil.showOpenDialog({
title: t("settings.choose_path"),
defaultPath: value as string,
properties: ["openDirectory"],
buttonLabel: t("common.confirm"),
});
if (!result.canceled) {
AppConfig.setConfig({
[keyPath]: result.filePaths[0]! as any,
});
}
}}
>
{t("settings.change_path")}
{
if (await fsUtil.isFolder(value as string)) {
shellUtil.openPath(value as string);
} else {
toast.error(t("settings.folder_not_exist"));
}
}}
>
{t("settings.open_folder")}
{options.map((option, index) => (
{({ checked }) => {
const title = renderItem ? renderItem(option) : option as string;
return (
);
}}
))}
{checked ?
{title}
{routers.map((setting) => (
{
document
.getElementById(`setting-${setting.id}`)
?.scrollIntoView({
behavior: "smooth",
});
}}
>
{t(`settings.section_name.${camelToSnake(setting.id)}`)}
))}
{routers.map((setting, index) => {
const Component = setting.component as any;
return (
);
})}
{t(`settings.section_name.${camelToSnake(setting.id)}`)}
{t("settings.backup.backup_by_file")}
{
const result = await dialogUtil.showSaveDialog({
properties: ["showOverwriteConfirmation", "createDirectory"],
filters: [
{
name: t("settings.backup.musicfree_backup_file"),
extensions: ["json", "txt"],
},
],
title: t("settings.backup.backup_to"),
});
if (!result.canceled && result.filePath) {
const sheetDetails =
await MusicSheet.frontend.exportAllSheetDetails();
const backUp = JSON.stringify({
musicSheets: sheetDetails,
});
await fsUtil.writeFile(result.filePath, backUp, "utf-8");
toast.success(t("settings.backup.backup_success"));
}
}}
>
{t("settings.backup.backup_music_sheet")}
{
const result = await dialogUtil.showOpenDialog({
properties: ["openFile"],
filters: [
{
name: t("settings.backup.musicfree_backup_file"),
extensions: ["json", "txt"],
},
],
title: t("common.open"),
});
if (!result.canceled && result.filePaths) {
try {
const rawSheets = (await fsUtil.readFile(
result.filePaths[0],
"utf-8",
)) as string;
await BackupResume.resume(
rawSheets,
AppConfig.getConfig("backup.resumeBehavior") === "overwrite",
);
toast.success(t("backup.backup_success"));
} catch (e) {
toast.error(
t("backup.backup_fail", {
reason: e?.message,
}),
);
}
}
}}
>
{t("settings.backup.resume_music_sheet")}
{t("settings.backup.backup_by_webdav")}
{t("settings.backup.backup_music_sheet")}
{t("settings.backup.resume_music_sheet")}
{
setCacheSize(0);
appUtil.clearCache();
}}
>
{t("settings.network.clear_cache")}
{t("settings.short_cut.ability")}
{t("settings.short_cut.enable_local")}
{t("settings.short_cut.enable_global")}
{t(`settings.short_cut.${it}`)}
{
e.preventDefault();
}}
onFocus={() => {
hotkeys.setScope(scopeRef.current);
}}
onBlur={() => {
hotkeys.setScope("all");
setTmpValue(null);
recordedKeysRef.current.clear();
}}
>
{
(enabled && showClearButton) ?
);
}
================================================
FILE: src/renderer/pages/main-page/views/setting-view/routers/index.ts
================================================
/** 配置 */
import About from "./About";
import Backup from "./Backup";
import Download from "./Download";
import Lyric from "./Lyric";
import Network from "./Network";
import Normal from "./Normal";
import PlayMusic from "./PlayMusic";
import Plugin from "./Plugin";
import ShortCut from "./ShortCut";
export default [
{
id: "normal",
component: Normal,
},
{
id: "playMusic",
component: PlayMusic,
},
{
id: "download",
component: Download,
},
{
id: "lyric",
component: Lyric,
},
{
id: "plugin",
component: Plugin,
},
{
id: "shortCut",
component: ShortCut,
},
{
id: "network",
component: Network,
},
{
id: "backup",
component: Backup,
},
{
id: "about",
component: About,
},
];
================================================
FILE: src/renderer/pages/main-page/views/theme-view/components/LocalThemes/index.scss
================================================
.local-themes-container {
width: 100%;
margin-top: 14px;
& .local-themes-inner-container {
display: grid;
gap: 24px 36px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
.theme-install-local {
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--dividerColor);
cursor: pointer;
& svg {
height: 60%;
opacity: 0.6;
}
}
================================================
FILE: src/renderer/pages/main-page/views/theme-view/components/LocalThemes/index.tsx
================================================
import { toast } from "react-toastify";
import SvgAsset from "@/renderer/components/SvgAsset";
import { useTranslation } from "react-i18next";
import ThemePack from "@/shared/themepack/renderer";
import ThemeItem from "../ThemeItem";
import "./index.scss";
import { dialogUtil } from "@shared/utils/renderer";
export default function LocalThemes() {
const currentThemePack = ThemePack.useCurrentThemePack();
const localThemePacks = ThemePack.useLocalThemePacks();
const { t } = useTranslation();
return (
{
try {
const result = await dialogUtil.showOpenDialog({
title: t("theme.install_theme"),
buttonLabel: t("common.install"),
filters: [
{
name: t("theme.musicfree_theme"),
extensions: ["mftheme", "zip"],
},
{
name: t("theme.all_files"),
extensions: ["*"],
},
],
properties: ["openFile", "multiSelections"],
});
if (!result.canceled) {
const themePackPaths = result.filePaths;
for (const themePackPath of themePackPaths) {
const themePackConfig = await ThemePack.installThemePack(
themePackPath,
);
toast.success(
t("theme.install_theme_success", {
name: themePackConfig?.name
? `「${themePackConfig.name}」`
: "",
}),
);
}
}
} catch (e) {
toast.warn(
t("theme.install_theme_fail", {
name: e?.message ? `「${e.message}」` : "",
}),
);
}
}}
>
{
// Themepack.selectTheme(themePack);
// }}
// onContextMenu={(e) => {
// if (!themePack) {
// return;
// }
// showThemeContextMenu(themePack, e.clientX, e.clientY);
// }}
// title={themePack?.description}
// >
//
//
// );
// }
================================================
FILE: src/renderer/pages/main-page/views/theme-view/components/RemoteThemes/hooks/useRemoteThemes.ts
================================================
import { RequestStateCode, themePackStoreBaseUrl } from "@/common/constant";
import useMounted from "@/hooks/useMounted";
import Themepack from "@/shared/themepack/renderer";
import axios from "axios";
import { useEffect, useState } from "react";
let themeStoreConfig: IThemeStoreItem[];
interface IThemeStoreItem {
publishName: string;
hash: string;
packageName: string;
config: ICommon.IThemePack;
id?: string;
}
function raceWithData
// {themePack ? themePack.name : t("common.default")}
//
//
{themes.map((it) => (
it.hash === localTheme.hash)
}
installed={
it.id &&
localThemes.some((localTheme) => it.id === localTheme.id)
}
>
))}
{t("theme.load_remote_theme_error")}
{
setIsHover(true);
}}
onMouseLeave={() => {
setIsHover(false);
}}
>
);
}
================================================
FILE: src/renderer/pages/main-page/views/theme-view/index.scss
================================================
================================================
FILE: src/renderer/pages/main-page/views/theme-view/index.tsx
================================================
import { Tab } from "@headlessui/react";
import React from "react";
import { useTranslation } from "react-i18next";
import RemoteThemes from "./components/RemoteThemes";
import LocalThemes from "./components/LocalThemes";
const routes = ["local", "remote"];
export default function ThemeView() {
const { t } = useTranslation();
return (
{config.preview?.startsWith("#") ? (
) : (
)}
{isLoading ? (
)}
{latestInstalled
? t("theme.use_theme")
: installed
? t("theme.update_theme")
: t("theme.download_and_use")}
{t("theme.use_theme")}
{hash && (
{
Themepack.uninstallThemePack(config);
}}
>
{t("common.uninstall")}
)}
{config.name}
{t("media.media_type_artist")}: {config.author}
{groupItem.title}
{(groupItem.data ?? []).map((item) => (
{
navigate(`/main/toplist-detail/${platform}`, {
state: {
toplist: {
...mediaItem,
platform,
},
},
});
}}
>
))}
{
if (!lockLyric || mouseOverTimerRef.current) {
if (!lockLyric) {
setShowOperations(true);
}
return;
}
mouseOverTimerRef.current = window.setTimeout(() => {
setShowOperations(true);
clearTimeout(mouseOverTimerRef.current);
mouseOverTimerRef.current = null;
}, 1000);
}}
onMouseLeave={() => {
setShowOperations(false);
if (mouseOverTimerRef.current) {
clearTimeout(mouseOverTimerRef.current);
mouseOverTimerRef.current = null;
}
}}
>
{
AppConfig.setConfig({
"lyric.lockLyric": false,
});
}}
onMouseOver={() => {
appWindowUtil.ignoreMouseEvent(false);
}}
onMouseLeave={() => {
appWindowUtil.ignoreMouseEvent(true);
}}
>
}
>
{
messageBus.sendCommand("SkipToPrevious");
}}
>
{
if (currentMusic) {
messageBus.sendCommand("TogglePlayerState");
}
}}
>
{
messageBus.sendCommand("SkipToNext");
}}
>
{
AppConfig.setConfig({
"lyric.lockLyric": true,
});
}}
>
{
appWindowUtil.setLyricWindow(false);
}}
>
{currentLyric?.lrc ??
(currentMusic
? `${currentMusic.title} - ${currentMusic.artist}`
: "暂无歌词")}
);
}
================================================
FILE: src/renderer-minimode/document/bootstrap.ts
================================================
import { setupI18n } from "@/shared/i18n/renderer";
import AppConfig from "@shared/app-config/renderer";
import messageBus from "@shared/message-bus/renderer/extension";
export default async function () {
// TODO: broadcast
await AppConfig.setup();
await setupI18n();
messageBus.subscribeAppState(["playerState", "musicItem", "repeatMode", "parsedLrc", "lyricText"]);
messageBus.sendCommand("SyncAppState");
}
================================================
FILE: src/renderer-minimode/document/index.html
================================================
{lyricItem?.lrc || currentMusicItem?.title || t("media.unknown_title")}
{showTranslation ? {lyricItem?.translation} : null}
);
const options = (
{
appWindowUtil.setMinimodeWindow(false);
appWindowUtil.showMainWindow();
}}
>
{
messageBus.sendCommand("SkipToPrevious");
}}
>
{
messageBus.sendCommand(
"TogglePlayerState",
);
}}
>
{
messageBus.sendCommand("SkipToNext");
}}
>
{
setHover(true);
}}
onMouseLeave={() => {
setHover(false);
}}
>
{
appWindowUtil.showMainWindow();
}}
>
{hover ? options : textContent}