Merge lp:~jamesmr/dmedia/browser-merge into lp:dmedia

[James Raymond]

Pulled the browser code from the external browser app into the main dmedia window.

[Jason Gerard DeRose (jderose)]

I'm on Quantal testing this, but it seems rather broken. Are you sure all your files are committed?

review: Approve

[lp:~jamesmr/dmedia/browser-merge]

452. By James Raymond on 2012-08-21

Changed thumbnails to <img> from <div>

[Jason Gerard DeRose (jderose)]

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

=== added file 'ui/browser2.css'
--- ui/browser2.css	1970-01-01 00:00:00 +0000
+++ ui/browser2.css	2012-08-21 18:23:28 +0000
@@ -0,0 +1,143 @@
+#browser_target{
+    position:fixed;
+    top:40px;
+    left:0px;
+    right:0px;
+    bottom:0px;
+}
+
+#content {
+    position: absolute;
+    top: 40px;
+    bottom: 170px;
+    left: 0;
+    right: 210px;
+    background-color: black;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+#lower {
+    position: absolute;
+    height: 170px;
+    bottom: 0;
+    left: 0;
+    right: 210px;
+    overflow-x: auto;
+    overflow-y: visible;
+    background: -webkit-linear-gradient(top, #222, #333);
+    border-top:1px solid #444;
+}
+
+#right {
+    position: absolute;
+    top: 40px;
+    bottom: 0;
+    width: 210px;
+    right: 0;
+    background-color: #333;
+    border-left: 1px solid #444;
+    color: white;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    z-index: 200;
+}
+
+img.thumbnail{
+    font-size:0px;
+    line-height:0px;
+}
+
+#right .thumbnail {
+    width: 192px;
+    height: 108px;
+    border: 2px solid black;
+    border-top: 2px solid #111;
+    overflow: hidden;
+    background-position: center center;
+    background-size: cover;
+}
+
+#right .thumbnail.selected {
+    border-color: #e81f3b;
+}
+
+.large #content {
+    right: 260px;
+}
+
+.large #lower {
+    right: 260px;
+}
+
+.large #right {
+    width: 260px;
+}
+
+.large .thumbnail {
+    width: 240px;
+    height: 135px;
+}
+
+#player {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+ul.matches {
+    list-style: none;
+    color: white;
+    background: -webkit-linear-gradient(top, #666, #555);
+    box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.3);
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    overflow: hidden;
+}
+
+ul.matches li {
+    padding: 0px 5px;
+    white-space: nowrap;
+    cursor: default;
+    -webkit-user-select: none;
+}
+
+ul.matches li:hover {
+    background-color: rgba(255,255,255,0.2);
+}
+
+ul.matches li.selected {
+    background-color: #e81f3b;
+}
+
+
+ul.tags {
+    font-size: 0;
+    list-style: none;
+    
+    height: 150px;
+    padding: 2px;
+}
+
+ul.tags li {
+    margin-left: 4px;
+    margin-top:4px;
+    padding-left: 4px;
+    background: -webkit-linear-gradient(top, #eee, #ccc);
+    display: inline-block;
+    cursor: default;
+    color:#333;
+    border-radius: 3px;
+}
+
+ul.tags li a {
+    text-decoration: none;
+    display: inline-block;
+    color: #d12;
+    font-weight: bold;
+    text-align: center;
+    cursor: pointer;
+    width: 1.5em;
+}

=== modified file 'ui/dmedia.js'
--- ui/dmedia.js	2012-02-27 15:03:45 +0000
+++ ui/dmedia.js	2012-08-21 18:23:28 +0000
@@ -8,6 +8,9 @@
             UI.tabinit[id] = true;
             UI['init_' + id]();
         }
+        if (UI.player){
+            UI.player.pause();
+        }
     },
 
     init_import: function() {
@@ -19,15 +22,68 @@
     },
 
     init_browser: function() {
-        console.log('init_browser');
+        UI.player = $el('video', {'id': 'player'});
+        UI.player.addEventListener('click', UI.player_click);
+        $("content").appendChild(UI.player);
+        UI.browser = new Browser(UI.importer.project, UI.player, 'right');
+        //console.log('init_browser');
     },
 
     init_storage: function() {
         console.log('init_storage'); 
     },
+    
+    player_click: function(event){
+        if (!UI.player.paused) {
+            UI.player.pause();
+        }
+        else {
+            UI.player.play();
+        }
+    },
   
 }
 
+function make_tag_li(remove, doc, id) {
+    var id = id || doc._id;
+    var li = $el('li', {textContent: doc.value});
+    var a = $el('a', {textContent: 'x', title: 'Click to remove tag'});
+    li.appendChild(a);
+    a.onclick = function() {
+        remove(id, li);
+    }
+    return li;
+}
+
+
+function wheel_delta(event) {
+    var delta = event.wheelDeltaY;
+    if (delta == 0) {
+        return 0;
+    }
+    var scale = (event.shiftKey) ? -10 : -1;
+    return scale * (delta / Math.abs(delta));
+}
+
+
+function set_flag(div, review) {
+    if (!review) {
+        return;
+    }
+    div.appendChild(
+        $el('img', {'src': review + '.png'})
+    );
+}
+
+
+function reset_flag(id, review) {
+    var div = $(id);
+    if (!div) {
+        return;
+    }
+    div.innerHTML = null;
+    set_flag(div, review);
+}
 
 function Importer() {
     this.create_button = $('create_project');
@@ -133,7 +189,193 @@
 
 }
 
-
+function Browser(project, player, items) {
+    this.player = $(player);
+    this.tags = $('tags');
+    this.doc = null;
+
+    this.items = new Items(items);
+    this.items.onchange = $bind(this.on_item_change, this);
+    this.items.parent.onmousewheel = $bind(this.on_mousewheel, this);
+
+    this.project = project;
+
+    this.tagger = new Tagger(this.project, 'tag_form');
+    this.tagger.ontag = $bind(this.on_tag, this);
+
+    window.addEventListener('keydown', $bind(this.on_window_keydown, this));
+    window.addEventListener('keypress', $bind(this.on_window_keypress, this));
+
+    this.load_items();
+}
+Browser.prototype = {
+    _review: function(value) {
+        this.doc.review = value;
+        this.project.db.save(this.doc);
+        reset_flag(this.doc._id, value);
+    },
+
+    accept: function() {
+        if (!this.doc) {
+            return;
+        }
+        this._review('accept');
+    },
+
+    reject: function() {
+        if (!this.doc) {
+            return;
+        }
+        this._review('reject');
+        this.next();
+    },
+
+    next_needing_review: function() {
+        var rows = this.project.db.view_sync('user', 'video_needsreview', {'limit': 1}).rows;
+        if (rows.length == 1) {
+            this.items.select(rows[0].id);
+        }
+    },
+
+    next: function() {
+        this.items.next();
+    },
+
+    previous: function() {
+        this.items.previous();
+    },
+
+    load_items: function() {
+        var callback = $bind(this.on_items, this);
+        this.project.db.view(callback, 'user', 'video');
+    },
+
+    on_items: function(req) {
+        var self = this;
+        var callback = function(row) {
+            var id = row.id;
+            var child = $el('img',
+                {
+                    'class': 'thumbnail',
+                    'id': row.id,
+                    'src': self.project.att_url(row.id),
+                    //'textContent': row.id,
+                }
+            );
+            child.onclick = function() {
+                self.items.select(id);
+            }
+            //child.style.backgroundImage = self.project.att_css_url(row.id);
+            
+            child.draggable = true;
+            child.ondragstart = function(e) {
+                e.dataTransfer.effectAllowed = 'copy';
+                e.dataTransfer.setData('Text', self.project.db.name + "/" + id);
+                var img = $el('img', {'src': self.project.att_url(id)});
+                e.dataTransfer.setDragImage(img, 0, 0);
+            }
+                
+            if (row.value) {
+                set_flag(child, row.value);
+            }
+            return child;
+        }
+        this.items.replace(req.read().rows, callback);
+        this.next_needing_review();
+    },
+
+    on_item_change: function(id) {
+        if (!id) {
+            this.doc = null;
+            this.player.pause();
+            this.player.src = null;
+            return;
+        }
+        this.player.src = 'dmedia:' + id;
+        this.player.play();
+        this.tagger.reset();
+        this.tags.innerHTML = null;
+        this.project.db.get($bind(this.on_doc, this), id);
+    },
+
+    on_doc: function(req) {
+        this.doc = req.read();
+        var keys = Object.keys(this.doc.tags);
+        var remove = $bind(this.on_tag_remove, this);
+        keys.forEach(function(key) {
+            this.tags.appendChild
+                (make_tag_li(remove, this.doc.tags[key], key)
+            );
+        }, this);
+    },
+
+    on_tag: function(tag) {
+        //console.log(tag);
+        if (!this.doc) {
+            return;
+        }
+        if (!this.doc.tags) {
+            this.doc.tags = {};
+        } 
+        if (!this.doc.tags[tag._id]) {
+            var remove = $bind(this.on_tag_remove, this);
+            $prepend(make_tag_li(remove, tag), this.tags);
+            this.doc.tags[tag._id] = {key: tag.key, value: tag.value};
+        }
+        else {
+            this.doc.tags[tag._id].key = tag.key;
+            this.doc.tags[tag._id].value = tag.value;
+        }
+        this.project.db.save(this.doc);
+    },
+
+    on_tag_remove: function(id, li) {
+        this.tags.removeChild(li);
+        if (this.doc && this.doc.tags) {
+            delete this.doc.tags[id];
+            this.project.db.save(this.doc);
+        }
+    },
+
+    on_mousewheel: function(event) {
+        event.preventDefault();
+        var delta = wheel_delta(event) * 112;  // 108px height + 2px border
+        this.items.parent.scrollTop += delta;
+    },
+
+
+    on_window_keydown: function(event) {
+        var keyID = event.keyIdentifier;
+        if (['Up', 'Down', 'Enter', 'U+007F'].indexOf(keyID) > -1 && !this.tagger.input.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (keyID == 'Up') {
+                this.previous();
+            }
+            else if (keyID == 'Down') {
+                this.next();
+            }
+            else if (keyID == 'Enter') {
+                this.accept();
+            }
+            else { // Delete
+                this.reject();
+            }
+        }
+    },
+
+    on_window_keypress: function(event) {
+        //console.log(['window keypress', event.which, event.keyCode].join(', '));
+        if (this.tagger.isfocused) {
+            return;   
+        }
+        // Don't focus on Backspace, Enter, Spacebar, or Delete
+        if ([8, 13, 32, 127].indexOf(event.keyCode) == -1) {
+            this.tagger.focus();
+        }
+    },
+
+}
 
 window.onload = function() {
     UI.progressbar = new ProgressBar('progress');

=== modified file 'ui/index.html'
--- ui/index.html	2012-04-24 11:41:08 +0000
+++ ui/index.html	2012-08-21 18:23:28 +0000
@@ -4,6 +4,7 @@
         <link rel="stylesheet" href="grid.css"></link>
         <link rel="stylesheet" href="style.css"></link>
         <link rel="stylesheet" href="common.css"></link>
+        <link rel="stylesheet" href="browser2.css"></link>
         <script src="/_apps/userwebkit/couch.js"></script>
         <script src="/_apps/userwebkit/base.js"></script>
         <script src="common.js"></script>
@@ -65,13 +66,25 @@
                 </div>
             </div>
             <div id="browser_target" class="hide">
-                    <div class="grid_row darkbar">
-                        <select id="browser_projects" class="grid_1"></select>
-                        <input id="tag" class="grid_2" type="text"></input>
-                        <ul id="tag_matches"></ul>
+                <div class="grid_row darkbar">
+                    <select id="browser_projects" class="grid_1"></select>
+                    <input id="tag" class="grid_2" type="text"></input>
+                    <ul id="tag_matches"></ul>
+                </div>
+                <div id="content"></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>
+                            <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>
                     </div>
-                    <video width="640" height="360" id="player"></video>
-                    <div id="tray"></div>
+                </form>
+
+                <div id="right"></div>
             </div>
             <div id="storage_target" class="hide">
                 <div class="grid_row darkbar">