]>
Commit | Line | Data |
---|---|---|
8c308c2b C |
1 | ;(function () { |
2 | 'use strict' | |
3 | ||
4 | var $ = require('jquery') | |
5 | require('blueimp-file-upload') | |
6 | ||
7 | var WebTorrent = require('webtorrent') | |
8 | var client = new WebTorrent({ dht: false }) | |
9 | ||
10 | var $content = $('#ajax_load') | |
11 | ||
12 | // Webtorrent events | |
13 | client.on('error', function (err) { | |
14 | console.error(err) | |
15 | }) | |
16 | ||
17 | client.on('warning', function (err) { | |
18 | console.warning(err) | |
19 | }) | |
20 | ||
21 | // Events of the panel | |
22 | $('#panel_get_videos').on('click', function () { | |
23 | getVideos() | |
24 | }) | |
25 | ||
26 | $('#panel_upload_video').on('click', function () { | |
27 | uploadVideo() | |
28 | }) | |
29 | ||
30 | $('#panel_make_friends').on('click', function () { | |
31 | makeFriends() | |
32 | }) | |
33 | ||
45239549 C |
34 | $('#panel_quit_friends').on('click', function () { |
35 | quitFriends() | |
36 | }) | |
37 | ||
0ac5edd9 | 38 | $('#search-video').on('keyup', function (e) { |
8c308c2b C |
39 | var search = $(this).val() |
40 | ||
41 | if (search === '') return | |
42 | ||
43 | if (e.keyCode === 13) { | |
44 | $.ajax({ | |
f5a60a51 | 45 | url: '/api/v1/videos/search/' + search, |
8c308c2b C |
46 | type: 'GET', |
47 | dataType: 'json', | |
48 | success: function (videos) { | |
49 | printVideos(videos) | |
50 | } | |
51 | }) | |
52 | } | |
53 | }) | |
54 | ||
55 | // Join a new network | |
56 | function makeFriends () { | |
57 | $.ajax({ | |
f5a60a51 | 58 | url: '/api/v1/pods/makefriends', |
8c308c2b C |
59 | type: 'GET', |
60 | dataType: 'json', | |
d7c01e77 C |
61 | statusCode: { |
62 | 409: function () { | |
63 | alert('Already made friends.') | |
64 | } | |
65 | }, | |
8c308c2b C |
66 | success: function () { |
67 | alert('Made friends!') | |
68 | } | |
69 | }) | |
70 | } | |
71 | ||
45239549 C |
72 | function quitFriends () { |
73 | $.ajax({ | |
74 | url: '/api/v1/pods/quitfriends', | |
75 | type: 'GET', | |
76 | dataType: 'json', | |
77 | success: function () { | |
78 | alert('Quit friends!') | |
79 | } | |
80 | }) | |
81 | } | |
82 | ||
8c308c2b C |
83 | function printVideos (videos) { |
84 | $content.empty() | |
85 | ||
86 | if (videos.length === 0) { | |
87 | $content.text('There is no videos.') | |
88 | } | |
89 | ||
90 | videos.forEach(function (video) { | |
91 | var $video = $('<div></div>').addClass('video') | |
92 | ||
93 | var $video_name = $('<span></span>').addClass('video_name').text(video.name) | |
94 | var $video_pod = $('<span></span>').addClass('video_pod_url').text(video.podUrl) | |
45239549 C |
95 | var $header = $('<div></div>').append([ $video_name, $video_pod ]) |
96 | ||
97 | if (video.namePath !== null) { | |
98 | var $remove = $('<span></span>').addClass('span_action glyphicon glyphicon-remove') | |
99 | ||
100 | // Remove the video | |
101 | $remove.on('click', function () { | |
45239549 C |
102 | if (!confirm('Are you sure ?')) return |
103 | ||
104 | removeVideo(video) | |
105 | }) | |
106 | ||
107 | $header.append($remove) | |
108 | } | |
8c308c2b C |
109 | |
110 | var $video_description = $('<div></div>').addClass('video_description').text(video.description) | |
111 | ||
112 | // Get the video | |
113 | $video_name.on('click', function () { | |
114 | getVideo(video) | |
115 | }) | |
116 | ||
8c308c2b C |
117 | if (!video.magnetUri) { |
118 | $remove.css('display', 'none') | |
119 | } | |
120 | ||
121 | $video.append([ $header, $video_description ]) | |
122 | $content.append($video) | |
123 | }) | |
124 | } | |
125 | ||
126 | // Upload the video, the server will seed it | |
127 | function uploadVideo () { | |
128 | // Creating all the elements | |
129 | var $video_label = $('<label></label>').attr('for', 'name').text('Video name') | |
130 | var $video_name = $('<input></input>').addClass('form-control').attr({ | |
131 | name: 'name', | |
132 | id: 'name' | |
133 | }) | |
134 | var $video_block = $('<div></div>').addClass('form-group').append([ $video_label, $video_name ]) | |
135 | ||
136 | var $title = $('<h3></h3>').text('Upload a video') | |
137 | ||
138 | var $button_text = $('<span></span>').text('Select the video...') | |
139 | var $input_video = $('<input></input>').attr({ | |
140 | type: 'file', | |
141 | name: 'input_video', | |
142 | id: 'input_video' | |
143 | }) | |
144 | var $button = $('<div></div>').addClass('btn btn-default btn-file').append([ $button_text, $input_video ]) | |
145 | ||
146 | var $description_label = $('<label></label>').attr('for', 'description').text('Description') | |
147 | var $description_text = $('<textarea></textarea>').addClass('form-control').attr({ | |
148 | name: 'description', | |
149 | id: 'description', | |
150 | placeholder: 'Description...' | |
151 | }) | |
152 | var $description = $('<div></div>').addClass('form-group').append([ $description_label, $description_text ]) | |
153 | ||
154 | var $bar = $('<progress></progress').attr('value', '0').css('display', 'none') | |
155 | var $progress_bar = $('<div><div>').attr('id', 'progress').append($bar) | |
156 | ||
157 | var $input_submit = $('<input></input>').addClass('btn btn-default').attr({ | |
158 | type: 'button', | |
159 | value: 'Upload' | |
160 | }) | |
161 | ||
162 | // JQuery plugin | |
163 | var $form_video = $('<form></form>').append([ $video_block, $button, $progress_bar, $description, $input_submit ]) | |
164 | $form_video.fileupload({ | |
165 | singleFileUploads: true, | |
166 | multipart: true, | |
f5a60a51 | 167 | url: '/api/v1/videos', |
8c308c2b C |
168 | autoupload: false, |
169 | add: function (e, data) { | |
170 | var $text = $('<span></span>').addClass('name_file').text(data['files'][0]['name']) | |
171 | $text.insertAfter($button) | |
172 | $input_submit.off('click').on('click', function () { | |
173 | $bar.css('display', 'block') | |
174 | data.formData = $form_video.serializeArray() | |
175 | data.submit() | |
176 | }) | |
177 | }, | |
178 | progressall: function (e, data) { | |
179 | $bar.attr({ | |
180 | value: data.loaded, | |
181 | max: data.total | |
182 | }) | |
183 | }, | |
184 | done: function (e, data) { | |
185 | // Print all the videos once it's finished | |
186 | getVideos() | |
187 | } | |
188 | }) | |
189 | ||
190 | $content.empty() | |
191 | $content.append([ $title, $form_video ]) | |
192 | } | |
193 | ||
194 | // Print the list of all the videos | |
195 | function getVideos () { | |
196 | $.ajax({ | |
f5a60a51 | 197 | url: '/api/v1/videos/', |
8c308c2b C |
198 | dataType: 'json', |
199 | type: 'GET', | |
200 | success: function (videos) { | |
201 | printVideos(videos) | |
202 | } | |
203 | }) | |
204 | } | |
205 | ||
206 | function removeVideo (video) { | |
207 | $.ajax({ | |
f5a60a51 | 208 | url: '/api/v1/videos/' + video._id, |
8c308c2b C |
209 | type: 'DELETE', |
210 | success: function (response, status) { | |
211 | getVideos() | |
212 | } | |
213 | }) | |
214 | } | |
215 | ||
216 | // Get the video: add the torrent file and stream it into a video tag | |
217 | function getVideo (video) { | |
218 | var $waiting = $('<img></img>').addClass('center-block loading').attr('src', '/images/loading.gif') | |
219 | $content.empty() | |
220 | $content.append($waiting) | |
221 | ||
222 | console.log('Getting ' + video) | |
223 | client.add(video.magnetUri, function (torrent) { | |
224 | var $embed = $('<div></div>').addClass('embed-responsive embed-responsive-16by9') | |
225 | ||
226 | $content.empty() | |
227 | $content.append($embed) | |
228 | ||
229 | // Got torrent metadata! | |
230 | console.log('Torrent info hash:', torrent.infoHash) | |
231 | ||
232 | // Let's say the first file is a webm (vp8) or mp4 (h264) video... | |
233 | var file = torrent.files[0] | |
234 | ||
235 | file.appendTo($embed.get(0), function (err) { | |
236 | if (err) { | |
237 | alert('Cannot append the file.') | |
4884d603 | 238 | console.error(err) |
8c308c2b C |
239 | } |
240 | }) | |
241 | }) | |
242 | } | |
243 | ||
244 | getVideos() | |
245 | })() |