integration/js/tagplayer.js
changeset 73 fb4d0566ab19
parent 68 70b1e3523168
child 76 4bdadca1cd5a
equal deleted inserted replaced
71:07d4049eec01 73:fb4d0566ab19
    15         globalTags = {},
    15         globalTags = {},
    16         seqCount;
    16         seqCount;
    17         
    17         
    18     var ratio = 2.37;
    18     var ratio = 2.37;
    19 
    19 
       
    20     if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
       
    21         var resolution = window.localStorage.getItem("resolution") || "SD";
       
    22     } else {
       
    23         var resolution = "SD";
       
    24     }
       
    25     var video_url_transform = function(url) {
       
    26         return url.replace(/[SH]D(\.[a-z0-9]+)$/,resolution + "$1");
       
    27     }
       
    28     
    20     function resizeVideo() {
    29     function resizeVideo() {
    21         var currentwidth = $(window).width(),
    30         var currentwidth = $(window).width(),
    22             maxheight = $(window).height() - 220,
    31             maxheight = $(window).height() - 220,
    23             height = Math.min(maxheight, currentwidth / ratio),
    32             height = Math.min(maxheight, currentwidth / ratio),
    24             width = ratio * height;
    33             width = ratio * height;
    76         segmentdragin = segmentdragout.find("ul")
    85         segmentdragin = segmentdragout.find("ul")
    77         segmentdragging = false;
    86         segmentdragging = false;
    78     
    87     
    79     function resizeSegmentDrag() {
    88     function resizeSegmentDrag() {
    80         var segmentdelta = segmentdragout.width() - segmentdragin.width();
    89         var segmentdelta = segmentdragout.width() - segmentdragin.width();
    81         segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent")
    90         segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent");
       
    91         if (segmentdelta < 0 && $("#title_sequence li").length) {
       
    92             var x = $("#title_sequence li[data-segment-index='" + currentIndex + "']").offset().left - segmentdragin.offset().left;
       
    93             segmentdragin.css("left", Math.max(segmentdelta - 20, Math.min( 20, 36 - x)))
       
    94         }
    82     }
    95     }
    83     
    96     
    84     segmentdragin.draggable({
    97     segmentdragin.draggable({
    85         axis: "x",
    98         axis: "x",
    86         start: function() {
    99         start: function() {
   104      
   117      
   105     var tagsdragout = $("#tag_sequence"),
   118     var tagsdragout = $("#tag_sequence"),
   106         tagsdragin = tagsdragout.find("ul")
   119         tagsdragin = tagsdragout.find("ul")
   107         tagsdragging = false;
   120         tagsdragging = false;
   108     
   121     
   109     function resizeTagsDrag() {
   122     function resizeTagsDrag(toRight) {
   110         var tagsdelta = tagsdragout.width() - tagsdragin.width();
   123         var tagsdelta = tagsdragout.width() - tagsdragin.width();
   111         tagsdragin.draggable("option","containment",tagsdelta < 0 ? [ tagsdelta - 20, 0, 20, 0 ] : "parent");
   124         tagsdragin.draggable("option","containment",tagsdelta < 0 ? [ tagsdelta - 20, 0, 20, 0 ] : "parent");
   112         tagsdragin.css("left",Math.floor(tagsdelta/2));
   125         tagsdragin.css("left",(toRight && tagsdelta < 0) ? tagsdelta - 20 : Math.floor(tagsdelta/2));
   113     }
   126     }
   114     
   127     
   115     tagsdragin.draggable({
   128     tagsdragin.draggable({
   116         axis: "x",
   129         axis: "x",
   117         start: function() {
   130         start: function() {
   207                 contentType: 'application/json',
   220                 contentType: 'application/json',
   208                 data: _export.serialize(), /* L'objet Source est sérialisé */
   221                 data: _export.serialize(), /* L'objet Source est sérialisé */
   209                 success: function(_data) {
   222                 success: function(_data) {
   210                     var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0)
   223                     var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0)
   211                     segmentAtPost.__tags[_tagvalue] = n;
   224                     segmentAtPost.__tags[_tagvalue] = n;
   212                     showCurrentTags();
   225                     showCurrentTags(_tagvalue);
   213                 },
   226                 },
   214                 error: function(_xhr, _error, _thrown) {
   227                 error: function(_xhr, _error, _thrown) {
   215                     console.log("Error when sending annotation", _thrown);
   228                     console.log("Error when sending annotation", _thrown);
   216                 }
   229                 }
   217             });
   230             });
   279                 m.hide();
   292                 m.hide();
   280             }
   293             }
   281         });
   294         });
   282         $("#title_sequence li").removeClass("here");
   295         $("#title_sequence li").removeClass("here");
   283         $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");
   296         $("#title_sequence li[data-segment-index='" + n + "']").addClass("here");
       
   297         resizeSegmentDrag();
   284         $("#duration").text(currentSegment.getDuration().toString());
   298         $("#duration").text(currentSegment.getDuration().toString());
   285         
   299         
   286         if (currentSegment.__tags) {
   300         if (currentSegment.__tags) {
   287             showCurrentTags();
   301             showCurrentTags();
   288         }
   302         }
   293             $("#btnPlayPause, .video-wait").removeClass("pause");
   307             $("#btnPlayPause, .video-wait").removeClass("pause");
   294         }
   308         }
   295         currentMedia.play();
   309         currentMedia.play();
   296     }
   310     }
   297     
   311     
   298     function showCurrentTags() {
   312     function showCurrentTags(tagToShow) {
   299         var vals = _(currentSegment.__tags).values(),
   313         var vals = _(currentSegment.__tags).values(),
   300             max = Math.max.apply(Math, vals),
   314             max = Math.max.apply(Math, vals),
   301             min = Math.min(max - 1, Math.min.apply(Math, vals)),
   315             min = Math.min(max - 1, Math.min.apply(Math, vals)),
   302             b = 160 / (max - min);
   316             b = 160 / (max - min),
   303         var html = _(currentSegment.__tags)
   317             tagList = _(currentSegment.__tags).map(function(v, k) {
   304             .chain()
   318                 return {
   305             .map(function(v, k) {
   319                     label: k,
   306                 var c = Math.floor( 95 + (v - min) * b );
   320                     weight: v
   307                 return '<li><a href="'
   321                 }
   308                     + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(k))
   322             });
       
   323         tagList = _(tagList).shuffle();
       
   324         if (tagToShow && currentSegment.__tags[tagToShow]) {
       
   325             tagList = tagList.filter(function(t) {
       
   326                 return (t.label !== tagToShow);
       
   327             });
       
   328             tagList.push({
       
   329                 label: tagToShow,
       
   330                 weight: currentSegment.__tags[tagToShow]
       
   331             });
       
   332         }
       
   333         var html = tagList.reduce(
       
   334             function(memo, tag) {
       
   335                 var c = Math.floor( 95 + (tag.weight - min) * b );
       
   336                 return memo + '<li><a href="'
       
   337                     + IriSP.endpoints.tag_page.replace("__TAG__",encodeURIComponent(tag.label))
   309                     + '" style="color: rgb('
   338                     + '" style="color: rgb('
   310                     + [c,c,c].join(",")
   339                     + [c,c,c].join(",")
   311                     + ')">'
   340                     + ')">'
   312                     + k
   341                     + tag.label
   313                     + ' </a> </li>'
   342                     + ' </a> </li>';
   314             })
   343             },
   315             .shuffle()
   344             "");
   316             .value()
       
   317             .join("");
       
   318         tagsdragin.html(html);
   345         tagsdragin.html(html);
   319         resizeTagsDrag();
   346         resizeTagsDrag(!!tagToShow);
   320     }
   347     }
   321     
   348     
   322     function addMedia(media) {
   349     function addMedia(media) {
   323         if (media.has_player) {
   350         if (media.has_player) {
   324             return;
   351             return;
   325         }
   352         }
   326         media.has_player = true;
   353         media.has_player = true;
   327         media.loaded = false;
   354         media.loaded = false;
   328         media.paused = true;
   355         media.paused = true;
   329         var videourl = media.video;
   356         var videourl = video_url_transform(media.video),
   330         if (typeof IriSP.video_url_transform === "function") {
   357             videoid = "video_" + media.id,
   331             videourl = IriSP.video_url_transform(media.video);
       
   332         }
       
   333         var videoid = "video_" + media.id,
       
   334             videoEl = $('<video>'),
   358             videoEl = $('<video>'),
   335             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
   359             mp4_file = videourl.replace(/\.webm$/i,'.mp4'),
   336             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
   360             webm_file = videourl.replace(/\.mp4$/i,'.webm'),
   337             mediaEl = videoEl[0],
   361             mediaEl = videoEl[0],
   338             can_play_mp4 = !!mediaEl.canPlayType('video/mp4'),
   362             can_play_mp4 = !!mediaEl.canPlayType('video/mp4'),
   477                     }
   501                     }
   478                     $("#current").text(new IriSP.Model.Time(t).toString());
   502                     $("#current").text(new IriSP.Model.Time(t).toString());
   479                     timeSlider.slider("value", slidersRange * t / currentSegment.getDuration());
   503                     timeSlider.slider("value", slidersRange * t / currentSegment.getDuration());
   480                 } else {
   504                 } else {
   481                     media.pause();
   505                     media.pause();
   482                     goToPart((currentIndex + 1) % seqCount)
   506                     if (currentIndex < seqCount - 1) {
       
   507                         goToPart(currentIndex + 1)
       
   508                     } else {
       
   509                         document.location = $(".link_prev").attr("href");
       
   510                     }
   483                 }
   511                 }
   484             }
   512             }
   485         });
   513         });
   486             
   514             
   487     }
   515     }
   488     
   516     
       
   517     $(".sdhdgroup").addClass(resolution);
       
   518     
       
   519     $(".sdhdbtn").click(function() {
       
   520         var newres = $(this).attr("title");
       
   521         if (resolution !== newres) {
       
   522             window.localStorage.setItem("resolution", newres);
       
   523             document.location.reload();
       
   524         }
       
   525         return false;
       
   526     });
       
   527     
       
   528     $("#btnInfo, .lightBoxClose").click(function() {
       
   529         $(".lightBoxWrap").toggle();
       
   530         return false;
       
   531     });
   489     
   532     
   490 }
   533 }