remote playback: add openURL feature

Apple-TV/web/index.html

@@ -23,6 +23,7 @@
             </div>
         </div>
         <div class="main">
+            <div class="display-message"></div>
             <div class="uploads">
                 <ul></ul>
             </div>
@@ -30,6 +31,14 @@
                 <h1>%%WEBINTF_DROPFILES%%</h1>
                 <p>%%WEBINTF_DROPFILES_LONG%%</p>
             </div>
+            <form class="open-url">
+                <div>
+                    <input type="text" placeholder="%%WEBINTF_OPEN_URL%%">
+                    <button type="submit" class="submit-button">
+                        +
+                    </button>
+                </div>
+            </form>
             
             <div class="player-control">
                 <div class="title"></div>

Resources/web/playerControl.css

 .player-control {
+    min-width: 640px;
     position: relative;
     margin: auto;
     width: 65%;
@@ -9,7 +10,6 @@
     -moz-box-sizing: border-box;
     font-family: Arial, sans-serif;
     padding: 0;
-    bottom: 20px;
     z-index: 2;
     opacity: 1;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@@ -311,3 +311,78 @@
     margin: -20px 10px 4px 11px;
     top: 50%
 }
+
+.open-url {
+    min-width: 320px;
+    width: 40%;
+    margin: 20px auto 20px auto;
+}
+
+.open-url > div {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.open-url input {
+    color: #fff;
+    display: inline-block;
+    border-radius: 3px 0 0 3px;
+    font-size: 16px;
+    padding: 16px 0 16px 16px;
+    width: 90%;
+    vertical-align: middle;
+    border: none;
+}
+
+.open-url input, .open-url .submit-button {
+    background-color: #2a2a2a;
+    height: 38px;
+}
+
+.open-url input:focus {
+    outline:0;
+}
+
+.open-url .submit-button {
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 0 3px 3px 0;
+    cursor: pointer;
+    margin-left: -4px;
+    width: 10%;
+    font-size: 32px;
+    line-height: 32px;
+    color: rgba(255, 132, 0, 1);
+    text-align: center;
+    border: none;
+    outline: none;
+    font-weight: lighter;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.open-url .submit-button:hover {
+    color: rgba(255, 132, 0, 0.5);
+}
+
+.display-message {
+    opacity: 0;
+    position: fixed;
+    background: #2a2a2a;
+    padding: 16px;
+    bottom: 70px;
+    left: 24px;
+    text-align: center;
+    border-radius: 3px;
+    box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
+    transition: opacity 200ms,-webkit-transform 300ms cubic-bezier(0.165,0.840,0.440,1.000);
+    white-space: nowrap;
+    -webkit-transform: translateY(40px);
+    transform: translateY(40px);
+    color: #fff;
+}
+
+.display-message.show {
+    opacity: 1;
+}

Resources/web/playerControl.js

@@ -544,6 +544,14 @@ $(function() {
         this.play();
     }
 
+    PlayerControl.prototype.openURL = function(options) {
+        options = options || {};
+        this.socket.sendMessage({
+            type: 'openURL',
+            url: options.url
+        });
+    };
+
     /**
      * Instanciation of the Ws class
      */
@@ -600,4 +608,51 @@ $(function() {
         TYPE_MAP[type](message);
     });
 
+    $('form.open-url').on('submit', function(e) {
+        e.preventDefault();
+        var url = $(this).find('input').val();
+        if (!url) {
+            return displayMessage('URL cannot be empty.');
+        } else if (!isURL(url)) {
+            return displayMessage('Not a valid URL.');
+        }
+        displayMessage('URL sended successfully.');
+        playerControl.openURL({
+            url: url
+        });
+        //clear the form
+        $(this).find('input').val('');
+    });
+
+    /**
+     * Check if a given string is a URL
+     * Regex from https://gist.github.com/searls/1033143
+     * @param {string} str
+     * @returns {boolean}
+     */
+    function isURL(str) {
+        var p = /\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/i;
+        return p.test(str);
+    }
+    //Display message to the user
+    var TIMEOUT = null;
+    var DELAY = 5000;
+    function displayMessage(message) {
+        $('.display-message').addClass('show');
+        $('.display-message').text(message);
+        if (TIMEOUT) {
+            clearTimeout(TIMEOUT);
+        }
+        TIMEOUT = setTimeout(function() {
+            clearMessage();
+        }, DELAY);
+    }
+
+    function clearMessage() {
+        if (TIMEOUT) {
+            clearTimeout(TIMEOUT);
+        }
+        $('.display-message').removeClass('show');
+    }
+
 });

Resources/web/style.css

@@ -166,7 +166,7 @@ div.main.drop {
 }
 
 .messageUpload {
-  margin: 100px 0px;
+  margin: 80px 0px;
 }
 .messageUpload h1 {
   font-size: 30px;
@@ -544,4 +544,3 @@ div.main.drop {
 #footer a{
   color: rgb(255, 132, 0);
 }
-