root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: audio api error message

Browse Source
This commit is contained in:
jialin
2024-12-04 19:02:10 +08:00
parent b9e8dea5d9
commit 38daa0826e
5 changed files with 65 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/audio-player/index.tsx
+1 -1
View File
@@ -274,7 +274,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
src={props.url}
ref={audioRef}
preload="metadata"
style={{ display: 'none' }}
style={{ opacity: 0, position: 'absolute', left: '-9999px' }}
onPlay={handleAudioOnPlay}
onLoadedMetadata={handleLoadedMetadata}
></audio>
src/components/auto-image/single-image.tsx
+26 -42
View File
@@ -1,7 +1,6 @@
import { CloseCircleOutlined } from '@ant-design/icons';
import { Progress } from 'antd';
import classNames from 'classnames';
import * as Vibrant from 'node-vibrant';
import ResizeObserver from 'rc-resize-observer';
import React, { useCallback } from 'react';
import AutoImage from './index';
@@ -76,50 +75,35 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
[autoSize, props.width, props.height]
);
const handleOnLoad = React.useCallback(async () => {
if (!autoBgColor) {
return;
}
// const handleOnLoad = React.useCallback(async () => {
// if (!autoBgColor) {
// return;
// }
const img = imgWrapper.current?.querySelector('img');
if (!img) {
return;
}
// const img = imgWrapper.current?.querySelector('img');
// if (!img) {
// return;
// }
Vibrant.from(img.src).getPalette((err: any, palette: any) => {
if (err) {
console.error(err);
return;
}
const color = palette?.Vibrant?.rgb;
const mutedColor = palette?.Muted?.rgb;
// Vibrant.from(img.src).getPalette((err: any, palette: any) => {
// if (err) {
// console.error(err);
// return;
// }
// const color = palette?.Vibrant?.rgb;
// const mutedColor = palette?.Muted?.rgb;
const startColor = color
? `rgba(${color[0]}, ${color[1]}, ${color[2]},0.7)`
: '';
const stopColor = mutedColor
? `rgba(${mutedColor[0]}, ${mutedColor[1]}, ${mutedColor[2]},0.5)`
: '';
setColor({
backgroundImage: `linear-gradient(135deg, ${startColor}, ${stopColor})`
});
});
}, [autoBgColor]);
const getImgSize = (
url: string
): Promise<{ width: number; height: number }> => {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
resolve({ width: img.width, height: img.height });
};
img.onerror = () => {
resolve({ width: 0, height: 0 });
};
img.src = url;
});
};
// const startColor = color
// ? `rgba(${color[0]}, ${color[1]}, ${color[2]},0.7)`
// : '';
// const stopColor = mutedColor
// ? `rgba(${mutedColor[0]}, ${mutedColor[1]}, ${mutedColor[2]},0.5)`
// : '';
// setColor({
// backgroundImage: `linear-gradient(135deg, ${startColor}, ${stopColor})`
// });
// });
// }, [autoBgColor]);
return (
<ResizeObserver onResize={handleResize}>