first pass, callback hell arrives fast

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+dist
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.cache/
+public
+.DS_Store
+.env*

assets/js/index.js

@@ -0,0 +1,68 @@
+import { PeerTubePlayer } from '@peertube/embed-api';
+import 'regenerator-runtime/runtime';
+import { toggleVideoPlaying } from './video-controls';
+import { getVideoData } from './scheduling';
+
+const streamData = getVideoData();
+
+const videoWrapper = document.getElementById('video-wrapper');
+const overlay = document.getElementById('overlay');
+const videoiFrame = document.querySelector('iframe.video-player');
+
+const video = {
+  isPlaying: false,
+  overlayVisible: false,
+};
+
+export const setUpPlayer = async () => {
+  const player = new PeerTubePlayer(videoiFrame);
+
+  await player.ready;
+
+  onPlayerReady(player);
+  app();
+};
+
+const app = () => {
+  if (streamData && streamData) {
+    console.log({ streamData });
+  }
+};
+
+const onPlayerReady = (player) => {
+  videoWrapper.addEventListener('mousemove', showOverlay);
+
+  videoWrapper.addEventListener('click', () => {
+    toggleVideoPlaying({
+      player,
+      video,
+      onPlay: () => {
+        hideOverlay();
+      },
+      onPause: () => {
+        showOverlay();
+      },
+    });
+    video.isPlaying = !video.isPlaying;
+  });
+};
+
+const showOverlay = () => {
+  if (!video.overlayVisible) {
+    videoWrapper.classList.add('active');
+    overlay.classList.add('active');
+
+    setTimeout(hideOverlay, 2000);
+  }
+  video.overlayVisible = true;
+};
+
+const hideOverlay = () => {
+  if (video.isPlaying) {
+    video.overlayVisible = false;
+    videoWrapper.classList.remove('active');
+    overlay.classList.remove('active');
+  }
+};
+
+setUpPlayer();

assets/js/scheduling.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+import 'regenerator-runtime/runtime';
+import config from '../../data/conf.json';
+
+export const getVideoData = async () => {
+  console.log({ config });
+  const { data } = await axios.get(`https://tv.undersco.re/api/v1/videos/${config.next_stream.peertube_id}`);
+
+  console.log(data);
+
+  return data;
+};

assets/js/video-controls.js

@@ -0,0 +1,15 @@
+export const toggleVideoPlaying = ({ player, video, onPlay, onPause }) => {
+  console.log('video', video);
+
+  if (video.isPlaying) {
+    player.pause();
+    if (typeof onPause === 'function') {
+      onPause();
+    }
+  } else {
+    player.play();
+    if (typeof onPlay === 'function') {
+      onPlay();
+    }
+  }
+};

assets/styles/chat.scss

@@ -0,0 +1,6 @@
+#chat-container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+}

assets/styles/index.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+@import 'reset';
+@import 'layout';
+@import 'video-player';
+@import 'chat';

assets/styles/layout.scss

@@ -0,0 +1,25 @@
+#placeholder {
+  z-index: -1;
+  position: relative;
+  background-color: var(--colour-midnight);
+}
+
+#overlay {
+  z-index: 2;
+  position: fixed;
+
+  .underscore-logo {
+    width: 200px;
+    padding: 1em;
+    transform: translateY(-20%);
+    transition: all 0.2s ease-in-out;
+    opacity: 0;
+  }
+
+  &.active {
+    .underscore-logo {
+      transform: translateY(0%);
+      opacity: 1;
+    }
+  }
+}

assets/styles/reset.scss

@@ -0,0 +1,130 @@
+/* Reset CSS */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

assets/styles/variables.scss

@@ -0,0 +1,20 @@
+:root {
+  // Colours
+  --colour-midnight: #233b4a;
+  --colour-text: #cfcfcf;
+  --colour-offwhite: #f6f4f5;
+
+  --colour-highlight: #03a59e;
+  --colour-rose: #f6f4f5;
+  --colour-highlight-darker: #06a1a7;
+
+  // Typography
+  --font-logo: 'Reno Mono', 'SpaceMono', 'Courier New', Courier, monospace;
+  --font-body: 'Karla', 'Courier New', Courier, monospace;
+}
+
+// Responsive breakpoints
+
+$breakpoint-tablet: 768px !default;
+$breakpoint-desktop: 1024px !default;
+$breakpoint-widescreen: 1440px !default;

assets/styles/video-player.scss

@@ -0,0 +1,25 @@
+#placeholder,
+#video-wrapper,
+.video-player {
+  width: 100vw;
+  height: 100vh;
+  // background-color: aquamarine;
+}
+
+#video-wrapper {
+  z-index: 1;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  cursor: none;
+
+  &.active {
+    cursor: pointer;
+  }
+}
+
+.video-player {
+  pointer-events: none;
+}

assets/svg/logo.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 865 140">
+  <defs/>
+  <path fill="#fff" d="M0 0h865v140H0z"/>
+  <path fill="#1D3949" d="M61.2 34.15h9.75v75H61.2v-7.2c-4.5 5.9-11.75 8.85-21.75 8.85-9.7 0-17.2-2.6-22.5-7.8C11.65 97.8 9 90.5 9 81.1V34.15h9.75V81.1c0 6.5 1.9 11.6 5.7 15.3 3.8 3.6 9.2 5.4 16.2 5.4 6.6 0 11.65-1.6 15.15-4.8 3.6-3.2 5.4-7.5 5.4-12.9V34.15zm86.609 28.05c0-6.5-1.9-11.55-5.7-15.15-3.7-3.7-9.05-5.55-16.05-5.55-6.1 0-10.95 1.35-14.55 4.05-3.5 2.7-5.5 6.4-6 11.1v52.5h-9.75v-75h9.75v6.9c4.5-5.7 11.7-8.55 21.6-8.55 9.7 0 17.2 2.6 22.5 7.8 5.3 5.2 7.95 12.5 7.95 21.9v46.95h-9.75V62.2zm87.808 46.95v-6.45c-4.5 5.3-11.75 7.95-21.75 7.95-11.2 0-19.8-3.3-25.8-9.9-5.9-6.7-8.85-16.3-8.85-28.8s2.95-22.2 8.85-29.1c6-6.9 14.6-10.35 25.8-10.35 10.1 0 17.35 2.9 21.75 8.7V13h-27.75V4h37.5v105.15h-9.75zm-21.9-7.5c6.7 0 12-1.3 15.9-3.9 4-2.7 6-6.45 6-11.25V58.9c0-5.4-1.9-9.65-5.7-12.75-3.7-3.1-8.95-4.65-15.75-4.65-16.8 0-25.2 10.4-25.2 31.2 0 9.9 1.95 17.2 5.85 21.9 4 4.7 10.3 7.05 18.9 7.05zm87.659 0c7.1 0 12.55-1.4 16.35-4.2 3.9-2.8 5.85-6.8 5.85-12h9.75c0 3.7-.8 7.1-2.4 10.2-1.5 3.1-3.7 5.8-6.6 8.1-2.8 2.2-6.15 3.9-10.05 5.1-3.9 1.2-8.25 1.8-13.05 1.8-11.3 0-20.05-3.35-26.25-10.05-6.2-6.8-9.3-16.45-9.3-28.95s3.05-22.1 9.15-28.8c6.1-6.8 14.75-10.2 25.95-10.2 10.3 0 18.3 2.85 24 8.55 5.7 5.6 8.55 13.5 8.55 23.7v9.9h-57.9c.5 9.3 2.8 16.1 6.9 20.4 4.2 4.3 10.55 6.45 19.05 6.45zm22.2-35.85c0-16.1-7.65-24.15-22.95-24.15-15.1 0-23.4 8.05-24.9 24.15h47.85zm58.408-25.5c4.1-5.2 10.3-7.8 18.6-7.8 8.8 0 15.55 2.75 20.25 8.25 4.8 5.5 7.2 13.1 7.2 22.8h-9.75c0-6.9-1.6-12.3-4.8-16.2-3.1-3.9-7.65-5.85-13.65-5.85-5.1 0-9.25 1.4-12.45 4.2-3.1 2.7-4.9 6.4-5.4 11.1v43.35h25.05v9h-63.9v-9h29.1v-57h-19.8v-9h29.55v6.15zm91.559 61.35c7.9 0 13.75-1.3 17.55-3.9 3.9-2.7 5.85-6.2 5.85-10.5 0-4.2-1.85-7.3-5.55-9.3-3.7-2-9.5-3-17.4-3-21 0-31.5-6.85-31.5-20.55 0-7 2.6-12.4 7.8-16.2 5.3-3.8 12.65-5.7 22.05-5.7 10.3 0 18.2 2.25 23.7 6.75 5.5 4.4 8.25 10.55 8.25 18.45h-9.75c0-5.3-1.75-9.3-5.25-12-3.4-2.8-8.75-4.2-16.05-4.2-6.6 0-11.75 1.1-15.45 3.3-3.7 2.2-5.55 5.3-5.55 9.3 0 3.8 1.85 6.65 5.55 8.55 3.7 1.9 9.5 2.85 17.4 2.85 21 0 31.5 6.9 31.5 20.7 0 7.4-2.8 13.35-8.4 17.85-5.6 4.4-13.7 6.6-24.3 6.6-10.7 0-19-2.25-24.9-6.75-5.8-4.6-8.7-10.8-8.7-18.6h9.75c0 5.3 1.9 9.35 5.7 12.15 3.8 2.8 9.7 4.2 17.7 4.2zm119.159-16.2c0 3.7-.8 7.1-2.4 10.2-1.6 3.1-3.8 5.8-6.6 8.1-2.8 2.2-6.1 3.9-9.9 5.1-3.8 1.2-7.95 1.8-12.45 1.8-10.7 0-19.2-3.45-25.5-10.35-6.2-7-9.3-16.75-9.3-29.25 0-12.4 3.05-21.9 9.15-28.5 6.2-6.7 14.65-10.05 25.35-10.05 4.6 0 8.85.65 12.75 1.95 3.9 1.2 7.25 2.9 10.05 5.1 2.8 2.2 4.95 4.85 6.45 7.95 1.6 3.1 2.4 6.55 2.4 10.35h-9.75c0-4.8-2.05-8.65-6.15-11.55-4.1-3-9.4-4.5-15.9-4.5-7.9 0-14 2.45-18.3 7.35-4.2 4.9-6.3 12.35-6.3 22.35 0 10.2 2.15 17.8 6.45 22.8 4.3 4.9 10.45 7.35 18.45 7.35 6.3 0 11.5-1.45 15.6-4.35 4.1-2.9 6.15-6.85 6.15-11.85h9.75zM649.76 32.5c5.3 0 10.1.9 14.4 2.7 4.3 1.7 7.95 4.2 10.95 7.5 3.1 3.3 5.45 7.35 7.05 12.15 1.7 4.8 2.55 10.3 2.55 16.5 0 6.1-.85 11.6-2.55 16.5-1.6 4.8-3.9 8.9-6.9 12.3-3 3.4-6.65 6-10.95 7.8-4.3 1.8-9.15 2.7-14.55 2.7-5.3 0-10.1-.85-14.4-2.55-4.3-1.8-8-4.4-11.1-7.8-3.1-3.4-5.5-7.5-7.2-12.3-1.6-4.9-2.4-10.4-2.4-16.5s.8-11.55 2.4-16.35c1.7-4.8 4.05-8.85 7.05-12.15 3.1-3.4 6.8-6 11.1-7.8 4.3-1.8 9.15-2.7 14.55-2.7zm0 69.15c7.7 0 13.8-2.65 18.3-7.95 4.6-5.4 6.9-12.85 6.9-22.35 0-9.5-2.3-16.85-6.9-22.05-4.6-5.2-10.7-7.8-18.3-7.8-7.7 0-13.85 2.6-18.45 7.8-4.6 5.2-6.9 12.55-6.9 22.05 0 9.6 2.3 17.05 6.9 22.35 4.7 5.3 10.85 7.95 18.45 7.95zm80.459-61.35c4.1-5.2 10.3-7.8 18.6-7.8 8.8 0 15.55 2.75 20.25 8.25 4.8 5.5 7.2 13.1 7.2 22.8h-9.75c0-6.9-1.6-12.3-4.8-16.2-3.1-3.9-7.65-5.85-13.65-5.85-5.1 0-9.25 1.4-12.45 4.2-3.1 2.7-4.9 6.4-5.4 11.1v43.35h25.05v9h-63.9v-9h29.1v-57h-19.8v-9h29.55v6.15zm93.508 61.35c7.1 0 12.55-1.4 16.35-4.2 3.9-2.8 5.85-6.8 5.85-12h9.75c0 3.7-.8 7.1-2.4 10.2-1.5 3.1-3.7 5.8-6.6 8.1-2.8 2.2-6.15 3.9-10.05 5.1-3.9 1.2-8.25 1.8-13.05 1.8-11.3 0-20.05-3.35-26.25-10.05-6.2-6.8-9.3-16.45-9.3-28.95s3.05-22.1 9.15-28.8c6.1-6.8 14.75-10.2 25.95-10.2 10.3 0 18.3 2.85 24 8.55 5.7 5.6 8.55 13.5 8.55 23.7v9.9h-57.9c.5 9.3 2.8 16.1 6.9 20.4 4.2 4.3 10.55 6.45 19.05 6.45zm22.2-35.85c0-16.1-7.65-24.15-22.95-24.15-15.1 0-23.4 8.05-24.9 24.15h47.85zM600.26 127.9h87v7.5h-87v-7.5z"/>
+</svg>

data/conf.json

@@ -0,0 +1,8 @@
+{
+  "next_stream": {
+    "title": "Femboy Photoshoot",
+    "peertube_id": "cafce2b3-550b-4656-bae0-c167d3994a0d",
+    "startDate": "Fri Mar 05 2021 21:00:00 GMT+0100 (Central European Standard Time",
+    "endDate": "Fri Mar 05 2021 21:00:00 GMT+0100 (Central European Standard Time"
+  }
+}

index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UNDERSCORE STREAMS</title>
+    <link rel="stylesheet" href="./assets/styles/index.scss" />
+  </head>
+  <body>
+    <div id="overlay" class="active">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 865 140" class="underscore-logo">
+        <defs />
+        <path
+          fill="#fff"
+          d="M61.2 34.15h9.75v75H61.2v-7.2c-4.5 5.9-11.75 8.85-21.75 8.85-9.7 0-17.2-2.6-22.5-7.8C11.65 97.8 9 90.5 9 81.1V34.15h9.75V81.1c0 6.5 1.9 11.6 5.7 15.3 3.8 3.6 9.2 5.4 16.2 5.4 6.6 0 11.65-1.6 15.15-4.8 3.6-3.2 5.4-7.5 5.4-12.9V34.15zm86.609 28.05c0-6.5-1.9-11.55-5.7-15.15-3.7-3.7-9.05-5.55-16.05-5.55-6.1 0-10.95 1.35-14.55 4.05-3.5 2.7-5.5 6.4-6 11.1v52.5h-9.75v-75h9.75v6.9c4.5-5.7 11.7-8.55 21.6-8.55 9.7 0 17.2 2.6 22.5 7.8 5.3 5.2 7.95 12.5 7.95 21.9v46.95h-9.75V62.2zm87.808 46.95v-6.45c-4.5 5.3-11.75 7.95-21.75 7.95-11.2 0-19.8-3.3-25.8-9.9-5.9-6.7-8.85-16.3-8.85-28.8s2.95-22.2 8.85-29.1c6-6.9 14.6-10.35 25.8-10.35 10.1 0 17.35 2.9 21.75 8.7V13h-27.75V4h37.5v105.15h-9.75zm-21.9-7.5c6.7 0 12-1.3 15.9-3.9 4-2.7 6-6.45 6-11.25V58.9c0-5.4-1.9-9.65-5.7-12.75-3.7-3.1-8.95-4.65-15.75-4.65-16.8 0-25.2 10.4-25.2 31.2 0 9.9 1.95 17.2 5.85 21.9 4 4.7 10.3 7.05 18.9 7.05zm87.659 0c7.1 0 12.55-1.4 16.35-4.2 3.9-2.8 5.85-6.8 5.85-12h9.75c0 3.7-.8 7.1-2.4 10.2-1.5 3.1-3.7 5.8-6.6 8.1-2.8 2.2-6.15 3.9-10.05 5.1-3.9 1.2-8.25 1.8-13.05 1.8-11.3 0-20.05-3.35-26.25-10.05-6.2-6.8-9.3-16.45-9.3-28.95s3.05-22.1 9.15-28.8c6.1-6.8 14.75-10.2 25.95-10.2 10.3 0 18.3 2.85 24 8.55 5.7 5.6 8.55 13.5 8.55 23.7v9.9h-57.9c.5 9.3 2.8 16.1 6.9 20.4 4.2 4.3 10.55 6.45 19.05 6.45zm22.2-35.85c0-16.1-7.65-24.15-22.95-24.15-15.1 0-23.4 8.05-24.9 24.15h47.85zm58.408-25.5c4.1-5.2 10.3-7.8 18.6-7.8 8.8 0 15.55 2.75 20.25 8.25 4.8 5.5 7.2 13.1 7.2 22.8h-9.75c0-6.9-1.6-12.3-4.8-16.2-3.1-3.9-7.65-5.85-13.65-5.85-5.1 0-9.25 1.4-12.45 4.2-3.1 2.7-4.9 6.4-5.4 11.1v43.35h25.05v9h-63.9v-9h29.1v-57h-19.8v-9h29.55v6.15zm91.559 61.35c7.9 0 13.75-1.3 17.55-3.9 3.9-2.7 5.85-6.2 5.85-10.5 0-4.2-1.85-7.3-5.55-9.3-3.7-2-9.5-3-17.4-3-21 0-31.5-6.85-31.5-20.55 0-7 2.6-12.4 7.8-16.2 5.3-3.8 12.65-5.7 22.05-5.7 10.3 0 18.2 2.25 23.7 6.75 5.5 4.4 8.25 10.55 8.25 18.45h-9.75c0-5.3-1.75-9.3-5.25-12-3.4-2.8-8.75-4.2-16.05-4.2-6.6 0-11.75 1.1-15.45 3.3-3.7 2.2-5.55 5.3-5.55 9.3 0 3.8 1.85 6.65 5.55 8.55 3.7 1.9 9.5 2.85 17.4 2.85 21 0 31.5 6.9 31.5 20.7 0 7.4-2.8 13.35-8.4 17.85-5.6 4.4-13.7 6.6-24.3 6.6-10.7 0-19-2.25-24.9-6.75-5.8-4.6-8.7-10.8-8.7-18.6h9.75c0 5.3 1.9 9.35 5.7 12.15 3.8 2.8 9.7 4.2 17.7 4.2zm119.159-16.2c0 3.7-.8 7.1-2.4 10.2-1.6 3.1-3.8 5.8-6.6 8.1-2.8 2.2-6.1 3.9-9.9 5.1-3.8 1.2-7.95 1.8-12.45 1.8-10.7 0-19.2-3.45-25.5-10.35-6.2-7-9.3-16.75-9.3-29.25 0-12.4 3.05-21.9 9.15-28.5 6.2-6.7 14.65-10.05 25.35-10.05 4.6 0 8.85.65 12.75 1.95 3.9 1.2 7.25 2.9 10.05 5.1 2.8 2.2 4.95 4.85 6.45 7.95 1.6 3.1 2.4 6.55 2.4 10.35h-9.75c0-4.8-2.05-8.65-6.15-11.55-4.1-3-9.4-4.5-15.9-4.5-7.9 0-14 2.45-18.3 7.35-4.2 4.9-6.3 12.35-6.3 22.35 0 10.2 2.15 17.8 6.45 22.8 4.3 4.9 10.45 7.35 18.45 7.35 6.3 0 11.5-1.45 15.6-4.35 4.1-2.9 6.15-6.85 6.15-11.85h9.75zM649.76 32.5c5.3 0 10.1.9 14.4 2.7 4.3 1.7 7.95 4.2 10.95 7.5 3.1 3.3 5.45 7.35 7.05 12.15 1.7 4.8 2.55 10.3 2.55 16.5 0 6.1-.85 11.6-2.55 16.5-1.6 4.8-3.9 8.9-6.9 12.3-3 3.4-6.65 6-10.95 7.8-4.3 1.8-9.15 2.7-14.55 2.7-5.3 0-10.1-.85-14.4-2.55-4.3-1.8-8-4.4-11.1-7.8-3.1-3.4-5.5-7.5-7.2-12.3-1.6-4.9-2.4-10.4-2.4-16.5s.8-11.55 2.4-16.35c1.7-4.8 4.05-8.85 7.05-12.15 3.1-3.4 6.8-6 11.1-7.8 4.3-1.8 9.15-2.7 14.55-2.7zm0 69.15c7.7 0 13.8-2.65 18.3-7.95 4.6-5.4 6.9-12.85 6.9-22.35 0-9.5-2.3-16.85-6.9-22.05-4.6-5.2-10.7-7.8-18.3-7.8-7.7 0-13.85 2.6-18.45 7.8-4.6 5.2-6.9 12.55-6.9 22.05 0 9.6 2.3 17.05 6.9 22.35 4.7 5.3 10.85 7.95 18.45 7.95zm80.459-61.35c4.1-5.2 10.3-7.8 18.6-7.8 8.8 0 15.55 2.75 20.25 8.25 4.8 5.5 7.2 13.1 7.2 22.8h-9.75c0-6.9-1.6-12.3-4.8-16.2-3.1-3.9-7.65-5.85-13.65-5.85-5.1 0-9.25 1.4-12.45 4.2-3.1 2.7-4.9 6.4-5.4 11.1v43.35h25.05v9h-63.9v-9h29.1v-57h-19.8v-9h29.55v6.15zm93.508 61.35c7.1 0 12.55-1.4 16.35-4.2 3.9-2.8 5.85-6.8 5.85-12h9.75c0 3.7-.8 7.1-2.4 10.2-1.5 3.1-3.7 5.8-6.6 8.1-2.8 2.2-6.15 3.9-10.05 5.1-3.9 1.2-8.25 1.8-13.05 1.8-11.3 0-20.05-3.35-26.25-10.05-6.2-6.8-9.3-16.45-9.3-28.95s3.05-22.1 9.15-28.8c6.1-6.8 14.75-10.2 25.95-10.2 10.3 0 18.3 2.85 24 8.55 5.7 5.6 8.55 13.5 8.55 23.7v9.9h-57.9c.5 9.3 2.8 16.1 6.9 20.4 4.2 4.3 10.55 6.45 19.05 6.45zm22.2-35.85c0-16.1-7.65-24.15-22.95-24.15-15.1 0-23.4 8.05-24.9 24.15h47.85zM600.26 127.9h87v7.5h-87v-7.5z"
+        />
+      </svg>
+    </div>
+    <div id="placeholder"></div>
+    <div id="video-wrapper">
+      <iframe
+        class="video-player"
+        width="560"
+        height="315"
+        sandbox="allow-same-origin allow-scripts allow-popups"
+        src="https://tv.undersco.re/videos/embed/85c3e93d-ce49-4db4-8bcf-7407ba078da5?api=1&controls=false"
+        frameborder="0"
+        allowfullscreen
+      ></iframe>
+    </div>
+
+    <!-- <div id="chat-container">
+      <iframe
+        src="https://titanembeds.com/embed/803918964082212905?css=215&defaultchannel=817134294199566356&lang=en_EN"
+        height="500"
+        width="350"
+        frameborder="0"
+        title="discord-chat"
+        class="titanembed"
+      />
+    </div> -->
+
+    <script src="./assets/js/index.js"></script>
+  </body>
+</html>

package.json

@@ -1,6 +1,17 @@
 {
-  "name": "stream",
-  "version": "1.0.0",
+  "name": "underscore_stream",
+  "version": "0.0.0",
   "main": "index.js",
-  "license": "MIT"
+  "license": "MIT",
+  "scripts": {
+    "start": "yarn parcel index.html"
+  },
+  "devDependencies": {
+    "parcel-bundler": "1.12.3",
+    "sass": "^1.32.8"
+  },
+  "dependencies": {
+    "@peertube/embed-api": "^0.0.4",
+    "axios": "^0.21.1"
+  }
 }