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?