github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

升级到 vue3

pull/733/head
lyswhut 2021-12-03 22:11:11 +08:00
parent c6635e554a
commit 8059d9cd73
260 changed files with 14443 additions and 10979 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.ncurc.js
View File

@ -1,7 +1,6 @@
module.exports = {
upgrade: true,
reject: [
'vue-loader',
'webpack-dev-server',
'eslint',
'electron',

12
.vscode/settings.json vendored
View File

@ -7,13 +7,15 @@
"@common/*": "${workspaceFolder}/src/common/*",
},
"i18n-ally.localesPaths": [
"src/renderer/lang"
"src/lang"
],
// "i18n-ally.fullReloadOnChanged": true,
"i18n-ally.keystyle": "nested",
"i18n-ally.displayLanguage": "zh-cn",
"i18n-ally.sourceLanguage": "zh-cn",
"i18n-ally.namespace": true,
"i18n-ally.translate.engines": ["google-cn", "google"],
"i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
"i18n-ally.keystyle": "flat",
"i18n-ally.translate.engines": [
"google-cn",
"google"
],
"i18n-ally.sortKeys": true
}

7
FAQ.md
View File

@ -250,6 +250,13 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看上面的
- 以管理员权限打开`cmd`，输入`sfc /scannow`回车等待检查完成重启电脑
- 若上面的方法**修复、重启**电脑后仍然不行，就自行百度弹出的**错误信息**看下别人是怎么解决的
## MAC OS无法启动软件，提示 lx-music-desktop 已损坏
这是因为软件没有签名，被系统阻止运行，<br>
在终端里输入 `sudo xattr -rd com.apple.quarantine /Applications/lx-music-desktop.app`，然后输入你的电脑密码即可
还可以参考：<https://blog.csdn.net/for641/article/details/104811538>
## 杀毒软件提示有病毒或恶意行为
本人只能保证我写的代码不包含任何**恶意代码**、**收集用户信息**的行为，并且软件代码已开源，请自行查阅，软件安装包也是由CI拉取源代码构建，构建日志：[GitHub Actions](https://github.com/lyswhut/lx-music-desktop/actions)<br>

4
README.md
View File

@ -36,8 +36,8 @@
所用技术栈：
- Electron 15
- Vue 2
- Electron 13
- Vue 3
已支持的平台：

4
build-config/renderer-lyric/webpack.config.base.js
View File

@ -1,5 +1,5 @@
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { VueLoaderPlugin } = require('vue-loader')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanCSSPlugin = require('less-plugin-clean-css')
@ -23,6 +23,7 @@ module.exports = {
},
resolve: {
alias: {
'@': path.join(__dirname, '../../src'),
'@main': path.join(__dirname, '../../src/main'),
'@renderer': path.join(__dirname, '../../src/renderer'),
'@lyric': path.join(__dirname, '../../src/renderer-lyric'),
@ -126,7 +127,6 @@ module.exports = {
template: path.join(__dirname, '../../src/renderer-lyric/index.pug'),
isProd: process.env.NODE_ENV == 'production',
browser: process.browser,
scriptLoading: 'blocking',
__dirname,
}),
new VueLoaderPlugin(),

3
build-config/renderer-lyric/webpack.config.prod.js
View File

@ -9,7 +9,8 @@ const baseConfig = require('./webpack.config.base')
const { dependencies } = require('../../package.json')
let whiteListedModules = ['vue']
// let whiteListedModules = ['vue']
let whiteListedModules = ['vue', 'vue-router', 'vuex', 'vue-i18n']
module.exports = merge(baseConfig, {

6
build-config/renderer/webpack.config.base.js
View File

@ -1,5 +1,5 @@
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { VueLoaderPlugin } = require('vue-loader')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanCSSPlugin = require('less-plugin-clean-css')
@ -23,6 +23,7 @@ module.exports = {
},
resolve: {
alias: {
'@': path.join(__dirname, '../../src'),
'@main': path.join(__dirname, '../../src/main'),
'@renderer': path.join(__dirname, '../../src/renderer'),
'@lyric': path.join(__dirname, '../../src/renderer-lyric'),
@ -123,10 +124,9 @@ module.exports = {
plugins: [
new HTMLPlugin({
filename: 'index.html',
template: path.join(__dirname, '../../src/renderer/index.pug'),
template: path.join(__dirname, '../../src/renderer/index.html'),
isProd: process.env.NODE_ENV == 'production',
browser: process.browser,
scriptLoading: 'blocking',
__dirname,
}),
new VueLoaderPlugin(),

3
build-config/renderer/webpack.config.prod.js
View File

@ -9,7 +9,7 @@ const baseConfig = require('./webpack.config.base')
const { dependencies } = require('../../package.json')
let whiteListedModules = ['vue']
let whiteListedModules = ['vue', 'vue-router', 'vuex', 'vue-i18n']
module.exports = merge(baseConfig, {
@ -34,6 +34,7 @@ module.exports = merge(baseConfig, {
}),
],
optimization: {
minimize: false,
minimizer: [
new TerserPlugin(),
new CssMinimizerPlugin(),

878
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -1,6 +1,6 @@
{
"name": "lx-music-desktop",
"version": "1.15.3",
"version": "1.16.0-beta",
"description": "一个免费的音乐查找助手",
"main": "./dist/electron/main.js",
"productName": "lx-music-desktop",
@ -70,7 +70,7 @@
"up": "cross-env ELECTRON_GET_USE_PROXY=true GLOBAL_AGENT_HTTPS_PROXY=http://localhost:1081 npm i"
},
"browserslist": [
"Electron 15.2.0"
"Electron 13.4.0"
],
"engines": {
"node": ">= 14"
@ -221,7 +221,7 @@
"spinnies": "^0.5.1",
"terser-webpack-plugin": "^5.2.5",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.8",
"vue-loader": "^16.8.3",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
@ -241,14 +241,15 @@
"image-size": "^1.0.0",
"koa": "^2.13.4",
"long": "^5.2.0",
"mitt": "^3.0.0",
"needle": "^3.0.0",
"node-id3": "^0.2.3",
"request": "^2.88.2",
"socket.io": "^4.4.0",
"utf-8-validate": "^5.0.7",
"vue": "^2.6.14",
"vue-i18n": "^8.26.7",
"vue-router": "^3.5.3",
"vuex": "^3.6.2"
"vue": "^3.2.23",
"vue-i18n": "^9.2.0-beta.22",
"vue-router": "^4.0.12",
"vuex": "^4.0.2"
}
}

11
publish/changeLog.md
View File

@ -1,3 +1,12 @@
### 新增
- 播放详情页新增音量控制条
- 播放详情页新增桌面歌词切换按钮
### 优化
- 优化歌词自动换源机制
- 优化列表性能，软件整体性能
### 其他
- 升级vue到 3.x

72
src/common/config.js
View File

@ -53,4 +53,76 @@ module.exports = {
navigationUrlWhiteList: [
],
themes: [
{
id: 0,
name: '绿意盎然',
className: 'green',
},
{
id: 1,
name: '蓝田生玉',
className: 'blue',
},
{
id: 2,
name: '信口雌黄',
className: 'yellow',
},
{
id: 3,
name: '橙黄橘绿',
className: 'orange',
},
{
id: 4,
name: '热情似火',
className: 'red',
},
{
id: 10,
name: '粉装玉琢',
className: 'pink',
},
{
id: 5,
name: '重斤球紫',
className: 'purple',
},
{
id: 6,
name: '灰常美丽',
className: 'grey',
},
{
id: 11,
name: '青出于黑',
className: 'ming',
},
{
id: 12,
name: '青出于黑',
className: 'blue2',
},
{
id: 13,
name: '黑纸白字',
className: 'black',
},
{
id: 7,
name: '月里嫦娥',
className: 'mid_autumn',
},
{
id: 8,
name: '木叶之村',
className: 'naruto',
},
{
id: 9,
name: '新年快乐',
className: 'happy_new_year',
},
],
}

4
src/common/ipcNames.js
View File

@ -8,6 +8,8 @@ const names = {
clear_cache: 'clear_cache',
get_cache_size: 'get_cache_size',
get_env_params: 'get_env_params',
wait: 'wait',
wait_cancel: 'wait_cancel',
set_music_meta: 'set_music_meta',
progress: 'progress',
@ -35,7 +37,7 @@ const names = {
lang_s2t: 'lang_s2t',
// handle_kw_decode_lyric: 'handle_kw_decode_lyric',
handle_kw_decode_lyric: 'handle_kw_decode_lyric',
get_lyric_info: 'get_lyric_info',
set_lyric_info: 'set_lyric_info',
set_config: 'set_config',

0
src/renderer/lang/Readme.md → src/lang/Readme.md
View File

389
src/lang/en-us.json Normal file
View File

@ -0,0 +1,389 @@
{
"action": "Manage",
"agree": "Accept",
"download": "Downloads",
"leaderboard": "Charts",
"my_list": "Your Library",
"search": "Search",
"setting": "Settings",
"song_list": "Playlists",
"close": "Close",
"comment__hot_load_error": "Hot comments failed to load, click to try to reload",
"comment__hot_loading": "Hot comments are loading",
"comment__hot_title": "Hot Comment",
"comment__new_load_error": "The latest comment failed to load, click to try to reload",
"comment__new_loading": "Latest comments are loading",
"comment__new_title": "Latest comment",
"comment__no_content": "No comments yet",
"comment__refresh": "Refresh comments",
"comment__show": "Song comments",
"comment__title": "{name} comment",
"copy_tip": " (Click to copy)",
"default_list": "Recently Played",
"desktop_lyric__back": "Back",
"desktop_lyric__close": "Close",
"desktop_lyric__font_decrease": "Reduce font size (Right click to fine-tune)",
"desktop_lyric__font_increase": "Increase font size (Right click to fine-tune)",
"desktop_lyric__lock": "Lock Lyrics",
"desktop_lyric__lrc_active_zoom_off": "Unzoom the currently playing lyrics",
"desktop_lyric__lrc_active_zoom_on": "Zoom the currently playing lyrics",
"desktop_lyric__opactiy_decrease": "Increase Transparency (Right click to fine-tune)",
"desktop_lyric__opactiy_increase": "Decrease Transparency (Right click to fine-tune)",
"desktop_lyric__theme": "Theme Color",
"desktop_lyric__unlock": "Unlock Lyrics",
"desktop_lyric__win_top_off": "Cancel the top lyrics interface",
"desktop_lyric__win_top_on": "Top lyrics interface",
"download__high_quality": "High Quality",
"download__lossless": "Lossless",
"download__multiple_tip": "{len} song selected",
"download__multiple_tip2": "Select preferred download quality",
"download__normal": "Normal",
"download__not_available_tip": "The audio quality is not available",
"list__add_to": "Add to ...",
"list__collect": "Collect",
"list__copy_name": "Copy name",
"list__download": "Download",
"list__file": "Locate the file",
"list__load_failed": "Ah, the loading failed 😭",
"list__loading": "List loading...⏳",
"list__move_to": "Move to ...",
"list__pause": "Pause Task",
"list__play": "Play",
"list__play_later": "Play later",
"list__remove": "Remove",
"list__search": "Search",
"list__sort": "Adjust position",
"list__source_detail": "Song Page",
"list__start": "Start Task",
"list_add__btn_title": "Add the song(s) to {name}",
"list_add__multiple_btn_title": "Add these song(s) to {name}",
"list_add__multiple_title_add": "Add the selected {num} song(s) to ...",
"list_add__multiple_title_move": "Move the selected {num} song(s) to ...",
"list_add__title_first_add": "Add",
"list_add__title_first_move": "Move",
"list_add__title_last": "to...",
"lists__duplicate": "Duplicate song",
"lists__export": "Export",
"lists__export_part_desc": "Choose where to save the list file",
"lists__import": "Import",
"lists__import_part_button_cancel": "No",
"lists__import_part_button_confirm": "Overwrite",
"lists__import_part_confirm": "The imported list ({importName}) has the same ID as the local list ({localName}). Do you overwrite the local list?",
"lists__import_part_desc": "Select list file",
"lists__movedown": "Move Down",
"lists__moveup": "Move Up",
"lists__new_list_btn": "Create list",
"lists__new_list_input": "New list...",
"lists__remove": "Remove",
"lists__remove_tip": "Do you really want to remove {name}?",
"lists__remove_tip_button": "Yes, that's right",
"lists__rename": "Rename",
"lists__sync": "Update",
"load_list_file_error_detail": "We have helped you back up the old list file to {path}\nIt is stored in JSON format, you can try to repair and restore it manually\n\nError details: {detail}",
"load_list_file_error_title": "Error loading playlist data",
"loding_list": "Loading...",
"love_list": "Favorites",
"lyric__load_error": "Failed to get lyrics",
"lyric__select": "Lyric text selection",
"min": "Minimize",
"music_album": "Album",
"music_name": "Name",
"music_singer": "Artist",
"music_time": "Length",
"no_item": "Nothing's here...",
"not_agree": "Not accept",
"pagination__next": "Next page",
"pagination__page": "Page {num}",
"pagination__prev": "Previous page",
"player__add_music_to": "Add the current song to...",
"player__buffering": "Buffering...",
"player__desktop_lyric_lock": "Right click to lock lyrics",
"player__desktop_lyric_off": "Close Desktop Lyrics",
"player__desktop_lyric_on": "Open Desktop Lyrics",
"player__desktop_lyric_unlock": "Right click to unlock lyrics",
"player__end": "Stopped",
"player__error": "Error loading music. Switch to next song after 5 seconds",
"player__geting_url": "Getting music link...",
"player__hide_detail_tip": "Hide detail page (Right-click in the view to quickly hide the details page)",
"player__loading": "Music loading...",
"player__music_album": "Album: ",
"player__music_name": "Name: ",
"player__music_singer": "Artist: ",
"player__next": "Next",
"player__pause": "Pause",
"player__pic_tip": "Right click to locate the currently playing song in \"My List\"",
"player__play": "Play",
"player__play_toggle_mode_list": "Play in order",
"player__play_toggle_mode_list_loop": "List Loop",
"player__play_toggle_mode_off": "Disable",
"player__play_toggle_mode_random": "List Random",
"player__play_toggle_mode_single_loop": "Single Loop",
"player__playing": "Now playing...",
"player__prev": "Prev",
"player__refresh_url": "Music URL expired, refreshing...",
"player__stop": "Paused",
"player__volume": "Volume: ",
"source_alias_all": "Aggregated",
"source_alias_bd": "BD Music",
"source_alias_kg": "KG Music",
"source_alias_kw": "KW Music",
"source_alias_mg": "MG Music",
"source_alias_tx": "TX Music",
"source_alias_wy": "WY Music",
"source_alias_xm": "XM Music",
"source_all": "Aggregated",
"source_bd": "Baidu",
"source_kg": "Kugou",
"source_kw": "Kuwo",
"source_mg": "Migu",
"source_tx": "Tencent",
"source_wy": "Netease",
"source_xm": "Xiami",
"sync__merge_btn_local_remote": "Local list merge remote list",
"sync__merge_btn_remote_local": "Remote list merge local list",
"sync__merge_label": "Merge",
"sync__merge_tip": "Merge:",
"sync__merge_tip_desc": "Merge the two lists together, the same song will be removed (the song of the merged person is removed), and different songs will be added.",
"sync__other_label": "Other",
"sync__other_tip": "Other: ",
"sync__other_tip_desc": "\"Only use real-time synchronization function\" will not modify the lists of both parties, only real-time synchronization operations; \"Cancel synchronization\" will directly disconnect the two parties.",
"sync__overwrite": "Full coverage",
"sync__overwrite_btn_cancel": "Cancel sync",
"sync__overwrite_btn_local_remote": "Local list Overwrite remote list",
"sync__overwrite_btn_none": "Only use real-time synchronization",
"sync__overwrite_btn_remote_local": "Remote list Overwrite local list",
"sync__overwrite_label": "Cover",
"sync__overwrite_tip": "Cover: ",
"sync__overwrite_tip_desc": "The list with the same ID of the covered person and the covered list will be deleted and replaced with the list of the covered person (lists with different list IDs will be merged together). If you check Complete coverage, all lists of the covered person will be moved. \nDivide, and then replace with a list of overriders.",
"sync__title": "Choose how to synchronize the list with {name}",
"tag__high_quality": "HQ",
"tag__lossless": "SQ",
"theme_black": "Black",
"theme_blue": "Blue",
"theme_blue2": "Purple Blue",
"theme_green": "Green",
"theme_grey": "Grey",
"theme_happy_new_year": "New Year",
"theme_mid_autumn": "Mid-Autumn",
"theme_ming": "Ming",
"theme_naruto": "Naruto",
"theme_orange": "Orange",
"theme_pink": "Pink",
"theme_purple": "Purple",
"theme_red": "Red",
"theme_yellow": "Yellow",
"search__welcome": "Search what I want to 😉",
"search__hot_search": "Top Searches",
"history_search": "History Searches",
"history_clear": "Clear History",
"history_remove": "Right click to remove this entry",
"download__progress": "Progress",
"download__status": "Status",
"download__quality": "Quality",
"download__all": "All Tasks",
"download__runing": "Downloading",
"download__paused": "Paused",
"download__error": "Error",
"download__finished": "Download complete",
"back": "Back",
"songlist__open_list": "open {name} playlist",
"songlist__import_input_tip": "Enter songlist link or songlist ID",
"songlist__import_input_tip_1": "Cross-source playlists are not supported, please confirm whether the playlist to be opened corresponds to the current playlist source",
"songlist__import_input_tip_2": "If you encounter a link to a playlist that cannot be opened, welcome feedback",
"songlist__import_input_tip_3": "Kugou source does not support opening with playlist ID, but supports Kugou code opening",
"default": "Default",
"music_duplicate": "Duplicate song",
"export": "Export",
"list__export_part_desc": "Choose where to save the list file",
"import": "Import",
"list__import_part_button_cancel": "Don't",
"list__import_part_button_confirm": "Overwrite",
"list__import_part_confirm": "The imported list ({importName}) has the same ID as the local list ({localName}). Do you want to overwrite the local list?",
"list__import_part_desc": "Select List File",
"list__movedown": "Movedown",
"list__moveup": "Move up",
"list__new_list_btn": "New List",
"list__new_list_input": "New list...",
"list__remove_tip": "Do you really want to remove {name}?",
"list__remove_tip_button": "Yes, that's right",
"list__rename": "Rename",
"list__sync": "Update",
"music_sort__title": "Adjust the position of {name} to:",
"music_sort__title_multiple": "Adjust the position of the selected {num} songs to:",
"music_sort__input_tip": "Please input which position you want to adjust to",
"music_sort__btn_confirm": "Confirm",
"cancel_button_text": "Cancel",
"confirm_button_text": "OK",
"date_format_hour": "{num} hours ago",
"date_format_minute": "{num} minutes ago",
"date_format_second": "{num} seconds ago",
"setting__about": "About lx-music-desktop",
"setting__backup": "Backup and restore",
"setting__backup_all": "All data (list data and setting data)",
"setting__backup_all_export": "Export",
"setting__backup_all_export_desc": "Select the backup to...",
"setting__backup_all_import": "Import",
"setting__backup_all_import_desc": "Select a backup file",
"setting__backup_part": "Partial data (list data includes audition list, favorite list, user-defined list, setting data does not include shortcut key settings)",
"setting__backup_part_export_list": "Export lists",
"setting__backup_part_export_list_desc": "Save the list to...",
"setting__backup_part_export_setting": "Export settings",
"setting__backup_part_export_setting_desc": "Save the list to...",
"setting__backup_part_import_list": "Import lists",
"setting__backup_part_import_list_desc": "Select a list backup",
"setting__backup_part_import_setting": "Import settings",
"setting__backup_part_import_setting_desc": "Select the Settings file",
"setting__basic": "General",
"setting__basic_animation": "Random pop-up animation",
"setting__basic_control_btn_position": "Control Button Position",
"setting__basic_control_btn_position_left": "Left",
"setting__basic_control_btn_position_right": "Right",
"setting__basic_lang": "Language",
"setting__basic_lang_title": "The language displayed in the software",
"setting__basic_show_animation": "Show switching animation",
"setting__basic_source": "Music source",
"setting__basic_source_status_failed": "Initialization failed",
"setting__basic_source_status_initing": "Initializing",
"setting__basic_source_status_success": "Initialization successful",
"setting__basic_source_temp": "Temporary API (some features not available; workaround if Test API unavailable)",
"setting__basic_source_test": "Test API (Available for most software features)",
"setting__basic_source_title": "Choose a music source",
"setting__basic_source_user_api_btn": "Custom Source Management",
"setting__basic_sourcename": "Source name",
"setting__basic_sourcename_alias": "Aliases",
"setting__basic_sourcename_real": "Original",
"setting__basic_sourcename_title": "Select the name of music source",
"setting__basic_theme": "Theme",
"setting__basic_to_tray": "Do not exit the software when closing the software and minimize it to the system tray",
"setting__basic_window_size": "Window size",
"setting__basic_window_size_big": "Large",
"setting__basic_window_size_huge": "Huge",
"setting__basic_window_size_larger": "Larger",
"setting__basic_window_size_medium": "Medium",
"setting__basic_window_size_oversized": "Oversized",
"setting__basic_window_size_small": "Small",
"setting__basic_window_size_smaller": "Smaller",
"setting__basic_window_size_title": "Set the window size",
"setting__click_copy": "Click to copy",
"setting__click_open": "Click to open",
"setting__desktop_lyric": "Desktop Lyric Settings",
"setting__desktop_lyric_always_on_top": "Make the lyrics always above other windows",
"setting__desktop_lyric_enable": "Display lyrics",
"setting__desktop_lyric_font": "Lyric font",
"setting__desktop_lyric_font_default": "Default",
"setting__desktop_lyric_lock": "Lock lyrics",
"setting__desktop_lyric_lock_screen": "It is not allowed to drag the lyrics window out of the main screen",
"setting__download": "Download",
"setting__download_data_embed": "Whether to embed the following content in the audio file",
"setting__download_embed_lyric": "Embedding lyric",
"setting__download_embed_pic": "Embedding cover",
"setting__download_enable": "Whether to enable download function",
"setting__download_lyric": "Lyrics download",
"setting__download_lyric_format": "Downloaded lyrics file encoding format",
"setting__download_lyric_format_gbk": "GBK (Try to select this format when Chinese garbled characters appear on some devices)",
"setting__download_lyric_format_utf8": "UTF-8",
"setting__download_lyric_title": "Select whether to download the lyrics file",
"setting__download_name": "Music file naming",
"setting__download_name1": "Title - Artist",
"setting__download_name2": "Artist - Title",
"setting__download_name3": "Title only",
"setting__download_name_title": "Select the music naming method for downloading",
"setting__download_path": "Download path",
"setting__download_path_change_btn": "Change",
"setting__download_path_label": "Current: ",
"setting__download_path_open_label": "Click to open this path",
"setting__download_path_title": "Define the path to downloading",
"setting__download_select_save_path": "Select the save path",
"setting__download_use_other_source": "Automatically change the source to download (when the song cannot be downloaded from the original source, try to switch to another source to download. Note: this function does not 100% guarantee that the version of the song after the source is changed is the same as the original version)",
"setting__hot_key": "Shortcut Key Settings",
"setting__hot_key_common_focus_search_input": "Focus Search Box",
"setting__hot_key_common_min": "Minimize the program",
"setting__hot_key_common_toggle_close": "Quit Program",
"setting__hot_key_common_toggle_hide": "Show/Hide Program",
"setting__hot_key_common_toggle_min": "Minimize/Restore Program",
"setting__hot_key_desktop_lyric_toggle_always_top": "Top Desktop Lyrics Switch",
"setting__hot_key_desktop_lyric_toggle_lock": "Desktop Lyric Lock Switch",
"setting__hot_key_desktop_lyric_toggle_visible": "Turn on/off desktop lyrics",
"setting__hot_key_global_title": "Global Shortcut Key",
"setting__hot_key_local_title": "Shortcut Keys in Software",
"setting__hot_key_player_next": "Next Song",
"setting__hot_key_player_prev": "Previous Song",
"setting__hot_key_player_toggle_play": "Play/Pause Control",
"setting__hot_key_player_volume_down": "Reduce Volume",
"setting__hot_key_player_volume_mute": "Mute Switch",
"setting__hot_key_player_volume_up": "Increase Volume",
"setting__hot_key_tip_input": "Please enter a new key",
"setting__hot_key_unset_input": "Not Set",
"setting__is_enable": "Enabled",
"setting__is_show": "Showed",
"setting__list": "List",
"setting__list_add_music_location_type": "Position when adding a song to the list",
"setting__list_add_music_location_type_bottom": "Bottom",
"setting__list_add_music_location_type_top": "Top",
"setting__list_scroll": "Remember the position of the scroll bar of the playlist (only valid for my music classification)",
"setting__list_source": "Show song source (only valid for my music category)",
"setting__network": "Network",
"setting__network_proxy_host": "Host",
"setting__network_proxy_password": "Password",
"setting__network_proxy_port": "Port",
"setting__network_proxy_title": "HTTP Proxy (False setting would block Internet connections)",
"setting__network_proxy_username": "Username",
"setting__odc": "Auto clear",
"setting__odc_clear_search_input": "Clear the search box when you are not searching",
"setting__odc_clear_search_list": "Clear the search list when you are not searching",
"setting__other": "Extras",
"setting__other_play_list_cache": "List cache management (links to songs that have been cached in my list, alternative sources for playback, after cleaning up, you need to re-acquire them when you play and download songs, and do not clean up if there are no issues related to song playback)",
"setting__other_play_list_cache_clear_btn": "Clear list cache information",
"setting__other_resource_cache": "Resource cache management (pictures, audios and other caches, pictures and other resources will need to be downloaded again after cleaning up, it is not recommended to clean up, the software will dynamically manage the cache size according to the disk space)",
"setting__other_resource_cache_clear_btn": "Clear resource cache",
"setting__other_resource_cache_label": "The software has used cache size: ",
"setting__other_tray_theme": "Tray Icon Style",
"setting__other_tray_theme_black": "Black Color",
"setting__other_tray_theme_native": "Solid Color",
"setting__other_tray_theme_origin": "Primary Color",
"setting__play": "Play",
"setting__play_lyric_lxlrc": "Use Karaoke-style lyrics playback (if supported)",
"setting__play_lyric_transition": "Show lyrics translation",
"setting__play_mediaDevice": "Audio output",
"setting__play_mediaDevice_remove_stop_play": "Pause the song when the current sound output device is changed",
"setting__play_mediaDevice_title": "Select a media device for audio output",
"setting__play_quality": "Play 320K quality songs first (if supported)",
"setting__play_save_play_time": "Remember playback progress",
"setting__play_task_bar": "Show playing progress on the taskbar",
"setting__search": "Search",
"setting__search_focus_search_box": "Automatically focus the search box on startup",
"setting__search_history": "Search history",
"setting__search_hot": "Top Searches",
"setting__sync": "Data synchronization [This is a test function, it is recommended to back up the playlist before using it for the first time]",
"setting__sync_address": "Synchronization service address: {address}",
"setting__sync_auth_code": "Connection code: {code}",
"setting__sync_device": "Connected devices: {devices}",
"setting__sync_enable": "Enable the synchronization function (because the data is transmitted in clear text, please use it under a trusted network)",
"setting__sync_port": "Sync port settings",
"setting__sync_port_tip": "Please enter the synchronization service port number",
"setting__sync_refresh_code": "Refresh the connection code",
"setting__update": "Update",
"setting__update_checking": "Checking for updates...",
"setting__update_current_label": "Current version: ",
"setting__update_downloading": "Update is found and being downloaded...⏳",
"setting__update_init": "Processing update...",
"setting__update_latest": "The software is up-to-date, enjoy yourself!🥂",
"setting__update_latest_label": "Latest version: ",
"setting__update_open_version_modal_btn": "Open the update window🚀",
"setting__update_progress": "Download progress: ",
"setting__update_unknown": "Unknown",
"user_api__title": "Custom Source Management",
"user_api__readme": "Source writing instructions: ",
"user_api__note": "Tip: Although we have isolated the script's running environment as much as possible, importing scripts containing malicious behaviors may still affect your system. Please import them carefully.",
"user_api__btn_remove": "Remove",
"user_api__btn_import": "Import",
"user_api__btn_export": "Export",
"user_api__import_file": "Select music API script file",
"user_api__noitem": "There is nothing here...😲"
}

42
src/lang/index.js Normal file
View File

@ -0,0 +1,42 @@
import zh_cn from './zh-cn.json'
import zh_tw from './zh-tw.json'
import en_us from './en-us.json'
const langs = [
{
name: '简体中文',
locale: 'zh-cn',
alternate: 'zh-hans',
country: 'cn',
fallback: true,
message: zh_cn,
},
{
name: '繁体中文',
locale: 'zh-tw',
alternate: 'zh-hk',
country: 'cn',
message: zh_tw,
},
{
name: 'English',
locale: 'en-us',
country: 'us',
message: en_us,
},
]
const langList = []
const messages = {}
langs.forEach(item => {
langList.push({
name: item.name,
locale: item.locale,
})
messages[item.locale] = item.message
})
export {
langList,
messages,
}

0
src/renderer/lang/languages.json → src/lang/languages.json
View File

388
src/lang/zh-cn.json Normal file
View File

@ -0,0 +1,388 @@
{
"search": "搜索",
"song_list": "歌单",
"leaderboard": "排行榜",
"my_list": "我的列表",
"download": "下载",
"min": "最小化",
"close": "关闭",
"setting": "设置",
"download__not_available_tip": "该音质不可用",
"download__lossless": "无损音质",
"download__high_quality": "高品音质",
"download__normal": "普通音质",
"download__multiple_tip": "已选择 {len} 首歌曲",
"download__multiple_tip2": "请选择要优先下载的音质",
"list_add__title_first_add": "添加",
"list_add__title_first_move": "移动",
"list_add__title_last": "到...",
"list_add__btn_title": "把该歌曲添加到 {name}",
"list_add__multiple_title_add": "添加已选的 {num} 首歌曲到...",
"list_add__multiple_title_move": "移动已选的 {num} 首歌曲到...",
"list_add__multiple_btn_title": "把这些歌曲添加到 {name}",
"action": "操作",
"music_album": "专辑",
"default_list": "试听列表",
"list__add_to": "添加到...",
"list__copy_name": "复制歌曲名",
"list__download": "下载",
"list__move_to": "移动到...",
"list__play": "播放",
"list__collect": "收藏",
"list__play_later": "稍后播放",
"list__remove": "删除",
"list__search": "搜索",
"list__sort": "调整位置",
"list__source_detail": "歌曲详情页",
"list__start": "开始任务",
"list__pause": "暂停任务",
"list__file": "定位文件",
"list__load_failed": "啊，加载失败了😭",
"list__loading": "列表加载中...⏳",
"tag__lossless": "SQ",
"tag__high_quality": "HQ",
"lists__duplicate": "重复歌曲",
"lists__export": "导出",
"lists__export_part_desc": "选择列表文件保存位置",
"lists__import": "导入",
"lists__import_part_button_cancel": "不要啊",
"lists__import_part_button_confirm": "覆盖掉",
"lists__import_part_confirm": "导入的列表（{importName}）与本地列表（{localName}）的ID相同，是否覆盖本地列表？",
"lists__import_part_desc": "选择列表文件",
"lists__movedown": "下移",
"lists__moveup": "上移",
"lists__new_list_btn": "新建列表",
"lists__new_list_input": "新列表...",
"lists__remove": "删除",
"lists__remove_tip": "你真的想要移除 {name} 吗？",
"lists__remove_tip_button": "是的 没错",
"lists__rename": "重命名",
"lists__sync": "更新",
"loding": "加载中...",
"love_list": "收藏",
"music_name": "歌曲名",
"no_item": "列表竟然是空的...",
"music_singer": "歌手",
"music_time": "时长",
"sync__merge_btn_local_remote": "本机列表 合并 远程列表",
"sync__merge_btn_remote_local": "远程列表 合并 本机列表",
"sync__merge_label": "合并",
"sync__merge_tip": "合并:",
"sync__merge_tip_desc": "将两边的列表合并到一起，相同的歌曲将被去掉（去掉的是被合并者的歌曲），不同的歌曲将被添加。",
"sync__other_label": "其他",
"sync__other_tip": "其他:",
"sync__other_tip_desc": "“仅使用实时同步功能”将不修改双方的列表，仅实时同步操作；“取消同步”将直接断开双方的连接。",
"sync__overwrite": "完全覆盖",
"sync__overwrite_btn_cancel": "取消同步",
"sync__overwrite_btn_local_remote": "本机列表 覆盖 远程列表",
"sync__overwrite_btn_none": "仅使用实时同步功能",
"sync__overwrite_btn_remote_local": "远程列表 覆盖 本机列表",
"sync__overwrite_label": "覆盖",
"sync__overwrite_tip": "覆盖:",
"sync__overwrite_tip_desc": "被覆盖者与覆盖者列表ID相同的列表将被删除后替换成覆盖者的列表（列表ID不同的列表将被合并到一起），若勾选完全覆盖，则被覆盖者的所有列表将被移除，然后替换成覆盖者的列表。",
"sync__title": "选择与 {name} 的列表同步方式",
"agree": "接受",
"not_agree": "不接受",
"player__add_music_to": "添加当前歌曲到...",
"player__music_album": "专辑名：",
"player__buffering": "缓冲中...",
"comment__hot_load_error": "热门评论加载失败，点击尝试重新加载",
"comment__hot_loading": "热门评论加载中",
"comment__hot_title": "热门评论",
"comment__new_load_error": "最新评论加载失败，点击尝试重新加载",
"comment__new_loading": "最新评论加载中",
"comment__new_title": "最新评论",
"comment__no_content": "暂无评论",
"comment__refresh": "刷新评论",
"comment__show": "歌曲评论",
"comment__title": "{name} 的评论",
"copy_tip": "（点击复制）",
"player__desktop_lyric_lock": "右击锁定歌词",
"player__desktop_lyric_off": "关闭桌面歌词",
"player__desktop_lyric_on": "开启桌面歌词",
"player__desktop_lyric_unlock": "右击解锁歌词",
"player__end": "播放完毕",
"player__error": "音频加载出错，5 秒后切换下一首",
"player__geting_url": "歌曲链接获取中...",
"player__hide_detail_tip": "隐藏详情页（界面内右键双击可快速隐藏详情页）",
"player__loading": "音乐加载中...",
"lyric__load_error": "歌词获取失败",
"lyric__select": "歌词文本选择",
"player__music_name": "歌曲名：",
"player__next": "下一首",
"player__pause": "暂停",
"player__pic_tip": "右击在“我的列表”定位当前播放的歌曲",
"player__play": "播放",
"player__play_toggle_mode_list": "顺序播放",
"player__play_toggle_mode_list_loop": "列表循环",
"player__play_toggle_mode_off": "禁用",
"player__play_toggle_mode_random": "列表随机",
"player__play_toggle_mode_single_loop": "单曲循环",
"player__playing": "播放中...",
"player__prev": "上一首",
"player__refresh_url": "URL过期，正在刷新URL...",
"player__music_singer": "艺术家：",
"player__stop": "暂停播放",
"player__volume": "当前音量：",
"pagination__prev": "上一页",
"pagination__next": "下一页",
"pagination__page": "第 {num} 页",
"desktop_lyric__close": "关闭",
"desktop_lyric__back": "返回",
"desktop_lyric__lock": "锁定歌词",
"desktop_lyric__unlock": "解锁歌词",
"desktop_lyric__theme": "主题配色",
"desktop_lyric__font_increase": "增加字体大小（右击可微调）",
"desktop_lyric__font_decrease": "减小字体大小（右击可微调）",
"desktop_lyric__opactiy_increase": "减小透明度（右击可微调）",
"desktop_lyric__opactiy_decrease": "增加透明度（右击可微调）",
"desktop_lyric__lrc_active_zoom_on": "缩放当前播放的歌词",
"desktop_lyric__lrc_active_zoom_off": "取消缩放当前播放的歌词",
"desktop_lyric__win_top_on": "置顶歌词界面",
"desktop_lyric__win_top_off": "取消置顶歌词界面",
"theme_green": "绿意盎然",
"theme_blue": "蓝田生玉",
"theme_yellow": "信口雌黄",
"theme_orange": "橙黄橘绿",
"theme_red": "热情似火",
"theme_pink": "粉装玉琢",
"theme_purple": "重斤球紫",
"theme_grey": "灰常美丽",
"theme_ming": "青出于黑",
"theme_blue2": "清热版蓝",
"theme_black": "黑灯瞎火",
"theme_mid_autumn": "月里嫦娥",
"theme_naruto": "木叶之村",
"theme_happy_new_year": "新年快乐",
"source_kw": "酷我音乐",
"source_kg": "酷狗音乐",
"source_tx": "企鹅音乐",
"source_wy": "网易音乐",
"source_mg": "咪咕音乐",
"source_xm": "虾米音乐",
"source_bd": "百度音乐",
"source_all": "聚合搜索",
"source_alias_kw": "小蜗音乐",
"source_alias_kg": "小枸音乐",
"source_alias_tx": "小秋音乐",
"source_alias_wy": "小芸音乐",
"source_alias_mg": "小蜜音乐",
"source_alias_xm": "小霞音乐",
"source_alias_bd": "小杜音乐",
"source_alias_all": "聚合大会",
"load_list_file_error_title": "播放列表数据加载错误（建议到GitHub或加群反馈）",
"load_list_file_error_detail": "我们已经帮你把旧的列表文件备份到{path}\n它以 JSON 格式存储，你可以尝试手动修复并恢复它\n\n错误详情：{detail}",
"search__welcome": "搜我所想~~😉",
"search__hot_search": "热门搜索",
"history_search": "历史搜索",
"history_clear": "清空搜索历史",
"history_remove": "右击移除该历史",
"download__progress": "进度",
"download__status": "状态",
"download__quality": "品质",
"download__all": "全部任务",
"download__runing": "正在下载",
"download__paused": "已暂停",
"download__error": "出错",
"download__finished": "下载完成",
"back": "返回",
"songlist__open_list": "打开{name}歌单",
"songlist__import_input_tip": "输入歌单链接或歌单ID",
"songlist__import_input_tip_1": "不支持跨源打开歌单，请确认要打开的歌单与当前歌单源是否对应",
"songlist__import_input_tip_2": "若遇到无法打开的歌单链接，欢迎反馈",
"songlist__import_input_tip_3": "酷狗源不支持用歌单ID打开，但支持酷狗码打开",
"default": "默认",
"music_duplicate": "重复歌曲",
"export": "导出",
"list__export_part_desc": "选择列表文件保存位置",
"import": "导入",
"list__import_part_button_cancel": "不要啊",
"list__import_part_button_confirm": "覆盖掉",
"list__import_part_confirm": "导入的列表（{importName}）与本地列表（{localName}）的ID相同，是否覆盖本地列表？",
"list__import_part_desc": "选择列表文件",
"list__movedown": "下移",
"list__moveup": "上移",
"list__new_list_btn": "新建列表",
"list__new_list_input": "新列表...",
"list__remove_tip": "你真的想要移除 {name} 吗？",
"list__remove_tip_button": "是的 没错",
"list__rename": "重命名",
"list__sync": "更新",
"music_sort__title": "将 {name} 的位置调整到：",
"music_sort__title_multiple": "将已选的 {num} 首歌曲的位置调整到：",
"music_sort__input_tip": "请输入要调整到第几个位置",
"music_sort__btn_confirm": "确定",
"cancel_button_text": "我不",
"confirm_button_text": "好的",
"date_format_hour": "{num}小时前",
"date_format_minute": "{num}分钟前",
"date_format_second": "{num}秒前",
"setting__about": "关于洛雪音乐",
"setting__backup": "备份与恢复",
"setting__backup_all": "所有数据（列表数据与设置数据）",
"setting__backup_all_export": "导出",
"setting__backup_all_export_desc": "选择备份保存位置",
"setting__backup_all_import": "导入",
"setting__backup_all_import_desc": "选择备份文件",
"setting__backup_part": "部分数据（列表数据包括试听列表、收藏列表、用户自定义列表，设置数据不包括快捷键设置）",
"setting__backup_part_export_list": "导出列表",
"setting__backup_part_export_list_desc": "选择歌单保存位置",
"setting__backup_part_export_setting": "导出设置",
"setting__backup_part_export_setting_desc": "选择设置保存位置",
"setting__backup_part_import_list": "导入列表",
"setting__backup_part_import_list_desc": "选择列表文件",
"setting__backup_part_import_setting": "导入设置",
"setting__backup_part_import_setting_desc": "选择配置文件",
"setting__basic": "基本设置",
"setting__basic_animation": "弹出层随机动画",
"setting__basic_control_btn_position": "控制按钮位置",
"setting__basic_control_btn_position_left": "左边",
"setting__basic_control_btn_position_right": "右边",
"setting__basic_lang": "语言",
"setting__basic_lang_title": "软件显示的语言",
"setting__basic_show_animation": "显示切换动画",
"setting__basic_source": "音乐来源",
"setting__basic_source_status_failed": "初始化失败",
"setting__basic_source_status_initing": "初始化中",
"setting__basic_source_status_success": "初始化成功",
"setting__basic_source_temp": "临时接口（软件的某些功能不可用，建议测试接口不可用再使用本接口）",
"setting__basic_source_test": "测试接口（几乎软件的所有功能都可用）",
"setting__basic_source_title": "选择音乐来源",
"setting__basic_source_user_api_btn": "自定义源管理",
"setting__basic_sourcename": "音源名字",
"setting__basic_sourcename_alias": "别名",
"setting__basic_sourcename_real": "原名",
"setting__basic_sourcename_title": "选择音源名字类型",
"setting__basic_theme": "主题颜色",
"setting__basic_to_tray": "关闭软件时不退出软件将其最小化到系统托盘",
"setting__basic_window_size": "窗口尺寸",
"setting__basic_window_size_big": "大",
"setting__basic_window_size_huge": "巨大",
"setting__basic_window_size_larger": "较大",
"setting__basic_window_size_medium": "中",
"setting__basic_window_size_oversized": "超大",
"setting__basic_window_size_small": "小",
"setting__basic_window_size_smaller": "较小",
"setting__basic_window_size_title": "设置软件窗口尺寸",
"setting__click_copy": "点击复制",
"setting__click_open": "点击打开",
"setting__desktop_lyric": "桌面歌词设置",
"setting__desktop_lyric_always_on_top": "使歌词总是在其他窗口之上",
"setting__desktop_lyric_enable": "显示歌词",
"setting__desktop_lyric_font": "歌词字体",
"setting__desktop_lyric_font_default": "默认",
"setting__desktop_lyric_lock": "锁定歌词",
"setting__desktop_lyric_lock_screen": "不允许歌词窗口拖出主屏幕之外",
"setting__download": "下载设置",
"setting__download_data_embed": "是否将以下内容嵌入到音频文件中",
"setting__download_embed_lyric": "歌词嵌入",
"setting__download_embed_pic": "封面嵌入",
"setting__download_enable": "是否启用下载功能",
"setting__download_lyric": "歌词下载",
"setting__download_lyric_format": "下载的歌词文件编码格式",
"setting__download_lyric_format_gbk": "GBK（在某些设备上出现中文乱码时可尝试选择此格式）",
"setting__download_lyric_format_utf8": "UTF-8",
"setting__download_lyric_title": "是否同时下载歌词文件",
"setting__download_name": "文件命名方式",
"setting__download_name1": "歌名 - 歌手",
"setting__download_name2": "歌手 - 歌名",
"setting__download_name3": "歌名",
"setting__download_name_title": "下载歌曲时的命名方式",
"setting__download_path": "下载路径",
"setting__download_path_change_btn": "更改",
"setting__download_path_label": "当前下载路径：",
"setting__download_path_open_label": "点击打开当前路径",
"setting__download_path_title": "下载歌曲保存的路径",
"setting__download_select_save_path": "选择歌曲保存路径",
"setting__download_use_other_source": "自动换源下载（当无法从歌曲的原始源下载时，尝试切换到其他源下载，注：此功能不100%保证换源后的歌曲版本与原版一致）",
"setting__hot_key": "快捷键设置",
"setting__hot_key_common_focus_search_input": "聚焦搜索框",
"setting__hot_key_common_min": "最小化程序",
"setting__hot_key_common_toggle_close": "退出程序",
"setting__hot_key_common_toggle_hide": "显示/隐藏程序",
"setting__hot_key_common_toggle_min": "最小化/还原程序",
"setting__hot_key_desktop_lyric_toggle_always_top": "桌面歌词置顶切换",
"setting__hot_key_desktop_lyric_toggle_lock": "桌面歌词锁定切换",
"setting__hot_key_desktop_lyric_toggle_visible": "开/关桌面歌词",
"setting__hot_key_global_title": "全局快捷键",
"setting__hot_key_local_title": "软件内快捷键",
"setting__hot_key_player_next": "下一首歌曲",
"setting__hot_key_player_prev": "上一首歌曲",
"setting__hot_key_player_toggle_play": "播放/暂停控制",
"setting__hot_key_player_volume_down": "减少音量",
"setting__hot_key_player_volume_mute": "静音切换",
"setting__hot_key_player_volume_up": "增加音量",
"setting__hot_key_tip_input": "请输入新的按键",
"setting__hot_key_unset_input": "未设置",
"setting__is_enable": "是否启用",
"setting__is_show": "是否显示",
"setting__list": "列表设置",
"setting__list_add_music_location_type": "添加歌曲到列表时的位置",
"setting__list_add_music_location_type_bottom": "底部",
"setting__list_add_music_location_type_top": "顶部",
"setting__list_scroll": "记住播放列表滚动条位置（仅对我的音乐分类有效）",
"setting__list_source": "显示歌曲源（仅对我的音乐分类有效）",
"setting__network": "网络设置",
"setting__network_proxy_host": "主机",
"setting__network_proxy_password": "密码",
"setting__network_proxy_port": "端口",
"setting__network_proxy_title": "HTTP代理设置（乱设置软件将无法联网）",
"setting__network_proxy_username": "用户名",
"setting__odc": "强迫症设置",
"setting__odc_clear_search_input": "离开搜索界面时清空搜索框",
"setting__odc_clear_search_list": "离开搜索界面时清空搜索列表",
"setting__other": "其他",
"setting__other_play_list_cache": "列表缓存管理（我的列表中已缓存的歌曲链接、播放代替源，清理后播放、下载歌曲时需要重新获取，没有歌曲播放相关的问题不要清理）",
"setting__other_play_list_cache_clear_btn": "清理列表缓存信息",
"setting__other_resource_cache": "资源缓存管理（图片、音频等缓存，清理后图片等资源将需要重新下载，不建议清理，软件会根据磁盘空间动态管理缓存大小）",
"setting__other_resource_cache_clear_btn": "清理资源缓存",
"setting__other_resource_cache_label": "软件已使用缓存大小：",
"setting__other_tray_theme": "托盘图标样式",
"setting__other_tray_theme_black": "黑色",
"setting__other_tray_theme_native": "纯色",
"setting__other_tray_theme_origin": "原色",
"setting__play": "播放设置",
"setting__play_lyric_lxlrc": "使用卡拉OK式歌词播放（如果支持）",
"setting__play_lyric_transition": "显示歌词翻译",
"setting__play_mediaDevice": "音频输出",
"setting__play_mediaDevice_remove_stop_play": "当前的声音输出设备被改变时暂停播放歌曲",
"setting__play_mediaDevice_title": "选择声音输出的媒体设备",
"setting__play_quality": "优先播放320K品质的歌曲（如果支持）",
"setting__play_save_play_time": "记住播放进度",
"setting__play_task_bar": "在任务栏上显示当前歌曲播放进度",
"setting__search": "搜索设置",
"setting__search_focus_search_box": "启动时自动聚焦搜索框",
"setting__search_history": "显示历史搜索记录",
"setting__search_hot": "显示热门搜索",
"setting__sync": "数据同步 [此为测试功能，首次使用前建议先备份一次歌单]",
"setting__sync_address": "同步服务地址：{address}",
"setting__sync_auth_code": "连接码：{code}",
"setting__sync_device": "已连接的设备：{devices}",
"setting__sync_enable": "启用同步功能（由于数据是明文传输，请在受信任的网络下使用）",
"setting__sync_port": "同步端口设置",
"setting__sync_port_tip": "请输入同步服务端口号",
"setting__sync_refresh_code": "刷新连接码",
"setting__update": "软件更新",
"setting__update_checking": "检查更新中...",
"setting__update_current_label": "当前版本：",
"setting__update_downloading": "发现新版本并在努力下载中，请稍后...⏳",
"setting__update_init": "处理更新中...",
"setting__update_latest": "软件已是最新，尽情地体验吧~🥂",
"setting__update_latest_label": "最新版本：",
"setting__update_open_version_modal_btn": "打开更新窗口 🚀",
"setting__update_progress": "下载进度：",
"setting__update_unknown": "未知",
"user_api__title": "自定义源管理",
"user_api__readme": "源编写说明：",
"user_api__note": "提示：虽然我们已经尽可能地隔离了脚本的运行环境，但导入包含恶意行为的脚本仍可能会影响你的系统，请谨慎导入。",
"user_api__btn_remove": "移除",
"user_api__btn_import": "导入",
"user_api__btn_export": "导出",
"user_api__import_file": "选择音乐API脚本文件",
"user_api__noitem": "这里竟然是空的 😲"
}

385
src/lang/zh-tw.json Normal file
View File

@ -0,0 +1,385 @@
{
"action": "操作",
"agree": "接受",
"download": "下載管理",
"leaderboard": "排行榜",
"my_list": "我的列表",
"search": "搜索",
"setting": "設置",
"song_list": "歌單",
"close": "關閉",
"comment__hot_load_error": "熱門評論加載失敗，點擊嘗試重新加載",
"comment__hot_loading": "熱門評論加載中",
"comment__hot_title": "熱門評論",
"comment__new_load_error": "最新評論加載失敗，點擊嘗試重新加載",
"comment__new_loading": "最新評論加載中",
"comment__new_title": "最新評論",
"comment__no_content": "暫無評論",
"comment__refresh": "刷新評論",
"comment__show": "歌曲評論",
"comment__title": "{name} 的評論",
"copy_tip": "（點擊複製）",
"default_list": "試聽列表",
"desktop_lyric__back": "返回",
"desktop_lyric__close": "關閉",
"desktop_lyric__font_decrease": "減小字體大小（右擊可微調）",
"desktop_lyric__font_increase": "增加字體大小（右擊可微調）",
"desktop_lyric__lock": "鎖定歌詞",
"desktop_lyric__lrc_active_zoom_off": "取消縮放當前播放的歌詞",
"desktop_lyric__lrc_active_zoom_on": "縮放當前播放的歌詞",
"desktop_lyric__opactiy_decrease": "增加透明度（右擊可微調）",
"desktop_lyric__opactiy_increase": "減小透明度（右擊可微調）",
"desktop_lyric__theme": "主題配色",
"desktop_lyric__unlock": "解鎖歌詞",
"desktop_lyric__win_top_off": "取消置頂歌詞界面",
"desktop_lyric__win_top_on": "置頂歌詞界面",
"download__high_quality": "高品音質",
"download__lossless": "無損音質",
"download__multiple_tip": "已選擇 {len} 首歌曲",
"download__multiple_tip2": "請選擇要優先下載的音質",
"download__normal": "普通音質",
"download__not_available_tip": "該音質不可用",
"list__add_to": "添加到...",
"list__collect": "收藏",
"list__copy_name": "複製歌曲名",
"list__download": "下載",
"list__file": "定位文件",
"list__load_failed": "啊，加載失敗了😭",
"list__loading": "列表加載中...⏳",
"list__move_to": "移動到...",
"list__pause": "暫停任務",
"list__play": "播放",
"list__play_later": "稍後播放",
"list__remove": "刪除",
"list__search": "搜索",
"list__sort": "調整位置",
"list__source_detail": "歌曲詳情頁",
"list__start": "開始任務",
"list_add__btn_title": "把該歌曲添加到 {name}",
"list_add__multiple_btn_title": "把這些歌曲添加到 {name}",
"list_add__multiple_title_add": "添加已選的 {num} 首歌曲到...",
"list_add__multiple_title_move": "添加移動已選的 {num} 首歌曲到...",
"list_add__title_first_add": "添加",
"list_add__title_first_move": "移動",
"list_add__title_last": "到...",
"lists__duplicate": "重複歌曲",
"lists__export": "導出",
"lists__export_part_desc": "選擇列表文件保存位置",
"lists__import": "導入",
"lists__import_part_button_cancel": "不要啊",
"lists__import_part_button_confirm": "覆蓋掉",
"lists__import_part_confirm": "導入的列表（{importName}）與本地列表（{localName}）的ID相同，是否覆蓋本地列表？",
"lists__import_part_desc": "選擇列表文件",
"lists__movedown": "下移",
"lists__moveup": "上移",
"lists__new_list_btn": "新建列表",
"lists__new_list_input": "新列表...",
"lists__remove": "刪除",
"lists__remove_tip": "你真的想要移除 {name} 嗎？",
"lists__remove_tip_button": "是的 沒錯",
"lists__rename": "重命名",
"lists__sync": "更新",
"load_list_file_error_detail": "我們已經幫你把舊的列表文件備份到{path}\n它以 JSON 格式存儲，你可以嘗試手動修復並恢復它\n\n錯誤詳情：{detail}",
"load_list_file_error_title": "播放列表數據加載錯誤",
"loding": "加載中...",
"love_list": "收藏列表",
"lyric__load_error": "歌詞獲取失敗",
"lyric__select": "歌詞文本選擇",
"min": "最小化",
"music_album": "專輯",
"music_name": "歌曲名",
"music_singer": "歌手",
"music_time": "時長",
"no_item": "列表竟然是空的...",
"not_agree": "不接受",
"pagination__next": "下一頁",
"pagination__page": "第 {num} 頁",
"pagination__prev": "上一頁",
"player__add_music_to": "添加當前歌曲到...",
"player__album": "專輯名：",
"player__buffering": "緩衝中...",
"player__desktop_lyric_lock": "右擊鎖定歌詞",
"player__desktop_lyric_off": "關閉桌面歌詞",
"player__desktop_lyric_on": "開啟桌面歌詞",
"player__desktop_lyric_unlock": "右擊解鎖歌詞",
"player__end": "播放完畢",
"player__error": "音頻加載出錯，5 秒後切換下一首",
"player__geting_url": "歌曲鏈接獲取中...",
"player__hide_detail_tip": "隱藏詳情頁（界面內右鍵雙擊可快速隱藏詳情頁）",
"player__loading": "音樂加載中...",
"player__music_name": "歌曲名：",
"player__music_singer": "藝術家：",
"player__next": "下一首",
"player__pause": "暫停",
"player__pic_tip": "右擊在“我的列表”定位當前播放的歌曲",
"player__play": "播放",
"player__play_toggle_mode_list": "順序播放",
"player__play_toggle_mode_list_loop": "列表循環",
"player__play_toggle_mode_off": "禁用",
"player__play_toggle_mode_random": "列表隨機",
"player__play_toggle_mode_single_loop": "單曲循環",
"player__playing": "播放中...",
"player__prev": "上一首",
"player__refresh_url": "URL過期，正在刷新URL...",
"player__stop": "暫停播放",
"player__volume": "當前音量：",
"source_alias_all": "聚合大會",
"source_alias_bd": "小杜音樂",
"source_alias_kg": "小枸音樂",
"source_alias_kw": "小蝸音樂",
"source_alias_mg": "小蜜音樂",
"source_alias_tx": "小秋音樂",
"source_alias_wy": "小芸音樂",
"source_alias_xm": "小霞音樂",
"source_all": "聚合搜索",
"source_bd": "百度音樂",
"source_kg": "酷狗音樂",
"source_kw": "酷我音樂",
"source_mg": "咪咕音樂",
"source_tx": "企鵝音樂",
"source_wy": "網易音樂",
"source_xm": "蝦米音樂",
"sync__merge_btn_local_remote": "本機列表 合併 遠程列表",
"sync__merge_btn_remote_local": "遠程列表 合併 本機列表",
"sync__merge_label": "合併",
"sync__merge_tip": "合併:",
"sync__merge_tip_desc": "將兩邊的列表合併到一起，相同的歌曲將被去掉（去掉的是被合併者的歌曲），不同的歌曲將被添加。",
"sync__other_label": "其他",
"sync__other_tip": "其他:",
"sync__other_tip_desc": "“僅使用實時同步功能”將不修改雙方的列表，僅實時同步操作；“取消同步”將直接斷開雙方的連接。",
"sync__overwrite": "完全覆蓋",
"sync__overwrite_btn_cancel": "取消同步",
"sync__overwrite_btn_local_remote": "本機列表 覆蓋 遠程列表",
"sync__overwrite_btn_none": "僅使用實時同步功能",
"sync__overwrite_btn_remote_local": "遠程列表 覆蓋 本機列表",
"sync__overwrite_label": "覆蓋",
"sync__overwrite_tip": "覆蓋:",
"sync__overwrite_tip_desc": "被覆蓋者與覆蓋者列表ID相同的列表將被刪除後替換成覆蓋者的列表（列表ID不同的列表將被合併到一起），若勾選完全覆蓋，則被覆蓋者的所有列表將被移除，然後替換成覆蓋者的列表。",
"sync__title": "選擇與 {name} 的列表同步方式",
"tag__high_quality": "HQ",
"tag__lossless": "SQ",
"theme_black": "黑燈瞎火",
"theme_blue": "藍田生玉",
"theme_blue2": "清熱版藍",
"theme_green": "綠意盎然",
"theme_grey": "灰常美麗",
"theme_happy_new_year": "新年快樂",
"theme_mid_autumn": "月裡嫦娥",
"theme_ming": "青出於黑",
"theme_naruto": "木葉之村",
"theme_orange": "橙黃橘綠",
"theme_pink": "粉裝玉琢",
"theme_purple": "重斤球紫",
"theme_red": "熱情似火",
"theme_yellow": "信口雌黃",
"search__welcome": "搜我所想~~😉",
"search__hot_search": "熱門搜索",
"history_search": "歷史搜索",
"history_clear": "清空搜索歷史",
"history_remove": "右擊移除該歷史",
"download__progress": "進度",
"download__status": "狀態",
"download__quality": "品質",
"download__all": "全部任務",
"download__runing": "正在下載",
"download__paused": "已暫停",
"download__error": "出錯",
"download__finished": "下載完成",
"back": "返回",
"songlist__open_list": "打開{name}歌單",
"songlist__import_input_tip": "輸入歌單鏈接或歌單ID",
"songlist__import_input_tip_1": "不支持跨源打開歌單，請確認要打開的歌單與當前歌單源是否對應",
"songlist__import_input_tip_2": "若遇到無法打開的歌單鏈接，歡迎反饋",
"songlist__import_input_tip_3": "酷狗源不支持用歌單ID打開，但支持酷狗碼打開",
"default": "默認",
"music_duplicate": "重複歌曲",
"export": "導出",
"list__export_part_desc": "選擇列表文件保存位置",
"import": "導入",
"list__import_part_button_cancel": "不要啊",
"list__import_part_button_confirm": "覆蓋掉",
"list__import_part_confirm": "導入的列表（{importName}）與本地列表（{localName}）的ID相同，是否覆蓋本地列表？",
"list__import_part_desc": "選擇列表文件",
"list__movedown": "下移",
"list__moveup": "上移",
"list__new_list_btn": "新建列表",
"list__new_list_input": "新列表...",
"list__remove_tip": "你真的想要移除 {name} 嗎？",
"list__remove_tip_button": "是的 沒錯",
"list__rename": "重命名",
"list__sync": "更新",
"music_sort__title": "將 {name} 的位置調整到：",
"music_sort__title_multiple": "將已選的 {num} 首歌曲的位置調整到：",
"music_sort__input_tip": "請輸入要調整到第幾個位置",
"music_sort__btn_confirm": "確定",
"cancel_button_text": "取消",
"confirm_button_text": "好的",
"date_format_hour": "{num}小時前",
"date_format_minute": "{num}分鐘前",
"date_format_second": "{num}秒前",
"setting__about": "關於洛雪音樂",
"setting__backup": "備份與恢復",
"setting__backup_all": "所有數據（列表數據與設置數據）",
"setting__backup_all_export": "導出",
"setting__backup_all_export_desc": "選擇備份保存位置",
"setting__backup_all_import": "導入",
"setting__backup_all_import_desc": "選擇備份文件",
"setting__backup_part": "部分數據（列表數據包括試聽列表、收藏列表、用戶自定義列表，設置數據不包括快捷鍵設置）",
"setting__backup_part_export_list": "導出列表",
"setting__backup_part_export_list_desc": "選擇歌單保存位置",
"setting__backup_part_export_setting": "導出設置",
"setting__backup_part_export_setting_desc": "選擇設置保存位置",
"setting__backup_part_import_list": "導入列表",
"setting__backup_part_import_list_desc": "選擇列表文件",
"setting__backup_part_import_setting": "導入設置",
"setting__backup_part_import_setting_desc": "選擇配置文件",
"setting__basic": "基本設置",
"setting__basic_animation": "彈出層隨機動畫",
"setting__basic_control_btn_position": "控制按鈕位置",
"setting__basic_control_btn_position_left": "左邊",
"setting__basic_control_btn_position_right": "右邊",
"setting__basic_lang": "語言",
"setting__basic_lang_title": "軟件顯示的語言",
"setting__basic_show_animation": "顯示切換動畫",
"setting__basic_source": "音樂來源",
"setting__basic_source_status_failed": "初始化失敗",
"setting__basic_source_status_initing": "初始化中",
"setting__basic_source_status_success": "初始化成功",
"setting__basic_source_temp": "臨時接口（軟件的某些功能不可用，建議測試接口不可用再使用本接口）",
"setting__basic_source_test": "測試接口（幾乎軟件的所有功能都可用）",
"setting__basic_source_title": "選擇音樂來源",
"setting__basic_source_user_api_btn": "自定義源管理",
"setting__basic_sourcename": "音源名字",
"setting__basic_sourcename_alias": "別名",
"setting__basic_sourcename_real": "原名",
"setting__basic_sourcename_title": "選擇音源名字類型",
"setting__basic_theme": "主題顏色",
"setting__basic_to_tray": "關閉軟件時不退出軟件將其最小化到系統托盤",
"setting__basic_window_size": "窗口尺寸",
"setting__basic_window_size_big": "大",
"setting__basic_window_size_huge": "巨大",
"setting__basic_window_size_larger": "較大",
"setting__basic_window_size_medium": "中",
"setting__basic_window_size_oversized": "超大",
"setting__basic_window_size_small": "小",
"setting__basic_window_size_smaller": "較小",
"setting__basic_window_size_title": "設置軟件窗口尺寸",
"setting__click_copy": "點擊複製",
"setting__click_open": "點擊打開",
"setting__desktop_lyric": "桌面歌詞設置",
"setting__desktop_lyric_always_on_top": "使歌詞總是在其他窗口之上",
"setting__desktop_lyric_enable": "顯示歌詞",
"setting__desktop_lyric_font": "歌詞字體",
"setting__desktop_lyric_font_default": "默認",
"setting__desktop_lyric_lock": "鎖定歌詞",
"setting__desktop_lyric_lock_screen": "不允許歌詞窗口拖出主屏幕之外",
"setting__download": "下載設置",
"setting__download_data_embed": "是否將以下內容嵌入到音頻文件中",
"setting__download_embed_lyric": "歌詞嵌入",
"setting__download_embed_pic": "封面嵌入",
"setting__download_enable": "是否啟用下載功能",
"setting__download_lyric": "歌詞下載",
"setting__download_lyric_format": "下載的歌詞文件編碼格式",
"setting__download_lyric_format_gbk": "GBK（在某些設備上出現中文亂碼時可嘗試選擇此格式）",
"setting__download_lyric_format_utf8": "UTF-8",
"setting__download_lyric_title": "是否同時下載歌詞文件",
"setting__download_name": "文件命名方式",
"setting__download_name1": "歌名 - 歌手",
"setting__download_name2": "歌手 - 歌名",
"setting__download_name3": "歌名",
"setting__download_name_title": "下載歌曲時的命名方式",
"setting__download_path": "下載路徑",
"setting__download_path_change_btn": "更改",
"setting__download_path_label": "當前下載路徑：",
"setting__download_path_open_label": "點擊打開當前路徑",
"setting__download_path_title": "下載歌曲保存的路徑",
"setting__download_select_save_path": "選擇歌曲保存路徑",
"setting__download_use_other_source": "自動換源下載（當無法從歌曲的原始源下載時，嘗試切換到其他源下載，注：此功能不100%保證換源後的歌曲版本與原版一致）",
"setting__hot_key": "快捷鍵設置",
"setting__hot_key_common_focus_search_input": "聚焦搜索框",
"setting__hot_key_common_min": "最小化程序",
"setting__hot_key_common_toggle_close": "退出程序",
"setting__hot_key_common_toggle_hide": "顯示/隱藏程序",
"setting__hot_key_common_toggle_min": "最小化/還原程序",
"setting__hot_key_desktop_lyric_toggle_always_top": "桌面歌詞置頂切換",
"setting__hot_key_desktop_lyric_toggle_lock": "桌面歌詞鎖定切換",
"setting__hot_key_desktop_lyric_toggle_visible": "開/關桌面歌詞",
"setting__hot_key_global_title": "全局快捷鍵",
"setting__hot_key_local_title": "軟件內快捷鍵",
"setting__hot_key_player_next": "下一首歌曲",
"setting__hot_key_player_prev": "上一首歌曲",
"setting__hot_key_player_toggle_play": "播放/暫停控制​​",
"setting__hot_key_player_volume_down": "減少音量",
"setting__hot_key_player_volume_mute": "靜音切換",
"setting__hot_key_player_volume_up": "增加音量",
"setting__hot_key_tip_input": "請輸入新的按鍵",
"setting__hot_key_unset_input": "未設置",
"setting__is_enable": "是否啟用",
"setting__is_show": "是否顯示",
"setting__list": "列表設置",
"setting__list_add_music_location_type": "添加歌曲到列表時的位置",
"setting__list_add_music_location_type_bottom": "底部",
"setting__list_add_music_location_type_top": "頂部",
"setting__list_scroll": "記住播放列表滾動條位置（僅對我的音樂分類有效）",
"setting__list_source": "顯示歌曲源（僅對我的音樂分類有效）",
"setting__network": "網絡設置",
"setting__network_proxy_host": "主機",
"setting__network_proxy_password": "密碼",
"setting__network_proxy_port": "端口",
"setting__network_proxy_title": "HTTP代理設置（亂設置軟件將無法聯網）",
"setting__network_proxy_username": "用戶名",
"setting__odc": "強迫症設置",
"setting__odc_clear_search_input": "離開搜索界面時清空搜索框",
"setting__odc_clear_search_list": "離開搜索界面時清空搜索列表",
"setting__other": "其他",
"setting__other_play_list_cache": "列表緩存管理（我的列表中已緩存的歌曲鏈接、播放代替源，清理後播放、下載歌曲時需要重新獲取，沒有歌曲播放相關的問題不要清理）",
"setting__other_play_list_cache_clear_btn": "清理列表緩存信息",
"setting__other_resource_cache": "資源緩存管理（圖片、音頻等緩存，清理後圖片等資源將需要重新下載，不建議清理，軟件會根據磁盤空間動態管理緩存大小）",
"setting__other_resource_cache_clear_btn": "清理資源緩存",
"setting__other_resource_cache_label": "軟件已使用緩存大小：",
"setting__other_tray_theme": "托盤圖標樣式",
"setting__other_tray_theme_black": "黑色",
"setting__other_tray_theme_native": "純色",
"setting__other_tray_theme_origin": "原色",
"setting__play": "播放設置",
"setting__play_lyric_lxlrc": "使用卡拉OK式歌詞播放（如果支持）",
"setting__play_lyric_transition": "顯示歌詞翻譯",
"setting__play_mediaDevice": "音頻輸出",
"setting__play_mediaDevice_remove_stop_play": "當前的聲音輸出設備被改變時暫停播放歌曲",
"setting__play_mediaDevice_title": "選擇聲音輸出的媒體設備",
"setting__play_quality": "優先播放320K品質的歌曲（如果支持）",
"setting__play_save_play_time": "記住播放進度",
"setting__play_task_bar": "在任務欄上顯示當前歌曲播放進度",
"setting__search": "搜索設置",
"setting__search_focus_search_box": "啟動時自動聚焦搜索框",
"setting__search_history": "顯示歷史搜索記錄",
"setting__search_hot": "顯示熱門搜索",
"setting__sync": "數據同步 [此為測試功能，首次使用前建議先備份一次歌單]",
"setting__sync_address": "同步服務地址：{address}",
"setting__sync_auth_code": "連接碼：{code}",
"setting__sync_device": "已連接的設備：{devices}",
"setting__sync_enable": "啟用同步功能（由於數據是明文傳輸，請在受信任的網絡下使用）",
"setting__sync_port": "同步端口設置",
"setting__sync_port_tip": "請輸入同步服務端口號",
"setting__sync_refresh_code": "刷新連接碼",
"setting__update": "軟件更新",
"setting__update_checking": "檢查更新中...",
"setting__update_current_label": "當前版本：",
"setting__update_downloading": "發現新版本並在努力下載中，請稍後...⏳",
"setting__update_init": "處理更新中...",
"setting__update_latest": "軟件已是最新，盡情地體驗吧~🥂",
"setting__update_latest_label": "最新版本：",
"setting__update_open_version_modal_btn": "打開更新窗口 🚀",
"setting__update_progress": "下載進度：",
"setting__update_unknown": "未知",
"user_api__title": "自定義源管理",
"user_api__readme": "源編寫說明：",
"user_api__note": "提示：雖然我們已經盡可能地隔離了腳本的運行環境，但導入包含惡意行為的腳本仍可能會影響你的系統，請謹慎導入。",
"user_api__btn_remove": "移除",
"user_api__btn_import": "導入",
"user_api__btn_export": "導出",
"user_api__import_file": "選擇音樂API腳本文件",
"user_api__noitem": "這裡竟然是空的 😲"
}

4
src/main/index.js
View File

@ -38,7 +38,7 @@ if (process.platform == 'linux') app.commandLine.appendSwitch('use-gl', 'desktop
app.commandLine.appendSwitch('wm-window-animations-disabled')
const { navigationUrlWhiteList } = require('../common/config')
const { navigationUrlWhiteList, themes } = require('../common/config')
const { getWindowSizeInfo, initSetting, updateSetting } = require('./utils')
const { isMac, isLinux, initHotKey } = require('../common/utils')
@ -121,7 +121,7 @@ function createWindow() {
},
})
global.modules.mainWindow.loadURL(winURL)
global.modules.mainWindow.loadURL(winURL + `?dt=${!!global.envParams.cmdParams.dt}&theme=${themes.find(t => t.id == global.appSetting.themeId)?.className ?? themes[0].className}`)
winEvent(global.modules.mainWindow)
// global.modules.mainWindow.webContents.openDevTools()

1
src/main/rendererEvents/index.js
View File

@ -20,6 +20,7 @@ require('./data')
require('./lyric')
require('./musicUrl')
require('./systemFonts')
require('./wait')
// require('./kw_decodeLyric')

4
src/main/rendererEvents/playList.js
View File

@ -8,16 +8,18 @@ mainHandle(ipcMainWindowNames.get_playlist, async(event, isIgnoredError = false)
return {
defaultList: electronStore_list.get('defaultList'),
loveList: electronStore_list.get('loveList'),
tempList: electronStore_list.get('tempList'),
userList: electronStore_list.get('userList'),
downloadList: getStore('downloadList').get('list'),
}
})
const handleSaveList = ({ defaultList, loveList, userList }) => {
const handleSaveList = ({ defaultList, loveList, userList, tempList }) => {
let data = {}
if (defaultList != null) data.defaultList = defaultList
if (loveList != null) data.loveList = loveList
if (userList != null) data.userList = userList
if (tempList != null) data.tempList = tempList
getStore('playList').set(data)
}
mainOn(ipcMainWindowNames.save_playlist, (event, { type, data }) => {

2
src/main/rendererEvents/setLyricInfo.js
View File

@ -1,4 +1,4 @@
const { mainOn, mainSend, NAMES: { mainWindow: ipcMainWindowNames } } = require('../../common/ipc')
const { mainOn, mainSend, NAMES: { mainWindow: ipcMainWindowNames } } = require('@common/ipc')
mainOn(ipcMainWindowNames.set_lyric_info, (event, info) => {

25
src/main/rendererEvents/wait.js Normal file
View File

@ -0,0 +1,25 @@
const { mainOn, mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('@common/ipc')
const timeoutMap = new Map()
mainHandle(ipcMainWindowNames.wait, (event, { time, id }) => {
return new Promise((resolve, reject) => {
const timeout = setTimeout(() => {
if (timeoutMap.has(id)) timeoutMap.delete(id)
resolve()
}, time)
timeoutMap.set(id, {
timeout,
resolve,
reject,
})
})
})
mainOn(ipcMainWindowNames.wait_cancel, (event, id) => {
if (!timeoutMap.has(id)) return
const timeout = timeoutMap.get(id)
timeoutMap.delete(id)
clearTimeout(timeout.timeout)
timeout.reject('cancelled')
})

11
src/renderer-lyric/App.vue
View File

@ -105,7 +105,7 @@ export default {
document.addEventListener('mousemove', this.handleMouseMove)
document.addEventListener('mouseup', this.handleMouseUp)
},
beforeDestroy() {
beforeUnmount() {
document.removeEventListener('mousemove', this.handleMouseMove)
document.removeEventListener('mouseup', this.handleMouseUp)
},
@ -224,6 +224,15 @@ body {
opacity: .8;
}
body {
user-select: none;
height: 100vh;
box-sizing: border-box;
}
#root {
height: 100%;
}
#container {
padding: 8px;
box-sizing: border-box;

23
src/renderer-lyric/components/core/ControlBar.vue
View File

@ -2,38 +2,38 @@
div(:class="$style.container")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated fadeOut")
div(:class="$style.btns" v-show="!isShowThemeList")
button(:class="$style.btn" @click="handleClose" :title="$t('desktopLyric.close')")
button(:class="$style.btn" @click="handleClose" :title="$t('desktop_lyric__close')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-close')
button(:class="$style.btn" @click="handleLock" :title="$t('desktopLyric.' + (lrcConfig.isLock ? 'unlock' : 'lock'))")
button(:class="$style.btn" @click="handleLock" :title="$t('desktop_lyric__' + (lrcConfig.isLock ? 'unlock' : 'lock'))")
svg(v-if="config.isLock" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-unlock')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-lock')
button(:class="$style.btn" :title="$t('desktopLyric.theme')" @click="isShowThemeList = true")
button(:class="$style.btn" :title="$t('desktop_lyric__theme')" @click="isShowThemeList = true")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-theme')
button(:class="$style.btn" @click="handleFontChange('increase', 10)" @contextmenu="handleFontChange('increase', 1)" :title="$t('desktopLyric.font_increase')")
button(:class="$style.btn" @click="handleFontChange('increase', 10)" @contextmenu="handleFontChange('increase', 1)" :title="$t('desktop_lyric__font_increase')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-font-increase')
button(:class="$style.btn" @click="handleFontChange('decrease', 10)" @contextmenu="handleFontChange('decrease', 1)" :title="$t('desktopLyric.font_decrease')")
button(:class="$style.btn" @click="handleFontChange('decrease', 10)" @contextmenu="handleFontChange('decrease', 1)" :title="$t('desktop_lyric__font_decrease')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-font-decrease')
button(:class="$style.btn" @click="handleOpactiyChange('increase', 10)" @contextmenu="handleOpactiyChange('increase', 2)" :title="$t('desktopLyric.opactiy_increase')")
button(:class="$style.btn" @click="handleOpactiyChange('increase', 10)" @contextmenu="handleOpactiyChange('increase', 2)" :title="$t('desktop_lyric__opactiy_increase')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-opactiy-increase')
button(:class="$style.btn" @click="handleOpactiyChange('decrease', 10)" @contextmenu="handleOpactiyChange('decrease', 2)" :title="$t('desktopLyric.opactiy_decrease')")
button(:class="$style.btn" @click="handleOpactiyChange('decrease', 10)" @contextmenu="handleOpactiyChange('decrease', 2)" :title="$t('desktop_lyric__opactiy_decrease')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-opactiy-decrease')
//- button(:class="$style.btn" v-text="lrcConfig.style.isZoomActiveLrc ? '取消缩放' : '缩放歌词'" @click="handleZoomLrc")
button(:class="$style.btn" @click="handleZoomLrc" :title="$t('desktopLyric.' + (lrcConfig.style.isZoomActiveLrc ? 'lrc_active_zoom_off' : 'lrc_active_zoom_on'))")
button(:class="$style.btn" @click="handleZoomLrc" :title="$t('desktop_lyric__' + (lrcConfig.style.isZoomActiveLrc ? 'lrc_active_zoom_off' : 'lrc_active_zoom_on'))")
svg(v-if="config.style.isZoomActiveLrc" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-vibrate-off')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-vibrate')
button(:class="$style.btn" @click="handleAlwaysOnTop" :title="$t('desktopLyric.' + (lrcConfig.isAlwaysOnTop ? 'win_top_off' : 'win_top_on'))")
button(:class="$style.btn" @click="handleAlwaysOnTop" :title="$t('desktop_lyric__' + (lrcConfig.isAlwaysOnTop ? 'win_top_off' : 'win_top_on'))")
svg(v-if="config.isAlwaysOnTop" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-top-off')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 24 24' space='preserve')
@ -44,7 +44,7 @@ div(:class="$style.container")
div(:class="$style.themes" v-show="isShowThemeList")
ul(:class="$style.themeList")
li(:class="$style.btnBack")
button(:class="$style.btn" @click="isShowThemeList = false" :title="$t('desktopLyric.back')")
button(:class="$style.btn" @click="isShowThemeList = false" :title="$t('desktop_lyric__back')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='20px' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-back')
li(:class="[$style.themeItem, theme.className, lrcConfig.theme == theme.id ? $style.active : null]" v-for="theme in themes" @click="handleToggleTheme(theme)")
@ -52,6 +52,7 @@ div(:class="$style.container")
<script>
import { rendererSend, rendererOn, NAMES } from '../../../common/ipc'
import { toRaw } from 'vue'
export default {
props: {
@ -113,7 +114,7 @@ export default {
},
methods: {
sendEvent() {
rendererSend(NAMES.winLyric.set_lyric_config, this.config)
rendererSend(NAMES.winLyric.set_lyric_config, toRaw(this.config))
},
handleClose() {
this.config.enable = false

8
src/renderer-lyric/components/core/Lyric.vue
View File

@ -9,8 +9,8 @@ div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }, { [$style.
</template>
<script>
import { rendererOn, rendererSend, NAMES } from '../../../common/ipc'
import { scrollTo } from '../../../renderer/utils'
import { rendererOn, rendererSend, NAMES } from '@common/ipc'
import { scrollTo } from '@renderer/utils'
import Lyric from '@renderer/utils/lyric-font-player'
let cancelScrollFn = null
@ -172,7 +172,7 @@ export default {
document.addEventListener('touchend', this.handleMouseMsUp)
rendererSend(NAMES.winLyric.get_lyric_info, 'info')
},
beforeDestroy() {
beforeUnmount() {
this.clearLyricScrollTimeout()
document.removeEventListener('mousemove', this.handleMouseMsMove)
document.removeEventListener('mouseup', this.handleMouseMsUp)
@ -332,7 +332,7 @@ export default {
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@lyric/assets/styles/layout.less';
.lyric {
text-align: center;

13
src/renderer-lyric/components/index.js
View File

@ -1,13 +1,14 @@
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context('./', true, /\.vue$/)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
export default app => {
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = upperFirst(camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')))
const componentName = upperFirst(camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')))
Vue.component(componentName, componentConfig.default || componentConfig)
})
app.component(componentName, componentConfig.default || componentConfig)
})
}

14
src/renderer-lyric/main.js
View File

@ -1,17 +1,15 @@
import Vue from 'vue'
import { createApp } from 'vue'
import i18n from './plugins/i18n'
import './components'
import mountComponents from './components'
import App from './App'
import '../common/error'
Vue.config.productionTip = false
new Vue({
i18n,
el: '#root',
render: h => h(App),
})
const app = createApp(App)
app.use(i18n)
mountComponents(app)
app.mount('#root')

10
src/renderer-lyric/plugins/i18n.js
View File

@ -7,16 +7,16 @@
*/
// Lib imports
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '../../renderer/lang'
import { createI18n } from 'vue-i18n'
import { messages } from '@/lang'
Vue.use(VueI18n)
const i18n = window.i18n = new VueI18n({
const i18n = createI18n({
locale: 'zh-cn',
fallbackLocale: 'zh-cn',
messages,
})
window.i18n = i18n.global
export default i18n

781
src/renderer/App.vue
View File

@ -1,737 +1,51 @@
<template lang="pug">
#container(v-if="isProd && !isDT && !isLinux" :class="theme" @mouseenter="enableIgnoreMouseEvents" @mouseleave="dieableIgnoreMouseEvents")
#container
core-aside#left
#right
core-toolbar#toolbar
core-view#view
core-player#player
core-play-bar#player
core-icons
material-version-modal(v-show="version.showModal")
material-pact-modal(v-show="!setting.isAgreePact || globalObj.isShowPact")
material-sync-mode-modal(v-show="globalObj.sync.isShowSyncMode")
#container(v-else :class="theme")
core-aside#left
#right
core-toolbar#toolbar
core-view#view
core-player#player
core-icons
material-version-modal(v-show="version.showModal")
material-pact-modal(v-show="!setting.isAgreePact || globalObj.isShowPact")
material-sync-mode-modal(v-show="globalObj.sync.isShowSyncMode")
core-version-modal
core-pact-modal
core-sync-mode-modal
core-play-detail
</template>
<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { rendererOn, rendererSend, rendererInvoke, NAMES } from '../common/ipc'
import { isLinux } from '../common/utils'
import music from './utils/music'
import { throttle, openUrl, compareVer, getPlayList, parseUrlParams, saveSetting } from './utils'
import { base as eventBaseName, sync as eventSyncName } from './event/names'
import apiSourceInfo from './utils/music/api-source-info'
import { initListPosition, initListPrevSelectId } from '@renderer/utils/data'
window.ELECTRON_DISABLE_SECURITY_WARNINGS = process.env.ELECTRON_DISABLE_SECURITY_WARNINGS
const listThrottle = (fn, delay = 100) => {
let timer = null
let _data = {}
return function(data) {
Object.assign(_data, data)
if (timer) return
timer = setTimeout(() => {
timer = null
fn.call(this, _data)
_data = {}
}, delay)
}
}
import { useRefGetter, watch, onMounted } from '@renderer/utils/vueTools'
import useApp from '@renderer/core/useApp'
export default {
data() {
return {
isProd: process.env.NODE_ENV === 'production',
isDT: false,
isLinux,
globalObj: {
apiSource: null,
proxy: {},
isShowPact: false,
qualityList: {},
userApi: {
list: [],
status: false,
message: 'initing',
apis: {},
},
sync: {
enable: false,
isShowSyncMode: false,
deviceName: '',
},
},
updateTimeout: null,
envParams: {
nt: false,
},
}
},
computed: {
...mapGetters(['setting', 'theme', 'version', 'windowSizeActive']),
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
...mapGetters('download', {
downloadList: 'list',
downloadStatus: 'downloadStatus',
}),
...mapGetters('search', {
searchHistoryList: 'historyList',
}),
},
created() {
this.saveMyList = listThrottle(data => {
rendererSend(NAMES.mainWindow.save_playlist, {
type: 'myList',
data,
})
}, 300)
this.saveDownloadList = throttle(n => {
rendererSend(NAMES.mainWindow.save_playlist, {
type: 'downloadList',
data: n,
})
}, 1000)
this.saveSearchHistoryList = throttle(n => {
rendererSend(NAMES.mainWindow.save_data, {
path: 'searchHistoryList',
data: n,
})
}, 500)
},
mounted() {
document.body.classList.add(this.isDT ? 'disableTransparent' : 'transparent')
window.eventHub.$emit(eventBaseName.bindKey)
this.init()
window.eventHub.$on(eventSyncName.handle_action_list, this.handleSyncAction)
window.eventHub.$on(eventSyncName.handle_sync_list, this.handleSyncList)
if (this.setting.sync.enable && this.setting.sync.port) {
rendererInvoke(NAMES.mainWindow.sync_enable, {
enable: this.setting.sync.enable,
port: this.setting.sync.port,
})
}
},
watch: {
setting: {
handler(n, o) {
saveSetting(n)
global.appSetting = n
},
deep: true,
},
defaultList: {
handler(n) {
this.saveMyList({ defaultList: n })
},
deep: true,
},
loveList: {
handler(n) {
this.saveMyList({ loveList: n })
},
deep: true,
},
userList: {
handler(n) {
this.saveMyList({ userList: n })
},
deep: true,
},
downloadList: {
handler(n) {
this.saveDownloadList(window.downloadListFull)
},
deep: true,
},
searchHistoryList(n) {
this.saveSearchHistoryList(n)
},
'globalObj.apiSource'(n, o) {
if (/^user_api/.test(n)) {
this.globalObj.qualityList = {}
this.globalObj.userApi.status = false
this.globalObj.userApi.message = 'initing'
} else {
this.globalObj.qualityList = music.supportQuality[n]
}
if (o === null) return
rendererInvoke(NAMES.mainWindow.set_user_api, n).catch(err => {
console.log(err)
let api = apiSourceInfo.find(api => !api.disabled)
if (api) this.globalObj.apiSource = api.id
})
if (n != this.setting.apiSource) {
this.setSetting(Object.assign({}, this.setting, {
apiSource: n,
}))
}
},
'globalObj.proxy.enable'(n, o) {
if (n != this.setting.network.proxy.enable) {
this.setSetting({
...this.setting,
network: {
...this.setting.network,
proxy: {
...this.setting.network.proxy,
enable: n,
},
},
setup() {
const theme = useRefGetter('theme')
const dom_root = document.getElementById('root')
watch(theme, (val) => {
dom_root.className = val
})
dom_root.className = theme.value
useApp()
onMounted(() => {
// 隐藏等待界面
/* inited.value = true
const dom_mask = document.getElementById('waiting-mask')
if (dom_mask) {
dom_mask.addEventListener('transitionend', () => {
dom_mask.parentNode.removeChild(dom_mask)
})
}
},
'windowSizeActive.fontSize'(n) {
document.documentElement.style.fontSize = n
},
'setting.isShowAnimation': {
handler(n) {
if (n) {
if (document.body.classList.contains('disableAnimation')) {
document.body.classList.remove('disableAnimation')
}
} else {
if (!document.body.classList.contains('disableAnimation')) {
document.body.classList.add('disableAnimation')
}
}
},
immediate: true,
},
},
methods: {
...mapActions(['getVersionInfo']),
...mapMutations(['setNewVersion', 'setVersionModalVisible', 'setDownloadProgress', 'setSetting', 'setDesktopLyricConfig']),
...mapMutations('list', {
list_initList: 'initList',
list_setList: 'setList',
list_listAdd: 'listAdd',
list_listMove: 'listMove',
list_listAddMultiple: 'listAddMultiple',
list_listMoveMultiple: 'listMoveMultiple',
list_listRemove: 'listRemove',
list_listRemoveMultiple: 'listRemoveMultiple',
list_listClear: 'listClear',
list_updateMusicInfo: 'updateMusicInfo',
list_createUserList: 'createUserList',
list_removeUserList: 'removeUserList',
list_setUserListName: 'setUserListName',
list_moveupUserList: 'moveupUserList',
list_movedownUserList: 'movedownUserList',
list_setMusicPosition: 'setMusicPosition',
list_setSyncListData: 'setSyncListData',
}),
...mapMutations('download', ['updateDownloadList']),
...mapMutations('search', {
setSearchHistoryList: 'setHistory',
}),
...mapMutations('player', {
setPlayList: 'setList',
}),
...mapActions('songList', ['getListDetailAll']),
init() {
document.documentElement.style.fontSize = this.windowSizeActive.fontSize
const asyncTask = []
asyncTask.push(rendererInvoke(NAMES.mainWindow.get_env_params).then(this.handleEnvParamsInit))
document.body.addEventListener('click', this.handleBodyClick, true)
rendererOn(NAMES.mainWindow.update_available, (e, info) => {
// this.showUpdateModal(true)
// console.log(info)
this.setVersionModalVisible({ isDownloading: true })
this.getVersionInfo().catch(() => ({
version: info.version,
desc: info.releaseNotes,
})).then(body => {
// console.log(body)
this.setNewVersion(body)
this.$nextTick(() => {
this.setVersionModalVisible({ isShow: true })
})
})
})
rendererOn(NAMES.mainWindow.update_error, (event, err) => {
// console.log(err)
this.clearUpdateTimeout()
this.setVersionModalVisible({ isError: true })
this.$nextTick(() => {
this.showUpdateModal()
})
})
rendererOn(NAMES.mainWindow.update_progress, (event, progress) => {
// console.log(progress)
this.setDownloadProgress(progress)
})
rendererOn(NAMES.mainWindow.update_downloaded, info => {
// console.log(info)
this.clearUpdateTimeout()
this.setVersionModalVisible({ isDownloaded: true })
this.$nextTick(() => {
this.showUpdateModal()
})
})
rendererOn(NAMES.mainWindow.update_not_available, (event, info) => {
this.clearUpdateTimeout()
this.setNewVersion({
version: info.version,
desc: info.releaseNotes,
})
this.setVersionModalVisible({ isLatestVer: true })
})
rendererOn(NAMES.mainWindow.set_config, (event, config) => {
// console.log(config)
// this.setDesktopLyricConfig(config)
// console.log('set_config', JSON.stringify(this.setting) === JSON.stringify(config))
this.setSetting(Object.assign({}, this.setting, config))
window.eventHub.$emit(eventBaseName.set_config, config)
})
// 更新超时定时器
this.updateTimeout = setTimeout(() => {
this.updateTimeout = null
this.setVersionModalVisible({ isTimeOut: true })
this.$nextTick(() => {
this.showUpdateModal()
})
}, 60 * 30 * 1000)
this.listenEvent()
asyncTask.push(this.initData())
asyncTask.push(this.initUserApi())
this.globalObj.sync.enable = this.setting.sync.enable
this.globalObj.apiSource = this.setting.apiSource
if (/^user_api/.test(this.setting.apiSource)) {
rendererInvoke(NAMES.mainWindow.set_user_api, this.setting.apiSource)
} else {
this.globalObj.qualityList = music.supportQuality[this.setting.apiSource]
}
this.globalObj.proxy = Object.assign({}, this.setting.network.proxy)
window.globalObj = this.globalObj
// 初始化音乐sdk
asyncTask.push(music.init())
Promise.all(asyncTask).then(() => {
this.handleInitEnvParamSearch()
this.handleInitEnvParamPlay()
})
},
enableIgnoreMouseEvents() {
if (this.isDT) return
rendererSend(NAMES.mainWindow.set_ignore_mouse_events, false)
// console.log('content enable')
},
dieableIgnoreMouseEvents() {
if (this.isDT) return
// console.log('content disable')
rendererSend(NAMES.mainWindow.set_ignore_mouse_events, true)
},
initData() { // 初始化数据
return Promise.all([
this.initMyList(), // 初始化播放列表
this.initSearchHistoryList(), // 初始化搜索历史列表
initListPosition(), // 列表位置记录
initListPrevSelectId(), // 上次选中的列表记录
])
// this.initDownloadList() // 初始化下载列表
},
initMyList() {
return getPlayList().then(({ defaultList, loveList, userList, downloadList }) => {
if (!defaultList) defaultList = this.defaultList
if (!loveList) loveList = this.loveList
if (userList) {
let needSave = false
const getListId = id => id.includes('.') ? getListId(id.substring(0, id.lastIndexOf('_'))) : id
userList.forEach(l => {
if (!l.id.includes('__') || l.source) return
let [source, id] = l.id.split('__')
id = getListId(id)
l.source = source
l.sourceListId = id
if (!needSave) needSave = true
})
if (needSave) this.saveMyList({ userList })
} else {
userList = this.userList
}
if (!defaultList.list) defaultList.list = []
if (!loveList.list) loveList.list = []
this.list_initList({ defaultList, loveList, userList })
this.initDownloadList(downloadList) // 初始化下载列表
this.initPlayInfo()
})
},
initDownloadList(downloadList) {
if (downloadList) {
downloadList = downloadList.filter(item => item && item.key && item.musicInfo)
for (const item of downloadList) {
if (item.name == null) {
item.name = `${item.musicInfo.name} - ${item.musicInfo.singer}`
item.songmid = item.musicInfo.songmid
}
if (item.status == this.downloadStatus.RUN || item.status == this.downloadStatus.WAITING) {
item.status = this.downloadStatus.PAUSE
item.statusText = '暂停下载'
}
}
this.updateDownloadList(downloadList)
}
},
initSearchHistoryList() {
rendererInvoke(NAMES.mainWindow.get_data, 'searchHistoryList').then(historyList => {
if (historyList == null) {
historyList = []
rendererSend(NAMES.mainWindow.save_data, { path: 'searchHistoryList', data: historyList })
} else {
this.setSearchHistoryList(historyList)
}
})
},
initPlayInfo() {
rendererInvoke(NAMES.mainWindow.get_data, 'playInfo').then(info => {
// console.log(info, window.allList)
window.restorePlayInfo = null
if (!info) return
if (info.index < 0) return
if (info.listId) {
if (info.listId == 'download') {
const list = this.downloadList
// console.log(list)
if (!list || !list[info.index]) return
info.list = list
} else {
const list = window.allList[info.listId]
// console.log(list)
if (!list || !list.list[info.index]) return
info.list = list.list
}
}
if (!info.list || !info.list[info.index]) return
window.restorePlayInfo = info
this.setPlayList({
list: {
list: info.list,
id: info.listId,
},
index: info.index,
})
})
},
initUserApi() {
return Promise.all([
rendererOn(NAMES.mainWindow.user_api_status, (event, { status, message, apiInfo }) => {
// console.log(apiInfo)
this.globalObj.userApi.status = status
this.globalObj.userApi.message = message
if (status) {
if (apiInfo.id === this.setting.apiSource) {
let apis = {}
let qualitys = {}
for (const [source, { actions, type, qualitys: sourceQualitys }] of Object.entries(apiInfo.sources)) {
if (type != 'music') continue
apis[source] = {}
for (const action of actions) {
switch (action) {
case 'musicUrl':
apis[source].getMusicUrl = (songInfo, type) => {
const requestKey = `request__${Math.random().toString().substring(2)}`
return {
canceleFn() {
rendererInvoke(NAMES.mainWindow.request_user_api_cancel, requestKey)
},
promise: rendererInvoke(NAMES.mainWindow.request_user_api, {
requestKey,
data: {
source: source,
action: 'musicUrl',
info: {
type,
musicInfo: songInfo,
},
},
}).then(res => {
// console.log(res)
if (!/^https?:/.test(res.data.url)) return Promise.reject(new Error('Get url failed'))
return { type, url: res.data.url }
}).catch(err => {
console.log(err.message)
return Promise.reject(err)
}),
}
}
break
default:
break
}
}
qualitys[source] = sourceQualitys
}
this.globalObj.qualityList = qualitys
this.globalObj.userApi.apis = apis
}
}
}),
rendererInvoke(NAMES.mainWindow.get_user_api_list).then(res => {
// console.log(res)
if (![...apiSourceInfo.map(s => s.id), ...res.map(s => s.id)].includes(this.setting.apiSource)) {
console.warn('reset api')
let api = apiSourceInfo.find(api => !api.disabled)
if (api) this.globalObj.apiSource = api.id
}
this.globalObj.userApi.list = res
}),
])
},
showUpdateModal() {
(this.version.newVersion && this.version.newVersion.history
? Promise.resolve(this.version.newVersion)
: this.getVersionInfo().then(body => {
this.setNewVersion(body)
return body
})
).catch(() => {
if (this.version.newVersion) return this.version.newVersion
this.setVersionModalVisible({ isUnknow: true })
let result = {
version: '0.0.0',
desc: null,
}
this.setNewVersion(result)
return result
}).then(result => {
if (result.version == '0.0.0') return this.setVersionModalVisible({ isUnknow: true, isShow: true })
if (compareVer(this.version.version, result.version) != -1) return this.setVersionModalVisible({ isLatestVer: true })
if (result.version === this.setting.ignoreVersion) return
// console.log(this.version)
this.$nextTick(() => {
this.setVersionModalVisible({ isShow: true })
})
})
},
clearUpdateTimeout() {
if (!this.updateTimeout) return
clearTimeout(this.updateTimeout)
this.updateTimeout = null
},
handleBodyClick(event) {
if (event.target.tagName != 'A') return
if (event.target.host == window.location.host) return
event.preventDefault()
if (/^https?:\/\//.test(event.target.href)) openUrl(event.target.href)
},
handleEnvParamsInit(envParams) {
this.envParams = envParams
this.isDT = this.envParams.dt
if (this.isDT) {
document.body.classList.remove('transparent')
document.body.classList.add('disableTransparent')
}
if (this.isProd && !this.isDT && !this.isLinux) {
document.body.addEventListener('mouseenter', this.dieableIgnoreMouseEvents)
document.body.addEventListener('mouseleave', this.enableIgnoreMouseEvents)
}
this.handleInitEnvParamSearch()
this.handleInitEnvParamPlay()
},
// 处理启动参数 search
handleInitEnvParamSearch() {
if (this.envParams.search == null) return
this.$router.push({
path: 'search',
query: {
text: this.envParams.search,
},
})
},
// 处理启动参数 play
handleInitEnvParamPlay() {
if (this.envParams.play == null || typeof this.envParams.play != 'string') return
// -play="source=kw&link=链接、ID"
// -play="source=myList&name=名字"
// -play="source=myList&name=名字&index=位置"
const params = parseUrlParams(this.envParams.play)
if (params.type != 'songList') return
this.handlePlaySongList(params)
},
handlePlaySongList(params) {
switch (params.source) {
case 'myList':
if (params.name != null) {
let targetList
const lists = Object.values(window.allList)
for (const list of lists) {
if (list.name === params.name) {
targetList = list
break
}
}
if (!targetList) return
this.setPlayList({
list: {
list: targetList.list,
id: targetList.id,
},
index: this.getListPlayIndex(targetList.list, params.index),
})
}
break
case 'kw':
case 'kg':
case 'tx':
case 'mg':
case 'wy':
this.playSongListDetail(params.source, params.link, params.index)
break
}
},
async playSongListDetail(source, link, playIndex) {
if (link == null) return
let list
try {
list = await this.getListDetailAll({ source, id: decodeURIComponent(link) })
} catch (err) {
console.log(err)
}
this.setPlayList({
list: {
list,
id: null,
},
index: this.getListPlayIndex(list, playIndex),
})
},
getListPlayIndex(list, index) {
if (index == null) {
index = 1
} else {
index = parseInt(index)
if (Number.isNaN(index)) {
index = 1
} else {
if (index < 1) index = 1
else if (index > list.length) index = list.length
}
}
return index - 1
},
listenEvent() {
window.eventHub.$on('key_escape_down', this.handle_key_esc_down)
},
unlistenEvent() {
window.eventHub.$off('key_escape_down', this.handle_key_esc_down)
},
handle_key_esc_down({ event }) {
if (event.repeat) return
if (event.target.tagName != 'INPUT' || event.target.classList.contains('ignore-esc')) return
event.target.value = ''
event.target.blur()
},
handleSyncAction({ action, data }) {
if (typeof data == 'object') data.isSync = true
// console.log(action, data)
switch (action) {
case 'set_list':
this.list_setList(data)
break
case 'list_add':
this.list_listAdd(data)
break
case 'list_move':
this.list_listMove(data)
break
case 'list_add_multiple':
this.list_listAddMultiple(data)
break
case 'list_move_multiple':
this.list_listMoveMultiple(data)
break
case 'list_remove':
this.list_listRemove(data)
break
case 'list_remove_multiple':
this.list_listRemoveMultiple(data)
break
case 'list_clear':
this.list_listClear(data)
break
case 'update_music_info':
this.list_updateMusicInfo(data)
break
case 'create_user_list':
this.list_createUserList(data)
break
case 'remove_user_list':
this.list_removeUserList(data)
break
case 'set_user_list_name':
this.list_setUserListName(data)
break
case 'moveup_user_list':
this.list_moveupUserList(data)
break
case 'movedown_user_list':
this.list_movedownUserList(data)
break
case 'set_music_position':
this.list_setMusicPosition(data)
break
default:
break
}
},
handleSyncList({ action, data }) {
switch (action) {
case 'getData':
global.eventHub.$emit(eventSyncName.send_sync_list, {
action: 'getData',
data: {
defaultList: this.defaultList,
loveList: this.loveList,
userList: this.userList,
},
})
break
case 'setData':
this.list_setSyncListData(data)
break
case 'selectMode':
this.globalObj.sync.deviceName = data.deviceName
this.globalObj.sync.isShowSyncMode = true
break
case 'closeSelectMode':
this.globalObj.sync.isShowSyncMode = false
break
}
},
},
beforeDestroy() {
this.clearUpdateTimeout()
this.unlistenEvent()
if (this.isProd) {
document.body.removeEventListener('mouseenter', this.dieableIgnoreMouseEvents)
document.body.removeEventListener('mouseleave', this.enableIgnoreMouseEvents)
}
document.body.removeEventListener('click', this.handleBodyClick)
window.eventHub.$emit(eventBaseName.unbindKey)
dom_mask.classList.add('hide')
} */
document.getElementById('root').style.display = 'block'
})
},
}
</script>
<style lang="less">
@import './assets/styles/index.less';
@import './assets/styles/layout.less';
@ -745,6 +59,16 @@ body {
height: 100vh;
box-sizing: border-box;
}
#root {
height: 100%;
position: relative;
overflow: hidden;
color: @color-theme_2-font;
background: @color-theme-bgimg @color-theme-bgposition no-repeat;
background-size: @color-theme-bgsize;
transition: background-color @transition-theme;
background-color: @color-theme;
}
.disableAnimation * {
transition: none !important;
@ -753,11 +77,22 @@ body {
.transparent {
padding: @shadow-app;
#container {
#waiting-mask {
border-radius: @radius-border;
left: @shadow-app;
right: @shadow-app;
top: @shadow-app;
bottom: @shadow-app;
}
#root {
box-shadow: 0 0 @shadow-app rgba(0, 0, 0, 0.5);
border-radius: @radius-border;
background-color: transparent;
}
#container {
border-radius: @radius-border;
background-color: transparent;
}
}
.disableTransparent {
background-color: #fff;
@ -776,12 +111,6 @@ body {
position: relative;
display: flex;
height: 100%;
overflow: hidden;
color: @color-theme_2-font;
background: @color-theme-bgimg @color-theme-bgposition no-repeat;
background-size: @color-theme-bgsize;
transition: background-color @transition-theme;
background-color: @color-theme;
}
#left {
@ -809,7 +138,7 @@ body {
}
each(@themes, {
#container.@{value} {
#root.@{value} {
color: ~'@{color-@{value}-theme_2-font}';
background-color: ~'@{color-@{value}-theme}';
background-image: ~'@{color-@{value}-theme-bgimg}';

4
src/renderer/assets/images/icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 447.942 447.943">
<path fill="#5ed698" d="M203.806.482c-19.668-3.346-35.76 11.139-35.76 31.086v206.166c-11.642-4.271-24.165-6.725-37.281-6.725-59.905 0-108.469 48.566-108.469 108.473 0 59.903 48.564 108.461 108.469 108.461 34.141 0 64.54-15.82 84.406-40.482l-49.658-49.664c-15.116-15.112-11.708-28.901-9.542-34.14 2.166-5.233 9.514-17.4 30.883-17.4h18.082v-56.885c0-21.132 14.617-38.862 34.266-43.745.032-44.373.032-81.808.032-81.808 140.147 0 131.724 83.974 115.325 132.196-6.42 18.884-2.601 22.05 10.893 7.354C536.473 77.106 298.38 16.566 203.806.482z"/>
<path fill="#4daf7c" d="M301.061 223.876h-50.994c-3.911 0-7.574.95-10.889 2.523-8.616 4.09-14.615 12.798-14.615 22.973v76.51h-37.708c-14.082 0-17.428 8.071-7.466 18.029l46.893 46.898 31.25 31.246a25.424 25.424 0 0 0 18.033 7.474c6.523 0 13.052-2.484 18.029-7.474l78.152-78.145c9.951-9.958 6.608-18.029-7.47-18.029h-37.71v-76.51c.001-14.078-11.42-25.495-25.505-25.495z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1013 B

46
src/renderer/assets/styles/index.less
View File

@ -33,6 +33,9 @@ html {
user-select: none;
}
.thead {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
table {
width: 100%;
border-spacing: 0;
@ -44,7 +47,6 @@ table {
text-align: left;
line-height: 38px;
padding: 0 6px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
tbody {
tr {
@ -230,9 +232,49 @@ input, textarea {
transition: all 0.4s ease;
}
}
/*
#waiting-mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
z-index: 999999;
transition: all .8s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
-webkit-app-region: drag;
background-color: @color-theme;
&.hide {
opacity: 0;
}
}
#logo-path-1 {fill: #5ed698; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
#logo-path-2 {fill: #4daf7c; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
each(@themes, {
#container.@{value} {
body.@{value} #waiting-mask {
background-color: ~'@{color-@{value}-theme_2-background_1}';
#logo-path-1 {fill: ~'@{color-@{value}-btn}'; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
#logo-path-2 {fill: ~'@{color-@{value}-theme}'; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
}
}) */
// each(@themes, {
// body.@{value} #waiting-mask {
// background-color: ~'@{color-@{value}-theme}';
// #logo-path-1 {fill: ~'@{color-@{value}-theme_2-background_1}'; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
// #logo-path-2 {fill: ~'@{color-@{value}-theme-font-label}'; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));}
// }
// })
each(@themes, {
#root.@{value} {
button, input, textarea, a {
color: ~'@{color-@{value}-theme_2-font}';
}

16
src/renderer/components/material/Btn.vue → src/renderer/components/base/Btn.vue
View File

@ -1,6 +1,11 @@
<template lang="pug">
button(:class="[$style.btn, min ? $style.min : null, outline ? $style.outline : null]" :disabled="disabled" @click="$emit('click', $event)")
slot
<template>
<button
:class="[$style.btn, {[$style.min]: min}, {[$style.outline]: outline}]"
:disabled="disabled"
@click="$emit('click', $event)"
>
<slot />
</button>
</template>
<script>
@ -18,12 +23,13 @@ export default {
default: false,
},
},
emits: ['click'],
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.btn {
display: inline-block;
@ -58,7 +64,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.btn {
color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';

22
src/renderer/components/material/Checkbox.vue → src/renderer/components/base/Checkbox.vue
View File

@ -15,12 +15,8 @@ div(:class="$style.checkbox")
<script>
export default {
model: {
prop: 'checked',
event: 'input',
},
props: {
checked: {},
modelValue: {},
value: {},
id: {
type: String,
@ -51,18 +47,18 @@ export default {
}
},
watch: {
checked(n) {
modelValue(n) {
this.setValue(n)
},
},
mounted() {
this.setValue(this.checked)
this.setValue(this.modelValue)
},
methods: {
change() {
let checked
if (Array.isArray(this.checked)) {
checked = [...this.checked]
if (Array.isArray(this.modelValue)) {
checked = [...this.modelValue]
const index = checked.indexOf(this.value)
if (index < 0) {
checked.push(this.value)
@ -71,7 +67,7 @@ export default {
}
} else {
let bool = this.bool
switch (typeof this.checked) {
switch (typeof this.modelValue) {
case 'boolean':
if (this.indeterminate) {
bool = true
@ -89,7 +85,7 @@ export default {
break
}
}
this.$emit('input', checked)
this.$emit('update:modelValue', checked)
this.$emit('change', checked)
},
setValue(value) {
@ -117,7 +113,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.checkbox {
display: inline-block;
@ -189,7 +185,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.checkbox {
> input {
&:checked {

25
src/renderer/components/material/Input.vue → src/renderer/components/base/Input.vue
View File

@ -1,7 +1,15 @@
<template lang="pug">
input(:class="$style.input" ref="dom_input" :type="type" :placeholder="placeholder" :value="value" :disabled="disabled"
@focus="$emit('focus', $event)" @blur="$emit('blur', $event)" @input="handleInput" @change="$emit('change', $event.target.value.trim())"
@keyup.enter="$emit('submit', $event.target.value.trim())")
<template>
<input
:class="$style.input"
ref="dom_input"
:type="type"
:placeholder="placeholder"
:value="modelValue"
:disabled="disabled"
@input="handleInput"
@change="$emit('change', $event.target.value.trim())"
@keyup.enter="$emit('submit', $event.target.value.trim())"
/>
</template>
<script>
@ -15,7 +23,7 @@ export default {
type: Boolean,
default: false,
},
value: {
modelValue: {
type: String,
default: '',
},
@ -24,11 +32,12 @@ export default {
default: 'text',
},
},
emits: ['update:modelValue', 'keydown', 'blur', 'submit', 'change', 'focus'],
methods: {
handleInput(event) {
let value = event.target.value.trim()
event.target.value = value
this.$emit('input', value)
this.$emit('update:modelValue', value)
},
focus() {
this.$refs.dom_input.focus()
@ -39,7 +48,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.input {
display: inline-block;
@ -76,7 +85,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.input {
color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';

18
src/renderer/components/material/Menu.vue → src/renderer/components/base/Menu.vue
View File

@ -1,6 +1,11 @@
<template lang="pug">
ul(:class="$style.list" :style="listStyles" ref="dom_list")
li(v-for="item in menus" @click="handleClick(item)" v-if="!item.hide && (item.action == 'download' ? setting.download.enable : true)" :disabled="item.disabled") {{item[itemName]}}
<template>
<ul :class="$style.list" :style="listStyles" ref="dom_list">
<li v-for="item in menus"
:key="item.action"
@click="handleClick(item)"
v-show="!item.hide && (item.action == 'download' ? setting.download.enable : true)"
:disabled="item.disabled ? true : null">{{item[itemName]}}</li>
</ul>
</template>
<script>
@ -29,6 +34,7 @@ export default {
},
},
},
emits: ['menu-click'],
computed: {
...mapGetters(['setting']),
},
@ -69,7 +75,7 @@ export default {
mounted() {
document.addEventListener('click', this.handleDocumentClick)
},
beforeDestroy() {
beforeUnmount() {
document.removeEventListener('click', this.handleDocumentClick)
},
methods: {
@ -120,7 +126,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.list {
font-size: 12px;
@ -168,7 +174,7 @@ export default {
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.list {
background-color: ~'@{color-@{value}-theme_2-background_2}';
li {

24
src/renderer/components/material/Select.vue → src/renderer/components/base/Select.vue
View File

@ -1,8 +1,10 @@
<template lang="pug">
div(:class="[$style.select, show ? $style.active : '']")
div(:class="$style.label" ref="dom_btn" @click="handleShow") {{value ? itemName ? list.find(l => l.id == value).name : value : ''}}
ul(:class="$style.list")
li(v-for="item in list" @click="handleClick(itemKey ? item[itemKey] : item)") {{itemName ? item[itemName] : item}}
<template>
<div :class="[$style.select, {[$style.active]: show}]">
<div :class="$style.label" ref="dom_btn" @click="handleShow">{{modelValue ? itemName ? list.find(l => l.id == modelValue).name : modelValue : ''}}</div>
<ul :class="$style.list">
<li v-for="(item, index) in list" :key="index" @click="handleClick(itemKey ? item[itemKey] : item)">{{itemName ? item[itemName] : item}}</li>
</ul>
</div>
</template>
<script>
@ -15,7 +17,7 @@ export default {
return []
},
},
value: {
modelValue: {
type: [String, Number],
},
itemName: {
@ -33,7 +35,7 @@ export default {
mounted() {
document.addEventListener('click', this.handleHide)
},
beforeDestroy() {
beforeUnmount() {
document.removeEventListener('click', this.handleHide)
},
methods: {
@ -45,8 +47,8 @@ export default {
}, 50)
},
handleClick(item) {
if (item === this.value) return
this.$emit('input', item)
if (item === this.modelValue) return
this.$emit('update:modelValue', item)
this.$emit('change', item)
},
handleShow() {
@ -58,7 +60,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.select {
font-size: 12px;
@ -131,7 +133,7 @@ export default {
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.label {
border-top-color: ~'@{color-@{value}-tab-border-bottom}';
border-left-color: ~'@{color-@{value}-tab-border-bottom}';

44
src/renderer/components/material/Selection.vue → src/renderer/components/base/Selection.vue
View File

@ -1,12 +1,18 @@
<template lang="pug">
div.content(:class="[$style.select, show ? $style.active : '']")
div.label-content(:class="$style.label" ref="dom_btn" @click="handleShow")
span.label {{label}}
div.icon(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
use(xlink:href='#icon-down')
ul.selection-list.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :tips="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
<template>
<div class="content" :class="[$style.select, show ? $style.active : '']">
<div class="label-content" :class="$style.label" ref="dom_btn" @click="handleShow">
<span class="label">{{label}}</span>
<div class="icon" :class="$style.icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 451.847 451.847" space="preserve">
<use xlink:href="#icon-down"></use>
</svg>
</div>
</div>
<ul class="selection-list scroll" :class="$style.list" :style="listStyles" ref="dom_list">
<li v-for="(item, index) in list" :key="index" :class="(itemKey ? item[itemKey] : item) == modelValue ? $style.active : null"
@click="handleClick(item)" :tips="itemName ? item[itemName] : item">{{itemName ? item[itemName] : item}}</li>
</ul>
</div>
</template>
<script>
@ -19,7 +25,7 @@ export default {
return []
},
},
value: {
modelValue: {
type: [String, Number],
},
itemName: {
@ -40,14 +46,14 @@ export default {
mounted() {
document.addEventListener('click', this.handleHide)
},
beforeDestroy() {
beforeUnmount() {
document.removeEventListener('click', this.handleHide)
},
computed: {
label() {
if (this.value == null) return ''
if (this.itemName == null) return this.value
const item = this.list.find(l => l[this.itemKey] == this.value)
if (this.modelValue == null) return ''
if (this.itemName == null) return this.modelValue
const item = this.list.find(l => l[this.itemKey] == this.modelValue)
if (!item) return ''
return item[this.itemName]
},
@ -62,9 +68,9 @@ export default {
}, 50)
},
handleClick(item) {
// console.log(this.value)
if (item === this.value) return
this.$emit('input', this.itemKey ? item[this.itemKey] : item)
// console.log(this.modelValue)
if (item === this.modelValue) return
this.$emit('update:modelValue', this.itemKey ? item[this.itemKey] : item)
this.$emit('change', item)
},
handleShow() {
@ -87,7 +93,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
@selection-height: 28px;
@ -189,7 +195,7 @@ export default {
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.label {
color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';

12
src/renderer/components/material/Tab.vue → src/renderer/components/base/Tab.vue
View File

@ -2,7 +2,7 @@
div.scroll(:class="$style.tab")
//- div(:class="$style.content")
ul
li.ignore-to-rem(v-for="item in list" :key="itemKey ? item[itemKey] : item" :class="value === (itemKey ? item[itemKey] : item) ? $style.active : ''")
li.ignore-to-rem(v-for="item in list" :key="itemKey ? item[itemKey] : item" :class="modelValue === (itemKey ? item[itemKey] : item) ? $style.active : ''")
button(type="button"
@click="handleClick(itemKey ? item[itemKey] : item)") {{ itemName ? item[itemName] : item }}
//- div(:class="$style.control")
@ -23,7 +23,7 @@ export default {
return []
},
},
value: {
modelValue: {
type: [String, Number],
},
itemName: {
@ -35,8 +35,8 @@ export default {
},
methods: {
handleClick(item) {
if (item === this.value) return
this.$emit('input', item)
if (item === this.modelValue) return
this.$emit('update:modelValue', item)
this.$emit('change', item)
},
},
@ -45,7 +45,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.tab {
// overflow: hidden;
@ -171,7 +171,7 @@ export default {
// }
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.tab {
ul {
border-bottom-color: ~'@{color-@{value}-tab-border-bottom}';

257
src/renderer/components/base/VirtualizedList.vue Normal file
View File

@ -0,0 +1,257 @@
<template>
<component :is="containerEl" :class="containerClass" ref="dom_scrollContainer" style="height: 100%; overflow: auto; position: relative; display: block;">
<component :is="contentEl" :class="contentClass" :style="contentStyle">
<div v-for="item in views" :key="item.key" :style="item.style">
<slot name="default" v-bind="{ item: item.item, index: item.index }" />
</div>
</component>
<slot name="footer" />
</component>
</template>
<script>
import {
computed,
ref,
nextTick,
watch,
onMounted,
onBeforeUnmount,
} from 'vue'
const easeInOutQuad = (t, b, c, d) => {
t /= d / 2
if (t < 1) return (c / 2) * t * t + b
t--
return (-c / 2) * (t * (t - 2) - 1) + b
}
const handleScroll = (element, to, duration = 300, callback = () => {}, onCancel = () => {}) => {
if (!element) return callback()
const start = element.scrollTop || element.scrollY || 0
let cancel = false
if (to > start) {
let maxScrollTop = element.scrollHeight - element.clientHeight
if (to > maxScrollTop) to = maxScrollTop
} else if (to < start) {
if (to < 0) to = 0
} else return callback()
const change = to - start
const increment = 10
if (!change) return callback()
let currentTime = 0
let val
let cancelCallback
const animateScroll = () => {
currentTime += increment
val = parseInt(easeInOutQuad(currentTime, start, change, duration))
if (element.scrollTo) {
element.scrollTo(0, val)
} else {
element.scrollTop = val
}
if (currentTime < duration) {
if (cancel) {
cancelCallback()
onCancel()
return
}
setTimeout(animateScroll, increment)
} else {
callback()
}
}
animateScroll()
return (callback) => {
cancelCallback = callback
cancel = true
}
}
export default {
name: 'VirtualizedList',
props: {
containerEl: {
type: String,
default: 'div',
},
containerClass: {
type: String,
default: 'virtualized-list',
},
contentEl: {
type: String,
default: 'div',
},
contentClass: {
type: String,
default: 'virtualized-list-content',
},
outsideNum: {
type: Number,
default: 1,
},
itemHeight: {
type: Number,
required: true,
},
keyName: {
type: String,
require: true,
},
list: {
type: Array,
require: true,
},
},
emits: ['contextmenu', 'scroll'],
setup(props, { emit }) {
const views = ref([])
const dom_scrollContainer = ref(null)
let startIndex = -1
let endIndex = -1
let scrollTop = -1
let cachedList = []
let cancelScroll = null
let isScrolling = false
let scrollToValue = 0
const createList = (startIndex, endIndex) => {
const cache = cachedList.slice(startIndex, endIndex)
const list = props.list.slice(startIndex, endIndex).map((item, i) => {
if (cache[i]) return cache[i]
const top = (startIndex + i) * props.itemHeight
const index = startIndex + i
return cachedList[index] = {
item,
top,
style: { position: 'absolute', left: 0, right: 0, top: top + 'px', height: props.itemHeight + 'px' },
index,
key: item[props.keyName],
}
})
return list
}
const updateView = (currentScrollTop = dom_scrollContainer.value.scrollTop) => {
// const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
const itemHeight = props.itemHeight
const currentStartIndex = Math.floor(currentScrollTop / itemHeight)
const scrollContainerHeight = dom_scrollContainer.value.clientHeight
const currentEndIndex = currentStartIndex + Math.ceil(scrollContainerHeight / itemHeight)
const continuous = currentStartIndex <= endIndex && currentEndIndex >= startIndex
const currentStartRenderIndex = Math.max(Math.floor(currentScrollTop / itemHeight) - props.outsideNum, 0)
const currentEndRenderIndex = currentStartIndex + Math.ceil(scrollContainerHeight / itemHeight) + props.outsideNum
// console.log(continuous)
// debugger
if (continuous) {
// if (Math.abs(currentScrollTop - this.scrollTop) < this.itemHeight * this.outsideNum * 0.6) return
// console.log('update')
// if (currentScrollTop > scrollTop) { // scroll down
// // console.log('scroll down')
// views.value = createList(currentStartRenderIndex, currentEndRenderIndex)
// // views.value.push(...list.slice(list.indexOf(views.value[views.value.length - 1]) + 1))
// // // if (this.views.length > 100) {
// // nextTick(() => {
// // views.value.splice(0, views.value.indexOf(list[0]))
// // })
// // }
// } else if (currentScrollTop < scrollTop) { // scroll up
// // console.log('scroll up')
// views.value = createList(currentStartRenderIndex, currentEndRenderIndex)
// } else return
if (currentScrollTop == scrollTop) return
views.value = createList(currentStartRenderIndex, currentEndRenderIndex)
} else {
views.value = createList(currentStartRenderIndex, currentEndRenderIndex)
}
startIndex = currentStartIndex
endIndex = currentEndIndex
scrollTop = currentScrollTop
}
const onScroll = event => {
const currentScrollTop = dom_scrollContainer.value.scrollTop
if (Math.abs(currentScrollTop - scrollTop) > props.itemHeight * props.outsideNum * 0.6) {
updateView(currentScrollTop)
}
emit('scroll', event)
}
const scrollTo = (scrollTop, animate = false) => {
return new Promise(resolve => {
if (cancelScroll) {
cancelScroll(resolve)
} else {
resolve()
}
}).then(() => {
return new Promise((resolve, reject) => {
if (animate) {
isScrolling = true
scrollToValue = scrollTop
cancelScroll = handleScroll(dom_scrollContainer.value, scrollTop, 300, () => {
cancelScroll = null
isScrolling = false
resolve()
}, () => {
cancelScroll = null
isScrolling = false
reject('canceled')
})
} else {
dom_scrollContainer.value.scrollTop = scrollTop
}
})
})
}
const scrollToIndex = (index, offset = 0, animate = false) => {
return scrollTo(Math.max(index * props.itemHeight + offset, 0), animate)
}
const getScrollTop = () => {
return isScrolling ? scrollToValue : dom_scrollContainer.value.scrollTop
}
const contentStyle = computed(() => ({
display: 'block',
height: props.list.length * props.itemHeight + 'px',
}))
watch(() => props.itemHeight, updateView)
watch(() => props.list, (list) => {
cachedList = Array(list.length)
startIndex = -1
endIndex = -1
nextTick(() => {
updateView()
})
}, {
deep: true,
})
onMounted(() => {
dom_scrollContainer.value.addEventListener('scroll', onScroll, false)
cachedList = Array(props.list.length)
startIndex = -1
endIndex = -1
updateView()
})
onBeforeUnmount(() => {
dom_scrollContainer.value.removeEventListener('scroll', onScroll)
if (cancelScroll) cancelScroll()
})
return {
views,
dom_scrollContainer,
contentStyle,
scrollTo,
scrollToIndex,
getScrollTop,
}
},
}
</script>

113
src/renderer/components/common/DownloadModal.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
<main :class="$style.main">
<h2>{{ info.name }}<br/>{{ info.singer }}</h2>
<base-btn :class="$style.btn" :key="type.type" @click="handleClick(type.type)" v-for="type in types"
>{{getTypeName(type.type)}} {{ type.type.toUpperCase() }}{{ type.size && ` - ${type.size.toUpperCase()}` }}</base-btn>
</main>
</material-modal>
</template>
<script>
import { mapActions } from 'vuex'
import { qualityList } from '@renderer/core/share'
export default {
props: {
show: {
type: Boolean,
default: false,
},
musicInfo: {
type: Object,
},
bgClose: {
type: Boolean,
default: true,
},
},
emits: ['update:show'],
setup() {
return {
qualityList,
}
},
computed: {
info() {
return this.musicInfo || {}
},
sourceQualityList() {
return this.qualityList[this.musicInfo.source] || []
},
types() {
return this.info?.types?.filter(type => this.checkSource(type.type)) || []
},
},
methods: {
...mapActions('download', ['createDownload']),
handleClick(type) {
this.createDownload({ musicInfo: this.musicInfo, type })
this.handleClose()
},
handleClose() {
this.$emit('update:show', false)
},
getTypeName(type) {
switch (type) {
case 'flac':
case 'ape':
case 'wav':
return this.$t('download__lossless')
case '320k':
return this.$t('download__high_quality')
case '192k':
case '128k':
return this.$t('download__normal')
}
},
checkSource(type) {
return this.sourceQualityList.includes(type)
},
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
}
}
.btn {
display: block;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#root.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
}
})
</style>

85
src/renderer/components/common/DownloadMultipleModal.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
<main :class="$style.main">
<h2>{{$t('download__multiple_tip', { len: list.length })}}<br/>{{$t('download__multiple_tip2')}}</h2>
<base-btn :class="$style.btn" @click="handleClick('128k')">{{$t('download__normal')}} - 128K</base-btn>
<base-btn :class="$style.btn" @click="handleClick('320k')">{{$t('download__high_quality')}} - 320K</base-btn>
<base-btn :class="$style.btn" @click="handleClick('flac')">{{$t('download__lossless')}} - FLAC</base-btn>
</main>
</material-modal>
</template>
<script>
import { mapActions } from 'vuex'
export default {
props: {
show: {
type: Boolean,
default: false,
},
bgClose: {
type: Boolean,
default: true,
},
list: {
type: Array,
default() {
return []
},
},
},
emits: ['update:show', 'confirm'],
methods: {
...mapActions('download', ['createDownloadMultiple']),
handleClick(type) {
this.createDownloadMultiple({ list: [...this.list], type })
this.handleClose()
this.$emit('confirm')
},
handleClose() {
this.$emit('update:show', false)
},
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
}
}
.btn {
display: block;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#root.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
}
})
</style>

66
src/renderer/components/material/ListAddModal.vue → src/renderer/components/common/ListAddModal.vue
View File

@ -1,21 +1,27 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2
| {{$t('material.list_add_modal.' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;
span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
| &nbsp;{{$t('material.list_add_modal.title_last')}}
div.scroll(:class="$style.btnContent")
material-btn(:class="$style.btn" :tips="$t('material.list_add_modal.btn_title', { name: item.name })" :key="item.id" :disabled="item.isExist" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('view.list.lists_new_list_btn')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")
span(:class="$style.btn" v-for="i in spaceNum")
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
<main :class="$style.main">
<h2>{{$t('list_add__' + (isMove ? 'title_first_move' : 'title_first_add'))}}&nbsp;<span :class="$style.name">{{this.musicInfo && `${musicInfo.name}`}}</span>&nbsp;{{$t('list_add__title_last')}}</h2>
<div class="scroll" :class="$style.btnContent">
<base-btn :class="$style.btn" :tips="$t('list_add__btn_title', { name: item.name })" :key="item.id" :disabled="item.isExist" @click="handleClick(index)" v-for="(item, index) in lists">{{item.name}}</base-btn>
<base-btn :class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('lists__new_list_btn')">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42" space="preserve">
<use xlink:href="#icon-addTo"></use>
</svg>
<input class="key-bind" :class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('lists__new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)"/>
</base-btn>
<span :class="$style.btn" :key="i" v-for="i in spaceNum"></span>
</div>
</main>
</material-modal>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { mapMutations } from 'vuex'
import { computed } from '@renderer/utils/vueTools'
import { defaultList, loveList, userLists } from '@renderer/core/share/list'
import { getList } from '@renderer/core/share/utils'
export default {
props: {
show: {
@ -48,6 +54,21 @@ export default {
default: false,
},
},
emits: ['update:show'],
setup(props) {
const lists = computed(() => {
if (!props.musicInfo) return []
const targetMid = props.musicInfo.songmid
return [
defaultList,
loveList,
...userLists,
].filter(l => !props.excludeListId.includes(l.id)).map(l => ({ ...l, isExist: getList(l.id).some(s => s.songmid == targetMid) }))
})
return {
lists,
}
},
data() {
return {
isEditing: false,
@ -55,15 +76,6 @@ export default {
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
lists() {
if (!this.musicInfo) return []
return [
this.defaultList,
this.loveList,
...this.userList,
].filter(l => !this.excludeListId.includes(l.id)).map(l => ({ ...l, isExist: l.list.some(s => s.songmid == this.musicInfo.songmid) }))
},
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
},
@ -79,7 +91,7 @@ export default {
})
},
handleClose() {
this.$emit('close')
this.$emit('update:show', false)
},
handleEditing(event) {
if (this.isEditing) return
@ -100,7 +112,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.main {
// padding: 15px 0;
@ -182,7 +194,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';

64
src/renderer/components/material/ListAddMultipleModal.vue → src/renderer/components/common/ListAddMultipleModal.vue
View File

@ -1,18 +1,26 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2 {{$t('material.list_add_multiple_modal.' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}
div.scroll(:class="$style.btnContent")
material-btn(:class="$style.btn" :tips="$t('material.list_add_multiple_modal.btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
material-btn(:class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('view.list.lists_new_list_btn')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
input.key-bind(:class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('view.list.lists_new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)")
span(:class="$style.btn" v-for="i in spaceNum")
<template>
<material-modal :show="show" :bg-close="bgClose" @close="handleClose">
<main :class="$style.main">
<h2>{{$t('list_add__multiple_' + (isMove ? 'title_move' : 'title_add'), { num: musicList.length })}}</h2>
<div class="scroll" :class="$style.btnContent">
<base-btn :class="$style.btn" :tips="$t('list_add__multiple_btn_title', { name: item.name })" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists">{{item.name}}</base-btn>
<base-btn :class="[$style.btn, $style.newList, isEditing ? $style.editing : null]" @click="handleEditing($event)" :tips="$t('lists__new_list_btn')">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42" space="preserve">
<use xlink:href="#icon-addTo"></use>
</svg>
<input class="key-bind" :class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('lists__new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)"/>
</base-btn>
<span :class="$style.btn" :key="i" v-for="i in spaceNum"></span>
</div>
</main>
</material-modal>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { mapMutations } from 'vuex'
import { computed } from '@renderer/utils/vueTools'
import { defaultList, loveList, userLists } from '@renderer/core/share/list'
export default {
props: {
show: {
@ -48,6 +56,19 @@ export default {
default: false,
},
},
emits: ['update:show', 'confirm'],
setup(props) {
const lists = computed(() => {
return [
defaultList,
loveList,
...userLists,
].filter(l => !props.excludeListId.includes(l.id))
})
return {
lists,
}
},
data() {
return {
isEditing: false,
@ -55,15 +76,7 @@ export default {
}
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
lists() {
return [
this.defaultList,
this.loveList,
...this.userList,
].filter(l => !this.excludeListId.includes(l.id))
},
spaceNum() {
return this.lists.length < 2 ? 0 : (3 - this.lists.length % 3 - 1)
},
@ -75,11 +88,12 @@ export default {
? this.listMoveMultiple({ fromId: this.fromListId, toId: this.lists[index].id, list: this.musicList })
: this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
this.$nextTick(() => {
this.handleClose(true)
this.handleClose()
this.$emit('confirm')
})
},
handleClose(isSelect = false) {
this.$emit('close', isSelect)
handleClose() {
this.$emit('update:show', false)
},
handleEditing(event) {
if (this.isEditing) return
@ -100,7 +114,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.main {
// padding: 15px 0;
@ -178,7 +192,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';

160
src/renderer/components/common/ProgressBar.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<div :class="[$style.progress, className]">
<div :class="[$style.progressBar, $style.progressBar2, {[$style.barTransition]: isActiveTransition}]" @transitionend="handleTransitionEnd" :style="{ transform: `scaleX(${progress || 0})` }"></div>
<div v-show="dragging" :class="[$style.progressBar, $style.progressBar3]" :style="{ transform: `scaleX(${dragProgress || 0})` }"></div>
</div>
<div :class="$style.progressMask" @mousedown="handleMsDown" ref="dom_progress"></div>
</template>
<script>
import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
import { player as eventPlayerNames } from '@renderer/event/names'
import { playProgress } from '@renderer/core/share/playProgress'
export default {
props: {
className: String,
progress: {
type: Number,
required: true,
},
isActiveTransition: {
type: Boolean,
required: true,
},
handleTransitionEnd: {
type: Function,
required: true,
},
},
setup(props) {
const msEvent = {
isMsDown: false,
msDownX: 0,
msDownProgress: 0,
}
const dom_progress = ref(null)
const dragging = ref(false)
const dragProgress = ref(0)
const handleMsDown = event => {
msEvent.isMsDown = true
msEvent.msDownX = event.clientX
let val = event.offsetX / dom_progress.value.clientWidth
if (val < 0) val = 0
if (val > 1) val = 1
dragProgress.value = msEvent.msDownProgress = val
}
const handleMsUp = () => {
if (msEvent.isMsDown) setProgress(dragProgress.value * playProgress.maxPlayTime)
msEvent.isMsDown = false
dragging.value = false
}
const handleMsMove = event => {
if (!msEvent.isMsDown) return
if (!dragging.value) dragging.value = true
let progress = msEvent.msDownProgress + (event.clientX - msEvent.msDownX) / dom_progress.value.clientWidth
if (progress > 1) progress = 1
else if (progress < 0) progress = 0
dragProgress.value = progress
}
document.addEventListener('mousemove', handleMsMove)
document.addEventListener('mouseup', handleMsUp)
onBeforeUnmount(() => {
document.removeEventListener('mousemove', handleMsMove)
document.removeEventListener('mouseup', handleMsUp)
})
const setProgress = num => {
window.eventHub.emit(eventPlayerNames.setProgress, num)
}
// const handleSetProgress = event => {
// // setProgress(event.offsetX / dom_progress.value.clientWidth * playProgress.maxPlayTime)
// }
return {
dom_progress,
// handleSetProgress,
dragging,
dragProgress,
handleMsDown,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.progress {
width: 100%;
height: 4px;
// overflow: hidden;
transition: @transition-theme;
transition-property: background-color;
background-color: @color-player-progress;
// background-color: #f5f5f5;
position: relative;
border-radius: 20px;
}
.progress-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-origin: 0;
border-radius: 20px;
}
.progress-bar1 {
background-color: @color-player-progress-bar1;
}
.progress-bar2 {
background-color: @color-player-progress-bar2;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
opacity: 0.8;
}
.progress-bar3 {
background-color: @color-player-progress-bar2;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
opacity: 0.3;
}
.bar-transition {
transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0.2s;
}
each(@themes, {
:global(#root.@{value}) {
.progress {
background-color: ~'@{color-@{value}-player-progress}';
}
.progress-bar1 {
background-color: ~'@{color-@{value}-player-progress-bar1}';
}
.progress-bar2 {
background-color: ~'@{color-@{value}-player-progress-bar2}';
}
.progress-bar3 {
background-color: ~'@{color-@{value}-player-progress-bar2}';
}
}
})
</style>

144
src/renderer/components/common/VolumeBar.vue Normal file
View File

@ -0,0 +1,144 @@
<template>
<div :class="[$style.volumeContent, className]">
<div :class="[$style.volume, {[$style.muted]: setting.player.isMute} ]">
<div :class="$style.volumeBar" ref="dom_volumeBar" :style="{ transform: `scaleX(${volume || 0})` }"></div>
</div>
<div :class="$style.volumeMask" @mousedown="handleVolumeMsDown" :tips="`${$t('player__volume')}${parseInt(volume * 100)}%`"></div>
</div>
</template>
<script>
import { ref, onBeforeUnmount } from '@renderer/utils/vueTools'
// import { player as eventPlayerNames } from '@renderer/event/names'
import { volume, isMute, setVolume, setMute } from '@renderer/core/share/volume'
export default {
props: {
className: {
type: String,
},
setting: {
type: Object,
required: true,
},
},
setup(props) {
const volumeEvent = {
isMsDown: false,
msDownX: 0,
msDownVolume: 0,
}
const dom_volumeBar = ref(null)
const handleVolumeMsDown = event => {
volumeEvent.isMsDown = true
volumeEvent.msDownX = event.clientX
let val = event.offsetX / 80
if (val < 0) val = 0
if (val > 1) val = 1
setVolume(volumeEvent.msDownVolume = val)
if (isMute.value) setMute(false)
}
const handleVolumeMsUp = () => {
volumeEvent.isMsDown = false
}
const handleVolumeMsMove = event => {
if (!volumeEvent.isMsDown) return
let volume = volumeEvent.msDownVolume + (event.clientX - volumeEvent.msDownX) / dom_volumeBar.value.clientWidth
if (volume > 1) volume = 1
else if (volume < 0) volume = 0
setVolume(volume)
}
document.addEventListener('mousemove', handleVolumeMsMove)
document.addEventListener('mouseup', handleVolumeMsUp)
onBeforeUnmount(() => {
document.removeEventListener('mousemove', handleVolumeMsMove)
document.removeEventListener('mouseup', handleVolumeMsUp)
})
return {
handleVolumeMsDown,
dom_volumeBar,
volume,
isMute,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.volume-content {
flex: none;
position: relative;
width: 80px;
margin-right: 10px;
display: flex;
align-items: center;
opacity: .5;
transition: opacity @transition-theme;
&:hover {
opacity: 1;
}
}
.volume {
// cursor: pointer;
width: 100%;
height: 0.25em;
border-radius: 10px;
// overflow: hidden;
transition: @transition-theme;
transition-property: background-color, opacity;
background-color: @color-player-progress-bar1;
// background-color: #f5f5f5;
position: relative;
border-radius: @radius-progress-border;
}
.muted {
opacity: .5;
}
.volume-bar {
position: absolute;
left: 0;
top: 0;
transform: scaleX(0);
transform-origin: 0;
transition-property: transform;
transition-timing-function: ease;
width: 100%;
height: 100%;
border-radius: @radius-progress-border;
transition-duration: 0.2s;
background-color: @color-btn;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.volume-mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
each(@themes, {
:global(#root.@{value}) {
.volume {
background-color: ~'@{color-@{value}-player-progress-bar1}';
}
.volume-bar {
background-color: ~'@{color-@{value}-btn}';
}
}
})
</style>

299
src/renderer/components/core/Aside.vue
View File

@ -1,299 +0,0 @@
<template lang="pug">
div(:class="$style.aside")
div(:class="$style.controlBtn" v-if="setting.controlBtnPosition == 'left'")
button(type="button" :class="$style.close" :tips="$t('core.toolbar.close')" @click="close")
svg(:class="$style.controlBtniIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-close')
button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
svg(:class="$style.controlBtniIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-minimize')
div(:class="['animated', logoAnimate, $style.logo]" v-else) L X
//- svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
use(xlink:href='#icon-logo')
div(:class="$style.menu")
dl
//- dt {{$t('core.aside.online_music')}}
dd
router-link(:active-class="$style.active" to="search" :tips="$t('core.aside.search')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 425.2 425.2' space='preserve')
use(xlink:href='#icon-search-2')
dd
router-link(:active-class="$style.active" to="songList" :tips="$t('core.aside.song_list')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 425.2 425.2' space='preserve')
use(xlink:href='#icon-album')
//- span {{$t('core.aside.song_list')}}
dd
router-link(:active-class="$style.active" to="leaderboard" :tips="$t('core.aside.leaderboard')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 425.22 425.2' space='preserve')
use(xlink:href='#icon-leaderboard')
//- span {{$t('core.aside.leaderboard')}}
dl
//- dt {{$t('core.aside.my_music')}}
dd
router-link(:active-class="$style.active" to="list" :tips="$t('core.aside.my_list')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 444.87 391.18' space='preserve')
use(xlink:href='#icon-love')
dl
//- dt {{$t('core.aside.other')}}
dd(v-if="setting.download.enable")
router-link(:active-class="$style.active" to="download" :tips="$t('core.aside.download')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 425.2 425.2' space='preserve')
use(xlink:href='#icon-download-2')
//- span {{$t('core.aside.download')}}
dd
router-link(:active-class="$style.active" to="setting" :tips="$t('core.aside.setting')")
div(:class="$style.icon")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 493.23 436.47' space='preserve')
use(xlink:href='#icon-setting')
//- span {{$t('core.aside.setting')}}
</template>
<script>
import { mapGetters } from 'vuex'
import { base as eventBaseName } from '../../event/names'
// import { getRandom } from '../../utils'
export default {
data() {
return {
active: 'search',
animates: [
'bounce',
// 'flash',
// 'pulse',
'rubberBand',
// 'shake',
// 'headShake',
'swing',
'tada',
// 'wobble',
'jello',
// 'heartBeat',
],
logoAnimate: '',
}
},
computed: {
...mapGetters(['setting']),
...mapGetters('list', ['defaultList']),
},
// mounted() {
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
// },
methods: {
// handleMouseEnter() {
// console.log('object')
// this.logoAnimate = this.animates[getRandom(0, this.animates.length)]
// },
min() {
window.eventHub.$emit(eventBaseName.min)
},
max() {
window.eventHub.$emit(eventBaseName.max)
},
close() {
window.eventHub.$emit(eventBaseName.close)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.aside {
// box-shadow: 0 0 5px rgba(0, 0, 0, .3);
transition: @transition-theme;
transition-property: background-color;
background-color: @color-theme-sidebar;
// background-color: @color-aside-background;
// border-right: 2px solid @color-theme;
-webkit-app-region: drag;
-webkit-user-select: none;
display: flex;
flex-flow: column nowrap;
}
@control-btn-width: @height-toolbar * .26;
@control-btn-height: 6%;
.controlBtn {
box-sizing: border-box;
padding: 0 7px;
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: @control-btn-height;
-webkit-app-region: no-drag;
opacity: .5;
transition: opacity @transition-theme;
&:hover {
opacity: .8;
.controlBtniIcon {
opacity: 1;
}
}
button {
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
display: flex;
// justify-content: center;
// align-items: center;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
}
}
}
.controlBtniIcon {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.logo {
box-sizing: border-box;
padding: 0 13%;
height: 50px;
color: @color-theme-font;
flex: none;
text-align: center;
line-height: 50px;
font-weight: bold;
// -webkit-app-region: no-drag;
}
.menu {
flex: auto;
// &.controlBtnLeft {
// display: flex;
// flex-flow: column nowrap;
// justify-content: center;
// padding-bottom: @control-btn-height;
// }
// padding: 5px;
dl {
-webkit-app-region: no-drag;
// margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
dt {
padding-left: 5px;
font-size: 11px;
transition: @transition-theme;
transition-property: color;
color: @color-theme-font-label;
.mixin-ellipsis-1;
}
dd a {
display: block;
box-sizing: border-box;
text-decoration: none;
position: relative;
padding: 18px 3px;
// margin: 5px 0;
// border-left: 5px solid transparent;
transition: @transition-theme;
transition-property: color;
color: @color-theme-font;
cursor: pointer;
font-size: 11.5px;
text-align: center;
outline: none;
transition: background-color 0.3s ease;
// border-radius: @radius-border;
.mixin-ellipsis-1;
&.active {
// border-left-color: @color-theme-active;
background-color: @color-theme-active;
}
&:hover:not(.active) {
background-color: @color-theme-hover;
}
&:hover:not(.active) {
background-color: @color-theme-active;
}
}
}
}
.icon {
// margin-bottom: 5px;
&> svg {
width: 32%;
}
}
each(@themes, {
:global(#container.@{value}) {
.aside {
background-color: ~'@{color-@{value}-theme-sidebar}';
}
.controlBtn {
button {
color: ~'@{color-@{value}-theme_2}';
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
.logo {
color: ~'@{color-@{value}-theme-font}';
}
.menu {
dl {
dt {
color: ~'@{color-@{value}-theme-font-label}';
}
dd a {
color: ~'@{color-@{value}-theme-font}';
&.active {
background-color: ~'@{color-@{value}-theme-active}';
}
&:hover:not(.active) {
background-color: ~'@{color-@{value}-theme-hover}';
}
&:active:not(.active) {
background-color: ~'@{color-@{value}-theme-active}';
}
}
}
}
}
})
</style>

111
src/renderer/components/core/Aside/ControlBtns.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<div :class="$style.controlBtn">
<button type="button" :class="[$style.btn, $style.close]" :tips="$t('close')" @click="close">
<svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-window-close"></use>
</svg>
</button>
<button type="button" :class="[$style.btn, $style.min]" :tips="$t('min')" @click="min">
<svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-window-minimize"></use>
</svg>
</button>
</div>
</template>
<script>
import { base as eventBaseName } from '@renderer/event/names'
// import { getRandom } from '../../utils'
export default {
setup() {
return {
min() {
window.eventHub.emit(eventBaseName.min)
},
max() {
window.eventHub.emit(eventBaseName.max)
},
close() {
window.eventHub.emit(eventBaseName.close)
},
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
@control-btn-width: @height-toolbar * .26;
@control-btn-height: 6%;
.controlBtn {
box-sizing: border-box;
padding: 0 7px;
display: flex;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: @control-btn-height;
-webkit-app-region: no-drag;
opacity: .5;
transition: opacity @transition-theme;
&:hover {
opacity: .8;
.controlBtniIcon {
opacity: 1;
}
}
}
.btn {
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
display: flex;
// justify-content: center;
// align-items: center;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
}
}
.controlBtniIcon {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
each(@themes, {
:global(#root.@{value}) {
.btn {
color: ~'@{color-@{value}-theme_2}';
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
})
</style>

159
src/renderer/components/core/Aside/Nav.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<div :class="$style.menu">
<ul :class="$style.list">
<li v-for="item in menus" :key="item.to">
<router-link :class="$style.link" :active-class="$style.active" :to="item.to" :tips="item.tips">
<div :class="$style.icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" :viewBox="item.iconSize" space="preserve">
<use :xlink:href="item.icon"></use>
</svg>
</div>
</router-link>
</li>
</ul>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Nav',
computed: {
...mapGetters(['setting']),
menus() {
return [
{
to: 'search',
tips: this.$t('search'),
icon: '#icon-search-2',
iconSize: '0 0 425.2 425.2',
enable: true,
},
{
to: 'songList',
tips: this.$t('song_list'),
icon: '#icon-album',
iconSize: '0 0 425.2 425.2',
enable: true,
},
{
to: 'leaderboard',
tips: this.$t('leaderboard'),
icon: '#icon-leaderboard',
iconSize: '0 0 425.22 425.2',
enable: true,
},
{
to: 'list',
tips: this.$t('my_list'),
icon: '#icon-love',
iconSize: '0 0 444.87 391.18',
enable: true,
},
{
to: 'download',
tips: this.$t('download'),
icon: '#icon-download-2',
iconSize: '0 0 425.2 425.2',
enable: this.setting.download.enable,
},
{
to: 'setting',
tips: this.$t('setting'),
icon: '#icon-setting',
iconSize: '0 0 493.23 436.47',
enable: true,
},
].filter(m => m.enable)
},
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.menu {
flex: auto;
// &.controlBtnLeft {
// display: flex;
// flex-flow: column nowrap;
// justify-content: center;
// padding-bottom: @control-btn-height;
// }
// padding: 5px;
}
.list {
-webkit-app-region: no-drag;
// margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
// dt {
// padding-left: 5px;
// font-size: 11px;
// transition: @transition-theme;
// transition-property: color;
// color: @color-theme-font-label;
// .mixin-ellipsis-1;
// }
}
.link {
display: block;
box-sizing: border-box;
text-decoration: none;
position: relative;
padding: 18px 3px;
// margin: 5px 0;
// border-left: 5px solid transparent;
transition: @transition-theme;
transition-property: color;
color: @color-theme-font !important;
cursor: pointer;
font-size: 11.5px;
text-align: center;
outline: none;
transition: background-color 0.3s ease;
// border-radius: @radius-border;
.mixin-ellipsis-1;
&.active {
// border-left-color: @color-theme-active;
background-color: @color-theme-active;
}
&:hover:not(.active) {
background-color: @color-theme-hover;
}
&:hover:not(.active) {
background-color: @color-theme-active;
}
}
.icon {
// margin-bottom: 5px;
&> svg {
width: 32%;
}
}
each(@themes, {
:global(#root.@{value}) {
.link {
color: ~'@{color-@{value}-theme-font}' !important;
&.active {
background-color: ~'@{color-@{value}-theme-active}';
}
&:hover:not(.active) {
background-color: ~'@{color-@{value}-theme-hover}';
}
&:active:not(.active) {
background-color: ~'@{color-@{value}-theme-active}';
}
}
}
})
</style>

63
src/renderer/components/core/Aside/index.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div :class="$style.aside">
<ControlBtns v-if="setting.controlBtnPosition == 'left'" />
<div :class="$style.logo" v-else>L X</div>
<Nav />
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import ControlBtns from './ControlBtns'
import Nav from './Nav'
export default {
components: { ControlBtns, Nav },
computed: {
...mapGetters(['setting']),
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.aside {
// box-shadow: 0 0 5px rgba(0, 0, 0, .3);
transition: @transition-theme;
transition-property: background-color;
background-color: @color-theme-sidebar;
// background-color: @color-aside-background;
// border-right: 2px solid @color-theme;
-webkit-app-region: drag;
-webkit-user-select: none;
display: flex;
flex-flow: column nowrap;
}
.logo {
box-sizing: border-box;
padding: 0 13%;
height: 50px;
color: @color-theme-font;
flex: none;
text-align: center;
line-height: 50px;
font-weight: bold;
// -webkit-app-region: no-drag;
}
each(@themes, {
:global(#root.@{value}) {
.aside {
background-color: ~'@{color-@{value}-theme-sidebar}';
}
.logo {
color: ~'@{color-@{value}-theme-font}';
}
}
})
</style>

41
src/renderer/components/material/CommentFloor.vue → src/renderer/components/core/MusicComment/CommentFloor.vue
View File

@ -1,27 +1,28 @@
<template lang="pug">
div(:class="$style.container")
ul
li(v-for="(item, index) in comments" :key="item.id" :class="$style.listItem")
div(:class="$style.content")
div(:class="$style.left")
img( :class="$style.avatar" :src="item.avatar || commentDefImg" @error="handleUserImg")
div(:class="$style.right")
div(:class="$style.info")
div.select(:class="$style.name") {{item.userName}}
time(:class="$style.time" v-if="item.timeStr") {{timeFormat(item.timeStr)}}
div(:class="$style.likes" v-if="item.likedCount != null")
svg(:class="$style.likesIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-thumbs-up')
| {{item.likedCount}}
div.select(:class="$style.comment_text")
p(v-for="text in item.text") {{text}}
material-comment-floor(v-if="item.reply && item.reply.length" :class="$style.reply_floor" :comments="item.reply")
div(:class="$style.container")
ul
li(v-for="(item, index) in comments" :key="item.id" :class="$style.listItem")
div(:class="$style.content")
div(:class="$style.left")
img( :class="$style.avatar" :src="item.avatar || commentDefImg" @error="handleUserImg")
div(:class="$style.right")
div(:class="$style.info")
div.select(:class="$style.name") {{item.userName}}
time(:class="$style.time" v-if="item.timeStr") {{timeFormat(item.timeStr)}}
div(:class="$style.likes" v-if="item.likedCount != null")
svg(:class="$style.likesIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-thumbs-up')
| {{item.likedCount}}
div.select(:class="$style.comment_text")
p(v-for="text in item.text") {{text}}
comment-floor(v-if="item.reply && item.reply.length" :class="$style.reply_floor" :comments="item.reply")
</template>
<script>
import commentDefImg from '../../assets/images/defaultUser.jpg'
import commentDefImg from '@renderer/assets/images/defaultUser.jpg'
export default {
name: 'commentFloor',
props: {
comments: {
type: Array,
@ -48,7 +49,7 @@ export default {
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
@padding: 15px;
@ -140,7 +141,7 @@ export default {
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.listItem {
border-bottom-color: ~'@{color-@{value}-theme_2-active}';
}

53
src/renderer/components/material/MusicComment.vue → src/renderer/components/core/MusicComment/index.vue
View File

@ -1,48 +1,50 @@
<template lang="pug">
div(:class="$style.comment")
div.comment(:class="$style.comment")
div(:class="$style.commentHeader")
h3 {{$t('core.player.comment_title', { name: title })}}
h3 {{$t('comment__title', { name: title })}}
div(:class="$style.commentHeaderBtns")
div(:class="$style.commentHeaderBtn" @click="handleShowComment" :tips="$t('core.player.comment_refresh')")
div(:class="$style.commentHeaderBtn" @click="handleShowComment" :tips="$t('comment__refresh')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style='transform: rotate(45deg);' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-refresh')
div(:class="$style.commentHeaderBtn" @click="$emit('input', false)")
div(:class="$style.commentHeaderBtn" @click="$emit('close')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-close')
div.scroll(:class="$style.commentMain" ref="dom_comment")
div(v-if="page == 1")
h2(:class="$style.commentType") {{$t('core.player.comment_hot_title')}}
p(:class="$style.commentLabel" style="cursor: pointer;" v-if="isHotLoadError" @click="handleGetHotComment(currentMusicInfo)") {{$t('core.player.comment_hot_load_error')}}
p(:class="$style.commentLabel" v-else-if="isHotLoading && !hotComments.length") {{$t('core.player.comment_hot_loading')}}
material-comment-floor(v-if="!isHotLoadError && hotComments.length" :class="[$style.commentFloor, isHotLoading ? $style.loading : null]" :comments="hotComments")
p(:class="$style.commentLabel" v-else-if="!isHotLoadError && !isHotLoading") {{$t('core.player.comment_no_content')}}
h2(:class="$style.commentType") {{$t('comment__hot_title')}}
p(:class="$style.commentLabel" style="cursor: pointer;" v-if="isHotLoadError" @click="handleGetHotComment(currentMusicInfo)") {{$t('comment__hot_load_error')}}
p(:class="$style.commentLabel" v-else-if="isHotLoading && !hotComments.length") {{$t('comment__hot_loading')}}
comment-floor(v-if="!isHotLoadError && hotComments.length" :class="[$style.commentFloor, isHotLoading ? $style.loading : null]" :comments="hotComments")
p(:class="$style.commentLabel" v-else-if="!isHotLoadError && !isHotLoading") {{$t('comment__no_content')}}
div
h2(:class="$style.commentType") {{$t('core.player.comment_new_title')}} ({{total}})
p(:class="$style.commentLabel" style="cursor: pointer;" v-if="isNewLoadError" @click="handleGetNewComment(currentMusicInfo, nextPage, limit)") {{$t('core.player.comment_new_load_error')}}
p(:class="$style.commentLabel" v-else-if="isNewLoading && !newComments.length") {{$t('core.player.comment_new_loading')}}
material-comment-floor(v-if="!isNewLoadError && newComments.length" :class="[$style.commentFloor, isNewLoading ? $style.loading : null]" :comments="newComments")
p(:class="$style.commentLabel" v-else-if="!isNewLoadError && !isNewLoading") {{$t('core.player.comment_no_content')}}
h2(:class="$style.commentType") {{$t('comment__new_title')}} ({{total}})
p(:class="$style.commentLabel" style="cursor: pointer;" v-if="isNewLoadError" @click="handleGetNewComment(currentMusicInfo, nextPage, limit)") {{$t('comment__new_load_error')}}
p(:class="$style.commentLabel" v-else-if="isNewLoading && !newComments.length") {{$t('comment__new_loading')}}
comment-floor(v-if="!isNewLoadError && newComments.length" :class="[$style.commentFloor, isNewLoading ? $style.loading : null]" :comments="newComments")
p(:class="$style.commentLabel" v-else-if="!isNewLoadError && !isNewLoading") {{$t('comment__no_content')}}
div(:class="$style.pagination")
material-pagination(:count="total" :btnLength="5" :limit="limit" :page="page" @btn-click="handleToggleCommentPage")
</template>
<script>
import { scrollTo } from '../../utils'
import music from '../../utils/music'
import { mapGetters } from 'vuex'
import { scrollTo } from '@renderer/utils'
import music from '@renderer/utils/music'
import CommentFloor from './CommentFloor'
export default {
props: {
value: Boolean,
titleFormat: {
type: String,
default: '歌名 - 歌手',
},
show: Boolean,
musicInfo: {
type: Object,
required: true,
},
},
components: {
CommentFloor,
},
emits: ['close'],
data() {
return {
currentMusicInfo: {
@ -92,14 +94,15 @@ export default {
}
},
computed: {
...mapGetters(['setting']),
title() {
return this.currentMusicInfo.name
? this.titleFormat.replace('歌名', this.currentMusicInfo.name).replace('歌手', this.currentMusicInfo.singer)
? this.setting.download.fileName.replace('歌名', this.currentMusicInfo.name).replace('歌手', this.currentMusicInfo.singer)
: '^-^'
},
},
watch: {
value(n) {
show(n) {
if (n) this.handleShowComment()
},
},
@ -179,7 +182,7 @@ export default {
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.comment {
display: flex;
@ -253,7 +256,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.commentHeaderBtns {
color: ~'@{color-@{value}-theme}';
}

27
src/renderer/components/material/PactModal.vue → src/renderer/components/core/PactModal.vue
View File

@ -1,5 +1,5 @@
<template lang="pug">
material-modal(:show="!setting.isAgreePact || globalObj.isShowPact" @close="handleClose(false)" :bgClose="setting.isAgreePact" :close-btn="setting.isAgreePact")
material-modal(:show="!setting.isAgreePact || isShowPact" @close="handleClose(false)" :bgClose="setting.isAgreePact" :close-btn="setting.isAgreePact")
main(:class="$style.main")
h2 许可协议
div.select.scroll(:class="$style.content")
@ -51,21 +51,25 @@ material-modal(:show="!setting.isAgreePact || globalObj.isShowPact" @close="hand
div(:class="$style.btns" v-if="!setting.isAgreePact")
material-btn(:class="$style.btn" @click="handleClose(true)") 不接受
material-btn(:class="$style.btn" :disabled="!btnEnable" @click="handleClick()") 接受 {{timeStr}}
base-btn(:class="$style.btn" @click="handleClose(true)") {{$t('not_agree')}}
base-btn(:class="$style.btn" :disabled="!btnEnable" @click="handleClick()") {{$t('agree')}} {{timeStr}}
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { rendererSend, NAMES } from '../../../common/ipc'
import { openUrl } from '../../utils'
import { rendererSend, NAMES } from '@common/ipc'
import { openUrl } from '@renderer/utils'
import { isShowPact } from '@renderer/core/share'
export default {
setup() {
return {
isShowPact,
}
},
data() {
return {
time: 20,
globalObj: {
isShowPact: false,
},
}
},
computed: {
@ -86,7 +90,6 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.globalObj = window.globalObj
if (!this.setting.isAgreePact) {
this.startTimeout()
}
@ -105,7 +108,7 @@ export default {
},
handleClose(isExit) {
if (isExit) return rendererSend(NAMES.mainWindow.close, true)
this.globalObj.isShowPact = false
isShowPact.value = false
},
openUrl(url) {
openUrl(url)
@ -121,7 +124,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.main {
padding: 15px;
@ -168,7 +171,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';

131
src/renderer/components/core/PlayBar/ControlBtns.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<div :class="$style.controlBtn">
<common-volume-bar :setting="setting" />
<div :class="$style.titleBtn" @click="toggleDesktopLyric" @contextmenu="toggleLockDesktopLyric" :tips="toggleDesktopLyricBtnTitle">
<svg v-if="setting.desktopLyric.enable" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 512 512" space="preserve">
<use xlink:href="#icon-desktop-lyric-on"></use>
</svg>
<svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 512 512" space="preserve">
<use xlink:href="#icon-desktop-lyric-off"></use>
</svg>
</div>
<div :class="$style.titleBtn" @click="toggleNextPlayMode" :tips="nextTogglePlayName">
<svg v-if="setting.player.togglePlayMethod == 'listLoop'" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="80%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-list-loop"></use>
</svg>
<svg v-else-if="setting.player.togglePlayMethod == 'random'" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-list-random"></use>
</svg>
<svg v-else-if="setting.player.togglePlayMethod == 'list'" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="120%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-list-order"></use>
</svg>
<svg v-else-if="setting.player.togglePlayMethod == 'singleLoop'" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-single-loop"></use>
</svg>
<svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="120%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-single"></use>
</svg>
</div>
<div :class="$style.titleBtn" @click="addMusicTo" :tips="$t('player__add_music_to')">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="80%" viewBox="0 0 512 512" space="preserve">
<use xlink:href="#icon-add-2"></use>
</svg>
</div>
<teleport to="#root">
<common-list-add-modal :show="isShowAddMusicTo" :musicInfo="musicInfoItem" @close="isShowAddMusicTo = false" />
</teleport>
</div>
</template>
<script>
import { useI18n, ref, useRefGetter } from '@renderer/utils/vueTools'
import useNextTogglePlay from '@renderer/utils/compositions/useNextTogglePlay'
import useToggleDesktopLyric from '@renderer/utils/compositions/useToggleDesktopLyric'
import { musicInfo, musicInfoItem } from '@renderer/core/share/player'
export default {
setup() {
const { t } = useI18n()
const isShowAddMusicTo = ref(false)
const setting = useRefGetter('setting')
const {
nextTogglePlayName,
toggleNextPlayMode,
} = useNextTogglePlay({ setting, t })
const {
toggleDesktopLyricBtnTitle,
toggleDesktopLyric,
toggleLockDesktopLyric,
} = useToggleDesktopLyric({ setting, t })
const addMusicTo = () => {
if (!musicInfo.songmid) return
isShowAddMusicTo.value = true
}
return {
setting: setting,
isShowAddMusicTo,
nextTogglePlayName,
toggleNextPlayMode,
toggleDesktopLyricBtnTitle,
toggleDesktopLyric,
toggleLockDesktopLyric,
addMusicTo,
musicInfoItem,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.controlBtn {
flex: none;
display: flex;
flex-flow: row nowrap;
}
.titleBtn {
flex: none;
margin-left: 5px;
height: 100%;
width: 20px;
color: @color-btn;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transition: opacity 0.2s ease;
opacity: .6;
cursor: pointer;
svg {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}
&:hover {
opacity: 1;
}
&:active {
opacity: 1;
}
}
each(@themes, {
:global(#root.@{value}) {
.titleBtn {
color: ~'@{color-@{value}-btn}';
}
}
})
</style>

361
src/renderer/components/core/PlayBar/index.vue Normal file
View File

@ -0,0 +1,361 @@
<template lang="pug">
div(:class="$style.player")
div(:class="$style.left" @contextmenu="handleToMusicLocation" @click="showPlayerDetail" :tips="$t('player__pic_tip')")
img(v-if="musicInfo.img" :src="musicInfo.img" @error="imgError")
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='102%' width='100%' viewBox='0 0 60 60' space='preserve')
use(:xlink:href='`#${$style.iconPic}`')
div(:class="$style.middle")
div(:class="$style.column1")
div(:class="$style.container")
div(:class="$style.title" @click="handleCopy(title)" :tips="title + $t('copy_tip')") {{title}}
control-btns
div(:class="$style.column2")
common-progress-bar(:progress="progress" :handleTransitionEnd="handleTransitionEnd" :isActiveTransition="isActiveTransition")
div(:class="$style.column3")
span(:class="$style.statusText") {{statusText}}
span {{nowPlayTimeStr}}
span(style="margin: 0 5px;") /
span {{maxPlayTimeStr}}
div(:class="$style.right")
div(:class="$style.playBtn" @click='playPrev' :tips="$t('player__prev')" style="transform: rotate(180deg);")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
div(:class="$style.playBtn" :tips="isPlay ? $t('player__pause') : $t('player__play')" @click='togglePlay')
svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play')
div(:class="$style.playBtn" @click='playNext' :tips="$t('player__next')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style="display: none;")
g(:id="$style.iconPic")
path(d='M29,0C12.984,0,0,12.984,0,29c0,16.016,12.984,29,29,29s29-12.984,29-29C58,12.984,45.016,0,29,0zM29,36.08c-3.91,0-7.08-3.17-7.08-7.08c0-3.91,3.17-7.08,7.08-7.08s7.08,3.17,7.08,7.08C36.08,32.91,32.91,36.08,29,36.08z')
path(:class="$style.c1" d='M6.487,22.932c-0.077,0-0.156-0.009-0.234-0.027c-0.537-0.13-0.868-0.67-0.739-1.206c0.946-3.935,2.955-7.522,5.809-10.376s6.441-4.862,10.376-5.809c0.536-0.127,1.077,0.202,1.206,0.739c0.129,0.536-0.202,1.076-0.739,1.206c-3.575,0.859-6.836,2.685-9.429,5.277s-4.418,5.854-5.277,9.429C7.349,22.624,6.938,22.932,6.487,22.932z')
path(:class="$style.c1" d='M36.066,52.514c-0.451,0-0.861-0.308-0.972-0.767c-0.129-0.536,0.202-1.076,0.739-1.206c3.576-0.859,6.837-2.685,9.43-5.277s4.418-5.854,5.277-9.429c0.129-0.538,0.668-0.868,1.206-0.739c0.537,0.13,0.868,0.67,0.739,1.206c-0.946,3.935-2.955,7.522-5.809,10.376s-6.441,4.862-10.377,5.809C36.223,52.505,36.144,52.514,36.066,52.514z')
path(:class="$style.c1" d='M11.313,24.226c-0.075,0-0.151-0.008-0.228-0.026c-0.538-0.125-0.873-0.663-0.747-1.2c0.72-3.09,2.282-5.904,4.52-8.141c2.236-2.237,5.051-3.8,8.141-4.52c0.535-0.131,1.075,0.209,1.2,0.747c0.126,0.537-0.209,1.075-0.747,1.2c-2.725,0.635-5.207,2.014-7.18,3.986s-3.352,4.455-3.986,7.18C12.179,23.914,11.768,24.226,11.313,24.226z')
path(:class="$style.c1" d='M34.773,47.688c-0.454,0-0.865-0.312-0.973-0.773c-0.126-0.537,0.209-1.075,0.747-1.2c2.725-0.635,5.207-2.014,7.18-3.986s3.352-4.455,3.986-7.18c0.125-0.538,0.662-0.88,1.2-0.747c0.538,0.125,0.873,0.663,0.747,1.2c-0.72,3.09-2.282,5.904-4.52,8.141c-2.236,2.237-5.051,3.8-8.141,4.52C34.925,47.68,34.849,47.688,34.773,47.688z')
path(:class="$style.c1" d='M16.14,25.519c-0.071,0-0.143-0.008-0.215-0.023c-0.539-0.118-0.881-0.651-0.763-1.19c0.997-4.557,4.586-8.146,9.143-9.143c0.537-0.116,1.071,0.222,1.19,0.763c0.118,0.539-0.224,1.072-0.763,1.19c-3.796,0.831-6.786,3.821-7.617,7.617C17.013,25.2,16.6,25.519,16.14,25.519z')
path(:class="$style.c1" d='M33.48,42.861c-0.46,0-0.873-0.318-0.976-0.786c-0.118-0.539,0.224-1.072,0.763-1.19c3.796-0.831,6.786-3.821,7.617-7.617c0.118-0.541,0.65-0.881,1.19-0.763c0.539,0.118,0.881,0.651,0.763,1.19c-0.997,4.557-4.586,8.146-9.143,9.143C33.623,42.854,33.552,42.861,33.48,42.861z')
path(:class="$style.c2" d='M29,38.08c-5.007,0-9.08-4.073-9.08-9.08s4.073-9.08,9.08-9.08s9.08,4.073,9.08,9.08S34.007,38.08,29,38.08z M29,23.92c-2.801,0-5.08,2.279-5.08,5.08s2.279,5.08,5.08,5.08s5.08-2.279,5.08-5.08S31.801,23.92,29,23.92z')
</template>
<script>
import { useRefGetter, computed, useRouter } from '@renderer/utils/vueTools'
import { clipboardWriteText } from '@renderer/utils'
import { player as eventPlayerNames } from '@renderer/event/names'
import ControlBtns from './ControlBtns'
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
// import { lyric } from '@renderer/core/share/lyric'
import { statusText, musicInfo, setShowPlayerDetail, isPlay, musicInfoItem, playInfo, playMusicInfo } from '@renderer/core/share/player'
export default {
components: {
ControlBtns,
},
data() {
return {
isShowAddMusicTo: false,
}
},
setup() {
const setting = useRefGetter('setting')
const router = useRouter()
const {
nowPlayTimeStr,
maxPlayTimeStr,
progress,
isActiveTransition,
handleTransitionEnd,
} = usePlayProgress()
const showPlayerDetail = () => {
if (!musicInfoItem.value.songmid) return
setShowPlayerDetail(true)
}
const handleCopy = (text) => {
clipboardWriteText(text)
}
const imgError = () => {
// console.log(e)
// musicInfo.img = null
}
const handleToMusicLocation = () => {
const listId = playMusicInfo.listId
if (!listId || listId == '__temp__' || listId == 'download' || !musicInfoItem.value.songmid) return
if (playInfo.playIndex == -1) return
router.push({
path: 'list',
query: {
id: listId,
scrollIndex: playInfo.playIndex,
},
})
}
const title = computed(() => {
return musicInfo.name
? setting.value.download.fileName.replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
: '^-^'
})
const togglePlay = () => {
window.eventHub.emit(eventPlayerNames.setTogglePlay)
}
const playNext = () => {
window.eventHub.emit(eventPlayerNames.setPlayNext)
}
const playPrev = () => {
window.eventHub.emit(eventPlayerNames.setPlayPrev)
}
// onBeforeUnmount(() => {
// window.eventHub.emit(eventPlayerNames.setTogglePlay)
// })
return {
musicInfo,
nowPlayTimeStr,
maxPlayTimeStr,
progress,
isActiveTransition,
handleTransitionEnd,
handleCopy,
imgError,
statusText,
title,
showPlayerDetail,
isPlay,
togglePlay,
setting,
playNext,
playPrev,
handleToMusicLocation,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.player {
height: @height-player;
background-color: @color-theme_2;
transition: @transition-theme;
transition-property: border-color;
border-top: 2px solid @color-theme;
box-sizing: border-box;
display: flex;
z-index: 2;
* {
box-sizing: border-box;
}
}
.left {
width: @height-player - 2;
height: 100%;
color: @color-theme;
transition: @transition-theme;
transition-property: color;
flex: none;
padding: 2PX;
opacity: 1;
transition: @transition-theme;
transition-property: opacity;
display: flex;
justify-content: center;
// align-items: center;
cursor: pointer;
&:hover {
opacity: .8;
}
svg {
fill: currentColor;
}
img {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
max-width: 100%;
max-height: 100%;
transition: @transition-theme;
transition-property: border-color;
// border-radius: 50%;
border-radius: @radius-border;
// border: 2px solid @color-theme_2-background_1;
}
}
.middle {
flex: auto;
height: 100%;
padding: 5px 10px 5px 8px;
display: flex;
flex-flow: column nowrap;
}
.right {
height: 100%;
flex: none;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding-left: 15px;
padding-right: 20px;
}
.column1 {
flex: auto;
position: relative;
font-size: 16px;
.container {
position: absolute;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
}
.title {
flex: 0 1 auto;
min-width: 0;
padding-right: 5px;
font-size: 14px;
line-height: 18px;
.mixin-ellipsis-1;
}
.play-btn {
+ .play-btn {
margin-left: 15px;
}
flex: none;
height: 46%;
// margin-top: -2px;
// transition: @transition-theme;
// transition-property: color;
// color: @color-theme;
transition: opacity 0.2s ease;
opacity: 1;
cursor: pointer;
svg {
fill: currentColor;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}
&:hover {
opacity: 0.8;
}
&:active {
opacity: 0.6;
}
}
.column2 {
flex: none;
padding: 3px 0;
position: relative;
}
.column3 {
transition: @transition-theme;
transition-property: color;
color: @color-theme_2-font;
flex: none;
font-size: 12px;
display: flex;
padding-top: 2px;
// justify-content: space-between;
height: 16px;
align-items: center;
}
.status-text {
font-size: 0.98em;
transition: @transition-theme;
transition-property: color;
color: @color-player-status-text;
.mixin-ellipsis-1;
// padding: 0 5px;
padding-right: 5px;
flex: 1 1 0;
// text-align: center;
line-height: 1.2;
width: 0;
}
#icon-pic {
color: @color-theme;
.c1 {
transition: @transition-theme;
transition-property: fill;
fill: @color-player-pic-c1;
}
.c2 {
transition: @transition-theme;
transition-property: fill;
fill: @color-player-pic-c2;
}
}
each(@themes, {
:global(#root.@{value}) {
.player {
background-color: ~'@{color-@{value}-theme_2}';
border-top-color: ~'@{color-@{value}-theme}';
}
.left {
color: ~'@{color-@{value}-theme}';
// img {
// border-color: ~'@{color-@{value}-theme_2-background_1}';
// }
}
.titleBtn {
color: ~'@{color-@{value}-btn}';
}
.play-btn {
color: ~'@{color-@{value}-btn}';
svg {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}
}
.volume {
background-color: ~'@{color-@{value}-player-progress-bar1}';
}
.volume-bar {
background-color: ~'@{color-@{value}-btn}';
}
.column3 {
color: ~'@{color-@{value}-theme_2-font}';
}
.status-text {
color: ~'@{color-@{value}-player-status-text}';
}
#icon-pic {
color: ~'@{color-@{value}-theme}';
.c1 {
fill: ~'@{color-@{value}-player-pic-c1}';
}
.c2 {
fill: ~'@{color-@{value}-player-pic-c2}';
}
}
}
})
</style>

230
src/renderer/components/core/PlayDetail/Lyric.vue Normal file
View File

@ -0,0 +1,230 @@
<template>
<div :class="['right', $style.right]">
<div :class="['lyric', $style.lyric, { [$style.draging]: isMsDown }]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric">
<div :class="$style.lyricSpace"></div>
<div :class="[$style.lyricText]" ref="dom_lyric_text"></div>
<div :class="$style.lyricSpace"></div>
</div>
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
<div :class="[$style.lyricSelectContent, 'select', 'scroll']" v-if="isShowLrcSelectContent" @contextmenu="handleCopySelectText">
<div v-for="(info, index) in lyric.lines" :key="index" :class="[$style.lyricSelectline, { [$style.lrcActive]: lyric.line == index }]">
<span>{{info.text}}</span>
<br v-if="info.translation"/>
<span :class="$style.lyricSelectlineTransition">{{info.translation}}</span>
</div>
</div>
</transition>
</div>
</template>
<script>
import { clipboardWriteText } from '@renderer/utils'
import { lyric } from '@renderer/core/share/lyric'
import { isPlay, isShowLrcSelectContent } from '@renderer/core/share/player'
// import { ref } from '@renderer/utils/vueTools'
import useLyric from '@renderer/utils/compositions/useLyric'
export default {
setup() {
const {
dom_lyric,
dom_lyric_text,
isMsDown,
handleLyricMouseDown,
handleWheel,
} = useLyric({ isPlay, lyric })
return {
dom_lyric,
dom_lyric_text,
isMsDown,
handleLyricMouseDown,
handleWheel,
lyric,
isShowLrcSelectContent,
}
},
methods: {
handleCopySelectText() {
let str = window.getSelection().toString()
str = str.trim()
if (!str.length) return
clipboardWriteText(str)
},
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.right {
flex: 0 0 60%;
// padding: 0 30px;
position: relative;
transition: flex-basis @transition-theme;
&:before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
content: ' ';
height: 100px;
width: 100%;
background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
pointer-events: none;
}
&:after {
position: absolute;
bottom: 0;
left: 0;
content: ' ';
height: 100px;
width: 100%;
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
pointer-events: none;
}
}
.lyric {
text-align: center;
height: 100%;
overflow: hidden;
font-size: 16px;
cursor: grab;
&.draging {
cursor: grabbing;
}
:global {
.lrc-content {
line-height: 1.2;
margin: 16px 0;
overflow-wrap: break-word;
color: @color-player-detail-lyric;
.translation {
transition: @transition-theme !important;
transition-property: font-size, color;
font-size: .9em;
margin-top: 5px;
}
.line {
transition-property: font-size, color !important;
background: none !important;
-webkit-text-fill-color: unset;
// -webkit-text-fill-color: none !important;
}
&.active {
.line {
color: @color-theme;
}
.translation {
font-size: 1em;
color: @color-theme;
}
span {
// color: @color-theme;
font-size: 1.2em;
}
}
span {
transition: @transition-theme !important;
transition-property: font-size !important;
font-size: 1em;
background-repeat: no-repeat;
background-color: rgba(77, 77, 77, 0.9);
background-image: -webkit-linear-gradient(top, @color-theme, @color-theme);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
}
}
}
// p {
// padding: 8px 0;
// line-height: 1.2;
// overflow-wrap: break-word;
// transition: @transition-theme !important;
// transition-property: color, font-size;
// }
// .lrc-active {
// color: @color-theme;
// font-size: 1.2em;
// }
}
.lyricSelectContent {
position: absolute;
left: 0;
top: 0;
// text-align: center;
height: 100%;
width: 100%;
font-size: 16px;
background-color: @color-theme_2-background_1;
z-index: 10;
color: @color-player-detail-lyric;
.lyricSelectline {
padding: 8px 0;
overflow-wrap: break-word;
transition: @transition-theme !important;
transition-property: color, font-size;
line-height: 1.3;
}
.lyricSelectlineTransition {
font-size: 14px;
}
.lrc-active {
color: @color-theme;
}
}
.lyric-space {
height: 70%;
}
each(@themes, {
:global(#root.@{value}) {
.right {
&:before {
background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
}
&:after {
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
}
}
.lyric {
:global {
.lrc-content {
color: ~'@{color-@{value}-player-detail-lyric}';
&.active {
.translation {
color: ~'@{color-@{value}-player-detail-lyric-active}';
}
.line {
color: ~'@{color-@{value}-player-detail-lyric-active}';
}
}
span {
background-color: ~'@{color-@{value}-player-detail-lyric}';
background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-player-detail-lyric-active}', ~'@{color-@{value}-player-detail-lyric-active}');
}
}
}
}
// .lrc-active {
// color: ~'@{color-@{value}-theme}';
// }
.lyricSelectContent {
background-color: ~'@{color-@{value}-theme_2-background_1}';
color: ~'@{color-@{value}-player-detail-lyric}';
.lrc-active {
color: ~'@{color-@{value}-theme}';
}
}
}
})
</style>

160
src/renderer/components/core/PlayDetail/PlayBar.vue Normal file
View File

@ -0,0 +1,160 @@
<template lang="pug">
div(:class="$style.footer")
div(:class="$style.footerLeft")
control-btns
div(:class="$style.progressContainer")
div(:class="$style.progressContent")
common-progress-bar(:class-name="$style.progress" :progress="progress" :handleTransitionEnd="handleTransitionEnd" :isActiveTransition="isActiveTransition")
div(:class="$style.timeLabel")
span(style="margin-left: 15px") {{status}}
div
span {{nowPlayTimeStr}}
span(style="margin: 0 5px;") /
span {{maxPlayTimeStr}}
div(:class="$style.playControl")
div(:class="$style.playBtn" @click="playPrev" style="transform: rotate(180deg);" :tips="$t('player__prev')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
div(:class="$style.playBtn" @click="togglePlay" :tips="isPlay ? $t('player__pause') : $t('player__play')")
svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play')
div(:class="$style.playBtn" @click="playNext" :tips="$t('player__next')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
</template>
<script>
import { status, isPlay } from '@renderer/core/share/player'
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
import { player as eventPlayerNames } from '@renderer/event/names'
import ControlBtns from './components/ControlBtns'
export default {
components: {
ControlBtns,
},
setup() {
const {
nowPlayTimeStr,
maxPlayTimeStr,
progress,
isActiveTransition,
handleTransitionEnd,
} = usePlayProgress()
return {
nowPlayTimeStr,
maxPlayTimeStr,
status,
progress,
isActiveTransition,
handleTransitionEnd,
isPlay,
togglePlay() {
window.eventHub.emit(eventPlayerNames.setTogglePlay)
},
playNext() {
window.eventHub.emit(eventPlayerNames.setPlayNext)
},
playPrev() {
window.eventHub.emit(eventPlayerNames.setPlayPrev)
},
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.footer {
flex: 0 0 100px;
overflow: hidden;
display: flex;
align-items: center;
}
.footerLeft {
flex: auto;
display: flex;
flex-flow: column nowrap;
padding: 13px;
overflow: hidden;
}
.progress-container {
width: 100%;
position: relative;
padding: 3px 0;
}
.progress-content {
position: relative;
height: 15px;
padding: 5px 0;
width: 100%;
}
.progress {
height: 100%;
}
.bar-transition {
transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0.2s;
}
.time-label {
width: 100%;
height: 18px;
display: flex;
justify-content: space-between;
span {
font-size: 13px;
}
}
.play-control {
flex: none;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 25px;
color: @color-btn;
}
.play-btn {
height: 40%;
padding: 5px;
cursor: pointer;
flex: none;
// transition: @transition-theme;
// transition-property: color;
color: @color-player-detail-play-btn;
transition: opacity 0.2s ease;
opacity: 1;
cursor: pointer;
+.play-btn {
margin-left: 10px;
}
svg {
fill: currentColor;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}
&:hover {
opacity: 0.8;
}
&:active {
opacity: 0.6;
}
}
each(@themes, {
:global(#root.@{value}) {
.play-btn {
color: ~'@{color-@{value}-player-detail-play-btn}';
}
}
})
</style>

142
src/renderer/components/core/PlayDetail/components/ControlBtns.vue Normal file
View File

@ -0,0 +1,142 @@
<template lang="pug">
div(:class="$style.footerLeftControlBtns")
common-volume-bar(:setting="setting")
div(:class="[$style.footerLeftControlBtn, $style.lrcBtn]" @click="toggleDesktopLyric" @contextmenu="toggleLockDesktopLyric" :tips="toggleDesktopLyricBtnTitle")
svg(v-if="setting.desktopLyric.enable" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='125%' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-desktop-lyric-on')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='125%' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-desktop-lyric-off')
div(:class="[$style.footerLeftControlBtn, { [$style.active]: isShowLrcSelectContent }]" @click="toggleVisibleLrc" :tips="$t('lyric__select')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-text')
div(:class="[$style.footerLeftControlBtn, {[$style.active]: isShowPlayComment}]" @click="toggleVisibleComment" :tips="$t('comment__show')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-comment')
div(:class="$style.footerLeftControlBtn" @click="toggleNextPlayMode" :tips="nextTogglePlayName")
svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-loop')
svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-random')
svg(v-else-if="setting.player.togglePlayMethod == 'list'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-order')
svg(v-else-if="setting.player.togglePlayMethod == 'singleLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='110%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-single-loop')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-single')
div(:class="$style.footerLeftControlBtn" @click="isShowAddMusicTo = true" :tips="$t('player__add_music_to')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-add-2')
teleport(to="#root")
common-list-add-modal(:show="isShowAddMusicTo" :musicInfo="musicInfoItem" @close="isShowAddMusicTo = false")
</template>
<script>
import { useI18n, useRefGetter, ref } from '@renderer/utils/vueTools'
import {
isShowLrcSelectContent,
setShowPlayLrcSelectContentLrc,
isShowPlayComment,
setShowPlayComment,
musicInfoItem,
} from '@renderer/core/share/player'
import useNextTogglePlay from '@renderer/utils/compositions/useNextTogglePlay'
import useToggleDesktopLyric from '@renderer/utils/compositions/useToggleDesktopLyric'
export default {
setup() {
const { t } = useI18n()
const setting = useRefGetter('setting')
const toggleVisibleLrc = () => {
setShowPlayLrcSelectContentLrc(!isShowLrcSelectContent.value)
}
const toggleVisibleComment = () => {
setShowPlayComment(!isShowPlayComment.value)
}
const {
nextTogglePlayName,
toggleNextPlayMode,
} = useNextTogglePlay({ setting, t })
const {
toggleDesktopLyricBtnTitle,
toggleDesktopLyric,
toggleLockDesktopLyric,
} = useToggleDesktopLyric({ setting, t })
const isShowAddMusicTo = ref(false)
return {
setting,
isShowLrcSelectContent,
toggleVisibleLrc,
isShowPlayComment,
toggleVisibleComment,
nextTogglePlayName,
toggleNextPlayMode,
toggleDesktopLyricBtnTitle,
toggleDesktopLyric,
toggleLockDesktopLyric,
isShowAddMusicTo,
musicInfoItem,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.footerLeftControlBtns {
color: @color-theme_2-font;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
.footerLeftControlBtn {
width: 18px;
height: 18px;
opacity: .5;
cursor: pointer;
transition: opacity @transition-theme;
display: flex;
align-items: center;
justify-content: center;
&:hover {
opacity: .9;
}
+.footerLeftControlBtn {
margin-left: 6px;
}
&.active {
color: @color-theme;
opacity: .8;
}
}
.lrcBtn {
width: 20px;
}
}
each(@themes, {
:global(#root.@{value}) {
.footerLeftControlBtns {
color: ~'@{color-@{value}-theme_2-font}';
}
.footerLeftControlBtn {
&.active {
color: ~'@{color-@{value}-theme}';
}
}
}
})
</style>

538
src/renderer/components/core/PlayDetail/index.vue Normal file
View File

@ -0,0 +1,538 @@
<template lang="pug">
transition(enter-active-class="animated lightSpeedIn" leave-active-class="animated slideOutDown" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave")
div(:class="[$style.container, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
//- div(:class="$style.bg" :style="bgStyle")
//- div(:class="$style.bg2")
div(:class="$style.header")
div(:class="$style.controBtn")
button(type="button" :class="$style.hide" :tips="$t('player__hide_detail_tip')" @click="hide")
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
use(xlink:href='#icon-window-hide')
button(type="button" :class="$style.min" :tips="$t('min')" @click="min")
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-minimize')
//- button(type="button" :class="$style.max" @click="max")
button(type="button" :class="$style.close" :tips="$t('close')" @click="close")
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-close')
div(:class="[$style.main, {[$style.showComment]: isShowPlayComment}]")
div.left(:class="$style.left")
//- div(:class="$style.info")
div(:class="$style.info")
img(:class="$style.img" :src="musicInfo.img" v-if="musicInfo.img")
div.description(:class="$style.description")
p {{$t('player__music_name')}}{{musicInfo.name}}
p {{$t('player__music_singer')}}{{musicInfo.singer}}
p(v-if="musicInfo.album") {{$t('player__music_album')}}{{musicInfo.album}}
transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
Lyric(v-if="visibleLrc")
core-music-comment(:class="$style.comment" :musicInfo="musicInfoItem" :show="isShowPlayComment" @close="hideComment")
play-bar
</template>
<script>
import { useRefGetter, ref } from '@renderer/utils/vueTools'
import { base as eventBaseName } from '@renderer/event/names'
import {
isShowPlayerDetail,
setShowPlayerDetail,
isShowPlayComment,
setShowPlayComment,
setShowPlayLrcSelectContentLrc,
musicInfoItem,
musicInfo,
} from '@renderer/core/share/player'
import Lyric from './Lyric'
import PlayBar from './PlayBar'
export default {
components: {
Lyric,
PlayBar,
},
setup() {
const setting = useRefGetter('setting')
const visibleLrc = ref(false)
let clickTime = 0
const hide = () => {
setShowPlayerDetail(false)
}
const handleContextMenu = () => {
if (window.performance.now() - clickTime > 400) {
clickTime = window.performance.now()
return
}
clickTime = 0
hide()
}
const hideComment = () => {
setShowPlayComment(false)
}
const handleAfterEnter = () => {
visibleLrc.value = true
}
const handleAfterLeave = () => {
setShowPlayLrcSelectContentLrc(false)
hideComment(false)
visibleLrc.value = false
}
return {
setting,
isShowPlayerDetail,
isShowPlayComment,
musicInfoItem,
musicInfo,
hide,
handleContextMenu,
hideComment,
handleAfterEnter,
handleAfterLeave,
visibleLrc,
min() {
window.eventHub.emit(eventBaseName.min)
},
max() {
window.eventHub.emit(eventBaseName.max)
},
close() {
window.eventHub.emit(eventBaseName.close)
},
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
@control-btn-width: @height-toolbar * .26;
.container {
position: absolute;
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: @color-theme_2-background_1;
z-index: 10;
// -webkit-app-region: drag;
overflow: hidden;
border-radius: @radius-border;
color: @color-theme_2-font;
border-left: 12px solid @color-theme;
-webkit-app-region: no-drag;
box-sizing: border-box;
* {
box-sizing: border-box;
}
&.controlBtnLeft {
.controBtn {
left: 0;
flex-direction: row-reverse;
height: @height-toolbar * .7;
button + button {
margin-right: @control-btn-width / 2;
}
}
}
&.controlBtnRight {
.controBtn {
right: @control-btn-width * .5;
button + button {
margin-left: @control-btn-width * 1.2;
}
}
}
}
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: 110% 110%;
filter: blur(60px);
z-index: -1;
}
.bg2 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background-color: rgba(255, 255, 255, .8);
}
.header {
position: relative;
flex: 0 0 @height-toolbar;
-webkit-app-region: drag;
}
.controBtn {
position: absolute;
top: 0;
display: flex;
align-items: center;
height: @height-toolbar;
-webkit-app-region: no-drag;
padding: 0 @control-btn-width;
&:hover {
.controBtnIcon {
opacity: 1;
}
}
button {
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
display: flex;
justify-content: center;
align-items: center;
&.hide {
background-color: @color-hideBtn;
}
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
}
}
}
.controBtnIcon {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.main {
flex: auto;
min-height: 0;
overflow: hidden;
display: flex;
margin: 0 30px;
position: relative;
&.showComment {
:global {
.left {
flex-basis: 18%;
.description p {
font-size: 12px;
}
}
.right {
flex-basis: 30%;
.lyric {
font-size: 13px;
}
}
.comment {
opacity: 1;
transform: scaleX(1);
}
}
}
}
.left {
flex: 0 0 40%;
display: flex;
flex-flow: column nowrap;
align-items: center;
padding: 13px;
overflow: hidden;
transition: flex-basis @transition-theme;
}
.info {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
max-width: 300px;
}
.img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
box-shadow: 0 0 4px @color-theme-hover;
border-radius: 6px;
opacity: .8;
// border: 5px solid @color-theme-hover;
// border-radius: @radius-border;
// border: 5px solid #fff;
}
.description {
max-width: 300px;
padding: 15px 0;
overflow: hidden;
p {
line-height: 1.5;
font-size: 14px;
overflow-wrap: break-word;
}
}
.right {
flex: 0 0 60%;
// padding: 0 30px;
position: relative;
transition: flex-basis @transition-theme;
&:before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
content: ' ';
height: 100px;
width: 100%;
background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
pointer-events: none;
}
&:after {
position: absolute;
bottom: 0;
left: 0;
content: ' ';
height: 100px;
width: 100%;
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
pointer-events: none;
}
}
.lyric {
text-align: center;
height: 100%;
overflow: hidden;
font-size: 16px;
cursor: grab;
&.draging {
cursor: grabbing;
}
:global {
.lrc-content {
line-height: 1.2;
margin: 16px 0;
overflow-wrap: break-word;
color: @color-player-detail-lyric;
.translation {
transition: @transition-theme !important;
transition-property: font-size, color;
font-size: .9em;
margin-top: 5px;
}
.line {
transition-property: font-size, color !important;
background: none !important;
-webkit-text-fill-color: unset;
// -webkit-text-fill-color: none !important;
}
&.active {
.line {
color: @color-theme;
}
.translation {
font-size: 1em;
color: @color-theme;
}
span {
// color: @color-theme;
font-size: 1.2em;
}
}
span {
transition: @transition-theme !important;
transition-property: font-size !important;
font-size: 1em;
background-repeat: no-repeat;
background-color: rgba(77, 77, 77, 0.9);
background-image: -webkit-linear-gradient(top, @color-theme, @color-theme);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
}
}
}
// p {
// padding: 8px 0;
// line-height: 1.2;
// overflow-wrap: break-word;
// transition: @transition-theme !important;
// transition-property: color, font-size;
// }
// .lrc-active {
// color: @color-theme;
// font-size: 1.2em;
// }
}
.lyricSelectContent {
position: absolute;
left: 0;
top: 0;
// text-align: center;
height: 100%;
width: 100%;
font-size: 16px;
background-color: @color-theme_2-background_1;
z-index: 10;
color: @color-player-detail-lyric;
.lyricSelectline {
padding: 8px 0;
overflow-wrap: break-word;
transition: @transition-theme !important;
transition-property: color, font-size;
line-height: 1.3;
}
.lyricSelectlineTransition {
font-size: 14px;
}
.lrc-active {
color: @color-theme;
}
}
.lyric-space {
height: 70%;
}
.comment {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
opacity: 1;
margin-left: 10px;
transform: scaleX(0);
}
each(@themes, {
:global(#root.@{value}) {
.container {
border-left-color: ~'@{color-@{value}-theme}';
background-color: ~'@{color-@{value}-theme_2-background_1}';
// color: ~'@{color-@{value}-theme_2-font}';
}
.right {
&:before {
background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
}
&:after {
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
}
}
.controBtn {
button {
color: ~'@{color-@{value}-theme_2}';
// &.hide:after {
// background-color: ~'@{color-@{value}-hideBtn}';
// }
&.hide {
background-color: ~'@{color-@{value}-hideBtn}';
}
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
.img {
box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
// border-color: ~'@{color-@{value}-theme-hover}';
}
.lyric {
:global {
.lrc-content {
color: ~'@{color-@{value}-player-detail-lyric}';
&.active {
.translation {
color: ~'@{color-@{value}-player-detail-lyric-active}';
}
.line {
color: ~'@{color-@{value}-player-detail-lyric-active}';
}
}
span {
background-color: ~'@{color-@{value}-player-detail-lyric}';
background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-player-detail-lyric-active}', ~'@{color-@{value}-player-detail-lyric-active}');
}
}
}
}
// .lrc-active {
// color: ~'@{color-@{value}-theme}';
// }
.lyricSelectContent {
background-color: ~'@{color-@{value}-theme_2-background_1}';
color: ~'@{color-@{value}-player-detail-lyric}';
.lrc-active {
color: ~'@{color-@{value}-theme}';
}
}
.footerLeftControlBtns {
color: ~'@{color-@{value}-theme_2-font}';
}
.footerLeftControlBtn {
&.active {
color: ~'@{color-@{value}-theme}';
}
}
.progress {
background-color: ~'@{color-@{value}-player-progress}';
}
.progress-bar1 {
background-color: ~'@{color-@{value}-player-progress-bar1}';
}
.progress-bar2 {
background-color: ~'@{color-@{value}-player-progress-bar2}';
}
.play-btn {
color: ~'@{color-@{value}-player-detail-play-btn}';
}
}
})
</style>

1379
src/renderer/components/core/Player.vue
View File

File diff suppressed because it is too large Load Diff

943
src/renderer/components/core/PlayerDetail.vue
View File

@ -1,943 +0,0 @@
<template lang="pug">
div(:class="[$style.container, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]" @contextmenu="handleContextMenu")
//- div(:class="$style.bg" :style="bgStyle")
//- div(:class="$style.bg2")
div(:class="$style.header")
div(:class="$style.controBtn")
button(type="button" :class="$style.hide" :tips="$t('core.player.hide_detail')" @click="hide")
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
use(xlink:href='#icon-window-hide')
button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-minimize')
//- button(type="button" :class="$style.max" @click="max")
button(type="button" :class="$style.close" :tips="$t('core.toolbar.close')" @click="close")
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-close')
div(:class="[$style.main, isShowComment ? $style.showComment : null]")
div(:class="$style.left")
//- div(:class="$style.info")
div(:class="$style.info")
img(:class="$style.img" :src="musicInfo.img" v-if="musicInfo.img")
div(:class="$style.description")
p {{$t('core.player.name')}}{{musicInfo.name}}
p {{$t('core.player.singer')}}{{musicInfo.singer}}
p(v-if="musicInfo.album") {{$t('core.player.album')}}{{musicInfo.album}}
div(:class="$style.right")
div(:class="[$style.lyric, { [$style.draging]: lyricEvent.isMsDown }]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
div(:class="$style.lyricSpace")
div(:class="[$style.lyricText]" ref="dom_lyric_text")
//- p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
div(:class="$style.lyricSpace")
transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
div(:class="[$style.lyricSelectContent, 'select', 'scroll']" v-if="isShowLrcSelectContent" @contextmenu="handleCopySelectText")
//- div(:class="$style.lyricSpace")
div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lyricSelectline, { [$style.lrcActive]: lyric.line == index }]")
span {{info.text}}
br(v-if="info.translation")
span(:class="$style.lyricSelectlineTransition") {{info.translation}}
//- div(:class="$style.lyricSpace")
material-music-comment(:class="$style.comment" :titleFormat="this.setting.download.fileName" :musicInfo="musicInfo" v-model="isShowComment")
div(:class="$style.footer")
div(:class="$style.footerLeft")
div(:class="$style.footerLeftControlBtns")
div(:class="[$style.footerLeftControlBtn, { [$style.active]: isShowLrcSelectContent }]" @click="isShowLrcSelectContent = !isShowLrcSelectContent" :tips="$t('core.player.lyric_select')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-text')
div(:class="[$style.footerLeftControlBtn, isShowComment ? $style.active : null]" @click="isShowComment = !isShowComment" :tips="$t('core.player.comment_show')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-comment')
div(:class="$style.footerLeftControlBtn" @click="$emit('toggle-next-play-mode')" :tips="nextTogglePlayName")
svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-loop')
svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-random')
svg(v-else-if="setting.player.togglePlayMethod == 'list'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-list-order')
svg(v-else-if="setting.player.togglePlayMethod == 'singleLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='110%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-single-loop')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-single')
div(:class="$style.footerLeftControlBtn" @click="$emit('add-music-to', musicInfo)" :tips="$t('core.player.add_music_to')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve')
use(xlink:href='#icon-add-2')
div(:class="$style.progressContainer")
div(:class="$style.progressContent")
div(:class="$style.progress")
//- div(:class="[$style.progressBar, $style.progressBar1]" :style="{ transform: `scaleX(${progress || 0})` }")
div(:class="[$style.progressBar, $style.progressBar2, isActiveTransition ? $style.barTransition : '']" @transitionend="handleTransitionEnd" :style="{ transform: `scaleX(${playInfo.progress || 0})` }")
div(:class="$style.progressMask" @click='setProgress' ref="dom_progress")
div(:class="$style.timeLabel")
span(style="margin-left: 15px") {{playInfo.status}}
div
span {{playInfo.nowPlayTimeStr}}
span(style="margin: 0 5px;") /
span {{playInfo.maxPlayTimeStr}}
div(:class="$style.playControl")
//- div(:class="$style.playBtn")
//- div(:class="$style.playBtn")
div(:class="$style.playBtn" @click="$emit('action', { type: 'prev' })" style="transform: rotate(180deg);" :tips="$t('core.player.prev')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
div(:class="$style.playBtn" :tips="isPlay ? $t('core.player.pause') : $t('core.player.play')" @click="$emit('action', { type: 'togglePlay' })")
svg(v-if="isPlay" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve')
use(xlink:href='#icon-pause')
svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve')
use(xlink:href='#icon-play')
div(:class="$style.playBtn" @click="$emit('action', { type: 'next' })" :tips="$t('core.player.next')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 220.847 220.847' space='preserve')
use(xlink:href='#icon-nextMusic')
</template>
<script>
import { mapGetters } from 'vuex'
import { base as eventBaseName } from '../../event/names'
import { clipboardWriteText, scrollTo } from '../../utils'
let cancelScrollFn = null
export default {
props: {
visible: {
type: Boolean,
required: true,
},
musicInfo: {
type: Object,
default() {
return {
songmid: null,
img: null,
lrc: null,
url: null,
name: '^',
singer: '^',
}
},
},
lyric: {
type: Object,
default() {
return {
line: 0,
text: '',
lines: [],
}
},
},
playInfo: {
type: Object,
default() {
return {
nowPlayTimeStr: '00:00',
maxPlayTimeStr: '00:00',
progress: 0,
nowPlayTime: 0,
status: 0,
}
},
},
list: {
type: Array,
default() {
return []
},
},
listId: {
type: String,
default() {
return ''
},
},
isPlay: {
type: Boolean,
default: false,
},
nextTogglePlayName: String,
},
watch: {
// 'musicInfo.img': {
// handler(n) {
// if (n) {
// this.bgStyle.backgroundImage = `url(${n})`
// }
// },
// immediate: true,
// },
'lyric.lines': {
handler(n, o) {
this.isSetedLines = true
if (o) {
this.$refs.dom_lyric_text.textContent = ''
this.setLyric(n)
this._lyricLines = n
if (n.length) {
this.lyricLines = n
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
this.handleScrollLrc()
})
} else {
if (cancelScrollFn) {
cancelScrollFn()
cancelScrollFn = null
}
cancelScrollFn = scrollTo(this.$refs.dom_lyric, 0, 300, () => {
if (this.lyricLines === this._lyricLines && this._lyricLines.length) return
this.lyricLines = this._lyricLines
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
this.handleScrollLrc()
})
}, 50)
}
} else {
this.lyricLines = n
this.$nextTick(() => {
this.dom_lines = this.$refs.dom_lyric.querySelectorAll('.lrc-content')
this.handleScrollLrc()
})
}
},
immediate: true,
},
'lyric.line': {
handler(n) {
if (n < 0) return
if (n == 0 && this.isSetedLines) return this.isSetedLines = false
this.handleScrollLrc()
},
immediate: true,
},
'playInfo.nowPlayTime'(n, o) {
if (Math.abs(n - o) > 2) this.isActiveTransition = true
},
},
data() {
return {
bgStyle: {
backgroundImage: null,
},
dom_lines: [],
isActiveTransition: false,
pregessWidth: 0,
clickTime: 0,
lyricEvent: {
isMsDown: false,
msDownY: 0,
msDownScrollY: 0,
isStopScroll: false,
timeout: null,
},
_lyricLines: [],
lyricLines: [],
isSetedLines: false,
isShowComment: false,
isShowLrcSelectContent: false,
}
},
mounted() {
this.$nextTick(() => {
this.setProgressWidth()
})
this.listenEvent()
// console.log('object', this.$refs.dom_lyric_text)
this.setLyric(this.lyricLines)
},
beforeDestroy() {
this.unlistenEvent()
this.clearLyricScrollTimeout()
},
computed: {
...mapGetters(['setting']),
},
methods: {
hide() {
this.$emit('update:visible', false)
},
listenEvent() {
document.addEventListener('mousemove', this.handleMouseMsMove)
document.addEventListener('mouseup', this.handleMouseMsUp)
window.addEventListener('resize', this.handleResize)
},
unlistenEvent() {
document.removeEventListener('mousemove', this.handleMouseMsMove)
document.removeEventListener('mouseup', this.handleMouseMsUp)
window.removeEventListener('resize', this.handleResize)
},
setLyric(lines) {
const dom_lines = document.createDocumentFragment()
for (const line of lines) {
dom_lines.appendChild(line.dom_line)
}
this.$refs.dom_lyric_text.appendChild(dom_lines)
},
handleResize() {
this.setProgressWidth()
},
handleScrollLrc() {
if (!this.dom_lines.length) return
if (cancelScrollFn) {
cancelScrollFn()
cancelScrollFn = null
}
if (this.lyricEvent.isStopScroll) return
let dom_p = this.dom_lines[this.lyric.line]
cancelScrollFn = scrollTo(this.$refs.dom_lyric, dom_p ? (dom_p.offsetTop - this.$refs.dom_lyric.clientHeight * 0.38) : 0)
},
handleTransitionEnd() {
this.isActiveTransition = false
},
setProgress(event) {
this.$emit('action', {
type: 'progress',
data: event.offsetX / this.pregessWidth,
})
},
setProgressWidth() {
this.pregessWidth = parseInt(
window.getComputedStyle(this.$refs.dom_progress, null).width,
)
},
handleContextMenu() {
if (window.performance.now() - this.clickTime > 400) {
this.clickTime = window.performance.now()
return
}
this.clickTime = 0
this.hide()
},
handleLyricMouseDown(e) {
// console.log(e)
this.lyricEvent.isMsDown = true
this.lyricEvent.msDownY = e.clientY
this.lyricEvent.msDownScrollY = this.$refs.dom_lyric.scrollTop
},
handleMouseMsUp(e) {
this.lyricEvent.isMsDown = false
},
handleMouseMsMove(e) {
if (this.lyricEvent.isMsDown) {
if (!this.lyricEvent.isStopScroll) this.lyricEvent.isStopScroll = true
if (cancelScrollFn) {
cancelScrollFn()
cancelScrollFn = null
}
this.$refs.dom_lyric.scrollTop = this.lyricEvent.msDownScrollY + this.lyricEvent.msDownY - e.clientY
this.startLyricScrollTimeout()
}
// if (this.volumeEvent.isMsDown) {
// let val = this.volumeEvent.msDownValue + (e.clientX - this.volumeEvent.msDownX) / 70
// this.volume = val < 0 ? 0 : val > 1 ? 1 : val
// if (this.audio) this.audio.volume = this.volume
// }
// console.log(val)
},
startLyricScrollTimeout() {
this.clearLyricScrollTimeout()
this.lyricEvent.timeout = setTimeout(() => {
this.lyricEvent.timeout = null
this.lyricEvent.isStopScroll = false
if (!this.isPlay) return
this.handleScrollLrc()
}, 3000)
},
handleWheel(event) {
console.log(event.deltaY)
if (!this.lyricEvent.isStopScroll) this.lyricEvent.isStopScroll = true
if (cancelScrollFn) {
cancelScrollFn()
cancelScrollFn = null
}
this.$refs.dom_lyric.scrollTop = this.$refs.dom_lyric.scrollTop + event.deltaY
this.startLyricScrollTimeout()
},
clearLyricScrollTimeout() {
if (!this.lyricEvent.timeout) return
clearTimeout(this.lyricEvent.timeout)
this.lyricEvent.timeout = null
},
min() {
window.eventHub.$emit(eventBaseName.min)
},
max() {
window.eventHub.$emit(eventBaseName.max)
},
close() {
window.eventHub.$emit(eventBaseName.close)
},
handleCopySelectText() {
let str = window.getSelection().toString()
str = str.trim()
if (!str.length) return
clipboardWriteText(str)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
@control-btn-width: @height-toolbar * .26;
.container {
position: absolute;
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: @color-theme_2-background_1;
z-index: 10;
// -webkit-app-region: drag;
overflow: hidden;
border-radius: @radius-border;
color: @color-theme_2-font;
border-left: 12px solid @color-theme;
-webkit-app-region: no-drag;
&.controlBtnLeft {
.controBtn {
left: 0;
flex-direction: row-reverse;
height: @height-toolbar * .7;
button + button {
margin-right: @control-btn-width / 2;
}
}
}
&.controlBtnRight {
.controBtn {
right: @control-btn-width * .5;
button + button {
margin-left: @control-btn-width * 1.2;
}
}
}
}
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: 110% 110%;
filter: blur(60px);
z-index: -1;
}
.bg2 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background-color: rgba(255, 255, 255, .8);
}
.header {
position: relative;
flex: 0 0 @height-toolbar;
-webkit-app-region: drag;
}
.controBtn {
position: absolute;
top: 0;
display: flex;
align-items: center;
height: @height-toolbar;
-webkit-app-region: no-drag;
padding: 0 @control-btn-width;
&:hover {
.controBtnIcon {
opacity: 1;
}
}
button {
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
display: flex;
justify-content: center;
align-items: center;
&.hide {
background-color: @color-hideBtn;
}
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
}
}
}
.controBtnIcon {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.main {
flex: auto;
min-height: 0;
overflow: hidden;
display: flex;
margin: 0 30px;
position: relative;
&.showComment {
.left {
flex-basis: 18%;
.description p {
font-size: 12px;
}
}
.right {
flex-basis: 30%;
.lyric {
font-size: 13px;
}
}
.comment {
opacity: 1;
transform: scaleX(1);
}
}
}
.left {
flex: 0 0 40%;
display: flex;
flex-flow: column nowrap;
align-items: center;
padding: 13px;
overflow: hidden;
transition: flex-basis @transition-theme;
}
.info {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
max-width: 300px;
}
.img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
box-shadow: 0 0 4px @color-theme-hover;
border-radius: 6px;
opacity: .8;
// border: 5px solid @color-theme-hover;
// border-radius: @radius-border;
// border: 5px solid #fff;
}
.description {
max-width: 300px;
padding: 15px 0;
overflow: hidden;
p {
line-height: 1.5;
font-size: 14px;
overflow-wrap: break-word;
}
}
.right {
flex: 0 0 60%;
// padding: 0 30px;
position: relative;
transition: flex-basis @transition-theme;
&:before {
position: absolute;
z-index: 1;
top: 0;
left: 0;
content: ' ';
height: 100px;
width: 100%;
background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
pointer-events: none;
}
&:after {
position: absolute;
bottom: 0;
left: 0;
content: ' ';
height: 100px;
width: 100%;
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
pointer-events: none;
}
}
.lyric {
text-align: center;
height: 100%;
overflow: hidden;
font-size: 16px;
cursor: grab;
&.draging {
cursor: grabbing;
}
:global {
.lrc-content {
line-height: 1.2;
margin: 16px 0;
overflow-wrap: break-word;
color: @color-player-detail-lyric;
.translation {
transition: @transition-theme !important;
transition-property: font-size, color;
font-size: .9em;
margin-top: 5px;
}
.line {
transition-property: font-size, color !important;
background: none !important;
-webkit-text-fill-color: unset;
// -webkit-text-fill-color: none !important;
}
&.active {
.line {
color: @color-theme;
}
.translation {
font-size: 1em;
color: @color-theme;
}
span {
// color: @color-theme;
font-size: 1.2em;
}
}
span {
transition: @transition-theme !important;
transition-property: font-size !important;
font-size: 1em;
background-repeat: no-repeat;
background-color: rgba(77, 77, 77, 0.9);
background-image: -webkit-linear-gradient(top, @color-theme, @color-theme);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 0 100%;
}
}
}
// p {
// padding: 8px 0;
// line-height: 1.2;
// overflow-wrap: break-word;
// transition: @transition-theme !important;
// transition-property: color, font-size;
// }
// .lrc-active {
// color: @color-theme;
// font-size: 1.2em;
// }
}
.lyricSelectContent {
position: absolute;
left: 0;
top: 0;
// text-align: center;
height: 100%;
width: 100%;
font-size: 16px;
background-color: @color-theme_2-background_1;
z-index: 10;
color: @color-player-detail-lyric;
.lyricSelectline {
padding: 8px 0;
overflow-wrap: break-word;
transition: @transition-theme !important;
transition-property: color, font-size;
line-height: 1.3;
}
.lyricSelectlineTransition {
font-size: 14px;
}
.lrc-active {
color: @color-theme;
}
}
.lyric-space {
height: 70%;
}
.comment {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
opacity: 1;
margin-left: 10px;
transform: scaleX(0);
}
.footer {
flex: 0 0 100px;
overflow: hidden;
display: flex;
align-items: center;
}
.footerLeft {
flex: auto;
display: flex;
flex-flow: column nowrap;
padding: 13px;
overflow: hidden;
}
.footerLeftControlBtns {
color: @color-theme_2-font;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
}
.footerLeftControlBtn {
width: 18px;
height: 18px;
opacity: .5;
cursor: pointer;
transition: opacity @transition-theme;
&:hover {
opacity: .9;
}
+.footerLeftControlBtn {
margin-left: 6px;
}
&.active {
color: @color-theme;
opacity: .8;
}
}
.progress-container {
width: 100%;
position: relative;
padding: 3px 0;
}
.progress-content {
position: relative;
height: 15px;
padding: 5px 0;
width: 100%;
}
.progress {
height: 100%;
width: 100%;
border-radius: 0.2rem;
// overflow: hidden;
transition: @transition-theme;
transition-property: background-color;
background-color: @color-player-progress;
// background-color: #f5f5f5;
position: relative;
border-radius: @radius-progress-border;
}
.progress-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-origin: 0;
border-top-right-radius: @radius-progress-border;
border-bottom-right-radius: @radius-progress-border;
}
.progress-bar1 {
background-color: @color-player-progress-bar1;
}
.progress-bar2 {
background-color: @color-player-progress-bar2;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.bar-transition {
transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0.2s;
}
.time-label {
width: 100%;
height: 18px;
display: flex;
justify-content: space-between;
span {
font-size: 13px;
}
}
.play-control {
flex: none;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 25px;
color: @color-btn;
}
.play-btn {
height: 40%;
padding: 5px;
cursor: pointer;
flex: none;
// transition: @transition-theme;
// transition-property: color;
color: @color-player-detail-play-btn;
transition: opacity 0.2s ease;
opacity: 1;
cursor: pointer;
+.play-btn {
margin-left: 10px;
}
svg {
fill: currentColor;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}
&:hover {
opacity: 0.8;
}
&:active {
opacity: 0.6;
}
}
each(@themes, {
:global(#container.@{value}) {
.container {
border-left-color: ~'@{color-@{value}-theme}';
background-color: ~'@{color-@{value}-theme_2-background_1}';
// color: ~'@{color-@{value}-theme_2-font}';
}
.right {
&:before {
background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
}
&:after {
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
}
}
.controBtn {
button {
color: ~'@{color-@{value}-theme_2}';
// &.hide:after {
// background-color: ~'@{color-@{value}-hideBtn}';
// }
&.hide {
background-color: ~'@{color-@{value}-hideBtn}';
}
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
.img {
box-shadow: 0 0 4px ~'@{color-@{value}-theme-hover}';
// border-color: ~'@{color-@{value}-theme-hover}';
}
.lyric {
:global {
.lrc-content {
color: ~'@{color-@{value}-player-detail-lyric}';
&.active {
.translation {
color: ~'@{color-@{value}-player-detail-lyric-active}';
}
.line {
color: ~'@{color-@{value}-player-detail-lyric-active}';
}
}
span {
background-color: ~'@{color-@{value}-player-detail-lyric}';
background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-player-detail-lyric-active}', ~'@{color-@{value}-player-detail-lyric-active}');
}
}
}
}
// .lrc-active {
// color: ~'@{color-@{value}-theme}';
// }
.lyricSelectContent {
background-color: ~'@{color-@{value}-theme_2-background_1}';
color: ~'@{color-@{value}-player-detail-lyric}';
.lrc-active {
color: ~'@{color-@{value}-theme}';
}
}
.footerLeftControlBtns {
color: ~'@{color-@{value}-theme_2-font}';
}
.footerLeftControlBtn {
&.active {
color: ~'@{color-@{value}-theme}';
}
}
.progress {
background-color: ~'@{color-@{value}-player-progress}';
}
.progress-bar1 {
background-color: ~'@{color-@{value}-player-progress-bar1}';
}
.progress-bar2 {
background-color: ~'@{color-@{value}-player-progress-bar2}';
}
.play-btn {
color: ~'@{color-@{value}-player-detail-play-btn}';
}
}
})
</style>

159
src/renderer/components/core/SyncModeModal.vue Normal file
View File

@ -0,0 +1,159 @@
<template lang="pug">
material-modal(:show="sync.isShowSyncMode" @close="handleClose(false)" :bgClose="false" :close-btn="false")
main(:class="$style.main")
h2 {{$t('sync__title', { name: sync.deviceName })}}
div.scroll(:class="$style.content")
dl(:class="$style.btnGroup")
dt(:class="$style.label") {{$t('sync__merge_label')}}
dd(:class="$style.btns")
base-btn(:class="$style.btn" @click="handleSelectMode('merge_local_remote')") {{$t('sync__merge_btn_local_remote')}}
base-btn(:class="$style.btn" @click="handleSelectMode('merge_remote_local')") {{$t('sync__merge_btn_remote_local')}}
dl(:class="$style.btnGroup")
dt(:class="$style.label") {{$t('sync__overwrite_label')}}
dd(:class="$style.btns")
base-btn(:class="$style.btn" @click="handleSelectMode('overwrite_local_remote')") {{$t('sync__overwrite_btn_local_remote')}}
base-btn(:class="$style.btn" @click="handleSelectMode('overwrite_remote_local')") {{$t('sync__overwrite_btn_remote_local')}}
dd(style="font-size: 14px; margin-top: 5px;")
base-checkbox(id="sync_mode_modal_isOverwrite" v-model="isOverwrite" :label="$t('sync__overwrite')")
dl(:class="$style.btnGroup")
dt(:class="$style.label") {{$t('sync__other_label')}}
dd(:class="$style.btns")
base-btn(:class="$style.btn" @click="handleSelectMode('none')") {{$t('sync__overwrite_btn_none')}}
base-btn(:class="$style.btn" @click="handleSelectMode('cancel')") {{$t('sync__overwrite_btn_cancel')}}
dl(:class="$style.btnGroup")
dd
section(:class="$style.tipGroup")
h3(:class="$style.title") {{$t('sync__merge_tip')}}
p(:class="$style.tip") {{$t('sync__merge_tip_desc')}}
section(:class="$style.tipGroup")
h3(:class="$style.title") {{$t('sync__overwrite_tip')}}
p(:class="$style.tip") {{$t('sync__overwrite_tip_desc')}}
section(:class="$style.tipGroup")
h3(:class="$style.title") {{$t('sync__other_tip')}}
p(:class="$style.tip") {{$t('sync__other_tip_desc')}}
</template>
<script>
import { sync as eventSyncName } from '@renderer/event/names'
import { sync } from '@renderer/core/share'
export default {
setup() {
return {
sync,
}
},
data() {
return {
isOverwrite: false,
}
},
computed: {
},
methods: {
handleSelectMode(mode) {
if (mode.startsWith('overwrite') && this.isOverwrite) mode += '_full'
window.eventHub.emit(eventSyncName.send_sync_list, {
action: 'selectMode',
data: mode,
})
this.handleClose()
},
handleClose() {
sync.isShowSyncMode = false
},
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.main {
padding: 15px;
max-width: 700px;
min-width: 200px;
min-height: 0;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 16px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
}
}
.content {
flex: auto;
padding: 15px 0 5px;
padding-right: 5px;
.btnGroup + .btnGroup {
margin-top: 10px;
}
.label {
color: @color-theme_2-font-label;
font-size: 14px;
line-height: 2;
}
.desc {
line-height: 1.5;
font-size: 14px;
text-align: justify;
}
.tipGroup {
display: flex;
flex-direction: row;
font-size: 12px;
+ .tipGroup {
margin-top: 5px;
}
.title {
white-space: nowrap;
font-weight: bold;
margin-right: 5px;
}
.tip {
line-height: 1.3;
}
}
}
.btns {
display: flex;
align-items: center;
}
.btn {
display: block;
white-space: nowrap;
+.btn {
margin-left: 15px;
}
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#root.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
.name {
color: ~'@{color-@{value}-theme}';
}
}
})
</style>

242
src/renderer/components/core/Toolbar.vue
View File

@ -1,242 +0,0 @@
<template lang="pug">
div(:class="[$style.toolbar, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]")
//- img(v-if="icon")
//- h1 {{title}}
material-search-input(:class="$style.input"
@event="handleEvent" :list="tipList" :visibleList="visibleList"
v-model="searchText")
div(:class="$style.logo" v-if="setting.controlBtnPosition == 'left'") L X
div(:class="$style.control" v-else)
button(type="button" :class="$style.min" :tips="$t('core.toolbar.min')" @click="min")
svg(:class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-minimize')
//- button(type="button" :class="$style.max" @click="max")
button(type="button" :class="$style.close" :tips="$t('core.toolbar.close')" @click="close")
svg(:class="$style.icon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-close')
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import music from '../../utils/music'
import { debounce } from '../../utils'
import { base as eventBaseName } from '../../event/names'
export default {
data() {
return {
searchText: '',
visibleList: false,
tipList: [],
tipSearch: null,
isFocused: false,
}
},
computed: {
...mapGetters(['route', 'setting']),
...mapGetters('search', {
storeSearchText: 'searchText',
}),
source() {
return this.setting.search.tempSearchSource
},
isAutoClearSearchInput() {
return this.setting.odc.isAutoClearSearchInput
},
isAutoClearSearchList() {
return this.setting.odc.isAutoClearSearchList
},
},
watch: {
route(n) {
if (n.name != 'search') {
if (this.isAutoClearSearchInput && this.searchText) this.searchText = ''
if (this.isAutoClearSearchList) this.clearSearchList()
}
},
storeSearchText(n) {
if (n !== this.searchText) this.searchText = n
},
searchText(n) {
this.handleTipSearch()
},
},
mounted() {
this.tipSearch = debounce(() => {
if (this.searchText === '') {
this.tipList.splice(0, this.tipList.length)
music[this.source].tempSearch.cancelTempSearch()
return
}
music[this.source].tempSearch.search(this.searchText).then(list => {
this.tipList = list
}).catch(() => {})
}, 50)
},
methods: {
...mapMutations('search', {
clearSearchList: 'clearList',
}),
handleEvent({ action, data }) {
switch (action) {
case 'focus':
this.isFocused = true
if (!this.visibleList) this.visibleList = true
if (this.searchText) this.handleTipSearch()
break
case 'blur':
this.isFocused = false
setTimeout(() => {
if (this.visibleList) this.visibleList = false
}, 50)
break
case 'submit':
this.handleSearch()
break
case 'listClick':
this.searchText = this.tipList[data]
this.$nextTick(() => {
this.handleSearch()
})
}
},
handleTipSearch() {
if (!this.visibleList && this.isFocused) this.visibleList = true
this.tipSearch()
},
handleSearch() {
if (this.visibleList) this.visibleList = false
setTimeout(() => {
this.$router.push({
path: 'search',
query: {
text: this.searchText,
},
}).catch(_ => _)
}, 200)
},
min() {
window.eventHub.$emit(eventBaseName.min)
},
max() {
window.eventHub.$emit(eventBaseName.max)
},
close() {
window.eventHub.$emit(eventBaseName.close)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
@control-btn-width: @height-toolbar * .26;
.toolbar {
display: flex;
height: @height-toolbar;
align-items: center;
justify-content: space-between;
padding-left: 15px;
-webkit-app-region: drag;
z-index: 2;
&.controlBtnLeft {
.control {
display: none;
}
}
&.controlBtnRight {
justify-content: space-between;
}
}
.logo {
box-sizing: border-box;
padding: 0 @height-toolbar * .4;
height: @height-toolbar;
color: @color-theme;
flex: none;
text-align: center;
line-height: @height-toolbar;
font-weight: bold;
// -webkit-app-region: no-drag;
}
.control {
display: flex;
align-items: center;
height: 100%;
left: 15px;
-webkit-app-region: no-drag;
padding: 0 @control-btn-width * 1.5;
&:hover {
.icon {
opacity: 1;
}
}
button {
display: flex;
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
+ button {
margin-left: @control-btn-width * 1.2;
}
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
}
}
}
.icon {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
each(@themes, {
:global(#container.@{value}) {
.control {
button {
color: ~'@{color-@{value}-theme_2}';
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
.logo {
color: ~'@{color-@{value}-theme}';
}
}
})
</style>

108
src/renderer/components/core/Toolbar/ControlBtns.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div :class="$style.control">
<button type="button" :class="[$style.btn, $style.min]" :tips="$t('min')" @click="min">
<svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-window-minimize"></use>
</svg>
</button>
<button type="button" :class="[$style.btn, $style.close]" :tips="$t('close')" @click="close">
<svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-window-close"></use>
</svg>
</button>
</div>
</template>
<script>
import { base as eventBaseName } from '@renderer/event/names'
// import { getRandom } from '../../utils'
export default {
setup() {
return {
min() {
window.eventHub.emit(eventBaseName.min)
},
max() {
window.eventHub.emit(eventBaseName.max)
},
close() {
window.eventHub.emit(eventBaseName.close)
},
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
@control-btn-width: @height-toolbar * .26;
.control {
display: flex;
align-items: center;
height: 100%;
left: 15px;
-webkit-app-region: no-drag;
padding: 0 @control-btn-width * 1.5;
&:hover {
.controlBtniIcon {
opacity: 1;
}
}
.btn {
display: flex;
position: relative;
width: @control-btn-width;
height: @control-btn-width;
background: none;
border: none;
outline: none;
padding: 1px;
cursor: pointer;
border-radius: 50%;
color: @color-theme_2;
+ .btn {
margin-left: @control-btn-width * 1.2;
}
&.min {
background-color: @color-minBtn;
}
&.max {
background-color: @color-maxBtn;
}
&.close {
background-color: @color-closeBtn;
}
}
}
.controlBtniIcon {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
each(@themes, {
:global(#root.@{value}) {
.btn {
color: ~'@{color-@{value}-theme_2}';
&.min {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close {
background-color: ~'@{color-@{value}-closeBtn}';
}
}
}
})
</style>

109
src/renderer/components/core/Toolbar/SearchInput.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<material-search-input @event="handleEvent" :list="tipList" :visibleList="visibleList" v-model="searchText" />
</template>
<script>
import music from '@renderer/utils/music'
import { debounce } from '@renderer/utils'
import {
ref,
useRoute,
useGetter,
watch,
useRefGetter,
useRouter,
nextTick,
useCommit,
} from '@renderer/utils/vueTools'
export default {
setup() {
const searchText = ref('')
const visibleList = ref(false)
const tipList = ref([])
let isFocused = false
const route = useRoute()
const router = useRouter()
const setting = useGetter('setting')
const clearSearchList = useCommit('search', 'clearList')
watch(() => route.name, (newValue, oldValue) => {
if (newValue.name != 'search') {
if (setting.odc.isAutoClearSearchInput && searchText.value) searchText.value = ''
if (setting.odc.isAutoClearSearchList) clearSearchList()
}
})
const storeSearchText = useRefGetter('search', 'searchText')
watch(storeSearchText, (newValue, oldValue) => {
searchText.value = newValue
if (newValue !== searchText.value) searchText.value = newValue
})
watch(searchText, () => {
handleTipSearch()
})
const tipSearch = debounce(() => {
if (searchText.value === '') {
tipList.value = []
music[setting.search.tempSearchSource].tempSearch.cancelTempSearch()
return
}
music[setting.search.tempSearchSource].tempSearch.search(searchText.value).then(list => {
tipList.value = list
}).catch(() => {})
}, 50)
const handleTipSearch = () => {
if (!visibleList.value && isFocused) visibleList.value = true
tipSearch()
}
const handleSearch = () => {
if (visibleList.value) visibleList.value = false
setTimeout(() => {
router.push({
path: 'search',
query: {
text: searchText.value,
},
}).catch(_ => _)
}, 200)
}
const handleEvent = ({ action, data }) => {
switch (action) {
case 'focus':
isFocused = true
if (!visibleList.value) visibleList.value = true
if (searchText.value) handleTipSearch()
break
case 'blur':
isFocused = false
setTimeout(() => {
if (visibleList.value) visibleList.value = false
}, 50)
break
case 'submit':
handleSearch()
break
case 'listClick':
searchText.value = tipList[data]
nextTick(handleSearch)
}
}
return {
searchText,
visibleList,
tipList,
handleEvent,
}
},
}
</script>

65
src/renderer/components/core/Toolbar/index.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div :class="[$style.toolbar, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]">
<SearchInput />
<div :class="$style.logo" v-if="setting.controlBtnPosition == 'left'">L X</div>
<ControlBtns v-else />
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import ControlBtns from './ControlBtns'
import SearchInput from './SearchInput'
export default {
components: { SearchInput, ControlBtns },
computed: {
...mapGetters(['setting']),
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.toolbar {
display: flex;
height: @height-toolbar;
align-items: center;
justify-content: space-between;
padding-left: 15px;
-webkit-app-region: drag;
z-index: 2;
&.controlBtnLeft {
.control {
display: none;
}
}
&.controlBtnRight {
justify-content: space-between;
}
}
.logo {
box-sizing: border-box;
padding: 0 @height-toolbar * .4;
height: @height-toolbar;
color: @color-theme;
flex: none;
text-align: center;
line-height: @height-toolbar;
font-weight: bold;
// -webkit-app-region: no-drag;
}
each(@themes, {
:global(#root.@{value}) {
.logo {
color: ~'@{color-@{value}-theme}';
}
}
})
</style>

80
src/renderer/components/material/VersionModal.vue → src/renderer/components/core/VersionModal.vue
View File

@ -1,14 +1,14 @@
<template lang="pug">
material-modal(:show="version.showModal" @close="handleClose" v-if="version.newVersion")
main(:class="$style.main" v-if="version.isDownloaded")
material-modal(:show="versionInfo.showModal" @close="handleClose")
main(:class="$style.main" v-if="versionInfo.isDownloaded")
h2 🚀程序更新🚀
div.scroll.select(:class="$style.info")
div(:class="$style.current")
h3 最新版本：{{version.newVersion.version}}
h3 当前版本：{{version.version}}
h3 最新版本：{{versionInfo.newVersion?.version}}
h3 当前版本：{{versionInfo.version}}
h3 版本变化：
pre(:class="$style.desc" v-text="version.newVersion.desc")
pre(:class="$style.desc" v-text="versionInfo.newVersion?.desc")
div(:class="[$style.history, $style.desc]" v-if="history.length")
h3 历史版本：
div(:class="$style.item" v-for="ver in history")
@ -23,16 +23,16 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
| 或稍后
strong 关闭程序时
| 自动更新~
material-btn(:class="$style.btn" @click.onec="handleRestartClick") 立即重启更新
main(:class="$style.main" v-else-if="version.isError && !version.isUnknow && version.newVersion.version != version.version")
base-btn(:class="$style.btn" @click.onec="handleRestartClick") 立即重启更新
main(:class="$style.main" v-else-if="versionInfo.isError && !versionInfo.isUnknow && versionInfo.newVersion?.version != versionInfo.version")
h2 ❌ 版本更新出错 ❌
div.scroll.select(:class="$style.info")
div(:class="$style.current")
h3 最新版本：{{version.newVersion.version}}
h3 当前版本：{{version.version}}
h3 最新版本：{{versionInfo.newVersion?.version}}
h3 当前版本：{{versionInfo.version}}
h3 版本变化：
pre(:class="$style.desc" v-text="version.newVersion.desc")
pre(:class="$style.desc" v-text="versionInfo.newVersion?.desc")
div(:class="[$style.history, $style.desc]" v-if="history.length")
h3 历史版本：
div(:class="$style.item" v-for="ver in history")
@ -54,16 +54,16 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
| 国内Windows/MAC用户推荐到
strong 网盘
| 下载。
material-btn(:class="$style.btn" @click.onec="handleIgnoreClick") {{ isIgnored ? '恢复当前版本的更新失败提醒' : '忽略当前版本的更新失败提醒'}}
main(:class="$style.main" v-else-if="version.isDownloading && version.isTimeOut && !version.isUnknow")
base-btn(:class="$style.btn" @click.onec="handleIgnoreClick") {{ isIgnored ? '恢复当前版本的更新失败提醒' : '忽略当前版本的更新失败提醒'}}
main(:class="$style.main" v-else-if="versionInfo.isDownloading && versionInfo.isTimeOut && !versionInfo.isUnknow")
h2 ❗️ 新版本下载超时 ❗️
div(:class="$style.desc")
p 你当前所在网络访问GitHub较慢，导致新版本下载超时（已经下了半个钟了😳），你仍可选择继续等，但墙裂建议手动更新版本！
p
| 你可以去
material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
base-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
| 或
material-btn(min @click="handleOpenUrl('https://www.lanzoui.com/b0bf2cfa/')" tips="点击打开") 网盘
base-btn(min @click="handleOpenUrl('https://www.lanzoui.com/b0bf2cfa/')" tips="点击打开") 网盘
| (密码：
strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
| )下载新版本，
@ -72,34 +72,34 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
strong 网盘
| 下载。
p 当前下载进度：{{progress}}
main(:class="$style.main" v-else-if="version.isUnknow")
main(:class="$style.main" v-else-if="versionInfo.isUnknow")
h2 ❓ 获取最新版本信息失败 ❓
div.scroll.select(:class="$style.info")
div(:class="$style.current")
h3 当前版本：{{version.version}}
h3 当前版本：{{versionInfo.version}}
div(:class="$style.desc")
p 更新信息获取失败，可能是无法访问Github导致的，请手动检查更新！
p
| 检查方法：打开
material-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
base-btn(min @click="handleOpenUrl('https://github.com/lyswhut/lx-music-desktop/releases')" tips="点击打开") 软件发布页
| 或
material-btn(min @click="handleOpenUrl('https://www.lanzoui.com/b0bf2cfa/')" tips="点击打开") 网盘
base-btn(min @click="handleOpenUrl('https://www.lanzoui.com/b0bf2cfa/')" tips="点击打开") 网盘
| (密码：
strong.hover(@click="handleCopy('glqw')" tips="点击复制") glqw
| )查看它们的
strong 版本号
| 与当前版本({{version.version}})对比是否一样，
| 与当前版本({{versionInfo.version}})对比是否一样，
p 若一样则不必理会该弹窗，直接关闭即可，否则请手动下载新版本更新。
main(:class="$style.main" v-else)
h2 🌟发现新版本🌟
div.scroll.select(:class="$style.info")
div(:class="$style.current")
h3 最新版本：{{version.newVersion.version}}
h3 当前版本：{{version.version}}
h3 最新版本：{{versionInfo.newVersion?.version}}
h3 当前版本：{{versionInfo.version}}
h3 版本变化：
pre(:class="$style.desc" v-text="version.newVersion.desc")
pre(:class="$style.desc" v-text="versionInfo.newVersion?.desc")
div(:class="[$style.history, $style.desc]" v-if="history.length")
h3 历史版本：
div(:class="$style.item" v-for="ver in history")
@ -127,37 +127,41 @@ material-modal(:show="version.showModal" @close="handleClose" v-if="version.newV
<script>
import { mapGetters, mapMutations } from 'vuex'
import { rendererSend, NAMES } from '../../../common/ipc'
import { compareVer, openUrl, clipboardWriteText, sizeFormate } from '../../utils'
import { rendererSend, NAMES } from '@common/ipc'
import { compareVer, openUrl, clipboardWriteText, sizeFormate } from '@renderer/utils'
import { versionInfo } from '@renderer/core/share'
export default {
setup() {
return {
versionInfo,
}
},
computed: {
...mapGetters(['version', 'setting']),
...mapGetters(['setting']),
history() {
if (!this.version.newVersion || !this.version.newVersion.history) return []
if (!this.versionInfo.newVersion || !this.versionInfo.newVersion?.history) return []
let arr = []
let currentVer = this.version.version
this.version.newVersion.history.forEach(ver => {
let currentVer = this.versionInfo.version
this.versionInfo.newVersion?.history.forEach(ver => {
if (compareVer(currentVer, ver.version) < 0) arr.push(ver)
})
return arr
},
progress() {
return this.version.downloadProgress
? `${this.version.downloadProgress.percent.toFixed(2)}% - ${sizeFormate(this.version.downloadProgress.transferred)}/${sizeFormate(this.version.downloadProgress.total)} - ${sizeFormate(this.version.downloadProgress.bytesPerSecond)}/s`
return this.versionInfo.downloadProgress
? `${this.versionInfo.downloadProgress.percent.toFixed(2)}% - ${sizeFormate(this.versionInfo.downloadProgress.transferred)}/${sizeFormate(this.versionInfo.downloadProgress.total)} - ${sizeFormate(this.versionInfo.downloadProgress.bytesPerSecond)}/s`
: '处理更新中...'
},
isIgnored() {
return this.setting.ignoreVersion == this.version.newVersion.version
return this.setting.ignoreVersion == this.versionInfo.newVersion?.version
},
},
methods: {
...mapMutations(['setVersionModalVisible', 'setIgnoreVersion']),
...mapMutations(['setIgnoreVersion']),
handleClose() {
this.setVersionModalVisible({
isShow: false,
})
versionInfo.showModal = false
},
handleOpenUrl(url) {
openUrl(url)
@ -171,7 +175,7 @@ export default {
clipboardWriteText(text)
},
handleIgnoreClick() {
this.setIgnoreVersion(this.isIgnored ? null : this.version.newVersion.version)
this.setIgnoreVersion(this.isIgnored ? null : this.versionInfo.newVersion?.version)
this.handleClose()
},
},
@ -180,7 +184,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.main {
position: relative;
@ -289,7 +293,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';

32
src/renderer/components/core/View.vue
View File

@ -1,15 +1,31 @@
<template lang="pug">
div(:class="$style.view")
transition(enter-active-class="animated-fast fadeIn"
leave-active-class="animated-fast fadeOut")
router-view
//- core-title-bar
//- router-view
<template>
<div :class="$style.view">
<router-view v-slot="{ Component }" v-if="mounted">
<transition enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut">
<component :is="Component" />
</transition>
</router-view>
</div>
</template>
<script>
import { ref, onMounted } from '@renderer/utils/vueTools'
export default {
setup() {
const mounted = ref(false)
onMounted(() => {
mounted.value = true
})
return {
mounted,
}
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.view {
position: relative;

24
src/renderer/components/index.js
View File

@ -1,13 +1,25 @@
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context('./', true, /\.vue$/)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const vueFileRxp = /\.vue$/
const componentName = upperFirst(camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')))
export default app => {
requireComponent.keys().forEach(fileName => {
const filePath = fileName.replace(/^\.\//, '')
Vue.component(componentName, componentConfig.default || componentConfig)
})
if (!filePath.split('/').every((path, index, arr) => {
const char = path.charAt(0)
return vueFileRxp.test(path) || char.toUpperCase() !== char || arr[index + 1] == 'index.vue'
})) return
const componentConfig = requireComponent(fileName)
let componentName = upperFirst(camelCase(filePath.replace(/\.\w+$/, '')))
if (componentName.endsWith('Index')) componentName = componentName.replace(/Index$/, '')
app.component(componentName, componentConfig.default || componentConfig)
})
}

101
src/renderer/components/material/DownloadModal.vue
View File

@ -1,101 +0,0 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2
| {{ info.name }}
br
| {{ info.singer }}
material-btn(:class="$style.btn" v-if="checkSource(type.type)" :tips="!checkSource(type.type) && $t('material.download_modal.btn_tip')" :disabled="!checkSource(type.type)" :key="type.type" @click="handleClick(type.type)" v-for="type in info.types") {{getTypeName(type.type)}} {{ type.type.toUpperCase() }}{{ type.size && ` - ${type.size.toUpperCase()}` }}
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false,
},
musicInfo: {
type: Object,
},
bgClose: {
type: Boolean,
default: true,
},
},
computed: {
info() {
return this.musicInfo || {}
},
qualityList() {
return window.globalObj.qualityList[this.musicInfo.source] || []
},
},
methods: {
handleClick(type) {
this.$emit('select', type)
},
handleClose() {
this.$emit('close')
},
getTypeName(type) {
switch (type) {
case 'flac':
case 'ape':
case 'wav':
return this.$t('material.download_modal.lossless')
case '320k':
return this.$t('material.download_modal.high_quality')
case '192k':
case '128k':
return this.$t('material.download_modal.normal')
}
},
checkSource(type) {
return this.qualityList.includes(type)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
}
}
.btn {
display: block;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#container.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
}
})
</style>

82
src/renderer/components/material/DownloadMultipleModal.vue
View File

@ -1,82 +0,0 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2
| {{$t('material.download_multiple_modal.tip', { len: list.length })}}
br
| {{$t('material.download_multiple_modal.tip2')}}
material-btn(:class="$style.btn" @click="handleClick('128k')") {{$t('material.download_multiple_modal.normal')}} - 128K
material-btn(:class="$style.btn" @click="handleClick('320k')") {{$t('material.download_multiple_modal.high_quality')}} - 320K
//- material-btn(:class="$style.btn" @click="handleClick('ape')") 无损音质 - APE
material-btn(:class="$style.btn" @click="handleClick('flac')") {{$t('material.download_multiple_modal.lossless')}} - FLAC/WAV
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false,
},
bgClose: {
type: Boolean,
default: true,
},
list: {
type: Array,
default() {
return []
},
},
},
methods: {
handleClick(type) {
this.$emit('select', type)
},
handleClose() {
this.$emit('close')
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
}
}
.btn {
display: block;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#container.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
}
})
</style>

22
src/renderer/components/material/ListButtons.vue
View File

@ -1,30 +1,30 @@
<template lang="pug">
div(:class="$style.btns")
button(type="button" v-if="playBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.play')" @click.stop="handleClick('play')")
button(type="button" v-if="playBtn" @contextmenu.capture.stop :tips="$t('list__play')" @click.stop="handleClick('play')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve' v-once)
use(xlink:href='#icon-testPlay')
button(type="button" v-if="listAddBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.add_to')" @click.stop="handleClick('listAdd')")
button(type="button" v-if="listAddBtn" @contextmenu.capture.stop :tips="$t('list__add_to')" @click.stop="handleClick('listAdd')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve' v-once)
use(xlink:href='#icon-addTo')
button(type="button" v-if="downloadBtn && setting.download.enable" @contextmenu.capture.stop :tips="$t('material.list_buttons.download')" @click.stop="handleClick('download')")
button(type="button" v-if="downloadBtn && setting.download.enable" @contextmenu.capture.stop :tips="$t('list__download')" @click.stop="handleClick('download')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve' v-once)
use(xlink:href='#icon-download')
//- button(type="button" :tips="$t('material.list_buttons.add')" v-if="userInfo" @click.stop="handleClick('add')")
//- button(type="button" :tips="$t('list__add')" v-if="userInfo" @click.stop="handleClick('add')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
button(type="button" v-if="startBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.start')" @click.stop="handleClick('start')")
button(type="button" v-if="startBtn" @contextmenu.capture.stop :tips="$t('list__start')" @click.stop="handleClick('start')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 170 170' space='preserve' v-once)
use(xlink:href='#icon-play')
button(type="button" v-if="pauseBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.pause')" @click.stop="handleClick('pause')")
button(type="button" v-if="pauseBtn" @contextmenu.capture.stop :tips="$t('list__pause')" @click.stop="handleClick('pause')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 277.338 277.338' space='preserve' v-once)
use(xlink:href='#icon-pause')
button(type="button" v-if="fileBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.file')" @click.stop="handleClick('file')")
button(type="button" v-if="fileBtn" @contextmenu.capture.stop :tips="$t('list__file')" @click.stop="handleClick('file')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='-61 0 512 512' space='preserve' v-once)
use(xlink:href='#icon-musicFile')
button(type="button" v-if="searchBtn" @contextmenu.capture.stop :tips="$t('material.list_buttons.search')" @click.stop="handleClick('search')")
button(type="button" v-if="searchBtn" @contextmenu.capture.stop :tips="$t('list__search')" @click.stop="handleClick('search')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve' v-once)
use(xlink:href='#icon-search')
button(type="button" v-if="removeBtn" :tips="$t('material.list_buttons.remove')" @click.stop="handleClick('remove')")
button(type="button" v-if="removeBtn" :tips="$t('list__remove')" @click.stop="handleClick('remove')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve' v-once)
use(xlink:href='#icon-delete')
@ -85,7 +85,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.btns {
line-height: 1;
@ -119,7 +119,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.btns {
button {
color: ~'@{color-@{value}-btn}';

74
src/renderer/components/material/Modal.vue
View File

@ -1,22 +1,20 @@
<template lang="pug">
transition(enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut")
div(:class="$style.modal" v-show="show" @click="bgClose && close()")
transition(:enter-active-class="inClass"
:leave-active-class="outClass"
@after-leave="$emit('after-leave', $event)"
)
div(:class="$style.content" v-show="show" @click.stop)
header(:class="$style.header")
button(type="button" @click="close" v-if="closeBtn")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
use(xlink:href='#icon-delete')
slot
div(:class="$style.container" v-if="showModal")
transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
div(:class="$style.modal" v-show="showContent" @click="bgClose && close()")
transition(:enter-active-class="inClass" :leave-active-class="outClass" @after-enter="$emit('after-enter', $event)" @after-leave="handleAfterLeave")
div(:class="$style.content" v-show="showContent" @click.stop)
header(:class="$style.header")
button(type="button" @click="close" v-if="closeBtn")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 212.982 212.982' space='preserve')
use(xlink:href='#icon-delete')
slot
</template>
<script>
import { getRandom } from '../../utils'
import { getRandom } from '@renderer/utils'
import { mapGetters } from 'vuex'
import { nextTick } from '@renderer/utils/vueTools'
export default {
props: {
show: {
@ -32,6 +30,7 @@ export default {
default: false,
},
},
emits: ['after-enter', 'after-leave', 'close'],
data() {
return {
animateIn: [
@ -81,6 +80,8 @@ export default {
inClass: 'animated jackInTheBox',
outClass: 'animated flipOutX',
unwatchFn: null,
showModal: false,
showContent: false,
}
},
computed: {
@ -90,17 +91,41 @@ export default {
'setting.randomAnimate'(n) {
n ? this.createWatch() : this.removeWatch()
},
show: {
handler(val) {
if (val) {
this.showModal = true
nextTick(() => {
this.showContent = true
})
} else {
this.showContent = false
}
},
immediate: true,
},
},
mounted() {
if (this.setting.randomAnimate) this.createWatch()
},
beforeDestroy() {
beforeUnmount() {
this.removeWatch()
},
methods: {
check(isShow) {
if (isShow) {
this.showModal = true
nextTick(() => {
this.showContent = true
})
} else {
this.showContent = false
}
},
createWatch() {
this.removeWatch()
this.unwatchFn = this.$watch('show', function(n) {
if (!n) return
this.inClass = 'animated ' + this.animateIn[getRandom(0, this.animateIn.length)]
this.outClass = 'animated ' + this.animateOut[getRandom(0, this.animateOut.length)]
})
@ -115,29 +140,39 @@ export default {
close() {
this.$emit('close')
},
handleAfterLeave(event) {
this.$emit('after-leave', event)
this.showModal = false
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.modal {
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
display: grid;
align-items: center;
justify-items: center;
z-index: 99;
// will-change: transform;
}
.content {
position: relative;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
overflow: hidden;
@ -147,6 +182,7 @@ export default {
position: relative;
display: flex;
flex-flow: column nowrap;
z-index: 100;
> * {
background-color: @color-theme_2-background_2;
@ -185,7 +221,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.modal {
background-color: rgba(0, 0, 0, .3);
}

338
src/renderer/components/material/OnlineList/index.vue Normal file
View File

@ -0,0 +1,338 @@
<template lang="pug">
div(:class="$style.songList")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.list")
div.thead(:class="$style.thead")
table
thead
tr
th.nobreak.center(:class="$style.th" :style="{ width: rowWidth.r1 }") #
th.nobreak(:class="$style.th" :style="{ width: rowWidth.r2 }") {{$t('music_name')}}
th.nobreak(:class="$style.th" :style="{ width: rowWidth.r3 }") {{$t('music_singer')}}
th.nobreak(:class="$style.th" :style="{ width: rowWidth.r4 }") {{$t('music_album')}}
th.nobreak(:class="$style.th" :style="{ width: rowWidth.r5 }") {{$t('music_time')}}
th.nobreak(:class="$style.th" :style="{ width: rowWidth.r6 }") {{$t('action')}}
div(:class="$style.content")
div(v-show="list.length" :class="$style.content" ref="dom_listContent")
base-virtualized-list(:list="list" key-name="songmid" ref="listRef" :item-height="listItemHeight"
containerClass="scroll" contentClass="list" @contextmenu.capture="handleListRightClick")
template(#default="{ item, index }")
div.list-item(@click="handleListItemClick($event, index)" @contextmenu="handleListItemRightClick($event, index)"
:class="[{ selected: rightClickSelectedIndex == index }, { active: selectedList.includes(item) }]")
div.list-item-cell.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
div.list-item-cell.auto(:style="{ width: rowWidth.r2 }" :tips="item.name + ((item._types.ape || item._types.flac || item._types.wav) ? ` - ${$t('tag__lossless')}` : item._types['320k'] ? ` - ${$t('tag__high_quality')}` : '')")
span.select {{item.name}}
span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('tag__lossless')}}
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('tag__high_quality')}}
div.list-item-cell(:style="{ width: rowWidth.r3 }" :tips="item.singer")
span.select {{item.singer}}
div.list-item-cell(:style="{ width: rowWidth.r4 }" :tips="item.albumName")
span.select {{item.albumName}}
div.list-item-cell(:style="{ width: rowWidth.r5 }")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
div.list-item-cell(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :class="$style.btns"
:remove-btn="false" @btn-click="handleListBtnClick"
:download-btn="assertApiSupport(item.source)")
template(#footer)
div(:class="$style.pagination")
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="$emit('togglePage', $event)")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(v-show="!list.length" :class="$style.noitem")
p(v-html="noItem")
//- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
teleport(to="#view")
common-download-modal(v-model:show="isShowDownload" :musicInfo="selectedDownloadMusicInfo")
common-download-multiple-modal(v-model:show="isShowDownloadMultiple" :list="selectedList" @confirm="removeAllSelect")
common-list-add-modal(v-model:show="isShowListAdd" :musicInfo="selectedAddMusicInfo")
common-list-add-multiple-modal(v-model:show="isShowListAddMultiple" :musicList="selectedList" @confirm="removeAllSelect")
base-menu(:menus="menus" :location="menuLocation" item-name="name" :isShow="isShowItemMenu" @menu-click="handleMenuClick")
</template>
<script>
import { clipboardWriteText, assertApiSupport } from '@renderer/utils'
import { ref, useCssModule } from '@renderer/utils/vueTools'
import useList from './useList'
import useMenu from './useMenu'
import usePlay from './usePlay'
import useMusicDownload from './useMusicDownload'
import useMusicAdd from './useMusicAdd'
import useMusicActions from './useMusicActions'
export default {
name: 'MaterialOnlineList',
props: {
list: {
type: Array,
default() {
return []
},
},
page: {
type: Number,
required: true,
},
limit: {
type: Number,
required: true,
},
total: {
type: Number,
required: true,
},
rowWidth: {
type: Object,
default() {
return {
r1: '5%',
r2: 'auto',
r3: '22%',
r4: '22%',
r5: '8%',
r6: '13%',
}
},
},
noItem: {
type: String,
},
},
emits: ['show-menu', 'togglePage'],
setup(props, { emit }) {
const rightClickSelectedIndex = ref(-1)
const dom_listContent = ref(null)
const listRef = ref(null)
const styles = useCssModule()
const {
selectedList,
listItemHeight,
handleSelectData,
removeAllSelect,
} = useList({ props, emit })
const {
handlePlayMusic,
handlePlayMusicLater,
doubleClickPlay,
} = usePlay({ selectedList, props, removeAllSelect })
const {
isShowListAdd,
isShowListAddMultiple,
selectedAddMusicInfo,
handleShowMusicAddModal,
} = useMusicAdd({ selectedList, props })
const {
isShowDownload,
isShowDownloadMultiple,
selectedDownloadMusicInfo,
handleShowDownloadModal,
} = useMusicDownload({ selectedList, props })
const {
handleSearch,
handleOpenMusicDetail,
} = useMusicActions({ props })
const {
menus,
menuLocation,
isShowItemMenu,
showMenu,
hideMenu,
menuClick,
} = useMenu({
listRef,
assertApiSupport,
emit,
handleShowDownloadModal,
handlePlayMusic,
handlePlayMusicLater,
handleSearch,
handleShowMusicAddModal,
handleOpenMusicDetail,
})
const handleListItemClick = (event, index) => {
if (rightClickSelectedIndex.value > -1) return
handleSelectData(index)
doubleClickPlay(index)
}
const handleListItemRightClick = (event, index) => {
rightClickSelectedIndex.value = index
showMenu(event, props.list[index], index)
}
const handleMenuClick = (action) => {
let index = rightClickSelectedIndex.value
rightClickSelectedIndex.value = -1
menuClick(action, index)
}
const handleListRightClick = (event) => {
if (!event.target.classList.contains('select')) return
event.stopImmediatePropagation()
let classList = dom_listContent.value.classList
classList.add(styles.copying)
window.requestAnimationFrame(() => {
let str = window.getSelection().toString()
classList.remove(styles.copying)
str = str.split(/\n\n/).map(s => s.replace(/\n/g, ' ')).join('\n').trim()
if (!str.length) return
clipboardWriteText(str)
})
}
const handleListBtnClick = ({ action, index }) => {
switch (action) {
case 'download':
handleShowDownloadModal(index, true)
break
case 'play':
handlePlayMusic(index, true)
break
case 'search':
handleSearch(index)
break
case 'listAdd':
handleShowMusicAddModal(index, true)
break
}
}
const scrollToTop = () => {
listRef.value.scrollTo(0, true)
}
return {
listItemHeight,
handleListItemClick,
selectedList,
handleListItemRightClick,
removeAllSelect,
handleListBtnClick,
rightClickSelectedIndex,
dom_listContent,
listRef,
menus,
isShowItemMenu,
menuLocation,
handleMenuClick,
hideMenu,
handleListRightClick,
assertApiSupport,
isShowListAdd,
isShowListAddMultiple,
selectedAddMusicInfo,
isShowDownload,
isShowDownloadMultiple,
selectedDownloadMusicInfo,
scrollToTop,
}
},
}
</script>
<style lang="less" module>
@import '@renderer/assets/styles/layout.less';
.song-list {
overflow: hidden;
height: 100%;
display: flex;
flex-flow: column nowrap;
position: relative;
}
.list {
position: relative;
font-size: 14px;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
height: 100%;
}
.thead {
flex: none;
}
.th:first-child {
color: @color-theme_2-font-label;
// padding-left: 10px;
}
.content {
flex: auto;
min-height: 0;
position: relative;
height: 100%;
&.copying {
.no-select {
display: none;
}
}
}
:global(.list) {
height: 100%;
overflow-y: auto;
:global(.list-item-cell) {
font-size: 12px !important;
:global(.badge) {
margin-left: 3px;
}
&:first-child {
// padding-left: 10px;
font-size: 11px !important;
color: @color-theme_2-font-label !important;
}
}
:global(.badge) {
opacity: .85;
}
}
.pagination {
text-align: center;
padding: 15px 0;
// left: 50%;
// transform: translateX(-50%);
}
.noitem {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
p {
font-size: 24px;
color: @color-theme_2-font-label;
}
}
each(@themes, {
:global(#root.@{value}) {
.th:first-child {
color: ~'@{color-@{value}-theme_2-font-label}';
}
:global(.list) {
:global(.list-item-cell) {
&:first-child {
color: ~'@{color-@{value}-theme_2-font-label}' !important;
}
}
}
.noitem {
p {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
}
})
</style>

105
src/renderer/components/material/OnlineList/useList.js Normal file
View File

@ -0,0 +1,105 @@
import { computed, useRefGetter, watch, ref, onBeforeUnmount } from '@renderer/utils/vueTools'
import { windowSizeList } from '@common/config'
const useKeyEvent = ({ handleSelectAllData }) => {
const keyEvent = {
isShiftDown: false,
isModDown: false,
}
const handle_key_shift_down = () => {
if (!keyEvent.isShiftDown) keyEvent.isShiftDown = true
}
const handle_key_shift_up = () => {
if (keyEvent.isShiftDown) keyEvent.isShiftDown = false
}
const handle_key_mod_down = () => {
if (!keyEvent.isModDown) keyEvent.isModDown = true
}
const handle_key_mod_up = () => {
if (keyEvent.isModDown) keyEvent.isModDown = false
}
const handle_key_mod_a_down = ({ event }) => {
if (event.target.tagName == 'INPUT') return
event.preventDefault()
if (event.repeat) return
keyEvent.isModDown = false
handleSelectAllData()
}
onBeforeUnmount(() => {
window.eventHub.off('key_shift_down', handle_key_shift_down)
window.eventHub.off('key_shift_up', handle_key_shift_up)
window.eventHub.off('key_mod_down', handle_key_mod_down)
window.eventHub.off('key_mod_up', handle_key_mod_up)
window.eventHub.off('key_mod+a_down', handle_key_mod_a_down)
})
window.eventHub.on('key_shift_down', handle_key_shift_down)
window.eventHub.on('key_shift_up', handle_key_shift_up)
window.eventHub.on('key_mod_down', handle_key_mod_down)
window.eventHub.on('key_mod_up', handle_key_mod_up)
window.eventHub.on('key_mod+a_down', handle_key_mod_a_down)
return keyEvent
}
export default ({ props }) => {
const selectedList = ref([])
const setting = useRefGetter('setting')
let lastSelectIndex = -1
const listItemHeight = computed(() => {
return parseInt(windowSizeList.find(item => item.id == setting.value.windowSizeId).fontSize) / 16 * 37
})
const removeAllSelect = () => {
selectedList.value = []
}
const handleSelectAllData = () => {
removeAllSelect()
selectedList.value = [...props.list]
}
const keyEvent = useKeyEvent({ handleSelectAllData })
const handleSelectData = clickIndex => {
if (keyEvent.isShiftDown) {
if (selectedList.value.length) {
removeAllSelect()
if (lastSelectIndex != clickIndex) {
let isNeedReverse = false
if (clickIndex < lastSelectIndex) {
let temp = lastSelectIndex
lastSelectIndex = clickIndex
clickIndex = temp
isNeedReverse = true
}
selectedList.value = props.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) selectedList.value.reverse()
}
} else {
selectedList.value.push(props.list[clickIndex])
lastSelectIndex = clickIndex
}
} else if (keyEvent.isModDown) {
lastSelectIndex = clickIndex
let item = props.list[clickIndex]
let index = selectedList.value.indexOf(item)
if (index < 0) {
selectedList.value.push(item)
} else {
selectedList.value.splice(index, 1)
}
} else if (selectedList.value.length) {
removeAllSelect()
}
}
watch(() => props.list, removeAllSelect)
return {
selectedList,
listItemHeight,
removeAllSelect,
handleSelectData,
}
}

124
src/renderer/components/material/OnlineList/useMenu.js Normal file
View File

@ -0,0 +1,124 @@
import { computed, ref, useI18n, useCssModule, nextTick } from '@renderer/utils/vueTools'
import musicSdk from '@renderer/utils/music'
export default ({
listRef,
assertApiSupport,
emit,
handleShowDownloadModal,
handlePlayMusic,
handlePlayMusicLater,
handleSearch,
handleShowMusicAddModal,
handleOpenMusicDetail,
}) => {
const itemMenuControl = ref({
play: true,
addTo: true,
playLater: true,
download: true,
search: true,
sourceDetail: true,
})
const { t } = useI18n()
const styles = useCssModule()
const menuLocation = ref({ x: 0, y: 0 })
const isShowItemMenu = ref(false)
const menus = computed(() => {
return [
{
name: t('list__play'),
action: 'play',
disabled: !itemMenuControl.value.play,
},
{
name: t('list__download'),
action: 'download',
disabled: !itemMenuControl.value.download,
},
{
name: t('list__play_later'),
action: 'playLater',
disabled: !itemMenuControl.value.playLater,
},
{
name: t('list__search'),
action: 'search',
disabled: !itemMenuControl.value.search,
},
{
name: t('list__add_to'),
action: 'addTo',
disabled: !itemMenuControl.value.addTo,
},
{
name: t('list__source_detail'),
action: 'sourceDetail',
disabled: !itemMenuControl.value.sourceDetail,
},
]
})
const showMenu = (event, musicInfo) => {
itemMenuControl.value.sourceDetail = !!musicSdk[musicInfo.source].getMusicDetailPageUrl
// this.listMenu.itemMenuControl.play =
// this.listMenu.itemMenuControl.playLater =
itemMenuControl.download = assertApiSupport(musicInfo.source)
let dom_container = event.target.closest('.' + styles.songList)
const getOffsetValue = (target, x = 0, y = 0) => {
if (target === dom_container) return { x, y }
if (!target) return { x: 0, y: 0 }
x += target.offsetLeft
y += target.offsetTop
return getOffsetValue(target.offsetParent, x, y)
}
let { x, y } = getOffsetValue(event.target)
menuLocation.value.x = x + event.offsetX
menuLocation.value.y = y + event.offsetY - listRef.value.getScrollTop()
emit('show-menu')
nextTick(() => {
isShowItemMenu.value = true
})
}
const hideMenu = () => {
isShowItemMenu.value = false
}
const menuClick = (action, index) => {
// console.log(action)
hideMenu()
if (!action) return
switch (action.action) {
case 'download':
handleShowDownloadModal(index)
break
case 'play':
handlePlayMusic(index)
break
case 'playLater':
handlePlayMusicLater(index)
break
case 'search':
handleSearch(index)
break
case 'addTo':
handleShowMusicAddModal(index)
break
case 'sourceDetail':
handleOpenMusicDetail(index)
}
}
return {
menus,
menuLocation,
isShowItemMenu,
showMenu,
menuClick,
hideMenu,
}
}

30
src/renderer/components/material/OnlineList/useMusicActions.js Normal file
View File

@ -0,0 +1,30 @@
import { useRouter } from '@renderer/utils/vueTools'
import musicSdk from '@renderer/utils/music'
import { openUrl } from '@renderer/utils'
export default ({ props }) => {
const router = useRouter()
const handleSearch = index => {
const info = props.list[index]
router.push({
path: 'search',
query: {
text: `${info.name} ${info.singer}`,
},
})
}
const handleOpenMusicDetail = index => {
const minfo = props.list[index]
const url = musicSdk[minfo.source].getMusicDetailPageUrl(minfo)
if (!url) return
openUrl(url)
}
return {
handleSearch,
handleOpenMusicDetail,
}
}

25
src/renderer/components/material/OnlineList/useMusicAdd.js Normal file
View File

@ -0,0 +1,25 @@
import { ref, nextTick } from '@renderer/utils/vueTools'
export default ({ selectedList, props }) => {
const isShowListAdd = ref(false)
const isShowListAddMultiple = ref(false)
const selectedAddMusicInfo = ref(null)
const handleShowMusicAddModal = (index, single) => {
if (selectedList.value.length && !single) {
isShowListAddMultiple.value = true
} else {
selectedAddMusicInfo.value = props.list[index]
nextTick(() => {
isShowListAdd.value = true
})
}
}
return {
isShowListAdd,
isShowListAddMultiple,
selectedAddMusicInfo,
handleShowMusicAddModal,
}
}

25
src/renderer/components/material/OnlineList/useMusicDownload.js Normal file
View File

@ -0,0 +1,25 @@
import { ref, nextTick } from '@renderer/utils/vueTools'
export default ({ selectedList, props }) => {
const isShowDownload = ref(false)
const isShowDownloadMultiple = ref(false)
const musicInfo = ref(null)
const handleShowDownloadModal = (index, single) => {
if (selectedList.value.length && !single) {
isShowDownloadMultiple.value = true
} else {
musicInfo.value = props.list[index]
nextTick(() => {
isShowDownload.value = true
})
}
}
return {
isShowDownload,
isShowDownloadMultiple,
selectedDownloadMusicInfo: musicInfo,
handleShowDownloadModal,
}
}

60
src/renderer/components/material/OnlineList/usePlay.js Normal file
View File

@ -0,0 +1,60 @@
import { useCommit } from '@renderer/utils/vueTools'
import { defaultList } from '@renderer/core/share/list'
import { getList } from '@renderer/core/share/utils'
export default ({ selectedList, props, removeAllSelect }) => {
let clickTime = 0
let clickIndex = -1
const listAddMultiple = useCommit('list', 'listAddMultiple')
const listAdd = useCommit('list', 'listAdd')
const setList = useCommit('player', 'setList')
const setTempPlayList = useCommit('player', 'setTempPlayList')
const handlePlayMusic = (index, single) => {
let targetSong = props.list[index]
const defaultListMusics = getList(defaultList.id)
if (selectedList.value.length && !single) {
listAddMultiple({ id: defaultList.id, list: [...selectedList.value] })
removeAllSelect()
} else {
listAdd({ id: defaultList.id, musicInfo: targetSong })
}
let targetIndex = defaultListMusics.findIndex(s => s.songmid === targetSong.songmid)
if (targetIndex > -1) {
setList({
listId: defaultList.id,
index: targetIndex,
})
}
}
const handlePlayMusicLater = (index, single) => {
if (selectedList.length && !single) {
setTempPlayList(selectedList.value.map(s => ({ listId: '__temp__', musicInfo: s })))
removeAllSelect()
} else {
setTempPlayList([{ listId: '__temp__', musicInfo: props.list[index] }])
}
}
const doubleClickPlay = index => {
if (
window.performance.now() - clickTime > 400 ||
clickIndex !== index
) {
clickTime = window.performance.now()
clickIndex = index
return
}
handlePlayMusic(index, true)
clickTime = 0
clickIndex = -1
}
return {
handlePlayMusic,
handlePlayMusicLater,
doubleClickPlay,
}
}

82
src/renderer/components/material/Pagination.vue
View File

@ -1,37 +1,47 @@
<template lang="pug">
div(:class="$style.pagination" v-if="allPage > 1")
ul
li(v-if="page===1" :class="$style.disabled")
span
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
use(xlink:href='#icon-left')
li(v-else)
button(type="button" @click="handleClick(page - 1)" :tips="$t('material.pagination.prev')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
use(xlink:href='#icon-left')
li(v-if="allPage > btnLength && page > pageEvg+1" :class="$style.first")
button(type="button" @click="handleClick(1)" :tips="$t('material.pagination.page', { num: 1 })")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
use(xlink:href='#icon-first')
li(v-for="(p, index) in pages" :key="index" :class="{[$style.active] : p == page}")
span(v-if="p === page" v-text="page")
button(v-else type="button" @click="handleClick(p)" v-text="p" :tips="$t('material.pagination.page', { num: p })")
li(v-if="allPage > btnLength && allPage - page > pageEvg" :class="$style.last")
button(type="button" @click="handleClick(allPage)" :tips="$t('material.pagination.page', { num: allPage })")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
use(xlink:href='#icon-last')
li(v-if="page===allPage" :class="$style.disabled")
span
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
use(xlink:href='#icon-right')
li(v-else)
button(type="button" @click="handleClick(page + 1)" :tips="$t('material.pagination.next')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.846 451.847' space='preserve')
use(xlink:href='#icon-right')
<template>
<div :class="$style.pagination" v-if="allPage &gt; 1">
<ul>
<li v-if="page===1" :class="$style.disabled"><span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 451.846 451.847" space="preserve">
<use xlink:href="#icon-left"></use>
</svg></span></li>
<li v-else>
<button type="button" @click="handleClick(page - 1)" :tips="$t('pagination__prev')">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 451.846 451.847" space="preserve">
<use xlink:href="#icon-left"></use>
</svg>
</button>
</li>
<li v-if="allPage &gt; btnLength &amp;&amp; page &gt; pageEvg+1" :class="$style.first">
<button type="button" @click="handleClick(1)" :tips="$t('pagination__page', { num: 1 })">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 451.846 451.847" space="preserve">
<use xlink:href="#icon-first"></use>
</svg>
</button>
</li>
<li v-for="(p, index) in pages" :key="index" :class="{[$style.active] : p == page}"><span v-if="p === page" v-text="page"></span>
<button v-else type="button" @click="handleClick(p)" v-text="p" :tips="$t('pagination__page', { num: p })"></button>
</li>
<li v-if="allPage &gt; btnLength &amp;&amp; allPage - page &gt; pageEvg" :class="$style.last">
<button type="button" @click="handleClick(allPage)" :tips="$t('pagination__page', { num: allPage })">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 451.846 451.847" space="preserve">
<use xlink:href="#icon-last"></use>
</svg>
</button>
</li>
<li v-if="page===allPage" :class="$style.disabled"><span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 451.846 451.847" space="preserve">
<use xlink:href="#icon-right"></use>
</svg></span></li>
<li v-else>
<button type="button" @click="handleClick(page + 1)" :tips="$t('pagination__next')">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 451.846 451.847" space="preserve">
<use xlink:href="#icon-right"></use>
</svg>
</button>
</li>
</ul>
</div>
</template>
@ -116,7 +126,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.pagination {
display: inline-block;
@ -198,7 +208,7 @@ export default {
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.pagination {
background-color: ~'@{color-@{value}-pagination-background}';

89
src/renderer/components/material/SearchInput.vue
View File

@ -1,34 +1,50 @@
<template lang="pug">
div(:class="$style.container")
div(:class="[$style.search, focus ? $style.active : '', big ? $style.big : '', small ? $style.small : '']")
div(:class="$style.form")
input(:placeholder="placeholder" v-model.trim="text" ref="dom_input"
@focus="handleFocus" @blur="handleBlur" @input="$emit('input', text)"
@change="sendEvent('change')"
@keyup.enter="handleSearch"
@keyup.40.prevent="handleKeyDown"
@keyup.38.prevent="handleKeyUp"
@contextmenu="handleContextMenu")
transition(enter-active-class="animated zoomIn" leave-active-class="animated zoomOut")
button(type="button" @click="handleClearList" v-show="text")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 24 24' space='preserve')
use(xlink:href='#icon-window-close')
button(type="button" @click="handleSearch")
slot
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
use(xlink:href='#icon-search')
//- transition(name="custom-classes-transition"
//- enter-active-class="animated flipInX"
//- leave-active-class="animated flipOutX")
div(v-if="list" :class="$style.list" :style="listStyle")
ul(ref="dom_list")
li(v-for="(item, index) in list" :key="item" :class="selectIndex === index ? $style.select : null" @mouseenter="selectIndex = index" @click="handleTemplistClick(index)")
span {{item}}
<template>
<div :class="$style.container">
<div :class="[$style.search, {[$style.active]: focus}, {[$style.big]: big}, {[$style.small]: small}]">
<div :class="$style.form">
<input :placeholder="placeholder"
v-model.trim="text"
ref="dom_input"
@focus="handleFocus"
@blur="handleBlur"
@input="$emit('update:modelValue', text)"
@change="sendEvent('change')"
@keyup.enter="handleSearch"
@keyup.arrow-down.prevent="handleKeyDown"
@keyup.arrow-up.prevent="handleKeyUp"
@contextmenu="handleContextMenu" />
<transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<button type="button" @click="handleClearList" v-show="text">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-window-close"></use>
</svg>
</button>
</transition>
<button type="button" @click="handleSearch">
<slot>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 30.239 30.239" space="preserve">
<use xlink:href="#icon-search"></use>
</svg>
</slot>
</button>
</div>
<div v-if="list" :class="$style.list" :style="listStyle">
<ul ref="dom_list">
<li v-for="(item, index) in list"
:key="item"
:class="{[$style.select]: selectIndex === index }"
@mouseenter="selectIndex = index"
@click="handleTemplistClick(index)"
><span>{{item}}</span></li>
</ul>
</div>
</div>
</div>
</template>
<script>
import { clipboardReadText } from '../../utils'
import { common as eventCommonNames } from '../../../common/hotKey'
import { clipboardReadText } from '@renderer/utils'
import { common as eventCommonNames } from '@common/hotKey'
export default {
props: {
placeholder: {
@ -42,7 +58,7 @@ export default {
type: Boolean,
default: false,
},
value: {
modelValue: {
type: String,
default: '',
},
@ -55,6 +71,7 @@ export default {
default: false,
},
},
emits: ['update:modelValue', 'event'],
data() {
return {
isShow: false,
@ -74,7 +91,7 @@ export default {
this.listStyle.height = this.$refs.dom_list.scrollHeight + 'px'
})
},
value(n) {
modelValue(n) {
this.text = n
},
visibleList(n) {
@ -85,13 +102,13 @@ export default {
if (this.$store.getters.setting.search.isFocusSearchBox) this.handleFocusInput()
this.handleRegisterEvent('on')
},
beforeDestroy() {
beforeUnmount() {
this.handleRegisterEvent('off')
},
methods: {
handleRegisterEvent(action) {
let eventHub = window.eventHub
let name = action == 'on' ? '$on' : '$off'
let name = action == 'on' ? 'on' : 'off'
eventHub[name](eventCommonNames.focusSearchInput.action, this.handleFocusInput)
},
handleFocusInput() {
@ -146,11 +163,11 @@ export default {
str = str.replace(/\s+/g, ' ')
let dom_input = this.$refs.dom_input
this.text = `${this.text.substring(0, dom_input.selectionStart)}${str}${this.text.substring(dom_input.selectionEnd, this.text.length)}`
this.$emit('input', this.text)
this.$emit('update:modelValue', this.text)
},
handleClearList() {
this.text = ''
this.$emit('input', this.text)
this.$emit('update:modelValue', this.text)
this.sendEvent('submit')
},
},
@ -159,7 +176,7 @@ export default {
<style lang="less" module>
@import '../../assets/styles/layout.less';
@import '@renderer/assets/styles/layout.less';
.container {
position: relative;
@ -279,7 +296,7 @@ export default {
}
each(@themes, {
:global(#container.@{value}) {
:global(#root.@{value}) {
.search {
background-color: ~'@{color-@{value}-search-form-background}';

490
src/renderer/components/material/SongList.vue
View File

@ -1,490 +0,0 @@
<template lang="pug">
div(:class="$style.songList")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.list")
div(:class="$style.thead")
table
thead
tr
th.nobreak.center(:style="{ width: rowWidth.r1 }") #
th.nobreak(:style="{ width: rowWidth.r2 }") {{$t('material.song_list.name')}}
th.nobreak(:style="{ width: rowWidth.r3 }") {{$t('material.song_list.singer')}}
th.nobreak(:style="{ width: rowWidth.r4 }") {{$t('material.song_list.album')}}
th.nobreak(:style="{ width: rowWidth.r5 }") {{$t('material.song_list.time')}}
th.nobreak(:style="{ width: rowWidth.r6 }") {{$t('material.song_list.action')}}
div(:class="$style.content")
div(v-if="list.length" :class="$style.content" ref="dom_listContent")
material-virtualized-list(:list="list" key-name="songmid" ref="list" :item-height="listItemHeight"
containerClass="scroll" contentClass="list" @contextmenu.native.capture="handleContextMenu")
template(#default="{ item, index }")
div.list-item(@click="handleDoubleClick($event, index)" @contextmenu="handleListItemRigthClick($event, index)"
:class="[{ selected: selectedIndex == index }, { active: selectdList.includes(item) }]")
div.list-item-cell.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
div.list-item-cell.auto(:style="{ width: rowWidth.r2 }" :tips="item.name + ((item._types.ape || item._types.flac || item._types.wav) ? ` - ${$t('material.song_list.lossless')}` : item._types['320k'] ? ` - ${$t('material.song_list.high_quality')}` : '')")
span.select {{item.name}}
span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
div.list-item-cell(:style="{ width: rowWidth.r3 }" :tips="item.singer")
span.select {{item.singer}}
div.list-item-cell(:style="{ width: rowWidth.r4 }" :tips="item.albumName")
span.select {{item.albumName}}
div.list-item-cell(:style="{ width: rowWidth.r5 }")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
div.list-item-cell(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :class="$style.btns"
:remove-btn="false" @btn-click="handleListBtnClick"
:download-btn="assertApiSupport(item.source)")
template(#footer)
div(:class="$style.pagination")
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
//- div.scroll(v-show="list.length" :class="$style.tbody" ref="dom_scrollContent")
table
tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' @contextmenu="handleListItemRigthClick($event, index)" @click="handleDoubleClick($event, index)")
td.nobreak.center(:style="{ width: rowWidth.r1 }" style="padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break(:style="{ width: rowWidth.r2 }")
span.select {{item.name}}
span.badge.badge-theme-success(:class="[$style.labelQuality, $style.noSelect]" v-if="item._types.ape || item._types.flac || item._types.wav") {{$t('material.song_list.lossless')}}
span.badge.badge-theme-info(:class="[$style.labelQuality, $style.noSelect]" v-else-if="item._types['320k']") {{$t('material.song_list.high_quality')}}
td.break(:style="{ width: rowWidth.r3 }")
span.select {{item.singer}}
td.break(:style="{ width: rowWidth.r4 }")
span.select {{item.albumName}}
td(:style="{ width: rowWidth.r5 }")
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
td(:style="{ width: rowWidth.r6 }" style="padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :class="$style.btns"
:remove-btn="false" @btn-click="handleListBtnClick"
:download-btn="assertApiSupport(item.source)")
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
div(:class="$style.pagination")
material-pagination(:count="total" :limit="limit" :page="page" @btn-click="handleTogglePage")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(v-show="!list.length" :class="$style.noitem")
p(v-html="noItem")
//- material-flow-btn(:show="isShowEditBtn && assertApiSupport(source)" :remove-btn="false" @btn-click="handleFlowBtnClick")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template>
<script>
import { mapGetters } from 'vuex'
import { clipboardWriteText, assertApiSupport } from '../../utils'
import musicSdk from '../../utils/music'
import { windowSizeList } from '@common/config'
export default {
name: 'MaterialSongList',
model: {
prop: 'selectdData',
event: 'input',
},
props: {
list: {
type: Array,
default() {
return []
},
},
page: {
type: Number,
required: true,
},
limit: {
type: Number,
required: true,
},
total: {
type: Number,
required: true,
},
selectdData: {
type: Array,
required: true,
},
source: {
type: String,
},
noItem: {
type: String,
default: '列表加载中...',
},
hideListsMenu: {
type: Function,
default: () => {},
},
rowWidth: {
type: Object,
default() {
return {
r1: '5%',
r2: 'auto',
r3: '22%',
r4: '22%',
r5: '8%',
r6: '13%',
}
},
},
},
computed: {
...mapGetters(['setting']),
listItemMenu() {
return [
{
name: this.$t('material.song_list.list_play'),
action: 'play',
disabled: !this.listMenu.itemMenuControl.play,
},
{
name: this.$t('material.song_list.list_download'),
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('material.song_list.list_play_later'),
action: 'playLater',
disabled: !this.listMenu.itemMenuControl.playLater,
},
{
name: this.$t('material.song_list.list_search'),
action: 'search',
disabled: !this.listMenu.itemMenuControl.search,
},
{
name: this.$t('material.song_list.list_add_to'),
action: 'addTo',
disabled: !this.listMenu.itemMenuControl.addTo,
},
{
name: this.$t('material.song_list.list_source_detail'),
action: 'sourceDetail',
disabled: !this.listMenu.itemMenuControl.sourceDetail,
},
]
},
listItemHeight() {
return parseInt(windowSizeList.find(item => item.id == this.setting.windowSizeId).fontSize) / 16 * 37
},
},
watch: {
// selectdList(n) {
// const len = n.length
// if (len) {
// this.isShowEditBtn = true
// } else {
// this.isShowEditBtn = false
// }
// },
selectdData(n) {
const len = n.length
if (len) {
// this.isShowEditBtn = true
this.selectdList = [...n]
} else {
// this.isShowEditBtn = false
this.removeAllSelect()
}
},
list(n) {
this.removeAllSelect()
if (!this.list.length) return
this.$nextTick(() => this.$refs.list.scrollTo(0))
},
},
data() {
return {
clickTime: 0,
clickIndex: -1,
isShowEditBtn: false,
selectdList: [],
keyEvent: {
isShiftDown: false,
isModDown: false,
},
lastSelectIndex: 0,
selectedIndex: -1,
listMenu: {
rightClickItemIndex: -1,
isShowItemMenu: false,
itemMenuControl: {
play: true,
addTo: true,
playLater: true,
download: true,
search: true,
sourceDetail: true,
},
menuLocation: {
x: 0,
y: 0,
},
},
}
},
created() {
this.listenEvent()
},
beforeDestroy() {
this.unlistenEvent()
},
methods: {
listenEvent() {
window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
},
unlistenEvent() {
window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
},
handle_key_shift_down() {
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
},
handle_key_shift_up() {
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
},
handle_key_mod_down() {
if (!this.keyEvent.isModDown) this.keyEvent.isModDown = true
},
handle_key_mod_up() {
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
},
handle_key_mod_a_down({ event }) {
if (event.target.tagName == 'INPUT') return
event.preventDefault()
if (event.repeat) return
this.keyEvent.isModDown = false
this.handleSelectAllData()
},
handleDoubleClick(event, index) {
if (this.listMenu.rightClickItemIndex > -1) return
this.handleSelectData(event, index)
if (
window.performance.now() - this.clickTime > 400 ||
this.clickIndex !== index
) {
this.clickTime = window.performance.now()
this.clickIndex = index
return
}
this.emitEvent('testPlay', index)
this.clickTime = 0
this.clickIndex = -1
},
handleSelectData(event, clickIndex) {
if (this.keyEvent.isShiftDown) {
if (this.selectdList.length) {
let lastSelectIndex = this.lastSelectIndex
this.removeAllSelect()
if (lastSelectIndex != clickIndex) {
let isNeedReverse = false
if (clickIndex < lastSelectIndex) {
let temp = lastSelectIndex
lastSelectIndex = clickIndex
clickIndex = temp
isNeedReverse = true
}
this.selectdList = this.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdList.reverse()
}
} else {
this.selectdList.push(this.list[clickIndex])
this.lastSelectIndex = clickIndex
}
} else if (this.keyEvent.isModDown) {
this.lastSelectIndex = clickIndex
let item = this.list[clickIndex]
let index = this.selectdList.indexOf(item)
if (index < 0) {
this.selectdList.push(item)
} else {
this.selectdList.splice(index, 1)
}
} else if (this.selectdList.length) {
this.removeAllSelect()
} else return
this.$emit('input', [...this.selectdList])
},
removeAllSelect() {
this.selectdList = []
},
handleListBtnClick(info) {
this.emitEvent('listBtnClick', info)
},
handleSelectAllData() {
this.removeAllSelect()
this.selectdList = [...this.list]
this.$emit('input', [...this.selectdList])
},
handleTogglePage(page) {
this.emitEvent('togglePage', page)
},
// handleFlowBtnClick(action) {
// this.emitEvent('flowBtnClick', action)
// },
emitEvent(action, data) {
this.$emit('action', { action, data })
},
handleChangeSelect() {
this.$emit('input', [...this.selectdList])
},
handleContextMenu(event) {
if (!event.target.classList.contains('select')) return
event.stopImmediatePropagation()
let classList = this.$refs.dom_listContent.classList
classList.add(this.$style.copying)
window.requestAnimationFrame(() => {
let str = window.getSelection().toString()
classList.remove(this.$style.copying)
str = str.split(/\n\n/).map(s => s.replace(/\n/g, ' ')).join('\n').trim()
if (!str.length) return
clipboardWriteText(str)
})
},
assertApiSupport(source) {
return assertApiSupport(source)
},
handleListItemRigthClick(event, index) {
this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.list[index].source].getMusicDetailPageUrl
// this.listMenu.itemMenuControl.play =
// this.listMenu.itemMenuControl.playLater =
this.listMenu.itemMenuControl.download = this.assertApiSupport(this.list[index].source)
let dom_container = event.target.closest('.' + this.$style.songList)
const getOffsetValue = (target, x = 0, y = 0) => {
if (target === dom_container) return { x, y }
if (!target) return { x: 0, y: 0 }
x += target.offsetLeft
y += target.offsetTop
return getOffsetValue(target.offsetParent, x, y)
}
this.listMenu.rightClickItemIndex = index
this.selectedIndex = index
let { x, y } = getOffsetValue(event.target)
this.listMenu.menuLocation.x = x + event.offsetX
this.listMenu.menuLocation.y = y + event.offsetY - this.$refs.list.getScrollTop()
this.hideListsMenu()
this.$nextTick(() => {
this.listMenu.isShowItemMenu = true
})
},
hideListMenu() {
this.selectedIndex = -1
this.listMenu.isShowItemMenu = false
this.listMenu.rightClickItemIndex = -1
},
handleListItemMenuClick(action) {
// console.log(action)
let index = this.listMenu.rightClickItemIndex
this.hideListMenu()
if (!action) return
this.emitEvent('menuClick', { action: action.action, index })
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.song-list {
overflow: hidden;
height: 100%;
display: flex;
flex-flow: column nowrap;
position: relative;
}
.list {
position: relative;
font-size: 14px;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
height: 100%;
}
.thead {
flex: none;
tr > th:first-child {
color: @color-theme_2-font-label;
// padding-left: 10px;
}
}
.content {
flex: auto;
min-height: 0;
position: relative;
height: 100%;
&.copying {
.no-select {
display: none;
}
}
}
:global(.list) {
height: 100%;
overflow-y: auto;
:global(.list-item-cell) {
font-size: 12px !important;
:global(.badge) {
margin-left: 3px;
}
&:first-child {
// padding-left: 10px;
font-size: 11px !important;
color: @color-theme_2-font-label !important;
}
}
:global(.badge) {
opacity: .85;
}
}
.pagination {
text-align: center;
padding: 15px 0;
// left: 50%;
// transform: translateX(-50%);
}
.noitem {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
p {
font-size: 24px;
color: @color-theme_2-font-label;
}
}
each(@themes, {
:global(#container.@{value}) {
:global(.list) {
:global(.list-item-cell) {
&:first-child {
color: ~'@{color-@{value}-theme_2-font-label}' !important;
}
}
}
.noitem {
p {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
}
})
</style>

164
src/renderer/components/material/SyncModeModal.vue
View File

@ -1,164 +0,0 @@
<template lang="pug">
material-modal(:show="globalObj.sync.isShowSyncMode" @close="handleClose(false)" :bgClose="false" :close-btn="false")
main(:class="$style.main")
h2 {{$t('material.sync_mode_modal.title', { name: globalObj.sync.deviceName })}}
div.scroll(:class="$style.content")
dl(:class="$style.btnGroup")
dt(:class="$style.label") {{$t('material.sync_mode_modal.merge_label')}}
dd(:class="$style.btns")
material-btn(:class="$style.btn" @click="handleSelectMode('merge_local_remote')") {{$t('material.sync_mode_modal.merge_btn_local_remote')}}
material-btn(:class="$style.btn" @click="handleSelectMode('merge_remote_local')") {{$t('material.sync_mode_modal.merge_btn_remote_local')}}
dl(:class="$style.btnGroup")
dt(:class="$style.label") {{$t('material.sync_mode_modal.overwrite_label')}}
dd(:class="$style.btns")
material-btn(:class="$style.btn" @click="handleSelectMode('overwrite_local_remote')") {{$t('material.sync_mode_modal.overwrite_btn_local_remote')}}
material-btn(:class="$style.btn" @click="handleSelectMode('overwrite_remote_local')") {{$t('material.sync_mode_modal.overwrite_btn_remote_local')}}
dd(style="font-size: 14px; margin-top: 5px;")
material-checkbox(id="sync_mode_modal_isOverwrite" v-model="isOverwrite" :label="$t('material.sync_mode_modal.overwrite')")
dl(:class="$style.btnGroup")
dt(:class="$style.label") {{$t('material.sync_mode_modal.other_label')}}
dd(:class="$style.btns")
material-btn(:class="$style.btn" @click="handleSelectMode('none')") {{$t('material.sync_mode_modal.overwrite_btn_none')}}
material-btn(:class="$style.btn" @click="handleSelectMode('cancel')") {{$t('material.sync_mode_modal.overwrite_btn_cancel')}}
dl(:class="$style.btnGroup")
dd
section(:class="$style.tipGroup")
h3(:class="$style.title") {{$t('material.sync_mode_modal.merge_tip')}}
p(:class="$style.tip") {{$t('material.sync_mode_modal.merge_tip_desc')}}
section(:class="$style.tipGroup")
h3(:class="$style.title") {{$t('material.sync_mode_modal.overwrite_tip')}}
p(:class="$style.tip") {{$t('material.sync_mode_modal.overwrite_tip_desc')}}
section(:class="$style.tipGroup")
h3(:class="$style.title") {{$t('material.sync_mode_modal.other_tip')}}
p(:class="$style.tip") {{$t('material.sync_mode_modal.other_tip_desc')}}
</template>
<script>
import { sync as eventSyncName } from '@renderer/event/names'
export default {
data() {
return {
isOverwrite: false,
globalObj: {
sync: {
isShowSyncMode: false,
deviceName: '',
},
},
}
},
computed: {
},
mounted() {
this.$nextTick(() => {
this.globalObj = window.globalObj
})
},
methods: {
handleSelectMode(mode) {
if (mode.startsWith('overwrite') && this.isOverwrite) mode += '_full'
window.eventHub.$emit(eventSyncName.send_sync_list, {
action: 'selectMode',
data: mode,
})
this.handleClose()
},
handleClose() {
this.globalObj.sync.isShowSyncMode = false
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
padding: 15px;
max-width: 700px;
min-width: 200px;
min-height: 0;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 16px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
}
}
.content {
flex: auto;
padding: 15px 0 5px;
padding-right: 5px;
.btnGroup + .btnGroup {
margin-top: 10px;
}
.label {
color: @color-theme_2-font-label;
font-size: 14px;
line-height: 2;
}
.desc {
line-height: 1.5;
font-size: 14px;
text-align: justify;
}
.tipGroup {
display: flex;
flex-direction: row;
font-size: 12px;
+ .tipGroup {
margin-top: 5px;
}
.title {
white-space: nowrap;
font-weight: bold;
margin-right: 5px;
}
.tip {
line-height: 1.3;
}
}
}
.btns {
display: flex;
align-items: center;
}
.btn {
display: block;
white-space: nowrap;
+.btn {
margin-left: 15px;
}
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#container.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
.name {
color: ~'@{color-@{value}-theme}';
}
}
})
</style>

240
src/renderer/components/material/VirtualizedList.vue
View File

@ -1,240 +0,0 @@
<template>
<component :is="containerEl" :class="containerClass" ref="dom_scrollContainer" style="height: 100%; overflow: auto; position: relative; display: block;">
<component :is="contentEl" :class="contentClass" :style="contentStyle">
<div v-for="item in views" :key="item.key" :style="item.style">
<slot name="default" v-bind="{ item: item.item, index: item.index }" />
</div>
</component>
<slot name="footer" />
</component>
</template>
<script>
const easeInOutQuad = (t, b, c, d) => {
t /= d / 2
if (t < 1) return (c / 2) * t * t + b
t--
return (-c / 2) * (t * (t - 2) - 1) + b
}
const handleScroll = (element, to, duration = 300, callback = () => {}, onCancel = () => {}) => {
if (!element) return callback()
const start = element.scrollTop || element.scrollY || 0
let cancel = false
if (to > start) {
let maxScrollTop = element.scrollHeight - element.clientHeight
if (to > maxScrollTop) to = maxScrollTop
} else if (to < start) {
if (to < 0) to = 0
} else return callback()
const change = to - start
const increment = 10
if (!change) return callback()
let currentTime = 0
let val
let cancelCallback
const animateScroll = () => {
currentTime += increment
val = parseInt(easeInOutQuad(currentTime, start, change, duration))
if (element.scrollTo) {
element.scrollTo(0, val)
} else {
element.scrollTop = val
}
if (currentTime < duration) {
if (cancel) {
cancelCallback()
onCancel()
return
}
setTimeout(animateScroll, increment)
} else {
callback()
}
}
animateScroll()
return (callback) => {
cancelCallback = callback
cancel = true
}
}
export default {
name: 'VirtualizedList',
props: {
containerEl: {
type: String,
default: 'div',
},
containerClass: {
type: String,
default: 'virtualized-list',
},
contentEl: {
type: String,
default: 'div',
},
contentClass: {
type: String,
default: 'virtualized-list-content',
},
outsideNum: {
type: Number,
default: 1,
},
itemHeight: {
type: Number,
required: true,
},
keyName: {
type: String,
require: true,
},
list: {
type: Array,
require: true,
},
},
data() {
return {
views: [],
startIndex: -1,
endIndex: -1,
scrollTop: 0,
cachedList: [],
cancelScroll: null,
isScrolling: false,
scrollToValue: 0,
}
},
computed: {
contentStyle() {
return {
display: 'block',
height: this.list.length * this.itemHeight + 'px',
}
},
},
watch: {
itemHeight() {
this.updateView()
},
list() {
this.cachedList = Array(this.list.length)
this.startIndex = -1
this.endIndex = -1
this.updateView()
},
},
mounted() {
this.$refs.dom_scrollContainer.addEventListener('scroll', this.onScroll, false)
this.cachedList = Array(this.list.length)
this.startIndex = -1
this.endIndex = -1
this.updateView()
},
beforeDestroy() {
this.$refs.dom_scrollContainer.removeEventListener('scroll', this.onScroll)
if (this.cancelScroll) this.cancelScroll()
},
methods: {
onScroll(event) {
const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
if (Math.abs(currentScrollTop - this.scrollTop) > this.itemHeight * this.outsideNum * 0.6) {
this.updateView(currentScrollTop)
}
this.$emit('scroll', event)
},
createList(startIndex, endIndex) {
const cache = this.cachedList.slice(startIndex, endIndex)
const list = this.list.slice(startIndex, endIndex).map((item, i) => {
if (cache[i]) return cache[i]
const top = (startIndex + i) * this.itemHeight
const index = startIndex + i
return this.cachedList[index] = {
item,
top,
style: { position: 'absolute', left: 0, right: 0, top: top + 'px', height: this.itemHeight + 'px' },
index,
key: item[this.keyName],
}
})
return list
},
updateView(currentScrollTop = this.$refs.dom_scrollContainer.scrollTop) {
// const currentScrollTop = this.$refs.dom_scrollContainer.scrollTop
const currentStartIndex = Math.floor(currentScrollTop / this.itemHeight)
const scrollContainerHeight = this.$refs.dom_scrollContainer.clientHeight
const currentEndIndex = currentStartIndex + Math.ceil(scrollContainerHeight / this.itemHeight)
const continuous = currentStartIndex <= this.endIndex && currentEndIndex >= this.startIndex
const currentStartRenderIndex = Math.max(Math.floor(currentScrollTop / this.itemHeight) - this.outsideNum, 0)
const currentEndRenderIndex = currentStartIndex + Math.ceil(scrollContainerHeight / this.itemHeight) + this.outsideNum
// console.log(continuous)
// debugger
if (continuous) {
// if (Math.abs(currentScrollTop - this.scrollTop) < this.itemHeight * this.outsideNum * 0.6) return
// console.log('update')
if (currentScrollTop > this.scrollTop) { // scroll down
// console.log('scroll down')
const list = this.createList(currentStartRenderIndex, currentEndRenderIndex)
this.views.push(...list.slice(list.indexOf(this.views[this.views.length - 1]) + 1))
// if (this.views.length > 100) {
this.$nextTick(() => {
this.views.splice(0, this.views.indexOf(list[0]))
})
// }
} else if (currentScrollTop < this.scrollTop) { // scroll up
// console.log('scroll up')
this.views = this.createList(currentStartRenderIndex, currentEndRenderIndex)
} else return
} else {
this.views = this.createList(currentStartRenderIndex, currentEndRenderIndex)
}
this.startIndex = currentStartIndex
this.endIndex = currentEndIndex
this.scrollTop = currentScrollTop
},
scrollTo(scrollTop, animate = false) {
return new Promise(resolve => {
if (this.cancelScroll) {
this.cancelScroll(resolve)
} else {
resolve()
}
}).then(() => {
return new Promise((resolve, reject) => {
if (animate) {
this.isScrolling = true
this.scrollToValue = scrollTop
this.cancelScroll = handleScroll(this.$refs.dom_scrollContainer, scrollTop, 300, () => {
this.cancelScroll = null
this.isScrolling = false
resolve()
}, () => {
this.cancelScroll = null
this.isScrolling = false
reject('canceled')
})
} else {
this.$refs.dom_scrollContainer.scrollTop = scrollTop
}
})
})
},
scrollToIndex(index, offset = 0, animate = false) {
return this.scrollTo(Math.max(index * this.itemHeight + offset, 0), animate)
},
getScrollTop() {
return this.isScrolling ? this.scrollToValue : this.$refs.dom_scrollContainer.scrollTop
},
},
}
</script>

26
src/renderer/core/share/download.js Normal file
View File

@ -0,0 +1,26 @@
import { reactive, ref, markRaw } from '@renderer/utils/vueTools'
export const isInitedList = ref(false)
export const setInited = () => {
isInitedList.value = true
}
export const downloadList = reactive([])
export const downloadListMap = new Map()
export const initDownloadList = list => {
downloadList.splice(0, downloadList.length, ...list)
downloadListMap.clear()
for (const task of list) {
downloadListMap.set(task.key, task)
}
}
export const downloadStatus = markRaw({
RUN: 'run',
WAITING: 'waiting',
PAUSE: 'pause',
ERROR: 'error',
COMPLETED: 'completed',
})

46
src/renderer/core/share/index.js Normal file
View File

@ -0,0 +1,46 @@
import { ref, reactive, shallowRef, markRaw } from '@renderer/utils/vueTools'
import { windowSizeList as configWindowSizeList, themes as configThemes } from '@common/config'
import { version } from '../../../../package.json'
process.versions.app = version
export const apiSource = ref(null)
export const isShowPact = window.isShowPact = ref(false)
export const proxy = reactive({})
export const versionInfo = window.versionInfo = reactive({
version,
newVersion: null,
showModal: false,
isError: false,
isTimeOut: false,
isUnknow: false,
isDownloaded: false,
isDownloading: false,
isLatestVer: false,
downloadProgress: null,
})
export const userApi = reactive({
list: [],
status: false,
message: 'initing',
apis: {},
})
export const sync = window.sync = reactive({
enable: false,
isShowSyncMode: false,
deviceName: '',
status: {
status: false,
message: '',
address: [],
code: '',
devices: [],
},
})
export const windowSizeList = markRaw(configWindowSizeList)
export const themes = markRaw(configThemes)
export const qualityList = shallowRef({})
export const setQualityList = _qualityList => {
qualityList.value = _qualityList
}

112
src/renderer/core/share/list.js Normal file
View File

@ -0,0 +1,112 @@
import { reactive, ref, markRaw } from '@renderer/utils/vueTools'
// const TEMP_LIST = 'TEMP_LIST'
export const isInitedList = ref(false)
export const setInited = () => {
isInitedList.value = true
}
export const allList = markRaw({})
export const allListInit = (defaultList, loveList, tempList, userList) => {
for (const id of Object.keys(allList)) {
delete allList[id]
}
allList[defaultList.id] = reactive(defaultList.list)
allList[loveList.id] = reactive(loveList.list)
allList[tempList.id] = reactive(tempList.list)
userLists.splice(0, userLists.length)
for (const { list, ...listInfo } of userList) {
allList[listInfo.id] = reactive(list)
userLists.push(listInfo)
}
}
export const allListUpdate = (id, list) => {
if (allList[id]) {
allList[id].splice(0, allList[id].length, ...list)
} else {
allList[id] = list
}
}
export const allListRemove = id => {
delete allList[id]
}
export const defaultList = reactive({
id: 'default',
name: '试听列表',
})
export const loveList = reactive({
id: 'love',
name: '我的收藏',
})
export const tempList = reactive({
id: 'temp',
name: '临时列表',
})
export const userLists = reactive([])
export const addUserList = ({
name,
id,
list,
source,
sourceListId,
position,
}) => {
if (position == null) {
userLists.push({
name,
id,
source,
sourceListId,
})
} else {
userLists.splice(position + 1, 0, {
name,
id,
source,
sourceListId,
})
}
allListUpdate(id, list)
}
export const updateList = ({
name,
id,
list,
source,
sourceListId,
}) => {
let targetList
switch (id) {
case defaultList.id:
case loveList.id:
case tempList.id:
break
default:
targetList = userLists.find(l => l.id == id)
targetList.name = name
targetList.source = source
targetList.sourceListId = sourceListId
break
}
allListUpdate(id, list)
}
export const removeUserList = id => {
const index = userLists.findIndex(l => l.id == id)
if (index < 0) return
userLists.splice(index, 1)
allListRemove(id)
}
export const getList = id => {
return allList[id] ?? []
}

15
src/renderer/core/share/lyric.js Normal file
View File

@ -0,0 +1,15 @@
import { reactive } from '@renderer/utils/vueTools'
export const lyric = reactive({
lines: [],
text: '',
line: 0,
})
export const setLines = lines => {
lyric.lines = lines
}
export const setText = (text, line) => {
lyric.text = text
lyric.line = line
}

22
src/renderer/core/share/playProgress.js Normal file
View File

@ -0,0 +1,22 @@
import { reactive } from '@renderer/utils/vueTools'
import { formatPlayTime2 } from '@renderer/utils'
export const playProgress = reactive({
nowPlayTime: 0,
maxPlayTime: 0,
progress: 0,
nowPlayTimeStr: '00:00',
maxPlayTimeStr: '00:00',
})
export const setNowPlayTime = time => {
playProgress.nowPlayTime = time
playProgress.nowPlayTimeStr = formatPlayTime2(time)
playProgress.progress = playProgress.maxPlayTime ? time / playProgress.maxPlayTime : 0
}
export const setMaxplayTime = time => {
playProgress.maxPlayTime = time
playProgress.maxPlayTimeStr = formatPlayTime2(time)
playProgress.progress = time ? playProgress.nowPlayTime / time : 0
}

175
src/renderer/core/share/player.js Normal file
View File

@ -0,0 +1,175 @@
import { reactive, ref, shallowRef } from '@renderer/utils/vueTools'
import { getList } from '@renderer/core/share/utils'
export const musicInfo = window.musicInfo = reactive({
songmid: null,
img: null,
lrc: null,
tlrc: null,
lxlrc: null,
url: null,
name: '',
singer: '',
album: '',
})
const musicInfoKeys = Object.keys(musicInfo)
export const setMusicInfo = _musicInfo => {
for (const key of musicInfoKeys) {
if (_musicInfo[key] !== undefined) {
musicInfo[key] = _musicInfo[key]
}
}
}
export const musicInfoItem = shallowRef({})
export const setMusicInfoItem = musicInfo => {
musicInfoItem.value = musicInfo.key ? musicInfo.metadata.musicInfo : musicInfo
}
export const isPlay = ref(false)
export const setPlay = val => {
isPlay.value = val
}
export const status = ref('')
export const setStatus = val => {
status.value = val
}
export const statusText = ref('')
export const setStatusText = val => {
statusText.value = val
}
export const setAllStatus = val => {
status.value = val
statusText.value = val
}
export const isShowPlayerDetail = ref(false)
export const setShowPlayerDetail = val => {
isShowPlayerDetail.value = val
}
export const isShowPlayComment = ref(false)
export const setShowPlayComment = val => {
isShowPlayComment.value = val
}
export const isShowLrcSelectContent = ref(false)
export const setShowPlayLrcSelectContentLrc = val => {
isShowLrcSelectContent.value = val
}
export const playMusicInfo = reactive({
listId: null, // 当前播放歌曲的列表 id
musicInfo: null, // 当前播放歌曲的歌曲信息
isTempPlay: false, // 是否属于 “稍后播放”
})
export const playInfo = reactive({
playIndex: -1, // 当前正在播放歌曲 index
playListId: null, // 播放器的播放列表 id
listPlayIndex: -1, // 播放器播放歌曲 index
})
// 设置播放器的播放列表
export const setPlayList = listId => {
playInfo.playListId = listId
}
// 更新播放位置
export const updatePlayIndex = () => {
const indexInfo = getPlayIndex(playMusicInfo.listId, playMusicInfo.musicInfo, playMusicInfo.isTempPlay)
// console.log(indexInfo)
playInfo.playIndex = indexInfo.playIndex
playInfo.listPlayIndex = indexInfo.listPlayIndex
return indexInfo
}
export const getPlayIndex = (listId, musicInfo, isTempPlay) => {
const playerList = getList(playInfo.playListId)
// if (listIndex < 0) throw new Error('music info not found')
// playInfo.playIndex = listIndex
let playIndex = -1
let listPlayIndex = -1
if (playerList?.length) {
listPlayIndex = Math.min(playInfo.listPlayIndex, playerList.length - 1)
}
const list = getList(listId)
if (list?.length) {
if (musicInfo.key) { // 已下载的歌曲
const currentKey = musicInfo.key
playIndex = list.findIndex(m => m.key == currentKey)
} else {
const currentSongmid = musicInfo.songmid
playIndex = list.findIndex(m => m.songmid == currentSongmid)
}
if (!isTempPlay) {
if (playIndex < 0) {
listPlayIndex = listPlayIndex < 1 ? (list.length - 1) : (listPlayIndex - 1)
} else {
listPlayIndex = playIndex
}
}
}
return {
playIndex,
listPlayIndex,
}
}
// 设置当前播放歌曲的信息
export const setPlayMusicInfo = (listId, musicInfo, isTempPlay = false) => {
playMusicInfo.listId = listId
playMusicInfo.musicInfo = musicInfo
playMusicInfo.isTempPlay = isTempPlay
if (musicInfo == null) {
playInfo.playIndex = -1
playInfo.playListId = null
playInfo.listPlayIndex = -1
return
}
const { playIndex, listPlayIndex } = getPlayIndex(listId, musicInfo, isTempPlay)
playInfo.playIndex = playIndex
playInfo.listPlayIndex = listPlayIndex
setMusicInfoItem(musicInfo)
// console.log(playInfo)
}
export const playedList = window.playedList = reactive([])
export const addPlayedList = (item) => {
if (playedList.some(m => m.musicInfo === item.musicInfo)) return
playedList.push(item)
}
export const removePlayedList = (index) => {
playedList.splice(index, 1)
}
export const clearPlayedList = () => {
playedList.splice(0, playedList.length)
}
export const tempPlayList = reactive([])
export const addTempPlayList = (list) => {
tempPlayList.push(...list.map(({ musicInfo, listId }) => ({ musicInfo, listId, isTempPlay: true })))
}
export const removeTempPlayList = (index) => {
tempPlayList.splice(index, 1)
}
export const clearTempPlayeList = () => {
tempPlayList.splice(0, tempPlayList.length)
}
window.playInfo = playInfo
window.playMusicInfo = playMusicInfo

7
src/renderer/core/share/utils.js Normal file
View File

@ -0,0 +1,7 @@
import { getList as getMyList } from './list'
import { downloadList } from './download'
export const getList = listId => {
return listId == 'download' ? downloadList : getMyList(listId)
}

13
src/renderer/core/share/volume.js Normal file
View File

@ -0,0 +1,13 @@
import { ref } from '@renderer/utils/vueTools'
export const volume = ref(0)
export const isMute = ref(false)
export const setVolume = num => {
volume.value = num
}
export const setMute = flag => {
isMute.value = flag
}

55
src/renderer/core/useApp/index.js Normal file
View File

@ -0,0 +1,55 @@
import { isLinux } from '@common/utils'
import { getEnvParams, setIgnoreMouseEvents } from '@renderer/utils/tools'
import { useRefGetter } from '@renderer/utils/vueTools'
import { sync, apiSource, proxy } from '@renderer/core/share'
import useSync from './useSync'
import useUpdate from './useUpdate'
import useDataInit from './useDataInit'
import useHandleEnvParams from './useHandleEnvParams'
import useEventListener from './useEventListener'
import usePlayer from './usePlayer'
export default () => {
const isProd = process.env.NODE_ENV === 'production'
const setting = useRefGetter('setting')
sync.enable = setting.value.sync.enable
apiSource.value = setting.value.apiSource
proxy.value = Object.assign({}, setting.value.network.proxy)
const dieableIgnoreMouseEvents = () => {
if (window.dt) return
setIgnoreMouseEvents(false)
}
const enableIgnoreMouseEvents = () => {
if (window.dt) return
setIgnoreMouseEvents(true)
}
useUpdate(setting)
useSync()
useEventListener({
dieableIgnoreMouseEvents,
enableIgnoreMouseEvents,
setting,
isProd,
isLinux,
})
usePlayer({ setting })
const handleEnvParams = useHandleEnvParams()
const initData = useDataInit({
setting,
})
getEnvParams().then(envParams => {
// 初始化我的列表、下载列表等数据
initData().then(() => {
handleEnvParams(envParams) // 处理传入的启动参数
})
})
}

175
src/renderer/core/useApp/useDataInit.js Normal file
View File

@ -0,0 +1,175 @@
import { useCommit, useRefGetter } from '@renderer/utils/vueTools'
import { getPlayList } from '@renderer/utils'
import { getPlayInfo, getSearchHistoryList } from '@renderer/utils/tools'
import { initListPosition, initListPrevSelectId } from '@renderer/utils/data'
import music from '@renderer/utils/music'
import { log } from '@common/utils'
import {
defaultList as stateDefaultList,
loveList as stateloveList,
userLists as stateUserLists,
tempList as stateTempList,
} from '@renderer/core/share/list'
import { getList } from '@renderer/core/share/utils'
import { downloadStatus, downloadList } from '@renderer/core/share/download'
import useSaveData from './useSaveData'
import useInitUserApi from './useInitUserApi'
const useListInit = ({
saveMyListThrottle,
}) => {
const initList = useCommit('list', 'initList')
const updateDownloadList = useCommit('download', 'initDownloadList')
const initMyList = ({ defaultList, loveList, userList, tempList }) => {
if (!defaultList) defaultList = { ...stateDefaultList }
if (!loveList) loveList = { ...stateloveList }
if (!tempList) tempList = { ...stateTempList }
if (userList) {
let needSave = false
const getListId = id => id.includes('.') ? getListId(id.substring(0, id.lastIndexOf('_'))) : id
userList.forEach(l => {
if (!l.id.includes('__') || l.source) return
let [source, id] = l.id.split('__')
id = getListId(id)
l.source = source
l.sourceListId = id
if (!needSave) needSave = true
})
if (needSave) saveMyListThrottle({ userList })
} else {
userList = [...stateUserLists]
}
if (!defaultList.list) defaultList.list = []
if (!loveList.list) loveList.list = []
if (!tempList.list) tempList.list = []
initList({ defaultList, loveList, userList, tempList })
}
const initDownloadList = list => {
if (list) {
list = list.filter(item => item?.key)
for (const item of list) {
if (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING) {
item.status = downloadStatus.PAUSE
item.statusText = '暂停下载'
}
if (!item.metadata) { // 转换v1.15.3及以前的任务信息
if (item.name == null) {
item.name = `${item.musicInfo.name} - ${item.musicInfo.singer}`
item.songmid = item.musicInfo.songmid
}
item.metadata = {
musicInfo: item.musicInfo,
url: item.url,
type: item.type,
ext: item.ext,
fileName: item.fileName,
filePath: item.filePath,
}
delete item.musicInfo
delete item.url
delete item.type
delete item.ext
delete item.fileName
delete item.filePath
}
}
updateDownloadList(list)
}
}
return () => {
return getPlayList().then(({ defaultList, loveList, userList, tempList, downloadList }) => {
initMyList({ defaultList, loveList, userList, tempList })
initDownloadList(downloadList) // 初始化下载列表
})
}
}
const usePlayInfoInit = () => {
const setPlayList = useCommit('player', 'setList')
return downloadList => {
return getPlayInfo().then(info => {
window.restorePlayInfo = null
if (!info) return
if (info.index < 0) return
if (info.listId) {
if (info.listId == 'download') {
const list = downloadList
// console.log(list)
if (!list || !list[info.index]) return
info.list = list
} else {
const list = getList(info.listId)
// console.log(list)
if (!list[info.index]) return
info.list = list
}
}
if (!info.list || !info.list[info.index]) return
window.restorePlayInfo = info
setPlayList({
listId: info.listId,
index: info.index,
})
})
}
}
const useSearchHistoryInit = () => {
const setSearchHistoryList = useCommit('search', 'setHistory')
return saveSearchHistoryListThrottle => {
return getSearchHistoryList().then(historyList => {
if (historyList == null) {
historyList = []
saveSearchHistoryListThrottle(historyList)
} else {
setSearchHistoryList(historyList)
}
})
}
}
export default ({
setting,
}) => {
const searchHistoryList = useRefGetter('search', 'historyList')
// 数据保存初始化
const { saveMyListThrottle, saveSearchHistoryListThrottle } = useSaveData({
setting,
searchHistoryList,
})
const initUserApi = useInitUserApi({ setting })
// 列表初始化
const initList = useListInit({
saveMyListThrottle,
})
// 播放信息初始化
const initPlayInfo = usePlayInfoInit()
// 搜索历史初始化
const initSearchHistory = useSearchHistoryInit()
return async() => {
await Promise.all([
initListPosition(), // 列表位置记录
initListPrevSelectId(), // 上次选中的列表记录
initUserApi(), // 自定义API
music.init(), // 初始化音乐sdk
]).catch(err => log.error(err))
await initList().catch(err => log.error(err)) // 初始化列表
await initPlayInfo(downloadList.value).catch(err => log.error(err)) // 初始化上次的歌曲播放信息
await initSearchHistory(saveSearchHistoryListThrottle).catch(err => log.error(err)) // 初始化搜索历史记录
}
}

82
src/renderer/core/useApp/useEventListener.js Normal file
View File

@ -0,0 +1,82 @@
import { openUrl } from '@renderer/utils'
import { base as eventBaseName } from '@renderer/event/names'
import { onSetConfig } from '@renderer/utils/tools'
import {
toRaw,
useCommit,
onBeforeUnmount,
watchEffect,
useRefGetter,
} from '@renderer/utils/vueTools'
const handle_key_esc_down = ({ event }) => {
if (event.repeat) return
if (event.target.tagName != 'INPUT' || event.target.classList.contains('ignore-esc')) return
event.target.value = ''
event.target.blur()
}
const handleBodyClick = event => {
if (event.target.tagName != 'A') return
if (event.target.host == window.location.host) return
event.preventDefault()
if (/^https?:\/\//.test(event.target.href)) openUrl(event.target.href)
}
export default ({
dieableIgnoreMouseEvents,
enableIgnoreMouseEvents,
setting,
isProd,
isLinux,
}) => {
const setSetting = useCommit('setSetting')
const windowSizeActive = useRefGetter('windowSizeActive')
watchEffect(() => {
document.documentElement.style.fontSize = windowSizeActive.value.fontSize
})
watchEffect(() => {
if (setting.value.isShowAnimation) {
if (document.body.classList.contains('disableAnimation')) {
document.body.classList.remove('disableAnimation')
}
} else {
if (!document.body.classList.contains('disableAnimation')) {
document.body.classList.add('disableAnimation')
}
}
})
const rSetConfig = onSetConfig((event, config) => {
setSetting(Object.assign({}, toRaw(setting.value), config))
window.eventHub.emit(eventBaseName.set_config, config)
})
window.eventHub.emit(eventBaseName.bindKey)
window.eventHub.on('key_escape_down', handle_key_esc_down)
document.body.addEventListener('click', handleBodyClick, true)
if (isProd && !window.dt && !isLinux) {
document.body.addEventListener('mouseenter', enableIgnoreMouseEvents)
document.body.addEventListener('mouseleave', dieableIgnoreMouseEvents)
const dom_root = document.getElementById('root')
dom_root.addEventListener('mouseenter', dieableIgnoreMouseEvents)
dom_root.addEventListener('mouseleave', enableIgnoreMouseEvents)
}
onBeforeUnmount(() => {
window.eventHub.off('key_escape_down', handle_key_esc_down)
document.body.removeEventListener('click', handleBodyClick)
window.eventHub.emit(eventBaseName.unbindKey)
rSetConfig()
if (isProd && !window.dt && !isLinux) {
document.body.removeEventListener('mouseenter', enableIgnoreMouseEvents)
document.body.removeEventListener('mouseleave', dieableIgnoreMouseEvents)
const dom_root = document.getElementById('root')
dom_root.removeEventListener('mouseenter', dieableIgnoreMouseEvents)
dom_root.removeEventListener('mouseleave', enableIgnoreMouseEvents)
}
})
}

101
src/renderer/core/useApp/useHandleEnvParams.js Normal file
View File

@ -0,0 +1,101 @@
import { useAction, useCommit, useRouter } from '@renderer/utils/vueTools'
import { parseUrlParams } from '@renderer/utils'
import { defaultList, loveList, userLists } from '@renderer/core/share/list'
import { getList } from '@renderer/core/share/utils'
const getListPlayIndex = (list, index) => {
if (index == null) {
index = 1
} else {
index = parseInt(index)
if (Number.isNaN(index)) {
index = 1
} else {
if (index < 1) index = 1
else if (index > list.length) index = list.length
}
}
return index - 1
}
const useInitEnvParamSearch = () => {
const router = useRouter()
return search => {
if (search == null) return
router.push({
path: 'search',
query: {
text: search,
},
})
}
}
const useInitEnvParamPlay = () => {
const getListDetailAll = useAction('songList', 'getListDetailAll')
const setPlayList = useCommit('player', 'setList')
const setTempList = useCommit('player', 'setTempList')
const playSongListDetail = async(source, link, playIndex) => {
if (link == null) return
let list
try {
list = await getListDetailAll({ source, id: decodeURIComponent(link) })
} catch (err) {
console.log(err)
}
setTempList({
list,
index: getListPlayIndex(list, playIndex),
})
}
return (playStr) => {
if (playStr == null || typeof playStr != 'string') return
// -play="source=kw&link=链接、ID"
// -play="source=myList&name=名字"
// -play="source=myList&name=名字&index=位置"
const params = parseUrlParams(playStr)
if (params.type != 'songList') return
switch (params.source) {
case 'myList':
if (params.name != null) {
let targetList
const lists = [defaultList, loveList, ...userLists]
for (const list of lists) {
if (list.name === params.name) {
targetList = list
break
}
}
if (!targetList) return
setPlayList({
listId: targetList.id,
index: getListPlayIndex(getList(targetList.id), params.index),
})
}
break
case 'kw':
case 'kg':
case 'tx':
case 'mg':
case 'wy':
playSongListDetail(params.source, params.link, params.index)
break
}
}
}
export default () => {
// 处理启动参数 search
const initEnvParamSearch = useInitEnvParamSearch()
// 处理启动参数 play
const initEnvParamPlay = useInitEnvParamPlay()
return envParams => {
initEnvParamSearch(envParams.search)
initEnvParamPlay(envParams.play)
}
}

86
src/renderer/core/useApp/useInitUserApi.js Normal file
View File

@ -0,0 +1,86 @@
import { onBeforeUnmount } from '@renderer/utils/vueTools'
import { onUserApiStatus, setUserApi, getUserApiList, userApiRequest, userApiRequestCancel } from '@renderer/utils/tools'
import apiSourceInfo from '@renderer/utils/music/api-source-info'
import music from '@renderer/utils/music'
import { apiSource, qualityList, userApi } from '@renderer/core/share'
export default ({ setting }) => {
if (/^user_api/.test(setting.value.apiSource)) {
setUserApi(setting.value.apiSource)
} else {
qualityList.value = music.supportQuality[setting.value.apiSource]
}
const rUserApiStatus = onUserApiStatus(({ status, message, apiInfo }) => {
userApi.status = status
userApi.message = message
if (status) {
if (apiInfo.id === setting.value.apiSource) {
let apis = {}
let qualitys = {}
for (const [source, { actions, type, qualitys: sourceQualitys }] of Object.entries(apiInfo.sources)) {
if (type != 'music') continue
apis[source] = {}
for (const action of actions) {
switch (action) {
case 'musicUrl':
apis[source].getMusicUrl = (songInfo, type) => {
const requestKey = `request__${Math.random().toString().substring(2)}`
return {
canceleFn() {
userApiRequestCancel(requestKey)
},
promise: userApiRequest({
requestKey,
data: {
source: source,
action: 'musicUrl',
info: {
type,
musicInfo: songInfo,
},
},
}).then(res => {
// console.log(res)
if (!/^https?:/.test(res.data.url)) return Promise.reject(new Error('Get url failed'))
return { type, url: res.data.url }
}).catch(err => {
console.log(err.message)
return Promise.reject(err)
}),
}
}
break
default:
break
}
}
qualitys[source] = sourceQualitys
}
qualityList.value = qualitys
userApi.apis = apis
}
}
})
onBeforeUnmount(() => {
rUserApiStatus()
})
return () => {
return getUserApiList().then(list => {
// console.log(list)
if (![...apiSourceInfo.map(s => s.id), ...list.map(s => s.id)].includes(setting.value.apiSource)) {
console.warn('reset api')
let api = apiSourceInfo.find(api => !api.disabled)
if (api) apiSource.value = api.id
}
userApi.list = list
}).catch(err => {
console.log(err)
})
}
}

15
src/renderer/core/useApp/usePlayer/index.js Normal file
View File

@ -0,0 +1,15 @@
import {
createAudio,
} from '@renderer/plugins/player'
import useMediaDevice from './useMediaDevice'
import usePlayerEvent from './usePlayerEvent'
import usePlayer from './usePlayer'
export default ({ setting }) => {
createAudio()
usePlayerEvent()
useMediaDevice({ setting }) // 初始化音频驱动输出设置
usePlayer({ setting })
}

Some files were not shown because too many files have changed in this diff Show More