mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2024-11-25 17:56:39 +08:00
style: personal fm card
This commit is contained in:
parent
d70fd44d8e
commit
22c9691a73
|
@ -30,6 +30,7 @@
|
|||
"axios": "^0.21.0",
|
||||
"change-case": "^4.1.2",
|
||||
"cli-color": "^2.0.0",
|
||||
"color": "^3.1.3",
|
||||
"core-js": "^3.6.5",
|
||||
"crypto-js": "^4.0.0",
|
||||
"dayjs": "^1.8.36",
|
||||
|
@ -52,6 +53,7 @@
|
|||
"howler": "^2.2.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
"lodash": "^4.17.20",
|
||||
"node-vibrant": "^3.1.6",
|
||||
"nprogress": "^0.2.0",
|
||||
"pac-proxy-agent": "^4.1.0",
|
||||
"plyr": "^3.6.2",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="fm">
|
||||
<div class="fm" :style="{ background }" data-theme="dark">
|
||||
<img
|
||||
class="cover"
|
||||
:src="track.album && track.album.picUrl | resizeImage(512)"
|
||||
|
@ -35,10 +35,17 @@
|
|||
import ButtonIcon from '@/components/ButtonIcon.vue';
|
||||
import ArtistsInLine from '@/components/ArtistsInLine.vue';
|
||||
import { mapState } from 'vuex';
|
||||
import * as Vibrant from 'node-vibrant';
|
||||
import Color from 'color';
|
||||
|
||||
export default {
|
||||
name: 'FMCard',
|
||||
components: { ButtonIcon, ArtistsInLine },
|
||||
data() {
|
||||
return {
|
||||
background: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['player']),
|
||||
track() {
|
||||
|
@ -51,12 +58,17 @@ export default {
|
|||
return this.track.artists || this.track.ar || [];
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getColor();
|
||||
window.ok = this.getColor;
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
this.player.playPersonalFM();
|
||||
},
|
||||
next() {
|
||||
this.player.playNextTrack(true);
|
||||
this.getColor();
|
||||
},
|
||||
goToAlbum() {
|
||||
if (this.track.album.id === 0) return;
|
||||
|
@ -65,6 +77,23 @@ export default {
|
|||
moveToFMTrash() {
|
||||
this.player.moveToFMTrash();
|
||||
},
|
||||
getColor() {
|
||||
const cover = `${this.player.personalFMTrack.album.picUrl}?param=512y512`;
|
||||
Vibrant.from(cover, { colorCount: 1 })
|
||||
.getPalette()
|
||||
.then(palette => {
|
||||
const color = Color.rgb(palette.Vibrant._rgb)
|
||||
.darken(0.1)
|
||||
.rgb()
|
||||
.string();
|
||||
const color2 = Color.rgb(palette.Vibrant._rgb)
|
||||
.lighten(0.28)
|
||||
.rotate(-30)
|
||||
.rgb()
|
||||
.string();
|
||||
this.background = `linear-gradient(to top left, ${color}, ${color2})`;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -81,7 +110,6 @@ export default {
|
|||
clip-path: border-box;
|
||||
border-radius: 0.75rem;
|
||||
margin-right: 1.2rem;
|
||||
border: 1px solid rgb(243, 243, 243);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
144
yarn.lock
144
yarn.lock
|
@ -961,6 +961,15 @@
|
|||
cssnano-preset-default "^4.0.0"
|
||||
postcss "^7.0.0"
|
||||
|
||||
"@jimp/bmp@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.16.1.tgz#6e2da655b2ba22e721df0795423f34e92ef13768"
|
||||
integrity sha512-iwyNYQeBawrdg/f24x3pQ5rEx+/GwjZcCXd3Kgc+ZUd+Ivia7sIqBsOnDaMZdKCBPlfW364ekexnlOqyVa0NWg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
"@jimp/utils" "^0.16.1"
|
||||
bmp-js "^0.1.0"
|
||||
|
||||
"@jimp/bmp@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.9.8.tgz#5933ab8fb359889bec380b0f7802163374933624"
|
||||
|
@ -971,6 +980,23 @@
|
|||
bmp-js "^0.1.0"
|
||||
core-js "^3.4.1"
|
||||
|
||||
"@jimp/core@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/core/-/core-0.16.1.tgz#68c4288f6ef7f31a0f6b859ba3fb28dae930d39d"
|
||||
integrity sha512-la7kQia31V6kQ4q1kI/uLimu8FXx7imWVajDGtwUG8fzePLWDFJyZl0fdIXVCL1JW2nBcRHidUot6jvlRDi2+g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
"@jimp/utils" "^0.16.1"
|
||||
any-base "^1.1.0"
|
||||
buffer "^5.2.0"
|
||||
exif-parser "^0.1.12"
|
||||
file-type "^9.0.0"
|
||||
load-bmfont "^1.3.1"
|
||||
mkdirp "^0.5.1"
|
||||
phin "^2.9.1"
|
||||
pixelmatch "^4.0.2"
|
||||
tinycolor2 "^1.4.1"
|
||||
|
||||
"@jimp/core@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/core/-/core-0.9.8.tgz#b2b74263a80559c0ee244e0f2d1052b36a358b85"
|
||||
|
@ -989,6 +1015,14 @@
|
|||
pixelmatch "^4.0.2"
|
||||
tinycolor2 "^1.4.1"
|
||||
|
||||
"@jimp/custom@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/custom/-/custom-0.16.1.tgz#28b659c59e20a1d75a0c46067bd3f4bd302cf9c5"
|
||||
integrity sha512-DNUAHNSiUI/j9hmbatD6WN/EBIyeq4AO0frl5ETtt51VN1SvE4t4v83ZA/V6ikxEf3hxLju4tQ5Pc3zmZkN/3A==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
"@jimp/core" "^0.16.1"
|
||||
|
||||
"@jimp/custom@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/custom/-/custom-0.9.8.tgz#1e9d904b1b05aa22b00b899baba2be7c0704a5d1"
|
||||
|
@ -998,6 +1032,16 @@
|
|||
"@jimp/core" "^0.9.8"
|
||||
core-js "^3.4.1"
|
||||
|
||||
"@jimp/gif@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/gif/-/gif-0.16.1.tgz#d1f7c3a58f4666482750933af8b8f4666414f3ca"
|
||||
integrity sha512-r/1+GzIW1D5zrP4tNrfW+3y4vqD935WBXSc8X/wm23QTY9aJO9Lw6PEdzpYCEY+SOklIFKaJYUAq/Nvgm/9ryw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
"@jimp/utils" "^0.16.1"
|
||||
gifwrap "^0.9.2"
|
||||
omggif "^1.0.9"
|
||||
|
||||
"@jimp/gif@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/gif/-/gif-0.9.8.tgz#513aff511634c338d1ab33a7bba1ba3412220b5b"
|
||||
|
@ -1008,6 +1052,15 @@
|
|||
core-js "^3.4.1"
|
||||
omggif "^1.0.9"
|
||||
|
||||
"@jimp/jpeg@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/jpeg/-/jpeg-0.16.1.tgz#3b7bb08a4173f2f6d81f3049b251df3ee2ac8175"
|
||||
integrity sha512-8352zrdlCCLFdZ/J+JjBslDvml+fS3Z8gttdml0We759PnnZGqrnPRhkOEOJbNUlE+dD4ckLeIe6NPxlS/7U+w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
"@jimp/utils" "^0.16.1"
|
||||
jpeg-js "0.4.2"
|
||||
|
||||
"@jimp/jpeg@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/jpeg/-/jpeg-0.9.8.tgz#8c086f69d0e8c46e43a7db9725576edc30925cb1"
|
||||
|
@ -1164,6 +1217,14 @@
|
|||
core-js "^3.4.1"
|
||||
load-bmfont "^1.4.0"
|
||||
|
||||
"@jimp/plugin-resize@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/plugin-resize/-/plugin-resize-0.16.1.tgz#65e39d848ed13ba2d6c6faf81d5d590396571d10"
|
||||
integrity sha512-u4JBLdRI7dargC04p2Ha24kofQBk3vhaf0q8FwSYgnCRwxfvh2RxvhJZk9H7Q91JZp6wgjz/SjvEAYjGCEgAwQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
"@jimp/utils" "^0.16.1"
|
||||
|
||||
"@jimp/plugin-resize@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/plugin-resize/-/plugin-resize-0.9.8.tgz#eef750b77f1cc06e8bcf9b390860c95c489dcc02"
|
||||
|
@ -1239,6 +1300,15 @@
|
|||
core-js "^3.4.1"
|
||||
timm "^1.6.1"
|
||||
|
||||
"@jimp/png@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/png/-/png-0.16.1.tgz#f24cfc31529900b13a2dd9d4fdb4460c1e4d814e"
|
||||
integrity sha512-iyWoCxEBTW0OUWWn6SveD4LePW89kO7ZOy5sCfYeDM/oTPLpR8iMIGvZpZUz1b8kvzFr27vPst4E5rJhGjwsdw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
"@jimp/utils" "^0.16.1"
|
||||
pngjs "^3.3.3"
|
||||
|
||||
"@jimp/png@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/png/-/png-0.9.8.tgz#f88dacc9b9da1c2ea8e91026a9530d0fb45c4409"
|
||||
|
@ -1249,6 +1319,14 @@
|
|||
core-js "^3.4.1"
|
||||
pngjs "^3.3.3"
|
||||
|
||||
"@jimp/tiff@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/tiff/-/tiff-0.16.1.tgz#0e8756695687d7574b6bc73efab0acd4260b7a12"
|
||||
integrity sha512-3K3+xpJS79RmSkAvFMgqY5dhSB+/sxhwTFA9f4AVHUK0oKW+u6r52Z1L0tMXHnpbAdR9EJ+xaAl2D4x19XShkQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
utif "^2.0.1"
|
||||
|
||||
"@jimp/tiff@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/tiff/-/tiff-0.9.8.tgz#91dc3eab2f222e23414f139e917f3407caa73560"
|
||||
|
@ -1258,6 +1336,19 @@
|
|||
core-js "^3.4.1"
|
||||
utif "^2.0.1"
|
||||
|
||||
"@jimp/types@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/types/-/types-0.16.1.tgz#0dbab37b3202315c91010f16c31766d35a2322cc"
|
||||
integrity sha512-g1w/+NfWqiVW4CaXSJyD28JQqZtm2eyKMWPhBBDCJN9nLCN12/Az0WFF3JUAktzdsEC2KRN2AqB1a2oMZBNgSQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
"@jimp/bmp" "^0.16.1"
|
||||
"@jimp/gif" "^0.16.1"
|
||||
"@jimp/jpeg" "^0.16.1"
|
||||
"@jimp/png" "^0.16.1"
|
||||
"@jimp/tiff" "^0.16.1"
|
||||
timm "^1.6.1"
|
||||
|
||||
"@jimp/types@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/types/-/types-0.9.8.tgz#46980a4a7bfcadf2f0484d187c32b4e7d6d61b8e"
|
||||
|
@ -1272,6 +1363,14 @@
|
|||
core-js "^3.4.1"
|
||||
timm "^1.6.1"
|
||||
|
||||
"@jimp/utils@^0.16.1":
|
||||
version "0.16.1"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/utils/-/utils-0.16.1.tgz#2f51e6f14ff8307c4aa83d5e1a277da14a9fe3f7"
|
||||
integrity sha512-8fULQjB0x4LzUSiSYG6ZtQl355sZjxbv8r9PPAuYHzS9sGiSHJQavNqK/nKnpDsVkU88/vRGcE7t3nMU0dEnVw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
regenerator-runtime "^0.13.3"
|
||||
|
||||
"@jimp/utils@^0.9.8":
|
||||
version "0.9.8"
|
||||
resolved "https://registry.yarnpkg.com/@jimp/utils/-/utils-0.9.8.tgz#6a6f47158ec6b424f03df0f55f0baff5b4b5e096"
|
||||
|
@ -1447,6 +1546,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
|
||||
integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
|
||||
|
||||
"@types/lodash@^4.14.53":
|
||||
version "4.14.170"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.170.tgz#0d67711d4bf7f4ca5147e9091b847479b87925d6"
|
||||
integrity sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==
|
||||
|
||||
"@types/mime@^1":
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
|
||||
|
@ -1467,6 +1571,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.37.tgz#a3dd8da4eb84a996c36e331df98d82abd76b516e"
|
||||
integrity sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==
|
||||
|
||||
"@types/node@^10.11.7":
|
||||
version "10.17.60"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b"
|
||||
integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==
|
||||
|
||||
"@types/normalize-package-data@^2.4.0":
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
|
||||
|
@ -3483,7 +3592,7 @@ color-string@^1.5.4:
|
|||
color-name "^1.0.0"
|
||||
simple-swizzle "^0.2.2"
|
||||
|
||||
color@^3.0.0:
|
||||
color@^3.0.0, color@^3.1.3:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
|
||||
integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
|
||||
|
@ -5832,6 +5941,14 @@ getpass@^0.1.1:
|
|||
dependencies:
|
||||
assert-plus "^1.0.0"
|
||||
|
||||
gifwrap@^0.9.2:
|
||||
version "0.9.2"
|
||||
resolved "https://registry.yarnpkg.com/gifwrap/-/gifwrap-0.9.2.tgz#348e286e67d7cf57942172e1e6f05a71cee78489"
|
||||
integrity sha512-fcIswrPaiCDAyO8xnWvHSZdWChjKXUanKKpAiWWJ/UTkEi/aYKn5+90e7DE820zbEaVR9CE2y4z9bzhQijZ0BA==
|
||||
dependencies:
|
||||
image-q "^1.1.1"
|
||||
omggif "^1.0.10"
|
||||
|
||||
github-from-package@0.0.0:
|
||||
version "0.0.0"
|
||||
resolved "https://registry.npm.taobao.org/github-from-package/download/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
|
||||
|
@ -6484,6 +6601,11 @@ ignore@^5.1.4:
|
|||
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
|
||||
integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
|
||||
|
||||
image-q@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/image-q/-/image-q-1.1.1.tgz#fc84099664460b90ca862d9300b6bfbbbfbf8056"
|
||||
integrity sha1-/IQJlmRGC5DKhi2TALa/u7+/gFY=
|
||||
|
||||
image-size@^0.5.1:
|
||||
version "0.5.5"
|
||||
resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
|
||||
|
@ -7108,6 +7230,11 @@ jimp@^0.9.3:
|
|||
core-js "^3.4.1"
|
||||
regenerator-runtime "^0.13.3"
|
||||
|
||||
jpeg-js@0.4.2:
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d"
|
||||
integrity sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==
|
||||
|
||||
jpeg-js@^0.3.4:
|
||||
version "0.3.7"
|
||||
resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.3.7.tgz#471a89d06011640592d314158608690172b1028d"
|
||||
|
@ -8200,6 +8327,19 @@ node-releases@^1.1.71:
|
|||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
|
||||
integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==
|
||||
|
||||
node-vibrant@^3.1.6:
|
||||
version "3.1.6"
|
||||
resolved "https://registry.yarnpkg.com/node-vibrant/-/node-vibrant-3.1.6.tgz#8554c3108903232cbe1e722f928469ee4379aa18"
|
||||
integrity sha512-Wlc/hQmBMOu6xon12ZJHS2N3M+I6J8DhrD3Yo6m5175v8sFkVIN+UjhKVRcO+fqvre89ASTpmiFEP3nPO13SwA==
|
||||
dependencies:
|
||||
"@jimp/custom" "^0.16.1"
|
||||
"@jimp/plugin-resize" "^0.16.1"
|
||||
"@jimp/types" "^0.16.1"
|
||||
"@types/lodash" "^4.14.53"
|
||||
"@types/node" "^10.11.7"
|
||||
lodash "^4.17.20"
|
||||
url "^0.11.0"
|
||||
|
||||
noop-logger@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.npm.taobao.org/noop-logger/download/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
|
||||
|
@ -8411,7 +8551,7 @@ obuf@^1.0.0, obuf@^1.1.2:
|
|||
resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
|
||||
integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
|
||||
|
||||
omggif@^1.0.9:
|
||||
omggif@^1.0.10, omggif@^1.0.9:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"
|
||||
integrity sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==
|
||||
|
|
Loading…
Reference in New Issue
Block a user