Merge lp:~mttronchetti/novacut/history into lp:novacut

[Matteo Ronchetti]

Added lazy delete for project with a cool drop down menu called history

[lp:~mttronchetti/novacut/history]

272. By Matteo Ronchetti on 2012-06-15

added possibility to duplicate a slice with d button on keyboard

273. By Matteo Ronchetti on 2012-06-15

added possibility to duplicate a slice with d button on keyboard

[Jason Gerard DeRose (jderose)]

Matteo,

First of all, thanks for jumping into Novacut full-force! Looks like you really have a handle on interacting with CouchDB, from both JavaScript and Python. And as lots of this lacks documentation still, that's no small feat!

First problem I encountered is the "history" DB isn't getting created if it doesn't already exist. Second, my gut feeling is we don't want to store this is a 2nd database, basically because it creates a lot of consistency and sync issues.

From what I've learned so far from working with CouchDB, you really don't want the state of a "thing" to span multiple documents, and you especially don't want it to span multiple databases. Updates to documents can arrive at one node in a different order than they were saved in another, and the problem gets much more complicated if you're talking about multiple databases.

I think instead we should have some flag attribute on the novacut/project documents. Say a hypothetical "isdeleted" attribute. And we'll make the view that lists project on the starting novacut page show all novacut/project documents such that `!doc.isdeleted` and make the History menu show all novacut/project documents such that `doc.isdeleted`.

Does that make sense? Lets discuss the schema when we're next both on IRC, okay?

Thanks again!

review: Needs Fixing

[lp:~mttronchetti/novacut/history]

274. By Matteo Ronchetti on 2012-06-19

changed the way projects are removed

[Jason Gerard DeRose (jderose)]

Matteo,

Okay, this is a lot better now, thanks! I'm going to merge this because I want you to have code in this release, but fair warning... this still needs some more work, and I reserve the right to use my "executive powers" to potentially make same changes later :P

Things I really like:

1) Using the same visual representation for the project inside the History/Trash... makes it much clearer what the "thing" is in there, nice work

2) Dragging out of the History/Trash to undelete... simple, and fits with the interaction patterns we use elsewhere

Things I think need improvement:

1) As it stands, "History" is a confusing term for what this menu does, and I personally don't think this is the place to expose your project's history of snapshots (that should be inside the project).

2) I don't like using onmouseover to show the History menu. Despite it's popularity in a lot of web sites lately (Google+ and Vimeo are big offenders in my mind), I think using onmouseover to reveal something is fundamentally bad UX. It also making it difficult to keep our interactions consistent between touch and mouse (but I don't think that's the biggest reason to avoid it).

Anyway, thanks again and talk to you more once you get back from the UK!

review: Approve

=== modified file 'novacut-gtk'
--- novacut-gtk	2012-06-08 16:59:15 +0000
+++ novacut-gtk	2012-06-19 17:00:25 +0000
@@ -126,6 +126,7 @@
         'render_job': ['job_id'],
         'job_rendered': ['job_id', 'file_id', 'link'],
  	'delete_project': ['project_id'],
+ 	'sos_project': ['project_id'],
     }
 
     __Renderer = None
@@ -161,6 +162,7 @@
         hub.connect('hash_job', self.on_hash_job)
         hub.connect('render_job', self.on_render_job)
         hub.connect('delete_project', self.on_delete_project)
+        hub.connect('sos_project', self.on_sos_project)
 
     def post_env_init(self):
         views.init_views(self.db, views.novacut_main)
@@ -181,12 +183,17 @@
 
     def on_delete_project(self, hub, project_id):
         print('delete_project', project_id)
+        doc = self.db.get(project_id)		
+       	doc['isdeleted'] = True
+        self.db.post(doc)
+
+    def on_sos_project(self,hub,project_id):
+        print('sos_project', project_id)
         doc = self.db.get(project_id)
         print(doc)
-        db = self.server.database(schema.project_db_name(project_id))
-        db.delete()
-        db = self.server
-        db.delete('novacut-0',project_id,rev=doc['_rev'])
+       	doc['isdeleted'] = False
+        self.db.post(doc)
+	
 
     def on_load_project(self, hub, project_id):
         print('load_project', project_id)

=== modified file 'novacut/schema.py'
--- novacut/schema.py	2012-03-18 07:38:42 +0000
+++ novacut/schema.py	2012-06-19 17:00:25 +0000
@@ -370,6 +370,7 @@
         'atime': ts,
         'db_name': project_db_name(_id),
         'title': title,
+	'isdeleted': False,
     }
 
 

=== modified file 'ui/bucket.js'
--- ui/bucket.js	2012-04-25 04:01:29 +0000
+++ ui/bucket.js	2012-06-19 17:00:25 +0000
@@ -1735,6 +1735,19 @@
         }
     },
 
+    duplicate_selected: function(dnd) {
+	var element = $(UI.selected);
+	var doc = UI.session.get_doc(element.id);
+	var ndoc = create_slice(doc.node.src,doc.node.stop.frame);
+	ndoc.node.start.frame = doc.node.start.frame;
+	UI.session.save(ndoc);
+	var slice = new Slice(UI.session, ndoc);
+	slice.x = 64;
+	slice.y = 36;
+	UI.bucket.appendChild(slice.element);
+        UI.sequence.do_reorder();
+    },
+
     first: function() {
         var element = $(UI.selected);
         if (element && element.parentNode) {
@@ -1850,6 +1863,9 @@
                 UI.player.hold_and_resume();
             }
         },
+ 	'U+0044': function(event) {
+           UI.duplicate_selected(event);
+        },
 
         // The David Fulde key
         // aka Backspace aka Big Delete on a mac keyboard

=== modified file 'ui/projects.html'
--- ui/projects.html	2012-03-06 18:12:44 +0000
+++ ui/projects.html	2012-06-19 17:00:25 +0000
@@ -9,16 +9,109 @@
         <script src="/_apps/dmedia/common.js"></script>
         <script src="novacut.js"></script>
         <script src="projects.js"></script>
+	<script>
+	function dragstart(ev){
+   		ev.dataTransfer.setData("Text", ev.target.id);
+		ev.dataTransfer.effectAllowed = 'move';
+	}
+	function enter(ev){
+		ev.target.setAttribute("style","background-color: rgba(255,255,255,0.15); height: 2000px;width = 2000px;");
+		return false;
+	}
+	function leave(ev){
+		ev.target.setAttribute("style","height: 2000px;width = 2000px");
+		return false;
+	}
+	function d(ev){
+	        ev.preventDefault();
+		ev.target.setAttribute("style","height: 2000px;width = 2000px;");
+		var data=ev.dataTransfer.getData("Text");
+		Hub.send('sos_project', data);
+		element = document.getElementById(data);
+		element.parentNode.removeChild(element);
+		var doc = novacut.get_sync(data)		
+		UI.add_item(data,doc.title,doc.time,countFiles(data));
+		return false;
+	}
+	function over(ev){
+           ev.preventDefault();
+	}
+	</script>
+	<style>
+	.el{
+		cursor: move;
+	}
+#menu{
+	float: right;
+	padding: 3px 8px 0 0;
+        list-style: none;
+	cursor: default;
+}
+
+#menu li{
+        float: left;
+        padding: 0 0 10px 0;
+        position: relative;
+}
+
+#menu li:hover > a{
+        color: #fafafa;
+}
+#menu li:hover > ul{
+        display: block;
+}
+
+#menu ul{ /*container*/
+    min-width: 320px;
+    min-height: 26px;
+    list-style: none;
+    margin: 0px -269px;
+    padding: 4px;
+    display: none;
+    position: absolute;
+    top: 35px;
+    left: 0;
+    z-index: 99999;
+    background: #444;
+    border-radius: 10px;
+    box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
+}
+#menu ul li{ /* projects*/
+    float: none;
+    margin: 10px;
+    padding: 0;
+    display: block;
+    cursor: move;
+}
+#menu ul:after{
+    content: '';
+    position: absolute;
+    left: 284px;
+    top: -15px;
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 15px solid;
+}
+
+#menu ul:after{
+    border-bottom-color: #444;
+}
+
+	</style>
     </head>
     <body>
         <form id="new_project" class="head">
             <div class="grid_row">
                 <input placeholder="New project name" type="text" class="grid_4" autofocus>
                 <button class="grid_4" disabled>Create Project</button>
+                <ul id="menu"><li>
+                <a>History</a>
+  		<ul id="list"></ul>
+		</li></ul>
             </div>
         </form>
-
-        <ul id="projects"></ul>
-
+<ul style="height: 200px;width = 200px;" id="projects" ondragenter="enter(event)" ondragleave="leave(event)" ondrop="d(event)" ondragover="over(event);"></ul>
     </body>
 </html>

=== modified file 'ui/projects.js'
--- ui/projects.js	2012-06-08 16:59:15 +0000
+++ ui/projects.js	2012-06-19 17:00:25 +0000
@@ -5,22 +5,35 @@
     window.location.assign('cutter.html#' + project_id); 
 }
 
+function countFiles(project_id){
+	var pdb = new couch.Database("novacut-0-" + project_id.toLowerCase());
+	try{
+	    var filecount = pdb.view_sync('doc', 'type', {key: 'dmedia/file'}).rows[0].value;
+	}
+	catch(e){
+	    var filecount = 0;
+	}
+	return filecount;
+}
 
 var UI = {
     init: function() {
         UI.form = $('new_project');
         UI.input = UI.form.getElementsByTagName('input')[0];
         UI.button = UI.form.getElementsByTagName('button')[0];
-        UI.project = new Project(novacut);
-        UI.items = new Items('projects');
+        //UI.project = new Project(novacut);
+        //UI.items = new Items('projects');
         
         UI.form.onsubmit = UI.on_submit;
         UI.input.oninput = UI.on_input;
         
+	UI.hist = document.getElementById('list');
+	UI.proj = document.getElementById('projects');
         UI.load_items();
     },
 
     load_items: function() {
+	//UI.add_history("qwe","nome",3333,3);
         console.log('load_items');
         novacut.view(UI.on_items, 'project', 'title');
     },
@@ -28,28 +41,58 @@
     on_items: function(req) {
         var rows = req.read().rows;
         console.log(rows.length);
-        UI.items.replace(rows,
-            function(row, items) {
-                var pdb = new couch.Database("novacut-0-" + row.id.toLowerCase());
-                try{
-                    var filecount = pdb.view_sync('doc', 'type', {key: 'dmedia/file'}).rows[0].value;
-                }
-                catch(e){
-                    var filecount = 0;
-                }
-            
-                var li = $el('li', {'class': 'project', 'id': row.id});
-
-                var thumb = $el('div', {'class': 'thumbnail'});
-                thumb.style.backgroundImage = "url(/_apps/dmedia/novacut-avatar-192.png)";//novacut.att_css_url(row.id);
-
-                var info = $el('div', {'class': 'info'});
-                info.appendChild(
-                    $el('p', {'textContent': row.key, 'class': 'title'})
-                );
-
-                info.appendChild(
-                    $el('p', {'textContent': format_date(row.value)})
+	for(var b in rows){
+		var a = rows[b]
+		var pdb = new couch.Database("novacut-0-" + a.id.toLowerCase());
+		try{
+		    var filecount = pdb.view_sync('doc', 'type', {key: 'dmedia/file'}).rows[0].value;
+		}
+		catch(e){
+		    var filecount = 0;
+		}
+		var doc = novacut.get_sync(a.id)
+		if(!doc.isdeleted) UI.add_item(a.id,a.key,a.value,filecount);
+		else UI.add_history(a.id,a.key,a.value,filecount);
+	}
+    },
+
+    add_history: function(id,name,date,filecount){
+                var li = $el('li', {'class': 'project', 'id': id});
+		li.setAttribute('draggable', 'true');
+		li.setAttribute('ondragstart', 'dragstart(event)');
+                var thumb = $el('div', {'class': 'thumbnail'});
+                thumb.style.backgroundImage = "url(/_apps/dmedia/novacut-avatar-192.png)";//novacut.att_css_url(row.id);
+
+                var info = $el('div', {'class': 'info'});
+                info.appendChild(
+                    $el('p', {'textContent': name, 'class': 'title'})
+                );
+
+                info.appendChild(
+                    $el('p', {'textContent': format_date(date)})
+                );
+
+                info.appendChild(
+                    $el('p', {'textContent': filecount + ' files'})
+                );
+
+                li.appendChild(thumb);
+                li.appendChild(info);
+		UI.hist.appendChild(li);
+    },
+
+    add_item: function(id,name,date,filecount) {
+                var li = $el('li', {'class': 'project', 'id': id});
+                var thumb = $el('div', {'class': 'thumbnail'});
+                thumb.style.backgroundImage = "url(/_apps/dmedia/novacut-avatar-192.png)";//novacut.att_css_url(row.id);
+
+                var info = $el('div', {'class': 'info'});
+                info.appendChild(
+                    $el('p', {'textContent': name, 'class': 'title'})
+                );
+
+                info.appendChild(
+                    $el('p', {'textContent': format_date(date)})
                 );
 
                 info.appendChild(
@@ -62,21 +105,19 @@
 		del.setAttribute('src', 'delete.png');
 		del.setAttribute('align', 'right');
 		del.onclick = function(){
-		    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
- 		    Hub.send('delete_project', row.id)
+		    this.parentNode.parentNode.removeChild(this.parentNode);
+ 		    Hub.send('delete_project', id)
+		    var doc = novacut.get_sync(id)
+		    UI.add_history(id,doc.title,doc.time,countFiles(id));
 		}
 		li.appendChild(del);
                 thumb.onclick = function() {
-                    Hub.send('load_project', row.id)
+                    Hub.send('load_project', id)
                 }
                 info.onclick = function() {
-                    Hub.send('load_project', row.id)
+                    Hub.send('load_project', id)
                 }
-
-                return li;
-            }
-        );
-        UI.items.select(UI.project.id);
+		UI.proj.appendChild(li);
     },
 
     on_input: function(event) {