this repo has no description
Better image fallbacks
+26
-3
+26
-3
src/components/media.jsx
+26
-3
src/components/media.jsx
···
17
17
*/
18
18
19
19
function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
20
-
const { blurhash, description, meta, previewUrl, remoteUrl, url, type } =
21
-
media;
20
+
const {
21
+
blurhash,
22
+
description,
23
+
meta,
24
+
previewRemoteUrl,
25
+
previewUrl,
26
+
remoteUrl,
27
+
url,
28
+
type,
29
+
} = media;
22
30
const { original = {}, small, focus } = meta || {};
23
31
24
32
const width = showOriginal ? original?.width : small?.width;
25
33
const height = showOriginal ? original?.height : small?.height;
26
-
const mediaURL = showOriginal ? url : previewUrl;
34
+
const mediaURL = showOriginal ? url : previewUrl || url;
35
+
const remoteMediaURL = showOriginal
36
+
? remoteUrl
37
+
: previewRemoteUrl || remoteUrl;
27
38
const orientation = width >= height ? 'landscape' : 'portrait';
28
39
29
40
const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
···
113
124
e.target.closest('.media-zoom').style.display = '';
114
125
setPinchZoomEnabled(true);
115
126
}}
127
+
onError={(e) => {
128
+
const { src } = e.target;
129
+
if (src === mediaURL) {
130
+
e.target.src = remoteMediaURL;
131
+
}
132
+
}}
116
133
/>
117
134
</QuickPinchZoom>
118
135
) : (
···
130
147
}}
131
148
onLoad={(e) => {
132
149
e.target.closest('.media-image').style.backgroundImage = '';
150
+
}}
151
+
onError={(e) => {
152
+
const { src } = e.target;
153
+
if (src === mediaURL) {
154
+
e.target.src = remoteMediaURL;
155
+
}
133
156
}}
134
157
/>
135
158
)}