Add 404 views

README.md

@@ -41,25 +41,33 @@ Check out [this project's issues](https://github.com/JamesHawkinss/movie-web/iss
 - [x] Add Brand tag top left
 - [x] Add github and discord top right
 - [x] Link Github and Discord in error boundary
-- [ ] Implement movie + series view
-  - [x] Global state for media objects
-  - [x] Styling for pages
-  - [ ] loading video player view + error
-  - [ ] Series episodes+seasons
 - [x] On back button, persist the search query and results
 - [x] Bookmarking
 - [x] Resume from where you left of
-- [ ] Less spaghett video player view (implement source that are not mp4)
 - [x] Homepage continue watching + bookmarks
 - [x] Add provider stream method
 - [x] Better looking error boundary
 - [x] sort search results so they aren't sorted by provider
+- [x] Change text of "thats all we have"
+- [ ] Implement movie + series view
+  - [x] Global state for media objects
+  - [x] Styling for pages
+  - [x] loading stream player view + error
+  - [ ] video load error, video loading (from actual video player)
+  - [ ] Series episodes+seasons
+- [ ] implement source that are not mp4
 - [ ] Subtitles
 - [ ] Migrate old video progress
 - [ ] Get rid of react warnings
 - [ ] Implement more scrapers
-- [ ] Add 404 page for media (media not found, provider disabled, provider not found) & general (page not found) <---
-- [x] Change text of "thats all we have"
+- [ ] Add 404 page for media (media not found, provider disabled, provider not found) & general (page not found)
+- [ ] Brand tag hover state and cursor
+- [ ] Handle disabled providers (continue watching, bookmarks & router)
+
+## After all rewrite code has been written
+
+- [ ] Make better readme
+- [ ] Make cool announcement with cool gif animation
 
 ## Todo's after rewrite
 

src/App.tsx

@@ -2,6 +2,7 @@ import { MWMediaType } from "providers";
 import { Redirect, Route, Switch } from "react-router-dom";
 import { BookmarkContextProvider } from "state/bookmark";
 import { WatchedContextProvider } from "state/watched";
+import { NotFoundPage } from "views/NotFoundView";
 import "./index.css";
 import { MediaView } from "./views/MediaView";
 import { SearchView } from "./views/SearchView";
@@ -12,11 +13,12 @@ function App() {
       <BookmarkContextProvider>
         <Switch>
           <Route exact path="/">
-            <Redirect to={`/${MWMediaType.MOVIE}`} />
+            <Redirect to={`/search/${MWMediaType.MOVIE}`} />
           </Route>
           <Route exact path="/media/movie/:media" component={MediaView} />
           <Route exact path="/media/series/:media" component={MediaView} />
-          <Route exact path="/:type/:query?" component={SearchView} />
+          <Route exact path="/search/:type/:query?" component={SearchView} />
+          <Route path="*" component={NotFoundPage} />
         </Switch>
       </BookmarkContextProvider>
     </WatchedContextProvider>

src/views/NotFoundView.tsx

@@ -0,0 +1,68 @@
+import { IconPatch } from "components/buttons/IconPatch";
+import { Icons } from "components/Icon";
+import { Navigation } from "components/layout/Navigation";
+import { ArrowLink } from "components/text/ArrowLink";
+import { Title } from "components/text/Title";
+import { ReactNode } from "react";
+
+function NotFoundWrapper(props: { children?: ReactNode }) {
+  return (
+    <div className="h-screen flex-1">
+      <Navigation />
+      <div className="flex h-full flex-col items-center justify-center p-5 text-center">
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+export function NotFoundMedia() {
+  return (
+    <NotFoundWrapper>
+      <IconPatch
+        icon={Icons.EYE_SLASH}
+        className="text-bink-600 mb-6 text-xl"
+      />
+      <Title>Couldn't find that media</Title>
+      <p className="mt-5 mb-12 max-w-sm">
+        We couldn't find the media you requested. Either it's been removed or
+        you tampered with the URL
+      </p>
+      <ArrowLink to="/" linkText="Back to home" />
+    </NotFoundWrapper>
+  );
+}
+
+export function NotFoundProvider() {
+  return (
+    <NotFoundWrapper>
+      <IconPatch
+        icon={Icons.EYE_SLASH}
+        className="text-bink-600 mb-6 text-xl"
+      />
+      <Title>This provider has been disabled</Title>
+      <p className="mt-5 mb-12 max-w-sm">
+        We had issues with the provider or it was too unstable to use, so we had
+        to disable it.
+      </p>
+      <ArrowLink to="/" linkText="Back to home" />
+    </NotFoundWrapper>
+  );
+}
+
+export function NotFoundPage() {
+  return (
+    <NotFoundWrapper>
+      <IconPatch
+        icon={Icons.EYE_SLASH}
+        className="text-bink-600 mb-6 text-xl"
+      />
+      <Title>Couldn't find that page</Title>
+      <p className="mt-5 mb-12 max-w-sm">
+        We looked everywhere: under the bins, in the closet, behind the proxy
+        but ultimately couldn't find the page you are looking for.
+      </p>
+      <ArrowLink to="/" linkText="Back to home" />
+    </NotFoundWrapper>
+  );
+}