diff --git a/src/components/InputBox.css b/src/components/InputBox.css index d96ddf08..bed5eb06 100644 --- a/src/components/InputBox.css +++ b/src/components/InputBox.css @@ -19,7 +19,6 @@ .inputTextBox { border-width: 0; outline: none; - background-color: #36363e; color: white; padding: .7rem 1.5rem; @@ -35,10 +34,38 @@ padding: .5rem 2.1rem; font-weight: bold; - cursor: pointer; } +.inputDropdown { + border-width: 0; + outline: none; + background-color: #36363e; + color: white; + padding: .7rem; + height: auto; + width: 20%; + color: white; + + font-weight: bold; + cursor: pointer; +} + +.inputOptionBox { + border-width: 0; + outline: none; + background-color: #36363e; + color: white; + /* padding: .7rem 1.5rem; */ + height: auto; + width: 5%; + box-sizing: border-box; +} + +.inputDropdown:hover { + background-color: #3C3D44; +} + .inputSearchButton:hover { background-color: #9C3179; } @@ -85,9 +112,15 @@ .inputSearchButton { margin-top: .5rem; + align-self: center; } .inputTextBox { width: 100%; } + + .inputDropdown { + width: 100%; + margin-bottom: .5rem; + } } diff --git a/src/components/InputBox.js b/src/components/InputBox.js index 35e6c1a2..eaaa387b 100644 --- a/src/components/InputBox.js +++ b/src/components/InputBox.js @@ -4,23 +4,33 @@ import './InputBox.css' // props = { onSubmit: (str) => {}, placeholder: string} export function InputBox({ onSubmit, placeholder }) { - const [value, setValue] = React.useState(""); + const [searchTerm, setSearchTerm] = React.useState(""); + const [type, setType] = React.useState("movie"); + + const showContentType = type === "show" ? false : true; return (
{ e.preventDefault(); - onSubmit(value) + onSubmit(searchTerm, type) return false; }}> + setValue(e.target.value)} + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} + required /> - + + +
) } diff --git a/src/lib/lookMovie.js b/src/lib/lookMovie.js index 8acb5b00..fc379f4c 100644 --- a/src/lib/lookMovie.js +++ b/src/lib/lookMovie.js @@ -63,7 +63,7 @@ async function getStreamUrl(slug, type) { return { url: videoUrl } } -async function findMovie(searchTerm) { +async function findContent(searchTerm, type) { const searchUrl = getCorsUrl(`https://lookmovie.io/api/v1/movies/search/?q=${encodeURIComponent(searchTerm)}`); const searchRes = await fetch(searchUrl).then((d) => d.json()); let results = [...searchRes.result.map((v) => ({ ...v, type: "movie" }))]; @@ -97,4 +97,4 @@ async function findMovie(searchTerm) { } } -export { findMovie, getStreamUrl }; \ No newline at end of file +export { findContent, getStreamUrl }; \ No newline at end of file diff --git a/src/views/Search.js b/src/views/Search.js index 6ccafe3d..7ce3fc48 100644 --- a/src/views/Search.js +++ b/src/views/Search.js @@ -5,7 +5,7 @@ import { Card } from '../components/Card' import { MovieRow } from '../components/MovieRow' import { Arrow } from '../components/Arrow' import { Progress } from '../components/Progress' -import { findMovie, getStreamUrl } from '../lib/lookMovie' +import { findContent, getStreamUrl } from '../lib/lookMovie' import { useMovie } from '../hooks/useMovie'; import './Search.css' @@ -45,20 +45,20 @@ export function SearchView() { } } - async function searchMovie(query) { + async function searchMovie(query, contentType) { setFailed(false); - setText(`Searching for "${query}"`); + setText(`Searching for ${contentType} "${query}"`); setProgress(1) setShowingOptions(false) try { - const { options } = await findMovie(query) + const { options } = await findContent(query, contentType) if (options.length === 0) { - return fail("Could not find that movie") + return fail(`Could not find that ${contentType}`) } else if (options.length > 1) { setProgress(2); - setText("Choose your movie"); + setText(`Choose your ${contentType}`); setOptions(options); setShowingOptions(true); return; @@ -67,17 +67,17 @@ export function SearchView() { const { title, slug, type } = options[0]; getStream(title, slug, type); } catch (err) { - fail("Failed to watch movie") + fail(`Failed to watch ${contentType}`) } } return (
- - What movie do you wanna watch? + <Title accent="Because watching content legally is boring"> + What do you wanna watch? - searchMovie(str)} /> + searchMovie(str, type)} /> 0} failed={failed} progress={progress} steps={maxSteps} text={text} />