Merge lp:~jderose/dmedia/browser into lp:dmedia

[Jason Gerard DeRose]

sudo make me a browser

[James Raymond (jamesmr)]

review: Approve

=== modified file 'dmedia-service'
--- dmedia-service	2011-10-24 21:22:09 +0000
+++ dmedia-service	2011-12-21 13:10:29 +0000
@@ -44,7 +44,7 @@
 from dc3lib.microfiber import Database, NotFound
 
 
-__version__ = '11.10.0'
+__version__ = '11.12.0'
 BUS = 'org.freedesktop.DMedia'
 IFACE = BUS
 log = logging.getLogger()

=== modified file 'dmedia-service3'
--- dmedia-service3	2011-10-24 19:17:32 +0000
+++ dmedia-service3	2011-12-21 13:10:29 +0000
@@ -78,6 +78,8 @@
 
     def run(self):
         (self.httpd, self.port) = start_file_server(self.core.env)
+        self._peers['self'] = 'http://localhost:{}/'.format(self.port)
+        self.core.db.save(self._peers)
         self.group = dbus.system.get(
             'org.freedesktop.Avahi',
             self.avahi.EntryGroupNew(),

=== modified file 'dmedia-transcoder'
--- dmedia-transcoder	2011-11-26 08:48:07 +0000
+++ dmedia-transcoder	2011-12-21 13:10:29 +0000
@@ -272,8 +272,8 @@
             'props': {
                 'quality': 7,
                 'max-keyframe-distance': 30,
-                'speed': 1,
-                'threads': 3,
+                'speed': 2,
+                'threads': 2,
             },
         },
         'filter': {

=== modified file 'dmedia/client.py'
--- dmedia/client.py	2011-10-13 08:45:15 +0000
+++ dmedia/client.py	2011-12-21 13:10:29 +0000
@@ -380,6 +380,6 @@
         return response
 
     def get(self, ch, start=0, stop=None):
-        #headers = range_header(ch, start, stop)
-        return self.request('GET', '/'.join([ch.id, str(start), str(stop)]))
+        headers = range_header(ch, start, stop)
+        return self.request('GET', ch.id, headers=headers)
 

=== modified file 'dmedia/extractor.py'
--- dmedia/extractor.py	2011-12-17 04:09:19 +0000
+++ dmedia/extractor.py	2011-12-21 13:10:29 +0000
@@ -32,6 +32,10 @@
 from base64 import b64encode
 import time
 import calendar
+from collections import namedtuple
+
+
+Thumbnail = namedtuple('Thumbnail', 'content_type data')
 
 # exiftool adds some metadata that doesn't make sense to include:
 EXIFTOOL_IGNORE = (
@@ -205,12 +209,35 @@
             shutil.rmtree(tmp)
 
 
+def generate_thumbnail2(filename):
+    """
+    Generate thumbnail for video at *filename*.
+    """
+    try:
+        tmp = tempfile.mkdtemp(prefix='dmedia.')
+        dst = path.join(tmp, 'thumbnail.jpg')
+        check_call([
+            'totem-video-thumbnailer',
+            '-r',  # Create a "raw" thumbnail without film boarder
+            '-j',  # Save as JPEG instead of PNG
+            '-s', '384',  # 384x216 for 16:9
+            filename,
+            dst,
+        ])
+        return Thumbnail('image/jpeg', open(dst, 'rb').read())
+    except Exception:
+        return None
+    finally:
+        if path.isdir(tmp):
+            shutil.rmtree(tmp)
+
+
 def generate_cr2_thumbnail(filename):
     try:
         data = check_output([
             'ufraw-batch',
             '--embedded-image',
-            '--size=384',
+            '--size=324',
             '--compression=85',
             '--out-type=jpg',
             '--output=-',
@@ -224,6 +251,22 @@
         pass
 
 
+def generate_cr2_thumbnail2(filename):
+    try:
+        data = check_output([
+            'ufraw-batch',
+            '--embedded-image',
+            '--size=324',  # 324x216 for 3:2
+            '--compression=85',
+            '--out-type=jpg',
+            '--output=-',
+            filename,
+        ])
+        return Thumbnail('image/jpeg', data)
+    except CalledProcessError:
+        pass
+
+
 #### High-level meta-data extract/merge functions:
 
 _extractors = {}
@@ -253,6 +296,18 @@
         doc['meta'] = meta
 
 
+def merge_exif2(src):
+    exif = extract_exif(src)
+    for (key, values) in EXIF_REMAP.items():
+        for v in values:
+            if v in exif:
+                yield (key, exif[v])
+                break
+    mtime = extract_mtime_from_exif(exif)
+    if mtime is not None:
+        yield ('mtime', mtime)
+
+
 def merge_exif(src, attachments):
     exif = extract_exif(src)
     for (key, values) in EXIF_REMAP.items():
@@ -271,6 +326,18 @@
 register(merge_exif, 'jpg', 'png', 'cr2')
 
 
+def merge_video_info2(src):
+    info = extract_video_info(src)
+    for (dst_key, src_key) in TOTEM_REMAP:
+        if src_key in info:
+            value = info[src_key]
+            try:
+                value = int(value)
+            except ValueError:
+                pass
+            yield (dst_key, value)
+
+
 def merge_video_info(src, attachments):
     info = extract_video_info(src)
     for (dst_key, src_key) in TOTEM_REMAP:

=== modified file 'dmedia/importer.py'
--- dmedia/importer.py	2011-12-17 12:15:58 +0000
+++ dmedia/importer.py	2011-12-21 13:10:29 +0000
@@ -32,6 +32,7 @@
 from gettext import ngettext
 from subprocess import check_call
 import logging
+import mimetypes
 
 import microfiber
 from filestore import FileStore, scandir, batch_import_iter, statvfs
@@ -42,6 +43,7 @@
 
 
 log = logging.getLogger()
+mimetypes.init()
 
 
 def normalize_ext(filename):
@@ -261,6 +263,9 @@
                 ext = normalize_ext(file.name)
                 if ext:
                     doc['ext'] = ext
+                (mime, encoding) = mimetypes.guess_type(file.name)
+                if mime:
+                    doc['content_type'] = mime
                 if self.extract:
                     merge_metadata(file.name, doc)
                 yield ('new', file, doc)

=== modified file 'dmedia/local.py'
--- dmedia/local.py	2011-10-24 19:17:32 +0000
+++ dmedia/local.py	2011-12-21 13:10:29 +0000
@@ -187,3 +187,8 @@
         fs = self.stores.choose_local_store(doc)
         return fs.stat(_id)
 
+    def stat2(self, doc):
+        self.update_stores()
+        fs = self.stores.choose_local_store(doc)
+        return fs.stat(doc['_id'])
+

=== modified file 'dmedia/server.py'
--- dmedia/server.py	2011-10-12 23:40:17 +0000
+++ dmedia/server.py	2011-12-21 13:10:29 +0000
@@ -86,6 +86,10 @@
     status = '412 Precondition Failed'
 
 
+class BadRangeRequest(HTTPError):
+    status = '416 Requested Range Not Satisfiable'
+
+
 def get_slice(environ):
     parts = environ['PATH_INFO'].lstrip('/').split('/')
     if len(parts) > 3:
@@ -108,6 +112,84 @@
     return (_id, start, stop)
 
 
+def range_to_slice(value):
+    """
+    Convert from HTTP Range request to Python slice semantics.
+
+    Python slice semantics are quite natural to deal with, whereas the HTTP
+    Range semantics are a touch wacky, so this function will help prevent silly
+    errors.
+
+    For example, say we're requesting parts of a 10,000 byte long file.  This
+    requests the first 500 bytes:
+
+    >>> range_to_slice('bytes=0-499')
+    (0, 500)
+
+    This requests the second 500 bytes:
+
+    >>> range_to_slice('bytes=500-999')
+    (500, 1000)
+
+    All three of these request the final 500 bytes:
+
+    >>> range_to_slice('bytes=9500-9999')
+    (9500, 10000)
+    >>> range_to_slice('bytes=-500')
+    (-500, None)
+    >>> range_to_slice('bytes=9500-')
+    (9500, None)
+
+    For details on HTTP Range header, see:
+
+      http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.35
+    """
+    unit = 'bytes='
+    if not value.startswith(unit):
+        raise BadRangeRequest('bad range units')
+    value = value[len(unit):]
+    if value.startswith('-'):
+        try:
+            return (int(value), None)
+        except ValueError:
+            raise BadRangeRequest('range -start is not an integer')  
+    parts = value.split('-')
+    if not len(parts) == 2:
+        raise BadRangeRequest('not formatted as bytes=start-end')
+    try:
+        start = int(parts[0])
+    except ValueError:
+        raise BadRangeRequest('range start is not an integer')
+    try:
+        end = parts[1]
+        stop = (int(end) + 1 if end else None)
+    except ValueError:
+        raise BadRangeRequest('range end is not an integer')
+    if not (stop is None or start < stop):
+        raise BadRangeRequest('range end must be less than or equal to start')
+    return (start, stop)
+
+
+def slice_to_content_range(start, stop, length):
+    """
+    Convert Python slice to HTTP Content-Range.
+
+    For example, a slice containing the first 500 bytes of a 1234 byte file:
+
+    >>> slice_to_content_range(0, 500, 1234)
+    'bytes 0-499/1234'
+
+    Or the 2nd 500 bytes:
+
+    >>> slice_to_content_range(500, 1000, 1234)
+    'bytes 500-999/1234'
+
+    """
+    assert 0 <= start < length
+    assert start < stop <= length
+    return 'bytes {}-{}/{}'.format(start, stop - 1, length)
+
+
 class BaseWSGIMeta(type):
     def __new__(meta, name, bases, dict):
         http_methods = []
@@ -132,11 +214,34 @@
             return [e.body]
 
 
+MiB = 1024 * 1024
+
+
+class FileSlice:
+    __slots__ = ('fp', 'start', 'stop')
+
+    def __init__(self, fp, start=0, stop=None):
+        self.fp = fp
+        self.start = start
+        self.stop = stop
+
+    def __iter__(self):
+        self.fp.seek(self.start)
+        remaining = self.stop - self.start
+        while remaining:
+            read = min(remaining, MiB)
+            remaining -= read
+            data = self.fp.read(read)
+            assert len(data) == read
+            yield data
+        assert remaining == 0
+
+
 class ReadOnlyApp(BaseWSGI):
     def __init__(self, env):
         self.local = local.LocalSlave(env)
         info = {
-            'dmedia': 'Welcome',
+            'Dmedia': 'Welcome',
             'version': __version__,
             'machine_id': env.get('machine_id'),
         }
@@ -147,21 +252,43 @@
         return [self._info]
 
     def GET(self, environ, start_response):
-        if environ['PATH_INFO'] == '/':
+        path_info = environ['PATH_INFO']
+        if path_info == '/':
             return self.server_info(environ, start_response)
-        # FIXME: Also validate slice compared to file-size
-        (_id, start, stop) = get_slice(environ)
+
+        _id = path_info.lstrip('/')
+        if not (len(_id) == DIGEST_B32LEN and set(_id).issubset(B32ALPHABET)):
+            raise NotFound()
         try:
-            st = self.local.stat(_id)
+            doc = self.local.get_doc(_id)
+            st = self.local.stat2(doc)
             fp = open(st.name, 'rb')
         except Exception:
             raise NotFound()
-        _start = start * LEAF_SIZE
-        _stop = (st.size if stop is None else min(st.size, stop * LEAF_SIZE))
-        fp.seek(_start)
-        length = str(_stop - _start)
-        start_response('200 OK', [('Content-Length', length)])
-        return environ['wsgi.file_wrapper'](fp)
+
+        if doc.get('content_type'):
+            headers = [('Content-Type', doc['content_type'])]
+        else:
+            headers = []
+
+        if 'HTTP_RANGE' in environ:
+            (start, stop) = range_to_slice(environ['HTTP_RANGE'])                
+            status = '206 Partial Content'
+        else:
+            start = 0
+            stop = None
+            status = '200 OK'
+
+        stop = (st.size if stop is None else min(st.size, stop))
+        length = str(stop - start)
+        headers.append(('Content-Length', length))
+        if 'HTTP_RANGE' in environ:
+            headers.append(
+                ('Content-Range', slice_to_content_range(start, stop, st.size))
+            )
+
+        start_response(status, headers)
+        return FileSlice(fp, start, stop)
 
 
 class ReadWriteApp(ReadOnlyApp):
@@ -171,4 +298,3 @@
     def POST(self, environ, start_response):
         pass
 
-

=== modified file 'dmedia/tests/test_server.py'
--- dmedia/tests/test_server.py	2011-09-27 01:13:14 +0000
+++ dmedia/tests/test_server.py	2011-12-21 13:10:29 +0000
@@ -28,7 +28,7 @@
 from filestore import DIGEST_B32LEN, DIGEST_BYTES
 from microfiber import random_id
 
-from dmedia import server
+from dmedia import server, client
 
 
 class StartResponse:
@@ -179,6 +179,72 @@
             server.get_slice({'PATH_INFO': bad})
         self.assertEqual(cm.exception.body, b'start must be less than stop')
 
+    def test_range_to_slice(self):
+        with self.assertRaises(server.BadRangeRequest) as cm:
+            (start, stop) = server.range_to_slice('goats=0-500')
+        self.assertEqual(cm.exception.body, b'bad range units')
+
+        with self.assertRaises(server.BadRangeRequest) as cm:
+            (start, stop) = server.range_to_slice('bytes=-500-999')
+        self.assertEqual(cm.exception.body, b'range -start is not an integer')
+
+        with self.assertRaises(server.BadRangeRequest) as cm:
+            (start, stop) = server.range_to_slice('bytes=-foo')
+        self.assertEqual(cm.exception.body, b'range -start is not an integer')
+
+        with self.assertRaises(server.BadRangeRequest) as cm:
+            (start, stop) = server.range_to_slice('bytes=500')
+        self.assertEqual(cm.exception.body, b'not formatted as bytes=start-end')
+
+        with self.assertRaises(server.BadRangeRequest) as cm:
+            (start, stop) = server.range_to_slice('bytes=foo-999')
+        self.assertEqual(cm.exception.body, b'range start is not an integer')
+
+        with self.assertRaises(server.BadRangeRequest) as cm:
+            (start, stop) = server.range_to_slice('bytes=500-bar')
+        self.assertEqual(cm.exception.body, b'range end is not an integer')
+
+        with self.assertRaises(server.BadRangeRequest) as cm:
+            (start, stop) = server.range_to_slice('bytes=500-499')
+        self.assertEqual(
+            cm.exception.body,
+            b'range end must be less than or equal to start'
+        )
+
+        self.assertEqual(
+            server.range_to_slice('bytes=0-0'), (0, 1)
+        )
+        self.assertEqual(
+            server.range_to_slice('bytes=0-499'), (0, 500)
+        )
+        self.assertEqual(
+            server.range_to_slice('bytes=500-999'), (500, 1000)
+        )
+        self.assertEqual(
+            server.range_to_slice('bytes=9500-9999'), (9500, 10000)
+        )
+        self.assertEqual(
+            server.range_to_slice('bytes=9500-'), (9500, None)
+        )
+        self.assertEqual(
+            server.range_to_slice('bytes=-500'), (-500, None)
+        )
+
+        # Test the round-trip with client.bytes_range
+        slices = [
+            (0, 1),
+            (0, 500),
+            (500, 1000),
+            (9500, 10000),
+            (-500, None),
+            (9500, None),
+        ]
+        for (start, stop) in slices:
+            self.assertEqual(
+                server.range_to_slice(client.bytes_range(start, stop)),
+                (start, stop)
+            )
+
 
 class TestBaseWSGI(TestCase):
     def test_metaclass(self):

=== modified file 'dmedia/views.py'
--- dmedia/views.py	2011-11-26 09:24:37 +0000
+++ dmedia/views.py	2011-12-21 13:10:29 +0000
@@ -107,7 +107,7 @@
     if (doc.type == 'dmedia/file') {
         var key;
         for (key in doc.stored) {
-            emit(key, doc.bytes);
+            emit(key, [1, doc.bytes]);
         }
     }
 }
@@ -116,7 +116,7 @@
 file_origin = """
 function(doc) {
     if (doc.type == 'dmedia/file') {
-        emit(doc.origin, doc.bytes);
+        emit(doc.origin, [1, doc.bytes]);
     }
 }
 """
@@ -207,7 +207,7 @@
 file_ext = """
 function(doc) {
     if (doc.type == 'dmedia/file') {
-        emit(doc.ext, null);
+        emit(doc.ext, [1, doc.bytes]);
     }
 }
 """
@@ -258,6 +258,37 @@
 """
 
 
+user_video = """
+function(doc) {
+    if (doc.type == 'dmedia/file' && doc.origin == 'user') {
+        if (doc.ext == 'mov') {
+            emit(doc.ctime, doc.bytes);
+        }
+    }
+}
+"""
+
+user_audio = """
+function(doc) {
+    if (doc.type == 'dmedia/file' && doc.origin == 'user') {
+        if (doc.ext == 'wav') {
+            emit(doc.ctime, doc.bytes);
+        }
+    }
+}
+"""
+
+user_photo = """
+function(doc) {
+    if (doc.type == 'dmedia/file' && doc.origin == 'user') {
+        if (['cr2', 'jpg'].indexOf(doc.ext) >= 0) {
+            emit(doc.ctime, doc.bytes);
+        }
+    }
+}
+"""
+
+
 partition_uuid = """
 function(doc) {
     if (doc.type == 'dmedia/partition') {
@@ -282,6 +313,20 @@
 }
 """
 
+# Reduce function to both count and sum in a single view (thanks manveru!)
+_both = """
+function(key, values, rereduce) {
+    var count = 0;
+    var sum = 0;
+    var i;
+    for (i in values) {
+        count += values[i][0];
+        sum += values[i][1];
+    }
+    return [count, sum];
+}
+"""
+
 
 designs = (
     ('doc', (
@@ -300,7 +345,10 @@
     )),
 
     ('file', (
-        ('stored', file_stored, _sum),
+        ('stored', file_stored, _both),
+        ('ext', file_ext, _both),
+        ('origin', file_origin, _both),
+
         ('fragile', file_fragile, None),
         ('reclaimable', file_reclaimable, None),
         ('partial', file_partial, _sum),
@@ -308,9 +356,6 @@
         ('bytes', file_bytes, _sum),
         ('verified', file_verified, None),
         ('ctime', file_ctime, None),
-        ('ext', file_ext, _count),
-        ('origin-count', file_origin, _count),
-        ('origin-bytes', file_origin, _sum),
     )),
 
     ('user', (
@@ -318,6 +363,9 @@
         ('tags', user_tags, _count),
         ('ctime', user_ctime, None),
         ('needsproxy', user_needsproxy, None),
+        ('video', user_video, _sum),
+        ('photo', user_photo, _sum),
+        ('audio', user_audio, _sum),
     )),
 
     ('store', (

=== modified file 'gen-proxies.py'
--- gen-proxies.py	2011-11-26 09:24:37 +0000
+++ gen-proxies.py	2011-12-21 13:10:29 +0000
@@ -37,6 +37,7 @@
     proxy = create_file(ch.id, ch.file_size, ch.leaf_hashes, stored, 'proxy')
     proxy['proxyof'] = _id
     proxy['content_type'] = 'video/webm'
+    proxy['ext'] = 'webm'
     proxy['elapsed'] = elapsed
     db.save(proxy)
     doc = db.get(_id)

=== added file 'relink.py'
--- relink.py	1970-01-01 00:00:00 +0000
+++ relink.py	2011-12-21 13:10:29 +0000
@@ -0,0 +1,30 @@
+#!/usr/bin/python3
+
+import sys
+from os import path
+
+from microfiber import Database, dc3_env, Conflict, NotFound
+from dmedia.core import init_filestore
+
+parentdir = path.abspath(sys.argv[1])
+
+db = Database('dmedia', dc3_env())
+(fs, doc) = init_filestore(parentdir)
+try:
+    db.save(doc)
+except Conflict:
+    pass
+
+for st in fs:
+    print(st.id)
+    try:
+        doc = db.get(st.id)
+        doc['stored'][fs.id] = {
+            'copies': 1,
+            'mtime': st.mtime,
+            'plugin': 'filestore',
+        }
+        db.save(doc)
+    except NotFound:
+        pass
+

=== modified file 'test-client-server.py'
--- test-client-server.py	2011-10-14 04:12:14 +0000
+++ test-client-server.py	2011-12-21 13:10:29 +0000
@@ -2,6 +2,7 @@
 
 from microfiber import dc3_env
 from filestore import FileStore
+import time
 
 from dmedia.core import Core, start_file_server
 from dmedia.tests.base import TempDir
@@ -20,14 +21,11 @@
     ch = core.content_hash(row['id'])
     print(ch.id)
     dw = DownloadWriter(ch, dst)
-    while True:
-        try:
-            (start, stop) = dw.next_slice()
-            response = client.get(ch, start, stop)
-            for leaf in threaded_response_iter(response, start=start):
-                print(leaf.index, dw.write_leaf(leaf))
-        except DownloadComplete:
-            break
+    (start, stop) = dw.next_slice()
+    for i in range(stop):
+        response = client.get(ch, i, i+1)
+        for leaf in threaded_response_iter(response, start=i):
+            print(leaf.index, dw.write_leaf(leaf))
     dw.finish()
     dst.remove(ch.id)  # So we don't fill up /tmp
         

=== added file 'ui/browser.css'
--- ui/browser.css	1970-01-01 00:00:00 +0000
+++ ui/browser.css	2011-12-21 13:10:29 +0000
@@ -0,0 +1,38 @@
+body {
+    background-color: #333;
+    color: #fff;
+    font-family: Ubuntu;
+    font-size: 15px;
+    padding: 0;
+    margin: 0;
+}
+
+video {
+    background-color: #999;
+}
+
+#tray {
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 185px;
+    background-color: #000;
+    overflow-y: scroll;
+}
+
+img {
+    display: block;
+    border: 5px solid #000;
+}
+
+img.selected {
+    border-color: #fff; 
+}
+
+
+th {
+    font-weight: normal;
+    text-align: right;
+}
+

=== added file 'ui/browser.html'
--- ui/browser.html	1970-01-01 00:00:00 +0000
+++ ui/browser.html	2011-12-21 13:10:29 +0000
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<link rel="stylesheet" href="browser.css"/>
+<script src="/_apps/dc3/couch.js"></script>
+<script src="/_apps/dc3/base.js"></script>
+<script src="browser.js"></script>
+<body>
+<video width="640" height="360" id="player" controls></video>
+<div id="info">
+<table>
+<tr>
+<th>Camera:</th><td id="camera"></td>
+</tr>
+<tr>
+<th>Lens:</th><td id="lens"></td>
+</tr>
+<tr>
+<th>Aperture:</th><td id="aperture"></td>
+</tr>
+<tr>
+<th>Shutter:</th><td id="shutter"></td>
+</tr>
+<tr>
+<th>ISO:</th><td id="iso"></td>
+</tr>
+</table>
+</div>
+<div id="tray"></div>
+</body>
+</html>

=== added file 'ui/browser.js'
--- ui/browser.js	1970-01-01 00:00:00 +0000
+++ ui/browser.js	2011-12-21 13:10:29 +0000
@@ -0,0 +1,63 @@
+"use strict";
+
+var db = new couch.Database('dmedia');
+
+var UI = {
+    on_view: function(req) {
+        var rows = req.read()['rows'];
+        var tray = $('tray');
+        rows.forEach(function(row) {
+            var id = row.id;
+            var img = $el('img',
+                {
+                    id: id,
+                    src: db.att_url(id, 'thumbnail'),
+                    width: 160,
+                    height: 90,
+                }
+            );
+            img._value = row.value;
+            img.onclick = function() {
+                UI.play(id);
+            }
+            tray.appendChild(img);
+        });
+    },
+
+    on_doc: function(req) {
+        var doc = req.read();
+        var d = new Date(doc.ctime * 1000);
+        var keys = ['camera', 'lens', 'aperture', 'shutter', 'iso'];
+        keys.forEach(function(key) {
+            $(key).textContent = doc.meta[key];
+        });
+    },
+
+    play: function(id) {       
+        if (UI.selected) {
+            UI.selected.classList.remove('selected');
+        }
+        UI.selected = $(id);
+        UI.selected.classList.add('selected');
+        UI.player.src = UI.url + id;
+        UI.player.load();
+        UI.player.play();
+        db.get(UI.on_doc, id);
+    },
+
+    next: function() {
+        if (UI.selected && UI.selected.nextSibling) {
+            UI.play(UI.selected.nextSibling.id);
+        }
+    },
+}
+
+window.onload = function() {
+    UI.url = db.get_sync('_local/peers')['self'];
+    UI.info = $('info');
+    UI.player = $('player');
+    UI.player.addEventListener('ended', function() {
+        UI.next();
+    });
+    db.view(UI.on_view, 'user', 'video');
+}

=== removed file 'ui/browser.js'
--- ui/browser.js	2011-05-04 14:00:29 +0000
+++ ui/browser.js	1970-01-01 00:00:00 +0000
@@ -1,145 +0,0 @@
-"use strict";
-
-
-function Browser(id, db) {
-    this.el = $(id);
-    this.db = db;
-    this.display = $('display');
-}
-Browser.prototype = {
-    run: function() {
-        var r = this.db.view('user', 'video',
-            {include_docs: true, descending: true}
-        );
-        this.load(r.rows);
-    },
-
-    load: function(rows) {
-        rows.forEach(function(r) {
-            var self = this;
-            var doc = r.doc;
-
-            var div = $el('div', {'class': 'item'});
-            var img = $el('img', {'width': 160, 'height': 90});
-            if (doc._attachments.thumbnail) {
-                img.setAttribute('src', this.db.path([doc._id, 'thumbnail']));
-            }
-            img.onclick = function() {
-                self.get_data(doc);
-            };
-
-            var time = $el('div', {'class': 'time'});
-            time.textContent = doc.meta.duration + 's';
-
-            div.appendChild(img);
-            div.appendChild(time);
-            div.appendChild($el('div', {'class': 'star_off'}));
-            div.appendChild($el('div', {'class': 'star_on'}));
-            this.el.appendChild(div);
-        }, this);
-    },
-
-    get_data: function(doc) {
-        var el = $('meta.name');
-        if (el) {
-            el.textContent = doc.name;
-        }
-        var names = ['iso', 'aperture', 'shutter', 'focal_length',
-            'lens', 'camera'];
-        names.forEach(function(n) {
-            var el = $('meta.' + n);
-            if (el) {
-                el.textContent = doc.meta[n];
-            }
-        });
-    },
-
-
-}
-
-var selected = "none";
-
-
-
-function get_data(doc){
-    //console.log('get_data', doc);
-
-//    if (selected != "none"){
-//        //if something is selected, save the changes to it's values before loading the next object
-//        form = document.forms[0];
-//        title = form.elements["title"];
-//        tags = form.elements["tags"];
-//        description = form.elements["description"];
-//        notes = form.elements["notes"];
-//        set_data(selected, "title", title.value);
-//        set_data(selected, "tags", tags.value);
-//        set_data(selected, "description", description.value);
-//        set_data(selected, "notes", notes.value);
-//    };
-//    selected = doc._id;
-
-    var preview = document.getElementById('display');
-    var content = "<h2>Video Info</h2><p>";
-    content += "<b>File Name: </b>" + doc.basename + "<br>";
-    content += "<b>FPS: </b>" + doc.fps + "<br>";
-    content += "<b>Aperture: </b>" + doc.aperture + "<br>";
-    content += "<b>Focal Length: </b>" + doc.focal_length + "<br>";
-    content += "<b>Shutter: </b>" + doc.shutter + "<br>";
-    content += "<b>Camera: </b>" + doc.camera + "<br>";
-    content += "<b>Video Codec: </b>" + doc.codec_video + "<br>";
-    content += "<b>Resolution: </b>" + doc.width + "x" + doc.height + "<br>";
-    //info.innerHTML = content;
-
-    content += "<img src=\"data:";
-    content += doc._attachments.thumbnail.content_type;
-    content += ";base64,";
-    content += doc._attachments.thumbnail.data;
-    content += "\" width=\"192\" height=\"108\" align=\"center\"><br>";
-
-    content += "<form>";
-    content += "<b>Title: </b><input type=\"text\" class=\"field\" name=\"title\" value=\"" + doc.title + "\"><br>";
-    content += "<div class=\"star " + doc.rating + "\">" + doc.rating + "</div>";
-    content += "<b>Tags: </b><br><textarea class=\"field\" name=\"tags\" rows=\"5\" cols=\"34\">" + doc.tags + "</textarea><br>";
-    content += "<b>Description: </b><br><textarea class=\"field\" name=\"description\" rows=\"5\" cols=\"34\">" + doc.description + "</textarea><br>";
-    content += "<b>Notes: </b><br><textarea class=\"field\" name=\"notes\" rows=\"5\" cols=\"34\">" + doc.notes + "</textarea><br>";
-    content += "</form>";
-    preview.innerHTML = content;
-
-    //oText = oForm.elements["tags"];
-    //document.write(oText.value);
-
-
-};
-
-function set_data(id, tag, value){
-    return;
-    for (item in dmedia.data){
-        if (dmedia.data[item]._id == id){
-            eval("data[item]." + tag + " = \"" + value + "\"")
-        };
-    };
-};
-
-function search_for(string){
-    confirm("Really " + string + "?");
-};
-
-function close_box(){
-    var box = document.getElementById('info');
-    var dim = document.getElementById('dim');
-
-    box.className += " out";
-    dim.className = "out";
-};
-
-
-var dmedia = {
-    db: new couch.Database('dmedia', '/'),
-
-    data: [],
-
-    load: function() {
-        dmedia.browser = new Browser('browser', dmedia.db);
-        dmedia.browser.run();
-    },
-}

=== removed file 'ui/couch.js'
--- ui/couch.js	2011-11-22 10:27:54 +0000
+++ ui/couch.js	1970-01-01 00:00:00 +0000
@@ -1,500 +0,0 @@
-/*
-JavaScript port of Python3 `microfiber` CouchDB adapter:
-
-    https://launchpad.net/microfiber
-
-This takes inpiration from the CoffeeScript port by Richard Lyon (aka
-"richthegeek"):
-
-  http://bazaar.launchpad.net/~dmedia/dmedia/trunk/view/head:/dmedia/webui/data/microfiber.coffee
-
-Rather than inventing an API, this is a simple adapter for calling a REST JSON
-API like CouchDB.  The goal is to make something that doesn't need constant
-maintenances as additional features are added to the CouchDB API.
-
-For some good documentation of the CouchDB REST API, see:
-
-    http://docs.couchone.com/couchdb-api/
-
-Examples:
-
->>> var server = new couch.Server('/');
->>> server.put(null, 'mydb');  // Create database 'mydb'
-{ok: true}
->>> var database = couch.Database('mydb', '/');  // One way
->>> var database = server.database('mydb');  // Or another, does same thing
->>> var doc = {foo: 'bar'};
->>> database.save(doc);  // POST to couch, update doc _id & _rev in place
-{ok: true, id: '2c370303', rev: '1-7a00dff5'}
->>> doc
-{_id: '2c370303', _rev: '1-7a00dff5', foo: 'bar'}
->>> database.post(null, '_compact');  // Compact db 'mydb'
-{ok: true}
->>> server.post(null, ['mydb', '_compact']);  // Same as above
-{ok: true}
-
-*/
-
-"use strict";
-
-var couch = {};
-
-
-couch.errors = {
-    400: 'BadRequest',
-    401: 'Unauthorized',
-    403: 'Forbidden',
-    404: 'NotFound',
-    405: 'MethodNotAllowed',
-    406: 'NotAcceptable',
-    409: 'Conflict',
-    412: 'PreconditionFailed',
-    415: 'BadContentType',
-    416: 'BadRangeRequest',
-    417: 'ExpectationFailed',
-}
-
-
-couch.CouchRequest = function(Request) {
-    var Request = Request || XMLHttpRequest;
-    this.req = new Request();
-}
-couch.CouchRequest.prototype = {
-
-    on_readystatechange: function() {
-        if (this.req.readyState == 4) {
-            this.callback(this);
-        }
-    },
-
-    request: function(callback, method, url, obj) {
-        this.callback = callback;
-        var self = this;
-        this.req.onreadystatechange = function() {
-            self.on_readystatechange();
-        }
-        this.do_request(true, method, url, obj);
-    },
-
-    request_sync: function(method, url, obj) {
-        this.do_request(false, method, url, obj);
-    },
-
-    do_request: function(async, method, url, obj) {
-        this.req.open(method, url, async);
-        this.req.setRequestHeader('Accept', 'application/json');
-        if (method == 'POST' || method == 'PUT') {
-            this.req.setRequestHeader('Content-Type', 'application/json');
-            if (obj) {
-                this.req.send(JSON.stringify(obj));
-            }
-            else {
-                this.req.send();
-            }
-        }
-        else {
-            this.req.send();
-        }
-    },
-
-    read: function() {
-        if (!this.req.status) {
-            throw 'RequestError';
-        }
-        if (this.req.status >= 500) {
-            throw 'ServerError';
-        }
-        if (this.req.status >= 400) {
-            var error = couch.errors[this.req.status];
-            if (error) {
-                throw error;
-            }
-            throw 'ClientError';
-        }
-        if (this.req.getResponseHeader('Content-Type') == 'application/json') {
-            return JSON.parse(this.req.responseText);
-        }
-        return this.req.responseText;
-    },
-}
-
-
-couch.ChangesMonitor = function(callback, db, since) {
-    this.callback = callback;
-    this.db = db;
-    this.since = since;
-    this.monitor();
-}
-couch.ChangesMonitor.prototype = {
-    monitor: function() {
-        var self = this;
-        var callback = function(r) {
-            self.on_request(r);
-        }
-        this.req = this.db.get(callback, '_changes', 
-            {feed: 'longpoll', include_docs: true, since: this.since}
-        ); 
-    },
-
-    on_request: function(req) {
-        var result = req.read();
-        if (result.last_seq != this.since) {
-            this.since = result.last_seq;
-            this.callback(result);
-        }
-        this.monitor();
-    },
-}
-
-
-// microfiber.CouchBase
-couch.CouchBase = function(url, Request) {
-    this.url = url || '/';
-    if (this.url[this.url.length - 1] != '/') {
-        this.url = this.url + '/';
-    }
-    this.basepath = this.url;
-    this.Request = Request || XMLHttpRequest;
-}
-couch.CouchBase.prototype = {
-    path: function(parts, options) {
-        /*
-        Construct a URL relative to this.basepath.
-
-        Examples:
-
-        >>> var inst = new couch.CouchBase('/foo/');
-        >>> inst.path();
-        '/foo/'
-        >>> inst.path('bar');
-        '/foo/bar'
-        >>> inst.path(['bar', 'baz']);
-        '/foo/bar/baz'
-        >>> inst.path(['bar', 'baz'], {attachments: true});
-        '/foo/bar/baz?attachments=true'
-
-        */
-        if (!parts) {
-            var url = this.basepath;
-        }
-        else if (typeof parts == 'string') {
-            var url = this.basepath + parts;
-        }
-        else {
-            var url = this.basepath + parts.join('/');
-        }
-        if (options) {
-            var keys = [];
-            var key;
-            for (key in options) {
-                keys.push(key);
-            }
-            if (keys.length == 0) {
-                return url;
-            }
-            keys.sort();
-            var query = [];
-            keys.forEach(function(key) {
-                if (options[key] === undefined) {
-                    return;
-                }
-                if (['key', 'startkey', 'endkey'].indexOf(key) > -1) {
-                    var value = JSON.stringify(options[key]);
-                }
-                else {
-                    var value = options[key];
-                }
-                query.push(
-                    encodeURIComponent(key) + '=' + encodeURIComponent(value)
-                );
-            });
-            return url + '?' + query.join('&');
-        }
-        return url;
-    },
-
-    request: function(callback, method, obj, parts, options) {
-        var url = this.path(parts, options);
-        var req = new couch.CouchRequest(this.Request);
-        req.request(callback, method, url, obj);
-        return req;
-    },
-
-    request_sync: function(method, obj, parts, options) {
-        var url = this.path(parts, options);
-        this.req = new couch.CouchRequest(this.Request);
-        this.req.request_sync(method, url, obj);
-        return this.req.read();
-    },
-
-    put: function(callback, obj, parts, options) {
-        return this.request(callback, 'PUT', obj, parts, options);
-    },
-
-    put_sync: function(obj, parts, options) {
-        /*
-        Do a PUT request.
-
-        Examples:
-
-        var cb = new couch.CouchBase('/');
-        cb.put(null, 'foo');  # create db /foo
-        cb.put({hello: 'world'}, ['foo', 'bar']);  # create doc /foo/bar
-        cb.put({a: 1}, ['foo', 'baz'], {batch: true});  # with query option
-
-        */
-        return this.request_sync('PUT', obj, parts, options);
-    },
-
-    post: function(callback, obj, parts, options) {
-        return this.request(callback, 'POST', obj, parts, options);
-    },
-
-    post_sync: function(obj, parts, options) {
-        /*
-        Do a POST request.
-
-        Examples:
-
-        var cb = new couch.CouchBase('/');
-        cb.post(null, ['foo', '_compact']);  # compact db /foo
-        cb.post({_id: 'bar'}, 'foo');  # create doc /foo/bar
-        cb.post({_id: 'baz'}, 'foo', {batch: true});  # with query option
-
-        */
-        return this.request_sync('POST', obj, parts, options);
-    },
-
-    get: function(callback, parts, options) {
-        return this.request(callback, 'GET', null, parts, options);
-    },
-
-    get_sync: function(parts, options) {
-        /*
-        Do a GET request.
-
-        Examples:
-
-        var cb = new couch.CouchBase('/');
-        cb.get();  # info about server
-        cb.get('foo');  # info about db /foo
-        cb.get(['foo', 'bar']);  # get doc /foo/bar
-        cb.get(['foo', 'bar'], {attachments: true});  # include attachments
-        cb.get(['foo', 'bar', 'baz']);  # get attachment /foo/bar/baz
-        */
-        return this.request_sync('GET', null, parts, options);
-    },
-
-    delete: function(callback, parts, options) {
-        return this.request(callback, 'DELETE', null, parts, options);
-    },
-
-    delete_sync: function(parts, options) {
-        /*
-        Do a DELETE request.
-
-        Examples:
-
-        var cb = new couch.CouchBase('/');
-        cb.delete(['foo', 'bar', 'baz'], {rev: '1-blah'});  # delete attachment
-        cb.delete(['foo', 'bar'], {rev: '2-flop'});  # delete doc
-        cb.delete('foo');  # delete database
-        */
-        return this.request_sync('DELETE', null, parts, options);
-    },
-}
-
-
-// microfiber.Server
-couch.Server = function(url, Request) {
-    couch.CouchBase.call(this, url, Request);
-}
-couch.Server.prototype = {
-    database: function(name) {
-        /*
-        Return a new couch.Database whose base url is this.url + name.
-        */
-        return new couch.Database(name, this.url, this.Request);
-    },
-}
-couch.Server.prototype.__proto__ = couch.CouchBase.prototype;
-
-
-// microfiber.Database
-couch.Database = function(name, url, Request) {
-    /*
-    Make requests related to a database URL.
-
-    Examples:
-
-    >>> var db = new couch.Database('dmedia', '/');
-    >>> db.url;
-    "/"
-    >>> db.basepath;
-    "/dmedia/"
-    >>> db.name;
-    "dmedia"
-
-    */
-    couch.CouchBase.call(this, url, Request);
-    this.basepath = this.url + name + '/';
-    this.name = name;
-}
-couch.Database.prototype = {
-    save: function(doc) {
-        /*
-        Save *doc* to Couch, update *doc* _id and _rev in place.
-
-        Examples:
-
-        >>> var db = new couch.Database('mydb');
-        >>> var doc = {foo: 'bar'};
-        >>> db.save(doc);
-        {ok: true, id: '2c370303', rev: '1-7a00dff5'}
-        >>> doc
-        {_id: '2c370303', _rev: '1-7a00dff5', foo: 'bar'}
-
-        */
-        var r = this.post_sync(doc);
-        doc['_rev'] = r['rev'];
-        doc['_id'] = r['id'];
-        return r;
-    },
-
-    bulksave: function(docs) {
-        var rows = this.post_sync({docs: docs, all_or_nothing: true}, '_bulk_docs');
-        var i;
-        for (i in docs) {
-            docs[i]['_rev'] = rows[i]['rev'];
-            docs[i]['_id'] = rows[i]['id'];
-        }
-        return rows;
-    },
-
-    view: function(callback, design, view, options) {
-        return this.get(callback, ['_design', design, '_view', view], options);
-    },
-
-    view_sync: function(design, view, options) {
-        /*
-        Shortcut for making a GET request to a view.
-
-        No magic here, just saves you having to type "_design" and "_view" over
-        and over.  This:
-
-            Database.view(design, view, options);
-
-        Is just a shortcut for:
-
-            Database.view(['_design', design, '_view', view], options);
-        */
-        return this.get_sync(['_design', design, '_view', view], options);
-    },
-
-    att_url: function(doc_or_id, name) {
-        /*
-        Return URL of a document's attachmnet.
-        
-        Examples:
-        
-        >>> var db = new couch.Database('dmedia');
-        undefined
-        >>> db.att_url({'_id': 'foo'}, 'thumbnail');
-        "/dmedia/foo/thumbnail"
-        >>> db.att_url('foo', 'thumbnail');
-        "/dmedia/foo/thumbnail"
-        
-        */
-        if (doc_or_id instanceof Object) {
-            var _id = doc_or_id['_id'];
-        }
-        else {
-            var _id = doc_or_id;
-        }
-        return this.path([_id, name]);
-    },
-
-    monitor_changes: function(callback, since) {
-        return new couch.ChangesMonitor(callback, this, since);
-    },
-
-}
-couch.Database.prototype.__proto__ = couch.CouchBase.prototype;
-
-
-couch.Session = function(db, callback) {
-    this.db = db;
-    this.callback = callback;
-    this.docs = {};
-    this.dirty = {};
-    this.s = new couch.Server(this.db.url);
-    this.session_id = this.s.get('_uuids', {count: 1}).uuids[0];
-    console.log(this.session_id);
-}
-couch.Session.prototype = {
-    start: function() {
-        var r = this.db.get('_all_docs', {include_docs: true});
-        r.rows.forEach(function(row) {
-            var doc = row.doc;
-            this.docs[doc._id] = doc;
-        }, this);
-        var self = this;
-        var callback = function(r) {
-            self.on_changes(r);
-        }
-        var since = this.db.get().update_seq;
-        this.monitor = this.db.monitor_changes(callback, since);
-    },
-
-    on_changes: function(r) {
-        r.results.forEach(function(row) {
-            var doc = row.doc;
-            if (doc.session_id != this.session_id) {
-                this.docs[doc._id] = doc;
-                this.callback(doc);
-            }
-        }, this);
-    },
-
-    on_complete: function(req) {
-        this.req = null;
-        var rows = req.read();
-        rows.forEach(function(row) {
-            this.docs[row.id]._rev = row.rev;
-            
-        }, this);
-        if (this.pending) {
-            this.pending = false;
-            this.commit();
-        }
-    },
-
-    mark: function(doc) {
-        /*
-        Mark *doc* as dirty, will save when Session.commit() is called.
-        */
-        this.dirty[doc._id] = doc;
-        doc.session_id = this.session_id;
-    },
-
-    commit: function() {
-        var docs = [];
-        var _id;
-        for (_id in this.dirty) {
-            docs.push(this.dirty[_id]);
-        }
-        if (docs.length == 0) {
-            return;
-        }
-        if (this.req) {
-            this.pending = true;
-            return;
-        }
-        var self = this;
-        var callback = function(req) {
-            self.on_complete(req);
-        }
-        this.req = this.db.post(callback, {docs: docs, all_or_nothing: true}, '_bulk_docs');
-    },
-}
-

=== modified file 'ui/index.html'
--- ui/index.html	2011-12-17 12:15:58 +0000
+++ ui/index.html	2011-12-21 13:10:29 +0000
@@ -2,7 +2,7 @@
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <script src="couch.js"></script>
+        <script src="/_apps/dc3/couch.js"></script>
         <script src="/_apps/dc3/base.js"></script>
         <script src="signal.js"></script>
         <title>dmedia</title>
@@ -10,7 +10,7 @@
     </head>
     <body>
         <div id="header">
-            <div class="tab active" id="import">
+            <div class="tab" id="import">
                 Import 
             </div>
             <div class="tab" id="history">
@@ -24,7 +24,7 @@
             </div>
         </div>
 
-        <div id="import_target" class="content">
+        <div id="import_target" class="content hide">
             <div class="row">
                 <div class="grid_2">
                     <textarea placeholder="comma, seperated, tags"></textarea>
@@ -50,7 +50,17 @@
             <div class="row">History</div>
         </div>
         <div id="browser_target" class="content hide">
-            <div class="row">Browser</div>
+        <video width="640" height="360" id="player"></video>
+        <p>
+        <span id="aperture"></span>
+        <span id="shutter"></span>
+        <span id="iso"></span>
+        </p>
+        <p>
+        <span id="camera"></span>
+        <span id="lens"></span>
+        <p>
+        <div id="tray"></div>
         </div>
         <div id="storage_target" class="content hide">
             <div class="row">Storage</div>

=== modified file 'ui/signal.js'
--- ui/signal.js	2011-12-17 12:15:58 +0000
+++ ui/signal.js	2011-12-21 13:10:29 +0000
@@ -1,18 +1,95 @@
-db = new couch.Database('dmedia');
+"use strict";
+
+var db = new couch.Database('dmedia');
 
 var UI = {
-    new_row: function() {
-        UI.row = $el('div', {'class': 'row'});
-        UI.cards.appendChild(UI.row);
-    },
-};
+    on_doc: function(req) {
+        var doc = req.read();
+        var keys = ['camera', 'lens', 'aperture', 'shutter', 'iso'];
+        keys.forEach(function(key) {
+            var el = $(key);
+            if (el) {
+                el.textContent = doc.meta[key];
+            }
+        });
+    },
+
+    on_view: function(req) {
+        var rows = req.read()['rows'];
+        var tray = $('tray');
+        rows.forEach(function(row) {
+            var id = row.id;
+            var img = $el('img',
+                {
+                    id: id,
+                    src: db.att_url(id, 'thumbnail'),
+                }
+            );
+            img.onclick = function() {
+                UI.play(id);
+            }
+            tray.appendChild(img);
+        });
+    },
+
+    play: function(id) {
+        if (UI.selected) {
+            UI.selected.classList.remove('selected');
+        }
+        UI.selected = $(id);
+        UI.selected.classList.add('selected');
+        UI.player.pause();
+        UI.player.src = '';
+        db.get(UI.on_doc, id);
+        UI.player.src = UI.url + id;
+        UI.player.load();
+        UI.player.play();
+    },
+
+    next: function() {
+        if (UI.selected && UI.selected.nextSibling) {
+            UI.play(UI.selected.nextSibling.id);
+        }
+    },
+
+    tabinit: {},    
+
+    on_tab_changed: function(tabs, id) {
+        if (!UI.tabinit[id]) {
+            UI.tabinit[id] = true;
+            UI['init_' + id]();
+        }
+    },
+
+    init_import: function() {
+        console.log('init_import');
+    },
+
+    init_history: function() {
+        console.log('init_history'); 
+    },
+
+    init_browser: function() {
+        UI.player = $('player');
+        UI.player.addEventListener('ended', UI.next);
+        db.view(UI.on_view, 'user', 'video', {reduce: false});
+    },
+
+    init_storage: function() {
+        console.log('init_storage'); 
+    },
+    
+}
+
 
 window.onload = function() {
     UI.progressbar = new ProgressBar('progress');
     UI.total = $('total');
     UI.completed = $('completed');
     UI.cards = $('cards');
+    UI.url = db.get_sync('_local/peers')['self'];
     UI.tabs = new Tabs();
+    UI.tabs.show_tab('import');    
 }
 
 
@@ -97,6 +174,7 @@
     }
 
     var elements = document.getElementsByClassName('tab');
+    var i;
     for (i=0; i<elements.length; i++) {
         var element = elements[i];
         element.onclick = make_handler(element);
@@ -106,8 +184,6 @@
     window.addEventListener('hashchange', function() {
         self.on_hashchange();
     });
-
-    this.show_tab('import');
 }
 
 Tabs.prototype = {
@@ -127,6 +203,7 @@
         }
         this.target = $(id + '_target');
         this.target.classList.remove('hide');
+        Signal.emit('tab_changed', [this, id]);
     },
 }
 
@@ -182,13 +259,16 @@
 }
 
 
+// Lazily init-tabs so startup is faster, more responsive
+Signal.connect('tab_changed', UI.on_tab_changed);
+
+
+// All the import related signals:
 Signal.connect('batch_started',
     function(batch_id) {
         $hide('summary');
         $show('info');
         UI.cards.textContent = '';
-        //UI.new_row();
-        UI.i = 0;
         UI.total.textContent = '';
         UI.completed.textContent = '';
         UI.progressbar.progress = 0;
@@ -205,11 +285,6 @@
 
 Signal.connect('import_started',
     function(basedir, import_id, info) {
-//        if (UI.i > 0 && UI.i % 4 == 0) {
-//            UI.new_row();   
-//        }
-//        UI.i += 1;
-
         var div = $el('div', {'id': import_id, 'class': 'thumbnail'});
         var inner = $el('div');
         div.appendChild(inner);
@@ -242,7 +317,6 @@
     }
 );
 
-
 Signal.connect('batch_finalized',
     function(batch_id, stats, copies, msg) {
         $hide('info');

=== modified file 'ui/style.css'
--- ui/style.css	2011-12-17 12:48:01 +0000
+++ ui/style.css	2011-12-21 13:10:29 +0000
@@ -12,8 +12,12 @@
     font-size:16px;
     line-height:1.5em;
     color:white;
+
     background:-webkit-radial-gradient(50% 90%, 400% 100%, #51225e, #28102c);
     background-attachment:fixed;
+    /*
+    background-color: #333;
+    */
 }
 
 .hide {
@@ -84,10 +88,6 @@
     padding-left: 10px;
 }
 
-#browser_target {
-    background-color: #333;
-}
-
 #header {
     position: fixed;
     top: 0;
@@ -198,3 +198,33 @@
 .grid_4 {
     width: 920px;
 }
+
+#player {
+
+}
+
+#tray {
+    position: fixed;
+    right: 0;
+    top: 25px;
+    bottom: 0;
+    width: 212px;
+    background-color: #000;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-user-select: none;
+    z-index: 200;
+}
+
+#tray img {
+    -webkit-user-select: none;
+    display: block;
+    border: 3px solid #000;
+    width: 192px;
+    height: 108px;
+}
+
+#tray img.selected {
+    border-color: #e81f3b; 
+}
+

=== removed file 'ui/test_browser.js'
--- ui/test_browser.js	2011-04-17 22:53:45 +0000
+++ ui/test_browser.js	1970-01-01 00:00:00 +0000
@@ -1,26 +0,0 @@
-// Unit tests for browser.js
-
-"use strict";
-
-py.TestBrowser = {
-
-    test_init: function() {
-        // Retrieve by ID:
-        var db = new couch.Database('/couch/');
-        var b = new Browser('example', db);
-        py.assertTrue(b.el instanceof Element);
-        py.assertEqual(b.el.tagName, 'DIV');
-        py.assertEqual(b.el.id, 'example');
-        py.assertTrue(b.db == db);
-        var el = b.el;
-
-        // Make sure if you call with an Element, it's just reterned unchanged:
-        var b = new Browser(el, db);
-        py.assertTrue(b.el instanceof Element);
-        py.assertEqual(b.el.tagName, 'DIV');
-        py.assertEqual(b.el.id, 'example');
-        py.assertTrue(b.el == el);
-        py.assertTrue(b.db == db);
-    },
-
-}