Merge lp:~jamesmr/dmedia/browser-merge into lp:dmedia
- browser-merge
- Merge into trunk
Proposed by
James Raymond
Status: | Merged | ||||
---|---|---|---|---|---|
Merged at revision: | 449 | ||||
Proposed branch: | lp:~jamesmr/dmedia/browser-merge | ||||
Merge into: | lp:dmedia | ||||
Diff against target: |
470 lines (+406/-8) 3 files modified
ui/browser2.css (+143/-0) ui/dmedia.js (+244/-2) ui/index.html (+19/-6) |
||||
To merge this branch: | bzr merge lp:~jamesmr/dmedia/browser-merge | ||||
Related bugs: |
|
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Jason Gerard DeRose | Approve | ||
Review via email: mp+120308@code.launchpad.net |
Commit message
Description of the change
Pulled the browser code from the external browser app into the main dmedia window.
To post a comment you must log in.
lp:~jamesmr/dmedia/browser-merge
updated
- 452. By James Raymond
-
Changed thumbnails to <img> from <div>
Revision history for this message
Jason Gerard DeRose (jderose) wrote : | # |
Looks good, things are working under Quantal now that you're using <img> instead of <div> for the thumbnails. WebKitGtk bug, it seems.
review:
Approve
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === added file 'ui/browser2.css' | |||
2 | --- ui/browser2.css 1970-01-01 00:00:00 +0000 | |||
3 | +++ ui/browser2.css 2012-08-21 18:23:28 +0000 | |||
4 | @@ -0,0 +1,143 @@ | |||
5 | 1 | #browser_target{ | ||
6 | 2 | position:fixed; | ||
7 | 3 | top:40px; | ||
8 | 4 | left:0px; | ||
9 | 5 | right:0px; | ||
10 | 6 | bottom:0px; | ||
11 | 7 | } | ||
12 | 8 | |||
13 | 9 | #content { | ||
14 | 10 | position: absolute; | ||
15 | 11 | top: 40px; | ||
16 | 12 | bottom: 170px; | ||
17 | 13 | left: 0; | ||
18 | 14 | right: 210px; | ||
19 | 15 | background-color: black; | ||
20 | 16 | overflow-x: auto; | ||
21 | 17 | overflow-y: auto; | ||
22 | 18 | } | ||
23 | 19 | |||
24 | 20 | #lower { | ||
25 | 21 | position: absolute; | ||
26 | 22 | height: 170px; | ||
27 | 23 | bottom: 0; | ||
28 | 24 | left: 0; | ||
29 | 25 | right: 210px; | ||
30 | 26 | overflow-x: auto; | ||
31 | 27 | overflow-y: visible; | ||
32 | 28 | background: -webkit-linear-gradient(top, #222, #333); | ||
33 | 29 | border-top:1px solid #444; | ||
34 | 30 | } | ||
35 | 31 | |||
36 | 32 | #right { | ||
37 | 33 | position: absolute; | ||
38 | 34 | top: 40px; | ||
39 | 35 | bottom: 0; | ||
40 | 36 | width: 210px; | ||
41 | 37 | right: 0; | ||
42 | 38 | background-color: #333; | ||
43 | 39 | border-left: 1px solid #444; | ||
44 | 40 | color: white; | ||
45 | 41 | overflow-y: scroll; | ||
46 | 42 | overflow-x: hidden; | ||
47 | 43 | z-index: 200; | ||
48 | 44 | } | ||
49 | 45 | |||
50 | 46 | img.thumbnail{ | ||
51 | 47 | font-size:0px; | ||
52 | 48 | line-height:0px; | ||
53 | 49 | } | ||
54 | 50 | |||
55 | 51 | #right .thumbnail { | ||
56 | 52 | width: 192px; | ||
57 | 53 | height: 108px; | ||
58 | 54 | border: 2px solid black; | ||
59 | 55 | border-top: 2px solid #111; | ||
60 | 56 | overflow: hidden; | ||
61 | 57 | background-position: center center; | ||
62 | 58 | background-size: cover; | ||
63 | 59 | } | ||
64 | 60 | |||
65 | 61 | #right .thumbnail.selected { | ||
66 | 62 | border-color: #e81f3b; | ||
67 | 63 | } | ||
68 | 64 | |||
69 | 65 | .large #content { | ||
70 | 66 | right: 260px; | ||
71 | 67 | } | ||
72 | 68 | |||
73 | 69 | .large #lower { | ||
74 | 70 | right: 260px; | ||
75 | 71 | } | ||
76 | 72 | |||
77 | 73 | .large #right { | ||
78 | 74 | width: 260px; | ||
79 | 75 | } | ||
80 | 76 | |||
81 | 77 | .large .thumbnail { | ||
82 | 78 | width: 240px; | ||
83 | 79 | height: 135px; | ||
84 | 80 | } | ||
85 | 81 | |||
86 | 82 | #player { | ||
87 | 83 | position: absolute; | ||
88 | 84 | top: 0px; | ||
89 | 85 | left: 0px; | ||
90 | 86 | width: 100%; | ||
91 | 87 | height: 100%; | ||
92 | 88 | } | ||
93 | 89 | |||
94 | 90 | ul.matches { | ||
95 | 91 | list-style: none; | ||
96 | 92 | color: white; | ||
97 | 93 | background: -webkit-linear-gradient(top, #666, #555); | ||
98 | 94 | box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.3); | ||
99 | 95 | border-bottom-left-radius: 3px; | ||
100 | 96 | border-bottom-right-radius: 3px; | ||
101 | 97 | overflow: hidden; | ||
102 | 98 | } | ||
103 | 99 | |||
104 | 100 | ul.matches li { | ||
105 | 101 | padding: 0px 5px; | ||
106 | 102 | white-space: nowrap; | ||
107 | 103 | cursor: default; | ||
108 | 104 | -webkit-user-select: none; | ||
109 | 105 | } | ||
110 | 106 | |||
111 | 107 | ul.matches li:hover { | ||
112 | 108 | background-color: rgba(255,255,255,0.2); | ||
113 | 109 | } | ||
114 | 110 | |||
115 | 111 | ul.matches li.selected { | ||
116 | 112 | background-color: #e81f3b; | ||
117 | 113 | } | ||
118 | 114 | |||
119 | 115 | |||
120 | 116 | ul.tags { | ||
121 | 117 | font-size: 0; | ||
122 | 118 | list-style: none; | ||
123 | 119 | |||
124 | 120 | height: 150px; | ||
125 | 121 | padding: 2px; | ||
126 | 122 | } | ||
127 | 123 | |||
128 | 124 | ul.tags li { | ||
129 | 125 | margin-left: 4px; | ||
130 | 126 | margin-top:4px; | ||
131 | 127 | padding-left: 4px; | ||
132 | 128 | background: -webkit-linear-gradient(top, #eee, #ccc); | ||
133 | 129 | display: inline-block; | ||
134 | 130 | cursor: default; | ||
135 | 131 | color:#333; | ||
136 | 132 | border-radius: 3px; | ||
137 | 133 | } | ||
138 | 134 | |||
139 | 135 | ul.tags li a { | ||
140 | 136 | text-decoration: none; | ||
141 | 137 | display: inline-block; | ||
142 | 138 | color: #d12; | ||
143 | 139 | font-weight: bold; | ||
144 | 140 | text-align: center; | ||
145 | 141 | cursor: pointer; | ||
146 | 142 | width: 1.5em; | ||
147 | 143 | } | ||
148 | 0 | 144 | ||
149 | === modified file 'ui/dmedia.js' | |||
150 | --- ui/dmedia.js 2012-02-27 15:03:45 +0000 | |||
151 | +++ ui/dmedia.js 2012-08-21 18:23:28 +0000 | |||
152 | @@ -8,6 +8,9 @@ | |||
153 | 8 | UI.tabinit[id] = true; | 8 | UI.tabinit[id] = true; |
154 | 9 | UI['init_' + id](); | 9 | UI['init_' + id](); |
155 | 10 | } | 10 | } |
156 | 11 | if (UI.player){ | ||
157 | 12 | UI.player.pause(); | ||
158 | 13 | } | ||
159 | 11 | }, | 14 | }, |
160 | 12 | 15 | ||
161 | 13 | init_import: function() { | 16 | init_import: function() { |
162 | @@ -19,15 +22,68 @@ | |||
163 | 19 | }, | 22 | }, |
164 | 20 | 23 | ||
165 | 21 | init_browser: function() { | 24 | init_browser: function() { |
167 | 22 | console.log('init_browser'); | 25 | UI.player = $el('video', {'id': 'player'}); |
168 | 26 | UI.player.addEventListener('click', UI.player_click); | ||
169 | 27 | $("content").appendChild(UI.player); | ||
170 | 28 | UI.browser = new Browser(UI.importer.project, UI.player, 'right'); | ||
171 | 29 | //console.log('init_browser'); | ||
172 | 23 | }, | 30 | }, |
173 | 24 | 31 | ||
174 | 25 | init_storage: function() { | 32 | init_storage: function() { |
175 | 26 | console.log('init_storage'); | 33 | console.log('init_storage'); |
176 | 27 | }, | 34 | }, |
177 | 35 | |||
178 | 36 | player_click: function(event){ | ||
179 | 37 | if (!UI.player.paused) { | ||
180 | 38 | UI.player.pause(); | ||
181 | 39 | } | ||
182 | 40 | else { | ||
183 | 41 | UI.player.play(); | ||
184 | 42 | } | ||
185 | 43 | }, | ||
186 | 28 | 44 | ||
187 | 29 | } | 45 | } |
188 | 30 | 46 | ||
189 | 47 | function make_tag_li(remove, doc, id) { | ||
190 | 48 | var id = id || doc._id; | ||
191 | 49 | var li = $el('li', {textContent: doc.value}); | ||
192 | 50 | var a = $el('a', {textContent: 'x', title: 'Click to remove tag'}); | ||
193 | 51 | li.appendChild(a); | ||
194 | 52 | a.onclick = function() { | ||
195 | 53 | remove(id, li); | ||
196 | 54 | } | ||
197 | 55 | return li; | ||
198 | 56 | } | ||
199 | 57 | |||
200 | 58 | |||
201 | 59 | function wheel_delta(event) { | ||
202 | 60 | var delta = event.wheelDeltaY; | ||
203 | 61 | if (delta == 0) { | ||
204 | 62 | return 0; | ||
205 | 63 | } | ||
206 | 64 | var scale = (event.shiftKey) ? -10 : -1; | ||
207 | 65 | return scale * (delta / Math.abs(delta)); | ||
208 | 66 | } | ||
209 | 67 | |||
210 | 68 | |||
211 | 69 | function set_flag(div, review) { | ||
212 | 70 | if (!review) { | ||
213 | 71 | return; | ||
214 | 72 | } | ||
215 | 73 | div.appendChild( | ||
216 | 74 | $el('img', {'src': review + '.png'}) | ||
217 | 75 | ); | ||
218 | 76 | } | ||
219 | 77 | |||
220 | 78 | |||
221 | 79 | function reset_flag(id, review) { | ||
222 | 80 | var div = $(id); | ||
223 | 81 | if (!div) { | ||
224 | 82 | return; | ||
225 | 83 | } | ||
226 | 84 | div.innerHTML = null; | ||
227 | 85 | set_flag(div, review); | ||
228 | 86 | } | ||
229 | 31 | 87 | ||
230 | 32 | function Importer() { | 88 | function Importer() { |
231 | 33 | this.create_button = $('create_project'); | 89 | this.create_button = $('create_project'); |
232 | @@ -133,7 +189,193 @@ | |||
233 | 133 | 189 | ||
234 | 134 | } | 190 | } |
235 | 135 | 191 | ||
237 | 136 | 192 | function Browser(project, player, items) { | |
238 | 193 | this.player = $(player); | ||
239 | 194 | this.tags = $('tags'); | ||
240 | 195 | this.doc = null; | ||
241 | 196 | |||
242 | 197 | this.items = new Items(items); | ||
243 | 198 | this.items.onchange = $bind(this.on_item_change, this); | ||
244 | 199 | this.items.parent.onmousewheel = $bind(this.on_mousewheel, this); | ||
245 | 200 | |||
246 | 201 | this.project = project; | ||
247 | 202 | |||
248 | 203 | this.tagger = new Tagger(this.project, 'tag_form'); | ||
249 | 204 | this.tagger.ontag = $bind(this.on_tag, this); | ||
250 | 205 | |||
251 | 206 | window.addEventListener('keydown', $bind(this.on_window_keydown, this)); | ||
252 | 207 | window.addEventListener('keypress', $bind(this.on_window_keypress, this)); | ||
253 | 208 | |||
254 | 209 | this.load_items(); | ||
255 | 210 | } | ||
256 | 211 | Browser.prototype = { | ||
257 | 212 | _review: function(value) { | ||
258 | 213 | this.doc.review = value; | ||
259 | 214 | this.project.db.save(this.doc); | ||
260 | 215 | reset_flag(this.doc._id, value); | ||
261 | 216 | }, | ||
262 | 217 | |||
263 | 218 | accept: function() { | ||
264 | 219 | if (!this.doc) { | ||
265 | 220 | return; | ||
266 | 221 | } | ||
267 | 222 | this._review('accept'); | ||
268 | 223 | }, | ||
269 | 224 | |||
270 | 225 | reject: function() { | ||
271 | 226 | if (!this.doc) { | ||
272 | 227 | return; | ||
273 | 228 | } | ||
274 | 229 | this._review('reject'); | ||
275 | 230 | this.next(); | ||
276 | 231 | }, | ||
277 | 232 | |||
278 | 233 | next_needing_review: function() { | ||
279 | 234 | var rows = this.project.db.view_sync('user', 'video_needsreview', {'limit': 1}).rows; | ||
280 | 235 | if (rows.length == 1) { | ||
281 | 236 | this.items.select(rows[0].id); | ||
282 | 237 | } | ||
283 | 238 | }, | ||
284 | 239 | |||
285 | 240 | next: function() { | ||
286 | 241 | this.items.next(); | ||
287 | 242 | }, | ||
288 | 243 | |||
289 | 244 | previous: function() { | ||
290 | 245 | this.items.previous(); | ||
291 | 246 | }, | ||
292 | 247 | |||
293 | 248 | load_items: function() { | ||
294 | 249 | var callback = $bind(this.on_items, this); | ||
295 | 250 | this.project.db.view(callback, 'user', 'video'); | ||
296 | 251 | }, | ||
297 | 252 | |||
298 | 253 | on_items: function(req) { | ||
299 | 254 | var self = this; | ||
300 | 255 | var callback = function(row) { | ||
301 | 256 | var id = row.id; | ||
302 | 257 | var child = $el('img', | ||
303 | 258 | { | ||
304 | 259 | 'class': 'thumbnail', | ||
305 | 260 | 'id': row.id, | ||
306 | 261 | 'src': self.project.att_url(row.id), | ||
307 | 262 | //'textContent': row.id, | ||
308 | 263 | } | ||
309 | 264 | ); | ||
310 | 265 | child.onclick = function() { | ||
311 | 266 | self.items.select(id); | ||
312 | 267 | } | ||
313 | 268 | //child.style.backgroundImage = self.project.att_css_url(row.id); | ||
314 | 269 | |||
315 | 270 | child.draggable = true; | ||
316 | 271 | child.ondragstart = function(e) { | ||
317 | 272 | e.dataTransfer.effectAllowed = 'copy'; | ||
318 | 273 | e.dataTransfer.setData('Text', self.project.db.name + "/" + id); | ||
319 | 274 | var img = $el('img', {'src': self.project.att_url(id)}); | ||
320 | 275 | e.dataTransfer.setDragImage(img, 0, 0); | ||
321 | 276 | } | ||
322 | 277 | |||
323 | 278 | if (row.value) { | ||
324 | 279 | set_flag(child, row.value); | ||
325 | 280 | } | ||
326 | 281 | return child; | ||
327 | 282 | } | ||
328 | 283 | this.items.replace(req.read().rows, callback); | ||
329 | 284 | this.next_needing_review(); | ||
330 | 285 | }, | ||
331 | 286 | |||
332 | 287 | on_item_change: function(id) { | ||
333 | 288 | if (!id) { | ||
334 | 289 | this.doc = null; | ||
335 | 290 | this.player.pause(); | ||
336 | 291 | this.player.src = null; | ||
337 | 292 | return; | ||
338 | 293 | } | ||
339 | 294 | this.player.src = 'dmedia:' + id; | ||
340 | 295 | this.player.play(); | ||
341 | 296 | this.tagger.reset(); | ||
342 | 297 | this.tags.innerHTML = null; | ||
343 | 298 | this.project.db.get($bind(this.on_doc, this), id); | ||
344 | 299 | }, | ||
345 | 300 | |||
346 | 301 | on_doc: function(req) { | ||
347 | 302 | this.doc = req.read(); | ||
348 | 303 | var keys = Object.keys(this.doc.tags); | ||
349 | 304 | var remove = $bind(this.on_tag_remove, this); | ||
350 | 305 | keys.forEach(function(key) { | ||
351 | 306 | this.tags.appendChild | ||
352 | 307 | (make_tag_li(remove, this.doc.tags[key], key) | ||
353 | 308 | ); | ||
354 | 309 | }, this); | ||
355 | 310 | }, | ||
356 | 311 | |||
357 | 312 | on_tag: function(tag) { | ||
358 | 313 | //console.log(tag); | ||
359 | 314 | if (!this.doc) { | ||
360 | 315 | return; | ||
361 | 316 | } | ||
362 | 317 | if (!this.doc.tags) { | ||
363 | 318 | this.doc.tags = {}; | ||
364 | 319 | } | ||
365 | 320 | if (!this.doc.tags[tag._id]) { | ||
366 | 321 | var remove = $bind(this.on_tag_remove, this); | ||
367 | 322 | $prepend(make_tag_li(remove, tag), this.tags); | ||
368 | 323 | this.doc.tags[tag._id] = {key: tag.key, value: tag.value}; | ||
369 | 324 | } | ||
370 | 325 | else { | ||
371 | 326 | this.doc.tags[tag._id].key = tag.key; | ||
372 | 327 | this.doc.tags[tag._id].value = tag.value; | ||
373 | 328 | } | ||
374 | 329 | this.project.db.save(this.doc); | ||
375 | 330 | }, | ||
376 | 331 | |||
377 | 332 | on_tag_remove: function(id, li) { | ||
378 | 333 | this.tags.removeChild(li); | ||
379 | 334 | if (this.doc && this.doc.tags) { | ||
380 | 335 | delete this.doc.tags[id]; | ||
381 | 336 | this.project.db.save(this.doc); | ||
382 | 337 | } | ||
383 | 338 | }, | ||
384 | 339 | |||
385 | 340 | on_mousewheel: function(event) { | ||
386 | 341 | event.preventDefault(); | ||
387 | 342 | var delta = wheel_delta(event) * 112; // 108px height + 2px border | ||
388 | 343 | this.items.parent.scrollTop += delta; | ||
389 | 344 | }, | ||
390 | 345 | |||
391 | 346 | |||
392 | 347 | on_window_keydown: function(event) { | ||
393 | 348 | var keyID = event.keyIdentifier; | ||
394 | 349 | if (['Up', 'Down', 'Enter', 'U+007F'].indexOf(keyID) > -1 && !this.tagger.input.value) { | ||
395 | 350 | event.preventDefault(); | ||
396 | 351 | event.stopPropagation(); | ||
397 | 352 | if (keyID == 'Up') { | ||
398 | 353 | this.previous(); | ||
399 | 354 | } | ||
400 | 355 | else if (keyID == 'Down') { | ||
401 | 356 | this.next(); | ||
402 | 357 | } | ||
403 | 358 | else if (keyID == 'Enter') { | ||
404 | 359 | this.accept(); | ||
405 | 360 | } | ||
406 | 361 | else { // Delete | ||
407 | 362 | this.reject(); | ||
408 | 363 | } | ||
409 | 364 | } | ||
410 | 365 | }, | ||
411 | 366 | |||
412 | 367 | on_window_keypress: function(event) { | ||
413 | 368 | //console.log(['window keypress', event.which, event.keyCode].join(', ')); | ||
414 | 369 | if (this.tagger.isfocused) { | ||
415 | 370 | return; | ||
416 | 371 | } | ||
417 | 372 | // Don't focus on Backspace, Enter, Spacebar, or Delete | ||
418 | 373 | if ([8, 13, 32, 127].indexOf(event.keyCode) == -1) { | ||
419 | 374 | this.tagger.focus(); | ||
420 | 375 | } | ||
421 | 376 | }, | ||
422 | 377 | |||
423 | 378 | } | ||
424 | 137 | 379 | ||
425 | 138 | window.onload = function() { | 380 | window.onload = function() { |
426 | 139 | UI.progressbar = new ProgressBar('progress'); | 381 | UI.progressbar = new ProgressBar('progress'); |
427 | 140 | 382 | ||
428 | === modified file 'ui/index.html' | |||
429 | --- ui/index.html 2012-04-24 11:41:08 +0000 | |||
430 | +++ ui/index.html 2012-08-21 18:23:28 +0000 | |||
431 | @@ -4,6 +4,7 @@ | |||
432 | 4 | <link rel="stylesheet" href="grid.css"></link> | 4 | <link rel="stylesheet" href="grid.css"></link> |
433 | 5 | <link rel="stylesheet" href="style.css"></link> | 5 | <link rel="stylesheet" href="style.css"></link> |
434 | 6 | <link rel="stylesheet" href="common.css"></link> | 6 | <link rel="stylesheet" href="common.css"></link> |
435 | 7 | <link rel="stylesheet" href="browser2.css"></link> | ||
436 | 7 | <script src="/_apps/userwebkit/couch.js"></script> | 8 | <script src="/_apps/userwebkit/couch.js"></script> |
437 | 8 | <script src="/_apps/userwebkit/base.js"></script> | 9 | <script src="/_apps/userwebkit/base.js"></script> |
438 | 9 | <script src="common.js"></script> | 10 | <script src="common.js"></script> |
439 | @@ -65,13 +66,25 @@ | |||
440 | 65 | </div> | 66 | </div> |
441 | 66 | </div> | 67 | </div> |
442 | 67 | <div id="browser_target" class="hide"> | 68 | <div id="browser_target" class="hide"> |
447 | 68 | <div class="grid_row darkbar"> | 69 | <div class="grid_row darkbar"> |
448 | 69 | <select id="browser_projects" class="grid_1"></select> | 70 | <select id="browser_projects" class="grid_1"></select> |
449 | 70 | <input id="tag" class="grid_2" type="text"></input> | 71 | <input id="tag" class="grid_2" type="text"></input> |
450 | 71 | <ul id="tag_matches"></ul> | 72 | <ul id="tag_matches"></ul> |
451 | 73 | </div> | ||
452 | 74 | <div id="content"></div> | ||
453 | 75 | |||
454 | 76 | <form id="tag_form"> | ||
455 | 77 | <div id="lower" class="grid_row"> | ||
456 | 78 | <div id="add_tag" class="grid_3 grid_cell"> | ||
457 | 79 | <input id="tag_value"></input> | ||
458 | 80 | <ul class="matches" id="tag_matches"></ul> | ||
459 | 81 | </div> | ||
460 | 82 | <button id="tag_button" class="grid_1 arrow" disabled>Tag →</button> | ||
461 | 83 | <ul id="tags" class="grid_5 tags inset"></ul> | ||
462 | 72 | </div> | 84 | </div> |
465 | 73 | <video width="640" height="360" id="player"></video> | 85 | </form> |
466 | 74 | <div id="tray"></div> | 86 | |
467 | 87 | <div id="right"></div> | ||
468 | 75 | </div> | 88 | </div> |
469 | 76 | <div id="storage_target" class="hide"> | 89 | <div id="storage_target" class="hide"> |
470 | 77 | <div class="grid_row darkbar"> | 90 | <div class="grid_row darkbar"> |
I'm on Quantal testing this, but it seems rather broken. Are you sure all your files are committed?