-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathremote.html
78 lines (71 loc) · 2.38 KB
/
remote.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var socket = io.connect("http://localhost:8080");
var yDataApi = "http://gdata.youtube.com/feeds/api/videos";
var screenID = null;
$("#search").hide();
$("#set-screen").submit(function(){
var id = $("#screen_id").val();
socket.emit("screen_connect", {"screen_id": id}, function(result){
if(result) {
screenID = id;
$("#screen-connect").hide();
$("#search").show();
} else {
alert("Screen unavailable");
}
});
return false;
});
$("#youtube-search").submit(function(){
var query = $("#query").val();
$.getJSON(yDataApi + '?q=' + query + '&alt=json-in-script&callback=?', function(data) {
$('#playlist').empty();
$.each(data.feed.entry, function(i, item) {
var title = item['title']['$t'];
var video = item['id']['$t'];
video = video.replace('http://gdata.youtube.com/feeds/api/videos/','http://www.youtube.com/watch?v=');
videoID = video.replace('http://www.youtube.com/watch?v=',''); // removing link and getting the video ID
$('#playlist').append('<a class="links" href="'+videoID+'">'+title+'-'+videoID+'</a></br>');
});
});
return false;
});
var emitMsg = function(id, action, title){
var msg = {'screen_id': screenID, 'action': action, 'value': id}
if(title !== undefined){
msg.title = title;
}
socket.emit("msg", msg);
};
$(document).on("click", "a", function(e){
e.preventDefault();
var id = $(this).attr("href");
emitMsg(id, "play");
return false;
});
});
</script>
</head>
<body>
<div id="screen-connect">
<form id="set-screen">
<label>Set Screen ID</label>
<input type="text" name="screen_id" id="screen_id"/>
<input type="submit" value="Connect"/>
</form>
</div>
<div id="search">
<form id="youtube-search">
<label>Search Videos</label>
<input type="text" name="query" id="query"/>
<input type="submit" value="Search">
</form>
</div>
<div id="playlist"></div>
</body>
</html>