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