diff --git a/images/empty.png b/images/empty.png new file mode 100644 index 000000000..f16d1a43b Binary files /dev/null and b/images/empty.png differ diff --git a/src/App/App.js b/src/App/App.js index 6c05459d2..a07bab59e 100644 --- a/src/App/App.js +++ b/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 { NotFound } = require('stremio/routes'); const { ToastProvider } = require('stremio/common'); const CoreEventsToaster = require('./CoreEventsToaster'); const routerViewsConfig = require('./routerViewsConfig'); @@ -9,7 +10,7 @@ const styles = require('./styles'); const App = () => { const onPathNotMatch = React.useCallback(() => { - window.history.back(); + return NotFound; }, []); const services = React.useMemo(() => ({ keyboardNavigation: new KeyboardNavigation(), diff --git a/src/routes/NotFound/NotFound.js b/src/routes/NotFound/NotFound.js new file mode 100644 index 000000000..0c0f93db6 --- /dev/null +++ b/src/routes/NotFound/NotFound.js @@ -0,0 +1,26 @@ +const React = require('react'); +const { Image, HorizontalNavBar } = require('stremio/common'); +const styles = require('./styles'); + +const NotFound = () => { + return ( +
+ +
+ {' +
Page not found!
+
+
+ ); +}; + +module.exports = NotFound; diff --git a/src/routes/NotFound/index.js b/src/routes/NotFound/index.js new file mode 100644 index 000000000..8876c097b --- /dev/null +++ b/src/routes/NotFound/index.js @@ -0,0 +1,3 @@ +const NotFound = require('./NotFound'); + +module.exports = NotFound; diff --git a/src/routes/NotFound/styles.less b/src/routes/NotFound/styles.less new file mode 100644 index 000000000..b60065a51 --- /dev/null +++ b/src/routes/NotFound/styles.less @@ -0,0 +1,39 @@ +@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; + +.not-found-container { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + background-color: @color-background-dark2; + + .nav-bar { + flex: none; + } + + .not-found-content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .not-found-image { + flex: none; + width: 12rem; + height: 12rem; + margin-bottom: 1rem; + object-fit: contain; + object-position: center; + } + + .not-found-label { + flex: none; + font-size: 2.5rem; + max-height: 3.6em; + max-width: 60%; + text-align: center; + color: @color-secondaryvariant2-light1-90; + } + } +} \ No newline at end of file diff --git a/src/routes/index.js b/src/routes/index.js index e819535bb..6872e6a4c 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -3,6 +3,7 @@ const Board = require('./Board'); const Discover = require('./Discover'); const Library = require('./Library'); const MetaDetails = require('./MetaDetails'); +const NotFound = require('./NotFound'); const Search = require('./Search'); const Settings = require('./Settings'); const Player = require('./Player'); @@ -14,6 +15,7 @@ module.exports = { Discover, Library, MetaDetails, + NotFound, Search, Settings, Player,