hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix image not loading without h/w data (#738)

Browse source
This commit is contained in:
Ajay Bura 2022-08-11 18:41:09 +05:30
parent 258afec391
commit 820d08017a
2 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/app/molecules/media/Media.jsx
View file

@ -178,7 +178,7 @@ function Image({
<FileHeader name={name} link={url || link} type={type} external /> <FileHeader name={name} link={url || link} type={type} external />
<div style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }} className="image-container"> <div style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }} className="image-container">
{ blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />} { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
{ url !== null && <img onLoad={() => setBlur(false)} src={url || link} alt={name} />} { url !== null && <img style={{ display: blur ? 'none' : 'unset' }} onLoad={() => setBlur(false)} src={url || link} alt={name} />}
</div> </div>
</div> </div>
); );
@ -227,11 +227,11 @@ function Sticker({
Sticker.defaultProps = { Sticker.defaultProps = {
file: null, file: null,
type: '', type: '',
width: null,
height: null,
}; };
Sticker.propTypes = { Sticker.propTypes = {
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
width: null,
height: null,
width: PropTypes.number, width: PropTypes.number,
height: PropTypes.number, height: PropTypes.number,
link: PropTypes.string.isRequired, link: PropTypes.string.isRequired,
@ -289,6 +289,7 @@ function Video({
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [url, setUrl] = useState(null); const [url, setUrl] = useState(null);
const [thumbUrl, setThumbUrl] = useState(null); const [thumbUrl, setThumbUrl] = useState(null);
const [blur, setBlur] = useState(true);
useEffect(() => { useEffect(() => {
let unmounted = false; let unmounted = false;
@ -303,16 +304,16 @@ function Video({
}; };
}, []); }, []);
async function loadVideo() { const loadVideo = async () => {
const myUrl = await getUrl(link, type, file); const myUrl = await getUrl(link, type, file);
setUrl(myUrl); setUrl(myUrl);
setIsLoading(false); setIsLoading(false);
} };
function handlePlayVideo() { const handlePlayVideo = () => {
setIsLoading(true); setIsLoading(true);
loadVideo(); loadVideo();
} };
return ( return (
<div className="file-container"> <div className="file-container">
@ -323,14 +324,16 @@ function Video({
}} }}
className="video-container" className="video-container"
> >
{ url === null && blurhash && <BlurhashCanvas hash={blurhash} punch={1} />} { url === null ? (
{ url === null && thumbUrl !== null && ( <>
/* eslint-disable-next-line jsx-a11y/alt-text */ { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
<img src={thumbUrl} /> { thumbUrl !== null && (
<img style={{ display: blur ? 'none' : 'unset' }} src={thumbUrl} onLoad={() => setBlur(false)} alt={name} />
)} )}
{ url === null && isLoading && <Spinner size="small" /> } {isLoading && <Spinner size="small" />}
{ url === null && !isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />} {!isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
{ url !== null && ( </>
) : (
/* eslint-disable-next-line jsx-a11y/media-has-caption */ /* eslint-disable-next-line jsx-a11y/media-has-caption */
<video autoPlay controls poster={thumbUrl}> <video autoPlay controls poster={thumbUrl}>
<source src={url} type={getBlobSafeMimeType(type)} /> <source src={url} type={getBlobSafeMimeType(type)} />

25
src/app/molecules/media/Media.scss
View file

@ -27,14 +27,21 @@
white-space: initial; white-space: initial;
} }
.sticker-container {
display: inline-flex;
max-width: 128px;
width: 100%;
& img {
width: 100% !important;
}
}
.image-container, .image-container,
.video-container, .video-container,
.audio-container { .audio-container {
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -48,7 +55,6 @@
.video-container { .video-container {
& img, & img,
& canvas { & canvas {
position: absolute;
max-width: unset !important; max-width: unset !important;
width: 100% !important; width: 100% !important;
height: 100%; height: 100%;
@ -57,18 +63,13 @@
} }
} }
.sticker-container {
display: inline-flex;
max-width: 128px;
width: 100%;
& img {
width: 100% !important;
}
}
.video-container { .video-container {
position: relative;
& .ic-btn-surface { & .ic-btn-surface {
background-color: var(--bg-surface-low); background-color: var(--bg-surface-low);
}
& .ic-btn-surface,
& .donut-spinner {
position: absolute; position: absolute;
} }
video { video {