change source headings

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>

src/index.css

@@ -22,6 +22,8 @@
   --choice: #2E2F37;
   --choice-hover: #45464D;
   --choice-active: #45464D;
+  
+  --source-headings: #5b5c63;
 }
 /* @media (prefers-color-scheme: light) {
   :root {

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

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

src/views/Search.js

@@ -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>
     )