From 8b426dd6c0d782ad06829c1b87d283c3c35bd652 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Thu, 17 Jan 2019 22:06:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=A1=8C=E9=9D=A2=E6=AD=8C?= =?UTF-8?q?=E8=AF=8D=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 4 ++-- css/desktop-lrc.css | 1 + css/desktop-lrc.scss | 50 ++++++++++++++++++++++++++++++++++++++++++++ desktop-lrc.html | 33 +++++++++++++++++++++++++++++ index.html | 2 +- js/app.js | 30 ++++++++++++++++++++++++++ js/desktop-lrc.js | 39 ++++++++++++++++++++++++++++++++++ 7 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 css/desktop-lrc.css create mode 100644 css/desktop-lrc.scss create mode 100644 desktop-lrc.html create mode 100644 js/desktop-lrc.js diff --git a/Readme.md b/Readme.md index f2f88d9..15886fb 100644 --- a/Readme.md +++ b/Readme.md @@ -12,7 +12,7 @@ ![demo](./demo3.jpg) -## 开发计划 +## 开发计划 & 进度 - [x] 主界面框架 - [x] 后台播放 @@ -30,7 +30,7 @@ - [ ] 酷狗音乐MV - [ ] 试听列表 - [ ] 均衡器 -- [ ] 桌面歌词 +- [x] 桌面歌词 - [ ] 迷你模式 - [ ] 多媒体快捷键 - [ ] 铃声制作(犹豫中) diff --git a/css/desktop-lrc.css b/css/desktop-lrc.css new file mode 100644 index 0000000..0d3c566 --- /dev/null +++ b/css/desktop-lrc.css @@ -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} diff --git a/css/desktop-lrc.scss b/css/desktop-lrc.scss new file mode 100644 index 0000000..b8fe7a2 --- /dev/null +++ b/css/desktop-lrc.scss @@ -0,0 +1,50 @@ +@charset "UTF-8"; +/** + * 桌面歌词样式 + * @authors yutent + * @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;} + } + + + +} diff --git a/desktop-lrc.html b/desktop-lrc.html new file mode 100644 index 0000000..21911c3 --- /dev/null +++ b/desktop-lrc.html @@ -0,0 +1,33 @@ + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index b127f18..eb2634b 100644 --- a/index.html +++ b/index.html @@ -154,7 +154,7 @@ - 词 + 词 diff --git a/js/app.js b/js/app.js index 7c41ccc..5f39635 100644 --- a/js/app.js +++ b/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 diff --git a/js/desktop-lrc.js b/js/desktop-lrc.js new file mode 100644 index 0000000..60cf85c --- /dev/null +++ b/js/desktop-lrc.js @@ -0,0 +1,39 @@ +/** + * {桌面歌词} + * @author yutent + * @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 + } + } +})