begin show implementation

TGlide · Jul 14, 2021 · 1989156 · 1989156
1 parent b94f279
commit 1989156
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 18 deletions.
diff --git 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
@@ -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 (
  <form className="inputBar" onSubmit={(e) => {
  e.preventDefault();
- onSubmit(value)
+ onSubmit(searchTerm, type)
  return false;
  }}>
+ <select name="type" id="type" className="inputDropdown" onChange={(e) => setType(e.target.value)} required>
+ <option value="movie">Movie</option>
+ <option value="show">TV Show</option>
+ </select>
  <input
  type='text'
  className="inputTextBox"
  id="inputTextBox"
  placeholder={placeholder}
- value={value}
- onChange={(e) => setValue(e.target.value)}
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ required
  />
- <button className="inputSearchButton"><span className="text">Search<span className="arrow"><Arrow/></span></span></button>
+ <input type='text' className='inputOptionBox' id='inputOptionBoxSeason' placeholder='s' required={showContentType} hidden={showContentType}/>
+ <input type='text' className='inputOptionBox' id='inputOptionBoxEpisode' placeholder='e' required={showContentType} hidden={showContentType}/>
+ <button className="inputSearchButton"><span className="text">Search<span className="arrow"><Arrow /></span></span></button>
  </form>
  )
 }
diff --git 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 };
+export { findContent, getStreamUrl };
diff --git 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 (
  <div className="cardView">
  <Card>
- <Title accent="Because watching movies legally is boring">
- What movie do you wanna watch?
+ <Title accent="Because watching content legally is boring">
+ What do you wanna watch?
  </Title>
- <InputBox placeholder="Hamilton" onSubmit={(str) => searchMovie(str)} />
+ <InputBox placeholder="Hamilton" onSubmit={(str, type) => searchMovie(str, type)} />
  <Progress show={progress > 0} failed={failed} progress={progress} steps={maxSteps} text={text} />
  </Card>