Skip to content
Snippets Groups Projects
main.js 4.37 KiB
Newer Older
  • Learn to ignore specific revisions
  • "use strict";
    
    
    // When the chat loads faster than the stream, the stream would be out to the left of the window.
    // This fixes the scrolling...
    window.onscroll = () => {
      window.scrollTo(0, 0);
    };
    
    
    Simon Kirsten's avatar
    Simon Kirsten committed
    let large_player;
    let small_player;
    
    
    function newLargePlayer(channel) {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      return new Twitch.Player("large-player", {
        channel: channel,
        width: "",
        height: "",
        controls: false,
    
        muted: false,
    
        theme: "dark",
        allowfullscreen: false,
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      });
    
    }
    
    function newSmallPlayer(channel) {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      return new Twitch.Player("small-player", {
        channel: channel,
        width: "",
        height: "",
        controls: false,
    
        muted: true,
    
        theme: "dark",
        allowfullscreen: false,
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      });
    
    Simon Kirsten's avatar
    Simon Kirsten committed
    const large_player_elem = document.getElementById("large-player");
    const small_player_elem = document.getElementById("small-player");
    const overlay_elem = document.getElementById("overlay");
    const chat_elem = document.getElementById("chat");
    
    
    const defaultState = {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      large_channel: "",
      small_channel: "",
      volume: 0.5,
      small_scale: 0.3,
    
      show_chat: false,
    
    };
    
    let state = defaultState;
    
    function updateState(newState) {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      state = newState;
    
      console.log("State:", state);
    
      // large player:
    
      // we need to destroy the player
      if (state.large_channel == "" && large_player) {
        large_player.destroy();
        large_player = undefined;
        chat_elem.src = "about:blank";
      }
    
      // we should be playing something
      if (state.large_channel != "") {
        function update() {
          // the volume needs to be changed
    
          if (state.volume == 0) {
            large_player.setMuted(true);
          } else {
            large_player.setMuted(false);
    
    Simon Kirsten's avatar
    Simon Kirsten committed
            large_player.setVolume(state.volume);
          }
    
          // the channel needs to be changed
          if (large_player.getChannel() != state.large_channel) {
            large_player.setChannel(state.large_channel);
          }
    
    Simon Kirsten's avatar
    Simon Kirsten committed
        // we need to create the large player
        if (!large_player) {
          large_player = newLargePlayer(state.large_channel);
          large_player.addEventListener(Twitch.Player.READY, update);
          large_player.addEventListener(Twitch.Player.PLAY, update);
        } else {
          update();
    
    Simon Kirsten's avatar
    Simon Kirsten committed
        let chat_elem_src =
    
          "https://www.twitch.tv/embed/" +
          state.large_channel +
          "/chat?darkpopout&parent=" +
          location.hostname;
    
    Simon Kirsten's avatar
    Simon Kirsten committed
        if (chat_elem_src != chat_elem.src) {
          chat_elem.src = chat_elem_src;
        }
      }
    
      // small player:
    
      // we need to destroy the player
      if (state.small_channel == "" && small_player) {
        small_player.destroy();
        small_player = undefined;
      }
    
      // we should be playing something
      if (state.small_channel != "") {
        function update() {
          // the channel needs to be changed
          if (small_player.getChannel() != state.small_channel) {
            small_player.setChannel(state.small_channel);
          }
    
    Simon Kirsten's avatar
    Simon Kirsten committed
        // we need to create the small player
        if (!small_player) {
          small_player = newSmallPlayer(state.small_channel);
    
    Simon Kirsten's avatar
    Simon Kirsten committed
          small_player.addEventListener(Twitch.Player.READY, update);
          small_player.addEventListener(Twitch.Player.PLAY, update);
        } else {
          update();
        }
      }
    
      const small_player_size = state.small_scale * 100 + "%";
      small_player_elem.style.width = small_player_size;
      small_player_elem.style.height = small_player_size;
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      small_player_elem.className = state.small_channel == "" ? "hidden" : "";
      large_player_elem.className = state.large_channel == "" ? "hidden" : "";
      overlay_elem.className =
        state.large_channel != "" || state.small_channel != "" ? "hidden" : "";
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      document.body.className = state.show_chat ? "with-chat" : "";
    
    }
    
    if (!window.EventSource) {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      overlay_elem.firstElementChild.innerText =
        "Your browser (probably IE / Edge) does not support EventSource. Please try any other modern browser.";
    
    } else {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      const events = new EventSource("/display");
    
      events.onmessage = (m) => {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
        updateState(JSON.parse(m.data));
      };
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      events.onopen = () => {
        overlay_elem.firstElementChild.innerText = "Nothing playing";
      };
    
      events.onerror = (err) => {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
        console.error(err);
    
    Simon Kirsten's avatar
    Simon Kirsten committed
        updateState(defaultState);
        overlay_elem.firstElementChild.innerText =
          "Connection to stream-server failed. Make sure it's running.";
      };
    
    }
    
    function toggleFullscreen() {
    
    Simon Kirsten's avatar
    Simon Kirsten committed
      if (!document.fullscreenElement) {
        // we are not in fullscreen
        document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();