livestream/src/App.svelte

<style>
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 55px);
  flex-direction: column;
  /* max-width:1320px; */
  margin: auto;
}

.desc {
  display: none;
  padding: 15px;
  color: white;
  width: 100%;
  margin-top: auto;
}

.videoContainer {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.chatContainer {
  position: relative;
  width: 100%;
  flex-grow: 1;
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }

  .desc {
    display: block;
  }

  .videoContainer {
    flex: 0 0 70%;
    max-width: 70%;
  }

  .chatContainer {
    flex: 0 0 30%;
    max-width: 30%;
  }
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}
</style>

<script>
import VideoPlayer from "./components/VideoPlayer.svelte";
import Chat from "./components/Chat.svelte";
import Nav from "./components/Nav.svelte";
import Description from "./components/Description.svx";
// import { onMount } from "svelte";
// import { live, channel } from "./stores.js";

// let liveChannels = [];

// onMount(async () => {
//   const res = await fetch(
//     `https://cors-anywhere.herokuapp.com/https://live.autistici.org/stats`
//   );
//   const xmlText = await res.text();
//   liveChannels = await new window.DOMParser().parseFromString(
//     xmlText,
//     "text/xml"
//   );
//   const streams = liveChannels
//     .getElementsByTagName("application")[0]
//     .getElementsByTagName("stream");

//   for (const i = 0; i < streams.length; i++) {
//     livechannels.push(streams[i].getElementsByTagName("name")[0].textContent);
//   }
// });
</script>

<Nav />
<div class="container">
  <div class="videoContainer">
    <VideoPlayer />
    <div class="desc">
      <Description />
    </div>
  </div>
  <div class="chatContainer">
    <Chat />
  </div>
</div>