From 6ef3cebdc54948da0da116ef6ba2de960c99e09c Mon Sep 17 00:00:00 2001
From: Jordi Cenzano <jcenzano@brightcove.com>
Date: Thu, 15 Sep 2016 20:06:59 +0100
Subject: [PATCH] Added permalink

---
 bc-player-hls.html | 74 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 58 insertions(+), 16 deletions(-)
diff --git a/bc-player-hls.html b/bc-player-hls.html
index d6b5b1d..b3b7833 100644
--- a/bc-player-hls.html
+++ b/bc-player-hls.html
@@ -19,7 +19,7 @@
 
 </head>
 
-<body>
+<body onload="onLoadPage()">
 
   <div class="container">
     <div class="header clearfix">
@@ -33,14 +33,15 @@ <h3 class="text-muted">Phil's Players</h3>
     </div>
 
     <div class="jumbotron">
-      <form id="playform">
-        <div class="form-group">
-          <label for="manifest">HLS Manifest:</label>
-          <input type="text" class="form-control" id="manifest" name="manifest">
-        </div>
-        <button type="submit" class="btn btn-primary btn-lg">Play!</button><br><br>
-        <button type="button" id="demo" class="btn btn-info btn-sm">Load Demo Manifest (from videoJS)</button>
-      </form>
+      <div class="form-group">
+        <label for="manifest">HLS Manifest:</label>
+        <input type="text" class="form-control" id="manifest" name="manifest">
+      </div>
+      <button class="btn btn-primary btn-lg" onclick="play()">Play!</button><br><br>
+      <button id="demo" class="btn btn-info btn-sm" onclick="setDemo()">Load Demo Manifest (from videoJS)</button><br><br>
+      <label for="permanentlink">Permalink:</label>
+      <pre class="form-control" id="permanentlink" name="permanentlink"></pre>
+      <button id="copylink" class="btn btn-default btn-sm" onclick="copyPermalinkToClipboard()">Copy link to clipboard</button>
     </div>
 
     <div class="jumbotron">
@@ -54,21 +55,62 @@ <h3 class="text-muted">Phil's Players</h3>
 
     <script>
     var player = videojs('example');
-    $( "#playform" ).submit(function( event ) {
 
+    function onLoadPage(){
+      var url_vars = getUrlVars();
+
+      if ( (typeof (url_vars.m) != 'undefined') &&  (url_vars.m != "") ) {
+        var manifest = url_vars.m;
+        console.log("Detected manifest: " + manifest);
+        playManifest(manifest);
+        updateManifest(manifest);
+        updatePermalink(manifest);
+      }
+    }
+
+    function getUrlVars() {
+      var vars = {};
+      window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
+        vars[key] = value;
+      });
+
+      return vars;
+    }
+
+    function play() {
+      var m = document.getElementById('manifest').value;
+
+      playManifest(m);
+      updatePermalink(m);
+    }
+
+    function updateManifest(m) {
+      document.getElementById('manifest').value = m;
+    }
+
+    function updatePermalink(m) {
+      var clean_url = location.protocol + '//' + location.host + location.pathname;
+      document.getElementById('permanentlink').innerHTML = clean_url + "?m=" + m;
+    }
+
+    function setDemo() {
+      updateManifest("http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8");
+    }
+
+    function playManifest(manifest){
       player.src({
-        src: $( "#manifest" ).val(),
+        src: manifest,
         type: 'application/vnd.apple.mpegurl'
       });
 
       player.play();
       event.preventDefault();
-    });
+    }
 
-    $( "#demo" ).click(function() {
-      $( "#manifest" ).val("http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8");
-      $( "#playform" ).submit();
-    });
+    function copyPermalinkToClipboard() {
+      var link = document.getElementById('permanentlink').innerHTML;
+      window.prompt("Copy to clipboard: Ctrl+C, Enter", link);
+    }
     </script>
 
     <footer class="footer">
