Commit 755835d2 authored by mgabdev's avatar mgabdev

Revert tests, update gif loading

parent 9e7b896e
...@@ -50,6 +50,13 @@ class Item extends React.PureComponent { ...@@ -50,6 +50,13 @@ class Item extends React.PureComponent {
} }
} }
handleLoadedData = (e) => {
if (!this.hoverToPlay()) {
e.target.play();
}
}
hoverToPlay () { hoverToPlay () {
const { attachment } = this.props; const { attachment } = this.props;
return !autoPlayGif && attachment.get('type') === 'gifv'; return !autoPlayGif && attachment.get('type') === 'gifv';
...@@ -70,13 +77,6 @@ class Item extends React.PureComponent { ...@@ -70,13 +77,6 @@ class Item extends React.PureComponent {
e.stopPropagation(); e.stopPropagation();
} }
onLoadedData = (e) => {
console.log("onLoadedData:", e);
if (!this.hoverToPlay()) {
e.target.play();
}
};
componentDidMount () { componentDidMount () {
if (this.props.attachment.get('blurhash')) { if (this.props.attachment.get('blurhash')) {
this._decode(); this._decode();
...@@ -104,10 +104,6 @@ class Item extends React.PureComponent { ...@@ -104,10 +104,6 @@ class Item extends React.PureComponent {
setCanvasRef = c => { setCanvasRef = c => {
this.canvas = c; this.canvas = c;
} }
setVideoRef = v => {
this.videoRef = v;
}
handleImageLoad = () => { handleImageLoad = () => {
this.setState({ loaded: true }); this.setState({ loaded: true });
...@@ -186,23 +182,20 @@ class Item extends React.PureComponent { ...@@ -186,23 +182,20 @@ class Item extends React.PureComponent {
} else if (attachment.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && autoPlayGif; const autoPlay = !isIOS() && autoPlayGif;
const attachUrl = attachment.get('url');
// const gifsrc = attachUrl.indexOf('?') > -1 ? attachUrl.split("?")[0] : attachUrl;
const gifsrc = 'https://video.twimg.com/tweet_video/EOOQ7zfWkAENTFm.mp4';
thumbnail = ( thumbnail = (
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
<video <video
ref={this.setVideoRef}
className='media-gallery__item-gifv-thumbnail' className='media-gallery__item-gifv-thumbnail'
aria-label={attachment.get('description')} aria-label={attachment.get('description')}
title={attachment.get('description')} title={attachment.get('description')}
role='application' role='application'
src={gifsrc} src={attachment.get('url')}
type='video/mp4' onClick={this.handleClick}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onLoadedData={this.handleLoadedData}
autoPlay={autoPlay} autoPlay={autoPlay}
onLoadedData={this.onLoadedData} type='video/mp4'
preload='auto'
loop loop
muted muted
playsInline playsInline
...@@ -215,8 +208,8 @@ class Item extends React.PureComponent { ...@@ -215,8 +208,8 @@ class Item extends React.PureComponent {
return ( return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}> <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
<canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': true })} /> <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && this.state.loaded })} />
{thumbnail} {visible && thumbnail}
</div> </div>
); );
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment