From ffabfa4866a791e8a8ea8bbb6d00876c6091ef6b Mon Sep 17 00:00:00 2001
From: James Hawkins <jhawki2005@gmail.com>
Date: Thu, 22 Jul 2021 21:11:53 +0100
Subject: [PATCH] change source headings

---
 src/components/MovieRow.js |  1 -
 src/index.css              |  2 ++
 src/lib/gomostream.js      |  2 +-
 src/views/Search.css       |  8 ++++++++
 src/views/Search.js        | 28 +++++++++++++++++++---------
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/MovieRow.js b/src/components/MovieRow.js
index 00219e19..d8ae3162 100644
--- a/src/components/MovieRow.js
+++ b/src/components/MovieRow.js
@@ -24,7 +24,6 @@ export function MovieRow(props) {
                 <span className="year">({props.year})</span>
             </div>
             <div className="watch">
-                <span className="attribute">{props.source}</span>
                 <p>Watch {props.type}</p>
                 <Arrow/>
             </div>
diff --git a/src/index.css b/src/index.css
index c2586220..615da981 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,6 +22,8 @@
   --choice: #2E2F37;
   --choice-hover: #45464D;
   --choice-active: #45464D;
+  
+  --source-headings: #5b5c63;
 }
 /* @media (prefers-color-scheme: light) {
   :root {
diff --git a/src/lib/gomostream.js b/src/lib/gomostream.js
index 5d8ba77b..9d092827 100644
--- a/src/lib/gomostream.js
+++ b/src/lib/gomostream.js
@@ -35,7 +35,7 @@ async function findContent(searchTerm, type) {
         if (results.length > 1) {
             return { options: results };
         } else {
-            return { options: [ { ...results[0], source: 'gomostream' } ] }
+            return { options: [ results[0] ] }
         }
     } catch (err) {
         console.error(err);
diff --git a/src/views/Search.css b/src/views/Search.css
index 0e0a9932..7492e22e 100644
--- a/src/views/Search.css
+++ b/src/views/Search.css
@@ -40,3 +40,11 @@
 .topRightCredits a:hover .arrow {
     transform: translateY(.1rem) translateX(.2rem);
 }
+
+p.source {
+    text-transform: uppercase;
+    font-weight: bold;
+    color: var(--source-headings);
+    font-size: 0.8em;
+    margin-top: 2rem;
+}
diff --git a/src/views/Search.js b/src/views/Search.js
index 07765d9e..189bb5ab 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -49,7 +49,7 @@ export function SearchView() {
             if (type === "movie") {
                 // getStreamUrl(slug, type, source, season, episode)
                 const { url } = await getStreamUrl(slug, type, source);
-    
+
                 if (url === '') {
                     return fail(`Not found: ${title}`)
                 }
@@ -128,7 +128,7 @@ export function SearchView() {
                     noWrap={true}
                     selected={type}
                 />
-                <InputBox placeholder={ type === "movie" ? "Hamilton" : "Atypical" } onSubmit={(str) => searchMovie(str, type)} />
+                <InputBox placeholder={type === "movie" ? "Hamilton" : "Atypical"} onSubmit={(str) => searchMovie(str, type)} />
                 <Progress show={progress > 0} failed={failed} progress={progress} steps={maxSteps} text={text} />
             </Card>
 
@@ -136,15 +136,25 @@ export function SearchView() {
                 <Title size="medium">
                     Whoops, there are a few {type}s like that
                 </Title>
-                {options?.map((v, i) => (
-                    <MovieRow key={i} title={v.title} slug={v.slug} type={v.type} year={v.year} source={v.source} onClick={() => {
-                        setShowingOptions(false)
-                        getStream(v.title, v.slug, v.type, v.source)
-                    }}/>
-                ))}
+                { Object.entries(options.reduce((a, v) => {
+                        if (!a[v.source]) a[v.source] = []
+                        a[v.source].push(v)
+                        return a;
+                    }, {})).map(v => (
+                        <div key={v[0]}>
+                            <p className="source">{v[0]}</p>
+                            {v[1].map((v, i) => (
+                                <MovieRow key={i} title={v.title} slug={v.slug} type={v.type} year={v.year} source={v.source} onClick={() => {
+                                    setShowingOptions(false)
+                                    getStream(v.title, v.slug, v.type, v.source)
+                                }} />
+                            ))}
+                        </div>
+                    ))
+                }
             </Card>
             <div className="topRightCredits">
-                <a href="https://github.com/JamesHawkinss/movie-web" target="_blank" rel="noreferrer">Check it out on GitHub <Arrow/></a>
+                <a href="https://github.com/JamesHawkinss/movie-web" target="_blank" rel="noreferrer">Check it out on GitHub <Arrow /></a>
             </div>
         </div>
     )