From e8a4b960022a79a48f4a495a70a747c911428060 Mon Sep 17 00:00:00 2001
From: James Hawkins <jhawki2005@gmail.com>
Date: Wed, 14 Jul 2021 09:43:45 +0100
Subject: [PATCH] Add attributes to MovieRow, prepare for show support

---
 README.md                   | 2 +-
 src/components/MovieRow.css | 9 +++++++++
 src/components/MovieRow.js  | 3 ++-
 src/lib/lookMovie.js        | 9 +++++----
 src/views/Search.js         | 8 ++++----
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 679d0dca..3d513eab 100644
--- a/README.md
+++ b/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
diff --git a/src/components/MovieRow.css b/src/components/MovieRow.css
index 6f634f28..2be6c016 100644
--- a/src/components/MovieRow.css
+++ b/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;
diff --git a/src/components/MovieRow.js b/src/components/MovieRow.js
index 47955dec..b1958fe0 100644
--- a/src/components/MovieRow.js
+++ b/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>
diff --git a/src/lib/lookMovie.js b/src/lib/lookMovie.js
index d627ec28..8acb5b00 100644
--- a/src/lib/lookMovie.js
+++ b/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 }]
         }
     }
 }
diff --git a/src/views/Search.js b/src/views/Search.js
index 4e884ed1..6ccafe3d 100644
--- a/src/views/Search.js
+++ b/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")
-                setOptions(options.map(v=>({ title: v.title, slug: v.slug, type: v.type })));
-                setShowingOptions(true)
+                setText("Choose your movie");
+                setOptions(options);
+                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)
                     }}/>