scroll event bubbled to window

src/App/App.js

@@ -2,6 +2,7 @@ require('spatial-navigation-polyfill');
 const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, KeyboardNavigation, ServicesProvider, Shell } = require('stremio/services');
+const { ScrollEventEmitter } = require('stremio/common');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 
@@ -39,17 +40,19 @@ const App = () => {
     return (
         <React.StrictMode>
             <ServicesProvider services={services}>
-                {
-                    shellInitialized && coreInitialized ?
-                        <Router
-                            className={styles['router']}
-                            homePath={'/'}
-                            viewsConfig={routerViewsConfig}
-                            onPathNotMatch={onPathNotMatch}
-                        />
-                        :
-                        <div className={styles['app-loader']} />
-                }
+                <ScrollEventEmitter className={styles['app-content']}>
+                    {
+                        shellInitialized && coreInitialized ?
+                            <Router
+                                className={styles['router']}
+                                homePath={'/'}
+                                viewsConfig={routerViewsConfig}
+                                onPathNotMatch={onPathNotMatch}
+                            />
+                            :
+                            <div className={styles['app-loader']} />
+                    }
+                </ScrollEventEmitter>
             </ServicesProvider>
         </React.StrictMode>
     );

src/App/styles.less

@@ -70,15 +70,20 @@ html {
             width: 100%;
             height: 100%;
 
-            .router {
+            .app-content {
                 width: 100%;
                 height: 100%;
-            }
 
-            .app-loader {
-                width: 100%;
-                height: 100%;
-                background-color: var(--color-background);
+                .router {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .app-loader {
+                    width: 100%;
+                    height: 100%;
+                    background-color: var(--color-background);
+                }
             }
         }
     }

src/common/ScrollEventEmitter/ScrollEventEmitter.js

@@ -0,0 +1,18 @@
+const React = require('react');
+
+const ScrollEventEmitter = (props) => {
+    const onScroll = React.useCallback((event) => {
+        if (typeof props.onScroll === 'function') {
+            props.onScroll(event);
+        }
+
+        const reactScrollEvent = new Event('react-scroll');
+        reactScrollEvent.nativeEvent = event.nativeEvent;
+        window.dispatchEvent(reactScrollEvent);
+    }, []);
+    return (
+        <div {...props} onScroll={onScroll} />
+    );
+};
+
+module.exports = ScrollEventEmitter;

src/common/ScrollEventEmitter/index.js

@@ -0,0 +1,3 @@
+const ScrollEventEmitter = require('./ScrollEventEmitter');
+
+module.exports = ScrollEventEmitter;

src/common/index.js

@@ -13,6 +13,7 @@ const MetaRowPlaceholder = require('./MetaRowPlaceholder');
 const NavBar = require('./NavBar');
 const PlayIconCircleCentered = require('./PlayIconCircleCentered');
 const Popup = require('./Popup');
+const ScrollEventEmitter = require('./ScrollEventEmitter');
 const ShareModal = require('./ShareModal');
 const Slider = require('./Slider');
 const TextInput = require('./TextInput');
@@ -42,6 +43,7 @@ module.exports = {
     NavBar,
     PlayIconCircleCentered,
     Popup,
+    ScrollEventEmitter,
     ShareModal,
     Slider,
     TextInput,