From 5aa40cacb72e4d65a54d01246c44d78273275c61 Mon Sep 17 00:00:00 2001
From: Josh Heng <josh@joshheng.co.uk>
Date: Mon, 2 Aug 2021 13:15:18 +0100
Subject: [PATCH 1/5] Implement URL permalinks

---
 package.json            |   1 +
 src/App.js              |  17 ++-----
 src/components/Title.js |  11 ++++-
 src/hooks/useMovie.js   |   3 +-
 src/index.js            |  11 +++--
 src/views/Search.js     |  36 +++++++++++---
 yarn.lock               | 101 ++++++++++++++++++++++++++++++++++++++--
 7 files changed, 149 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index b0bec93e..da5ae4e9 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "json5": "^2.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
diff --git a/src/App.js b/src/App.js
index 7461c0bd..fe7edea6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,12 @@
 import './index.css';
 import { SearchView } from './views/Search';
-import { NotFound } from './views/NotFound';
 import { MovieView } from './views/Movie';
 import { useMovie, MovieProvider} from './hooks/useMovie';
 
 function Router() {
-  const { page } = useMovie();
-
-  if (page === "search") {
-    return <SearchView/>
-  }
-
-  if (page === "movie") {
-    return <MovieView/>
-  }
-
-  return (
-    <NotFound/>
-  )
+  const { streamData } = useMovie();
+  if (streamData) return <MovieView />;
+  else return <SearchView />;
 }
 
 function App() {
diff --git a/src/components/Title.js b/src/components/Title.js
index 2740f84c..6d673ac2 100644
--- a/src/components/Title.js
+++ b/src/components/Title.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { useMovie } from '../hooks/useMovie'
 import { Arrow } from '../components/Arrow'
 import './Title.css'
@@ -7,7 +8,8 @@ import './Title.css'
 // accent: string | null
 // accentLink: string | null
 export function Title(props) {
-    const { navigate } = useMovie();
+    const { streamData, resetStreamData } = useMovie();
+    const history = useHistory();
     const size = props.size || "big";
 
     const accentLink = props.accentLink || "";
@@ -15,7 +17,12 @@ export function Title(props) {
     return (
         <div>
             {accent.length > 0 ? (
-                <p onClick={ () => accentLink.length > 0 && navigate(accentLink)} className={`title-accent ${accentLink.length > 0 ? 'title-accent-link' : ''}`}>
+                <p onClick={() => {
+                    if (accentLink.length > 0) {
+                        history.push(`/${streamData.type}`);
+                        resetStreamData();
+                    }
+                }} className={`title-accent ${accentLink.length > 0 ? 'title-accent-link' : ''}`}>
                     {accentLink.length > 0 ? (<Arrow left/>) : null}{accent}
                 </p>
             ) : null}
diff --git a/src/hooks/useMovie.js b/src/hooks/useMovie.js
index e4834164..5441444d 100644
--- a/src/hooks/useMovie.js
+++ b/src/hooks/useMovie.js
@@ -4,7 +4,7 @@ const MovieContext = React.createContext(null)
 export function MovieProvider(props) {
     const [page, setPage] = React.useState("search");
     const [stream, setStream] = React.useState("");
-    const [streamData, setStreamData] = React.useState({ title: "", slug: "", type: "", episodes: [], seasons: [] })
+    const [streamData, setStreamData] = React.useState(null); //{ title: "", slug: "", type: "", episodes: [], seasons: [] }) 
 
     return (
         <MovieContext.Provider value={{
@@ -18,6 +18,7 @@ export function MovieProvider(props) {
             setStreamData(d) {
                 setStreamData(p => ({...p,...d}))
             },
+            resetStreamData() { setStreamData(null) }
         }}>
             {props.children}
         </MovieContext.Provider>
diff --git a/src/index.js b/src/index.js
index 6832e783..348fe3e4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<BrowserRouter>
+			<App />
+		</BrowserRouter>
+	</React.StrictMode>,
+	document.getElementById('root')
 );
diff --git a/src/views/Search.js b/src/views/Search.js
index 306bf4c2..e56d43a2 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
 import { InputBox } from '../components/InputBox';
 import { Title } from '../components/Title';
 import { Card } from '../components/Card';
@@ -15,14 +16,18 @@ import './Search.css';
 export function SearchView() {
     const { navigate, setStreamUrl, setStreamData } = useMovie();
 
+    const history = useHistory();
+    const routeMatch = useRouteMatch('/:type');
+    const type = routeMatch?.params?.type;
+    const streamRouteMatch = useRouteMatch('/:type/:source/:title/:slug');
+
     const maxSteps = 4;
     const [options, setOptions] = React.useState([]);
     const [progress, setProgress] = React.useState(0);
     const [text, setText] = React.useState("");
     const [failed, setFailed] = React.useState(false);
     const [showingOptions, setShowingOptions] = React.useState(false);
-    const [offlineStatus, setOfflineStatus] = React.useState(false);
-    const [type, setType] = React.useState("movie");
+    const [errorStatus, setErrorStatus] = React.useState(false);
 
     const fail = (str) => {
         setProgress(maxSteps);
@@ -35,7 +40,7 @@ export function SearchView() {
 
         try {
             setProgress(2);
-            setText(`Getting stream for "${title}"`)
+            setText(`Getting stream for "${title}"`);
 
             let seasons = [];
             let episodes = [];
@@ -94,6 +99,7 @@ export function SearchView() {
             }
 
             const { title, slug, type, source } = options[0];
+            history.push(`${routeMatch.url}/${source}/${title}/${slug}`);
             getStream(title, slug, type, source);
         } catch (err) {
             console.error(err);
@@ -106,21 +112,36 @@ export function SearchView() {
             const HOME_URL = "https://movie-web-proxy.herokuapp.com"
             await fetch(HOME_URL).catch(() => {
                 // Request failed; source likely offline
-                setOfflineStatus(`Our content provider is currently offline, apologies.`)
+                setErrorStatus(`Our content provider is currently offline, apologies.`)
             })
         }
         fetchHealth()
-    }, [])
+    }, []);
+
+    React.useEffect(() => {
+        if (streamRouteMatch) {
+            if (streamRouteMatch?.params.type === 'movie' || streamRouteMatch.params.type === 'show') {
+                if (streamRouteMatch?.params.source === 'lookmovie' || streamRouteMatch.params.source === 'gomostream') {
+                    getStream(streamRouteMatch.params.title, streamRouteMatch.params.slug, streamRouteMatch.params.type, streamRouteMatch.params.source);
+                }
+                else return setErrorStatus(`I couldn't find that ${streamRouteMatch.params.type}. Please try searching below.`);
+            }
+            else return setErrorStatus("I couldn't find that movie. Please try searching below.");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (!type || (type !== 'movie' && type !== 'show')) return <Redirect to="/movie" />
 
     return (
         <div className="cardView">
             <Card>
-                {offlineStatus ? <ErrorBanner>{offlineStatus}</ErrorBanner> : ''}
+                {errorStatus ? <ErrorBanner>{errorStatus}</ErrorBanner> : ''}
                 <Title accent="Because watching content legally is boring">
                     What do you wanna watch?
                 </Title>
                 <TypeSelector
-                    setType={(type) => setType(type)}
+                    setType={(type) => history.push(`/${type}`)}
                     choices={[
                         { label: "Movie", value: "movie" },
                         { label: "TV Show", value: "show" }
@@ -145,6 +166,7 @@ export function SearchView() {
                             <p className="source">{v[0]}</p>
                             {v[1].map((v, i) => (
                                 <MovieRow key={i} title={v.title} slug={v.slug} type={v.type} year={v.year} source={v.source} onClick={() => {
+                                    history.push(`${routeMatch.url}/${v.source}/${v.title}/${v.slug}`);
                                     setShowingOptions(false)
                                     getStream(v.title, v.slug, v.type, v.source)
                                 }} />
diff --git a/yarn.lock b/yarn.lock
index 786af3aa..b9dfdbeb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1157,6 +1157,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
+  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
@@ -5438,6 +5445,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hls.js@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.0.7.tgz#b4ab75e7a46650d02245a1da091efd15f07d16eb"
@@ -5452,6 +5471,13 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.1.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -6133,6 +6159,11 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -6965,7 +6996,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7171,6 +7202,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
+  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.11.3:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -7923,6 +7962,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -8785,7 +8831,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9000,7 +9046,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.8.1:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9015,6 +9061,35 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@@ -9337,6 +9412,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@^3.1.2:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.4.tgz#3c16caebe0b9faea9c7cc252fa49d2353c412320"
@@ -10428,6 +10508,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -10839,6 +10929,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

From a48c77a1cb0aead0ea75997abe4ffaf8747016e0 Mon Sep 17 00:00:00 2001
From: Josh Heng <josh@joshheng.co.uk>
Date: Mon, 2 Aug 2021 14:08:55 +0100
Subject: [PATCH 2/5] Add URL routing to show episode selector

---
 src/components/EpisodeSelector.js | 12 +++----
 src/views/Movie.js                | 54 ++++++++++++++++++++++---------
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/components/EpisodeSelector.js b/src/components/EpisodeSelector.js
index e1f98117..1b65cc4e 100644
--- a/src/components/EpisodeSelector.js
+++ b/src/components/EpisodeSelector.js
@@ -3,10 +3,8 @@ import { TypeSelector } from './TypeSelector';
 import { NumberSelector } from './NumberSelector';
 import './EpisodeSelector.css'
 
-export function EpisodeSelector({ setSeason, setEpisode, seasons, season, episodes, currentSeason, currentEpisode, slug, source }) {
-
-    const choices = episodes.map(v => {
-
+export function EpisodeSelector({ setSelectedSeason, setEpisode, seasons, selectedSeason, season, episodes, currentSeason, currentEpisode, source }) {
+    const choices = episodes ? episodes.map(v => {
         let progressData = JSON.parse(localStorage.getItem('video-progress') || "{}")
         
         let currentlyAt = 0;
@@ -25,12 +23,12 @@ export function EpisodeSelector({ setSeason, setEpisode, seasons, season, episod
             label: v,
             percentage
         }
-    })
+    }) : [];
 
     return (
         <div className="episodeSelector">
-            <TypeSelector setType={setSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/><br></br>
-            <NumberSelector setType={(e) => setEpisode({episode: e, season: currentSeason})} choices={choices} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
+            <TypeSelector setType={setSelectedSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} selected={selectedSeason}/><br></br>
+            <NumberSelector setType={(e) => setEpisode({episode: e, season: selectedSeason})} choices={choices} selected={(selectedSeason.toString() === currentSeason) ? currentEpisode : null} />
         </div>
     )
 }
diff --git a/src/views/Movie.js b/src/views/Movie.js
index 795bec25..860634f7 100644
--- a/src/views/Movie.js
+++ b/src/views/Movie.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useRouteMatch, useHistory } from 'react-router-dom'
 import { Title } from '../components/Title'
 import { Card } from '../components/Card'
 import { useMovie } from '../hooks/useMovie'
@@ -9,41 +10,57 @@ import { getStreamUrl } from '../lib/index'
 import './Movie.css'
 
 export function MovieView(props) {
+    const baseRouteMatch = useRouteMatch('/:type/:source/:title/:slug');
+    const showRouteMatch = useRouteMatch('/:type/:source/:title/:slug/season/:season/episode/:episode');
+    const history = useHistory();
     const { streamUrl, streamData, setStreamUrl } = useMovie();
-    const [season, setSeason] = React.useState("1");
     const [seasonList, setSeasonList] = React.useState([]);
     const [episodeLists, setEpisodeList] = React.useState([]);
-    const [episode, setEpisode] = React.useState({ episode: null, season: null });
     const [loading, setLoading] = React.useState(false);
+    const [ selectedSeason, setSelectedSeason ] = React.useState("1");
+
+    const season = showRouteMatch?.params.season || "1";
+    const episode = showRouteMatch?.params.episode || "1";
 
     React.useEffect(() => {
-        setEpisodeList(streamData.episodes[season]);
-    }, [season, streamData.episodes])
+        setEpisodeList(streamData.episodes[selectedSeason]);
+    }, [selectedSeason, streamData.episodes])
 
     React.useEffect(() => {
         if (streamData.type === "show") {
             setSeasonList(streamData.seasons);
-            setSeason(streamData.seasons[0])
             // TODO load from localstorage last watched
-            setEpisode({ episode: streamData.episodes[streamData.seasons[0]][0], season: streamData.seasons[0] })
             setEpisodeList(streamData.episodes[streamData.seasons[0]]);
         }
     }, [streamData])
 
+    React.useEffect(() => {
+        if (streamData.type === "show" && !showRouteMatch) history.replace(`${baseRouteMatch.url}/season/1/episode/1`);
+    }, [streamData, showRouteMatch, history, baseRouteMatch.url]);
+
+    React.useEffect(() => {
+        if (streamData.type === "show" && !showRouteMatch) history.replace(`${baseRouteMatch.url}/season/1/episode/1`);
+    }, [streamData, showRouteMatch, history, baseRouteMatch.url]);
+
+    React.useEffect(() => {
+        if (streamData.type === "show" && showRouteMatch) setSelectedSeason(showRouteMatch.params.season.toString());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     React.useEffect(() => {
         let cancel = false;
         // ignore if not a show
         if (streamData.type !== "show") return () => {
             cancel = true;
         };
-        if (!episode.episode) {
+        if (!episode) {
             setLoading(false);
             setStreamUrl('');
             return;
         }
         setLoading(true);
 
-        getStreamUrl(streamData.slug, streamData.type, streamData.source, episode.season, episode.episode)
+        getStreamUrl(streamData.slug, streamData.type, streamData.source, season, episode)
             .then(({url}) => {
                 if (cancel) return;
                 setStreamUrl(url)
@@ -56,7 +73,11 @@ export function MovieView(props) {
         return () => {
             cancel = true;
         } 
-    }, [episode, streamData, setStreamUrl])
+    }, [episode, streamData, setStreamUrl, season]);
+
+    function setEpisode({ season, episode }) {
+        history.push(`${baseRouteMatch.url}/season/${season}/episode/${episode}`);
+    }
 
     const setProgress = (evt) => {
         let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")
@@ -69,7 +90,7 @@ export function MovieView(props) {
         }
         
         // Store real data
-        let key = streamData.type === "show" ? `${season}-${episode.episode}` : "full"
+        let key = streamData.type === "show" ? `${season}-${episode}` : "full"
         ls[streamData.source][streamData.type][streamData.slug][key] = {
             currentlyAt: Math.floor(evt.currentTarget.currentTime),
             totalDuration: Math.floor(evt.currentTarget.duration),
@@ -79,7 +100,7 @@ export function MovieView(props) {
         if(streamData.type === "show") {
             ls[streamData.source][streamData.type][streamData.slug][key].show = {
                 season,
-                episode: episode.episode
+                episode: episode
             }
         }
 
@@ -93,19 +114,22 @@ export function MovieView(props) {
                     {streamData.title}
                 </Title>
                 {streamData.type === "show" ? <Title size="small">
-                    Season {episode.season}: Episode {episode.episode}
+                    Season {season}: Episode {episode}
                 </Title> : undefined}
                 <VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} />
                 {streamData.type === "show" ? 
                     <EpisodeSelector
-                        setSeason={setSeason}
+                        setSelectedSeason={setSelectedSeason}
+                        selectedSeason={selectedSeason}
+
                         setEpisode={setEpisode}
-                        season={season}
+
                         seasons={seasonList}
                         episodes={episodeLists}
-                        slug={streamData.slug}
+
                         currentSeason={season}
                         currentEpisode={episode}
+
                         source={streamData.source}
                     />
                 : ''}

From e529916805ae8310954b26d5e766510dc8129948 Mon Sep 17 00:00:00 2001
From: Josh Heng <josh@joshheng.co.uk>
Date: Mon, 2 Aug 2021 14:15:24 +0100
Subject: [PATCH 3/5] Update <title> based on content

---
 package.json        |  1 +
 src/views/Movie.js  |  5 +++++
 src/views/Search.js |  5 +++++
 yarn.lock           | 20 ++++++++++++++++++++
 4 files changed, 31 insertions(+)

diff --git a/package.json b/package.json
index da5ae4e9..3571c61e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "json5": "^2.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
diff --git a/src/views/Movie.js b/src/views/Movie.js
index 860634f7..0c3cb7c6 100644
--- a/src/views/Movie.js
+++ b/src/views/Movie.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useRouteMatch, useHistory } from 'react-router-dom'
+import { Helmet } from 'react-helmet';
 import { Title } from '../components/Title'
 import { Card } from '../components/Card'
 import { useMovie } from '../hooks/useMovie'
@@ -109,6 +110,10 @@ export function MovieView(props) {
 
     return (
         <div className={`cardView showType-${streamData.type}`}>
+            <Helmet>
+                <title>{streamData.title}{streamData.type === 'show' && ` | S${season}E${episode}`} | movie-web</title>
+            </Helmet>
+
             <Card fullWidth>
                 <Title accent="Return to home" accentLink="search">
                     {streamData.title}
diff --git a/src/views/Search.js b/src/views/Search.js
index fad2a471..5e9e2b0b 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 import { InputBox } from '../components/InputBox';
 import { Title } from '../components/Title';
 import { Card } from '../components/Card';
@@ -136,6 +137,10 @@ export function SearchView() {
 
     return (
         <div className="cardView">
+            <Helmet>
+                <title>{type === 'movie' ? 'Movies' : 'TV Shows'} | movie-web</title>
+            </Helmet>
+            
             <Card>
                 <DiscordBanner />
                 {errorStatus ? <ErrorBanner>{errorStatus}</ErrorBanner> : ''}
diff --git a/yarn.lock b/yarn.lock
index b9dfdbeb..5db630eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9046,6 +9046,21 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9156,6 +9171,11 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"

From b06f27eb978934b2a2904eb1c917df16fdc861ae Mon Sep 17 00:00:00 2001
From: Josh Heng <josh@joshheng.co.uk>
Date: Mon, 2 Aug 2021 14:22:13 +0100
Subject: [PATCH 4/5] Misc bug fixes

---
 src/views/Movie.js  | 2 +-
 src/views/Search.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Movie.js b/src/views/Movie.js
index 0c3cb7c6..cec810e9 100644
--- a/src/views/Movie.js
+++ b/src/views/Movie.js
@@ -111,7 +111,7 @@ export function MovieView(props) {
     return (
         <div className={`cardView showType-${streamData.type}`}>
             <Helmet>
-                <title>{streamData.title}{streamData.type === 'show' && ` | S${season}E${episode}`} | movie-web</title>
+                <title>{streamData.title}{streamData.type === 'show' ? ` | S${season}E${episode}` : ''} | movie-web</title>
             </Helmet>
 
             <Card fullWidth>
diff --git a/src/views/Search.js b/src/views/Search.js
index 5e9e2b0b..300c7465 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -140,7 +140,7 @@ export function SearchView() {
             <Helmet>
                 <title>{type === 'movie' ? 'Movies' : 'TV Shows'} | movie-web</title>
             </Helmet>
-            
+
             <Card>
                 <DiscordBanner />
                 {errorStatus ? <ErrorBanner>{errorStatus}</ErrorBanner> : ''}

From f8352e18893c5b560e10f0942919f9dd064fd94b Mon Sep 17 00:00:00 2001
From: Josh Heng <josh@joshheng.co.uk>
Date: Mon, 2 Aug 2021 14:45:10 +0100
Subject: [PATCH 5/5] Make requested changes

---
 src/views/Search.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/views/Search.js b/src/views/Search.js
index 300c7465..836c9088 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -122,13 +122,8 @@ export function SearchView() {
 
     React.useEffect(() => {
         if (streamRouteMatch) {
-            if (streamRouteMatch?.params.type === 'movie' || streamRouteMatch.params.type === 'show') {
-                if (streamRouteMatch?.params.source === 'lookmovie' || streamRouteMatch.params.source === 'gomostream') {
-                    getStream(streamRouteMatch.params.title, streamRouteMatch.params.slug, streamRouteMatch.params.type, streamRouteMatch.params.source);
-                }
-                else return setErrorStatus(`I couldn't find that ${streamRouteMatch.params.type}. Please try searching below.`);
-            }
-            else return setErrorStatus("I couldn't find that movie. Please try searching below.");
+            if (streamRouteMatch?.params.type === 'movie' || streamRouteMatch.params.type === 'show') getStream(streamRouteMatch.params.title, streamRouteMatch.params.slug, streamRouteMatch.params.type, streamRouteMatch.params.source);
+            else return setErrorStatus("Failed to find movie. Please try searching below.");
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);