festivalaix: comparison player/js/player.js

Mercurial Mercurial > festivalaix / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

player/js/player.js

changeset 19	a07c2128b7c1
parent 17	150ccacec493
parent 18	b8a45e2fd6fd
child 20	8c14a340a221

equal deleted inserted replaced

-:150ccacec493
+:a07c2128b7c1
 IriSP.htmlPlayer(
 myMedia,
 $(".video-container"),
 {
-width: 1000,
-height: 560,
 autostart: true,
 url_transform: function(src) {
 return [{
 type: "video/mp4",
 src: src.replace(/\.[\d\w]+$/,'.mp4')
 }
 }
 );
 myMedia.on("timeupdate", function(t) {
-var progress = $(".progress-indicator"),
+var pos = $(".chapters-bar").width() * t / myMedia.duration;
-pos = ($(".chapters-bar").width() - 2 * progress.width()) * t / myMedia.duration;
+$(".progress-indicator").css("left",pos);
-progress.css("left",pos);
+$(".elapsed").css("width", pos);
 });
 myMedia.on("play", function() {
 $(".play-button").addClass("pause");
 });
 myMedia.on("pause", function() {
 $(".play-button").removeClass("pause");
 });
+function showAtMousePos(evt) {
+var pos = evt.pageX - $(".timeline").offset().left;
+$(".mouse-progress-indicator").css("left", pos);
+return pos;
+}
+$(".timeline").mouseenter(function(e) {
+$(".mouse-progress-indicator").show();
+showAtMousePos(e);
+}).mouseleave(function(e) {
+$(".mouse-progress-indicator").hide();
+}).mousemove(showAtMousePos)
+.click(function(e) {
+myMedia.setCurrentTime( showAtMousePos(e) * myMedia.duration / $(".timeline").width());
+});
 var tags = myProject.getTags().sortBy(function(t) {
 return - t.getRelated("annotation").length;
-}).slice(0,12),
+}).slice(0,20).sortBy(function(t) {
+return t.title;
+}),
 tagTemplate = _.template('<li data-tag-id="<%- id %>" class="tag"><%- title %></li>'),
 clickedTag = null,
 lastTag = null;
 $(".tags-list").html(tags.map(tagTemplate).join(""));
 $(".tags-title").mouseenter(function() {
 $(".tags-list").stop().slideDown();
-});
+}).click(function() {
-$(".tags").mouseleave(function() {
-$(".tags-list").stop().slideUp();
-});
-$("body").click(function() {
 if (clickedTag) {
 $(".found").removeClass("found");
 clickedTag = null;
 }
 return false;
+});
+$(".tags").mouseleave(function() {
+$(".tags-list").stop().slideUp();
 });
 function showTag(tagId) {
 $(".found").removeClass("found");
 var tag = myProject.getElement(tagId);
 $(".tag").hover(function() {
 showTag($(this).attr("data-tag-id"));
 }, function() {
 showTag(clickedTag);
 }).click(function() {
-clickedTag = lastTag;
+if (clickedTag == lastTag) {
+clickedTag = null
+} else {
+clickedTag = lastTag;
+}
 return false;
 });
 var chapters = myProject.getAnnotationsByTypeTitle("chapitrage"),
 } else {
 myMedia.pause();
 }
 return false;
 });
-$(".progress-indicator").draggable({
-axis: "x",
-containment: "parent",
-drag: function(e, ui) {
-var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".chapters-bar").width() - 2 * ui.helper.width() );
-myMedia.setCurrentTime(t);
-}
-});
 var pictoTemplate = _.template(
 '<li class="<%- type %>"><span class="picto"><a href="#"></a></span>'
 + '<span class="picto-title"><%- annotation.title %></span></li>'
 );
 currentAnnotation = annotationinfo;
 annotationinfo.both.addClass("current");
-$(".chapters-bar").addClass("annotation-onscreen");
+$(".timelines").addClass("annotation-onscreen");
 var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
 annotationDiv.appendTo($(".main-video"));
 annotationDiv.find(".close-annotation").click(closeAnnotation);
 var text = annotationinfo.annotation.content.text || annotationinfo.annotation.description;
 switch (annotationinfo.annotation.content.markup) {
 case "html":
 annotationDiv.find(".text-contents").html(text);
-/*
 var ps = annotationDiv.find(".text-contents>p"),
 groups = [],
 last, group;
 ps.each(function(i, e) {
 if (last && group && last.nextElementSibling === e) {
 last = e;
 });
 groups.forEach(function(g) {
 $(g.master).replaceWith($('<div class="column-group">').append(g.contents));
 });
-*/
 break;
 default:
 annotationDiv.find(".text-contents").html(
 text.split(/\n/gm).map(function(l) {
 return '<p>' + _.escape(l) + '</p>';
 if (currentAnnotation) {
 closeAnnotation(true);
 }
 return false;
 });
+function fullScreen() {
+var isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
+el = document.querySelector("body"),
+requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
+cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
+if (isFull) {
+for (var i = 0; i < cancelMethods.length; i++) {
+if (typeof document[cancelMethods[i]] === "function") {
+document[cancelMethods[i]]();
+break;
+}
+}
+} else {
+for (var i = 0; i < requestMethods.length; i++) {
+if (typeof el[requestMethods[i]] === "function") {
+el[requestMethods[i]]();
+break;
+}
+}
+}
+return false;
+}
+$(".full-screen").click(fullScreen);
+$(".about").click(function() {
+closeAnnotation();
+var aboutBox = $(".annotation-templates .about-box").clone().appendTo($(".main-video"));
+aboutBox.find(".close-annotation").click(closeAnnotation);
+aboutBox.css({ top: Math.floor(($(".main-video").height() - aboutBox.height())/2)+"px" });
+});
 function closeAnnotation(e) {
 currentAnnotation = null;
 $(".chip, .pictolist li").removeClass("current");
-$(".chapters-bar").removeClass("annotation-onscreen");
+$(".timelines").removeClass("annotation-onscreen");
 $(".annotation audio, .annotation video").each(function() {
 try {
 this.pause();
-} catch(e) { }
+} catch(err) { }
 });
 $(".main-video .annotation").hide().remove();
 if (!!e) {
 myMedia.play();
 }
 return false;
 }
+var videoRatio = null;
+function repositionElements() {
+var videoel = $(".video-container video");
+if (!videoRatio) {
+videoRatio = videoel.width() / videoel.height();
+}
+if (!videoRatio) {
+return;
+}
+var container = $(".main-video"),
+ch = container.height(),
+cw = container.width(),
+vw = Math.min(cw, ch * videoRatio),
+vh = vw / videoRatio,
+dw = (cw - vw) / 2,
+dh = (ch - vh) / 2;
+videoel.css({
+width: vw,
+height: vh,
+"margin-top": dh
+});
+$(".pictolist").css({
+left: dw,
+bottom: dh
+});
+}
+$(".video-container video").on("loadedmetadata",repositionElements);
+$(window).resize(repositionElements);
+$(document).keydown(function(e) {
+if (e.keyCode === 122) {
+fullScreen();
+return false;
+}
+});
 });
 };

festivalaix