aboutsummaryrefslogtreecommitdiffhomepage
path: root/public/javascripts/index.js
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2015-06-09 17:41:40 +0200
committerChocobozzz <florian.bigard@gmail.com>2015-10-29 23:14:54 +0100
commit8c308c2bf7f658945d80be9d5880361238635f5b (patch)
tree2130ae60af58e59dab3df07a5d5cdd5174f91ae8 /public/javascripts/index.js
parent8cb4b4e00ee57eb98dfe1455b6d2de36fc561797 (diff)
downloadPeerTube-8c308c2bf7f658945d80be9d5880361238635f5b.tar.gz
PeerTube-8c308c2bf7f658945d80be9d5880361238635f5b.tar.zst
PeerTube-8c308c2bf7f658945d80be9d5880361238635f5b.zip
Spawn
Diffstat (limited to 'public/javascripts/index.js')
-rw-r--r--public/javascripts/index.js221
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})()