add audio, useragent check, direct links, interface stuff

10 files changed, 387 insertions, 90 deletions

diff --git a/contrib/site/images/controls.png b/contrib/site/images/controls.png
new file mode 100644
index 0000000..e325549
--- /dev/null
+++ b/contrib/site/images/controls.png
diff --git a/contrib/site/images/muted.png b/contrib/site/images/muted.png
deleted file mode 100644
index 7142e21..0000000
--- a/contrib/site/images/muted.png
+++ /dev/null
diff --git a/contrib/site/images/pause.png b/contrib/site/images/pause.png
deleted file mode 100644
index 8153f50..0000000
--- a/contrib/site/images/pause.png
+++ /dev/null
diff --git a/contrib/site/images/play-big.png b/contrib/site/images/play-big.png
deleted file mode 100644
index e6a9187..0000000
--- a/contrib/site/images/play-big.png
+++ /dev/null
diff --git a/contrib/site/images/play.png b/contrib/site/images/play.png
deleted file mode 100644
index e6d1798..0000000
--- a/contrib/site/images/play.png
+++ /dev/null
diff --git a/contrib/site/images/unmuted.png b/contrib/site/images/unmuted.png
deleted file mode 100644
index 28aa047..0000000
--- a/contrib/site/images/unmuted.png
+++ /dev/null
diff --git a/contrib/site/images/volumeknob.png b/contrib/site/images/volumeknob.png
deleted file mode 100644
index d470d86..0000000
--- a/contrib/site/images/volumeknob.png
+++ /dev/null
diff --git a/contrib/site/index.html b/contrib/site/index.html
index ca4cbc6..c03d1fa 100644
--- a/contrib/site/index.html
+++ b/contrib/site/index.html
@@ -29,8 +29,6 @@
       </tr>
     </table>
 
-
-
     <div id="video-container-outer">
       <div id="video-overlay" style="position: absolute; background-color: rgba(255,255,255,0.5);" >
         <div id="video-overlay-inner">
@@ -39,21 +37,23 @@
       <video id="video" style="display: block";>
         <!-- video sources -->
       </video>
+      <audio id="audio">
+        <!-- audio sources -->
+      </audio>
+      <div class="turm"></div>
     </div>
 
     <div id="player" style="display:block;"></div>
 
-
-
     <div id="controls">
       <table width="100%">
         <tr>
           <td valign="center" width="22px">
-            <a id="play-stop"><img src="images/play.png" /></a>
+            <div id="player-state"></div>
           </td>
           <td valign="center" align="right">
-            <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
-            <a id="mute"><img src="images/unmuted.png" /></a>
+            <input type="range" id="player-volume" min="0" max="100" value="100">
+            <div id="player-mute"></div>
           </td>
           <td valign="center" width="22px">
             <a id="fullscreen"><img src="images/fullscreen.png" /></a>
@@ -66,7 +66,8 @@
         <td align='right'>
           <h2>Direct Link(s):</h2>
         </td>
-        <td align='left'>
+        <td class="direct-links" align='left'>
+
         </td>
       </tr>
     </table>
@@ -85,8 +86,9 @@
 
   <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="js/flowplayer/flowplayer-3.2.6.min.js"></script>
+  <script type="text/javascript" src="js/player.js"></script>
   <script type="text/javascript" src="js/parseLocationHref.js"></script>
-  <script type="text/javascript" src="js/config.js"></script>
+  <script type="text/javascript" src="https://stream.elevate.at/js/config.js"></script>
   <script>
     var Model = function(config, uri) {
       this.config = config;
@@ -98,6 +100,11 @@
         profile: 'medium',
         embed: false
       };
+      if (navigator.appName == 'Microsoft Internet Explorer' ||
+        !!(navigator.userAgent.match(/Trident/) ||
+        navigator.userAgent.match(/rv:11/))) {
+        defaultParameters.mode = 'flash';
+      }
 
       this.baseUrl = uri.scheme + '://' + uri.servername;
       this.path = uri.path.join('/');
@@ -136,6 +143,11 @@
       return Object.keys(this.config.muxes[source].formats);
     };
 
+    Model.prototype.hasVideo = function (source) {
+      source = source || this.parameters.src;
+      return this.config.muxes[source].hasOwnProperty('video');
+    };
+
     Model.prototype.getProfiles = function (source, mode) {
       source = source || this.parameters.src;
       mode = mode || this.parameters.mode;
@@ -165,18 +177,30 @@
     };
 
     Model.prototype.getStreamUrl = function (thing) {
-        var nocache = Date.now();
+        var url = this.config.streamBaseUrl + '/';
         switch(thing) {
           case 'webm':
-            return this.config.streamBaseUrl + '/' + this.parameters.src + '-webm-' +
-              this.parameters.profile + '.webm?nocache=' + nocache;
+             url += this.parameters.src + '-webm-' +
+              this.parameters.profile + '.webm';
+             break;
           case 'hls':
-            return this.config.streamBaseUrl + '/hls/' + this.parameters.src + '-' +
-              this.parameters.profile + '/index.m3u8?nocache=' + nocache;
+            url += 'hls/' + this.parameters.src + '-' +
+              this.parameters.profile + '/index.m3u8';
+            break;
           case 'flash':
-            return this.config.streamBaseUrl + '/' + this.parameters.src + '-flash-' +
-              this.parameters.profile + '.flv?nocache=' + nocache;
+            url += this.parameters.src + '-flash-' +
+              this.parameters.profile + '.flv';
+            break;
+          case 'ogg':
+            url += this.parameters.src  + '-ogg-' +
+              this.parameters.profile + '.ogg';
+            break;
+          case 'mp3':
+            url += this.parameters.src  + '-mp3-' +
+              this.parameters.profile + '.mp3';
+            break;
         }
+        return url + '?nocache=' + Date.now();
     };
 
     function setResolutions(res) {
@@ -190,13 +214,20 @@
     }
 
     function setHeaderMenu(type, currentItem, items, $element) {
+      var labels = {
+        'av-orig': 'video',
+        'audio-orig': 'audio-only',
+        'webm': 'html5'
+      };
+
       items.map(function(item) {
         var urlParameters = {};
         urlParameters[type] = item;
         if (type === 'src') {
             urlParameters.mode = null;
         }
-        var $span = $('<span><a href="' + model.getUrl(urlParameters) + '">' + item + '</a></span>');
+        var itemLabel = labels[item] || item;
+        var $span = $('<span><a href="' + model.getUrl(urlParameters) + '">' + itemLabel + '</a></span>');
         if (item === currentItem) {
           $span.addClass('selected');
         }
@@ -205,8 +236,19 @@
     }
 
     function setHtml5VideoSources(model) {
-      $('#video').append('<source src="' + model.getStreamUrl('webm') + '" type="video/webm" />');
-      $('#video').append('<source src="' + model.getStreamUrl('hls') + '" type="application/x-mpegURL" />');
+      $('#audio').hide();
+      $('.turm').hide();
+      $('#video').append('<source src="' + model.getStreamUrl('webm') + '" type="video/webm" />')
+        .append('<source src="' + model.getStreamUrl('hls') + '" type="application/x-mpegURL" />')
+        .show();
+    }
+
+    function setAudioSources(model) {
+      $('#video').hide();
+      $('#fullscreen').hide();
+      $('#audio').append('<source src="' + model.getStreamUrl('ogg') + '" type="audio/ogg" />')
+        .append('<source src="' + model.getStreamUrl('mp3') + '" type="audio/mpeg" />')
+        .show();
     }
 
     function initFlowplayer(model) {
@@ -229,13 +271,27 @@
     }
 
     function selectPlayer(model) {
-        if (model.parameters.mode === 'flash') {
-            $('#video-container-outer').hide();
-            initFlowplayer(model);
+      if (model.parameters.mode === 'flash') {
+        $('#video-container-outer').hide();
+        initFlowplayer(model);
+      } else {
+        $('#player').hide();
+        if (model.hasVideo()) {
+          setHtml5VideoSources(model);
         } else {
-            $('#player').hide();
-            setHtml5VideoSources(model);
+          setAudioSources(model);
         }
+        player_init(model.hasVideo());
+      }
+    }
+
+    function setDirectLinks(model) {
+      $('#footer .direct-links')
+        .append('<a href="' + model.getStreamUrl('webm') + '">' + model.getStreamUrl('webm') + '</a><br />')
+        .append('<a href="' + model.getStreamUrl('hls') + '">' + model.getStreamUrl('hls') + '</a><br />')
+        .append('<a href="' + model.getStreamUrl('flash') + '">' + model.getStreamUrl('flash') + '</a><br />')
+        .append('<a href="' + model.getStreamUrl('ogg') + '">' + model.getStreamUrl('ogg') + '</a><br />')
+        .append('<a href="' + model.getStreamUrl('mp3') + '">' + model.getStreamUrl('mp3') + '</a><br />');
     }
 
     var uri = parseLocationHref();
@@ -249,60 +305,9 @@
       setHeaderMenu('profile', model.parameters.profile, model.getProfiles(), $('#header .profiles'));
 
       selectPlayer(model);
-
+      setDirectLinks(model);
       // todo: hide controls, hide links, embed...
     });
-    
-    var video = document.getElementById('video');
-
-    function playStop() {
-      if (video.paused) {
-        video.load();
-        video.play();
-        $('#play-stop').html('<img src="images/pause.png" />');
-        $('#video-overlay').css("display", "none");
-      } else {
-        video.pause();
-        $('#play-stop').html('<img src="images/play.png" />');
-        $('#video-overlay').css("display", "block");
-      }
-    }
-
-    function mute() {
-      if (video.muted) {
-        video.muted = false;
-        $('#mute').html('<img src="images/unmuted.png" />');
-      } else {
-        video.muted = true;
-        $('#mute').html('<img src="images/muted.png" />');
-      }
-    }
-
-    function fullscreen() {
-      if (video.requestFullscreen) {
-        video.requestFullscreen();
-      } else if (video.msRequestFullscreen) {
-        video.msRequestFullscreen();
-      } else if (video.mozRequestFullScreen) {
-        video.mozRequestFullScreen();
-      } else if (video.webkitRequestFullscreen) {
-        video.webkitRequestFullscreen();
-      }
-    }
-
-    function updateVolume() {
-      video.volume = $('#volume').val();
-    }
-
-    $('#video').click(playStop);
-    $('#video-overlay').click(playStop);
-    $('#play-stop').click(playStop);
-    $('#mute').click(mute);
-    $('#fullscreen').click(fullscreen);
-    $('#volume').bind('input', updateVolume);
-    $('#bind').bind('play');
-
-    playStop();
   </script>
 </body>
 </html>
diff --git a/contrib/site/js/player.js b/contrib/site/js/player.js
new file mode 100644
index 0000000..619bf08
--- /dev/null
+++ b/contrib/site/js/player.js
@@ -0,0 +1,113 @@
+'use strict';
+
+function Player() {
+  this.init = function(video) {
+    if (video) {
+      this.$media = $('#video');
+    } else {
+      this.$media = $('#audio');
+    }
+    this.media = this.$media.get()[0];
+  };
+
+  this.play = function() {
+    $('#video-overlay').hide();
+    $('#player-state').css('background-position', '-25px -125px');
+    this.media.load();
+    this.media.play();
+  };
+
+  this.stop = function() {
+    $('#video-overlay').show();
+    $('#player-state').css('background-position', '0px -125px');
+    this.media.pause();
+  };
+
+  this.playstop = function() {
+    if(this.media.paused == true) {
+      this.play();
+    } else {
+      this.stop();
+    }
+  };
+
+  this.repaintVolumeControls = function() {
+    if(this.media.muted) {
+      $('#player-mute').css('background-position', '0px -150px');
+      return;
+    }
+
+    if(this.media.volume <= 0) {
+      $('#player-mute').css('background-position', '-25px -150px');
+      return;
+    }
+
+    if(this.media.volume < 0.5) {
+      $('#player-mute').css('background-position', '-50px -150px');
+      return;
+    }
+
+    $('#player-mute').css('background-position', '-75px -150px');
+  };
+
+  this.updatevolume = function() {
+    this.media.volume = $('#player-volume').val() / 100;
+    this.repaintVolumeControls();
+  };
+
+  this.togglemute = function() {
+    this.media.muted = !this.audio.muted;
+    $('#player-volume').prop('disabled', this.media.muted);
+    this.repaintVolumeControls();
+  };
+
+  this.fullscreen = function() {
+    if (this.media.requestFullscreen) {
+      this.media.requestFullscreen();
+    } else if (this.media.msRequestFullscreen) {
+      this.media.msRequestFullscreen();
+    } else if (this.media.mozRequestFullScreen) {
+      this.media.mozRequestFullScreen();
+    } else if (this.media.webkitRequestFullscreen) {
+      this.media.webkitRequestFullscreen();
+    }
+  };
+}
+
+var player = new Player();
+
+function player_init(video) {
+  player.init(video);
+  $('#player-playstop').on('click', player_playstop);
+  $('#player-state').on('click', player_playstop);
+  player.playstop();
+  if(navigator.userAgent.match(/(\(iPod|\(iPhone|\(iPad)/)) {
+    $('#player-volume').prop('disabled', true);
+    this.repaintVolumeControls();
+  } else {
+    $('#player-volume').on('change input', player_updatevolume);
+    $('#player-mute').on('click', player_togglemute);
+  }
+  $('#fullscreen').on('click', function(event) {
+    event.preventDefault();
+    player.fullscreen();
+  });
+
+  $(document).on('keypress', function(e) {
+    if(e.which == 32) {
+      player.playstop();
+    }
+  });
+}
+
+function player_playstop() {
+  player.playstop();
+}
+
+function player_updatevolume() {
+  player.updatevolume();
+}
+
+function player_togglemute() {
+  player.togglemute();
+}
diff --git a/contrib/site/style.css b/contrib/site/style.css
index f09f5c5..dc65fc7 100644
--- a/contrib/site/style.css
+++ b/contrib/site/style.css
@@ -54,6 +54,7 @@ td span a {
   font-size: 0.8em;
   text-decoration: none;
   padding: 0 0.2em;
+  white-space: nowrap;
 }
 
 td span a:hover {
@@ -64,20 +65,13 @@ td span.selected {
   font-weight: bold;
 }
 
-#video-overlay-inner {
-   background-image: url('images/play-big.png');
-   background-repeat: no-repeat;
-   background-position: center;
-   width: 100%;
-   height: 100%;
-}
-
-video {
-   background-image: url('images/elevate-turm.png');
-   background-repeat: no-repeat;
-   background-position: center;
-   width: 100%;
-   height: 100%;
+video, .turm {
+  background-color: #FFE924;
+  background-image: url('images/elevate-turm.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 100%;
+  height: 100%;
 }
 
 div#controls {
@@ -111,3 +105,188 @@ table#logos {
   background-color: rgba(51,51,51,0.4);
 }
 */
+
+
+
+
+
+
+/*
+helsinki player styles
+*/
+#player-box {
+    margin-bottom: 1.3em;
+}
+
+#player {
+    margin-bottom: 1em;
+}
+
+#player a {
+    color: black;
+}
+
+#player-playstop {
+    margin-bottom: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 176px;
+    height: 176px;
+}
+
+#player-playstop-overlay {
+    width: 176px;
+    height: 176px;
+    background-color: rgba(255,255,255,0.5);
+    position: absolute;
+    display: block;
+}
+
+#video-overlay-inner {
+    width: 125px;
+    height: 125px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+    background-image: url('images/controls.png');
+    background-repeat: no-repeat;
+    background-position: 0 0; /* play button big */
+}
+
+#player-ctrl {
+    margin-top: 0.3em;
+    width: 260px;
+    height: 32px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #434343;
+    padding: 10px;
+}
+
+#player-state {
+    position: relative;
+    top: 3px;
+    float: left;
+    width: 25px;
+    height: 25px;
+    background-image: url('images/controls.png');
+    background-repeat: no-repeat;
+    background-position: 0px -125px; /* play button */
+}
+
+#player-volume {
+    position: relative;
+    top: 2px;
+    right: -16px;
+    width: 150px;
+    background: transparent;
+    /*fix for FF unable to apply focus style bug */
+    /*    border: 1px solid #434343; */
+    border: none;
+    -webkit-appearance: none;
+    -webkit-box-shadow: none!important;
+    -moz-box-shadow: none!important;
+    box-shadow: none!important;
+}
+#player-volume:focus {
+    outline: none;
+    -webkit-box-shadow: none!important;
+    -moz-box-shadow: none!important;
+    box-shadow: none!important;
+}
+/* webkit based browser */
+#player-volume::-webkit-slider-runnable-track {
+    width: 150px;
+    height: 5px;
+    background: #888;
+    border: 0;
+    border-radius: 3px;
+}
+#player-volume:disabled::-webkit-slider-runnable-track {
+    background: #545454;
+}
+#player-volume::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: white;
+    margin-top: -5px;
+}
+#player-volume:disabled::-webkit-slider-thumb {
+    background: #656565;
+}
+/* mozilla firefox */
+#player-volume::-moz-range-track {
+    width: 150px;
+    height: 5px;
+    background: #888;
+    border: 0;
+    border-radius: 3px;
+}
+#player-volume:disabled::-moz-range-track {
+    background: #545454;
+}
+#player-volume::-moz-range-thumb {
+    border: 0;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: white;
+}
+#player-volume:disabled::-moz-range-thumb {
+    background: #656565;
+}
+#player-volume::-moz-focus-outer {
+    border: 0;
+}
+/* microsoft browser */
+#player-volume::-ms-track {
+    width: 150px;
+    height: 5px;
+    background: transparent;
+    border-color: transparent;
+    border-width: 6px 0;
+    color: transparent;
+}
+#player-volume::-ms-fill-lower {
+    background: #888;
+    border-radius: 10px;
+}
+#player-volume:disabled::-ms-fill-lower {
+    background: #545454;
+}
+#player-volume::-ms-fill-upper {
+    background: #888;
+    border-radius: 10px;
+}
+#player-volume:disabled::-ms-fill-upper {
+    background: #545454;
+}
+#player-volume::-ms-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: white;
+}
+#player-volume:disabled::-ms-thumb {
+    background: #656565;
+}
+#player-volume::-ms-tooltip {
+    display: none;
+}
+
+#player-mute {
+    position: relative;
+    top: 3px;
+    float: right;
+    width: 25px;
+    height: 25px;
+    background-image: url('images/controls.png');
+    background-repeat: no-repeat;
+    background-position: -75px -150px; /* volume high */
+}