diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html index 2113b46a8112c32de7eea4d4751d4af9b183dc39..eb41085d8407578af0a8dd9c7f4c025a7da5bc58 100644 --- a/capsule-prototype/index.html +++ b/capsule-prototype/index.html @@ -26,6 +26,8 @@ <script language="javascript" type='text/javascript' src='../shared/js/libs/fastdom.js'></script> <script language="javascript" type='text/javascript' src='../shared/js/libs/moment-with-langs.min.js'></script> + <script language="javascript" type='text/javascript' src="../shared/php/rekallApp.js.php"></script> + <script language="javascript" type='text/javascript' src='../shared/js/rekall/Utils.js'></script> <script language="javascript" type='text/javascript' src='../shared/js/online-rekall/Rekall.js'></script> <script language="javascript" type='text/javascript' src='../shared/js/rekall/Source.js'></script> @@ -35,6 +37,7 @@ <script language="javascript" type='text/javascript' src='../shared/js/online-rekall/Tag.js'></script> <script language="javascript" type='text/javascript' src='../shared/js/online-rekall/Tags.js'></script> <script language="javascript" type='text/javascript' src='../shared/js/online-rekall/Timeline.js'></script> + <script language="javascript" type='text/javascript' src="../shared/js/online-rekall/RekallApplication.js"></script> <script language="javascript" type='text/javascript' src='../shared/js/iannix.js'></script> <script language="javascript" type='text/javascript' src='../shared/js/online-script.js'></script> @@ -66,11 +69,6 @@ <script> videojs.options.flash.swf = "video-js/video-js.swf"; </script> - <script type="javascript" > - function init(PubSub){ - window.PubSub = PubSub; - } - </script> <link rel="stylesheet" type="text/css" href="../shared/css/online-theme.css" /> </head> @@ -185,7 +183,8 @@ <div class="popupRightItem" id="popupLink" title="Link"></div> <textarea class="popupInput" id="popupLinkInput" type="text"></textarea> - <!-- <div class="popupRightItem separationHDark editmode"></div> --> + <div class="popupRightItem" id="popupSpeed" title="Speed"></div> + <input type='range' min='0' max='4' class='popupInput' id='popupSpeedInput' /> </td> </tr> </table> diff --git a/capsule-prototype/js/online-rekall/RekallApplication.js b/capsule-prototype/js/online-rekall/RekallApplication.js new file mode 100644 index 0000000000000000000000000000000000000000..e8097663b7d4946f56da8b48cfed0241fcf37062 --- /dev/null +++ b/capsule-prototype/js/online-rekall/RekallApplication.js @@ -0,0 +1,64 @@ +((app) => { + function RekallApplication(opts = {}) { + const METHODS = [ + 'openUrl', + 'pubSub', + 'init', + 'setPlaybackRate', + 'videoPlayer', + 'rekall' + ]; + + let localOptions = {}; + + const OPTIONS = { + openUrl: function () { + if (!arguments) + return; + if (localOptions.links && localOptions.links[arguments[0]]) { + window.top.location.assign(localOptions.links[arguments[0]]) + } else { + window.top.location.assign(arguments[0]); + } + }, + pubSub: function () { + return localOptions.PubSub; + }, + init: function (opts) { + if (opts) { + $.extend(localOptions, opts); + } + }, + setPlaybackRate: function () { + if (arguments.length > 0 && 'number' === typeof arguments[0] && 0 < arguments[0] && arguments[0] < 10) { + localOptions.videoPlayer.playbackRate(arguments[0]); + } + }, + videoPlayer: function () { + if (arguments.length > 0) { + localOptions._videoPlayer = arguments[0]; + } + + return localOptions._videoPlayer; + }, + rekall: function () { + return localOptions.Rekall; + } + }; + + $.extend(localOptions, OPTIONS, opts); + + return { + Rekall: function () { + if (!arguments || !arguments.length) + return localOptions['rekall'].apply(this, arguments); + + let [action, ...params] = arguments; + if (METHODS.includes(action)) { + return localOptions[action].apply(this, params); + } + } + } + } + app.rekall = new RekallApplication() +})(window.app = window.app || {}) \ No newline at end of file diff --git a/capsule-prototype/js/online-rekall/Tag.js b/capsule-prototype/js/online-rekall/Tag.js index 98ac9edfd285c3b1f6120d3738ebdfb0d981167c..3968ddbe48af655930a723a491e87a37d19912bf 100644 --- a/capsule-prototype/js/online-rekall/Tag.js +++ b/capsule-prototype/js/online-rekall/Tag.js @@ -30,6 +30,7 @@ function Tag(document) { this.timeStart = 0; this.timeEnd = 1; this.color = "#FFFFFF"; + this.shown = false; } Tag.keyToOpenAfterLoading = undefined; @@ -163,4 +164,4 @@ Tag.prototype.update = function(color, strong) { } this.visuel.rect.setOpacity(opacity); */ -} \ No newline at end of file +} diff --git a/capsule-prototype/js/online-rekall/Timeline.js b/capsule-prototype/js/online-rekall/Timeline.js index c6e20a1e10b46914bed56b2e4db2472238036180..6eac01ef4f0e95533e1da3d395782f2b5f6ab9a6 100644 --- a/capsule-prototype/js/online-rekall/Timeline.js +++ b/capsule-prototype/js/online-rekall/Timeline.js @@ -44,6 +44,29 @@ Timeline.prototype.stop = function() { Timeline.prototype.rewind = function(timeCurrentOffset) { rekall.videoPlayer.rewind(); } +Timeline.prototype.changeSpeed = function(speed) { + var _speed = 1; + switch (speed) { + case 0: + _speed = .0001; + break; + case 1: + _speed = .5; + break; + case 2: + _speed = 1; + break; + case 3: + _speed = 2; + break; + case 4: + _speed = 1000; + break; + } + rekall.videoPlayer.playbackRate(_speed); + console.debug('changing playback speed to ' + _speed); +} + Timeline.prototype.toggle = function() { if(this.state) @@ -63,6 +86,20 @@ Timeline.prototype.updateFlattenTimeline = function() { var progress = 0; var timeEndExtended = tag.timeStart + max(2, tag.timeEnd - tag.timeStart); + var should_shown = (this.timeCurrent >= tag.timeStart && this.timeCurrent <= tag.timeEnd); + + if (!tag.shown && should_shown) { + tag.shown = true; + if (tag.getMetadata('Rekall->Speed')) this.changeSpeed(Number(tag.getMetadata('Rekall->Speed'))); + } else if (tag.shown && !should_shown) { + tag.shown = false; + if (tag.getMetadata('Rekall->Speed')) { + this.changeSpeed(2); + console.debug('speed was ' + tag.getMetadata('Rekall->Speed')); + } + } + + if(this.timeCurrent <= tag.timeStart) progress = this.timeCurrent - tag.timeStart; else if((tag.timeStart < this.timeCurrent) && (this.timeCurrent < timeEndExtended)) diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index 6204a50e1d5e9035cae32843f71e803a80d0e30f..5a1a1ac2dbdaf3627c543e3169454a607ed7a3cb 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -4,6 +4,9 @@ var pubSub = null; window.onload = function() { pubSub = window.top.PubSub; + window.app.rekall.Rekall('init', { + PubSub: pubSub + }); pubSub.subscribe('mosaic', openMosaic); pubSub.subscribe('video', openVideo); pubSub.subscribe('open_paste_modal', openPasteModal); @@ -11,6 +14,10 @@ window.onload = function() { }; $(document).ready(function() { + window.app.rekall.Rekall('init', { + Rekall: rekall + }); + window.app.rekall.Rekall().allowProjectDeletion(window.app.Settings.Project.ProjectDeletionEnabled); rekall.allowProjectDeletion(window.app.Settings.Project.ProjectDeletionEnabled) Utils.actionPrefix = "php/"; @@ -36,15 +43,15 @@ $(document).ready(function() { rekall_common.owner.canEdit = false; // //rekall_common.owner.canEdit = true; - + if(rekall_common.owner.canEdit) { //Mode preview or not $(".editmode").removeClass("editmode"); $(".empty").show(); $(".displayMode").hide(); - + setEditionControls(); - + //Geoloc en mode édition /* if((false) && (navigator.geolocation)) { @@ -68,7 +75,7 @@ $(document).ready(function() { } else { $(".empty").hide(); $(".displayMode").show(); - + $("#projectInfoBtn").click(function(event){ event.stopPropagation(); $("#popupSettingsSpace").show(); @@ -79,7 +86,7 @@ $(document).ready(function() { $("#popupSettingsCredits").html(rekall.project.metadata["Comments"].replace(/\n/gi, "<br/>")).removeClass("empty"); }); - + $("#popupSettings").click(function(event){ event.stopPropagation(); closeSettingsPopup(); @@ -90,10 +97,10 @@ $(document).ready(function() { closeSettingsPopup(); }); } - + rouletteEnd(); rekall.loadXMLFile(); - + var tmpUrl = shareLink(); $("#watermarkBox").attr("href",tmpUrl); @@ -197,7 +204,7 @@ function setEditionControls() { $("#popupSettingsTitle").html("+ Add project name").addClass("empty"); $("#popupSettingsTitleLabel").hide(); } - + if(rekall.project.metadata["Author"]!="") { $("#popupSettingsAuthor").html(rekall.project.metadata["Author"]).removeClass("empty"); $("#popupSettingsAuthorLabel").show(); @@ -205,7 +212,7 @@ function setEditionControls() { $("#popupSettingsAuthor").html("+ Add project author").addClass("empty"); $("#popupSettingsAuthorLabel").hide(); } - + if(rekall.project.metadata["Email"]!="") { $("#popupSettingsEmail").html(rekall.project.metadata["Email"]).removeClass("empty"); $("#popupSettingsEmailLabel").show(); @@ -213,7 +220,7 @@ function setEditionControls() { $("#popupSettingsEmail").html("+ Add email address").addClass("empty"); $("#popupSettingsEmailLabel").hide(); } - + if(rekall.project.metadata["Comments"]!="") { $("#popupSettingsCredits").html(rekall.project.metadata["Comments"].replace(/\n/gi, "<br/>")).removeClass("empty"); $("#popupSettingsCreditsLabel").show(); @@ -221,7 +228,7 @@ function setEditionControls() { $("#popupSettingsCredits").html("+ Add project credits").addClass("empty"); $("#popupSettingsCreditsLabel").hide(); } - + if(rekall_common.owner.canEdit) { $(".empty").show(); } @@ -270,7 +277,7 @@ function setEditionControls() { $("#popupSettingsCreditsInput").unbind( "keyup" ); $("#popupSettingsCreditsInput").keyup(function(event){ event.stopPropagation(); - + var isEnter = false; if (event.key !== undefined) { if (event.key === 'Enter' && event.altKey) { @@ -439,15 +446,15 @@ function setEditionControls() { var TCout = (outMin*60)+(outSec*1); var endVideo = Math.ceil(rekall.videoPlayer.duration()); - + if(TCin>TCout) openAlert("Start time must be set before end time", "ok"); else if(TCout>endVideo) openAlert("End time must not be set after " + convertToTime(endVideo) + " (end of the video)", "ok"); else { setTCFromDom(keyDoc, TCin, TCout); - + $("#popupTCin").html(inMin+":"+inSec); $("#popupTCout").html(outMin+":"+outSec); - + closeInputs(); } }); @@ -462,6 +469,13 @@ function setEditionControls() { closeInputs(); }); + $("#popupSpeed").click(function(event){ + event.stopPropagation(); + closeInputs(); + $(this).hide(); + $("#popupSpeedInput").show().focus(); + }); + $("#popupLegende").click(function(event){ event.stopPropagation(); closeInputs(); @@ -497,7 +511,7 @@ function setEditionControls() { //Validation du commentaire avec Entrée = désactivé /*$("#popupLegendeInput").keyup(function(event){ event.stopPropagation(); - + var isEnter = false; if (event.key !== undefined) { if (event.key === 'Enter' && event.altKey) { @@ -512,7 +526,7 @@ function setEditionControls() { //openAlert('Alt + Enter pressed!'); } else if(event.keyCode === 13) isEnter = true; } - + if(isEnter == true) { closeInputs(); } @@ -610,19 +624,19 @@ function openAlert(message, buttons) { //Rétro-compatibilité Rekall-Pro if((message == undefined) && (buttons == undefined)) closeAlert(); - + if(message=="input"){ $("#popupAlertMessage").html("Copy this link to share <i>"+rekall.project.metadata["Title"]+"</i>"); $(".popupAlertButton").hide(); $("#popupAlertButtonOk").show(); - + $("#popupAlertInput").val(buttons); $("#popupAlertInput").show(); $("#popupAlertTextarea").hide(); $("#popupAlertSpace").show(); $("#popupAlertInput").focus().select(); - + } else if(message=="textarea"){ $("#popupAlertMessage").html("Embed <i>"+rekall.project.metadata["Title"]+"</i> on your webpage"); $(".popupAlertButton").hide(); @@ -634,11 +648,11 @@ function openAlert(message, buttons) { $("#popupAlertSpace").show(); $("#popupAlertTextarea").focus().select(); - + } else { $("#popupAlertInput").hide(); $("#popupAlertTextarea").hide(); - + $("#popupAlertMessage").html(message); if(buttons == "nobuttons") { $(".popupAlertButton").hide(); @@ -725,10 +739,10 @@ function closeSettingsInputs() { $("#popupSettingsCredits").html("+ Add project credits").addClass("empty").show(); $("#popupSettingsCreditsLabel").hide(); } - + } } - + //alert("ok"); }); $(".popupSettingsInput").hide(); @@ -739,7 +753,7 @@ function closeInputs() { $.each($(".popupInput"), function() { if($(this).css("display") != "none") { if($(this).attr("id")=="popupNomInput") { - + var keyDoc = $(this).parent().attr("keydoc"); var newName = $(this).val().trim(); $(this).val(newName); @@ -749,7 +763,7 @@ function closeInputs() { else $("#popupNom").html("+ Add a name").addClass("empty"); } else if($(this).attr("id")=="popupLegendeInput") { - + var keyDoc = $(this).parent().attr("keydoc"); var newComment = $(this).val().trim(); $(this).val(newComment); @@ -758,8 +772,17 @@ function closeInputs() { if(newComment!="") $("#popupLegende").html(newComment.replace(/\n/gi, "<br/>")).removeClass("empty"); else $("#popupLegende").html("+ Add a comment").addClass("empty"); + } else if($(this).attr("id")=="popupSpeedInput") { + + var keyDoc = $(this).parent().attr("keydoc"); + var newSpeed = $(this).val().trim(); + setMetaFromDom(keyDoc, "Rekall->Speed", newSpeed); + + if(newSpeed!="") $("#popupSpeed").html(get_str_for_speed(newSpeed)).removeClass("empty"); + else $("#popupSpeed").html("+ Set video speed during this annotation ").addClass("empty"); + } else if($(this).attr("id")=="popupAuthorInput") { - + var keyDoc = $(this).parent().attr("keydoc"); var newAuthor = $(this).val().trim(); $(this).val(newAuthor); @@ -769,10 +792,10 @@ function closeInputs() { else $("#popupAuthor").html("+ Add an author").addClass("empty"); } else if($(this).attr("id")=="popupLinkInput") { - + var keyDoc = $(this).parent().attr("keydoc"); var newLink = $(this).val().trim(); - + if(newLink!="") if(newLink.indexOf("http")!=0) newLink = "http://"+newLink; $(this).val(newLink); @@ -783,7 +806,7 @@ function closeInputs() { else $("#popupLink").html("<a href='"+newLink+"' target='_blank'>"+newLink+"</a>").removeClass("empty"); } else $("#popupLink").html("+ Add a link").addClass("empty"); - + } else if($(this).attr("id")=="popupTCedit") { var keyDoc = $("#popupRight").attr("keydoc"); var inMin = $("#popupTCinMin").val(); @@ -809,7 +832,7 @@ function closeInputs() { if(isReturn) return true; } } - + //alert("ok"); }); $(".popupInput").hide(); @@ -860,7 +883,7 @@ function openMosaic() { .append($('<h2/>').text(text)); } - + rekall.timeline.pause(); $('#mosaic_tab').show(); $('#video_tab').hide(); @@ -945,7 +968,7 @@ bgColorLeft = getTagGradientColor(tag); $("#popupImg").show(); $("#popupImg").attr("src","../shared/css/images/img-note.png"); $("#popupImg").unbind( "click" ); - + } else { if(tag.thumbnail.url){ $("#popupImg").attr("src",tag.thumbnail.url); @@ -986,6 +1009,10 @@ bgColorLeft = getTagGradientColor(tag); var endVerb = convertToTime(tag.getTimeEnd()); $("#popupTCout").html(endVerb); + var speed = tag.getMetadata("Rekall->Speed"); + if((speed)&&(speed!="")) $("#popupSpeed").html(get_str_for_speed(speed)).removeClass("empty"); + else $("#popupSpeed").html("+ Set video speed during this annotation").addClass("empty"); + var comments = tag.getMetadata("Rekall->Comments"); if((comments)&&(comments!="")) $("#popupLegende").html(comments).removeClass("empty"); else $("#popupLegende").html("+ Add a comment").addClass("empty"); @@ -1008,17 +1035,18 @@ bgColorLeft = getTagGradientColor(tag); $(".empty").show(); $(".displayMode").hide(); $("#popupNomInput").val(tag.getMetadata("Rekall->Name")); - + $("#popupTCinMin").val(startVerb.split(":")[0]); $("#popupTCinSec").val(startVerb.split(":")[1]); - + $("#popupTCoutMin").val(endVerb.split(":")[0]); $("#popupTCoutSec").val(endVerb.split(":")[1]); - + $("#popupLegendeInput").val(""+comments.replace(/<br\/>/gi, '\n')); $("#popupAuthorInput").val(""+author); $("#popupLinkInput").val(""+link); - + $("#popupSpeedInput").val(""+speed); + var highlight = tag.getMetadata("Rekall->Highlight"); if(highlight=="true") { $("#popupSetHighlight").attr("isHighlight","true").addClass("selected"); @@ -1147,19 +1175,19 @@ var filesToUpload = [], fileIsUploading = false; function uploadFiles(files) { $.each(files, function(index, file) { var formData = new FormData(); - + if(file.name != undefined) { var colorCategory = rekall.sortings["colors"].categories[Sorting.prefix + file.type]; if(colorCategory != undefined) { } var fileType = (file.type.split("/"))[0]; var fileDateTime = moment(file.lastModifiedDate); - + if (file.size > rekall_common.uploadMax) { openAlert("File size is too large! Maximum is " + rekall_common.uploadMax + " bytes."); return; } - + //Données du formulaire if($("uploadForm")[0] != undefined) formData = new FormData($('form')[0]); //à vérifier @@ -1176,16 +1204,16 @@ function uploadFiles(files) { else { formData.append("name", file); } - + var tcOut = rekall.timeline.timeCurrent + 15; if(tcOut>=rekall.videoPlayer.duration()) tcOut = rekall.videoPlayer.duration(); - + formData.append("tcIn", rekall.timeline.timeCurrent); formData.append("tcOut", tcOut); formData.append("author", rekall_common.owner.author); formData.append("locationGps", rekall_common.owner.locationGps); formData.append("locationName", rekall_common.owner.locationName); - + if(formData != undefined) { filesToUpload.push({ file: file, @@ -1243,12 +1271,12 @@ function uploadFilesNext() { fileIsUploading = true; rouletteStart(true); $.ajax(filesToUpload[0]); - + if(filesToUpload[0].file.name != undefined) openAlert("Starting upload of " + filesToUpload[0].file.name); else openAlert("Creation of " + filesToUpload[0].file + " in progress"); - + filesToUpload.splice(0, 1); uploadFilesNext(); } @@ -1310,3 +1338,25 @@ $(window).trigger("resize"); function openPasteModal() { $('#paste_modal').css('display', 'flex'); $('#paste_modal_content').first().focus() } function closePasteModal() { $('#paste_modal').hide(); $('#paste_modal_content').empty(); } + +function get_str_for_speed(speed) { + var html_value = 'normal'; + switch (Number(speed)) { + case 0: + html_value = 'very slow'; + break; + case 1: + html_value = 'half speed'; + break; + case 2: + html_value = 'normal'; + break; + case 3: + html_value = 'twice as speed'; + break; + case 4: + html_value = 'very speed'; + break; + } + return html_value; +} diff --git a/capsule-prototype/php/rekallApp.js.php b/capsule-prototype/php/rekallApp.js.php index bce36d1c97fde5bd849797b7b4242de78a03ebbf..a55c34cab55a0088be048f7cb8ceaca1e206f655 100644 --- a/capsule-prototype/php/rekallApp.js.php +++ b/capsule-prototype/php/rekallApp.js.php @@ -5,51 +5,9 @@ $front_url = $_ENV["FRONT_URL_EXTERNAL"]; $member_url = $_ENV["MEMBER_URL_EXTERNAL"]; $project_allow_deletion = isset($_ENV["LEGACY_PROJECT_DELETION_ENABLED"]) && $_ENV["LEGACY_PROJECT_DELETION_ENABLED"] == 'true' ? 'true' : 'false'; ?> -function RekallApp (opts = {}){ - const METHODS = [ - 'openUrl', - 'pubSub', - 'init' - ]; - - const OPTIONS = { - openUrl: function (){ - if(!arguments) - return; - window.top.location.assign(arguments[0]); - }, - pubSub: function(PubSub){ - return window.PubSub; - }, - init: function(PubSub){ - window.PubSub = PubSub; - } - }; - - var localOptions = $.extend({}, OPTIONS, opts); - - return { - Rekall: function(){ - if (!arguments) - return; - - var [action, ...params] = arguments; - if(METHODS.includes(action)){ - return localOptions[action](params); - } - } - } -} - ((app) => { - - if(app.urls){ - return; - } - - app.rekall = RekallApp(); app.urls = { frontHome : '<?= $front_url ?>', memberHome : '<?= $member_url ?>', diff --git a/templates/project/edit.html.twig b/templates/project/edit.html.twig index 258695da5bea6714aac4860af2885645e53d7d1e..78caedf4f50d431d4a0ae38d2f4f9a287edc567a 100644 --- a/templates/project/edit.html.twig +++ b/templates/project/edit.html.twig @@ -11,12 +11,3 @@ </iframe> {% endblock %} - -{% block script %} - <script> - window.onload = function (){ - const iframe = document.getElementById('legacyContent').contentWindow; - iframe.rekall.Rekall('init', PubSub); - } - </script> -{% endblock %}