github/music-player
1
1
Fork 0
mirror of https://github.com/tsirysndr/music-player.git synced 2026-01-10 05:37:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): lazy load album covers

Browse Source
This commit is contained in:
Tsiry Sandratraina
2023-04-06 22:40:48 +03:00
parent 1da6dfc617
commit 422143fdd4
10 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
webui/musicplayer/build/asset-manifest.json
View File

@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.6215da36.css",
"main.js": "/static/js/main.2d2a1b74.js",
"main.js": "/static/js/main.a0b398a6.js",
"static/js/787.26bf0a29.chunk.js": "/static/js/787.26bf0a29.chunk.js",
"static/media/RockfordSans-ExtraBold.otf": "/static/media/RockfordSans-ExtraBold.1513e8fd97078bfb7708.otf",
"static/media/RockfordSans-Bold.otf": "/static/media/RockfordSans-Bold.c9f599ae01b13e565598.otf",
@@ -10,11 +10,11 @@
"static/media/RockfordSans-Light.otf": "/static/media/RockfordSans-Light.b4a12e8abb38f7d105c4.otf",
"index.html": "/index.html",
"main.6215da36.css.map": "/static/css/main.6215da36.css.map",
"main.2d2a1b74.js.map": "/static/js/main.2d2a1b74.js.map",
"main.a0b398a6.js.map": "/static/js/main.a0b398a6.js.map",
"787.26bf0a29.chunk.js.map": "/static/js/787.26bf0a29.chunk.js.map"
},
"entrypoints": [
"static/css/main.6215da36.css",
"static/js/main.2d2a1b74.js"
"static/js/main.a0b398a6.js"
]
}

2
webui/musicplayer/build/index.html
View File

@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Music Player</title><script defer="defer" src="/static/js/main.2d2a1b74.js"></script><link href="/static/css/main.6215da36.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Music Player</title><script defer="defer" src="/static/js/main.a0b398a6.js"></script><link href="/static/css/main.6215da36.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

3
webui/musicplayer/build/static/js/main.2d2a1b74.js
View File

File diff suppressed because one or more lines are too long

1
webui/musicplayer/build/static/js/main.2d2a1b74.js.map
View File

File diff suppressed because one or more lines are too long

3
webui/musicplayer/build/static/js/main.a0b398a6.js Normal file
View File

File diff suppressed because one or more lines are too long

0
webui/musicplayer/build/static/js/main.2d2a1b74.js.LICENSE.txt → webui/musicplayer/build/static/js/main.a0b398a6.js.LICENSE.txt
View File

1
webui/musicplayer/build/static/js/main.a0b398a6.js.map Normal file
View File

File diff suppressed because one or more lines are too long

BIN
webui/musicplayer/bun.lockb
View File

Binary file not shown.

2
webui/musicplayer/package.json
View File

@@ -32,6 +32,7 @@
"react-dom": "^17.0.2",
"react-hook-form": "^7.39.4",
"react-infinite-scroll-component": "^6.1.0",
"react-lazy-load-image-component": "^1.5.6",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"react-scrollbars-custom": "^4.1.1",
@@ -101,6 +102,7 @@
"@storybook/react": "^6.5.16",
"@storybook/testing-library": "^0.0.13",
"@types/react-custom-scrollbars": "^4.0.10",
"@types/react-lazy-load-image-component": "^1.5.2",
"babel-plugin-named-exports-order": "^0.0.2",
"cross-env": "^7.0.3",
"msw": "^0.47.4",

16
webui/musicplayer/src/Components/Albums/Albums.tsx
View File

@@ -8,6 +8,7 @@ import AlbumIcon from "../Icons/AlbumCover";
import { Device } from "../../Types/Device";
import ListeningOn from "../ListeningOn";
import { FixedSizeGrid as Grid } from "react-window";
import { LazyLoadImage } from "react-lazy-load-image-component";
const Container = styled.div`
display: flex;
@@ -21,7 +22,7 @@ const Content = styled.div`
flex: 1;
`;
const AlbumCover = styled.img`
const AlbumCover = styled(LazyLoadImage)`
height: 220px;
width: 220px;
border-radius: 3px;
@@ -123,6 +124,14 @@ const Albums: FC<AlbumsProps> = (props) => {
</>
);
const vh = (percent: number) => {
const h = Math.max(
document.documentElement.clientHeight,
window.innerHeight || 0
);
return (percent * h) / 100;
};
const vw = (percent: number) => {
const w = Math.max(
document.documentElement.clientWidth,
@@ -150,7 +159,10 @@ const Albums: FC<AlbumsProps> = (props) => {
columnWidth={247}
rowCount={data.length}
rowHeight={319}
height={Math.min(data.length, 10) * 319}
height={Math.max(
Math.min(data.length, 3) * 319,
vh(100) - 100
)}
width={vw(100) - 300}
>
{Cell}