1 |
1 import Mustache from "mustache"; |
2 IriSP.Widgets.Markers = function(player, config) { |
2 import jQuery from "jquery"; |
3 IriSP.Widgets.Widget.call(this, player, config); |
3 |
4 }; |
4 import markersStyles from "./Markers.module.css"; |
5 |
5 |
6 IriSP.Widgets.Markers.prototype = new IriSP.Widgets.Widget(); |
6 const Markers = function (ns) { |
7 |
7 return class extends ns.Widgets.Widget { |
8 IriSP.Widgets.Markers.prototype.defaults = { |
8 constructor(player, config) { |
9 pre_draw_callback: function(){ |
9 super(player, config); |
|
10 } |
|
11 |
|
12 static defaults = { |
|
13 pre_draw_callback: function () { |
10 return this.importUsers(); |
14 return this.importUsers(); |
11 }, |
15 }, |
12 annotation_type: "markers", |
16 annotation_type: "markers", |
13 line_height: 8, |
17 line_height: 8, |
14 background: "#e0e0e0", |
18 background: "#e0e0e0", |
15 marker_color: "#ff80fc", |
19 marker_color: "#ff80fc", |
16 placeholder_color: "#ffffff", |
20 placeholder_color: "#ffffff", |
17 hover_color: "#e15581", |
21 hover_color: "#e15581", |
18 selected_color: "#74d600", |
22 selected_color: "#74d600", |
19 ball_radius: 4, |
23 ball_radius: 4, |
20 pause_on_write: true, |
24 pause_on_write: true, |
21 play_on_submit: true, |
25 play_on_submit: true, |
22 api_serializer: "ldt_annotate", |
26 api_serializer: "ldt_annotate", |
23 api_endpoint_template_create: "", |
27 api_endpoint_template_create: "", |
24 api_endpoint_template_edit: "", |
28 api_endpoint_template_edit: "", |
25 api_endpoint_template_delete: "", |
29 api_endpoint_template_delete: "", |
26 api_method_create: "POST", |
30 api_method_create: "POST", |
27 api_method_edit: "PUT", |
31 api_method_edit: "PUT", |
28 api_method_delete: "DELETE", |
32 api_method_delete: "DELETE", |
29 project_id: "", |
33 project_id: "", |
30 creator_name: "", |
34 creator_name: "", |
31 after_send_timeout: 0, |
35 after_send_timeout: 0, |
32 markers_gap: 2000, |
36 markers_gap: 2000, |
33 allow_empty_markers: false, |
37 allow_empty_markers: false, |
34 close_after_send: false, |
38 close_after_send: false, |
35 custom_send_button: false, |
39 custom_send_button: false, |
36 custom_cancel_button: false, |
40 custom_cancel_button: false, |
37 preview_mode: false, |
41 preview_mode: false, |
38 filter_per_user: false, |
42 filter_per_user: false, |
39 api_users_endpoint: "", |
43 api_users_endpoint: "", |
40 make_username_string_function: function(params){ |
44 make_username_string_function: function (params) { |
41 return params.username ? params.username : "Anonymous"; |
45 return params.username ? params.username : "Anonymous"; |
42 }, |
46 }, |
43 hide_if_empty: false, |
47 hide_if_empty: false, |
44 }; |
48 }; |
45 |
49 |
46 IriSP.Widgets.Markers.prototype.template = |
50 static template = |
47 '<div class="Ldt-Markers-Display" style="height:{{line_height}}px;">' |
51 '<div class="Ldt-Markers-Display" style="height:{{line_height}}px;">' + |
48 + '<div class="Ldt-Markers-List" style="height:{{line_height}}px; position: relative;"></div>' |
52 '<div class="Ldt-Markers-List" style="height:{{line_height}}px; position: relative;"></div>' + |
49 + '<div class="Ldt-Markers-Position" style="height: {{line_height}}px; top: -{{line_height}};"></div>' |
53 '<div class="Ldt-Markers-Position" style="height: {{line_height}}px; top: -{{line_height}};"></div>' + |
50 + '</div>' |
54 "</div>" + |
51 + '<div class="Ldt-Markers-Inputs">' |
55 '<div class="Ldt-Markers-Inputs">' + |
52 + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">' |
56 '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">' + |
53 + '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{#preview_mode}}{{l10n.preview_mode_submit}}{{/preview_mode}}{{^preview_mode}}{{l10n.cannot_create}}{{/preview_mode}}">+</div>' |
57 '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{#preview_mode}}{{l10n.preview_mode_submit}}{{/preview_mode}}{{^preview_mode}}{{l10n.cannot_create}}{{/preview_mode}}">+</div>' + |
54 + '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>' |
58 '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>' + |
55 + '{{^preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">✖</div>{{/preview_mode}}' |
59 '{{^preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">✖</div>{{/preview_mode}}' + |
56 + '{{#preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-PreviewDelete" title="{{l10n.preview_mode_delete}}">✖</div>{{/preview_mode}}' |
60 '{{#preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-PreviewDelete" title="{{l10n.preview_mode_delete}}">✖</div>{{/preview_mode}}' + |
57 + '{{#filter_per_user}}{{#preview_mode}}<select class="Ldt-Markers-userFilter-dropdown" id="Ldt-Markers-userFilter"></select>{{/preview_mode}}{{/filter_per_user}}' |
61 '{{#filter_per_user}}{{#preview_mode}}<select class="Ldt-Markers-userFilter-dropdown" id="Ldt-Markers-userFilter"></select>{{/preview_mode}}{{/filter_per_user}}' + |
58 + '<div class="Ldt-Markers-Info"></div>' |
62 '<div class="Ldt-Markers-Info"></div>' + |
59 + '</div>' |
63 "</div>" + |
60 + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">' |
64 '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">' + |
61 + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.wait_while_processing}}</div>' |
65 '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.wait_while_processing}}</div>' + |
62 + '</div>' |
66 "</div>" + |
63 + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSuccess">' |
67 '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSuccess">' + |
64 + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' |
68 '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' + |
65 + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.annotation_saved}}</div>' |
69 '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.annotation_saved}}</div>' + |
66 + '</div>' |
70 "</div>" + |
67 + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenDeleteSuccess">' |
71 '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenDeleteSuccess">' + |
68 + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' |
72 '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' + |
69 + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.delete_saved}}</div>' |
73 '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.delete_saved}}</div>' + |
70 + '</div>' |
74 "</div>" + |
71 + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenFailure">' |
75 '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenFailure">' + |
72 + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' |
76 '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' + |
73 + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.error_while_contacting}}</div>' |
77 '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.error_while_contacting}}</div>' + |
74 + '</div>' |
78 "</div>" + |
75 + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenConfirmDelete">' |
79 '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenConfirmDelete">' + |
76 + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' |
80 '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' + |
77 + '<div class="Ldt-Markers-Screen-InnerBox">' |
81 '<div class="Ldt-Markers-Screen-InnerBox">' + |
78 + '{{l10n.delete_text}} ' |
82 "{{l10n.delete_text}} " + |
79 + '<a class="Ldt-Markers-Screen-SubmitDelete">{{l10n.submit_delete}}</a> ' |
83 '<a class="Ldt-Markers-Screen-SubmitDelete">{{l10n.submit_delete}}</a> ' + |
80 + '<a class="Ldt-Markers-Screen-CancelDelete">{{l10n.cancel}}</a>' |
84 '<a class="Ldt-Markers-Screen-CancelDelete">{{l10n.cancel}}</a>' + |
81 + '</div>' |
85 "</div>" + |
82 + '</div>' |
86 "</div>" + |
83 + '</div>'; |
87 "</div>"; |
84 |
88 |
85 |
89 static markerTemplate = |
86 IriSP.Widgets.Markers.prototype.markerTemplate = |
90 '<div class="Ldt-Markers-Marker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' + |
87 '<div class="Ldt-Markers-Marker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' + |
91 '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' + |
88 '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' + |
92 "</div>"; |
89 '</div>'; |
93 |
90 |
94 static markerPlaceholderTemplate = |
91 IriSP.Widgets.Markers.prototype.markerPlaceholderTemplate = |
95 '<div class="Ldt-Markers-Marker Ldt-Markers-PlaceholderMarker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' + |
92 '<div class="Ldt-Markers-Marker Ldt-Markers-PlaceholderMarker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' + |
96 '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' + |
93 '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' + |
97 "</div>"; |
94 '</div>'; |
98 |
95 |
99 static infoTemplate = |
96 IriSP.Widgets.Markers.prototype.infoTemplate = |
100 '{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' + |
97 '{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' + |
101 '{{#edit}}<div class="Ldt-Markers-MarkerEdit">' + |
98 '{{#edit}}<div class="Ldt-Markers-MarkerEdit">' + |
102 '<textarea class="Ldt-Markers-MarkerTextArea" cols="60" rows="4">{{marker_info}}</textarea>' + |
99 '<textarea class="Ldt-Markers-MarkerTextArea" cols="60" rows="4">{{marker_info}}</textarea>' + |
103 '<div class="Ldt-Markers-Buttons">' + |
100 '<div class="Ldt-Markers-Buttons">' + |
104 '{{^preview_mode}}<div class="Ldt-Markers-MarkerSend">{{send}}</div>{{/preview_mode}}' + |
101 '{{^preview_mode}}<div class="Ldt-Markers-MarkerSend">{{send}}</div>{{/preview_mode}}' + |
105 '{{#preview_mode}}<div class="Ldt-Markers-MarkerPreviewSend" title="{{preview_mode_text}}">{{send}}</div>{{/preview_mode}}' + |
102 '{{#preview_mode}}<div class="Ldt-Markers-MarkerPreviewSend" title="{{preview_mode_text}}">{{send}}</div>{{/preview_mode}}' + |
106 '<div class="Ldt-Markers-MarkerCancel">{{cancel}}</div>' + |
103 '<div class="Ldt-Markers-MarkerCancel">{{cancel}}</div>' + |
107 "</div>" + |
104 '</div>' + |
108 "</div>{{/edit}}"; |
105 '</div>{{/edit}}' |
109 |
106 |
110 static messages = { |
107 IriSP.Widgets.Markers.prototype.messages = { |
111 en: { |
108 en : { |
112 send: "Send", |
109 send : "Send", |
|
110 submit_delete: "Delete", |
113 submit_delete: "Delete", |
111 cancel : "Cancel", |
114 cancel: "Cancel", |
112 preview_mode_submit: "You cannot submit a marker in preview mode.", |
115 preview_mode_submit: "You cannot submit a marker in preview mode.", |
113 preview_mode_delete: "You cannot delete a marker in preview mode", |
116 preview_mode_delete: "You cannot delete a marker in preview mode", |
114 wait_while_processing: "Please wait while your annotation is being processed...", |
117 wait_while_processing: |
|
118 "Please wait while your annotation is being processed...", |
115 delete_text: "The selected marker will be deleted. Continue?", |
119 delete_text: "The selected marker will be deleted. Continue?", |
116 error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.", |
120 error_while_contacting: |
|
121 "An error happened while contacting the server. Your annotation has not been saved.", |
117 annotation_saved: "Thank you, your annotation has been saved.", |
122 annotation_saved: "Thank you, your annotation has been saved.", |
118 delete_saved: "Thank you, your annotation has been deleted", |
123 delete_saved: "Thank you, your annotation has been deleted", |
119 close_widget: "Close", |
124 close_widget: "Close", |
120 cannot_create: "Cannot create marker on this timecode" |
125 cannot_create: "Cannot create marker on this timecode", |
121 }, |
126 }, |
122 fr : { |
127 fr: { |
123 send : "Envoyer", |
128 send: "Envoyer", |
124 submit_delete: "Supprimer", |
129 submit_delete: "Supprimer", |
125 cancel : "Annuler", |
130 cancel: "Annuler", |
126 preview_mode_submit: "Vous ne pouvez pas créer ou éditer de marqueur en mode aperçu", |
131 preview_mode_submit: |
127 preview_mode_delete: "Vous ne pouvez pas supprimer de marqueur en mode aperçu", |
132 "Vous ne pouvez pas créer ou éditer de marqueur en mode aperçu", |
128 wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...", |
133 preview_mode_delete: |
|
134 "Vous ne pouvez pas supprimer de marqueur en mode aperçu", |
|
135 wait_while_processing: |
|
136 "Veuillez patienter pendant le traitement de votre annotation...", |
129 delete_text: "Le marqueur sélectionné sera supprimé. Continuer?", |
137 delete_text: "Le marqueur sélectionné sera supprimé. Continuer?", |
130 error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.", |
138 error_while_contacting: |
|
139 "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.", |
131 annotation_saved: "Merci, votre annotation a été enregistrée.", |
140 annotation_saved: "Merci, votre annotation a été enregistrée.", |
132 delete_saved: "Merci, votre annotation a été supprimée", |
141 delete_saved: "Merci, votre annotation a été supprimée", |
133 close_widget: "Fermer", |
142 close_widget: "Fermer", |
134 cannot_create: "Impossible de créer un marqueur sur ce timecode" |
143 cannot_create: "Impossible de créer un marqueur sur ce timecode", |
135 } |
144 }, |
136 } |
145 }; |
137 |
146 |
138 IriSP.Widgets.Markers.prototype.importUsers = function(){ |
147 importUsers() { |
139 if (this.filter_per_user && this.preview_mode){ |
148 if (this.filter_per_user && this.preview_mode) { |
140 this.usernames = Array(); |
149 this.usernames = Array(); |
141 if (!this.source.users_data && this.api_users_endpoint){ |
150 if (!this.source.users_data && this.api_users_endpoint) { |
142 var _this = this, |
151 var _this = this, |
143 _list = this.getWidgetAnnotations(), |
152 _list = this.getWidgetAnnotations(), |
144 usernames_list_string = ""; |
153 usernames_list_string = ""; |
145 |
154 |
146 _list.forEach(function(_annotation){ |
155 _list.forEach(function (_annotation) { |
147 if(_this.usernames.indexOf(_annotation.creator) == -1){ |
156 if (_this.usernames.indexOf(_annotation.creator) == -1) { |
148 _this.usernames.push(_annotation.creator); |
157 _this.usernames.push(_annotation.creator); |
149 } |
158 } |
150 }); |
159 }); |
151 this.usernames.forEach(function(_username){ |
160 this.usernames.forEach(function (_username) { |
152 usernames_list_string+=_username+"," |
161 usernames_list_string += _username + ","; |
153 }) |
162 }); |
154 usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1); |
163 usernames_list_string = usernames_list_string.substring( |
155 _url = Mustache.to_html(this.api_users_endpoint, {usernames_list_string: encodeURIComponent(usernames_list_string), usernames_list_length: this.usernames.length}); |
164 0, |
156 return IriSP.jQuery.ajax({ |
165 usernames_list_string.length - 1 |
157 async: false, |
166 ); |
158 url: _url, |
167 _url = Mustache.render(this.api_users_endpoint, { |
159 type: "GET", |
168 usernames_list_string: encodeURIComponent(usernames_list_string), |
160 success: function(_data) { |
169 usernames_list_length: this.usernames.length, |
161 _this.source.users_data = _data.objects |
170 }); |
162 }, |
171 return jQuery.ajax({ |
163 error: function(_xhr, _error, _thrown) { |
172 async: false, |
164 console.log(_xhr) |
173 url: _url, |
165 console.log(_error) |
174 type: "GET", |
166 console.log(_thrown) |
175 success: function (_data) { |
167 } |
176 _this.source.users_data = _data.objects; |
168 }) |
177 }, |
169 } |
178 error: function (_xhr, _error, _thrown) { |
170 } |
179 console.log(_xhr); |
171 } |
180 console.log(_error); |
172 |
181 console.log(_thrown); |
173 IriSP.Widgets.Markers.prototype.draw = function(){ |
182 }, |
174 var _this = this; |
183 }); |
175 this.renderTemplate(); |
184 } |
176 if ((!this.filter_per_user) || (!this.preview_mode) || (this.usernames.length <= 1)){ |
185 } |
|
186 } |
|
187 |
|
188 draw() { |
|
189 var _this = this; |
|
190 this.renderTemplate(); |
|
191 if ( |
|
192 !this.filter_per_user || |
|
193 !this.preview_mode || |
|
194 this.usernames.length <= 1 |
|
195 ) { |
177 this.$.find(".Ldt-Markers-userFilter-dropdown").hide(); |
196 this.$.find(".Ldt-Markers-userFilter-dropdown").hide(); |
178 } |
197 } else { |
179 else { |
198 this.usernames.forEach(function (_user) { |
180 this.usernames.forEach(function(_user){ |
199 var _users = _this.source.users_data.filter(function (_user_data) { |
181 var _users = _this.source.users_data.filter(function(_user_data){ |
200 return _user_data.username == _user; |
182 return _user_data.username == _user; |
|
183 }), |
201 }), |
184 _user_data = {}; |
202 _user_data = {}; |
185 if (_users.length == 0){ |
203 if (_users.length == 0) { |
186 _user_data.username = _user; |
204 _user_data.username = _user; |
187 } |
205 } else { |
188 else{ |
206 _user_data = _users[0]; |
189 _user_data = _users[0]; |
207 } |
190 } |
208 _this.$.find(".Ldt-Markers-userFilter-dropdown").append( |
191 _this.$.find(".Ldt-Markers-userFilter-dropdown").append("<option value='"+_user+"'>"+_this.make_name_string_function(_user_data)+"</option>") |
209 "<option value='" + |
192 }); |
210 _user + |
193 this.$.find(".Ldt-Markers-userFilter-dropdown").change(this.functionWrapper("drawMarkers")) |
211 "'>" + |
194 this.$.find(".Ldt-Markers-userFilter-dropdown").change(this.functionWrapper("clearSelectedMarker")) |
212 _this.make_name_string_function(_user_data) + |
195 |
213 "</option>" |
196 } |
214 ); |
197 |
215 }); |
198 this.markers = this.getWidgetAnnotations().filter(function(_ann) { |
216 this.$.find(".Ldt-Markers-userFilter-dropdown").change( |
199 return ((_ann.getDuration() == 0) || (_ann.begin == _ann.end)); |
217 this.functionWrapper("drawMarkers") |
200 }); |
218 ); |
201 if (this.hide_if_empty && this.markers.length <= 0){ |
219 this.$.find(".Ldt-Markers-userFilter-dropdown").change( |
|
220 this.functionWrapper("clearSelectedMarker") |
|
221 ); |
|
222 } |
|
223 |
|
224 this.markers = this.getWidgetAnnotations().filter(function (_ann) { |
|
225 return _ann.getDuration() == 0 || _ann.begin == _ann.end; |
|
226 }); |
|
227 if (this.hide_if_empty && this.markers.length <= 0) { |
202 this.$.hide(); |
228 this.$.hide(); |
203 } |
229 } else { |
204 else { |
|
205 this.drawMarkers(); |
230 this.drawMarkers(); |
206 |
231 |
207 this.$.find(".Ldt-Markers-Create").click(this.functionWrapper("onCreateClick")); |
232 this.$.find(".Ldt-Markers-Create").click( |
208 this.$.find(".Ldt-Markers-Delete").click(this.functionWrapper("onDeleteClick")); |
233 this.functionWrapper("onCreateClick") |
209 this.$.find(".Ldt-Markers-RoundButton").hide() |
234 ); |
210 this.updateCreateButtonState(this.media.getCurrentTime()) |
235 this.$.find(".Ldt-Markers-Delete").click( |
211 this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(this.functionWrapper("sendDelete")); |
236 this.functionWrapper("onDeleteClick") |
212 this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function(){ |
237 ); |
213 _this.showScreen("Main"); |
238 this.$.find(".Ldt-Markers-RoundButton").hide(); |
214 _this.cancelEdit(); |
239 this.updateCreateButtonState(this.media.getCurrentTime()); |
215 }) |
240 this.$.find(".Ldt-Markers-Screen-SubmitDelete").click( |
|
241 this.functionWrapper("sendDelete") |
|
242 ); |
|
243 this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function () { |
|
244 _this.showScreen("Main"); |
|
245 _this.cancelEdit(); |
|
246 }); |
216 this.showScreen("Main"); |
247 this.showScreen("Main"); |
217 this.$.css({ |
248 this.$.css({ |
218 margin: "1px 0", |
249 margin: "1px 0", |
219 background: this.background |
250 background: this.background, |
220 }); |
251 }); |
221 |
252 |
222 this.$.find(".Ldt-Markers-Close").click(this.functionWrapper("revertToMainScreen")); |
253 this.$.find(".Ldt-Markers-Close").click( |
223 |
254 this.functionWrapper("revertToMainScreen") |
|
255 ); |
|
256 |
224 this.onMediaEvent("timeupdate", this.functionWrapper("updatePosition")); |
257 this.onMediaEvent("timeupdate", this.functionWrapper("updatePosition")); |
225 this.onMediaEvent("timeupdate", this.functionWrapper("updateCreateButtonState")); |
258 this.onMediaEvent( |
|
259 "timeupdate", |
|
260 this.functionWrapper("updateCreateButtonState") |
|
261 ); |
226 this.onMediaEvent("play", this.functionWrapper("clearSelectedMarker")); |
262 this.onMediaEvent("play", this.functionWrapper("clearSelectedMarker")); |
227 this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers")); |
263 this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers")); |
228 |
264 |
229 this.newMarkerTimeCode = 0; |
265 this.newMarkerTimeCode = 0; |
230 this.selectedMarker = false; |
266 this.selectedMarker = false; |
231 } |
267 } |
232 } |
268 } |
233 |
269 |
234 |
270 updatePosition(_time) { |
235 IriSP.Widgets.Markers.prototype.updatePosition = function(_time) { |
271 var _x = Math.floor((this.width * _time) / this.media.duration); |
236 var _x = Math.floor( this.width * _time / this.media.duration); |
272 this.$.find(".Ldt-Markers-Position").css({ |
237 this.$.find('.Ldt-Markers-Position').css({ |
273 left: _x + "px", |
238 left: _x + "px" |
274 }); |
239 }); |
275 } |
240 } |
276 |
241 |
277 updateCreateButtonState(_time) { |
242 IriSP.Widgets.Markers.prototype.updateCreateButtonState = function(_time){ |
278 _this = this; |
243 _this = this |
279 var can_create = this.preview_mode |
244 var can_create = this.preview_mode? false : this.markers.every(function(_marker){ |
280 ? false |
245 return ((_time < (_marker.begin-_this.markers_gap))||(_time > (_marker.begin+_this.markers_gap))) |
281 : this.markers.every(function (_marker) { |
246 }); |
282 return ( |
247 if (can_create){ |
283 _time < _marker.begin - _this.markers_gap || |
248 if ((this.$.find(".Ldt-Markers-Create").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden")||this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))){ |
284 _time > _marker.begin + _this.markers_gap |
249 this.$.find(".Ldt-Markers-RoundButton").hide(); |
285 ); |
250 this.$.find(".Ldt-Markers-Create").show(); |
286 }); |
251 } |
287 if (can_create) { |
252 } |
288 if ( |
253 else { |
289 this.$.find(".Ldt-Markers-Create").is(":hidden") && |
254 if ((this.$.find(".Ldt-Markers-CannotCreate").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden")||this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))){ |
290 (this.$.find(".Ldt-Markers-Delete").is(":hidden") || |
255 this.$.find(".Ldt-Markers-RoundButton").hide(); |
291 this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden")) |
256 this.$.find(".Ldt-Markers-CannotCreate").show(); |
292 ) { |
257 } |
293 this.$.find(".Ldt-Markers-RoundButton").hide(); |
258 } |
294 this.$.find(".Ldt-Markers-Create").show(); |
259 } |
295 } |
260 |
296 } else { |
261 IriSP.Widgets.Markers.prototype.onCreateClick = function(){ |
297 if ( |
262 this.pauseOnWrite(); |
298 this.$.find(".Ldt-Markers-CannotCreate").is(":hidden") && |
263 if (!this.selectedMarker){ |
299 (this.$.find(".Ldt-Markers-Delete").is(":hidden") || |
|
300 this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden")) |
|
301 ) { |
|
302 this.$.find(".Ldt-Markers-RoundButton").hide(); |
|
303 this.$.find(".Ldt-Markers-CannotCreate").show(); |
|
304 } |
|
305 } |
|
306 } |
|
307 |
|
308 onCreateClick() { |
|
309 this.pauseOnWrite(); |
|
310 if (!this.selectedMarker) { |
264 this.newMarkerCurrentTime = this.media.getCurrentTime(); |
311 this.newMarkerCurrentTime = this.media.getCurrentTime(); |
265 this.showPlaceholder(this.media.getCurrentTime()); |
312 this.showPlaceholder(this.media.getCurrentTime()); |
266 this.startEdit(); |
313 this.startEdit(); |
267 } |
314 } |
268 } |
315 } |
269 |
316 |
270 IriSP.Widgets.Markers.prototype.onDeleteClick = function(){ |
317 onDeleteClick() { |
271 _this = this; |
318 _this = this; |
272 this.pauseOnWrite(); |
319 this.pauseOnWrite(); |
273 if(this.selectedMarker){ |
320 if (this.selectedMarker) { |
274 this.showScreen("ConfirmDelete"); |
321 this.showScreen("ConfirmDelete"); |
275 } |
322 } else { |
276 else { |
|
277 // Click on "x" without a selected marker: back to initial state |
323 // Click on "x" without a selected marker: back to initial state |
278 this.cancelEdit(); |
324 this.cancelEdit(); |
279 } |
325 } |
280 } |
326 } |
281 |
327 |
282 IriSP.Widgets.Markers.prototype.startEdit = function(){ |
328 startEdit() { |
283 if (this.selectedMarker){ |
329 if (this.selectedMarker) { |
284 _divHtml = Mustache.to_html(this.infoTemplate, { |
330 _divHtml = Mustache.render(this.infoTemplate, { |
285 edit: true, |
331 edit: true, |
286 preview_mode: this.preview_mode, |
332 preview_mode: this.preview_mode, |
287 preview_mode_text: this.l10n.preview_mode_submit, |
333 preview_mode_text: this.l10n.preview_mode_submit, |
288 marker_info: this.selectedMarker.description, |
334 marker_info: this.selectedMarker.description, |
289 send: this.custom_send_button? this.custom_send_button : this.l10n.send, |
335 send: this.custom_send_button |
290 cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel |
336 ? this.custom_send_button |
291 }) |
337 : this.l10n.send, |
292 } |
338 cancel: this.custom_cancel_button |
293 else { |
339 ? this.custom_cancel_button |
294 _divHtml = Mustache.to_html(this.infoTemplate, { |
340 : this.l10n.cancel, |
295 edit: true, |
341 }); |
296 marker_info: "", |
342 } else { |
297 preview_mode: this.preview_mode, |
343 _divHtml = Mustache.render(this.infoTemplate, { |
298 preview_mode_text: this.l10n.preview_mode_submit, |
344 edit: true, |
299 send: this.custom_send_button? this.custom_send_button : this.l10n.send, |
345 marker_info: "", |
300 cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel |
346 preview_mode: this.preview_mode, |
301 }) |
347 preview_mode_text: this.l10n.preview_mode_submit, |
302 } |
348 send: this.custom_send_button |
303 this.$.find(".Ldt-Markers-Info").html(_divHtml); |
349 ? this.custom_send_button |
304 this.$.find(".Ldt-Markers-MarkerSend").click(this.functionWrapper("onSubmit")); |
350 : this.l10n.send, |
305 this.$.find(".Ldt-Markers-MarkerCancel").click(this.functionWrapper("cancelEdit")); |
351 cancel: this.custom_cancel_button |
306 this.$.find(".Ldt-Markers-MarkerTextArea").bind("change keyup input paste", this.functionWrapper("onDescriptionChange")); |
352 ? this.custom_cancel_button |
307 this.$.find(".Ldt-Markers-RoundButton").hide(); |
353 : this.l10n.cancel, |
308 if (this.preview_mode){ |
354 }); |
309 this.$.find(".Ldt-Markers-PreviewDelete").show(); |
355 } |
310 } |
356 this.$.find(".Ldt-Markers-Info").html(_divHtml); |
311 else { |
357 this.$.find(".Ldt-Markers-MarkerSend").click( |
|
358 this.functionWrapper("onSubmit") |
|
359 ); |
|
360 this.$.find(".Ldt-Markers-MarkerCancel").click( |
|
361 this.functionWrapper("cancelEdit") |
|
362 ); |
|
363 this.$.find(".Ldt-Markers-MarkerTextArea").bind( |
|
364 "change keyup input paste", |
|
365 this.functionWrapper("onDescriptionChange") |
|
366 ); |
|
367 this.$.find(".Ldt-Markers-RoundButton").hide(); |
|
368 if (this.preview_mode) { |
|
369 this.$.find(".Ldt-Markers-PreviewDelete").show(); |
|
370 } else { |
312 this.$.find(".Ldt-Markers-Delete").show(); |
371 this.$.find(".Ldt-Markers-Delete").show(); |
313 } |
372 } |
314 this.editing = true; |
373 this.editing = true; |
315 } |
374 } |
316 |
375 |
317 IriSP.Widgets.Markers.prototype.cancelEdit = function(){ |
376 cancelEdit() { |
318 if (this.selectedMarker){ |
377 if (this.selectedMarker) { |
319 // Click on "cancel" while editing a marker: back to visualization state |
378 // Click on "cancel" while editing a marker: back to visualization state |
320 _divHtml = Mustache.to_html(this.infoTemplate, { |
379 _divHtml = Mustache.render(this.infoTemplate, { |
321 edit: false, |
380 edit: false, |
322 marker_info: this.selectedMarker.description, |
381 marker_info: this.selectedMarker.description, |
323 }) |
382 }); |
324 this.$.find(".Ldt-Markers-Info").html(_divHtml); |
383 this.$.find(".Ldt-Markers-Info").html(_divHtml); |
325 if (!this.preview_mode){ |
384 if (!this.preview_mode) { |
326 this.$.find(".Ldt-Markers-MarkerDescription").click(this.functionWrapper("startEdit")); |
385 this.$.find(".Ldt-Markers-MarkerDescription").click( |
327 } |
386 this.functionWrapper("startEdit") |
328 } |
387 ); |
329 else { |
388 } |
|
389 } else { |
330 // Click on "cancel" while editing a marker: back to initial state |
390 // Click on "cancel" while editing a marker: back to initial state |
331 this.hidePlaceholder(); |
391 this.hidePlaceholder(); |
332 this.$.find(".Ldt-Markers-Info").html(""); |
392 this.$.find(".Ldt-Markers-Info").html(""); |
333 this.$.find(".Ldt-Markers-RoundButton").hide() |
393 this.$.find(".Ldt-Markers-RoundButton").hide(); |
334 this.$.find(".Ldt-Markers-Create").show() |
394 this.$.find(".Ldt-Markers-Create").show(); |
335 this.updateCreateButtonState(this.media.getCurrentTime()) |
395 this.updateCreateButtonState(this.media.getCurrentTime()); |
336 } |
396 } |
337 this.editing = false; |
397 this.editing = false; |
338 } |
398 } |
339 |
399 |
340 IriSP.Widgets.Markers.prototype.onDescriptionChange = function(){ |
400 onDescriptionChange() { |
341 // Returns false if the textarea is empty, true if there is text in it |
401 // Returns false if the textarea is empty, true if there is text in it |
342 if(!this.allow_empty_markers){ |
402 if (!this.allow_empty_markers) { |
343 var _field = this.$.find(".Ldt-Markers-MarkerTextArea"), |
403 var _field = this.$.find(".Ldt-Markers-MarkerTextArea"), |
344 _contents = _field.val(); |
404 _contents = _field.val(); |
345 _field.css("border-color", !!_contents ? "#e87d9f" : "#ff0000"); |
405 _field.css("border-color", !!_contents ? "#e87d9f" : "#ff0000"); |
346 if (!!_contents) { |
406 if (!!_contents) { |
347 _field.removeClass("empty"); |
407 _field.removeClass("empty"); |
348 } else { |
408 } else { |
349 _field.addClass("empty"); |
409 _field.addClass("empty"); |
350 } |
410 } |
351 this.pauseOnWrite(); |
411 this.pauseOnWrite(); |
352 return !!_contents; |
412 return !!_contents; |
353 } |
413 } else { |
354 else { |
|
355 // If the widget is configured to allow to post empty markers, it returns true |
414 // If the widget is configured to allow to post empty markers, it returns true |
356 return true |
415 return true; |
357 } |
416 } |
358 }; |
417 } |
359 |
418 |
360 IriSP.Widgets.Markers.prototype.pauseOnWrite = function(){ |
419 pauseOnWrite() { |
361 if (this.pause_on_write && !this.media.getPaused()) { |
420 if (this.pause_on_write && !this.media.getPaused()) { |
362 this.media.pause(); |
421 this.media.pause(); |
363 } |
422 } |
364 }; |
423 } |
365 |
424 |
366 IriSP.Widgets.Markers.prototype.showScreen = function(_screenName) { |
425 showScreen(_screenName) { |
367 this.$.find('.Ldt-Markers-Screen' + _screenName).show() |
426 this.$.find(".Ldt-Markers-Screen" + _screenName) |
368 .siblings().hide(); |
427 .show() |
369 } |
428 .siblings() |
370 |
429 .hide(); |
371 IriSP.Widgets.Markers.prototype.revertToMainScreen = function(){ |
430 } |
372 if (this.$.find(".Ldt-Markers-ScreenMain").is(":hidden")){ |
431 |
|
432 revertToMainScreen() { |
|
433 if (this.$.find(".Ldt-Markers-ScreenMain").is(":hidden")) { |
373 this.showScreen("Main"); |
434 this.showScreen("Main"); |
374 this.cancelEdit(); |
435 this.cancelEdit(); |
375 if (this.selectedMarker){ |
436 if (this.selectedMarker) { |
376 this.$.find(".Ldt-Markers-RoundButton").hide(); |
437 this.$.find(".Ldt-Markers-RoundButton").hide(); |
377 if (this.preview_mode){ |
438 if (this.preview_mode) { |
378 this.$.find(".Ldt-Markers-PreviewDelete").show(); |
439 this.$.find(".Ldt-Markers-PreviewDelete").show(); |
379 } |
440 } else { |
380 else { |
441 this.$.find(".Ldt-Markers-Delete").show(); |
381 this.$.find(".Ldt-Markers-Delete").show(); |
442 } |
382 } |
443 } else { |
383 } |
444 this.$.find(".Ldt-Markers-RoundButton").hide(); |
384 else { |
445 this.$.find(".Ldt-Markers-Create").show(); |
385 this.$.find(".Ldt-Markers-RoundButton").hide(); |
446 this.updateCreateButtonState(); |
386 this.$.find(".Ldt-Markers-Create").show(); |
447 } |
387 this.updateCreateButtonState(); |
448 } |
388 } |
449 } |
389 } |
450 |
390 } |
451 hidePlaceholder() { |
391 |
452 this.$.find(".Ldt-Markers-PlaceholderMarker").remove(); |
392 IriSP.Widgets.Markers.prototype.hidePlaceholder = function(){ |
453 } |
393 this.$.find(".Ldt-Markers-PlaceholderMarker").remove(); |
454 |
394 } |
455 showPlaceholder(_time) { |
395 |
456 var _scale = this.width / this.source.getDuration(), |
396 IriSP.Widgets.Markers.prototype.showPlaceholder = function(_time){ |
457 _left = _time * _scale - 1, |
397 var _scale = this.width / this.source.getDuration(), |
|
398 _left = _time * _scale -1, |
|
399 _data = { |
458 _data = { |
400 left: _left, |
459 left: _left, |
401 height: this.line_height-1, |
460 height: this.line_height - 1, |
402 ball_top: (this.ball_radius*2 > this.line_height) ? 0 : ((this.line_height - this.ball_radius*2)/2)-1, |
461 ball_top: |
403 ball_radius: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius, |
462 this.ball_radius * 2 > this.line_height |
404 ball_diameter: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius*2, |
463 ? 0 |
405 ball_left: -this.ball_radius, |
464 : (this.line_height - this.ball_radius * 2) / 2 - 1, |
406 marker_color: this.placeholder_color |
465 ball_radius: |
|
466 this.ball_radius * 2 > this.line_height |
|
467 ? this.line_height / 2 |
|
468 : this.ball_radius, |
|
469 ball_diameter: |
|
470 this.ball_radius * 2 > this.line_height |
|
471 ? this.line_height / 2 |
|
472 : this.ball_radius * 2, |
|
473 ball_left: -this.ball_radius, |
|
474 marker_color: this.placeholder_color, |
407 }, |
475 }, |
408 _html = Mustache.to_html(this.markerPlaceholderTemplate, _data), |
476 _html = Mustache.render(this.markerPlaceholderTemplate, _data), |
409 _el = IriSP.jQuery(_html); |
477 _el = jQuery(_html); |
410 |
478 |
411 list_$ = this.$.find(".Ldt-Markers-List"); |
479 list_$ = this.$.find(".Ldt-Markers-List"); |
412 _el.appendTo(list_$); |
480 _el.appendTo(list_$); |
413 } |
481 } |
414 |
482 |
415 IriSP.Widgets.Markers.prototype.clearSelectedMarker = function(){ |
483 clearSelectedMarker() { |
416 if (this.selectedMarker){ |
484 if (this.selectedMarker) { |
417 var _divHtml = ""; |
485 var _divHtml = ""; |
418 |
486 |
419 this.selectedMarker = false; |
487 this.selectedMarker = false; |
420 this.$.find(".Ldt-Markers-Info").html(_divHtml); |
488 this.$.find(".Ldt-Markers-Info").html(_divHtml); |
421 this.$.find(".Ldt-Markers-RoundButton").hide(); |
489 this.$.find(".Ldt-Markers-RoundButton").hide(); |
422 this.$.find(".Ldt-Markers-Create").show(); |
490 this.$.find(".Ldt-Markers-Create").show(); |
423 this.$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false); |
491 this.$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false); |
424 this.updateCreateButtonState(this.media.getCurrentTime()) |
492 this.updateCreateButtonState(this.media.getCurrentTime()); |
425 } |
493 } |
426 } |
494 } |
427 |
495 |
428 IriSP.Widgets.Markers.prototype.drawMarkers = function(){ |
496 drawMarkers() { |
429 var _this = this, |
497 var _this = this, |
430 _scale = this.width / this.source.getDuration(), |
498 _scale = this.width / this.source.getDuration(), |
431 list_$ = this.$.find('.Ldt-Markers-List'), |
499 list_$ = this.$.find(".Ldt-Markers-List"), |
432 _displayed_markers = this.markers; |
500 _displayed_markers = this.markers; |
433 |
501 |
434 this.$.remove("Ldt-Markers-Marker"); |
502 this.$.remove("Ldt-Markers-Marker"); |
435 list_$.html(""); |
503 list_$.html(""); |
436 |
504 |
437 if (this.filter_per_user && this.usernames.length > 1){ |
505 if (this.filter_per_user && this.usernames.length > 1) { |
438 var _username = this.$.find(".Ldt-Markers-userFilter-dropdown")[0].options[this.$.find(".Ldt-Markers-userFilter-dropdown")[0].selectedIndex].value; |
506 var _username = this.$.find(".Ldt-Markers-userFilter-dropdown")[0] |
439 _displayed_markers = _displayed_markers.filter(function(_marker){ |
507 .options[ |
440 return _marker.creator == _username; |
508 this.$.find(".Ldt-Markers-userFilter-dropdown")[0].selectedIndex |
441 }) |
509 ].value; |
442 } |
510 _displayed_markers = _displayed_markers.filter(function (_marker) { |
443 |
511 return _marker.creator == _username; |
444 _displayed_markers.forEach(function(_marker){ |
512 }); |
445 var _left = _marker.begin * _scale -1, |
513 } |
446 _data = { |
514 |
447 left: _left, |
515 _displayed_markers.forEach(function (_marker) { |
448 height: _this.line_height-1, |
516 var _left = _marker.begin * _scale - 1, |
449 ball_top: (_this.ball_radius*2 > _this.line_height) ? 0 : ((_this.line_height - _this.ball_radius*2)/2)-1, |
517 _data = { |
450 ball_radius: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius, |
518 left: _left, |
451 ball_diameter: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius*2, |
519 height: _this.line_height - 1, |
452 ball_left: -_this.ball_radius, |
520 ball_top: |
453 marker_color: ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))? _this.selected_color : _this.marker_color |
521 _this.ball_radius * 2 > _this.line_height |
454 }, |
522 ? 0 |
455 _html = Mustache.to_html(_this.markerTemplate, _data), |
523 : (_this.line_height - _this.ball_radius * 2) / 2 - 1, |
456 _el = IriSP.jQuery(_html); |
524 ball_radius: |
457 |
525 _this.ball_radius * 2 > _this.line_height |
458 if ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id)){ |
526 ? _this.line_height / 2 |
459 _el.children().toggleClass("selected", true); |
527 : _this.ball_radius, |
460 } |
528 ball_diameter: |
461 |
529 _this.ball_radius * 2 > _this.line_height |
462 _el.mouseover(function(){ |
530 ? _this.line_height / 2 |
463 if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){ |
531 : _this.ball_radius * 2, |
464 _el.children().css("background-color", _this.hover_color); |
532 ball_left: -_this.ball_radius, |
465 }; |
533 marker_color: |
466 }) |
534 _this.selectedMarker && _this.selectedMarker.id == _marker.id |
467 .mouseout(function(){ |
535 ? _this.selected_color |
468 if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){ |
536 : _this.marker_color, |
469 _el.children().css("background-color", _this.marker_color); |
537 }, |
470 }; |
538 _html = Mustache.render(_this.markerTemplate, _data), |
471 }) |
539 _el = jQuery(_html); |
472 .click(function(){ |
540 |
473 _this.showScreen("Main"); |
541 if (_this.selectedMarker && _this.selectedMarker.id == _marker.id) { |
474 _this.cancelEdit(); |
542 _el.children().toggleClass("selected", true); |
475 _this.hidePlaceholder(); |
543 } |
476 if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){ |
544 |
477 // if there either is no marker selected or we click a different marker |
545 _el |
478 list_$.find(".Ldt-Markers-MarkerBall").css("background-color", _this.marker_color) |
546 .mouseover(function () { |
479 list_$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false); |
547 if ( |
480 _el.children().toggleClass("selected", true); |
548 !(_this.selectedMarker && _this.selectedMarker.id == _marker.id) |
481 _el.children().css("background-color", _this.selected_color) |
549 ) { |
482 _this.selectedMarker = _marker; |
550 _el.children().css("background-color", _this.hover_color); |
483 |
551 } |
484 _divHtml = Mustache.to_html(_this.infoTemplate, { |
552 }) |
485 edit: false, |
553 .mouseout(function () { |
486 marker_info: _marker.description, |
554 if ( |
487 }) |
555 !(_this.selectedMarker && _this.selectedMarker.id == _marker.id) |
488 |
556 ) { |
489 _this.$.find(".Ldt-Markers-Info").html(_divHtml); |
557 _el.children().css("background-color", _this.marker_color); |
490 if (!_this.preview_mode){ |
558 } |
491 _this.$.find(".Ldt-Markers-MarkerDescription").click(_this.functionWrapper("startEdit")); |
559 }) |
492 } |
560 .click(function () { |
493 _this.$.find(".Ldt-Markers-RoundButton").hide(); |
561 _this.showScreen("Main"); |
494 if (_this.preview_mode){ |
562 _this.cancelEdit(); |
495 _this.$.find(".Ldt-Markers-PreviewDelete").show(); |
563 _this.hidePlaceholder(); |
496 } |
564 if ( |
497 else { |
565 !(_this.selectedMarker && _this.selectedMarker.id == _marker.id) |
498 _this.$.find(".Ldt-Markers-Delete").show(); |
566 ) { |
499 } |
567 // if there either is no marker selected or we click a different marker |
500 |
568 list_$ |
501 } |
569 .find(".Ldt-Markers-MarkerBall") |
502 else { |
570 .css("background-color", _this.marker_color); |
503 // if we click the currently selected marker, we unselect it |
571 list_$ |
504 _el.children().css("background-color", _this.hover_color); |
572 .find(".Ldt-Markers-MarkerBall") |
505 _this.clearSelectedMarker(); |
573 .toggleClass("selected", false); |
506 } |
574 _el.children().toggleClass("selected", true); |
507 |
575 _el.children().css("background-color", _this.selected_color); |
508 if (_this.selectedMarker) { |
576 _this.selectedMarker = _marker; |
509 // Only if we select a new marker do we pause video and time jump |
577 |
510 _this.media.pause(); |
578 _divHtml = Mustache.render(_this.infoTemplate, { |
511 _marker.trigger("click"); |
579 edit: false, |
512 } |
580 marker_info: _marker.description, |
513 }) |
581 }); |
514 .appendTo(list_$); |
582 |
515 }) |
583 _this.$.find(".Ldt-Markers-Info").html(_divHtml); |
516 } |
584 if (!_this.preview_mode) { |
517 |
585 _this.$.find(".Ldt-Markers-MarkerDescription").click( |
518 |
586 _this.functionWrapper("startEdit") |
519 IriSP.Widgets.Markers.prototype.onSubmit = function(){ |
587 ); |
520 |
588 } |
521 /* If mandatory fields are empty, we cancel the sending */ |
589 _this.$.find(".Ldt-Markers-RoundButton").hide(); |
522 if (!this.allow_empty_markers && !this.onDescriptionChange()){ |
590 if (_this.preview_mode) { |
|
591 _this.$.find(".Ldt-Markers-PreviewDelete").show(); |
|
592 } else { |
|
593 _this.$.find(".Ldt-Markers-Delete").show(); |
|
594 } |
|
595 } else { |
|
596 // if we click the currently selected marker, we unselect it |
|
597 _el.children().css("background-color", _this.hover_color); |
|
598 _this.clearSelectedMarker(); |
|
599 } |
|
600 |
|
601 if (_this.selectedMarker) { |
|
602 // Only if we select a new marker do we pause video and time jump |
|
603 _this.media.pause(); |
|
604 _marker.trigger("click"); |
|
605 } |
|
606 }) |
|
607 .appendTo(list_$); |
|
608 }); |
|
609 } |
|
610 |
|
611 onSubmit() { |
|
612 /* If mandatory fields are empty, we cancel the sending */ |
|
613 if (!this.allow_empty_markers && !this.onDescriptionChange()) { |
523 return false; |
614 return false; |
524 } |
615 } |
525 |
616 |
526 /* We pause the video if it's still playing */ |
617 /* We pause the video if it's still playing */ |
527 if (!this.media.getPaused()){ |
618 if (!this.media.getPaused()) { |
528 this.media.pause(); |
619 this.media.pause(); |
529 } |
620 } |
530 |
621 |
531 var _this = this, |
622 var _this = this, |
532 _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create a List to send to the server that will contains the annotation */ |
623 _exportedAnnotations = new ns.Model.List( |
533 _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* We create a source object using a specific serializer for export */ |
624 this.player.sourceManager |
534 _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* We get the AnnotationType in which the annotation will be added */ |
625 ) /* We create a List to send to the server that will contains the annotation */, |
535 _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)); /* If it doesn't already exists, we create it */ |
626 _export = this.player.sourceManager.newLocalSource({ |
536 if (this.selectedMarker){ |
627 serializer: ns.serializers[this.api_serializer], |
|
628 }) /* We create a source object using a specific serializer for export */, |
|
629 _annotationTypes = this.source |
|
630 .getAnnotationTypes() |
|
631 .searchByTitle( |
|
632 this.annotation_type, |
|
633 true |
|
634 ) /* We get the AnnotationType in which the annotation will be added */, |
|
635 _annotationType = _annotationTypes.length |
|
636 ? _annotationTypes[0] |
|
637 : new ns.Model.AnnotationType( |
|
638 false, |
|
639 _export |
|
640 ); /* If it doesn't already exists, we create it */ |
|
641 if (this.selectedMarker) { |
537 var _annotation = this.selectedMarker, |
642 var _annotation = this.selectedMarker, |
538 _url = Mustache.to_html(this.api_endpoint_template_edit, {annotation_id: this.selectedMarker ? this.selectedMarker.id : ""}); |
643 _url = Mustache.render(this.api_endpoint_template_edit, { |
539 _annotation.source = _export |
644 annotation_id: this.selectedMarker ? this.selectedMarker.id : "", |
540 _annotation.description = this.$.find(".Ldt-Markers-MarkerTextArea").val(); /* Description field */ |
645 }); |
541 } |
646 _annotation.source = _export; |
542 else { |
647 _annotation.description = this.$.find( |
543 var _annotation = new IriSP.Model.Annotation(false, _export), |
648 ".Ldt-Markers-MarkerTextArea" |
544 _url = Mustache.to_html(this.api_endpoint_template_create); |
649 ).val(); /* Description field */ |
545 |
650 } else { |
|
651 var _annotation = new ns.Model.Annotation(false, _export), |
|
652 _url = Mustache.render(this.api_endpoint_template_create); |
|
653 |
546 /* If we created an AnnotationType on the spot ... */ |
654 /* If we created an AnnotationType on the spot ... */ |
547 if (!_annotationTypes.length) { |
655 if (!_annotationTypes.length) { |
548 /* ... We must not send its id to the server ... */ |
656 /* ... We must not send its id to the server ... */ |
549 _annotationType.dont_send_id = true; |
657 _annotationType.dont_send_id = true; |
550 /* ... And we must include its title. */ |
658 /* ... And we must include its title. */ |
551 _annotationType.title = this.annotation_type; |
659 _annotationType.title = this.annotation_type; |
552 } |
660 } |
553 |
661 |
554 _annotation.setMedia(this.source.currentMedia.id); /* Annotated media ID */ |
662 _annotation.setMedia( |
555 if (!this.selectedMarker){ |
663 this.source.currentMedia.id |
556 _annotation.setBegin(this.newMarkerCurrentTime); |
664 ); /* Annotated media ID */ |
557 _annotation.setEnd(this.newMarkerCurrentTime); |
665 if (!this.selectedMarker) { |
558 } |
666 _annotation.setBegin(this.newMarkerCurrentTime); |
559 _annotation.setAnnotationType(_annotationType.id); /* AnnotationType ID */ |
667 _annotation.setEnd(this.newMarkerCurrentTime); |
560 if (this.project_id != ""){ |
668 } |
561 /* Project id, only if it's been specifiec in the config */ |
669 _annotation.setAnnotationType( |
562 _annotation.project_id = this.project_id; |
670 _annotationType.id |
|
671 ); /* AnnotationType ID */ |
|
672 if (this.project_id != "") { |
|
673 /* Project id, only if it's been specifiec in the config */ |
|
674 _annotation.project_id = this.project_id; |
563 } |
675 } |
564 _annotation.created = new Date(); /* Creation date */ |
676 _annotation.created = new Date(); /* Creation date */ |
565 _annotation.description = this.$.find(".Ldt-Markers-MarkerTextArea").val(); /* Description field */ |
677 _annotation.description = this.$.find( |
|
678 ".Ldt-Markers-MarkerTextArea" |
|
679 ).val(); /* Description field */ |
566 _annotation.creator = this.creator_name; |
680 _annotation.creator = this.creator_name; |
567 } |
681 } |
568 _annotation.project_id = this.project_id; |
682 _annotation.project_id = this.project_id; |
569 |
683 |
570 _exportedAnnotations.push(_annotation); /* We add the annotation in the list to export */ |
684 _exportedAnnotations.push( |
571 _export.addList("annotation",_exportedAnnotations); /* We add the list to the source object */ |
685 _annotation |
572 |
686 ); /* We add the annotation in the list to export */ |
573 /* We send the AJAX request to the server ! */ |
687 _export.addList( |
574 IriSP.jQuery.ajax({ |
688 "annotation", |
|
689 _exportedAnnotations |
|
690 ); /* We add the list to the source object */ |
|
691 |
|
692 /* We send the AJAX request to the server ! */ |
|
693 jQuery.ajax({ |
575 url: _url, |
694 url: _url, |
576 type: this.selectedMarker ? this.api_method_edit : this.api_method_create, |
695 type: this.selectedMarker |
577 contentType: 'application/json', |
696 ? this.api_method_edit |
|
697 : this.api_method_create, |
|
698 contentType: "application/json", |
578 data: _export.serialize(), |
699 data: _export.serialize(), |
579 success: function(_data) { |
700 success: function (_data) { |
580 _this.showScreen('Success'); |
701 _this.showScreen("Success"); |
581 window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000)); |
702 window.setTimeout( |
582 _export.getAnnotations().removeElement(_annotation, true); /* We delete the sent annotation to avoid redundancy */ |
703 _this.functionWrapper("revertToMainScreen"), |
583 _export.deSerialize(_data); /* Data deserialization */ |
704 _this.after_send_timeout || 5000 |
584 _annotation.id = _data.id; |
705 ); |
585 _this.source.merge(_export); /* We merge the deserialized data with the current source data */ |
706 _export |
586 if (_this.pause_on_write && _this.media.getPaused() && _this.play_on_submit) { |
707 .getAnnotations() |
587 _this.media.play(); |
708 .removeElement( |
588 } |
709 _annotation, |
589 _this.markers.push(_annotation); |
710 true |
590 _this.selectedMarker = _annotation; |
711 ); /* We delete the sent annotation to avoid redundancy */ |
591 _this.drawMarkers(); |
712 _export.deSerialize(_data); /* Data deserialization */ |
592 _this.player.trigger("AnnotationsList.refresh"); |
713 _annotation.id = _data.id; |
593 _this.player.trigger("Markers.refresh"); |
714 _this.source.merge( |
|
715 _export |
|
716 ); /* We merge the deserialized data with the current source data */ |
|
717 if ( |
|
718 _this.pause_on_write && |
|
719 _this.media.getPaused() && |
|
720 _this.play_on_submit |
|
721 ) { |
|
722 _this.media.play(); |
|
723 } |
|
724 _this.markers.push(_annotation); |
|
725 _this.selectedMarker = _annotation; |
|
726 _this.drawMarkers(); |
|
727 _this.player.trigger("AnnotationsList.refresh"); |
|
728 _this.player.trigger("Markers.refresh"); |
594 }, |
729 }, |
595 error: function(_xhr, _error, _thrown) { |
730 error: function (_xhr, _error, _thrown) { |
596 IriSP.log("Error when sending annotation", _thrown); |
731 ns.log("Error when sending annotation", _thrown); |
597 _export.getAnnotations().removeElement(_annotation, true); |
732 _export.getAnnotations().removeElement(_annotation, true); |
598 _this.showScreen('Failure'); |
733 _this.showScreen("Failure"); |
599 window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000)); |
734 window.setTimeout( |
600 } |
735 _this.functionWrapper("revertToMainScreen"), |
601 }); |
736 _this.after_send_timeout || 5000 |
602 this.showScreen('Sending'); |
737 ); |
603 |
738 }, |
604 return false; |
739 }); |
605 }; |
740 this.showScreen("Sending"); |
606 |
741 |
607 IriSP.Widgets.Markers.prototype.sendDelete = function(){ |
742 return false; |
608 _this = this; |
743 } |
609 _url = Mustache.to_html(this.api_endpoint_template_delete, {annotation_id: this.selectedMarker ? this.selectedMarker.id : "", project_id: this.selectedMarker.project_id? this.selectedMarker.project_id : this.project_id}); |
744 |
610 IriSP.jQuery.ajax({ |
745 sendDelete() { |
|
746 _this = this; |
|
747 _url = Mustache.render(this.api_endpoint_template_delete, { |
|
748 annotation_id: this.selectedMarker ? this.selectedMarker.id : "", |
|
749 project_id: this.selectedMarker.project_id |
|
750 ? this.selectedMarker.project_id |
|
751 : this.project_id, |
|
752 }); |
|
753 jQuery.ajax({ |
611 url: _url, |
754 url: _url, |
612 type: this.api_method_delete, |
755 type: this.api_method_delete, |
613 contentType: 'application/json', |
756 contentType: "application/json", |
614 success: function(_data) { |
757 success: function (_data) { |
615 _this.showScreen('DeleteSuccess'); |
758 _this.showScreen("DeleteSuccess"); |
616 window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000)); |
759 window.setTimeout( |
617 if (_this.pause_on_write && _this.media.getPaused() && _this.play_on_submit) { |
760 _this.functionWrapper("revertToMainScreen"), |
618 _this.media.play(); |
761 _this.after_send_timeout || 5000 |
619 } |
762 ); |
620 _this.markers.removeElement(_this.selectedMarker); |
763 if ( |
621 _this.selectedMarker = false |
764 _this.pause_on_write && |
622 _this.player.trigger("AnnotationsList.refresh"); |
765 _this.media.getPaused() && |
623 _this.player.trigger("Markers.refresh"); |
766 _this.play_on_submit |
|
767 ) { |
|
768 _this.media.play(); |
|
769 } |
|
770 _this.markers.removeElement(_this.selectedMarker); |
|
771 _this.selectedMarker = false; |
|
772 _this.player.trigger("AnnotationsList.refresh"); |
|
773 _this.player.trigger("Markers.refresh"); |
624 }, |
774 }, |
625 error: function(_xhr, _error, _thrown) { |
775 error: function (_xhr, _error, _thrown) { |
626 IriSP.log("Error when sending annotation", _thrown); |
776 ns.log("Error when sending annotation", _thrown); |
627 _this.showScreen('Failure'); |
777 _this.showScreen("Failure"); |
628 window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000)); |
778 window.setTimeout( |
629 } |
779 _this.functionWrapper("revertToMainScreen"), |
630 }); |
780 _this.after_send_timeout || 5000 |
631 this.showScreen("Sending") |
781 ); |
632 } |
782 }, |
|
783 }); |
|
784 this.showScreen("Sending"); |
|
785 } |
|
786 }; |
|
787 }; |
|
788 |
|
789 export { Markers, markersStyles }; |