Merge remote-tracking branch 'origin/master' into add-url-routing

README.md

@@ -1,5 +1,8 @@
 # movie-web
 Small web app for watching movies easily. Check it out at **[movie.squeezebox.dev](https://movie.squeezebox.dev)**.
+
+**[Join the Discord community](https://discord.gg/vXsRvye8BS)**
+
 ## 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, and for the beautiful design

src/components/DiscordBanner.css

@@ -0,0 +1,16 @@
+.discordBanner {
+	margin-top: 0.5rem;
+    border-inline-start: none;
+    font-size: 16px;
+    font-weight: normal;
+    letter-spacing: -.01em;
+    padding: .5rem 1rem .5rem .75rem;
+    border-radius: .25rem;
+	background-color: var(--button);
+	color: var(--button-text);
+}
+
+.discordBanner a {
+    color: var(--button-text);
+    /* text-decoration: none; */
+}

src/components/DiscordBanner.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './DiscordBanner.css';
+
+export function DiscordBanner() {
+	return (
+		<div className="discordBanner">
+			<a href="https://discord.gg/vXsRvye8BS">
+                Join our Discord server
+            </a>
+		</div>
+	)
+}

src/views/Search.js

@@ -12,6 +12,7 @@ import { useMovie } from '../hooks/useMovie';
 import { TypeSelector } from '../components/TypeSelector';
 
 import './Search.css';
+import { DiscordBanner } from '../components/DiscordBanner';
 
 export function SearchView() {
     const { navigate, setStreamUrl, setStreamData } = useMovie();
@@ -136,6 +137,7 @@ export function SearchView() {
     return (
         <div className="cardView">
             <Card>
+                <DiscordBanner />
                 {errorStatus ? <ErrorBanner>{errorStatus}</ErrorBanner> : ''}
                 <Title accent="Because watching content legally is boring">
                     What do you wanna watch?