mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Fix link preview image flickering indefinitely.
This commit is contained in:
parent
e6104ff4ad
commit
948a1d7cba
@ -1,9 +1,11 @@
|
|||||||
import { Component, createMemo, Show } from 'solid-js';
|
import { Component, createMemo, createSignal, Show } from 'solid-js';
|
||||||
import { useMediaContext } from '../../contexts/MediaContext';
|
import { useMediaContext } from '../../contexts/MediaContext';
|
||||||
import { hookForDev } from '../../lib/devTools';
|
import { hookForDev } from '../../lib/devTools';
|
||||||
|
|
||||||
import styles from './LinkPreview.module.scss';
|
import styles from './LinkPreview.module.scss';
|
||||||
|
|
||||||
|
const errorCountLimit = 3;
|
||||||
|
|
||||||
const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean, isLast?: boolean }> = (props) => {
|
const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean, isLast?: boolean }> = (props) => {
|
||||||
|
|
||||||
const media = useMediaContext();
|
const media = useMediaContext();
|
||||||
@ -49,7 +51,11 @@ const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean, is
|
|||||||
return k;
|
return k;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const [errorCount, setErrorCount] = createSignal(0);
|
||||||
|
|
||||||
const onError = (event: any) => {
|
const onError = (event: any) => {
|
||||||
|
if (errorCount() > errorCountLimit) return;
|
||||||
|
setErrorCount(v => v + 1);
|
||||||
const image = event.target;
|
const image = event.target;
|
||||||
image.onerror = '';
|
image.onerror = '';
|
||||||
image.src = props.preview.images[0];
|
image.src = props.preview.images[0];
|
||||||
@ -63,7 +69,7 @@ const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean, is
|
|||||||
class={klass()}
|
class={klass()}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
<Show when={image() || props.preview.images[0]}>
|
<Show when={errorCount() < errorCountLimit && (image() || props.preview.images[0])}>
|
||||||
<img
|
<img
|
||||||
class={styles.previewImage}
|
class={styles.previewImage}
|
||||||
src={image()?.media_url || props.preview.images[0]}
|
src={image()?.media_url || props.preview.images[0]}
|
||||||
|
Loading…
Reference in New Issue
Block a user