buffering loader reimplemented using new Image component

src/routes/Player/BufferingLoader/BufferingLoader.js

@@ -1,27 +1,25 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { Loader } = require('stremio/common');
-const colors = require('stremio-colors');
+const { Image } = require('stremio/common');
 const styles = require('./styles');
 
-class BufferingLoader extends React.PureComponent {
-    render() {
-        if (!this.props.buffering) {
-            return null;
-        }
-
-        return (
-            <div className={classnames(this.props.className, styles['buffering-loader-container'])}>
-                <Loader className={styles['bufferring-loader']} fill={colors.surfacelighter80} />
-            </div>
-        );
-    }
-}
+const BufferingLoader = ({ className, logo }) => {
+    return (
+        <div className={classnames(className, styles['buffering-loader-container'])}>
+            <Image
+                className={styles['buffering-loader']}
+                src={logo}
+                alt={' '}
+                fallbackSrc={'/images/stremio_symbol.png'}
+            />
+        </div>
+    );
+};
 
 BufferingLoader.propTypes = {
     className: PropTypes.string,
-    buffering: PropTypes.bool
+    logo: PropTypes.string
 };
 
 module.exports = BufferingLoader;

src/routes/Player/BufferingLoader/styles.less

@@ -3,8 +3,9 @@
     align-items: center;
     justify-content: center;
 
-    .bufferring-loader {
-        width: calc(var(--control-bar-button-size) * 3);
-        height: calc(var(--control-bar-button-size) * 3);
+    .buffering-loader {
+        flex: none;
+        width: 17rem;
+        height: 17rem;
     }
 }