完成歌词纠错功能

Readme.md

@@ -33,11 +33,7 @@
 - [ ] 桌面歌词
 - [ ] 迷你模式
 - [ ] 多媒体快捷键
-- [ ] 酷狗账号直接登录(犹豫中)
 - [ ] 铃声制作(犹豫中)
-- [ ] 用户评论/点赞(取决于登陆功能是否开发)
-- [ ] ~~试听下载~~(不再提供下载)
-- [ ] ~~歌曲质量选择~~(默认选择免费级中最高品质的mp3)
 - [ ] 等你来建议
 
 
@@ -54,6 +50,6 @@ npm i && npm start
 
 ## 捐助
 > 开发app其实挺辛苦的。 喜欢我的作品的童鞋, 可以给我打赏个几块钱茶水费, 感激不尽。
->> 没钱的, 可以扫支付宝领红包, 也算支持我了。
+>> 没钱的, 可以扫支付宝领红包, 然后扫第2张付款,只需要付款金额比红包金额多1分钱就可以了, 也算支持我了。
 
 ![1](./ali0.jpg) ![2](./ali1.jpg)

css/app.scss

@@ -45,8 +45,8 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
   tbody td {padding:.9rem .8rem}
 }
 
-::-webkit-scrollbar {width:8px;height:8px;background:none;}
-::-webkit-scrollbar:hover {background:#f3f5fb;}
+::-webkit-scrollbar {width:.6rem;height:.6rem;background:none;}
+::-webkit-scrollbar:hover {background:rgba(255, 255, 255, .1);}
 ::-webkit-scrollbar-button {display:none;}
 ::-webkit-scrollbar-thumb {background:nth($cp, 3);}
 ::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);}
@@ -246,6 +246,43 @@ table {overflow:auto;display:table;width:100%;line-height:2.5rem;
       
         &:hover {opacity:1;transform:translateX(0)}
       }
+
+
+      .search-box {display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;z-index:82;width:100%;height:56rem;background:rgba(29, 35, 44, 0.5);backdrop-filter:blur(.4rem);
+      
+        .content {width:60rem;height:auto;padding:2rem;background:rgba(255, 255, 255, .8);color:nth($cd, 1);
+        
+          .title {height:3rem;line-height:2rem;font-size:1.4rem;text-align:center;
+          
+            i {float:right;font-size:2rem;color:nth($cr, 1);}
+          }
+
+          .section {height:3.5rem;
+            
+            input {width:100%;}
+          }
+
+          .result {overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255, 255, 255, .2);
+          
+            .item  {display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center;
+
+              &:nth-child(1) {line-height:2;border-bottom:.1rem solid nth($cgr, 1);}
+            
+              span {flex:1;
+              
+                &:nth-child(1) {flex:3}
+              }
+            }
+          
+          }
+        
+        }
+      
+      
+      }
+
+
+
     }
   
   }

index.html

@@ -109,48 +109,8 @@
   <div 
     class="ktv-box" 
     :if="ktvMode" 
+    :include="'/views/ktv.htm'"
     :css="{'background-image': coverBG}">
-
-    <div class="inner-content">
-      <div class="info">
-        <img :attr-src="curr.cover" :click="toggleLrcView" />
-        <div class="summary" :visible="!allLrcView">
-          <h3 :text="curr.title"></h3>
-          <section>歌手: {{curr.artist}}</section>
-          <section>专辑: {{curr.album}}</section>
-          <section>时长: {{curr.duration | time}}</section>
-        </div>
-        <div class="summary" :visible="allLrcView">
-          <pre class="summary" :text="allLrc"></pre>
-        </div>
-        
-      </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>
-
-      <div class="tool-box">
-        <section class="item" :click="forwardLrc(-0.5)">
-          <i class="do-icon-trigon-up"></i>歌词 -0.5s
-        </section>
-        <section class="item">
-          <i class="do-icon-search"></i>歌词有误
-        </section>
-        <section class="item" :click="layer.alert('歌词编辑功能暂时未开放')">
-          <i class="do-icon-edit"></i>歌词编辑
-        </section>
-        <section class="item" :click="forwardLrc(0.5)">
-          <i class="do-icon-trigon-down"></i>歌词 +0.5s
-        </section>
-      </div>
-
-    </div>
   </div>
 
 

js/app.js

@@ -16,6 +16,8 @@ import Artist from '/js/modules/artist.js'
 import Local from '/js/modules/local.js'
 import Profile from '/js/modules/profile.js'
 
+import KTV from '/js/modules/ktv.js'
+
 const log = console.log
 
 const fs = require('iofs')
@@ -84,12 +86,7 @@ Anot({
       duration: 0
     },
     ctrlLrc: '暂无歌词...',
-    allLrcView: false,
-    allLrc: '',
-    lrc: {
-      l: { bg: '', txt: '' },
-      r: { bg: '', txt: '' }
-    }
+    ...KTV.data
   },
   skip: [],
   computed: {
@@ -222,10 +219,6 @@ Anot({
       }
     },
 
-    toggleLrcView() {
-      this.allLrcView = !this.allLrcView
-    },
-
     toggleOptBox() {
       this.optBoxShow = !this.optBoxShow
     },
@@ -261,11 +254,6 @@ Anot({
       Anot.ls('volume', volume)
     },
 
-    forwardLrc(time) {
-      LYRICS.forward(time)
-      layer.toast(`歌词已${time > 0 ? '提前' : '延后'} ${time} 秒`)
-    },
-
     __draw__() {
       let play = this.isPlaying
       let rx = (play ? 112 : 40) + this.__HEIGHT__ / 2 // 旋转唱片的圆心坐标X
@@ -427,6 +415,7 @@ Anot({
           }
         }
       }
-    }
+    },
+    ...KTV.methods
   }
 })

js/modules/ktv.js

@@ -0,0 +1,114 @@
+/**
+ * ktv模块
+ * @author yutent<yutent@doui.cc>
+ * @date 2019/01/13 21:43:50
+ */
+
+'use strict'
+
+import Api from '/js/api.js'
+import Local from '/js/modules/local.js'
+
+const fs = require('iofs')
+const path = require('path')
+const { app } = require('electron').remote
+
+const HOME_PATH = app.getPath('appData')
+const MUSIC_DB_PATH = path.join(HOME_PATH, 'music.db')
+const LYRICS_PATH = path.join(HOME_PATH, 'lyrics')
+const log = console.log
+
+export default {
+  data: {
+    allLrcView: false,
+    allLrc: '',
+    lrc: {
+      l: { bg: '', txt: '' },
+      r: { bg: '', txt: '' }
+    },
+    lrcSearchBoxShow: false,
+    lrcForm: {
+      input: '',
+      __input__: '', //缓存之前的搜索词
+      result: []
+    }
+  },
+  methods: {
+    forwardLrc(time) {
+      LYRICS.forward(time)
+      layer.toast(`歌词已${time > 0 ? '提前' : '延后'} ${time} 秒`)
+    },
+    toggleLrcView() {
+      this.allLrcView = !this.allLrcView
+    },
+    showLrcSearch() {
+      this.lrcForm.input = `${this.curr.artist} ${this.curr.title}`
+      this.lrcSearchBoxShow = true
+      this.searchLrc({ keyCode: 13 })
+    },
+    closeLrcSearch() {
+      this.lrcSearchBoxShow = false
+    },
+    searchLrc(e) {
+      if (e.keyCode === 13) {
+        let { input, __input__ } = this.lrcForm
+
+        // 搜索词未变,直接忽略
+        if (input === __input__) {
+          return
+        }
+
+        Api.search(input).then(list => {
+          this.lrcForm.__input__ = input
+          this.lrcForm.result = list.map(it => {
+            return {
+              title: it.SongName,
+              artist: it.SingerName,
+              album: it.AlbumName,
+              albumId: it.AlbumID,
+              duration: it.Duration,
+              hash: it.FileHash
+            }
+          })
+          log(list, this.lrcForm.result)
+        })
+      }
+    },
+
+    useThisLrc(it) {
+      Api.getSongInfoByHash(it.hash, it.albumId).then(json => {
+        if (json.lyrics) {
+          let { id } = SONIST.getCurrSong()
+
+          let song = LS.get(id)
+
+          song.album = json.album_name
+          song.albumId = json.album_id
+          song.kgHash = json.hash
+          song.cover = json.img
+          song.lyrics = path.join(LYRICS_PATH, `${song.id}.lrc`)
+
+          LS.insert(song)
+          Local.list.set(SONIST.__CURR__, song)
+
+          SONIST.clear()
+          SONIST.push(LS.getAll())
+
+          this.updateCurr(song)
+          this.draw(true)
+
+          fs.echo(json.lyrics, song.lyrics)
+          fs.echo(JSON.stringify(LS.getAll(), '', 2), MUSIC_DB_PATH)
+
+          LYRICS.__init__(song.lyrics)
+
+          layer.toast('歌词应用成功...')
+
+          this.closeLrcSearch()
+        } else {
+          layer.alert('该歌曲没有上传歌词...')
+        }
+      })
+    }
+  }
+}

js/modules/local.js

@@ -75,12 +75,13 @@ export default Anot({
     __updateSong__(it, idx) {
       if (!it.cover) {
         if (idx === undefined) {
-          for (let i in this.list.$model) {
-            if (this.list[i].id === it.id) {
-              idx = i
-              break
-            }
-          }
+          idx = SONIST.__CURR__
+          // for (let i in this.list.$model) {
+          //   if (this.list[i].id === it.id) {
+          //     idx = i
+          //     break
+          //   }
+          // }
         }
         let _P = Promise.resolve(true)
         if (!it.kgHash) {
@@ -104,8 +105,8 @@ export default Anot({
               it.cover = json.img
               it.lyrics = path.join(LYRICS_PATH, `${it.id}.lrc`)
 
-              this.list.set(idx, it)
               LS.insert(it)
+              this.list.set(idx, it)
 
               SONIST.clear()
               SONIST.push(LS.getAll())

lib/audio/index.js

@@ -65,6 +65,13 @@ class AudioPlayer {
     this.__LIST__.push.apply(this.__LIST__, songs)
   }
 
+  getCurrSong() {
+    if (this.__CURR__ > -1) {
+      return this.__LIST__[this.__CURR__]
+    }
+    return null
+  }
+
   // 上一首
   prev() {
     let id = this.__CURR__

views/ktv.htm

@@ -0,0 +1,71 @@
+<div class="inner-content">
+  <div class="info">
+    <img :attr-src="curr.cover" :click="toggleLrcView" />
+    <div class="summary" :visible="!allLrcView">
+      <h3 :text="curr.title"></h3>
+      <section>歌手: {{curr.artist}}</section>
+      <section>专辑: {{curr.album}}</section>
+      <section>时长: {{curr.duration | time}}</section>
+    </div>
+    <div class="summary" :visible="allLrcView">
+      <pre class="summary" :text="allLrc"></pre>
+    </div>
+    
+  </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>
+
+  <div class="tool-box">
+    <section class="item" :click="forwardLrc(-0.5)">
+      <i class="do-icon-trigon-up"></i>歌词 -0.5s
+    </section>
+    <section class="item" :click="showLrcSearch">
+      <i class="do-icon-search"></i>歌词有误
+    </section>
+    <section class="item" :click="layer.alert('歌词编辑功能暂时未开放')">
+      <i class="do-icon-edit"></i>歌词编辑
+    </section>
+    <section class="item" :click="forwardLrc(0.5)">
+      <i class="do-icon-trigon-down"></i>歌词 +0.5s
+    </section>
+  </div>
+
+
+  <div class="search-box" :if="lrcSearchBoxShow">
+    <div class="content">
+      <div class="title">歌词搜索 <i class="do-icon-close" :click="closeLrcSearch"></i></div>
+      <section class="section">
+        <input 
+          class="do-ui-input" 
+          placeholder="请输入歌名搜索"
+          :keyup="searchLrc"
+          :duplex="lrcForm.input" >
+      </section>
+      <ul class="result">
+        <li class="item">
+          <span>歌名</span>
+          <span>歌手</span>
+          <span>专辑</span>
+          <span>时长</span>
+          <span>操作</span>
+        </li>
+        <li class="item" :for="it in lrcForm.result">
+          <span :text="it.title"></span>
+          <span :text="it.artist"></span>
+          <span :text="it.album"></span>
+          <span :text="it.duration | time"></span>
+          <span><a class="do-ui-button blue medium" :click="useThisLrc(it)">使用</a></span>
+        </li>
+        <li class="item" :if="lrcForm.result.size() < 1"><span>没有搜到任何结果...</span></li>
+      </ul>
+    </div>
+  </div>
+
+</div>