diff --git a/src/components/ErrorBanner.css b/src/components/ErrorBanner.css new file mode 100644 index 00000000..8c9666a1 --- /dev/null +++ b/src/components/ErrorBanner.css @@ -0,0 +1,11 @@ +.errorBanner { + margin-top: 0.5rem; + border-inline-start: none; + font-size: 16px; + font-weight: normal; + letter-spacing: -.01em; + padding: .5rem 1rem .5rem .75rem; + border-radius: .25rem; + background-color: var(--button); + color: var(--button-text); +} \ No newline at end of file diff --git a/src/components/ErrorBanner.js b/src/components/ErrorBanner.js new file mode 100644 index 00000000..60d8b42d --- /dev/null +++ b/src/components/ErrorBanner.js @@ -0,0 +1,10 @@ +import React from 'react'; +import './ErrorBanner.css'; + +export function ErrorBanner({children}) { + return ( +
+ {children} +
+ ) +} \ No newline at end of file diff --git a/src/views/Search.js b/src/views/Search.js index c4ef950e..c0232aea 100644 --- a/src/views/Search.js +++ b/src/views/Search.js @@ -2,13 +2,13 @@ import React from 'react'; import { InputBox } from '../components/InputBox' import { Title } from '../components/Title' import { Card } from '../components/Card' +import { ErrorBanner } from '../components/ErrorBanner' import { MovieRow } from '../components/MovieRow' import { Arrow } from '../components/Arrow' import { Progress } from '../components/Progress' -import { findContent, getStreamUrl } from '../lib/lookMovie' +import { findContent, getStreamUrl, getEpisodes } from '../lib/lookMovie' import { useMovie } from '../hooks/useMovie'; import { TypeSelector } from '../components/TypeSelector' -import { getEpisodes } from '../lib/lookMovie' import './Search.css' @@ -21,6 +21,7 @@ export function SearchView() { 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 fail = (str) => { @@ -103,9 +104,21 @@ export function SearchView() { } } + React.useEffect(() => { + async function fetchHealth() { + const HOME_URL = "https://hidden-inlet-27205.herokuapp.com/https://lookmovie.io/" + await fetch(HOME_URL).catch(() => { + // Request failed; source likely offline + setOfflineStatus(`Our content provider is currently offline, apologies.`) + }) + } + fetchHealth() + }, []) + return (
+ {offlineStatus ? {offlineStatus} : ''} What do you wanna watch?