aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/app/javascripts/index.js
diff options
context:
space:
mode:
Diffstat (limited to 'client/app/javascripts/index.js')
-rw-r--r--client/app/javascripts/index.js245
1 files changed, 245 insertions, 0 deletions
diff --git a/client/app/javascripts/index.js b/client/app/javascripts/index.js
new file mode 100644
index 000000000..4910e4540
--- /dev/null
+++ b/client/app/javascripts/index.js
@@ -0,0 +1,245 @@
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})()