afe4fee3f3
## Ticket 5457 Create file thumbnail fallback image for odysee ## Approach Since `background-image` does not invoke an `onerror` event, create a test Image instance to have the `onerror` capability. This technique is used by majority of plugins. No additional fetch is seen with this technique.
28 lines
626 B
JavaScript
28 lines
626 B
JavaScript
// @flow
|
|
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import type { Node } from 'react';
|
|
import useLazyLoading from 'effects/use-lazy-loading';
|
|
|
|
type Props = {
|
|
thumb: string,
|
|
fallback: ?string,
|
|
children?: Node,
|
|
className?: string,
|
|
};
|
|
|
|
const Thumb = (props: Props) => {
|
|
const { thumb, fallback, children, className } = props;
|
|
const thumbnailRef = React.useRef(null);
|
|
|
|
useLazyLoading(thumbnailRef, fallback || '');
|
|
|
|
return (
|
|
<div ref={thumbnailRef} data-background-image={thumb} className={classnames('media__thumb', className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Thumb;
|