2015/assets/js/stream.js

   1 /**
   2  * @licstart  The following is the entire license notice for the JavaScript code in this page.
   3  *
   4  * IceCast Stream Monitor
   5  * Copyright © 2015 David Thompson <davet@gnu.org>
   6  *
   7  * This program is free software: you can redistribute it and/or
   8  * modify it under the terms of the GNU Affero General Public License
   9  * as published by the Free Software Foundation, either version 3 of
  10  * the License, or (at your option) any later version.
  11  *
  12  * This program is distributed in the hope that it will be useful, but
  13  * WITHOUT ANY WARRANTY; without even the implied warranty of
  14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  15  * Affero General Public License for more details.
  16  *
  17  * You should have received a copy of the GNU General Public License
  18  * along with this program.  If not, see
  19  * <http://www.gnu.org/licenses/>.
  20  *
  21  * @licend  The above is the entire license notice for the JavaScript code in this page
  22  */
  23
  24 if (!Array.prototype.find) {
  25   Array.prototype.find = function(predicate) {
  26     if (this == null) {
  27       throw new TypeError('Array.prototype.find called on null or undefined');
  28     }
  29     if (typeof predicate !== 'function') {
  30       throw new TypeError('predicate must be a function');
  31     }
  32     var list = Object(this);
  33     var length = list.length >>> 0;
  34     var thisArg = arguments[1];
  35     var value;
  36
  37     for (var i = 0; i < length; i++) {
  38       value = list[i];
  39       if (predicate.call(thisArg, value, i, list)) {
  40         return value;
  41       }
  42     }
  43     return undefined;
  44   };
  45 }
  46
  47 var app = {};
  48
  49 app.icecastUrl = "//live2.fsf.org";
  50
  51 app.icecastApiUrl = "//live2.fsf.org";
  52
  53 app.scheduleEvery = function(duration, thunk) {
  54   thunk();
  55   setTimeout(function() {
  56     app.scheduleEvery(duration, thunk);
  57   }, duration);
  58 };
  59
  60 app.nullStats = {
  61   listeners: 0,
  62   server_name: null,
  63   server_description: null
  64 };
  65
  66 app.publicApi = function(xhr) {
  67   xhr.withCredentials = false;
  68 };
  69
  70 app.streamStats = function(mount) {
  71   var statsUrl = app.icecastApiUrl.concat('/status-json.xsl');
  72
  73   return m.request({
  74     method: "GET",
  75     url: statsUrl,
  76     config: app.publicApi
  77   }).then(function(data) {
  78     // Match the end of the listen URL for the mount point.
  79     var regexp = new RegExp(mount.concat('$'));
  80
  81     if(!data.icestats.source) {
  82       return app.nullStats;
  83     }
  84
  85     // Due to <https://trac.xiph.org/ticket/2174>, we must
  86     // explicitly test if icestats.source is an array.
  87     if(!(data.icestats.source instanceof Array)) {
  88       data.icestats.source = [data.icestats.source];
  89     }
  90
  91     var stats = data.icestats.source.find(function(source) {
  92       return regexp.test(source.listenurl);
  93     });
  94
  95     return stats || app.nullStats;
  96   });
  97 };
  98
  99 app.validStreamInfo = function(stats) {
 100   var name = stats.server_name;
 101   var desc = stats.server_description;
 102
 103   return name && desc && name !== "Unspecified name" &&
 104     desc !== "Unspecified description";
 105 };
 106
 107 app.mountToStreamUrl = function(mount) {
 108   return app.icecastUrl.concat(mount);
 109 };
 110
 111 app.changeVideoMount = function(video, mount) {
 112   // This is quite hacky and doesn't feel like the Mithril way to do
 113   // things, but we need to explicitly reload the video when the
 114   // source URL changes.
 115   video.src = app.mountToStreamUrl(mount);
 116   video.load();
 117   video.play();
 118 };
 119
 120 app.withVideo = function(id, callback) {
 121   return function() {
 122     var video = document.getElementById(id);
 123
 124     if(video) {
 125       callback(video);
 126     }
 127   };
 128 };
 129
 130 app.streams = [
 131   {
 132     name: "Room 123",
 133     speakerMount: "/stream-123.webm",
 134     desktopMount: "/slides-123.webm",
 135     ircChannel: "#libreplanet_room123"
 136   }, {
 137     name: "Room 141",
 138     speakerMount: "/stream-141.ogv",
 139     desktopMount: "/slides-141.ogv",
 140     ircChannel: "#libreplanet_room141"
 141   }, {
 142     name: "Room 155",
 143     speakerMount: "/stream-155.ogv",
 144     desktopMount: "/slides-155.ogv",
 145     ircChannel: "#libreplanet_room155"
 146   }
 147 ];
 148
 149 app.controller = function() {
 150   this.stream = m.prop(app.streams[0]);
 151   this.stats = m.prop(app.nullStats);
 152   this.showDesktop = m.prop(false);
 153
 154   // Check stats every 10 seconds.
 155   app.scheduleEvery(10000, this.updateStats.bind(this));
 156 };
 157
 158 app.controller.prototype.updateStats = function() {
 159   this.stats = app.streamStats(this.stream().speakerMount);
 160 };
 161
 162 app.view = function(ctrl) {
 163   var stream = ctrl.stream();
 164   var stats = ctrl.stats() || app.nullStats;
 165   var showDesktop = ctrl.showDesktop();
 166
 167   function renderSpeakerStream() {
 168     return m("video.lp-video", {
 169       id: "speaker-video",
 170       controls: true,
 171       autoplay: true,
 172       // Sync desktop stream state as best we can.
 173       onpause: app.withVideo("desktop-video", function(video) {
 174         video.pause();
 175       }),
 176       onplay: app.withVideo("desktop-video", function(video) {
 177         video.play();
 178       })
 179     }, [
 180       m("source", {
 181         src: app.mountToStreamUrl(stream.speakerMount)
 182       }),
 183       m("p",
 184         m("em", [
 185           "Your browser does not support the HTML5 video tag, ",
 186           m("a", { href: "TODO" }, "[ please download ]"),
 187           "the video instead"
 188         ]))
 189     ]);
 190   }
 191
 192   function renderDesktopStream() {
 193     return m("video.lp-video", {
 194       id: "desktop-video",
 195       autoplay: true
 196     }, [
 197       m("source", { src: app.mountToStreamUrl(stream.desktopMount) }),
 198       m("p",
 199         m("em", [
 200           "Your browser does not support the HTML5 video tag, ",
 201           m("a", { href: "TODO" }, "[ please download ]"),
 202           "the video instead"
 203         ]))
 204     ]);
 205   }
 206
 207   function renderToggleDesktopStream() {
 208     var action = showDesktop ? "Hide desktop stream" : "Show desktop stream";
 209
 210     return m(".row", [
 211       m(".col-sm-offset-4.col-sm-4",
 212         m("button.btn.btn-block.btn-default", {
 213           onclick: function() {
 214             ctrl.showDesktop(!showDesktop);
 215           }
 216         }, action)
 217        )
 218     ]);
 219   }
 220
 221   function renderRoomSelector() {
 222     return m(".row",
 223              m(".col-sm-offset-1.col-sm-10",
 224                m("ol.breadcrumb.text-center", app.streams.map(function(s) {
 225                  return m("li", {
 226                    class: s === stream ? "active" : null,
 227                    onclick: function() {
 228                      var speakerVideo = document.getElementById("speaker-video");
 229                      var desktopVideo = document.getElementById("desktop-video");
 230
 231                      app.changeVideoMount(speakerVideo, s.speakerMount);
 232
 233                      // Video element doesn't exist when the user
 234                      // hasn't elected to show it.
 235                      if(desktopVideo) {
 236                        app.changeVideoMount(desktopVideo, s.desktopMount);
 237                      }
 238
 239                      ctrl.stream(s);
 240                      ctrl.updateStats();
 241
 242                      return false;
 243                    }
 244                  }, m("a.alt-a", { href: "#" }, s.name));
 245                }))));
 246   }
 247
 248   function renderStats() {
 249     var info;
 250
 251     if(stats === app.nullStats) {
 252       info = m("i", "not broadcasting");
 253     } else {
 254       info = m("i", "live");
 255     }
 256     // else if(app.validStreamInfo(stats)) {
 257     //   info = [
 258     //     m("strong", stats.server_name),
 259     //     " — ",
 260     //     m("i", stats.server_description)
 261     //   ];
 262     // } else {
 263     //   info = null;
 264     // }
 265
 266     return m(".row", [
 267       m(".col-sm-8", info),
 268       m(".col-sm-4.text-right", [
 269         m("strong", stats.listeners),
 270         " watching"
 271       ])
 272     ]);
 273   }
 274
 275   return [
 276     renderRoomSelector(),
 277     m("h2", stream.name),
 278     renderStats(),
 279     renderSpeakerStream(),
 280     showDesktop ? renderDesktopStream() : null,
 281     renderToggleDesktopStream(),
 282     m("h2", "IRC"),
 283     m("p", "Join the discussion online!"),
 284     m("ul", [
 285       m("li", [
 286         "Conference-wide Freenode IRC channel: ",
 287         m("strong", "#libreplanet")
 288       ]),
 289       m("li", [
 290         "Freenode IRC channel for ",
 291         stream.name,
 292         ": ",
 293         m("strong", stream.ircChannel)
 294       ]),
 295       m("li", [
 296         "Conference hashtag for ",
 297         m("a", { href: "https://fsf.org/twitter" }, "microblogging"),
 298         ": ",
 299         m("strong", "#lp2015")
 300       ])
 301     ])
 302   ];
 303 };
 304
 305 m.module(document.getElementById("stream"), app);