Revert Video rewrite because still doesn't work in Mobile Safari

Works in simulator but not the real iPhone
This commit is contained in:
Lim Chee Aun 2023-01-06 19:07:04 +08:00
parent 5c162d211f
commit ca18ea138a
2 changed files with 21 additions and 29 deletions

View file

@ -29,7 +29,6 @@ import visibilityIconsMap from '../utils/visibility-icons-map';
import Avatar from './avatar'; import Avatar from './avatar';
import Icon from './icon'; import Icon from './icon';
import RelativeTime from './relative-time'; import RelativeTime from './relative-time';
import Video from './video';
function fetchAccount(id) { function fetchAccount(id) {
return masto.v1.accounts.fetch(id); return masto.v1.accounts.fetch(id);
@ -796,17 +795,27 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
}} }}
> >
{showOriginal || autoAnimate ? ( {showOriginal || autoAnimate ? (
<Video <div
src={url} style={{
poster={previewUrl} width: '100%',
width={width} height: '100%',
height={height} }}
preload="auto" dangerouslySetInnerHTML={{
autoplay __html: `
muted={isGIF} <video
controls={!isGIF} src="${url}"
playsinline poster="${previewUrl}"
loop={loopable} width="${width}"
height="${height}"
preload="auto"
autoplay
muted="${isGIF}"
${isGIF ? '' : 'controls'}
playsinline
loop="${loopable}"
></video>
`,
}}
/> />
) : isGIF ? ( ) : isGIF ? (
<video <video

View file

@ -1,17 +0,0 @@
// Video component but allow muted attribute to be set
import { useEffect, useRef } from 'react';
function Video({ muted, autoplay, ...props }) {
const videoRef = useRef();
useEffect(() => {
if (videoRef.current) {
videoRef.current.setAttribute('muted', muted);
videoRef.current.setAttribute('autoplay', autoplay);
videoRef.current.play();
}
}, [muted]);
return <video ref={videoRef} {...props} />;
}
export default Video;