From 5aa40cacb72e4d65a54d01246c44d78273275c61 Mon Sep 17 00:00:00 2001 From: Josh Heng Date: Mon, 2 Aug 2021 13:15:18 +0100 Subject: [PATCH] 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 - } - - if (page === "movie") { - return - } - - return ( - - ) + const { streamData } = useMovie(); + if (streamData) return ; + else return ; } 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 (
{accent.length > 0 ? ( -

accentLink.length > 0 && navigate(accentLink)} className={`title-accent ${accentLink.length > 0 ? 'title-accent-link' : ''}`}> +

{ + if (accentLink.length > 0) { + history.push(`/${streamData.type}`); + resetStreamData(); + } + }} className={`title-accent ${accentLink.length > 0 ? 'title-accent-link' : ''}`}> {accentLink.length > 0 ? () : null}{accent}

) : 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 ( ({...p,...d})) }, + resetStreamData() { setStreamData(null) } }}> {props.children} 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( - - - , - document.getElementById('root') + + + + + , + 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 return (
- {offlineStatus ? {offlineStatus} : ''} + {errorStatus ? {errorStatus} : ''} What do you wanna watch? setType(type)} + setType={(type) => history.push(`/${type}`)} choices={[ { label: "Movie", value: "movie" }, { label: "TV Show", value: "show" } @@ -145,6 +166,7 @@ export function SearchView() {

{v[0]}

{v[1].map((v, i) => ( { + 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"