feat: updates

This commit is contained in:
qier222 2022-03-21 02:03:25 +08:00
parent fb21405bf9
commit 1b05297885
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
46 changed files with 234 additions and 114 deletions

View file

@ -35,6 +35,7 @@ export async function setCache(api: string, data: any, query: any) {
} }
case 'album': { case 'album': {
if (!data.album) return if (!data.album) return
data.album.songs = (data as FetchTracksResponse).songs
db.set(ModelNames.ALBUM, Number(data.album.id), data) db.set(ModelNames.ALBUM, Number(data.album.id), data)
break break
} }

View file

@ -3,6 +3,7 @@ import request from '@/utils/request'
export enum PlaylistApiNames { export enum PlaylistApiNames {
FETCH_PLAYLIST = 'fetchPlaylist', FETCH_PLAYLIST = 'fetchPlaylist',
FETCH_RECOMMENDED_PLAYLISTS = 'fetchRecommendedPlaylists', FETCH_RECOMMENDED_PLAYLISTS = 'fetchRecommendedPlaylists',
FETCH_DAILY_RECOMMEND_PLAYLISTS = 'fetchDailyRecommendPlaylists',
} }
// 歌单详情 // 歌单详情
@ -55,3 +56,17 @@ export function fetchRecommendedPlaylists(
params, params,
}) })
} }
// 每日推荐歌单(需要登录)
export interface FetchDailyRecommendPlaylistsResponse {
code: number
featureFirst: boolean
haveRcmdSongs: boolean
recommend: Playlist[]
}
export function fetchDailyRecommendPlaylists(): Promise<FetchDailyRecommendPlaylistsResponse> {
return request({
url: '/recommend/resource',
method: 'get',
})
}

View file

@ -1 +1,3 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M224 480c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25l192-192c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l169.4 169.4c12.5 12.5 12.5 32.75 0 45.25C240.4 476.9 232.2 480 224 480z"></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5 5L9.26369 10.6391C8.55114 11.4065 8.55114 12.5935 9.26369 13.3609L14.5 19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 455 B

After

Width:  |  Height:  |  Size: 259 B

Before After
Before After

View file

@ -1 +0,0 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-up" class="svg-inline--fa fa-chevron-up fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path></svg>

Before

Width:  |  Height:  |  Size: 525 B

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48px" height="48px"><circle cx="12" cy="12" r="10" opacity=".35"/><path d="M15.839,6.559l-5.7,1.9c-0.793,0.264-1.416,0.887-1.68,1.68l-1.9,5.7c-0.33,0.99,0.612,1.933,1.603,1.603l5.7-1.9 c0.793-0.264,1.416-0.887,1.68-1.68l1.9-5.7C17.771,7.171,16.829,6.228,15.839,6.559z M12,14c-1.105,0-2-0.895-2-2 c0-1.105,0.895-2,2-2s2,0.895,2,2C14,13.105,13.105,14,12,14z"/></svg>

Before

Width:  |  Height:  |  Size: 433 B

View file

@ -1 +1,3 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="thumbs-down" class="svg-inline--fa fa-thumbs-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M96 32.04H32c-17.67 0-32 14.32-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64c17.67 0 32-14.33 32-31.1V64.03C128 46.36 113.7 32.04 96 32.04zM467.3 240.2C475.1 231.7 480 220.4 480 207.9c0-23.47-16.87-42.92-39.14-47.09C445.3 153.6 448 145.1 448 135.1c0-21.32-14-39.18-33.25-45.43C415.5 87.12 416 83.61 416 79.98C416 53.47 394.5 32 368 32h-58.69c-34.61 0-68.28 11.22-95.97 31.98L179.2 89.57C167.1 98.63 160 112.9 160 127.1l.1074 160c0 0-.0234-.0234 0 0c.0703 13.99 6.123 27.94 17.91 37.36l16.3 13.03C276.2 403.9 239.4 480 302.5 480c30.96 0 49.47-24.52 49.47-48.11c0-15.15-11.76-58.12-34.52-96.02H464c26.52 0 48-21.47 48-47.98C512 262.5 492.2 241.9 467.3 240.2z"></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 14.5V5.5M9 5H8.5C7.39543 5 6.5 5.89543 6.5 7V14.0668C6.5 14.3523 6.56113 14.6345 6.67927 14.8944L8.46709 18.8276C8.79163 19.5416 9.50354 20 10.2878 20H10.8815C12.2002 20 13.158 18.746 12.811 17.4738L12.3445 15.7631C12.171 15.127 12.6499 14.5 13.3093 14.5H17V14.5C19.1704 14.5 20.489 12.1076 19.33 10.2726L16.5517 5.87354C16.2083 5.32974 15.61 5 14.9668 5H9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 889 B

After

Width:  |  Height:  |  Size: 538 B

Before After
Before After

View file

@ -1 +1,7 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="radio-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-radio-alt fa-w-16 fa-7x"><path fill="currentColor" d="M209 368h-64a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm144 56a72 72 0 1 0-72-72 72.09 72.09 0 0 0 72 72zm96-296H212.5l288.83-81.21a16 16 0 0 0 11.07-19.74l-4.33-15.38A16 16 0 0 0 488.33.6L47.68 124.5A64 64 0 0 0 1 186.11V448a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm16 320a16 16 0 0 1-16 16H65a16 16 0 0 1-16-16V256h416zM113 336h128a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16H113a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16z" class=""></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 18V10C4 8.89543 4.89543 8 6 8H18C19.1046 8 20 8.89543 20 10V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<circle cx="16" cy="12" r="1" fill="currentColor"/>
<circle cx="16" cy="16" r="1" fill="currentColor"/>
<path d="M18 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<circle cx="10" cy="14" r="3" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 733 B

After

Width:  |  Height:  |  Size: 540 B

Before After
Before After

View file

@ -1 +1,3 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 5L14.7363 10.6391C15.4489 11.4065 15.4489 12.5935 14.7363 13.3609L9.5 19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 456 B

After

Width:  |  Height:  |  Size: 257 B

Before After
Before After

View file

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M244 84L255.1 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 0 232.4 0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84C243.1 84 244 84.01 244 84L244 84zM255.1 163.9L210.1 117.1C188.4 96.28 157.6 86.4 127.3 91.44C81.55 99.07 48 138.7 48 185.1V190.9C48 219.1 59.71 246.1 80.34 265.3L256 429.3L431.7 265.3C452.3 246.1 464 219.1 464 190.9V185.1C464 138.7 430.4 99.07 384.7 91.44C354.4 86.4 323.6 96.28 301.9 117.1L255.1 163.9z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0656 5.86692L12 6.71938L10.9344 5.86692C8.73386 4.10647 5.47034 4.82325 4.21005 7.34384C3.35797 9.04799 3.69197 11.1062 5.03922 12.4534L10.9393 18.3536C11.5251 18.9393 12.4749 18.9393 13.0607 18.3536L18.9608 12.4534C20.308 11.1062 20.642 9.04799 19.79 7.34384C18.5297 4.82325 15.2661 4.10647 13.0656 5.86692Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6877 7.75013C11.8703 7.89621 12.1297 7.89621 12.3124 7.75013L13.6903 6.64779C15.3937 5.28505 17.92 5.8399 18.8955 7.79106C19.5551 9.11022 19.2966 10.7034 18.2537 11.7463L12.3536 17.6465C12.1583 17.8417 11.8417 17.8417 11.6465 17.6465L5.74633 11.7463C4.70344 10.7034 4.4449 9.11022 5.10448 7.79106C6.08006 5.8399 8.60631 5.28505 10.3097 6.64779L11.6877 7.75013ZM12 5.43875L12.4409 5.08605C15.1386 2.92789 19.1394 3.80661 20.6844 6.89663C21.729 8.98577 21.3195 11.5089 19.6679 13.1605L13.7678 19.0607C12.7915 20.037 11.2085 20.037 10.2322 19.0607L4.33212 13.1605C2.6805 11.5089 2.27106 8.98577 3.31562 6.89663C4.86063 3.80661 8.86143 2.92789 11.5591 5.08605L12 5.43875Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 702 B

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

View file

@ -1 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0656 5.86692L12 6.71938L10.9344 5.86692C8.73386 4.10647 5.47034 4.82325 4.21005 7.34384C3.35797 9.04799 3.69197 11.1062 5.03922 12.4534L10.9393 18.3536C11.5251 18.9393 12.4749 18.9393 13.0607 18.3536L18.9608 12.4534C20.308 11.1062 20.642 9.04799 19.79 7.34384C18.5297 4.82325 15.2661 4.10647 13.0656 5.86692Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M13.6903 6.64779L12.3124 7.75012C12.1297 7.89621 11.8703 7.89621 11.6877 7.75012L10.3097 6.64779C8.60632 5.28504 6.08006 5.8399 5.10448 7.79105C4.4449 9.11021 4.70345 10.7034 5.74633 11.7463L11.6465 17.6464C11.8417 17.8417 12.1583 17.8417 12.3536 17.6464L18.2537 11.7463C19.2966 10.7034 19.5551 9.11021 18.8955 7.79105C17.92 5.8399 15.3937 5.28504 13.6903 6.64779Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.43875L12.4409 5.08605C15.1386 2.92789 19.1394 3.80661 20.6844 6.89663C21.729 8.98577 21.3195 11.5089 19.6679 13.1605L13.7678 19.0607C12.7915 20.037 11.2085 20.037 10.2322 19.0607L4.33212 13.1605C2.6805 11.5089 2.27106 8.98577 3.31562 6.89663C4.86063 3.80661 8.86143 2.92789 11.5591 5.08605L12 5.43875ZM12.3124 7.75013L13.6903 6.64779C15.3937 5.28505 17.92 5.8399 18.8955 7.79106C19.5551 9.11022 19.2966 10.7034 18.2537 11.7463L12.3536 17.6465C12.1583 17.8417 11.8417 17.8417 11.6465 17.6465L5.74633 11.7463C4.70344 10.7034 4.4449 9.11022 5.10448 7.79106C6.08006 5.8399 8.60631 5.28505 10.3097 6.64779L11.6877 7.75013C11.8703 7.89621 12.1297 7.89621 12.3124 7.75013Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After

View file

@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48px" height="48px"><path d="M18,21H6c-1.657,0-3-1.343-3-3V8.765c0-1.09,0.591-2.093,1.543-2.622l6-3.333 c0.906-0.503,2.008-0.503,2.914,0l6,3.333C20.409,6.672,21,7.676,21,8.765V18C21,19.657,19.657,21,18,21z" opacity=".35"/><path d="M15,21H9v-6c0-1.105,0.895-2,2-2h2c1.105,0,2,0.895,2,2V21z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.457 6.143L19.9427 5.26889L19.9426 5.26883L19.457 6.143ZM13.457 2.81L13.9426 1.93583L13.9424 1.93571L13.457 2.81ZM10.543 2.81L10.0576 1.93571L10.0574 1.93583L10.543 2.81ZM4.543 6.143L4.05739 5.26883L4.05728 5.26889L4.543 6.143ZM15 21V22C15.5523 22 16 21.5523 16 21H15ZM9 21H8C8 21.5523 8.44772 22 9 22V21ZM6 20C4.89528 20 4 19.1047 4 18H2C2 20.2093 3.79072 22 6 22V20ZM18 20H6V22H18V20ZM20 18C20 19.1047 19.1047 20 18 20V22C20.2093 22 22 20.2093 22 18H20ZM20 8.76501V18H22V8.76501H20ZM18.9713 7.01712C19.606 7.36984 20 8.03935 20 8.76501H22C22 7.31266 21.212 5.97417 19.9427 5.26889L18.9713 7.01712ZM12.9714 3.68418L18.9714 7.01718L19.9426 5.26883L13.9426 1.93583L12.9714 3.68418ZM11.0284 3.6843C11.6325 3.34891 12.3675 3.34891 12.9716 3.6843L13.9424 1.93571C12.7345 1.2651 11.2655 1.2651 10.0576 1.93571L11.0284 3.6843ZM5.02861 7.01718L11.0286 3.68418L10.0574 1.93583L4.05739 5.26883L5.02861 7.01718ZM4 8.76501C4 8.03854 4.39379 7.36993 5.02872 7.01712L4.05728 5.26889C2.78821 5.97408 2 7.31147 2 8.76501H4ZM4 18V8.76501H2V18H4ZM15 20H9V22H15V20ZM14 14.25V21H16V14.25H14ZM13 13C13.4452 13 14 13.4452 14 14.25H16C16 12.5686 14.7648 11 13 11V13ZM11 13H13V11H11V13ZM10 14.25C10 13.4452 10.5548 13 11 13V11C9.23524 11 8 12.5686 8 14.25H10ZM10 21V14.25H8V21H10Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 366 B

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

View file

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8C4.66667 8 6 8.4 6 10C6 11.6 6 15.3333 6 17C6 17.6667 6.4 19 8 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<circle cx="5.5" cy="4.5" r="1.5" fill="currentColor"/>
<path d="M9 5H17C17.6667 5 19 5.4 19 7C19 8.6 19 15 19 18C19 18.6667 18.6 20 17 20M9 8H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<circle cx="12.5" cy="14.5" r="3.5" stroke="currentColor" stroke-width="2"/>
</svg>

After

Width:  |  Height:  |  Size: 535 B

View file

@ -1 +1,5 @@
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="ellipsis-h" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-ellipsis-h fa-w-16 fa-9x"><path fill="currentColor" d="M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z" class=""></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="2" fill="currentColor"/>
<circle cx="19" cy="12" r="2" fill="currentColor"/>
<circle cx="5" cy="12" r="2" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 472 B

After

Width:  |  Height:  |  Size: 258 B

Before After
Before After

View file

@ -1 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48px" height="48px"><path d="M5,6h14c0.353,0,0.686,0.072,1,0.184V6c0-1.657-1.343-3-3-3H7C5.343,3,4,4.343,4,6v0.184C4.314,6.072,4.647,6,5,6z"/><path d="M19,20H5c-1.657,0-3-1.343-3-3V9c0-1.657,1.343-3,3-3h14c1.657,0,3,1.343,3,3v8 C22,18.657,20.657,20,19,20z" opacity=".35"/><circle cx="10.5" cy="15.5" r="2.5"/><path d="M13,8c-1.105,0-2,0.895-2,2v6l2-0.5V11h1c1.105,0,2-0.895,2-2V8.5C16,8.224,15.776,8,15.5,8H13z"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 18C12.1046 18 13 17.1046 13 16C13 14.8954 12.1046 14 11 14C9.89543 14 9 14.8954 9 16C9 17.1046 9.89543 18 11 18Z" fill="currentColor"/>
<path d="M7.15385 3C7.15385 3.55228 6.67169 4 6.07692 4C5.48215 4 5 3.55228 5 3C5 2.44772 5.48215 2 6.07692 2C6.67169 2 7.15385 2.44772 7.15385 3Z" fill="currentColor"/>
<path d="M19 3C19 3.55228 18.5178 4 17.9231 4C17.3283 4 16.8462 3.55228 16.8462 3C16.8462 2.44772 17.3283 2 17.9231 2C18.5178 2 19 2.44772 19 3Z" fill="currentColor"/>
<path d="M6.07692 2H17.9231V4H6.07692V2Z" fill="currentColor"/>
<rect x="11" y="11" width="2" height="5" fill="currentColor"/>
<circle cx="12" cy="11" r="1" fill="currentColor"/>
<circle cx="14" cy="11" r="1" fill="currentColor"/>
<rect x="12" y="10" width="2" height="2" fill="currentColor"/>
<path d="M4 10V18C4 19.6569 5.34315 21 7 21H17C18.6569 21 20 19.6569 20 18V10C20 8.34315 18.6569 7 17 7H7C5.34315 7 4 8.34315 4 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 488 B

After

Width:  |  Height:  |  Size: 1.1 KiB

Before After
Before After

View file

@ -1,4 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg"><g><path d="M256 431.1c0 45-50.1 80.9-112 80.9s-112-35.9-112-80.9c0-45 50.13-80.01 112-80.01 16.38 0 32.5 2.75 48 8V60.33c0-14 9.125-26.38 22.38-30.5L256 17.55V431.1Z"/><path opacity=".4" d="M256 148.1V17.55l55-16.22c9.625-2.88 20.12-1.001 28.12 5C347.3 12.31 352 21.83 352 31.95v64c0 14.25-9.375 26.75-23 30.75l-73 21.39Z"/></g></svg>
width="30" height="30"
viewBox="0 0 30 30"
style=" fill:#000000;"> <path d="M 23 2 A 1 1 0 0 0 22.708984 2.0449219 L 13.726562 4.0351562 L 13.722656 4.0410156 A 1 1 0 0 0 13 5 L 13 16 C 13 17.105 12.105 18 11 18 L 10.503906 18 A 4.5 4.5 0 0 0 10.5 18 A 4.5 4.5 0 0 0 6 22.5 A 4.5 4.5 0 0 0 10.5 27 A 4.5 4.5 0 0 0 15 22.5 L 15 9.8007812 L 23.154297 7.9882812 A 1 1 0 0 0 24 7 L 24 3 A 1 1 0 0 0 23 2 z"></path></svg>

Before

Width:  |  Height:  |  Size: 476 B

After

Width:  |  Height:  |  Size: 398 B

Before After
Before After

View file

@ -1 +1,3 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="step-forward" class="svg-inline--fa fa-step-forward fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z"></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 5V19M16.0239 12.7809L8.6247 18.7002C7.96993 19.2241 7 18.7579 7 17.9194V6.08062C7 5.24212 7.96993 4.77595 8.6247 5.29976L16.0239 11.2191C16.5243 11.6195 16.5243 12.3805 16.0239 12.7809Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 427 B

After

Width:  |  Height:  |  Size: 367 B

Before After
Before After

View file

@ -1 +1,4 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pause" class="svg-inline--fa fa-pause fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="5" width="4" height="14" rx="1.1" stroke="currentColor" stroke-width="2"/>
<rect x="14" y="5" width="4" height="14" rx="1.1" stroke="currentColor" stroke-width="2"/>
</svg>

Before

Width:  |  Height:  |  Size: 444 B

After

Width:  |  Height:  |  Size: 284 B

Before After
Before After

View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 17.783V6.21701C6 5.03661 7.30033 4.31873 8.29922 4.94766L17.484 10.7307C18.4183 11.319 18.4183 12.681 17.484 13.2693L8.29922 19.0523C7.30033 19.6813 6 18.9634 6 17.783Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 369 B

View file

@ -1 +1,3 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 17.783V6.21701C6 5.03661 7.30033 4.31873 8.29922 4.94766L17.484 10.7307C18.4183 11.319 18.4183 12.681 17.484 13.2693L8.29922 19.0523C7.30033 19.6813 6 18.9634 6 17.783Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 340 B

After

Width:  |  Height:  |  Size: 349 B

Before After
Before After

View file

@ -1 +1,6 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list-music" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-list-music fa-w-16 fa-9x"><path fill="currentColor" d="M16 256h256a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm0-128h256a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H16A16 16 0 0 0 0 80v32a16 16 0 0 0 16 16zm128 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM470.94 1.33l-96.53 28.51A32 32 0 0 0 352 60.34V360a148.76 148.76 0 0 0-48-8c-61.86 0-112 35.82-112 80s50.14 80 112 80 112-35.82 112-80V148.15l73-21.39a32 32 0 0 0 23-30.71V32a32 32 0 0 0-41.06-30.67z" class=""></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 16.5C18 17.8807 16.8807 19 15.5 19C14.1193 19 13 17.8807 13 16.5C13 15.1193 14.1193 14 15.5 14C16.8807 14 18 15.1193 18 16.5Z" stroke="currentColor" stroke-width="2"/>
<path d="M18.2572 5.49711L20.9021 4.43917C21.4828 4.20687 22.1351 4.54037 22.2868 5.14719C22.4097 5.63869 22.1577 6.14671 21.692 6.34628L19.6061 7.24025C19.2384 7.39783 19 7.75937 19 8.1594V16.5L17 15V7.35407C17 6.53626 17.4979 5.80084 18.2572 5.49711Z" fill="currentColor"/>
<path d="M5 6H14M5 10H14M5 14H10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M5 18H10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 735 B

After

Width:  |  Height:  |  Size: 741 B

Before After
Before After

View file

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="currentColor"/>
<path d="M14 17C14 15.895 13.105 15 12 15C10.895 15 10 15.895 10 17C10 17.749 10.677 20.83 10.677 20.83L10.683 20.829C10.762 21.49 11.318 22.004 12 22.004C12.682 22.004 13.238 21.49 13.317 20.829L13.323 20.83C13.323 20.83 14 17.741 14 17Z" fill="currentColor"/>
<path d="M11.271 6.043C8.675 6.351 6.517 8.397 6.086 10.975C5.83 12.507 6.161 13.953 6.888 15.131C7.322 15.834 8.361 15.775 8.684 15.015C8.808 14.724 8.798 14.386 8.628 14.12C8.037 13.197 7.803 12.029 8.188 10.781C8.597 9.455 9.718 8.412 11.071 8.105C13.679 7.515 16 9.491 16 12C16 12.783 15.764 13.506 15.371 14.121C15.201 14.386 15.193 14.725 15.316 15.015C15.639 15.775 16.678 15.835 17.112 15.132C17.674 14.22 18 13.148 18 12C18 8.451 14.904 5.613 11.271 6.043Z" fill="currentColor"/>
<path d="M10.095 2.177C6.08201 2.922 2.87 6.169 2.16 10.189C1.384 14.584 3.502 18.578 6.921 20.601C7.66 21.038 8.572 20.381 8.406 19.539C8.35 19.256 8.17 19.021 7.922 18.873C5.231 17.271 3.551 14.14 4.106 10.682C4.665 7.203 7.58001 4.443 11.081 4.05C15.902 3.511 20 7.286 20 12C20 14.923 18.422 17.48 16.075 18.875C15.828 19.022 15.647 19.257 15.592 19.539C15.426 20.38 16.335 21.041 17.073 20.604C20.019 18.864 22 15.662 22 12C22 5.863 16.443 0.999003 10.095 2.177Z" fill="currentColor"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -1 +1,3 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="step-backward" class="svg-inline--fa fa-step-backward fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z"></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 5V19M7.97609 12.7809L15.3753 18.7002C16.0301 19.2241 17 18.7579 17 17.9194V6.08062C17 5.24212 16.0301 4.77595 15.3753 5.29976L7.97609 11.2191C7.47568 11.6195 7.47568 12.3805 7.97609 12.7809Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 428 B

After

Width:  |  Height:  |  Size: 371 B

Before After
Before After

View file

@ -1 +1,8 @@
<span class="dn color-inherit link hover-indigo"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="repeat-1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-repeat-1 fa-w-16 fa-1x"><path fill="currentColor" d="M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l80.269-80.27c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464l-22.095 20H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-22.095 20.002c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l80.269-80.27c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0l-10.775 10.775c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634zm154.887 4.323c0-7.477 3.917-11.572 11.573-11.572h15.131v-39.878c0-5.163.534-10.503.534-10.503h-.356s-1.779 2.67-2.848 3.738c-4.451 4.273-10.504 4.451-15.666-1.068l-5.518-6.231c-5.342-5.341-4.984-11.216.534-16.379l21.72-19.939c4.449-4.095 8.366-5.697 14.42-5.697h12.105c7.656 0 11.749 3.916 11.749 11.572v84.384h15.488c7.655 0 11.572 4.094 11.572 11.572v8.901c0 7.477-3.917 11.572-11.572 11.572h-67.293c-7.656 0-11.573-4.095-11.573-11.572v-8.9z" class=""></path></svg></span> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 11.5V11C5 8.79086 6.79086 7 9 7H12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M19 12.5V13C19 15.2091 17.2091 17 15 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M10.5 9.34761V4.65239C10.5 4.57149 10.5911 4.52408 10.6573 4.57047L14.0111 6.91808C14.0679 6.95789 14.0679 7.04211 14.0111 7.08192L10.6573 9.42953C10.5911 9.47592 10.5 9.42851 10.5 9.34761Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
<path d="M8 14.5597V19.2516C8 19.3355 7.90301 19.3821 7.83753 19.3297L4.48617 16.6486C4.43175 16.6051 4.43743 16.5206 4.49719 16.4848L7.84855 14.474C7.9152 14.434 8 14.482 8 14.5597Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
<path d="M19 5V9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M17 6L19 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1,018 B

Before After
Before After

View file

@ -1 +1,6 @@
<span class="dn color-inherit link hover-pink"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="repeat" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-repeat fa-w-16 fa-1x"><path fill="currentColor" d="M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" class=""></path></svg></span> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 11.5V11C5 8.79086 6.79086 7 9 7H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M19 12.5V13C19 15.2091 17.2091 17 15 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M16 9.34761V4.65239C16 4.57149 16.0911 4.52408 16.1573 4.57047L19.5111 6.91808C19.5679 6.95789 19.5679 7.04211 19.5111 7.08192L16.1573 9.42953C16.0911 9.47592 16 9.42851 16 9.34761Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
<path d="M8 14.5597V19.2516C8 19.3355 7.90301 19.3821 7.83753 19.3297L4.48617 16.6486C4.43175 16.6051 4.43743 16.5206 4.49719 16.4848L7.84855 14.474C7.9152 14.434 8 14.482 8 14.5597Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 841 B

Before After
Before After

View file

@ -1 +1,4 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" class="svg-inline--fa fa-magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"></path></svg> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="6.5" stroke="currentColor" stroke-width="2"/>
<path d="M13.2071 11.7929L12.5 11.0858L11.0858 12.5L11.7929 13.2071L13.2071 11.7929ZM16.2929 17.7071C16.6834 18.0976 17.3166 18.0976 17.7071 17.7071C18.0976 17.3166 18.0976 16.6834 17.7071 16.2929L16.2929 17.7071ZM11.7929 13.2071L16.2929 17.7071L17.7071 16.2929L13.2071 11.7929L11.7929 13.2071Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 628 B

After

Width:  |  Height:  |  Size: 496 B

Before After
Before After

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 793 B

After

Width:  |  Height:  |  Size: 43 KiB

Before After
Before After

View file

@ -1 +1,6 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="random" class="svg-inline--fa fa-random fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z"></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 7H5.73524C7.14029 7 8.44232 7.7372 9.16521 8.94202L11 12L13.3057 15.2938C14.0542 16.3632 15.2774 17 16.5826 17H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M4.5 17H5.73524C7.14029 17 8.44232 16.2628 9.16521 15.058L11 12L13.3057 8.70615C14.0542 7.63685 15.2774 7 16.5826 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M16.5 9.34761V4.65239C16.5 4.57149 16.5911 4.52408 16.6573 4.57047L20.0111 6.91808C20.0679 6.95789 20.0679 7.04211 20.0111 7.08192L16.6573 9.42953C16.5911 9.47592 16.5 9.42851 16.5 9.34761Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
<path d="M16.5 19.3476V14.6524C16.5 14.5715 16.5911 14.5241 16.6573 14.5705L20.0111 16.9181C20.0679 16.9579 20.0679 17.0421 20.0111 17.0819L16.6573 19.4295C16.5911 19.4759 16.5 19.4285 16.5 19.3476Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 904 B

After

Width:  |  Height:  |  Size: 1,023 B

Before After
Before After

View file

@ -1 +1,2 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="volume-down" class="svg-inline--fa fa-volume-down fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z"></path></svg> <svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M301.2 34.85c-11.5-5.19-25.02-3.122-34.44 5.253L131.8 160H48c-26.51 0-48 21.49-48 47.1v95.1c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9c5.98 5.31 13.58 8.09 21.26 8.09 4.43 0 8.97-.94 13.17-2.85 11.5-5.16 18.82-16.56 18.82-29.16V63.99c-.89-12.59-7.29-24-18.79-29.15ZM513.9 255.1l47.03-47.03c9.375-9.375 9.375-24.56 0-33.94 -9.375-9.38-24.56-9.375-33.94 0L480 222.1 432.1 175c-9.375-9.375-24.56-9.375-33.94 0 -9.38 9.375-9.375 24.56 0 33.94l47.03 47.03L398.16 303c-9.375 9.375-9.375 24.56 0 33.94 9.37 9.37 24.56 9.38 33.94 0L480 289.9l47.03 47.03c9.37 9.37 24.56 9.38 33.94 0 9.375-9.375 9.375-24.56 0-33.94L513.9 255.1Z"/></svg>
<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M412.6 181.9c-10.28-8.35-25.41-6.875-33.75 3.4 -8.41 10.25-6.91 25.37 3.375 33.78 11.27 9.31 17.77 22.714 17.77 36.91 0 14.19-6.5 27.62-17.81 36.87 -10.28 8.4-11.78 23.53-3.375 33.78 4.71 5.81 11.62 8.81 18.56 8.81 5.34 0 10.75-1.79 15.19-5.41 22.53-18.46 35.435-45.36 35.435-74.06 0-28.7-12.9-55.6-35.4-74.1ZM301.2 34.84c-11.5-5.19-25.01-3.12-34.43 5.25L131.8 159.99H48c-26.51 0-48 21.49-48 47.1v95.1c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9c5.96 8 13.56 10.8 21.26 10.8 4.43 0 8.95-.94 13.16-2.84 11.54-5.17 18.84-16.57 18.84-29.17v-384c0-12.59-7.3-24.9-18.8-29.16Z"/></svg>

Before

Width:  |  Height:  |  Size: 679 B

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

View file

@ -1 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="volume-mute" class="svg-inline--fa fa-volume-mute fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"></path></svg> <svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M301.2 34.85c-11.5-5.19-25.02-3.122-34.44 5.253L131.8 160H48c-26.51 0-48 21.49-48 47.1v95.1c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9c5.98 5.31 13.58 8.09 21.26 8.09 4.43 0 8.97-.94 13.17-2.85 11.5-5.16 18.82-16.56 18.82-29.16V63.99c-.89-12.59-7.29-24-18.79-29.15ZM513.9 255.1l47.03-47.03c9.375-9.375 9.375-24.56 0-33.94 -9.375-9.38-24.56-9.375-33.94 0L480 222.1 432.1 175c-9.375-9.375-24.56-9.375-33.94 0 -9.38 9.375-9.375 24.56 0 33.94l47.03 47.03L398.16 303c-9.375 9.375-9.375 24.56 0 33.94 9.37 9.37 24.56 9.38 33.94 0L480 289.9l47.03 47.03c9.37 9.37 24.56 9.38 33.94 0 9.375-9.375 9.375-24.56 0-33.94L513.9 255.1Z"/></svg>

Before

Width:  |  Height:  |  Size: 781 B

After

Width:  |  Height:  |  Size: 702 B

Before After
Before After

View file

@ -1 +1,4 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="volume" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512" class="svg-inline--fa fa-volume fa-w-15 fa-2x"><path fill="currentColor" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.53 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z" class=""></path></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 10.5V13.5C3 14.3284 3.67157 15 4.5 15H6.61626L10.4966 18.4923C11.4618 19.361 13 18.676 13 17.3773V6.62268C13 5.32402 11.4618 4.63899 10.4966 5.50774L10.4966 5.50774L6.61626 9L4.5 9C3.67157 9 3 9.67157 3 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M16.5 9.5C16.5 9.5 17.5 10.5 17.5 12C17.5 13.5 16.5 14.5 16.5 14.5M19 7C19 7 21 9 21 12C21 15 19 17 19 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 944 B

After

Width:  |  Height:  |  Size: 569 B

Before After
Before After

View file

@ -23,19 +23,12 @@ const Button = ({
iconColor?: Color iconColor?: Color
isSkelton?: boolean isSkelton?: boolean
}) => { }) => {
const shape =
Array.isArray(children) && children.length === 1
? Shape.Square
: Shape.Default
return ( return (
<button <button
onClick={onClick} onClick={onClick}
className={classNames( className={classNames(
'btn-pressed-animation flex cursor-default items-center rounded-lg text-lg font-semibold', 'btn-pressed-animation flex cursor-default items-center rounded-lg px-4 py-1.5 text-lg font-medium',
{ {
'px-4 py-1.5': shape === Shape.Default,
'px-3 py-1.5': shape === Shape.Square,
'bg-brand-100 dark:bg-brand-600': color === Color.Primary, 'bg-brand-100 dark:bg-brand-600': color === Color.Primary,
'text-brand-500 dark:text-white': iconColor === Color.Primary, 'text-brand-500 dark:text-white': iconColor === Color.Primary,
'bg-gray-100 dark:bg-gray-700': color === Color.Gray, 'bg-gray-100 dark:bg-gray-700': color === Color.Gray,

View file

@ -45,7 +45,7 @@ const Cover = ({
{/* Play button */} {/* Play button */}
<div className='absolute top-0 hidden h-full w-full place-content-center group-hover:grid'> <div className='absolute top-0 hidden h-full w-full place-content-center group-hover:grid'>
<button className='btn-pressed-animation grid h-11 w-11 cursor-default place-content-center rounded-full border border-white border-opacity-[.08] bg-white bg-opacity-[.14] text-white backdrop-blur backdrop-filter transition-all hover:bg-opacity-[.44]'> <button className='btn-pressed-animation grid h-11 w-11 cursor-default place-content-center rounded-full border border-white border-opacity-[.08] bg-white bg-opacity-[.14] text-white backdrop-blur backdrop-filter transition-all hover:bg-opacity-[.44]'>
<SvgIcon className='ml-1 h-4 w-4' name='play' /> <SvgIcon className='ml-0.5 h-6 w-6' name='play-fill' />
</button> </button>
</div> </div>
</div> </div>

View file

@ -24,7 +24,7 @@ const DailyTracksCard = () => {
{/* Play button */} {/* Play button */}
<button className='btn-pressed-animation absolute right-6 bottom-6 grid h-11 w-11 cursor-default place-content-center rounded-full border border-white border-opacity-[.08] bg-white bg-opacity-[.14] text-white backdrop-blur backdrop-filter transition-all hover:bg-opacity-[.44]'> <button className='btn-pressed-animation absolute right-6 bottom-6 grid h-11 w-11 cursor-default place-content-center rounded-full border border-white border-opacity-[.08] bg-white bg-opacity-[.14] text-white backdrop-blur backdrop-filter transition-all hover:bg-opacity-[.44]'>
<SvgIcon name='play' className='ml-1 h-4 w-4' /> <SvgIcon name='play-fill' className='ml-0.5 h-6 w-6' />
</button> </button>
</div> </div>
) )

View file

@ -37,23 +37,23 @@ const FMCard = () => {
<div className='opacity-75'>Wolf Alice</div> <div className='opacity-75'>Wolf Alice</div>
</div> </div>
<div className='flex items-center justify-between'> <div className='-mb-1 flex items-center justify-between'>
{/* Actions */} {/* Actions */}
<div> <div>
{Object.values(ACTION).map(action => ( {Object.values(ACTION).map(action => (
<button <button
key={action} key={action}
className='btn-pressed-animation btn-hover-animation mr-1 cursor-default rounded-lg p-2 transition duration-200 after:bg-white/10' className='btn-pressed-animation btn-hover-animation mr-1 cursor-default rounded-lg p-1.5 transition duration-200 after:bg-white/10'
> >
<SvgIcon name={action} className='h-5 w-5' /> <SvgIcon name={action} className='h-6 w-6' />
</button> </button>
))} ))}
</div> </div>
{/* FM logo */} {/* FM logo */}
<div className='right-4 bottom-5 flex text-white opacity-20'> <div className='right-4 bottom-5 flex text-white opacity-20'>
<SvgIcon name='fm' className='mr-2 h-5 w-5' /> <SvgIcon name='fm' className='mr-1 h-6 w-6' />
<span className='font-semibold'>FM</span> <span className='font-semibold'>FM</span>
</div> </div>
</div> </div>

View file

@ -16,7 +16,7 @@ const IconButton = ({
onClick={onClick} onClick={onClick}
className={classNames( className={classNames(
className, className,
'relative transform cursor-default p-2 transition duration-200', 'relative transform cursor-default p-1.5 transition duration-200',
!disabled && !disabled &&
'btn-pressed-animation btn-hover-animation after:bg-black/[.06] dark:after:bg-white/10', 'btn-pressed-animation btn-hover-animation after:bg-black/[.06] dark:after:bg-white/10',
disabled && 'opacity-30' disabled && 'opacity-30'

View file

@ -60,7 +60,7 @@ const PlayingTrack = () => {
<IconButton onClick={() => toast('Work in progress')}> <IconButton onClick={() => toast('Work in progress')}>
<SvgIcon <SvgIcon
className='h-4 w-4 text-black dark:text-white' className='h-6 w-6 text-black dark:text-white'
name='heart-outline' name='heart-outline'
/> />
</IconButton> </IconButton>
@ -78,15 +78,15 @@ const MediaControls = () => {
return ( return (
<div className='flex items-center justify-center gap-2 text-black dark:text-white'> <div className='flex items-center justify-center gap-2 text-black dark:text-white'>
<IconButton onClick={() => track && player.prevTrack()} disabled={!track}> <IconButton onClick={() => track && player.prevTrack()} disabled={!track}>
<SvgIcon className='h-4 w-4' name='previous' /> <SvgIcon className='h-6 w-6' name='previous' />
</IconButton> </IconButton>
<IconButton <IconButton
onClick={() => track && player.playOrPause()} onClick={() => track && player.playOrPause()}
disabled={!track} disabled={!track}
className='rounded-2xl' className='after:rounded-xl'
> >
<SvgIcon <SvgIcon
className='h-[1.5rem] w-[1.5rem] ' className='h-7 w-7'
name={ name={
[PlayerState.PLAYING, PlayerState.LOADING].includes(state) [PlayerState.PLAYING, PlayerState.LOADING].includes(state)
? 'pause' ? 'pause'
@ -95,7 +95,7 @@ const MediaControls = () => {
/> />
</IconButton> </IconButton>
<IconButton onClick={() => track && player.nextTrack()} disabled={!track}> <IconButton onClick={() => track && player.nextTrack()} disabled={!track}>
<SvgIcon className='h-4 w-4' name='next' /> <SvgIcon className='h-6 w-6' name='next' />
</IconButton> </IconButton>
</div> </div>
) )
@ -105,19 +105,19 @@ const Others = () => {
return ( return (
<div className='flex items-center justify-end gap-2 pr-2 text-black dark:text-white'> <div className='flex items-center justify-end gap-2 pr-2 text-black dark:text-white'>
<IconButton onClick={() => toast('Work in progress')}> <IconButton onClick={() => toast('Work in progress')}>
<SvgIcon className='h-4 w-4' name='playlist' /> <SvgIcon className='h-6 w-6' name='playlist' />
</IconButton> </IconButton>
<IconButton onClick={() => toast('Work in progress')}> <IconButton onClick={() => toast('Work in progress')}>
<SvgIcon className='h-4 w-4' name='repeat' /> <SvgIcon className='h-6 w-6' name='repeat' />
</IconButton> </IconButton>
<IconButton onClick={() => toast('Work in progress')}> <IconButton onClick={() => toast('Work in progress')}>
<SvgIcon className='h-4 w-4' name='shuffle' /> <SvgIcon className='h-6 w-6' name='shuffle' />
</IconButton> </IconButton>
<IconButton onClick={() => toast('Work in progress')}> <IconButton onClick={() => toast('Work in progress')}>
<SvgIcon className='h-4 w-4' name='volume' /> <SvgIcon className='h-6 w-6' name='volume' />
</IconButton> </IconButton>
<IconButton onClick={() => toast('Work in progress')}> <IconButton onClick={() => toast('Work in progress')}>
<SvgIcon className='h-4 w-4' name='chevron-up' /> <SvgIcon className='h-6 w-6' name='lyrics' />
</IconButton> </IconButton>
</div> </div>
) )

View file

@ -21,9 +21,9 @@ const primaryTabs: PrimaryTab[] = [
route: '/', route: '/',
}, },
{ {
name: 'Explore', name: 'Podcast',
icon: 'compass', icon: 'podcast',
route: '/explore', route: '/podcast',
}, },
{ {
name: 'Library', name: 'Library',

View file

@ -19,9 +19,9 @@ const NavigationButtons = () => {
<div <div
onClick={() => handleNavigate(action)} onClick={() => handleNavigate(action)}
key={action} key={action}
className='app-region-no-drag btn-hover-animation rounded-lg p-3 text-gray-500 transition duration-300 after:rounded-full after:bg-black/[.06] hover:text-gray-900 dark:text-gray-300 dark:after:bg-white/10 dark:hover:text-gray-200' className='app-region-no-drag btn-hover-animation rounded-lg p-2 text-gray-500 transition duration-300 after:rounded-full after:bg-black/[.06] hover:text-gray-900 dark:text-gray-300 dark:after:bg-white/10 dark:hover:text-gray-200'
> >
<SvgIcon className='h-4 w-4' name={action} /> <SvgIcon className='h-5 w-5' name={action} />
</div> </div>
))} ))}
</div> </div>
@ -32,13 +32,13 @@ const SearchBox = () => {
return ( return (
<div className='app-region-no-drag group flex w-[16rem] cursor-text items-center rounded-full bg-gray-500 bg-opacity-5 px-3 transition duration-300 hover:bg-opacity-10 dark:bg-gray-300 dark:bg-opacity-5'> <div className='app-region-no-drag group flex w-[16rem] cursor-text items-center rounded-full bg-gray-500 bg-opacity-5 px-3 transition duration-300 hover:bg-opacity-10 dark:bg-gray-300 dark:bg-opacity-5'>
<SvgIcon <SvgIcon
className='mr-2 h-4 w-4 text-gray-500 transition duration-300 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-200' className='mr-2 h-5 w-5 text-gray-500 transition duration-300 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-200'
name='search' name='search'
/> />
<input <input
type='text' type='text'
className='w-full bg-transparent placeholder:text-gray-500 dark:text-white dark:placeholder:text-gray-400' className='w-full bg-transparent placeholder:text-gray-500 dark:text-white dark:placeholder:text-gray-400'
placeholder='Search' placeholder='搜索'
/> />
</div> </div>
) )
@ -47,7 +47,7 @@ const SearchBox = () => {
const Settings = () => { const Settings = () => {
return ( return (
<div className='app-region-no-drag btn-hover-animation rounded-lg p-2.5 text-gray-500 transition duration-300 after:rounded-full after:bg-black/[.06] hover:text-gray-900 dark:text-gray-300 dark:after:bg-white/10 dark:hover:text-gray-200'> <div className='app-region-no-drag btn-hover-animation rounded-lg p-2.5 text-gray-500 transition duration-300 after:rounded-full after:bg-black/[.06] hover:text-gray-900 dark:text-gray-300 dark:after:bg-white/10 dark:hover:text-gray-200'>
<SvgIcon className='h-5 w-5' name='settings' /> <SvgIcon className='h-[1.125rem] w-[1.125rem]' name='settings' />
</div> </div>
) )
} }

View file

@ -29,12 +29,12 @@ const PlayOrPauseButtonInTrack = memo(
<div <div
onClick={onClick} onClick={onClick}
className={classNames( className={classNames(
'self-center', 'btn-pressed-animation -ml-1 self-center',
!isHighlight && 'hidden group-hover:block' !isHighlight && 'hidden group-hover:block'
)} )}
> >
<SvgIcon <SvgIcon
className='h-3.5 w-3.5 text-brand-500' className='h-5 w-5 text-brand-500'
name={isPlaying && isHighlight ? 'pause' : 'play'} name={isPlaying && isHighlight ? 'pause' : 'play'}
/> />
</div> </div>
@ -69,7 +69,7 @@ const Track = memo(
'group grid w-full rounded-xl after:scale-[.98] after:rounded-xl', 'group grid w-full rounded-xl after:scale-[.98] after:rounded-xl',
'grid-cols-12 py-2.5 px-4', 'grid-cols-12 py-2.5 px-4',
!isSkeleton && { !isSkeleton && {
'btn-hover-animation after:bg-gray-100 dark:after:bg-white/[.08]': 'btn-hover-animation after:bg-gray-100 dark:after:bg-white/10':
!isHighlight, !isHighlight,
'bg-brand-50 dark:bg-gray-800': isHighlight, 'bg-brand-50 dark:bg-gray-800': isHighlight,
} }
@ -163,7 +163,7 @@ const Track = memo(
> >
<SvgIcon <SvgIcon
name={isLiked ? 'heart' : 'heart-outline'} name={isLiked ? 'heart' : 'heart-outline'}
className='h-4 w-4 ' className='h-5 w-5'
/> />
</button> </button>
)} )}

View file

@ -28,11 +28,11 @@ const Track = memo(
<div <div
onClick={e => onClick(e, track.id)} onClick={e => onClick(e, track.id)}
className={classNames( className={classNames(
'group grid w-full rounded-xl after:scale-[.98] after:rounded-xl dark:after:bg-white/[.08]', 'group grid w-full rounded-xl after:scale-[.98] after:rounded-xl ',
'grid-cols-12 p-2 pr-4', 'grid-cols-12 p-2 pr-4',
!isSkeleton && !isSkeleton &&
!isPlaying && !isPlaying &&
'btn-hover-animation after:bg-gray-100 dark:after:bg-white/[.08]', 'btn-hover-animation after:bg-gray-100 dark:after:bg-white/10',
!isSkeleton && isPlaying && 'bg-brand-50 dark:bg-gray-800' !isSkeleton && isPlaying && 'bg-brand-50 dark:bg-gray-800'
)} )}
> >
@ -127,7 +127,7 @@ const Track = memo(
> >
<SvgIcon <SvgIcon
name={isLiked ? 'heart' : 'heart-outline'} name={isLiked ? 'heart' : 'heart-outline'}
className='h-4 w-4 ' className='h-5 w-5'
/> />
</button> </button>
)} )}
@ -197,7 +197,7 @@ const TracksList = memo(
<div className='col-span-2 justify-self-end'>TIME</div> <div className='col-span-2 justify-self-end'>TIME</div>
</div> </div>
<div className='grid w-full gap-1'> <div className='grid w-full'>
{/* Tracks */} {/* Tracks */}
{isSkeleton {isSkeleton
? skeletonTracks.map((track, index) => ( ? skeletonTracks.map((track, index) => (

View file

@ -16,7 +16,7 @@ export default function usePlaylist(
() => fetch(params, noCache), () => fetch(params, noCache),
{ {
enabled: !!(params.id && params.id > 0 && !isNaN(Number(params.id))), enabled: !!(params.id && params.id > 0 && !isNaN(Number(params.id))),
staleTime: 60 * 60 * 1000, // 1 hour refetchOnWindowFocus: true,
placeholderData: (): FetchPlaylistResponse | undefined => placeholderData: (): FetchPlaylistResponse | undefined =>
window.ipcRenderer.sendSync('getApiCacheSync', { window.ipcRenderer.sendSync('getApiCacheSync', {
api: 'playlist/detail', api: 'playlist/detail',
@ -29,7 +29,6 @@ export default function usePlaylist(
} }
export async function prefetchPlaylist(params: FetchPlaylistParams) { export async function prefetchPlaylist(params: FetchPlaylistParams) {
console.log('prefetchAlbum', params)
await reactQueryClient.prefetchQuery( await reactQueryClient.prefetchQuery(
[PlaylistApiNames.FETCH_PLAYLIST, params], [PlaylistApiNames.FETCH_PLAYLIST, params],
() => fetch(params), () => fetch(params),

View file

@ -54,7 +54,7 @@ const PlayButton = ({
<Button onClick={wrappedHandlePlay} isSkelton={isLoading}> <Button onClick={wrappedHandlePlay} isSkelton={isLoading}>
<SvgIcon <SvgIcon
name={isPlaying && isThisAlbumPlaying ? 'pause' : 'play'} name={isPlaying && isThisAlbumPlaying ? 'pause' : 'play'}
className='mr-2 h-4 w-4' className='mr-1 -ml-1 h-6 w-6'
/> />
{isPlaying && isThisAlbumPlaying ? '暂停' : '播放'} {isPlaying && isThisAlbumPlaying ? '暂停' : '播放'}
</Button> </Button>
@ -74,7 +74,7 @@ const Header = ({
const albumDuration = useMemo(() => { const albumDuration = useMemo(() => {
const duration = album?.songs?.reduce((acc, cur) => acc + cur.dt, 0) || 0 const duration = album?.songs?.reduce((acc, cur) => acc + cur.dt, 0) || 0
return formatDuration(duration, 'en', 'hh[hr] mm[min]') return formatDuration(duration, 'zh-CN', 'hh[hr] mm[min]')
}, [album?.songs]) }, [album?.songs])
const [isCoverError, setCoverError] = useState(false) const [isCoverError, setCoverError] = useState(false)
@ -160,8 +160,8 @@ const Header = ({
PLACEHOLDER PLACEHOLDER
</Skeleton> </Skeleton>
) : ( ) : (
<div className='text-sm font-thin text-gray-500 dark:text-gray-400'> <div className='text-sm text-gray-500 dark:text-gray-400'>
{dayjs(album?.publishTime || 0).year()} · {album?.size} Songs,{' '} {dayjs(album?.publishTime || 0).year()} · {album?.size} ,{' '}
{albumDuration} {albumDuration}
</div> </div>
)} )}
@ -183,10 +183,11 @@ const Header = ({
<Button <Button
color={ButtonColor.Gray} color={ButtonColor.Gray}
iconColor={ButtonColor.Gray}
isSkelton={isLoading} isSkelton={isLoading}
onClick={() => toast('Work in progress')} onClick={() => toast('Work in progress')}
> >
<SvgIcon name='heart' className='h-4 w-4' /> <SvgIcon name='heart-outline' className='h-6 w-6' />
</Button> </Button>
<Button <Button
@ -195,7 +196,7 @@ const Header = ({
isSkelton={isLoading} isSkelton={isLoading}
onClick={() => toast('Work in progress')} onClick={() => toast('Work in progress')}
> >
<SvgIcon name='more' className='h-4 w-4' /> <SvgIcon name='more' className='h-6 w-6' />
</Button> </Button>
</div> </div>
</div> </div>

View file

@ -1,4 +1,8 @@
import { PlaylistApiNames, fetchRecommendedPlaylists } from '@/api/playlist' import {
PlaylistApiNames,
fetchRecommendedPlaylists,
fetchDailyRecommendPlaylists,
} from '@/api/playlist'
import CoverRow from '@/components/CoverRow' import CoverRow from '@/components/CoverRow'
import DailyTracksCard from '@/components/DailyTracksCard' import DailyTracksCard from '@/components/DailyTracksCard'
import FMCard from '@/components/FMCard' import FMCard from '@/components/FMCard'
@ -18,12 +22,27 @@ export default function Home() {
} }
) )
const {
data: dailyRecommendPlaylists,
isLoading: isLoadingDailyRecommendPlaylists,
} = useQuery(
PlaylistApiNames.FETCH_DAILY_RECOMMEND_PLAYLISTS,
fetchDailyRecommendPlaylists
)
const playlists = [
...(dailyRecommendPlaylists?.recommend ?? []),
...(recommendedPlaylists?.result ?? []),
].slice(0, 10)
return ( return (
<div> <div>
<CoverRow <CoverRow
title='Good Morning' title='推荐歌单'
playlists={recommendedPlaylists?.result.slice(0, 10) ?? []} playlists={playlists}
isSkeleton={isLoadingRecommendedPlaylists} isSkeleton={
isLoadingRecommendedPlaylists || isLoadingDailyRecommendPlaylists
}
/> />
<div className='mt-10 mb-4 text-[28px] font-bold text-black dark:text-white'> <div className='mt-10 mb-4 text-[28px] font-bold text-black dark:text-white'>

View file

@ -46,11 +46,13 @@ const PhoneInput = ({
}) => { }) => {
return ( return (
<div className='w-full'> <div className='w-full'>
<div className='mb-1 text-sm font-medium text-gray-700'>Phone</div> <div className='mb-1 text-sm font-medium text-gray-700 dark:text-gray-300'>
Phone
</div>
<div className='flex w-full'> <div className='flex w-full'>
<input <input
className={classNames( className={classNames(
'rounded-md rounded-r-none border border-r-0 border-gray-300 px-3 py-2', 'rounded-md rounded-r-none border border-r-0 border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white',
countryCode.length <= 3 && 'w-14', countryCode.length <= 3 && 'w-14',
countryCode.length == 4 && 'w-16', countryCode.length == 4 && 'w-16',
countryCode.length >= 5 && 'w-20' countryCode.length >= 5 && 'w-20'
@ -61,7 +63,7 @@ const PhoneInput = ({
onChange={e => setCountryCode(e.target.value)} onChange={e => setCountryCode(e.target.value)}
/> />
<input <input
className='flex-grow rounded-md rounded-l-none border border-gray-300 px-3 py-2' className='flex-grow rounded-md rounded-l-none border border-gray-300 px-3 py-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white'
type='text' type='text'
value={phone} value={phone}
onChange={e => setPhone(e.target.value)} onChange={e => setPhone(e.target.value)}
@ -81,18 +83,20 @@ const PasswordInput = ({
const [showPassword, setShowPassword] = useState(false) const [showPassword, setShowPassword] = useState(false)
return ( return (
<div className='mt-3 flex w-full flex-col'> <div className='mt-3 flex w-full flex-col'>
<div className='mb-1 text-sm font-medium text-gray-700'>Password</div> <div className='mb-1 text-sm font-medium text-gray-700 dark:text-gray-300'>
Password
</div>
<div className='flex w-full'> <div className='flex w-full'>
<input <input
value={password} value={password}
onChange={e => setPassword(e.target.value)} onChange={e => setPassword(e.target.value)}
className='w-full rounded-md rounded-r-none border border-r-0 border-gray-300 px-2 py-2' className='w-full rounded-md rounded-r-none border border-r-0 border-gray-300 px-2 py-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white'
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
/> />
<div className='flex items-center justify-center rounded-md rounded-l-none border border-l-0 border-gray-300 pr-1'> <div className='flex items-center justify-center rounded-md rounded-l-none border border-l-0 border-gray-300 pr-1 dark:border-gray-600 dark:bg-gray-700'>
<button <button
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className='cursor-default rounded p-1.5 text-gray-400 transition duration-300 hover:bg-gray-100 hover:text-gray-600' className='dark:hover-text-white cursor-default rounded p-1.5 text-gray-400 transition duration-300 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-600 dark:hover:text-white'
> >
<SvgIcon <SvgIcon
className='h-5 w-5' className='h-5 w-5'
@ -118,8 +122,10 @@ const LoginButton = ({
onClick={onClick} onClick={onClick}
className={classNames( className={classNames(
'my-2 mt-6 flex w-full cursor-default items-center justify-center rounded-lg py-2 text-lg font-semibold transition duration-200', 'my-2 mt-6 flex w-full cursor-default items-center justify-center rounded-lg py-2 text-lg font-semibold transition duration-200',
!disabled && 'bg-brand-100 text-brand-500', !disabled &&
disabled && 'bg-brand-100 text-brand-300' 'bg-brand-100 text-brand-500 dark:bg-brand-600 dark:text-white',
disabled &&
'bg-brand-100 text-brand-300 dark:bg-brand-700 dark:text-white/50'
)} )}
> >
Login Login
@ -154,9 +160,9 @@ const OtherLoginMethods = ({
return ( return (
<Fragment> <Fragment>
<div className='mt-8 mb-4 flex w-full items-center'> <div className='mt-8 mb-4 flex w-full items-center'>
<span className='h-px flex-grow bg-gray-300'></span> <span className='h-px flex-grow bg-gray-300 dark:bg-gray-700'></span>
<span className='mx-2 text-sm text-gray-400'>or</span> <span className='mx-2 text-sm text-gray-400 '>or</span>
<span className='h-px flex-grow bg-gray-300'></span> <span className='h-px flex-grow bg-gray-300 dark:bg-gray-700'></span>
</div> </div>
<div className='flex gap-3'> <div className='flex gap-3'>
{otherLoginMethods.map( {otherLoginMethods.map(
@ -165,7 +171,7 @@ const OtherLoginMethods = ({
<button <button
key={id} key={id}
onClick={() => setMethod(id)} onClick={() => setMethod(id)}
className='flex w-full cursor-default items-center justify-center rounded-lg bg-gray-100 py-2 font-medium text-gray-600 transition duration-300 hover:bg-gray-200 hover:text-gray-800' className='flex w-full cursor-default items-center justify-center rounded-lg bg-gray-100 py-2 font-medium text-gray-600 transition duration-300 hover:bg-gray-200 hover:text-gray-800 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 dark:hover:text-gray-100'
> >
<SvgIcon className='mr-2 h-5 w-5' name={id} /> <SvgIcon className='mr-2 h-5 w-5' name={id} />
<span>{name}</span> <span>{name}</span>
@ -275,10 +281,12 @@ const LoginWithQRCode = () => {
const qrCodeMessage = 'test' const qrCodeMessage = 'test'
return ( return (
<div className='flex flex-col items-center justify-center'> <div className='flex flex-col items-center justify-center'>
<div className='rounded-3xl border p-6'> <div className='rounded-3xl border p-6 dark:border-gray-700'>
<img src={qrCodeImage} alt='QR Code' className='no-drag' /> <img src={qrCodeImage} alt='QR Code' className='no-drag' />
</div> </div>
<div className='mt-4 text-sm text-gray-500'>{qrCodeMessage}</div> <div className='mt-4 text-sm text-gray-500 dark:text-gray-200'>
{qrCodeMessage}
</div>
</div> </div>
) )
} }

View file

@ -33,7 +33,7 @@ const Header = memo(
<div className='absolute top-0 h-full w-full bg-gradient-to-b from-white/[.84] to-white dark:from-black/[.5] dark:to-[#1d1d1d]'></div> <div className='absolute top-0 h-full w-full bg-gradient-to-b from-white/[.84] to-white dark:from-black/[.5] dark:to-[#1d1d1d]'></div>
</div> </div>
<div className='grid grid-cols-[16rem_auto] items-center gap-9'> <div className='grid grid-cols-[17rem_auto] items-center gap-9'>
{/* Cover */} {/* Cover */}
<div className='relative z-0 aspect-square self-start'> <div className='relative z-0 aspect-square self-start'>
{!isLoading && ( {!isLoading && (
@ -84,10 +84,9 @@ const Header = memo(
{/* <!-- Playlist last update time & track count --> */} {/* <!-- Playlist last update time & track count --> */}
{!isLoading && ( {!isLoading && (
<div className='text-sm font-thin text-gray-500 dark:text-gray-400'> <div className='text-sm text-gray-500 dark:text-gray-400'>
Updated at {formatDate(playlist?.updateTime || 0, 'zh-CN')} ·{' '}
{formatDate(playlist?.updateTime || 0, 'en')} · {playlist?.trackCount}
{playlist?.trackCount} Songs
</div> </div>
)} )}
{isLoading && ( {isLoading && (
@ -111,16 +110,8 @@ const Header = memo(
{/* <!-- Buttons --> */} {/* <!-- Buttons --> */}
<div className='mt-5 flex gap-4'> <div className='mt-5 flex gap-4'>
<Button onClick={() => handlePlay()} isSkelton={isLoading}> <Button onClick={() => handlePlay()} isSkelton={isLoading}>
<SvgIcon name='play' className='mr-2 h-4 w-4' /> <SvgIcon name='play' className='-ml-1 mr-1 h-6 w-6' />
PLAY
</Button>
<Button
color={ButtonColor.Gray}
isSkelton={isLoading}
onClick={() => toast('Work in progress')}
>
<SvgIcon name='heart' className='h-4 w-4' />
</Button> </Button>
<Button <Button
@ -129,7 +120,16 @@ const Header = memo(
isSkelton={isLoading} isSkelton={isLoading}
onClick={() => toast('Work in progress')} onClick={() => toast('Work in progress')}
> >
<SvgIcon name='more' className='h-4 w-4' /> <SvgIcon name='heart-outline' className='h-6 w-6' />
</Button>
<Button
color={ButtonColor.Gray}
iconColor={ButtonColor.Gray}
isSkelton={isLoading}
onClick={() => toast('Work in progress')}
>
<SvgIcon name='more' className='h-6 w-6' />
</Button> </Button>
</div> </div>
</div> </div>

View file

@ -191,6 +191,7 @@ export class Player {
* @param {boolean} fade fade in * @param {boolean} fade fade in
*/ */
play() { play() {
if (_howler.playing()) return
_howler.play() _howler.play()
this.state = State.PLAYING this.state = State.PLAYING
this._progress = _howler.seek() this._progress = _howler.seek()