begin show implementation

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;
+    }
 }

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}
+                value={searchTerm}
-                onChange={(e) => setValue(e.target.value)}
+                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>
     )
 }

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 };

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">
+                <Title accent="Because watching content legally is boring">
-                    What movie do you wanna watch?
+                    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>