Add crazy streaming JS at the last minute! holy crap!

[libreplanet-static.git] / 2015 / assets / js / stream.js

/**
 * @licstart  The following is the entire license notice for the JavaScript code in this page.
 *
 * IceCast Stream Monitor
 * Copyright © 2015 David Thompson <davet@gnu.org>
 *
 * This program is free software: you can redistribute it and/or
 * modify it under the terms of the GNU Affero General Public License
 * as published by the Free Software Foundation, either version 3 of
 * the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Affero General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see
 * <http://www.gnu.org/licenses/>.
 *
 * @licend  The above is the entire license notice for the JavaScript code in this page
 */

var app = {};

app.icecastUrl = "http://live.fsf.org";

app.scheduleEvery = function(duration, thunk) {
  thunk();
  setTimeout(function() {
    app.scheduleEvery(duration, thunk);
  }, duration);
};

app.nullStats = {
  listeners: 0,
  server_name: null,
  server_description: null
};

app.streamStats = function(mount) {
  var statsUrl = app.icecastUrl.concat('/status-json.xsl');

  return m.request({
    method: "GET",
    url: statsUrl
  }).then(function(data) {
    // Match the end of the listen URL for the mount point.
    var regexp = new RegExp(mount.concat('$'));

    // Due to <https://trac.xiph.org/ticket/2174>, we must
    // explicitly test if icestats.source is an array.
    if(!(data.icestats.source instanceof Array)) {
      data.icestats.source = [data.icestats.source];
    }

    var stats = data.icestats.source.find(function(source) {
      return regexp.test(source.listenurl);
    });

    return stats || app.nullStats;
  });
};

app.validStreamInfo = function(stats) {
  var name = stats.server_name;
  var desc = stats.server_description;

  return name && desc && name !== "Unspecified name" &&
    desc !== "Unspecified description";
};

app.mountToStreamUrl = function(mount) {
  return app.icecastUrl.concat(mount);
};

app.changeVideoMount = function(video, mount) {
  console.log(mount);
  video.src = app.mountToStreamUrl(mount);
  video.load();
  video.play();
};

app.streams = [
  {
    name: "Room 123",
    speakerMount: "/room123.ogv",
    desktopMount: "/room123-desktop.ogv",
    ircChannel: "#libreplanet_room123"
  }, {
    name: "Room 141",
    speakerMount: "/room141.ogv",
    desktopMount: "/room141-desktop.ogv",
    ircChannel: "#libreplanet_room141"
  }, {
    name: "Room 155",
    speakerMount: "/room155.ogv",
    desktopMount: "/room155-desktop.ogv",
    ircChannel: "#libreplanet_room155"
  }
];

app.controller = function() {
  var self = this;

  this.stream = m.prop(app.streams[0]);
  this.stats = m.prop(app.nullStats);

  this.speakerPosition = m.prop({
    x: 0,
    y: 0
  });

  this.showDesktop = m.prop(false);

  this.updateStats = function() {
    self.stats = app.streamStats(self.stream().speakerMount);
  };

  app.scheduleEvery(10000, function() {
    self.updateStats();
  });
};

app.view = function(ctrl) {
  var stream = ctrl.stream();
  var pos = ctrl.speakerPosition();
  var showDesktop = ctrl.showDesktop();
  var stats = ctrl.stats();
  console.log(stats);

  function renderDesktopStream() {
    return m("video.lp-video", {
      id: "desktop-video",
      autoplay: true
    }, [
      m("source", { src: app.mountToStreamUrl(stream.desktopMount) }),
      m("p",
        m("em", [
          "Your browser does not support the HTML5 video tag, ",
          m("a", { href: "TODO" }, "[ please download ]"),
          "the video instead"
        ]))
    ]);
  }

  function renderToggleDesktopStream() {
    var action = showDesktop ? "Hide desktop stream" : "Show desktop stream";

    return m(".row", [
      m(".col-sm-offset-4.col-sm-4",
        m("button.btn.btn-block.btn-default", {
          onclick: function() {
            ctrl.showDesktop(!showDesktop);
          }
        }, action)
       )
    ]);
  }

  function renderRoomSelector() {
    return m(".row",
             m(".col-sm-offset-1.col-sm-10",
               m("ol.breadcrumb.text-center", app.streams.map(function(s) {
                 return m("li", {
                   class: s === stream ? "active" : null,
                   onclick: function() {
                     var speakerVideo = document.getElementById("speaker-video");
                     var desktopVideo = document.getElementById("desktop-video");

                     console.log(s);

                     app.changeVideoMount(speakerVideo, s.speakerMount);

                     // Video element doesn't exist when the user
                     // hasn't elected to show it.
                     if(desktopVideo) {
                       app.changeVideoMount(desktopVideo, s.desktopMount);
                     }

                     ctrl.stream(s);
                   }
                 }, m("a.alt-a", { href: "#" }, s.name));
               }))));
  }

  function renderStats() {
    var info = app.validStreamInfo(stats) ? [
      m("strong", stats.server_name),
      " — ",
      m("i", stats.server_description)
    ] : null;

    return m(".row", [
      m(".col-sm-8", info),
      m(".col-sm-4.text-right", [
        m("strong", stats.listeners),
        " watching"
      ])
    ]);
  }

  return [
    renderRoomSelector(),
    m("h2", stream.name),
    renderStats(),
    m("video.lp-video", {
      id: "speaker-video",
      controls: true,
      autoplay: true
    }, [
      m("source", {
        src: app.mountToStreamUrl(stream.speakerMount)
      }),
      m("p",
        m("em", [
          "Your browser does not support the HTML5 video tag, ",
          m("a", { href: "TODO" }, "[ please download ]"),
          "the video instead"
        ]))
    ]),
    showDesktop ? renderDesktopStream() : null,
    renderToggleDesktopStream(),
    m("h2", "IRC"),
    m("p", "Join the discussion online!"),
    m("ul", [
      m("li", [
        "Conference-wide Freenode IRC channel: ",
        m("strong", "#libreplanet")
      ]),
      m("li", [
        "Freenode IRC channel for ",
        stream.name,
        ": ",
        m("strong", stream.ircChannel)
      ]),
      m("li", [
        "Conference hashtag for ",
        m("a", { href: "https://fsf.org/twitter" }, "microblogging"),
        ": ",
        m("strong", "#lp2015")
      ])
    ])
  ];
};

m.module(document.getElementById("stream"), app);