From 5f218e8f8186e388d853a73d6135ec15b1812b2a Mon Sep 17 00:00:00 2001
From: PeterTheOne <petertheone@gmail.com>
Date: Tue, 27 Feb 2018 22:24:56 +0100
Subject: add audio, useragent check, direct links, interface stuff

---
 contrib/site/index.html | 157 +++++++++++++++++++++++++-----------------------
 1 file changed, 81 insertions(+), 76 deletions(-)

(limited to 'contrib/site/index.html')

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>
-- 
cgit v1.2.3