diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx
index b272ea1..5ef25ec 100644
--- a/src/app/molecules/media/Media.jsx
+++ b/src/app/molecules/media/Media.jsx
@@ -178,7 +178,7 @@ function Image({
{ blurhash && blur &&
}
- { url !== null &&
setBlur(false)} src={url || link} alt={name} />}
+ { url !== null &&
setBlur(false)} src={url || link} alt={name} />}
);
@@ -227,11 +227,11 @@ function Sticker({
Sticker.defaultProps = {
file: null,
type: '',
+ width: null,
+ height: null,
};
Sticker.propTypes = {
name: PropTypes.string.isRequired,
- width: null,
- height: null,
width: PropTypes.number,
height: PropTypes.number,
link: PropTypes.string.isRequired,
@@ -289,6 +289,7 @@ function Video({
const [isLoading, setIsLoading] = useState(false);
const [url, setUrl] = useState(null);
const [thumbUrl, setThumbUrl] = useState(null);
+ const [blur, setBlur] = useState(true);
useEffect(() => {
let unmounted = false;
@@ -303,16 +304,16 @@ function Video({
};
}, []);
- async function loadVideo() {
+ const loadVideo = async () => {
const myUrl = await getUrl(link, type, file);
setUrl(myUrl);
setIsLoading(false);
- }
+ };
- function handlePlayVideo() {
+ const handlePlayVideo = () => {
setIsLoading(true);
loadVideo();
- }
+ };
return (
@@ -323,15 +324,17 @@ function Video({
}}
className="video-container"
>
- { url === null && blurhash &&
}
- { url === null && thumbUrl !== null && (
- /* eslint-disable-next-line jsx-a11y/alt-text */
-
- )}
- { url === null && isLoading &&
}
- { url === null && !isLoading &&
}
- { url !== null && (
- /* eslint-disable-next-line jsx-a11y/media-has-caption */
+ { url === null ? (
+ <>
+ { blurhash && blur &&
}
+ { thumbUrl !== null && (
+
setBlur(false)} alt={name} />
+ )}
+ {isLoading &&
}
+ {!isLoading &&
}
+ >
+ ) : (
+ /* eslint-disable-next-line jsx-a11y/media-has-caption */
diff --git a/src/app/molecules/media/Media.scss b/src/app/molecules/media/Media.scss
index b26b232..7c73305 100644
--- a/src/app/molecules/media/Media.scss
+++ b/src/app/molecules/media/Media.scss
@@ -27,14 +27,21 @@
white-space: initial;
}
+.sticker-container {
+ display: inline-flex;
+ max-width: 128px;
+ width: 100%;
+ & img {
+ width: 100% !important;
+ }
+}
+
.image-container,
.video-container,
.audio-container {
font-size: 0;
line-height: 0;
- position: relative;
-
display: flex;
justify-content: center;
align-items: center;
@@ -48,7 +55,6 @@
.video-container {
& img,
& canvas {
- position: absolute;
max-width: unset !important;
width: 100% !important;
height: 100%;
@@ -57,18 +63,13 @@
}
}
-.sticker-container {
- display: inline-flex;
- max-width: 128px;
- width: 100%;
- & img {
- width: 100% !important;
- }
-}
-
.video-container {
+ position: relative;
& .ic-btn-surface {
background-color: var(--bg-surface-low);
+ }
+ & .ic-btn-surface,
+ & .donut-spinner {
position: absolute;
}
video {