feat: add copy track link & fixed various visual defects (#1489)

* feat: add copy track link

* fix: various visual defects

* feat: add track low res fallback

* chore: remove redundant locale strings

* chore: separate playbackState for a new PR

* build: fix netlify failing to build site

.nvmrc

@@ -0,0 +1 @@
+14

src/components/ArtistsInLine.vue

@@ -2,11 +2,13 @@
   <span class="artist-in-line">
     {{ computedPrefix }}
     <span v-for="(ar, index) in filteredArtists" :key="index">
-      <router-link v-if="ar.id !== 0" :to="`/artist/${ar.id}`">
-        {{ ar.name }}
-      </router-link>
+      <router-link v-if="ar.id !== 0" :to="`/artist/${ar.id}`">{{
+        ar.name
+      }}</router-link>
       <span v-else>{{ ar.name }}</span>
-      <span v-if="index !== filteredArtists.length - 1">, </span>
+      <span v-if="index !== filteredArtists.length - 1" class="separator"
+        >,</span
+      >
     </span>
   </span>
 </template>
@@ -40,4 +42,12 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.separator {
+  /* make separator distinct enough in long list */
+  margin-left: 1px;
+  margin-right: 4px;
+  position: relative;
+  top: 0.5px;
+}
+</style>

src/components/ContextMenu.vue

@@ -80,11 +80,13 @@ export default {
   box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.08);
   border: 1px solid rgba(0, 0, 0, 0.06);
   backdrop-filter: blur(12px);
-  border-radius: 8px;
+  border-radius: 12px;
   box-sizing: border-box;
   padding: 6px;
   z-index: 1000;
   -webkit-app-region: no-drag;
+  transition: background 125ms ease-out, opacity 125ms ease-out,
+    transform 125ms ease-out;
 
   &:focus {
     outline: none;
@@ -94,8 +96,9 @@ export default {
 [data-theme='dark'] {
   .menu {
     background: rgba(36, 36, 36, 0.78);
-    backdrop-filter: blur(16px) contrast(120%);
+    backdrop-filter: blur(16px) contrast(120%) brightness(60%);
     border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 0 6px rgba(255, 255, 255, 0.08);
   }
   .menu .item:hover {
     color: var(--color-text);
@@ -112,7 +115,7 @@ export default {
   font-weight: 600;
   font-size: 14px;
   padding: 10px 14px;
-  border-radius: 7px;
+  border-radius: 8px;
   cursor: default;
   color: var(--color-text);
   display: flex;
@@ -120,6 +123,11 @@ export default {
   &:hover {
     color: var(--color-primary);
     background: var(--color-primary-bg-for-transparent);
+    transition: opacity 125ms ease-out, transform 125ms ease-out;
+  }
+  &:active {
+    opacity: 0.75;
+    transform: scale(0.95);
   }
 
   .svg-icon {
@@ -149,7 +157,7 @@ hr {
     border-radius: 4px;
   }
   .info {
-    margin-left: 8px;
+    margin-left: 10px;
   }
   .title {
     font-size: 16px;

src/components/ExplicitSymbol.vue

@@ -25,6 +25,8 @@ export default {
     this.svgStyle = {
       height: this.size + 'px',
       width: this.size + 'px',
+      position: 'relative',
+      left: '-1px',
     };
   },
 };

src/components/Modal.vue

@@ -39,11 +39,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    minWidth: {
+      type: String,
+      default: 'calc(min(23rem, 100vw))',
+    },
   },
   computed: {
     modalStyles() {
       return {
         width: this.width,
+        minWidth: this.minWidth,
       };
     },
   },

src/components/ModalNewPlaylist.vue

@@ -147,6 +147,7 @@ export default {
       label {
         font-size: 12px;
       }
+      user-select: none;
     }
   }
 }

src/components/TrackList.vue

@@ -46,6 +46,9 @@
         @click="addTrackToPlaylist"
         >{{ $t('contextMenu.addToPlaylist') }}</div
       >
+      <div v-show="type !== 'cloudDisk'" class="item" @click="copyLink">{{
+        $t('contextMenu.copyUrl')
+      }}</div>
       <div
         v-if="extraContextMenuItem.includes('removeTrackFromCloudDisk')"
         class="item"
@@ -72,6 +75,7 @@ import { mapActions, mapMutations, mapState } from 'vuex';
 import { addOrRemoveTrackFromPlaylist } from '@/api/playlist';
 import { cloudDiskTrackDelete } from '@/api/user';
 import { isAccountLoggedIn } from '@/utils/auth';
+const { clipboard } = require('electron');
 
 import TrackListItem from '@/components/TrackListItem.vue';
 import ContextMenu from '@/components/ContextMenu.vue';
@@ -265,6 +269,12 @@ export default {
         });
       }
     },
+    copyLink() {
+      clipboard.writeText(
+        `https://music.163.com/song?id=${this.rightClickedTrack.id}`
+      );
+      this.showToast(locale.t('toast.copied'));
+    },
     removeTrackFromQueue() {
       this.$store.state.player.removeTrackFromQueue(
         this.rightClickedTrackIndex

src/components/TrackListItem.vue

@@ -273,7 +273,6 @@ button {
   }
 
   .explicit-symbol.before-artist {
-    margin-right: 2px;
     .svg-icon {
       margin-bottom: -3px;
     }
@@ -365,6 +364,11 @@ button {
     opacity: 0.88;
     color: var(--color-text);
   }
+  .count {
+    font-weight: bold;
+    font-size: 22px;
+    line-height: 22px;
+  }
 }
 
 .track.focus {
@@ -426,7 +430,8 @@ button {
   }
   .title .featured,
   .artist,
-  .explicit-symbol {
+  .explicit-symbol,
+  .count {
     color: var(--color-primary);
     opacity: 0.88;
   }

src/utils/Player.js

@@ -489,6 +489,11 @@ export default class {
       artist: artists.join(','),
       album: track.al.name,
       artwork: [
+        {
+          src: track.al.picUrl + '?param=224y224',
+          type: 'image/jpg',
+          sizes: '224x224',
+        },
         {
           src: track.al.picUrl + '?param=512y512',
           type: 'image/jpg',

src/views/library.vue

@@ -153,10 +153,22 @@
       </div>
 
       <div v-show="currentTab === 'playHistory'">
-        <button class="playHistory-button" @click="playHistoryMode = 'week'">
+        <button
+          :class="{
+            'playHistory-button': true,
+            'playHistory-button--selected': playHistoryMode === 'week',
+          }"
+          @click="playHistoryMode = 'week'"
+        >
           {{ $t('library.playHistory.week') }}
         </button>
-        <button class="playHistory-button" @click="playHistoryMode = 'all'">
+        <button
+          :class="{
+            'playHistory-button': true,
+            'playHistory-button--selected': playHistoryMode === 'all',
+          }"
+          @click="playHistoryMode = 'all'"
+        >
           {{ $t('library.playHistory.all') }}
         </button>
         <TrackList
@@ -581,13 +593,29 @@ button.tab-button {
 button.playHistory-button {
   color: var(--color-text);
   border-radius: 8px;
-  padding: 10px;
+  padding: 6px 8px;
+  margin-bottom: 12px;
+  margin-right: 4px;
   transition: 0.2s;
   opacity: 0.68;
   font-weight: 500;
+  cursor: pointer;
   &:hover {
     opacity: 1;
     background: var(--color-secondary-bg);
   }
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+button.playHistory-button--selected {
+  color: var(--color-text);
+  background: var(--color-secondary-bg);
+  opacity: 1;
+  font-weight: 700;
+  &:active {
+    transform: none;
+  }
 }
 </style>