diff options
Diffstat (limited to 'client/app/javascripts/index.js')
-rw-r--r-- | client/app/javascripts/index.js | 245 |
1 files changed, 0 insertions, 245 deletions
diff --git a/client/app/javascripts/index.js b/client/app/javascripts/index.js deleted file mode 100644 index 4910e4540..000000000 --- a/client/app/javascripts/index.js +++ /dev/null | |||
@@ -1,245 +0,0 @@ | |||
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 | |||
34 | $('#panel_quit_friends').on('click', function () { | ||
35 | quitFriends() | ||
36 | }) | ||
37 | |||
38 | $('#search-video').on('keyup', function (e) { | ||
39 | var search = $(this).val() | ||
40 | |||
41 | if (search === '') return | ||
42 | |||
43 | if (e.keyCode === 13) { | ||
44 | $.ajax({ | ||
45 | url: '/api/v1/videos/search/' + search, | ||
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({ | ||
58 | url: '/api/v1/pods/makefriends', | ||
59 | type: 'GET', | ||
60 | dataType: 'json', | ||
61 | statusCode: { | ||
62 | 409: function () { | ||
63 | alert('Already made friends.') | ||
64 | } | ||
65 | }, | ||
66 | success: function () { | ||
67 | alert('Made friends!') | ||
68 | } | ||
69 | }) | ||
70 | } | ||
71 | |||
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 | |||
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) | ||
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 () { | ||
102 | if (!confirm('Are you sure ?')) return | ||
103 | |||
104 | removeVideo(video) | ||
105 | }) | ||
106 | |||
107 | $header.append($remove) | ||
108 | } | ||
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 | |||
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, | ||
167 | url: '/api/v1/videos', | ||
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({ | ||
197 | url: '/api/v1/videos/', | ||
198 | dataType: 'json', | ||
199 | type: 'GET', | ||
200 | success: function (videos) { | ||
201 | printVideos(videos) | ||
202 | } | ||
203 | }) | ||
204 | } | ||
205 | |||
206 | function removeVideo (video) { | ||
207 | $.ajax({ | ||
208 | url: '/api/v1/videos/' + video._id, | ||
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.') | ||
238 | console.error(err) | ||
239 | } | ||
240 | }) | ||
241 | }) | ||
242 | } | ||
243 | |||
244 | getVideos() | ||
245 | })() | ||