[feature] Only animate CardMedia GIFs if hovering #2029

src/ui/component/cardMedia/FreezeframeWrapper.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Freezeframe from 'freezeframe';
+
+const FreezeframeWrapper = props => {
+  const imgRef = React.useRef();
+  const freezeframe = React.useRef();
+
+  const { src, className, options } = props;
+
+  useEffect(() => {
+    freezeframe.current = new Freezeframe(imgRef.current, options);
+  }, [options]);
+
+  return (
+    <div className={className}>
+      <img ref={imgRef} src={src} />
+    </div>
+  );
+};
+
+FreezeframeWrapper.propTypes = {
+  src: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+  // Docs: https://github.com/ctrl-freaks/freezeframe.js/tree/master/packages/freezeframe
+  options: PropTypes.shape({
+    selector: PropTypes.string,
+    trigger: PropTypes.oneOf(['hover', 'click', false]),
+    overlay: PropTypes.boolean,
+    responsive: PropTypes.boolean,
+  }),
+};
+
+export default FreezeframeWrapper;

src/ui/component/cardMedia/view.jsx

@@ -1,21 +1,24 @@
 // @flow
 import React from 'react';
+import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
 
 type Props = {
   thumbnail: ?string, // externally sourced image
 };
 
+const className = 'media__thumb';
+
 class CardMedia extends React.PureComponent<Props> {
   render() {
     const { thumbnail } = this.props;
 
-    return (
-      <div
-        style={thumbnail ? { backgroundImage: `url('${thumbnail}')` } : { backgroundImage: `url(${Placeholder})` }}
-        className="media__thumb"
-      />
-    );
+    if (thumbnail && thumbnail.endsWith('gif')) {
+      return <FreezeframeWrapper src={thumbnail} className={className} />;
+    }
+
+    const url = thumbnail || Placeholder;
+    return <div style={{ backgroundImage: `url('${url}')` }} className={className} />;
   }
 }