对maclisten 1进行了设计美化 (#899)

* 美化界面

* 界面美化设计1

* 界面美化设计-修复了小问题

* 修改了用户登陆图标

* min文件压缩

* min文件压缩

* min文件压缩

* fix: husky precommit didn't ignore vendor files

* Update player_thread.js

* Update player_thread.js

* feat: add modern wihte/black theme

* 解决了底部遮挡，和歌词显示

* feat: custom notyf instead of modify lib file

* player_thread相关代码迁移

* 修改音量指针

* chore: revert howler.core.min minify

* update playbar_animation.js

* refactor: move ui code to player.js

* refactor: move animation to player.js

* refactor: avoid use function name like x

* feat: add new theme designers

* fix: playbar_animation not found error

* fix: img src should be ng-src

* 解决打开应用没有显示问题

* fix: lyric not load in load handler

* feat: show prev/next button in random mode

* fix: chaning progress bar will interrupt with playing position

* fix: remove loadpalyj which is missing

Co-authored-by: Listen 1 <[email protected]>

css/cover.css

@@ -167,26 +167,26 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: var(--scrollWidth) !important;
-  height: var(--scrollWidth) !important;
+  width: var(--scrollWidth);
+  height: var(--scrollWidth);
 }
 ::-webkit-scrollbar-button {
-  width: 0 !important;
-  height: 0 !important;
+  width: 0;
+  height: 0;
 }
 ::-webkit-scrollbar-button:start:increment,
 ::-webkit-scrollbar-button:end:decrement {
-  display: none !important;
+  display: none;
 }
 ::-webkit-scrollbar-corner {
-  display: block !important;
+  display: block;
 }
 
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar-thumb {
-  border-radius: 8px !important;
-  border-right: 1px solid transparent !important;
-  border-left: 1px solid transparent !important;
+  border-radius: 8px;
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -196,5 +196,5 @@ body {
   background-color: rgba(255, 255, 255, 0.3);
 }
 ::-webkit-scrollbar-track:hover {
-  background-color: rgba(255, 255, 255, 0.08) !important;
+  background-color: rgba(255, 255, 255, 0.08);
 }

css/hotkeys.css

@@ -13,7 +13,7 @@
   left: 0;
   color: #333;
   font-size: 1em;
-  background-color: rgba(255,255,255,0.9);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 
 .cfp-hotkeys-container.fade {

css/iparanoid2.css

@@ -0,0 +1,80 @@
+/* global settings (theme related) */
+:root {
+  --icon-default-color: #000;
+
+  --text-default-color: #000;
+  --text-subtitle-color: #7a7a7b;
+  /* --text-disable-color: #999999; */
+
+  --lyric-default-color: #666666;
+  --lyric-on-cover-color: #333333;
+  --lyric-important-on-cover-color: #ffffff;
+
+  --link-default-color: #999999;
+  --link-active-color: #323232;
+
+  --line-default-color: #e5e5e5;
+
+  --sidebar-highlight-background-color: #f2f2f3;
+  --sidebar-hover-background-color: #f2f2f3;
+  --sidebar-hover-text-color: #262626;
+
+  --content-background-color: #ffffff;
+
+  --footer-player-bar-cur-background-color: #666666;
+  --search-input-background-color: #f2f2f3;
+
+  --footer-player-bar-cur-button-color: #111111;
+  --footer-player-bar-background-color: #e0e0e0;
+
+  --window-control-border-color: #dddddd;
+
+  --important-color: #335eea;
+
+  --button-background-color: #f5f5f7;
+  --button-border-color: #bebebe;
+  --button-hover-background-color: #dddddd;
+
+  --now-playing-close-icon-color: #666666;
+
+  --disable-song-title-color: #b7b7b7;
+  --windows-border-color: #dddddd;
+
+  --default-border-radius: 10px;
+  --text-default-size: 13px;
+  --h2-title-font-size: 24px;
+  --badge-font-size: 12px;
+  --songlist-odd-background-color: #f5f5f5;
+  --songlist-hover-background-color: #eeeeee;
+
+  --player-icon-color: #666666;
+  --player-icon-hover-color: #666666;
+  --player-right-icon-color: #333333;
+  --player-right-icon-hover-color: #000000;
+
+  --dialog-highlight-color: #e3e3e5;
+  --dialog-background-color: #fafafa;
+  --dialog-text-color: #565656;
+
+  --volume-icon-color: #333333;
+
+  --scroll-color: #c2c2c2;
+
+  --lyric-icon-background-color: #ffffff;
+
+  --footer-background-color: hsla(0, 0%, 100%, 0.86);
+  --nav-background-color: hsla(0, 0%, 100%, 0.86);
+  --color-body-bg: #fff;
+  --white--black: #fff;
+  --black--white: #222;
+  --white--black-background: #222;
+
+  --theme-color: #335eea;
+  --theme-color-ope: rgba(51, 94, 234, 0.4);
+  --theme-color-hover: #eaeffd;
+
+  --sidebar-background: #ebebec;
+  --sidebar-splitter: #1d1d1f;
+
+  --shadow-mask: rgba(30, 30, 30, 0.5);
+}

css/notyf_custom.css

@@ -0,0 +1,7 @@
+.notyf__toast {
+  border-radius: 10px;
+}
+
+.notyf__dismiss-btn {
+  outline: 0;
+}

css/origin2.css

@@ -0,0 +1,77 @@
+/* global settings (theme related) */
+:root {
+  --icon-default-color: #666666;
+
+  --text-default-color: #ffffff;
+  --text-subtitle-color: #7a7a7b;
+
+  --lyric-default-color: #666666;
+  --lyric-on-cover-color: #bbbbbb;
+  --lyric-important-on-cover-color: #ffffff;
+
+  --link-default-color: #999999;
+  --link-active-color: #ffffff;
+
+  --line-default-color: rgba(255, 255, 255, 0.08);
+
+  --sidebar-highlight-background-color: #4d4d4d;
+  --sidebar-hover-background-color: #3c3c3c;
+  --sidebar-hover-text-color: #ffffff;
+
+  --content-background-color: #222;
+
+  --footer-player-bar-background-color: #666666;
+  --footer-player-bar-cur-background-color: #e0e0e0;
+  --search-input-background-color: #323232;
+  --footer-player-bar-cur-button-color: #e0e0e0;
+
+  --window-control-border-color: #dddddd;
+
+  --important-color: #335eea;
+
+  --button-background-color: #323232;
+  --button-border-color: #323232;
+  --button-hover-background-color: #444444;
+
+  --now-playing-close-icon-color: #b3b3b3;
+
+  --disable-song-title-color: #b7b7b7;
+  --windows-border-color: #222;
+
+  --default-border-radius: 10px;
+  --text-default-size: 13px;
+  --h2-title-font-size: 24px;
+  --badge-font-size: 12px;
+  --songlist-odd-background-color: #2d2d2d;
+  --songlist-hover-background-color: #3e3e3e;
+
+  --player-icon-color: #b3b3b3;
+  --player-icon-hover-color: #eeeeee;
+  --player-right-icon-color: #b3b3b3;
+  --player-right-icon-hover-color: #eeeeee;
+
+  --dialog-highlight-color: #444444;
+  --dialog-background-color: #222;
+  --dialog-text-color: #ffffff;
+
+  --volume-icon-color: #b3b3b3;
+
+  --scroll-color: #444444;
+
+  --lyric-icon-background-color: #323232;
+
+  --nav-background-color: rgba(34, 34, 34, 0.86);
+  --color-body-bg: #222;
+  --white--black: #222;
+  --black--white: #fff;
+  --white--black-background: #fff;
+
+  --theme-color: #335eea;
+  --theme-color-ope: rgba(51, 94, 234, 0.4);
+  --theme-color-hover: #bbcdff;
+
+  --sidebar-background: #1d1d1f;
+  --sidebar-splitter: #ebebec;
+
+  --shadow-mask: rgba(0, 0, 0, 0.5);
+}

css/player.css

@@ -4,7 +4,7 @@ a {
 
 .shadow {
   position: fixed;
-  background: rgba(30, 30, 30, 0.9);
+  background: rgba(30, 30, 30, 0.5);
   _position: absolute;
   z-index: 9999;
   top: 0;

i18n/en-US.json

@@ -84,7 +84,7 @@
  "_TOTAL_SONG_PREFIX": "Total ",
  "_TOTAL_SONG_POSTFIX": " Songs",
  "_CLEAR_ALL": "Clear All",
- "_SEARCH_PLACEHOLDER": "Search for song, artist or album",
+ "_SEARCH_PLACEHOLDER": "Search",
  "_LANGUAGE": "Language",
  "_ADD_TO_PLAYLIST_SUCCESS": "Success: Add to My Playlist",
  "_FAVORITE_PLAYLIST_SUCCESS": "Success: Favorite Playlist",
@@ -103,6 +103,8 @@
  "_THEME": "Theme",
  "_THEME_WHITE": "White Theme",
  "_THEME_BLACK": "Black Theme",
+ "_THEME_MODERN_WHITE": "Modern White Theme",
+ "_THEME_MODERN_BLACK": "Modern Black Theme",
  "_AUTO_CHOOSE_SOURCE": "Auto Choose Source",
  "_AUTO_CHOOSE_SOURCE_NOTICE": "Enable choose source from other music platform after fail.",
  "_AUTO_CHOOSE_SOURCE_LIST": "Music Platform to try after fail",

i18n/fr-FR.json

@@ -84,7 +84,7 @@
  "_TOTAL_SONG_PREFIX": "Total ",
  "_TOTAL_SONG_POSTFIX": " Morceaux",
  "_CLEAR_ALL": "Tout effacer",
- "_SEARCH_PLACEHOLDER": "Rechercher un morceau, un artiste ou un album",
+ "_SEARCH_PLACEHOLDER": "Recherche",
  "_LANGUAGE": "Langage",
  "_ADD_TO_PLAYLIST_SUCCESS": "Succès: Ajouter à la Playlist",
  "_FAVORITE_PLAYLIST_SUCCESS": "Success: Favorite Playlist",
@@ -103,6 +103,8 @@
  "_THEME": "Thème",
  "_THEME_WHITE": "Thème blanc",
  "_THEME_BLACK": "Thème foncé",
+ "_THEME_MODERN_WHITE": "Modern White Theme",
+ "_THEME_MODERN_BLACK": "Modern Black Theme",
  "_AUTO_CHOOSE_SOURCE": "Auto Choose Source",
  "_AUTO_CHOOSE_SOURCE_NOTICE": "If play fail, auto choose source from other music platform.",
  "_AUTO_CHOOSE_SOURCE_LIST": "Music Platform to try after fail",

i18n/ko-KR.json

@@ -84,7 +84,7 @@
   "_TOTAL_SONG_PREFIX": "전체 ",
   "_TOTAL_SONG_POSTFIX": " 음악",
   "_CLEAR_ALL": "모두 지우기",
-  "_SEARCH_PLACEHOLDER": "음악, 아티스트 또는 앨범 검색",
+  "_SEARCH_PLACEHOLDER": "검색",
   "_LANGUAGE": "언어",
   "_ADD_TO_PLAYLIST_SUCCESS": "성공: 내 재생 목록에 추가",
   "_FAVORITE_PLAYLIST_SUCCESS": "성공: 즐겨찾기 재생 목록",
@@ -103,6 +103,8 @@
   "_THEME": "테마",
   "_THEME_WHITE": "하얀색 테마",
   "_THEME_BLACK": "검색은 테마",
+  "_THEME_MODERN_WHITE": "Modern White Theme",
+  "_THEME_MODERN_BLACK": "Modern Black Theme",
   "_AUTO_CHOOSE_SOURCE": "소스 자동 선택",
   "_AUTO_CHOOSE_SOURCE_NOTICE": "재생 소스 자동 전환 여부 (음악 재생 실패 후에만 전환)",
   "_AUTO_CHOOSE_SOURCE_LIST": "실패 후 시도할 음악 플랫폼",

i18n/zh-CN.json

@@ -84,7 +84,7 @@
  "_TOTAL_SONG_PREFIX": "共",
  "_TOTAL_SONG_POSTFIX": "首",
  "_CLEAR_ALL": "清空",
- "_SEARCH_PLACEHOLDER": "输入歌曲名，歌手或专辑",
+ "_SEARCH_PLACEHOLDER": "搜索",
  "_LANGUAGE": "语言",
  "_ADD_TO_PLAYLIST_SUCCESS": "成功添加到我创建的歌单",
  "_FAVORITE_PLAYLIST_SUCCESS": "收藏成功",
@@ -103,6 +103,8 @@
  "_THEME": "主题",
  "_THEME_WHITE": "简约白",
  "_THEME_BLACK": "深空灰",
+ "_THEME_MODERN_WHITE": "现代白",
+ "_THEME_MODERN_BLACK": "现代黑",
  "_AUTO_CHOOSE_SOURCE": "自动切换源",
  "_AUTO_CHOOSE_SOURCE_NOTICE": "是否自动切换播放源（仅在播放音乐失败后切换）",
  "_AUTO_CHOOSE_SOURCE_LIST": "从以下平台搜索可用源",

i18n/zh-TC.json

@@ -84,7 +84,7 @@
  "_TOTAL_SONG_PREFIX": "總 ",
  "_TOTAL_SONG_POSTFIX": " 首",
  "_CLEAR_ALL": "清空",
- "_SEARCH_PLACEHOLDER": "鍵入曲目名，歌手或專輯",
+ "_SEARCH_PLACEHOLDER": "搜索",
  "_LANGUAGE": "語言",
  "_ADD_TO_PLAYLIST_SUCCESS": "成功添加到我創建的歌單",
  "_FAVORITE_PLAYLIST_SUCCESS": "收藏成功",
@@ -103,6 +103,8 @@
  "_THEME": "樣式",
  "_THEME_WHITE": "簡約白",
  "_THEME_BLACK": "深空灰",
+ "_THEME_MODERN_WHITE": "现代白",
+ "_THEME_MODERN_BLACK": "现代黑",
  "_AUTO_CHOOSE_SOURCE": "自動切換源",
  "_AUTO_CHOOSE_SOURCE_NOTICE": "是否自動切換播放源（僅在播放音樂失敗後切換）",
  "_AUTO_CHOOSE_SOURCE_LIST": "從以下平臺搜索可用源",

js/app.js

@@ -72,6 +72,18 @@ const main = () => {
             background: 'deepskyblue',
             icon: false,
           },
+          {
+            type: 'success',
+            className: 'notyf__toast--success',
+            backgroundColor: '#335eea',
+            icon: { className: 'notyf__icon--success', tagName: 'i' },
+          },
+          {
+            type: 'error',
+            className: 'notyf__toast--error',
+            backgroundColor: '#b90b2c',
+            icon: { className: 'notyf__icon--error', tagName: 'i' },
+          },
         ],
       });
       window.notyf.warning = (msg, replace) => {
@@ -92,9 +104,6 @@ const main = () => {
           message: msg,
         });
       };
-      axios.get('images/feather-sprite.svg').then((res) => {
-        document.getElementById('feather-container').innerHTML = res.data;
-      });
     },
   ]);
 
@@ -411,19 +420,19 @@ const main = () => {
 
       function onMyMousedown() {
         if (mode === 'play') {
-          scope.changingProgress = true;
+          $rootScope.$broadcast('dragbar:changing_progress', true);
         }
       }
 
       function onMyMouseup() {
         if (mode === 'play') {
-          scope.changingProgress = false;
+          $rootScope.$broadcast('dragbar:changing_progress', false);
         }
       }
 
       function onMyUpdateProgress(progress) {
         if (mode === 'play') {
-          $rootScope.$broadcast('track:myprogress', progress * 100);
+          $rootScope.$broadcast('dragbar:myprogress', progress * 100);
         }
         if (mode === 'volume') {
           l1Player.setVolume(progress * 100);

js/background.js

@@ -72,7 +72,10 @@ function hack_referer_header(details) {
     add_origin = false;
   }
 
-  if (details.url.includes('.taihe.com/')||details.url.includes('music.91q.com')) {
+  if (
+    details.url.includes('.taihe.com/') ||
+    details.url.includes('music.91q.com')
+  ) {
     referer_value = 'https://music.taihe.com/';
   }
 

js/bridge.js

@@ -55,7 +55,7 @@ function addBackgroundPlayerListener(listener) {
         return null;
       }
       return listener(msg, sender, res);
-    },
+    }
   );
 }