diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2015-06-09 17:41:40 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2015-10-29 23:14:54 +0100 |
commit | 8c308c2bf7f658945d80be9d5880361238635f5b (patch) | |
tree | 2130ae60af58e59dab3df07a5d5cdd5174f91ae8 /public/javascripts/index.js | |
parent | 8cb4b4e00ee57eb98dfe1455b6d2de36fc561797 (diff) | |
download | PeerTube-8c308c2bf7f658945d80be9d5880361238635f5b.tar.gz PeerTube-8c308c2bf7f658945d80be9d5880361238635f5b.tar.zst PeerTube-8c308c2bf7f658945d80be9d5880361238635f5b.zip |
Spawn
Diffstat (limited to 'public/javascripts/index.js')
-rw-r--r-- | public/javascripts/index.js | 221 |
1 files changed, 221 insertions, 0 deletions
diff --git a/public/javascripts/index.js b/public/javascripts/index.js new file mode 100644 index 000000000..95caf7eb4 --- /dev/null +++ b/public/javascripts/index.js | |||
@@ -0,0 +1,221 @@ | |||
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({ | ||
41 | url: '/api/videos/search/' + search, | ||
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({ | ||
54 | url: '/api/pods/makefriends', | ||
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, | ||
143 | url: '/api/videos', | ||
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({ | ||
173 | url: '/api/videos/', | ||
174 | dataType: 'json', | ||
175 | type: 'GET', | ||
176 | success: function (videos) { | ||
177 | printVideos(videos) | ||
178 | } | ||
179 | }) | ||
180 | } | ||
181 | |||
182 | function removeVideo (video) { | ||
183 | $.ajax({ | ||
184 | url: '/api/videos/' + video._id, | ||
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 | })() | ||