--- 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;
+}
--- 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() {
--- 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])))
--- 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;
+}
--- 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() {