Add noscript for browsers without JS (#2592)

* Make OwncastLogo more versatile

* Add noscript tag

* Commit updated API documentation

* Show all content on vertical overflow

---------

Co-authored-by: Owncast <owncast@owncast.online>

web/components/common/OwncastLogo/OwncastLogo.tsx

@@ -3,17 +3,18 @@ import cn from 'classnames';
 import styles from './OwncastLogo.module.scss';
 
 export type LogoProps = {
-  variant: 'simple' | 'contrast';
+  variant?: 'simple' | 'contrast';
+  className?: string;
 };
 
-export const OwncastLogo: FC<LogoProps> = ({ variant = 'simple' }) => {
+export const OwncastLogo: FC<LogoProps> = ({ variant = 'simple', className = '' }) => {
   const rootClassName = cn(styles.root, {
     [styles.simple]: variant === 'simple',
     [styles.contrast]: variant === 'contrast',
   });
 
   return (
-    <div className={rootClassName}>
+    <div className={`${rootClassName} ${className}`}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 95.68623352050781 104.46271514892578"

web/components/layouts/Main/Main.tsx

@@ -24,6 +24,7 @@ import { Theme } from '../../theme/Theme';
 import styles from './Main.module.scss';
 import { PushNotificationServiceWorker } from '../../workers/PushNotificationServiceWorker/PushNotificationServiceWorker';
 import { AppStateOptions } from '../../stores/application-state';
+import { Noscript } from '../../ui/Noscript/Noscript';
 
 const lockBodyStyle = `
 body {
@@ -152,6 +153,8 @@ export const Main: FC = () => {
           <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
         )}
       </Layout>
+
+      <Noscript />
     </>
   );
 };

web/components/ui/Noscript/Noscript.module.scss

@@ -0,0 +1,50 @@
+@import '../../../styles/mixins.scss';
+
+.noscript {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2em;
+  font-size: large;
+  background-color: var(--theme-color-background-main);
+  z-index: 999;
+
+  h2 {
+    margin-top: 25px;
+    margin-bottom: 5px;
+    font-weight: bold;
+    font-size: inherit;
+  }
+}
+
+// Necessary in case content y-overflows becuase
+// align-items: center would otherwise hide some
+// of the content
+.scrollContainer {
+  max-height: 100%;
+  overflow: auto;
+}
+
+.content {
+  max-width: 100%;
+  width: 70ch;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  width: 70%;
+
+  // For some weir reason, the logo isn't displayed on screens <= 767px.
+  // This coincides with the tablet breakpoint, but god knows what exactly
+  // the issue is. Since it's just a design element, just hide the logo on
+  // those smaller screens. For more information, see
+  // https://github.com/owncast/owncast/pull/2592
+  @include screen(tablet) {
+    display: none;
+  }
+}

web/components/ui/Noscript/Noscript.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+import { OwncastLogo } from '../../common/OwncastLogo/OwncastLogo';
+import styles from './Noscript.module.scss';
+
+export const Noscript: FC = () => (
+  <noscript className={styles.noscript}>
+    <div className={styles.scrollContainer}>
+      <div className={styles.content}>
+        <OwncastLogo className={styles.logo} />
+        <br />
+        <p>
+          This website is powered by&nbsp;
+          <a href="https://owncast.online" rel="noopener noreferrer" target="_blank">
+            Owncast
+          </a>
+          .
+        </p>
+        <p>
+          Owncast uses JavaScript for playing the HTTP Live Streaming (HLS) video, and its chat
+          client. But your web browser does not seem to support JavaScript, or you have it disabled.
+        </p>
+        <p>
+          For the best experience, you should use a different browser with JavaScript support. If
+          you have disabled JavaScript in your browser, you can re-enable it.
+        </p>
+        <h2>How can I watch this stream without JavaScript?</h2>
+        <p>
+          You can open the URL of this website in your media player (such as&nbsp;
+          <a href="https://mpv.io" rel="noopener noreferrer" target="_blank">
+            mpv
+          </a>
+          &nbsp;or&nbsp;
+          <a href="https://www.videolan.org/vlc/" rel="noopener noreferrer" target="_blank">
+            VLC
+          </a>
+          ) to watch the stream.
+        </p>
+        <h2>How can I chat with the others without JavaScript?</h2>
+        <p>Currently, there is no option to use the chat without JavaScript.</p>
+      </div>
+    </div>
+  </noscript>
+);