Merge lp:~xzcvczx/dmedia/browser-ng into lp:dmedia

[xzcvczx]

Redesigned browser, Added ability to add a title to each video

[lp:~xzcvczx/dmedia/browser-ng]

571. By xzcvczx on 2012-12-23

Modified info table

572. By xzcvczx on 2013-01-16

Changed display of metadata

=== modified file 'ui/common.js'
--- ui/common.js	2012-11-02 09:34:08 +0000
+++ ui/common.js	2013-01-16 15:31:20 +0000
@@ -304,7 +304,6 @@
     }
 }
 
-
 function Tagger(project, form) {
     this.key = null;
     this.old_value = '';

=== modified file 'ui/dmedia.js'
--- ui/dmedia.js	2012-11-02 10:13:42 +0000
+++ ui/dmedia.js	2013-01-16 15:31:20 +0000
@@ -162,7 +162,6 @@
     }
 );
 
-
 function make_tag_li(remove, doc, id) {
     var id = id || doc._id;
     var li = $el('li', {textContent: doc.value});
@@ -513,7 +512,7 @@
     this.tags = $('tags');
     this.doc = null;
 
-    this.items = new Items('right');
+    this.items = new Items('south');
     this.items.onchange = $bind(this.on_item_change, this);
     this.items.parent.onmousewheel = $bind(this.on_mousewheel, this);
 
@@ -524,6 +523,9 @@
     window.addEventListener('keypress', $bind(this.on_window_keypress, this));
 
     $('back').onclick = $bind(this.hide, this);
+    
+    //$('clip_title_form').onsubmit = $bind(this.on_title, this);
+    $('clip_title').onblur = $bind(this.on_title, this);
 
     this.browser = $('browser_main');
     this.projects = $('browser_projects');
@@ -645,6 +647,26 @@
 
     on_doc: function(req) {
         this.doc = req.read();
+
+        $('clip_title').placeholder = this.doc.name;
+        if (this.doc.title) {
+            $('clip_title').value = this.doc.title;
+        } 
+        else {
+            $('clip_title').value = '';
+        }
+
+        if (this.doc.media == 'video') {
+            var resolution = this.doc.width + 'x' + this.doc.height;
+            var framerate = this.doc.framerate;
+            var fps = Math.round((framerate.num/framerate.denom)*100)/100;
+            var length = format_time(this.doc.duration.seconds);
+
+            $('metadata_1').textContent = length;
+            $('metadata_2').textContent = resolution;
+            $('metadata_3').textContent = fps + ' fps';
+        }
+        
         var keys = Object.keys(this.doc.tags);
         var remove = $bind(this.on_tag_remove, this);
         keys.forEach(function(key) {
@@ -654,6 +676,25 @@
         }, this);
     },
 
+    on_title: function(title) {
+        title = $('clip_title').value;
+        //console.log('Title: ' + title);
+        if (!this.doc) {
+            return;
+        }
+        if (title == '') {
+            if (this.doc.title) {
+                delete this.doc.title;
+            }
+        }
+        else {
+            if (this.doc.title != title) {
+                this.doc.title = title
+            }
+        }
+        this.project.db.save(this.doc);
+    },
+
     on_tag: function(tag) {
         //console.log(tag);
         if (!this.doc) {
@@ -685,19 +726,19 @@
     on_mousewheel: function(event) {
         event.preventDefault();
         var delta = wheel_delta(event) * 112;  // 108px height + 2px border
-        this.items.parent.scrollTop += delta;
+        this.items.parent.scrollLeft += delta;
     },
 
 
     on_window_keydown: function(event) {
         var keyID = event.keyIdentifier;
-        if (['Up', 'Down', 'Enter', 'U+007F'].indexOf(keyID) > -1 && !this.tagger.input.value) {
+        if (['Left', 'Right', 'Enter', 'U+007F'].indexOf(keyID) > -1 && !this.tagger.input.value) {
             event.preventDefault();
             event.stopPropagation();
-            if (keyID == 'Up') {
+            if (keyID == 'Left') {
                 this.previous();
             }
-            else if (keyID == 'Down') {
+            else if (keyID == 'Right') {
                 this.next();
             }
             else if (keyID == 'Enter') {
@@ -716,7 +757,7 @@
         }
         // Don't focus on Backspace, Enter, Spacebar, or Delete
         if ([8, 13, 32, 127].indexOf(event.keyCode) == -1) {
-            this.tagger.focus();
+            return;
         }
     },
 

=== modified file 'ui/index.html'
--- ui/index.html	2012-11-02 10:13:42 +0000
+++ ui/index.html	2013-01-16 15:31:20 +0000
@@ -64,19 +64,29 @@
     <div id="browser_target" class="hide">
         <ul id="browser_projects"></ul>
         <div id="browser_main" class="hide">
-            <div id="back">&larr; Back</div>
             <div id="screen"><video id="player"></div>
-            <form id="tag_form">
-            <div id="lower" class="grid_row">
-                <div id="add_tag" class="grid_3 grid_cell">
-                    <input id="tag_value"></input>
+            <div id="east" class="grid_row">
+                <div id="info" class="grid_row">
+                    <form id="clip_title_form">
+                        <input id="clip_title" class="grid_3"></input>
+                    </form>
+                    <p id="metadata_1" class="metadata"></p>
+                    <p id="metadata_2" class="metadata"></p>
+                    <p id="metadata_3" class="metadata"></p>
+                </div>
+                <form id="tag_form">
+                <div id="tag_block" class="grid_row">
+                <div id="add_tag" class="grid_2 grid_cell">
+                    <input id="tag_value" placeholder="Tag"></input>
                     <ul class="matches" id="tag_matches"></ul>
                 </div>
-                <button id="tag_button" class="grid_1 arrow" disabled>Tag &rarr;</button>
-                <ul id="tags" class="grid_5 tags inset"></ul>
+                <button id="tag_button" class="grid_1 arrow" disabled>+</button>
+                <ul id="tags" class="grid_3 tags inset"></ul>
+           .    </div>
+                </form>
+                <div id="back">&larr; Back</div>
             </div>
-            </form>
-            <div id="right"></div>
+            <div id="south"></div>
         </div>
     </div>
 

=== modified file 'ui/style.css'
--- ui/style.css	2012-11-02 10:13:42 +0000
+++ ui/style.css	2013-01-16 15:31:20 +0000
@@ -351,9 +351,9 @@
     position: fixed;
     z-index: 200;
     top: 38px;
-    bottom: 170px;
+    bottom: 128px;
     left: 0;
-    right: 210px;
+    right: 262px;
     background-color: black;
 }
 
@@ -365,40 +365,43 @@
     height: 100%;
 }
 
-#lower {
+#east {
     position: fixed;
     z-index: 200;
-    height: 170px;
-    bottom: 0;
-    left: 0;
-    right: 210px;
-    background-color: black;
-    overflow-x: auto;
-    overflow-y: visible;
+    width: 262px;
+    top: 38px;
+    bottom: 128px;
+    right: 0;
+    overflow-y: auto;
     background: -webkit-linear-gradient(top, #222, #333);
 }
+.metadata {
+    text-align: center;
+}
 
-#right {
+#south {
     position: fixed;
     z-index: 200;
-    top: 38px;
+    left: 0;
     bottom: 0;
-    width: 210px;
+    height: 128px;
     right: 0;
     background-color: #555;
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow-x: scroll;
+    overflow-y: hidden;
     line-height: 0;
+    white-space: nowrap;
 }
 
-#right img.thumbnail {
+#south img.thumbnail {
     width: 192px;
     height: 108px;
     border: 2px solid black;
-    border-top: 2px solid #111;
+    border-left: 2px solid #111;
+    overflow: hidden;
 }
 
-#right img.thumbnail.selected {
+#south img.thumbnail.selected {
     border-color: #e81f3b;
 }
 
@@ -428,12 +431,18 @@
     background-color: #e81f3b;
 }
 
+.label {
+    font-weight: bold;
+}
 
 ul.tags {
+    position: relative;
+    top: -8px;
+
     font-size: 0;
     list-style: none;
     
-    height: 150px;
+    height: 100px;
     padding: 2px;
 }
 
@@ -473,10 +482,10 @@
     border-bottom:1px solid #383838;
     border-radius: 2px;
     box-shadow: 0px 1px 1px rgba(0,0,0,0.7);
-    position: fixed;
     z-index: 250;
-    bottom: 8px;
-    left: 8px;
+    position: absolute;
+    bottom: 5px;
+    right: 10px; 
     width: 144px;
 }