完成桌面歌词功能
宇天
parent
007eeac8e3
commit
8b426dd6c0
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 开发计划
|
## 开发计划 & 进度
|
||||||
|
|
||||||
- [x] 主界面框架
|
- [x] 主界面框架
|
||||||
- [x] 后台播放
|
- [x] 后台播放
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
- [ ] 酷狗音乐MV
|
- [ ] 酷狗音乐MV
|
||||||
- [ ] 试听列表
|
- [ ] 试听列表
|
||||||
- [ ] 均衡器
|
- [ ] 均衡器
|
||||||
- [ ] 桌面歌词
|
- [x] 桌面歌词
|
||||||
- [ ] 迷你模式
|
- [ ] 迷你模式
|
||||||
- [ ] 多媒体快捷键
|
- [ ] 多媒体快捷键
|
||||||
- [ ] 铃声制作(犹豫中)
|
- [ ] 铃声制作(犹豫中)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
.do-fn-drag{-webkit-app-region:drag;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.do-fn-nodrag{-webkit-app-region:no-drag}html{font-size:62.5%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:transparent;font-size:1.4rem;color:#62778d}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .quit,body .lock{visibility:hidden;position:absolute;z-index:9;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold}body .quit:hover,body .lock:hover{color:#ff5061}body .lock{right:4rem}body .lock.actived{color:#dae1e9}body:hover{background:rgba(29,35,44,0.2)}body:hover .quit,body:hover .lock{visibility:visible}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
/**
|
||||||
|
* 桌面歌词样式
|
||||||
|
* @authors yutent<yutent@doui.cc>
|
||||||
|
* @date 2019/01/17 19:41:52
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
@import "./var.scss";
|
||||||
|
|
||||||
|
.do-fn-drag {-webkit-app-region:drag;user-select: none;}
|
||||||
|
.do-fn-nodrag {-webkit-app-region:no-drag;}
|
||||||
|
|
||||||
|
html {font-size:62.5%}
|
||||||
|
body {position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:transparent;font-size:1.4rem;color:nth($cd, 1);
|
||||||
|
|
||||||
|
|
||||||
|
.lrc-box {position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem;
|
||||||
|
|
||||||
|
section {flex:1;display:flex;
|
||||||
|
|
||||||
|
&.left {justify-content:flex-start;}
|
||||||
|
&.right {justify-content:flex-end}
|
||||||
|
|
||||||
|
span {background-clip:text!important;color:transparent;
|
||||||
|
|
||||||
|
&.shadow {text-shadow:0 0 .5rem rgba(0, 0, 0, .5);}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.quit,
|
||||||
|
.lock {visibility:hidden;position:absolute;z-index:9;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold;
|
||||||
|
&:hover {color:nth($cr, 1)}
|
||||||
|
}
|
||||||
|
.lock {right:4rem;
|
||||||
|
|
||||||
|
&.actived {color:nth($cp, 3)}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&:hover {background:rgba(29, 35, 44, 0.2);
|
||||||
|
|
||||||
|
.quit, .lock {visibility:visible;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||||
|
<link href="lib/css/reset-basic.css" rel="stylesheet">
|
||||||
|
<link href="/css/desktop-lrc.css" rel="stylesheet">
|
||||||
|
<script>window.LIBS_BASE_URL = location.origin + '/lib';window.__ENV_LANG__ = 'zh'</script>
|
||||||
|
<script type="module" src="js/desktop-lrc.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="do-fn-drag" anot="lrc">
|
||||||
|
<div class="lrc-box">
|
||||||
|
<section class="left">
|
||||||
|
<span class="shadow" :text="lrc.l.txt"></span>
|
||||||
|
</section>
|
||||||
|
<section class="right">
|
||||||
|
<span class="shadow" :text="lrc.r.txt"></span>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="lrc-box">
|
||||||
|
<section class="left">
|
||||||
|
<span :text="lrc.l.txt" :css="{background: lrc.l.bg}"></span>
|
||||||
|
</section>
|
||||||
|
<section class="right">
|
||||||
|
<span :text="lrc.r.txt" :css="{background: lrc.r.bg}"></span>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="do-icon-lock lock" :class="{actived: isLock}" :click="lock"></a>
|
||||||
|
<a class="do-icon-close quit" :click="quit"></a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -154,7 +154,7 @@
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
<span class="ctrl s-icon-eq"></span>
|
<span class="ctrl s-icon-eq"></span>
|
||||||
<span class="ctrl lrc">词</span>
|
<span class="ctrl lrc" :click="toggleDesktopLrc">词</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
30
js/app.js
30
js/app.js
|
|
@ -26,6 +26,8 @@ const path = require('path')
|
||||||
const { remote } = require('electron')
|
const { remote } = require('electron')
|
||||||
|
|
||||||
const WIN = remote.getCurrentWindow()
|
const WIN = remote.getCurrentWindow()
|
||||||
|
const CURR_SCREEN = remote.screen.getPrimaryDisplay()
|
||||||
|
|
||||||
const HOME_PATH = remote.app.getPath('appData')
|
const HOME_PATH = remote.app.getPath('appData')
|
||||||
const APP_INI_PATH = path.join(HOME_PATH, 'app.ini')
|
const APP_INI_PATH = path.join(HOME_PATH, 'app.ini')
|
||||||
const LYRICS_PATH = path.join(HOME_PATH, 'lyrics')
|
const LYRICS_PATH = path.join(HOME_PATH, 'lyrics')
|
||||||
|
|
@ -65,6 +67,26 @@ Anot.ss('app-init', appInit + '')
|
||||||
|
|
||||||
appInit = JSON.parse(appInit)
|
appInit = JSON.parse(appInit)
|
||||||
|
|
||||||
|
const LRC_WIN = new remote.BrowserWindow({
|
||||||
|
title: '',
|
||||||
|
width: 1024,
|
||||||
|
height: 100,
|
||||||
|
frame: false,
|
||||||
|
resizable: false,
|
||||||
|
alwaysOnTop: true,
|
||||||
|
x: (CURR_SCREEN.size.width - 1024) / 2,
|
||||||
|
y: CURR_SCREEN.size.height - 100,
|
||||||
|
skipTaskbar: true,
|
||||||
|
hasShadow: false,
|
||||||
|
thickFrame: false,
|
||||||
|
transparent: true,
|
||||||
|
show: false
|
||||||
|
})
|
||||||
|
// LRC_WIN.setIgnoreMouseEvents(true)
|
||||||
|
window.LRC_WIN = LRC_WIN
|
||||||
|
|
||||||
|
LRC_WIN.loadURL('app://sonist/desktop-lrc.html')
|
||||||
|
|
||||||
Anot({
|
Anot({
|
||||||
$id: 'app',
|
$id: 'app',
|
||||||
state: {
|
state: {
|
||||||
|
|
@ -172,6 +194,7 @@ Anot({
|
||||||
// ktv模式的歌词
|
// ktv模式的歌词
|
||||||
LYRICS.on('ktv-lrc', lrc => {
|
LYRICS.on('ktv-lrc', lrc => {
|
||||||
this.lrc = lrc
|
this.lrc = lrc
|
||||||
|
LRC_WIN.emit('ktv-lrc', lrc)
|
||||||
})
|
})
|
||||||
|
|
||||||
// ktv模式的歌词
|
// ktv模式的歌词
|
||||||
|
|
@ -222,6 +245,13 @@ Anot({
|
||||||
toggleOptBox() {
|
toggleOptBox() {
|
||||||
this.optBoxShow = !this.optBoxShow
|
this.optBoxShow = !this.optBoxShow
|
||||||
},
|
},
|
||||||
|
toggleDesktopLrc() {
|
||||||
|
if (LRC_WIN.isVisible()) {
|
||||||
|
LRC_WIN.hide()
|
||||||
|
} else {
|
||||||
|
LRC_WIN.show()
|
||||||
|
}
|
||||||
|
},
|
||||||
toggleModule(mod) {
|
toggleModule(mod) {
|
||||||
if ('mv' === mod) {
|
if ('mv' === mod) {
|
||||||
return
|
return
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
/**
|
||||||
|
* {桌面歌词}
|
||||||
|
* @author yutent<yutent@doui.cc>
|
||||||
|
* @date 2019/01/17 19:35:29
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
import '/lib/anot.next.js'
|
||||||
|
|
||||||
|
const { remote } = require('electron')
|
||||||
|
|
||||||
|
const WIN = remote.getCurrentWindow()
|
||||||
|
|
||||||
|
Anot({
|
||||||
|
$id: 'lrc',
|
||||||
|
state: {
|
||||||
|
lrc: {
|
||||||
|
l: { bg: '#fff', txt: '暂无歌词...' },
|
||||||
|
r: { bg: '', txt: '' }
|
||||||
|
},
|
||||||
|
isLock: false
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
WIN.on('ktv-lrc', lrc => {
|
||||||
|
this.lrc = lrc
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
quit(force) {
|
||||||
|
// WIN.close()
|
||||||
|
WIN.hide()
|
||||||
|
},
|
||||||
|
lock() {
|
||||||
|
WIN.setMovable(this.isLock)
|
||||||
|
this.isLock = !this.isLock
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue