Commit 40d92458 authored by David Loiret's avatar David Loiret
Browse files

remote playback: add openURL feature

parent aeff6f6c
......@@ -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>
......
.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;
}
......@@ -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');
}
});
......@@ -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);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment