Skip to content
Snippets Groups Projects
Commit 022340af authored by Sebastien's avatar Sebastien
Browse files

Merge branch 'tuleap-138-bis-set-playback-rate-in-annotation' into 'main'

change playback rate according to annotations

See merge request !87
parents 1058b8b0 573e0e56
Branches
Tags
1 merge request!87change playback rate according to annotations
Pipeline #1023 passed
......@@ -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>
......
((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
......@@ -30,6 +30,7 @@ function Tag(document) {
this.timeStart = 0;
this.timeEnd = 1;
this.color = "#FFFFFF";
this.shown = false;
}
Tag.keyToOpenAfterLoading = undefined;
......
......@@ -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))
......
......@@ -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/";
......@@ -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();
......@@ -758,6 +772,15 @@ 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");
......@@ -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");
......@@ -1018,6 +1045,7 @@ bgColorLeft = getTagGradientColor(tag);
$("#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") {
......@@ -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;
}
......@@ -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 ?>',
......
......@@ -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 %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment