完成桌面歌词功能
宇天
parent
007eeac8e3
commit
8b426dd6c0
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
|
||||
|
||||
## 开发计划
|
||||
## 开发计划 & 进度
|
||||
|
||||
- [x] 主界面框架
|
||||
- [x] 后台播放
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
- [ ] 酷狗音乐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>
|
||||
</section>
|
||||
<span class="ctrl s-icon-eq"></span>
|
||||
<span class="ctrl lrc">词</span>
|
||||
<span class="ctrl lrc" :click="toggleDesktopLrc">词</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
30
js/app.js
30
js/app.js
|
|
@ -26,6 +26,8 @@ const path = require('path')
|
|||
const { remote } = require('electron')
|
||||
|
||||
const WIN = remote.getCurrentWindow()
|
||||
const CURR_SCREEN = remote.screen.getPrimaryDisplay()
|
||||
|
||||
const HOME_PATH = remote.app.getPath('appData')
|
||||
const APP_INI_PATH = path.join(HOME_PATH, 'app.ini')
|
||||
const LYRICS_PATH = path.join(HOME_PATH, 'lyrics')
|
||||
|
|
@ -65,6 +67,26 @@ Anot.ss('app-init', 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({
|
||||
$id: 'app',
|
||||
state: {
|
||||
|
|
@ -172,6 +194,7 @@ Anot({
|
|||
// ktv模式的歌词
|
||||
LYRICS.on('ktv-lrc', lrc => {
|
||||
this.lrc = lrc
|
||||
LRC_WIN.emit('ktv-lrc', lrc)
|
||||
})
|
||||
|
||||
// ktv模式的歌词
|
||||
|
|
@ -222,6 +245,13 @@ Anot({
|
|||
toggleOptBox() {
|
||||
this.optBoxShow = !this.optBoxShow
|
||||
},
|
||||
toggleDesktopLrc() {
|
||||
if (LRC_WIN.isVisible()) {
|
||||
LRC_WIN.hide()
|
||||
} else {
|
||||
LRC_WIN.show()
|
||||
}
|
||||
},
|
||||
toggleModule(mod) {
|
||||
if ('mv' === mod) {
|
||||
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