Fix validation warnings and errors on main page and js.

[libreplanet-static.git] / 2019 / 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
 */

if (!Array.prototype.find) {
  Array.prototype.find = function(predicate) {
    if (this == null) {
      throw new TypeError('Array.prototype.find called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;

    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return value;
      }
    }
    return undefined;
  };
}

var app = {};

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

app.icecastApiUrl = "//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.publicApi = function(xhr) {
  xhr.withCredentials = false;
};

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

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

    if(!data.icestats.source) {
      return app.nullStats;
    }

    // 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) {
  // This is quite hacky and doesn't feel like the Mithril way to do
  // things, but we need to explicitly reload the video when the
  // source URL changes.
  video.src = app.mountToStreamUrl(mount) + "?t=" + (new Date() * 1);
  video.load();
  video.play();
};

app.withVideo = function(id, callback) {
  return function() {
    var video = document.getElementById(id);

    if(video) {
      callback(video);
    }
  };
};

app.streams = [
  {
    name: "Room 123",
    speakerMount: "/stream-123.webm",
    desktopMount: "/slides-123.webm",
    speakerSmallMount: "/stream-123-480p.webm",
    ircChannel: "#libreplanet_room123"
  }, {
    name: "Room 144",
    speakerMount: "/stream-144.webm",
    desktopMount: "/slides-144.webm",
    speakerSmallMount: "/stream-144-480p.webm",
    ircChannel: "#libreplanet_room144"
  }, {
    name: "Room 155",
    speakerMount: "/stream-155.webm",
    desktopMount: "/slides-155.webm",
    speakerSmallMount: "/stream-155-480p.webm",
    ircChannel: "#libreplanet_room155"
  }
];

app.controller = function() {
  this.stream = m.prop(app.streams[0]);
  this.stats = m.prop(app.nullStats);
  this.showDesktop = m.prop(false);

  // Check stats every 10 seconds.
  app.scheduleEvery(10000, this.updateStats.bind(this));
};

app.controller.prototype.updateStats = function() {
  //this.stats = app.streamStats(this.stream().speakerMount);
};

app.view = function(ctrl) {
  var stream = ctrl.stream();
  var stats = ctrl.stats() || app.nullStats;
  var showDesktop = ctrl.showDesktop();

  function renderSpeakerStream() {
    return m("video.lp-video", {
      id: "speaker-video",
      controls: true,
      autoplay: true,
      // Sync desktop stream state as best we can.
      onpause: app.withVideo("desktop-video", function(video) {
        video.pause();
      }),
      onplay: app.withVideo("desktop-video", function(video) {
        video.play();
      })
//      onended: app.withVideo("desktop-video", function(video) {
//        setTimeout(function() {
//
//            // we probably need to update the video stream GET request with the
//            // date hack so we get a non-cached version of the video when we
//            // try to resume.
//
//            // we also probably need to re-try loading the video if it fails to
//            // load
//
//          video.load();
//          video.play();
//        }, 3000);
//      })
    }, [
      m("source", {
        src: app.mountToStreamUrl(stream.speakerMount) + "?t=" + (new Date() * 1)
      }),
      m("p",
        m("em", [
          "Your browser does not support the HTML5 video tag, ",
          m("a", { href: "TODO" }, "[ please download ]"),
          "the video instead"
        ]))
    ]);
  }

  function renderDesktopStream() {
    return m("video.lp-video", {
      id: "desktop-video",
      controls: true,
      autoplay: true
//      onended: app.withVideo("desktop-video", function(video) {
//        setTimeout(function() {
//            // we probably need to update the video stream GET request with the
//            // date hack so we get a non-cached version of the video when we
//            // try to resume.
//
//            // we also probably need to re-try loading the video if it fails to
//            // load
//          video.load();
//          video.play();
//        }, 3000);
//      })
    }, [
      m("source", { src: app.mountToStreamUrl(stream.desktopMount) + "?t=" + (new Date() * 1) }),
      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 slides stream" : "Show slides 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");

                     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);
                     ctrl.updateStats();

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

  function renderStats() {
    var info;

    if(stats === app.nullStats) {
      info = m("i", "not broadcasting");
    } else {
      info = m("i", "live");
    }
    // else if(app.validStreamInfo(stats)) {
    //   info = [
    //     m("strong", stats.server_name),
    //     " — ",
    //     m("i", stats.server_description)
    //   ];
    // } else {
    //   info = null;
    // }

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

  return [
    renderRoomSelector(),
    m("h2", stream.name),
    renderStats(),
    renderSpeakerStream(),
    showDesktop ? renderDesktopStream() : null,
    renderToggleDesktopStream(),
    m("p", "Join the discussion online!"),
    m("ul", [
      m("li", [
        "Conference-wide Freenode IRC channel: ",
        m("strong", "/join #libreplanet")
      ]),
      m("li", [
        "Freenode IRC channel for ",
        stream.name,
        ": ",
        m("strong", ["/join ", stream.ircChannel])
      ]),
      m("li", [
        "Conference-wide Mumble (voice chat) server: ",
        m("strong", "mumble.fsf.org")
      ]),
      m("li", [
        "Conference hashtag for ",
        m("a", { href: "https://fsf.org/twitter" }, "microblogging"),
        ": ",
        m("strong", "#libreplanet")
      ])
    ]),
    m("h2", "IRC")
  ];
};

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