# HG changeset patch
# User veltr
# Date 1358266611 -3600
# Node ID 4bdadca1cd5a84e716dbad1e24e14cf52b0aa4a0
# Parent  be1c7b812f558acdd04f3998eed91c4ecbfb11d1
Now uses sort by weight option and unloads unnecessary video files

diff -r be1c7b812f55 -r 4bdadca1cd5a integration/css/theend.css
--- a/integration/css/theend.css	Wed Jan 09 16:51:45 2013 +0100
+++ b/integration/css/theend.css	Tue Jan 15 17:16:51 2013 +0100
@@ -583,3 +583,10 @@
 .lightBoxScroll h4 {
     font-weight: bold;
 }
+
+/* METANAV COMPENSATION */
+
+.metanav {
+    position: fixed !important;
+    z-index: 1000;
+}
diff -r be1c7b812f55 -r 4bdadca1cd5a integration/js/tagplayer.js
--- a/integration/js/tagplayer.js	Wed Jan 09 16:51:45 2013 +0100
+++ b/integration/js/tagplayer.js	Tue Jan 15 17:16:51 2013 +0100
@@ -3,7 +3,8 @@
         project = directory.remoteSource({
             url: IriSP.endpoints.mashup_by_tag,
             url_params: {
-                tag: opts.tag
+                tag: '"' + opts.tag + '"',
+                sort: "weight"
             },
             serializer: IriSP.serializers.ldt
         }),
@@ -13,7 +14,9 @@
         currentSegment,
         currentMedia,
         globalTags = {},
-        seqCount;
+        seqCount,
+        mediasInDom = [],
+        MAX_LOADED_VIDEOS = 2;
         
     var ratio = 2.37;
 
@@ -238,9 +241,7 @@
             return;
         }
         mashup.getMedias().forEach(function(m) {
-            m.show = function() {
-                addMedia(m);
-            }
+            addMedia(m);
         });
         seqCount = mashup.segments.length;
         var html = mashup.segments.map(function(s, i) {
@@ -285,6 +286,19 @@
         currentIndex = n;
         currentSegment = mashup.segments[n].annotation;
         currentMedia = currentSegment.getMedia();
+        var followingMedias = [];
+        for (var i = n; i < mashup.segments.length; i++) {
+            followingMedias.push(mashup.segments[i].getMedia());
+        }
+        followingMedias = _(followingMedias).uniq().slice(0, MAX_LOADED_VIDEOS);
+        var mediasToRemove = _(mediasInDom).difference(followingMedias);
+        _(mediasToRemove).each(function(m) {
+            m.removeFromDom();
+        });
+        followingMedias = _(followingMedias).difference(mediasInDom);
+        _(followingMedias).each(function(m) {
+            m.addToDom();
+        });
         mashup.getMedias().forEach(function(m) {
             if (m === currentMedia) {
                 m.show();
@@ -292,6 +306,7 @@
                 m.hide();
             }
         });
+        console.log("There are now",mediasInDom.length,'~',$("video").length,"<video>s in DOM");
         $("#title_sequence li").removeClass("here");
         $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");
         resizeSegmentDrag();
@@ -346,56 +361,106 @@
         resizeTagsDrag(!!tagToShow);
     }
     
+    var can_play_mp4 = !!document.createElement('video').canPlayType('video/mp4');
+    
     function addMedia(media) {
-        if (media.has_player) {
+        if (media.is_added) {
             return;
         }
-        media.has_player = true;
-        media.loaded = false;
-        media.paused = true;
+        media.is_added = true;
+        
         var videourl = video_url_transform(media.video),
             videoid = "video_" + media.id,
-            videoEl = $('<video>'),
             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
-            mediaEl = videoEl[0],
-            can_play_mp4 = !!mediaEl.canPlayType('video/mp4'),
-            can_play_webm = !!mediaEl.canPlayType('video/webm');
+            video_file = can_play_mp4 ? mp4_file : webm_file,
+            videoEl = undefined,
+            mediaEl = undefined;
         
-        videoEl.attr({
-            id : videoid
-        }).css({
-            position : "absolute",
-            left: 0,
-            top: 0,
-            width : "100%",
-            height : "100%"
-        });
-        
-        if (can_play_mp4 && can_play_webm) {
-            var mp4_src = $('<source>'),
-                webm_src = $('<source>');
-            mp4_src.attr({
-                src: mp4_file,
-                type: "video/mp4"
+        media.addToDom = function() {
+            if (videoEl) {
+                return;
+            }
+            console.log("Adding to DOM",media.title);
+            mediasInDom.push(media);
+            mediasInDom = _(mediasInDom).uniq();
+            media.loaded = false;
+            media.paused = true;
+            videoEl = $('<video>');
+            mediaEl = videoEl[0];
+            
+            videoEl.attr({
+                src : video_file,
+                id : videoid
+            }).css({
+                position : "absolute",
+                left: 0,
+                top: 0,
+                width : "100%",
+                height : "100%",
+                display: "none"
             });
-            webm_src.attr({
-                src: webm_file,
-                type: "video/webm"
+    
+            $("#video_sequence").append(videoEl);
+            
+            // Binding DOM events to media
+            
+            function getVolume() {
+                media.muted = mediaEl.muted;
+                media.volume = mediaEl.volume;
+            }
+            
+            videoEl.on("loadedmetadata", function() {
+                getVolume();
+                media.loaded = true;
+                media.trigger("loadedmetadata");
+                media.trigger("volumechange");
+            })
+            
+            videoEl.on("timeupdate", function() {
+                media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
             });
             
-            videoEl.append(mp4_src).append(webm_src);
-        } else {
-            videoEl.attr("src", can_play_mp4 ? mp4_file : webm_file);
+            videoEl.on("volumechange", function() {
+                getVolume();
+                media.trigger("volumechange");
+            })
+            
+            videoEl.on("play", function() {
+                media.trigger("play");
+            });
+            
+            videoEl.on("pause", function() {
+                media.trigger("pause");
+            });
+            
+            videoEl.on("seeking", function() {
+                media.trigger("seeking");
+            });
+            
+            videoEl.on("seeked", function() {
+                media.trigger("seeked");
+            });
         }
-
-        $("#video_sequence").append(videoEl);
         
+        media.removeFromDom = function() {
+            console.log("Removing from DOM",media.title);
+            videoEl.remove();
+            videoEl = undefined;
+            mediaEl = undefined;
+            mediasInDom = _(mediasInDom).without(media);
+        }
         media.show = function() {
+            if (!videoEl) {
+                media.addToDom();
+            }
+            console.log("Showing media",media.title);
             videoEl.show();
         }
         media.hide = function() {
-            videoEl.hide();
+            if (videoEl) {
+                videoEl.hide();
+            }
         }
         
         // Binding functions to Media Element Functions
@@ -406,7 +471,6 @@
             }
             catch (err) {}
         });
-        
         media.on("setvolume", function(_vol) {
             try {
                 media.volume = _vol;
@@ -414,7 +478,6 @@
             }
             catch (err) {}
         });
-        
         media.on("setmuted", function(_muted) {
             try {
                 media.muted = _muted;
@@ -422,60 +485,22 @@
             }
             catch (err) {}
         });
-        
         media.on("setplay", function() {
             try {
                 mediaEl.play();
             }
             catch (err) {}
         });
-        
         media.on("setpause", function() {
+            if (!mediaEl) {
+                return;
+            }
             try {
                 mediaEl.pause();
             }
             catch (err) {}
         });
         
-        // Binding DOM events to media
-        
-        function getVolume() {
-            media.muted = mediaEl.muted;
-            media.volume = mediaEl.volume;
-        }
-        
-        videoEl.on("loadedmetadata", function() {
-            getVolume();
-            media.loaded = true;
-            media.trigger("loadedmetadata");
-            media.trigger("volumechange");
-        })
-        
-        videoEl.on("timeupdate", function() {
-            media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
-        });
-        
-        videoEl.on("volumechange", function() {
-            getVolume();
-            media.trigger("volumechange");
-        })
-        
-        videoEl.on("play", function() {
-            media.trigger("play");
-        });
-        
-        videoEl.on("pause", function() {
-            media.trigger("pause");
-        });
-        
-        videoEl.on("seeking", function() {
-            media.trigger("seeking");
-        });
-        
-        videoEl.on("seeked", function() {
-            media.trigger("seeked");
-        });
-        
         // Binding UI Events and Mashup Playing to Media
         
         media.on("play", function() {
diff -r be1c7b812f55 -r 4bdadca1cd5a src/theend/__init__.py
--- a/src/theend/__init__.py	Wed Jan 09 16:51:45 2013 +0100
+++ b/src/theend/__init__.py	Tue Jan 15 17:16:51 2013 +0100
@@ -1,4 +1,4 @@
-VERSION = (1, 15, 0, "final", 0)
+VERSION = (1, 16, 0, "final", 0)
 
 VERSION_STR = unicode(".".join(map(lambda i:"%02d" % (i,), VERSION[:2])))
 
diff -r be1c7b812f55 -r 4bdadca1cd5a src/theend/static/theend/css/theend.css
--- a/src/theend/static/theend/css/theend.css	Wed Jan 09 16:51:45 2013 +0100
+++ b/src/theend/static/theend/css/theend.css	Tue Jan 15 17:16:51 2013 +0100
@@ -583,3 +583,10 @@
 .lightBoxScroll h4 {
     font-weight: bold;
 }
+
+/* METANAV COMPENSATION */
+
+.metanav {
+    position: fixed !important;
+    z-index: 1000;
+}
diff -r be1c7b812f55 -r 4bdadca1cd5a src/theend/static/theend/js/tagplayer.js
--- a/src/theend/static/theend/js/tagplayer.js	Wed Jan 09 16:51:45 2013 +0100
+++ b/src/theend/static/theend/js/tagplayer.js	Tue Jan 15 17:16:51 2013 +0100
@@ -3,7 +3,8 @@
         project = directory.remoteSource({
             url: IriSP.endpoints.mashup_by_tag,
             url_params: {
-                tag: opts.tag
+                tag: '"' + opts.tag + '"',
+                sort: "weight"
             },
             serializer: IriSP.serializers.ldt
         }),
@@ -13,7 +14,9 @@
         currentSegment,
         currentMedia,
         globalTags = {},
-        seqCount;
+        seqCount,
+        mediasInDom = [],
+        MAX_LOADED_VIDEOS = 2;
         
     var ratio = 2.37;
 
@@ -238,9 +241,7 @@
             return;
         }
         mashup.getMedias().forEach(function(m) {
-            m.show = function() {
-                addMedia(m);
-            }
+            addMedia(m);
         });
         seqCount = mashup.segments.length;
         var html = mashup.segments.map(function(s, i) {
@@ -285,6 +286,19 @@
         currentIndex = n;
         currentSegment = mashup.segments[n].annotation;
         currentMedia = currentSegment.getMedia();
+        var followingMedias = [];
+        for (var i = n; i < mashup.segments.length; i++) {
+            followingMedias.push(mashup.segments[i].getMedia());
+        }
+        followingMedias = _(followingMedias).uniq().slice(0, MAX_LOADED_VIDEOS);
+        var mediasToRemove = _(mediasInDom).difference(followingMedias);
+        _(mediasToRemove).each(function(m) {
+            m.removeFromDom();
+        });
+        followingMedias = _(followingMedias).difference(mediasInDom);
+        _(followingMedias).each(function(m) {
+            m.addToDom();
+        });
         mashup.getMedias().forEach(function(m) {
             if (m === currentMedia) {
                 m.show();
@@ -292,6 +306,7 @@
                 m.hide();
             }
         });
+        console.log("There are now",mediasInDom.length,'~',$("video").length,"<video>s in DOM");
         $("#title_sequence li").removeClass("here");
         $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");
         resizeSegmentDrag();
@@ -346,56 +361,106 @@
         resizeTagsDrag(!!tagToShow);
     }
     
+    var can_play_mp4 = !!document.createElement('video').canPlayType('video/mp4');
+    
     function addMedia(media) {
-        if (media.has_player) {
+        if (media.is_added) {
             return;
         }
-        media.has_player = true;
-        media.loaded = false;
-        media.paused = true;
+        media.is_added = true;
+        
         var videourl = video_url_transform(media.video),
             videoid = "video_" + media.id,
-            videoEl = $('<video>'),
             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
-            mediaEl = videoEl[0],
-            can_play_mp4 = !!mediaEl.canPlayType('video/mp4'),
-            can_play_webm = !!mediaEl.canPlayType('video/webm');
+            video_file = can_play_mp4 ? mp4_file : webm_file,
+            videoEl = undefined,
+            mediaEl = undefined;
         
-        videoEl.attr({
-            id : videoid
-        }).css({
-            position : "absolute",
-            left: 0,
-            top: 0,
-            width : "100%",
-            height : "100%"
-        });
-        
-        if (can_play_mp4 && can_play_webm) {
-            var mp4_src = $('<source>'),
-                webm_src = $('<source>');
-            mp4_src.attr({
-                src: mp4_file,
-                type: "video/mp4"
+        media.addToDom = function() {
+            if (videoEl) {
+                return;
+            }
+            console.log("Adding to DOM",media.title);
+            mediasInDom.push(media);
+            mediasInDom = _(mediasInDom).uniq();
+            media.loaded = false;
+            media.paused = true;
+            videoEl = $('<video>');
+            mediaEl = videoEl[0];
+            
+            videoEl.attr({
+                src : video_file,
+                id : videoid
+            }).css({
+                position : "absolute",
+                left: 0,
+                top: 0,
+                width : "100%",
+                height : "100%",
+                display: "none"
             });
-            webm_src.attr({
-                src: webm_file,
-                type: "video/webm"
+    
+            $("#video_sequence").append(videoEl);
+            
+            // Binding DOM events to media
+            
+            function getVolume() {
+                media.muted = mediaEl.muted;
+                media.volume = mediaEl.volume;
+            }
+            
+            videoEl.on("loadedmetadata", function() {
+                getVolume();
+                media.loaded = true;
+                media.trigger("loadedmetadata");
+                media.trigger("volumechange");
+            })
+            
+            videoEl.on("timeupdate", function() {
+                media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
             });
             
-            videoEl.append(mp4_src).append(webm_src);
-        } else {
-            videoEl.attr("src", can_play_mp4 ? mp4_file : webm_file);
+            videoEl.on("volumechange", function() {
+                getVolume();
+                media.trigger("volumechange");
+            })
+            
+            videoEl.on("play", function() {
+                media.trigger("play");
+            });
+            
+            videoEl.on("pause", function() {
+                media.trigger("pause");
+            });
+            
+            videoEl.on("seeking", function() {
+                media.trigger("seeking");
+            });
+            
+            videoEl.on("seeked", function() {
+                media.trigger("seeked");
+            });
         }
-
-        $("#video_sequence").append(videoEl);
         
+        media.removeFromDom = function() {
+            console.log("Removing from DOM",media.title);
+            videoEl.remove();
+            videoEl = undefined;
+            mediaEl = undefined;
+            mediasInDom = _(mediasInDom).without(media);
+        }
         media.show = function() {
+            if (!videoEl) {
+                media.addToDom();
+            }
+            console.log("Showing media",media.title);
             videoEl.show();
         }
         media.hide = function() {
-            videoEl.hide();
+            if (videoEl) {
+                videoEl.hide();
+            }
         }
         
         // Binding functions to Media Element Functions
@@ -406,7 +471,6 @@
             }
             catch (err) {}
         });
-        
         media.on("setvolume", function(_vol) {
             try {
                 media.volume = _vol;
@@ -414,7 +478,6 @@
             }
             catch (err) {}
         });
-        
         media.on("setmuted", function(_muted) {
             try {
                 media.muted = _muted;
@@ -422,60 +485,22 @@
             }
             catch (err) {}
         });
-        
         media.on("setplay", function() {
             try {
                 mediaEl.play();
             }
             catch (err) {}
         });
-        
         media.on("setpause", function() {
+            if (!mediaEl) {
+                return;
+            }
             try {
                 mediaEl.pause();
             }
             catch (err) {}
         });
         
-        // Binding DOM events to media
-        
-        function getVolume() {
-            media.muted = mediaEl.muted;
-            media.volume = mediaEl.volume;
-        }
-        
-        videoEl.on("loadedmetadata", function() {
-            getVolume();
-            media.loaded = true;
-            media.trigger("loadedmetadata");
-            media.trigger("volumechange");
-        })
-        
-        videoEl.on("timeupdate", function() {
-            media.trigger("timeupdate", new IriSP.Model.Time(1000*mediaEl.currentTime));
-        });
-        
-        videoEl.on("volumechange", function() {
-            getVolume();
-            media.trigger("volumechange");
-        })
-        
-        videoEl.on("play", function() {
-            media.trigger("play");
-        });
-        
-        videoEl.on("pause", function() {
-            media.trigger("pause");
-        });
-        
-        videoEl.on("seeking", function() {
-            media.trigger("seeking");
-        });
-        
-        videoEl.on("seeked", function() {
-            media.trigger("seeked");
-        });
-        
         // Binding UI Events and Mashup Playing to Media
         
         media.on("play", function() {