Status: | Merged |
---|---|
Merged at revision: | 574 |
Proposed branch: | lp:~xzcvczx/dmedia/browser-ng |
Merge into: | lp:dmedia |
Diff against target: |
280 lines (+98/-39) 4 files modified
ui/common.js (+0/-1) ui/dmedia.js (+48/-7) ui/index.html (+19/-9) ui/style.css (+31/-22) |
To merge this branch: | bzr merge lp:~xzcvczx/dmedia/browser-ng |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
dmedia Dev | Pending | ||
Review via email: mp+141158@code.launchpad.net |
Commit message
Description of the change
Redesigned browser, Added ability to add a title to each video
To post a comment you must log in.
lp:~xzcvczx/dmedia/browser-ng
updated
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === modified file 'ui/common.js' | |||
2 | --- ui/common.js 2012-11-02 09:34:08 +0000 | |||
3 | +++ ui/common.js 2013-01-16 15:31:20 +0000 | |||
4 | @@ -304,7 +304,6 @@ | |||
5 | 304 | } | 304 | } |
6 | 305 | } | 305 | } |
7 | 306 | 306 | ||
8 | 307 | |||
9 | 308 | function Tagger(project, form) { | 307 | function Tagger(project, form) { |
10 | 309 | this.key = null; | 308 | this.key = null; |
11 | 310 | this.old_value = ''; | 309 | this.old_value = ''; |
12 | 311 | 310 | ||
13 | === modified file 'ui/dmedia.js' | |||
14 | --- ui/dmedia.js 2012-11-02 10:13:42 +0000 | |||
15 | +++ ui/dmedia.js 2013-01-16 15:31:20 +0000 | |||
16 | @@ -162,7 +162,6 @@ | |||
17 | 162 | } | 162 | } |
18 | 163 | ); | 163 | ); |
19 | 164 | 164 | ||
20 | 165 | |||
21 | 166 | function make_tag_li(remove, doc, id) { | 165 | function make_tag_li(remove, doc, id) { |
22 | 167 | var id = id || doc._id; | 166 | var id = id || doc._id; |
23 | 168 | var li = $el('li', {textContent: doc.value}); | 167 | var li = $el('li', {textContent: doc.value}); |
24 | @@ -513,7 +512,7 @@ | |||
25 | 513 | this.tags = $('tags'); | 512 | this.tags = $('tags'); |
26 | 514 | this.doc = null; | 513 | this.doc = null; |
27 | 515 | 514 | ||
29 | 516 | this.items = new Items('right'); | 515 | this.items = new Items('south'); |
30 | 517 | this.items.onchange = $bind(this.on_item_change, this); | 516 | this.items.onchange = $bind(this.on_item_change, this); |
31 | 518 | this.items.parent.onmousewheel = $bind(this.on_mousewheel, this); | 517 | this.items.parent.onmousewheel = $bind(this.on_mousewheel, this); |
32 | 519 | 518 | ||
33 | @@ -524,6 +523,9 @@ | |||
34 | 524 | window.addEventListener('keypress', $bind(this.on_window_keypress, this)); | 523 | window.addEventListener('keypress', $bind(this.on_window_keypress, this)); |
35 | 525 | 524 | ||
36 | 526 | $('back').onclick = $bind(this.hide, this); | 525 | $('back').onclick = $bind(this.hide, this); |
37 | 526 | |||
38 | 527 | //$('clip_title_form').onsubmit = $bind(this.on_title, this); | ||
39 | 528 | $('clip_title').onblur = $bind(this.on_title, this); | ||
40 | 527 | 529 | ||
41 | 528 | this.browser = $('browser_main'); | 530 | this.browser = $('browser_main'); |
42 | 529 | this.projects = $('browser_projects'); | 531 | this.projects = $('browser_projects'); |
43 | @@ -645,6 +647,26 @@ | |||
44 | 645 | 647 | ||
45 | 646 | on_doc: function(req) { | 648 | on_doc: function(req) { |
46 | 647 | this.doc = req.read(); | 649 | this.doc = req.read(); |
47 | 650 | |||
48 | 651 | $('clip_title').placeholder = this.doc.name; | ||
49 | 652 | if (this.doc.title) { | ||
50 | 653 | $('clip_title').value = this.doc.title; | ||
51 | 654 | } | ||
52 | 655 | else { | ||
53 | 656 | $('clip_title').value = ''; | ||
54 | 657 | } | ||
55 | 658 | |||
56 | 659 | if (this.doc.media == 'video') { | ||
57 | 660 | var resolution = this.doc.width + 'x' + this.doc.height; | ||
58 | 661 | var framerate = this.doc.framerate; | ||
59 | 662 | var fps = Math.round((framerate.num/framerate.denom)*100)/100; | ||
60 | 663 | var length = format_time(this.doc.duration.seconds); | ||
61 | 664 | |||
62 | 665 | $('metadata_1').textContent = length; | ||
63 | 666 | $('metadata_2').textContent = resolution; | ||
64 | 667 | $('metadata_3').textContent = fps + ' fps'; | ||
65 | 668 | } | ||
66 | 669 | |||
67 | 648 | var keys = Object.keys(this.doc.tags); | 670 | var keys = Object.keys(this.doc.tags); |
68 | 649 | var remove = $bind(this.on_tag_remove, this); | 671 | var remove = $bind(this.on_tag_remove, this); |
69 | 650 | keys.forEach(function(key) { | 672 | keys.forEach(function(key) { |
70 | @@ -654,6 +676,25 @@ | |||
71 | 654 | }, this); | 676 | }, this); |
72 | 655 | }, | 677 | }, |
73 | 656 | 678 | ||
74 | 679 | on_title: function(title) { | ||
75 | 680 | title = $('clip_title').value; | ||
76 | 681 | //console.log('Title: ' + title); | ||
77 | 682 | if (!this.doc) { | ||
78 | 683 | return; | ||
79 | 684 | } | ||
80 | 685 | if (title == '') { | ||
81 | 686 | if (this.doc.title) { | ||
82 | 687 | delete this.doc.title; | ||
83 | 688 | } | ||
84 | 689 | } | ||
85 | 690 | else { | ||
86 | 691 | if (this.doc.title != title) { | ||
87 | 692 | this.doc.title = title | ||
88 | 693 | } | ||
89 | 694 | } | ||
90 | 695 | this.project.db.save(this.doc); | ||
91 | 696 | }, | ||
92 | 697 | |||
93 | 657 | on_tag: function(tag) { | 698 | on_tag: function(tag) { |
94 | 658 | //console.log(tag); | 699 | //console.log(tag); |
95 | 659 | if (!this.doc) { | 700 | if (!this.doc) { |
96 | @@ -685,19 +726,19 @@ | |||
97 | 685 | on_mousewheel: function(event) { | 726 | on_mousewheel: function(event) { |
98 | 686 | event.preventDefault(); | 727 | event.preventDefault(); |
99 | 687 | var delta = wheel_delta(event) * 112; // 108px height + 2px border | 728 | var delta = wheel_delta(event) * 112; // 108px height + 2px border |
101 | 688 | this.items.parent.scrollTop += delta; | 729 | this.items.parent.scrollLeft += delta; |
102 | 689 | }, | 730 | }, |
103 | 690 | 731 | ||
104 | 691 | 732 | ||
105 | 692 | on_window_keydown: function(event) { | 733 | on_window_keydown: function(event) { |
106 | 693 | var keyID = event.keyIdentifier; | 734 | var keyID = event.keyIdentifier; |
108 | 694 | if (['Up', 'Down', 'Enter', 'U+007F'].indexOf(keyID) > -1 && !this.tagger.input.value) { | 735 | if (['Left', 'Right', 'Enter', 'U+007F'].indexOf(keyID) > -1 && !this.tagger.input.value) { |
109 | 695 | event.preventDefault(); | 736 | event.preventDefault(); |
110 | 696 | event.stopPropagation(); | 737 | event.stopPropagation(); |
112 | 697 | if (keyID == 'Up') { | 738 | if (keyID == 'Left') { |
113 | 698 | this.previous(); | 739 | this.previous(); |
114 | 699 | } | 740 | } |
116 | 700 | else if (keyID == 'Down') { | 741 | else if (keyID == 'Right') { |
117 | 701 | this.next(); | 742 | this.next(); |
118 | 702 | } | 743 | } |
119 | 703 | else if (keyID == 'Enter') { | 744 | else if (keyID == 'Enter') { |
120 | @@ -716,7 +757,7 @@ | |||
121 | 716 | } | 757 | } |
122 | 717 | // Don't focus on Backspace, Enter, Spacebar, or Delete | 758 | // Don't focus on Backspace, Enter, Spacebar, or Delete |
123 | 718 | if ([8, 13, 32, 127].indexOf(event.keyCode) == -1) { | 759 | if ([8, 13, 32, 127].indexOf(event.keyCode) == -1) { |
125 | 719 | this.tagger.focus(); | 760 | return; |
126 | 720 | } | 761 | } |
127 | 721 | }, | 762 | }, |
128 | 722 | 763 | ||
129 | 723 | 764 | ||
130 | === modified file 'ui/index.html' | |||
131 | --- ui/index.html 2012-11-02 10:13:42 +0000 | |||
132 | +++ ui/index.html 2013-01-16 15:31:20 +0000 | |||
133 | @@ -64,19 +64,29 @@ | |||
134 | 64 | <div id="browser_target" class="hide"> | 64 | <div id="browser_target" class="hide"> |
135 | 65 | <ul id="browser_projects"></ul> | 65 | <ul id="browser_projects"></ul> |
136 | 66 | <div id="browser_main" class="hide"> | 66 | <div id="browser_main" class="hide"> |
137 | 67 | <div id="back">← Back</div> | ||
138 | 68 | <div id="screen"><video id="player"></div> | 67 | <div id="screen"><video id="player"></div> |
143 | 69 | <form id="tag_form"> | 68 | <div id="east" class="grid_row"> |
144 | 70 | <div id="lower" class="grid_row"> | 69 | <div id="info" class="grid_row"> |
145 | 71 | <div id="add_tag" class="grid_3 grid_cell"> | 70 | <form id="clip_title_form"> |
146 | 72 | <input id="tag_value"></input> | 71 | <input id="clip_title" class="grid_3"></input> |
147 | 72 | </form> | ||
148 | 73 | <p id="metadata_1" class="metadata"></p> | ||
149 | 74 | <p id="metadata_2" class="metadata"></p> | ||
150 | 75 | <p id="metadata_3" class="metadata"></p> | ||
151 | 76 | </div> | ||
152 | 77 | <form id="tag_form"> | ||
153 | 78 | <div id="tag_block" class="grid_row"> | ||
154 | 79 | <div id="add_tag" class="grid_2 grid_cell"> | ||
155 | 80 | <input id="tag_value" placeholder="Tag"></input> | ||
156 | 73 | <ul class="matches" id="tag_matches"></ul> | 81 | <ul class="matches" id="tag_matches"></ul> |
157 | 74 | </div> | 82 | </div> |
160 | 75 | <button id="tag_button" class="grid_1 arrow" disabled>Tag →</button> | 83 | <button id="tag_button" class="grid_1 arrow" disabled>+</button> |
161 | 76 | <ul id="tags" class="grid_5 tags inset"></ul> | 84 | <ul id="tags" class="grid_3 tags inset"></ul> |
162 | 85 | . </div> | ||
163 | 86 | </form> | ||
164 | 87 | <div id="back">← Back</div> | ||
165 | 77 | </div> | 88 | </div> |
168 | 78 | </form> | 89 | <div id="south"></div> |
167 | 79 | <div id="right"></div> | ||
169 | 80 | </div> | 90 | </div> |
170 | 81 | </div> | 91 | </div> |
171 | 82 | 92 | ||
172 | 83 | 93 | ||
173 | === modified file 'ui/style.css' | |||
174 | --- ui/style.css 2012-11-02 10:13:42 +0000 | |||
175 | +++ ui/style.css 2013-01-16 15:31:20 +0000 | |||
176 | @@ -351,9 +351,9 @@ | |||
177 | 351 | position: fixed; | 351 | position: fixed; |
178 | 352 | z-index: 200; | 352 | z-index: 200; |
179 | 353 | top: 38px; | 353 | top: 38px; |
181 | 354 | bottom: 170px; | 354 | bottom: 128px; |
182 | 355 | left: 0; | 355 | left: 0; |
184 | 356 | right: 210px; | 356 | right: 262px; |
185 | 357 | background-color: black; | 357 | background-color: black; |
186 | 358 | } | 358 | } |
187 | 359 | 359 | ||
188 | @@ -365,40 +365,43 @@ | |||
189 | 365 | height: 100%; | 365 | height: 100%; |
190 | 366 | } | 366 | } |
191 | 367 | 367 | ||
193 | 368 | #lower { | 368 | #east { |
194 | 369 | position: fixed; | 369 | position: fixed; |
195 | 370 | z-index: 200; | 370 | z-index: 200; |
203 | 371 | height: 170px; | 371 | width: 262px; |
204 | 372 | bottom: 0; | 372 | top: 38px; |
205 | 373 | left: 0; | 373 | bottom: 128px; |
206 | 374 | right: 210px; | 374 | right: 0; |
207 | 375 | background-color: black; | 375 | overflow-y: auto; |
201 | 376 | overflow-x: auto; | ||
202 | 377 | overflow-y: visible; | ||
208 | 378 | background: -webkit-linear-gradient(top, #222, #333); | 376 | background: -webkit-linear-gradient(top, #222, #333); |
209 | 379 | } | 377 | } |
210 | 378 | .metadata { | ||
211 | 379 | text-align: center; | ||
212 | 380 | } | ||
213 | 380 | 381 | ||
215 | 381 | #right { | 382 | #south { |
216 | 382 | position: fixed; | 383 | position: fixed; |
217 | 383 | z-index: 200; | 384 | z-index: 200; |
219 | 384 | top: 38px; | 385 | left: 0; |
220 | 385 | bottom: 0; | 386 | bottom: 0; |
222 | 386 | width: 210px; | 387 | height: 128px; |
223 | 387 | right: 0; | 388 | right: 0; |
224 | 388 | background-color: #555; | 389 | background-color: #555; |
227 | 389 | overflow-y: scroll; | 390 | overflow-x: scroll; |
228 | 390 | overflow-x: hidden; | 391 | overflow-y: hidden; |
229 | 391 | line-height: 0; | 392 | line-height: 0; |
230 | 393 | white-space: nowrap; | ||
231 | 392 | } | 394 | } |
232 | 393 | 395 | ||
234 | 394 | #right img.thumbnail { | 396 | #south img.thumbnail { |
235 | 395 | width: 192px; | 397 | width: 192px; |
236 | 396 | height: 108px; | 398 | height: 108px; |
237 | 397 | border: 2px solid black; | 399 | border: 2px solid black; |
239 | 398 | border-top: 2px solid #111; | 400 | border-left: 2px solid #111; |
240 | 401 | overflow: hidden; | ||
241 | 399 | } | 402 | } |
242 | 400 | 403 | ||
244 | 401 | #right img.thumbnail.selected { | 404 | #south img.thumbnail.selected { |
245 | 402 | border-color: #e81f3b; | 405 | border-color: #e81f3b; |
246 | 403 | } | 406 | } |
247 | 404 | 407 | ||
248 | @@ -428,12 +431,18 @@ | |||
249 | 428 | background-color: #e81f3b; | 431 | background-color: #e81f3b; |
250 | 429 | } | 432 | } |
251 | 430 | 433 | ||
252 | 434 | .label { | ||
253 | 435 | font-weight: bold; | ||
254 | 436 | } | ||
255 | 431 | 437 | ||
256 | 432 | ul.tags { | 438 | ul.tags { |
257 | 439 | position: relative; | ||
258 | 440 | top: -8px; | ||
259 | 441 | |||
260 | 433 | font-size: 0; | 442 | font-size: 0; |
261 | 434 | list-style: none; | 443 | list-style: none; |
262 | 435 | 444 | ||
264 | 436 | height: 150px; | 445 | height: 100px; |
265 | 437 | padding: 2px; | 446 | padding: 2px; |
266 | 438 | } | 447 | } |
267 | 439 | 448 | ||
268 | @@ -473,10 +482,10 @@ | |||
269 | 473 | border-bottom:1px solid #383838; | 482 | border-bottom:1px solid #383838; |
270 | 474 | border-radius: 2px; | 483 | border-radius: 2px; |
271 | 475 | box-shadow: 0px 1px 1px rgba(0,0,0,0.7); | 484 | box-shadow: 0px 1px 1px rgba(0,0,0,0.7); |
272 | 476 | position: fixed; | ||
273 | 477 | z-index: 250; | 485 | z-index: 250; |
276 | 478 | bottom: 8px; | 486 | position: absolute; |
277 | 479 | left: 8px; | 487 | bottom: 5px; |
278 | 488 | right: 10px; | ||
279 | 480 | width: 144px; | 489 | width: 144px; |
280 | 481 | } | 490 | } |
281 | 482 | 491 |