add /tv (#45)

.env.example

@@ -1,2 +1,3 @@
 DATABASE_URL=postgresql://<POSTGRES_USER>:<POSTGRES_PASSWORD>@localhost:5432/<DB_NAME>
 TOKENTERMINAL_API_KEY=<TOKENTERMINAL_API_KEY>
+LIVEPEER_COM_API_KEY=

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
-.next
+.next
+*.css

.eslintrc

@@ -25,6 +25,7 @@
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/no-var-requires": "off",
+    "jsx-a11y/media-has-caption": "off",
     "jsx-a11y/label-has-associated-control": [
       "error",
       {

components/Footer/index.tsx

@@ -21,12 +21,12 @@ const DiscordIcon = ({ ...props }) => {
   );
 };
 
-const Footer = ({ ...props }) => {
+const Footer = ({ logo = true, border = true, ...props }) => {
   return (
     <Box
       css={{
         borderTop: "1px solid",
-        borderColor: "$border",
+        borderColor: border ? "$border" : "transparent",
         py: "$4",
         display: "grid",
         gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
@@ -124,14 +124,16 @@ const Footer = ({ ...props }) => {
       </Box>
       <Box
         css={{
+          opacity: logo ? 1 : 0,
           textAlign: "center",
           order: 3,
+          fontFamily: "$heading",
           "@bp2": {
             order: 2,
           },
         }}
       >
-        The Web3 Index™. All rights reserved
+        The Web3 Index
       </Box>
       <Box
         css={{

components/OldTV/index.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable */
+import Box from "../Box";
+import ScreenEffect from "../../lib/screenEffect";
+import { useEffect } from "react";
+
+const OldTV = () => {
+  useEffect(() => {
+    const screen = new ScreenEffect("#screen", {});
+    const dat = require("dat.gui");
+    const gui = new dat.GUI();
+
+    const config = {
+      effects: {
+        roll: {
+          enabled: false,
+          options: {
+            speed: 1000,
+          },
+        },
+        image: {
+          enabled: true,
+          options: {
+            src: "https://images.unsplash.com/photo-1505977404378-3a0e28ec6488?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ",
+            blur: 1.2,
+          },
+        },
+        vignette: { enabled: true },
+        scanlines: { enabled: true },
+        vcr: {
+          enabled: true,
+          options: {
+            opacity: 1,
+            miny: 220,
+            miny2: 220,
+            num: 70,
+            fps: 60,
+          },
+        },
+        wobbley: { enabled: true },
+        snow: {
+          enabled: true,
+          options: {
+            opacity: 0.2,
+          },
+        },
+      },
+    };
+
+    const f1 = gui.addFolder("Effects");
+    const f2 = gui.addFolder("Snow");
+    const f3 = gui.addFolder("VCR");
+    const f4 = gui.addFolder("Roll");
+    const f5 = gui.addFolder("Image");
+
+    for (const effect in config.effects) {
+      const type = config.effects[effect];
+      f1.add(type, "enabled")
+        .name(effect)
+        .onChange((bool) => {
+          if (bool) {
+            screen.add(effect, config.effects[effect].options);
+          } else {
+            screen.remove(effect);
+          }
+        });
+
+      if (type.options) {
+        const folder = effect === "vcr" || effect === "video" ? f3 : f2;
+        for (const p in type.options) {
+          if (p === "speed") {
+            f4.add(type.options, p)
+              .min(100)
+              .step(1)
+              .max(10000)
+              .onChange((val) => {
+                screen.effects[
+                  effect
+                ].node.style.animationDuration = `${val}ms`;
+              });
+          }
+
+          if (p === "opacity") {
+            folder
+              .add(type.options, p)
+              .name(`${effect} opacity`)
+              .min(0)
+              .step(0.1)
+              .max(1)
+              .onChange((val) => {
+                screen.effects[effect].node.style.opacity = val;
+              });
+          }
+
+          if (p === "miny") {
+            folder
+              .add(type.options, p)
+              .name(`tracking`)
+              .min(0)
+              .step(0.1)
+              .max(400)
+              .onChange((val) => {
+                screen.effects[effect].config.miny = val;
+                screen.effects[effect].config.miny2 = 400 - val;
+              });
+          }
+
+          if (p === "num") {
+            folder
+              .add(type.options, p)
+              .name(`tape age`)
+              .min(1)
+              .step(0.1)
+              .max(100)
+              .onChange((val) => {
+                screen.effects[effect].config.num = val;
+              });
+          }
+
+          if (p === "blur") {
+            f5.add(type.options, p)
+              .name(`blur`)
+              .min(1)
+              .step(0.1)
+              .max(5)
+              .onChange((val) => {
+                if (effect === "vcr") {
+                  screen.effects[effect].config.blur = val;
+                } else {
+                  screen.effects[effect].node.style.filter = `blur(${val}px)`;
+                }
+              });
+          }
+        }
+      }
+    }
+
+    f1.open();
+    f2.open();
+    f3.open();
+    f4.open();
+    f5.open();
+
+    setTimeout(() => {
+      for (const prop in config.effects) {
+        if (!!config.effects[prop].enabled) {
+          screen.add(prop, config.effects[prop].options);
+        }
+      }
+    }, 1000);
+  }, []);
+
+  return (
+    <Box className="tv">
+      <Box id="screen" />
+    </Box>
+  );
+};
+
+export default OldTV;

components/Player/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import videojs from "video.js";
+import "videojs-contrib-quality-levels";
+import "videojs-hls-quality-selector";
+import "video.js/dist/video-js.css";
+
+export const VideoJS = (props) => {
+  const videoRef = React.useRef(null);
+  const playerRef = React.useRef(null);
+  const { options, onReady } = props;
+
+  React.useEffect(() => {
+    // make sure Video.js player is only initialized once
+    if (!playerRef.current) {
+      const videoElement = videoRef.current;
+      if (!videoElement) return;
+
+      const player = (playerRef.current = videojs(videoElement, options, () => {
+        console.log("player is ready");
+        onReady && onReady(player);
+      }));
+    } else {
+      // you can update player here [update player through props]
+      // const player = playerRef.current;
+      // player.autoplay(options.autoplay);
+      // player.src(options.sources);
+    }
+  }, [options, onReady]);
+
+  // Dispose the Video.js player when the functional component unmounts
+  React.useEffect(() => {
+    return () => {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div data-vjs-player>
+      <video
+        muted
+        autoPlay
+        ref={videoRef}
+        className="video-js vjs-big-play-centered"
+      />
+    </div>
+  );
+};
+
+export default VideoJS;