Add attributes to MovieRow, prepare for show support

README.md

@@ -2,4 +2,4 @@
 Small web app for watching movies easily. Check it out at **[movie.squeezebox.dev](https://movie.squeezebox.dev)**.
 ## Credits
  - Thanks to [@JipFr](https://github.com/JipFr) for initial work on [movie-cli](https://github.com/JipFr/movie-cli)
- - Thanks to [@mrjvs](https://github.com/mrjvs) for help porting to React
+ - Thanks to [@mrjvs](https://github.com/mrjvs) for help porting to React, and for the beautiful design

src/components/MovieRow.css

@@ -44,6 +44,15 @@
     transform: translateX(.3rem) translateY(.1rem);
 }
 
+.attribute {
+    color: white;
+    background-color: #D678B7;
+    font-size: .75rem;
+    padding: .25rem;
+    border-radius: 10px;
+    margin-right: 10px;
+}
+
 @media screen and (max-width: 400px) {
     .movieRow {
         flex-direction: column;

src/components/MovieRow.js

@@ -11,7 +11,8 @@ export function MovieRow(props) {
                 {props.title}
             </div>
             <div className="watch">
-                <p>Watch movie</p>
+                <span className="attribute">year: {props.year}</span>
+                <p>Watch {props.type}</p>
                 <Arrow/>
             </div>
         </div>

src/lib/lookMovie.js

@@ -57,7 +57,7 @@ async function getStreamUrl(slug, type) {
     const videoUrl = await getVideoUrl({
         slug: slug,
         movieId: data.id_movie,
-        type: "movie",
+        type: type,
     });
 
     return { url: videoUrl }
@@ -83,15 +83,16 @@ async function findMovie(searchTerm) {
         matchedResults.forEach((r) => res.options.push({
             title: r.title,
             slug: r.slug,
-            type: r.type
+            type: r.type,
+            year: r.year
         }));
 
         return res;
     } else {
-        const { title, slug, type } = matchedResults[0];
+        const { title, slug, type, year } = matchedResults[0];
         
         return {
-            options: [{ title, slug, type }]
+            options: [{ title, slug, type, year }]
         }
     }
 }

src/views/Search.js

@@ -58,9 +58,9 @@ export function SearchView() {
                 return fail("Could not find that movie")
             } else if (options.length > 1) {
                 setProgress(2);
-                setText("Choose your movie")
+                setText("Choose your movie");
-                setOptions(options.map(v=>({ title: v.title, slug: v.slug, type: v.type })));
+                setOptions(options);
-                setShowingOptions(true)
+                setShowingOptions(true);
                 return;
             }
 
@@ -86,7 +86,7 @@ export function SearchView() {
                     Whoops, there are a few movies like that
                 </Title>
                 {options?.map((v, i) => (
-                    <MovieRow key={i} title={v.title} onClick={() => {
+                    <MovieRow key={i} title={v.title} type={v.type} year={v.year} onClick={() => {
                         setShowingOptions(false)
                         getStream(v.title, v.slug, v.type)
                     }}/>