Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 05:32:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Image container removed

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-10 18:16:53 +03:00
parent 5e9c1b8ff1
commit 73ffe01549
2 changed files with 11 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/common/Image/Image.js
View file

@ -1,36 +1,28 @@
const React = require('react');
const PropTypes = require('prop-types');
const styles = require('./styles');
const Image = ({ className, src, alt, fallbackSrc, renderFallback }) => {
const [broken, setBroken] = React.useState(false);
const onError = React.useCallback((event) => {
if (typeof src !== 'string' || event.currentTarget.src === src) {
setBroken(true);
}
}, [src]);
const onError = React.useCallback(() => {
setBroken(true);
}, []);
React.useLayoutEffect(() => {
setBroken(false);
}, [src]);
return (
<div className={className}>
{
(broken || typeof src !== 'string' || src.length === 0) && (typeof renderFallback === 'function' || typeof fallbackSrc === 'string') ?
typeof renderFallback === 'function' ?
renderFallback()
:
<img className={styles['fallback-image']} src={fallbackSrc} alt={alt} />
:
<img className={styles['image']} src={src} alt={alt} onError={onError} />
}
</div>
);
return (broken || typeof src !== 'string' || src.length === 0) && (typeof renderFallback === 'function' || typeof fallbackSrc === 'string') ?
typeof renderFallback === 'function' ?
renderFallback()
:
<img className={className} src={fallbackSrc} alt={alt} />
:
<img className={className} src={src} alt={alt} onError={onError} />;
};
Image.propTypes = {
className: PropTypes.string,
src: PropTypes.string,
alt: PropTypes.string,
fallbackSrc: PropTypes.string,
renderFallback: PropTypes.func
};

7
src/common/Image/styles.less
View file

@ -1,7 +0,0 @@
.image, .fallback-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}