feat: 💥 喜欢歌曲列表

cyf · Feb 24, 2022 · 79797b0 · 79797b0
1 parent 48b4b14
commit 79797b0
Show file tree

Hide file tree

Showing 15 changed files with 210 additions and 10 deletions.
diff --git a/.umirc.debug.js b/.umirc.debug.js
@@ -0,0 +1,14 @@
+/*
+ * @Author: RojerChen
+ * @Date: 2020-09-10 12:30:28
+ * @LastEditors: RojerChen
+ * @LastEditTime: 2020-09-11 09:56:06
+ * @FilePath: /fa-forever/.umirc.js
+ * @Company: freesailing.cn
+ */
+// ref: https://umijs.org/config/
+export default {
+  define: {
+    'process.env.APIHOST': 'http://localhost:3001/',
+  },
+};
diff --git a/.umirc.js b/.umirc.js
@@ -9,8 +9,9 @@
 // ref: https://umijs.org/config/
 export default {
   define: {
-    'process.env.VERSION': 'V1.5.2',
+    'process.env.VERSION': 'V1.5.3',
     'process.env.APPNAME': 'FA FOREVER',
+    'process.env.APIHOST': 'http://faforever.eqistu.cn/',
   },
   treeShaking: true,
   outputPath: './web_dist',

diff --git a/.umirc.preview.js b/.umirc.preview.js
@@ -0,0 +1,14 @@
+/*
+ * @Author: RojerChen
+ * @Date: 2020-09-10 12:30:28
+ * @LastEditors: RojerChen
+ * @LastEditTime: 2020-09-11 09:56:06
+ * @FilePath: /fa-forever/.umirc.js
+ * @Company: freesailing.cn
+ */
+// ref: https://umijs.org/config/
+export default {
+  define: {
+    'process.env.APIHOST': 'http://faforever.eqistu.cn/',
+  },
+};
diff --git a/note.txt b/note.txt
@@ -1 +1 @@
-[优化] 2022-01-15优化随机听歌卡顿问题.
+[新功能] 2022-02-24：喜欢歌曲上线
diff --git a/package.json b/package.json
@@ -3,7 +3,8 @@
   "description": "chenyifaer",
   "version": "1.3.0",
   "scripts": {
-    "dev": "concurrently -n=umi,electron -c=blue,green -p=[{name}]  \"umi dev\" \"wait-on http://localhost:8000 && cross-env FA_NODE_ENV=dev electron .\"",
+    "dev": "concurrently -n=umi,electron -c=blue,green -p=[{name}]  \"cross-env UMI_ENV=debug umi dev\" \"wait-on http://localhost:8000 && cross-env FA_NODE_ENV=dev electron .\"",
+    "preview": "concurrently -n=umi,electron -c=blue,green -p=[{name}]  \"cross-env UMI_ENV=preview umi dev\" \"wait-on http://localhost:8000 && cross-env FA_NODE_ENV=dev electron .\"",
     "build": "umi build",
     "umi": "umi dev",
     "package:win": "electron-builder --win --ia32 --x64",

diff --git a/src/apis/index.js b/src/apis/index.js
@@ -43,8 +43,8 @@ export const gecimi = title => {
   return request(`http://gecimi.com/api/lyric/${encodeURIComponent(title)}`);
 };
 
-const API = 'http://faforever.eqistu.cn/';
-// const API = 'http://localhost:3001/';
+const API = process.env.APIHOST;
+
 export const getSid = () => {
   return request('/sid', {
     baseURL: API,
@@ -69,3 +69,19 @@ export const getRandom = () => {
     baseURL: API,
   });
 };
+
+export const getLike = () => {
+  return request('/like', {
+    baseURL: API,
+  });
+};
+
+export const like = path => {
+  return request('/like', {
+    baseURL: API,
+    method: 'POST',
+    data: {
+      path,
+    },
+  });
+};
diff --git a/src/apis/request.js b/src/apis/request.js
@@ -3,6 +3,11 @@ const baseURL = 'http://magict.cn:5000/webapi';
 
 axios.defaults.withCredentials = false;
 
+axios.interceptors.request.use(config => {
+  config.headers['useruuid'] = global.userUUID;
+  return config;
+});
+
 export default (url, option = {}) => {
   return axios.request({
     url,

diff --git a/src/components/like.js b/src/components/like.js
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import { inject, observer } from 'mobx-react';
+import { Icon } from 'antd';
+
+export default inject(
+  'music',
+  'my',
+)(
+  observer(({ path, music, style = {} }) => {
+    const [isLike, setIsLike] = useState(!!music?.likes?.find(i => i.path === path));
+    useEffect(() => {
+      setIsLike(!!music?.likes?.find(i => i.path === path));
+    }, [music?.likes, path]);
+    return (
+      <Icon
+        type="heart"
+        onClick={() => {
+          music.like(path);
+        }}
+        theme={isLike ? 'filled' : 'outlined'}
+        style={{
+          color: '#e04f4c',
+          cursor: 'pointer',
+          ...style,
+        }}
+      />
+    );
+  }),
+);
diff --git a/src/components/musiclist.js b/src/components/musiclist.js
@@ -6,6 +6,7 @@ import { Menu, Item, contextMenu, Submenu } from 'react-contexify';
 import 'moment/locale/zh-cn';
 
 import * as sty from './musiclist.less';
+import Like from './like';
 
 let remote;
 let cache;
@@ -79,6 +80,7 @@ class Index extends React.Component {
           dataSource={current_songs}
           header={
             <List.Item className="header-box">
+              <div className="playing" />
               <div className="playing" />
               <div className="title">标题</div>
               <div className="album">专辑</div>
@@ -109,6 +111,10 @@ class Index extends React.Component {
                   </i>
                 )}
               </div>
+              <div className="playing">
+                <Like path={item.path} />
+              </div>
+
               <div className="title">{item.title}</div>
               <div className="album">{item.additional.song_tag.album}</div>
               <div className="artist">{item.additional.song_tag.artist}</div>

diff --git a/src/components/nav.js b/src/components/nav.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { Spin, Icon, Tag, Divider, Modal, Input } from 'antd';
 import { Menu, Item, contextMenu } from 'react-contexify';
-
 let shell;
 
 if (window.require) {
@@ -18,6 +17,8 @@ class Criteria extends React.Component {
     mylistVisible: false,
     mylistName: '',
     mylistUuid: null,
+    myUUIDVisible: false,
+    myUUID: '',
   };
   componentDidMount() {
     this.load();
@@ -26,6 +27,7 @@ class Criteria extends React.Component {
   load = async () => {
     await this.props.music.loadCriteria();
     await this.props.music.caculateCached();
+    await this.props.music.loadLike();
   };
 
   toggle = active => {
@@ -54,6 +56,11 @@ class Criteria extends React.Component {
         this.props.music.toggle('__cached__');
         this.props.my.toggle('list');
       }
+
+      if (active === 'like') {
+        this.props.music.toggle(this.props.music.likes, 'system_like');
+        this.props.my.toggle('list');
+      }
     } else if (active.uuid) {
       this.setState({
         active: active.uuid,
@@ -79,6 +86,20 @@ class Criteria extends React.Component {
     });
   };
 
+  closeMyUUID = () => {
+    this.setState({
+      myUUIDVisible: false,
+    });
+  };
+
+  openMyUUID = () => {
+    console.log(global.userUUID);
+    this.setState({
+      myUUIDVisible: true,
+      myUUID: global.userUUID,
+    });
+  };
+
   render() {
     const { active, mylistVisible = false, mylistName = '', mylistUuid = null } = this.state;
     const { list = [] } = this.props.my;
@@ -111,6 +132,42 @@ class Criteria extends React.Component {
           />
         </Modal>
 
+        <Modal
+          visible={this.state.myUUIDVisible}
+          title={'您的UUID'}
+          onCancel={this.closeMyUUID}
+          onOk={() => {
+            if (this.state.myUUID) {
+              global.myUUID = this.state.myUUID;
+              localStorage.uuid = this.state.myUUID;
+            }
+            this.closeMyUUID();
+            this.props.music.loadLike();
+          }}
+        >
+          <Input
+            placeholder="请输入您的UUID"
+            value={this.state.myUUID}
+            onInput={e => {
+              this.setState({
+                myUUID: e.currentTarget.value,
+              });
+            }}
+          />
+          <div
+            style={{
+              fontWeight: 'bold',
+              fontSize: 12,
+              color: 'red',
+              marginTop: 10,
+            }}
+          >
+            <div>* 请设置具有个性化且复杂的UUID避免被别人使用</div>
+            <div>* UUID仅关联“我喜欢的音乐”模块，其他模块会在后续慢慢接入。</div>
+            <div>* UUID请不要设置为自己的常用密码，因为UUID在服务端是明文存储的</div>
+          </div>
+        </Modal>
+
         <Menu id="navlist">
           <Item
             onClick={e => {
@@ -170,12 +227,22 @@ class Criteria extends React.Component {
             </li>
 
             <Divider />
+
             <li>
               <span style={{ fontWeight: 800 }}>我创建的歌单</span>
               <div className="btn" onClick={this.openMylistCreator.bind(this, null, null)}>
                 <Icon type="plus" />
               </div>
             </li>
+
+            <li
+              className={`${active === 'like' ? 'active' : ''} my`}
+              onClick={this.toggle.bind(this, 'like')}
+            >
+              <span>我喜欢的音乐</span>
+              <Tag>{this.props.music.likes?.length ?? 0}</Tag>
+            </li>
+
             {list.map(item => (
               <li
                 key={item.uuid}
@@ -206,6 +273,20 @@ class Criteria extends React.Component {
             </li>
           </ul>
         </Spin>
+
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 10,
+            left: 10,
+            fontSize: 10,
+            opacity: 0.5,
+            cursor: 'pointer',
+          }}
+          onClick={this.openMyUUID}
+        >
+          设置我的UUID
+        </div>
       </div>
     );
   }

diff --git a/src/components/player.js b/src/components/player.js
@@ -5,6 +5,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import './player.less';
 import Playing from './playlist';
 import Lrc from './lrc';
+import Like from './like';
 
 let ipcRenderer;
 let shell;
@@ -242,6 +243,15 @@ class Criteria extends React.Component {
         )}
 
         <div className="control">
+          <Like
+            path={this.props.music.song.path}
+            style={{
+              fontSize: '120%',
+              marginRight: 20,
+              visibility: this.props.music.song.path ? 'visible' : 'hidden',
+            }}
+          />
+
           <Button
             type="primary"
             shape="circle"

diff --git a/src/global.js b/src/global.js
@@ -1,10 +1,18 @@
+import { v4 } from 'uuid';
+
 let ipcRenderer;
 
 if (window.require) {
   const electron = window.require('electron');
   ({ ipcRenderer } = electron);
 }
 
+global.userUUID = localStorage.uuid;
+if (!global.userUUID) {
+  global.userUUID = v4();
+  localStorage.uuid = global.userUUID;
+}
+
 (function() {
   // The constrcutor can be empty or passed in the lrc string
   var Lyricer = function(options) {

diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -60,7 +60,7 @@ class Index extends React.Component {
 
   setCachePath = () => {
     remote.dialog.showOpenDialog({ properties: ['openDirectory'] }, filename => {
-      if (filename.length === 1) {
+      if (filename && filename.length === 1) {
         // console.log(filename[0]);
         localStorage.setItem('cache-path', filename[0]);
         ipcRenderer && ipcRenderer.send('cache-path', filename[0]);

diff --git a/src/layouts/index.less b/src/layouts/index.less
@@ -59,6 +59,7 @@
       justify-content: space-between;
       height: ~'calc(100vh - 50px - 70px)';
       .nav {
+        position: relative;
         width: 220px;
         background-color: #f5f5f7;
         height: ~'calc(100vh - 50px - 70px)';
@@ -68,8 +69,7 @@
           list-style: none;
           width: 220px;
           li {
-
-            &.my{
+            &.my {
               padding-left: 25px;
             }
             display: flex;
@@ -98,7 +98,7 @@
               margin-right: 5px;
             }
 
-            .btn{
+            .btn {
               cursor: pointer;
             }
           }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		[优化] 2022-01-15优化随机听歌卡顿问题.
		[新功能] 2022-02-24：喜欢歌曲上线