diff --git a/capsule-prototype/css/common.css b/capsule-prototype/css/common.css
new file mode 100644
index 0000000000000000000000000000000000000000..f4cb370e8e61f94ab78196d1428eae580d75985a
--- /dev/null
+++ b/capsule-prototype/css/common.css
@@ -0,0 +1,25 @@
+
+.playback_form {
+ padding: 0;
+}
+
+.playback_form input {
+ display: none;
+}
+
+.playback_form label {
+ background-color: rgba(0, 0, 0, .5);
+ padding: 4px;
+ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+}
+
+.playback_form input:checked+label {
+ background-color: rgba(255, 255, 255, .5);
+ color: black;
+ font-weight: bold;
+}
+
+.playback_form input:checked+label::before {
+ content: "\2713 ";
+ color: black;
+}
diff --git a/capsule-prototype/css/left_menu.css b/capsule-prototype/css/left_menu.css
index 1a7aed2b7ef8b5209b341e5fbbe0f48a3b23f780..f446c47a25229708ec624a274cbedc2e5b37cb79 100644
--- a/capsule-prototype/css/left_menu.css
+++ b/capsule-prototype/css/left_menu.css
@@ -37,30 +37,6 @@
visibility: visible;
}
-#playback_speed_form {
- padding: 0;
-}
-
-#playback_speed_form input {
- display: none;
-}
-
-#playback_speed_form label {
- background-color: rgba(0, 0, 0, .5);
- padding: 4px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-}
-
-#playback_speed_form input:checked+label {
- background-color: rgba(255, 255, 255, .5);
- color: black;
-}
-
-#playback_speed_form input:checked+label::before {
- content: "\2713 ";
- color: black;
-}
-
.btns_add_annotation li {
flex-direction: column;
}
diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index 0f10b64d40019da656376fc950e840cd649347fe..f547888fc28d2124335961222ed40a63b141b2ec 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/capsule-prototype/css/online-theme.css
@@ -3,6 +3,7 @@
@import 'popup.css';
@import 'mosaic.css';
@import 'flatten_timeline.css';
+@import 'common.css';
:root {
--tab_selector_height: 30px;
diff --git a/capsule-prototype/css/popup.css b/capsule-prototype/css/popup.css
index b8f80ff6251cbf3a4a017b4bcca1abf41aa5f3ce..4745b30853c38dd61a1df3aedf94e6e159929a25 100644
--- a/capsule-prototype/css/popup.css
+++ b/capsule-prototype/css/popup.css
@@ -1,12 +1,39 @@
+#popupSpeedInput {
+ width: fit-content;
+ margin: auto;
+ margin-bottom: 10px;
+}
+
+.popupNewTitles {
+ font-size: 0.9em;
+ color: rgba(255,255,255,.25);
+ margin-bottom: 10px;
+}
+
+#popupSpeedInput label {
+ margin: 2px;
+}
+
+#popupSpeedInput label:first-child {
+ margin-left: 0;
+}
+
+#popupSpeedInput label:last-child {
+ margin-right: 0;
+}
#popupLabelsInput {
padding: 0;
+ flex-wrap: wrap;
+ max-height: 300px;
+ align-content: first baseline;
+ overflow: auto;
}
#popupLabelsInput label {
cursor: pointer;
width: fit-content;
- padding: 1px;
+ padding: 4px;
margin: 1px;
}
@@ -14,6 +41,10 @@
background-color: rgba(255, 255, 255, .5);
}
+#popupLabelsInput input:checked + label:before {
+ content: "\2713 ";
+}
+
#new_annotation_label {
color: white;
background-color: rgba(0, 0, 0, .5);
diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html
index 5f56bad57f2d74dea3569fdb98a54d8afa861639..f4ae664e6ab7ae848316e30f4bca7711b0347904 100644
--- a/capsule-prototype/index.html
+++ b/capsule-prototype/index.html
@@ -182,17 +182,34 @@
<div class="popupRightItem" id="popupLink" title="Link"></div>
<textarea class="popupInput" id="popupLinkInput" type="text"></textarea>
- <div class="popupRightItem" id="popupSpeed" title="Speed"></div>
- <input type='range' min='0' max='4' class='popupInput' id='popupSpeedInput' />
-
- <div class="popupRightItem" id="popupLabels" title="Labels"></div>
- <!-- templates -->
- <div id='popupLabelsInput' class='popupInput flex-col'>
+ <div class='popupNewTitles'>+ Playback rate</div>
+ <form id='popupSpeedInput' class='flex-row playback_form popupInput popupInputNoHide'>
+ <input type='radio' id='annotation_playback_speed_025' value='0.25' name='playback_rate' />
+ <label class='left_menu_item' for='annotation_playback_speed_025'>0.25</label>
+ <input type='radio' id='annotation_playback_speed_05' value='0.5' name='playback_rate' />
+ <label class='left_menu_item' for='annotation_playback_speed_05'>0.5</label>
+ <input type='radio' id='annotation_playback_speed_075' value='0.75' name='playback_rate' />
+ <label class='left_menu_item' for='annotation_playback_speed_075'>0.75</label>
+ <input type='radio' id='annotation_playback_speed_1' value='1' name='playback_rate' />
+ <label class='left_menu_item' for='annotation_playback_speed_1'>normal</label>
+ <input type='radio' id='annotation_playback_speed_125' value='1.25' name='playback_rate' />
+ <label class='left_menu_item' for='annotation_playback_speed_125'>1.25</label>
+ <input type='radio' id='annotation_playback_speed_15' value='1.5' name='playback_rate' />
+ <label class='left_menu_item' for='annotation_playback_speed_15'>1.5</label>
+ <input type='radio' id='annotation_playback_speed_175' value='1.75' name='playback_rate' />
+ <label class='left_menu_item' for='annotation_playback_speed_175'>1.75</label>
+ <input type='radio' id='annotation_playback_speed_2' value='2' name='playback_rate' />
+ <label class='left_menu_item' for='annotation_playback_speed_2'>2</label>
+ </form>
+
+ <div class='popupNewTitles'>+ Tags</div>
<input type='text' id='new_annotation_label' placeholder='Add a new tag' class='editmode' />
- <input class='annotation_labels_template' type='checkbox' id='' value='' style='display: none;' />
- <label class='annotation_labels_template' for='' style='display: none;'></label>
- </div>
- </td>
+ <div id='popupLabelsInput' class='flex-col popupInput popupInputNoHide'>
+ <!-- templates -->
+ <input class='annotation_labels_template' type='checkbox' id='' value='' style='display: none;' />
+ <label class='annotation_labels_template' for='' style='display: none;'></label>
+ </div>
+ </td>
</tr>
</table>
</div>
@@ -211,7 +228,10 @@
</div>
<div id='left_menu' class='flex-col editmode left_menu'>
+ <div class='flex-col'>
<a id='btn_home' class='left_menu_item flex-col' href='javascript:window.app.rekall.Rekall('openUrl', 'home')'><i class='fas fa-home fa-3x left_menu_item_icn'></i>Go back to my capsules</a>
+ <div id='left_menu_item_preview' class='left_menu_item flex-col'>preview</div>
+ </div>
<div class='flex-col'>
<ul class='btns_add_annotation flex-col'>
<input type='checkbox' id='inp_add_annotation_dropdown' class='dropdown_control' />
@@ -224,7 +244,7 @@
<div class='flex-col'>
<input type='checkbox' id='inp_playback_rate_dropdown' class='dropdown_control' />
<label for ='inp_playback_rate_dropdown' class='left_menu_item' title='change playback rate'><i class='fas fa-play'></i></label>
- <form id='playback_speed_form' class='dropdown_content flex-col'>
+ <form id='playback_speed_form' class='dropdown_content flex-col playback_form'>
<input type='radio' id='playback_speed_025' value='0.25' name='playback_rate' />
<label class='left_menu_item' for='playback_speed_025'>0.25</label>
<input type='radio' id='playback_speed_05' value='0.5' name='playback_rate' />
@@ -244,10 +264,7 @@
</form>
</div>
</div>
- <div class='flex-col'>
- <div id='left_menu_item_preview' class='left_menu_item flex-col'>preview</div>
- <div id='left_menu_item_settings' class='left_menu_item flex-col'>settings</div>
- </div>
+ <div id='left_menu_item_settings' class='left_menu_item flex-col'>settings</div>
</div>
<!--
diff --git a/capsule-prototype/js/online-rekall/Timeline.js b/capsule-prototype/js/online-rekall/Timeline.js
index 6eac01ef4f0e95533e1da3d395782f2b5f6ab9a6..2b004b23b0db3103a97e054ed7c135a3e6749dad 100644
--- a/capsule-prototype/js/online-rekall/Timeline.js
+++ b/capsule-prototype/js/online-rekall/Timeline.js
@@ -45,26 +45,8 @@ 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);
+ rekall.videoPlayer.playbackRate(speed);
+ console.debug('changing playback speed to ' + speed);
}
@@ -94,7 +76,7 @@ Timeline.prototype.updateFlattenTimeline = function() {
} else if (tag.shown && !should_shown) {
tag.shown = false;
if (tag.getMetadata('Rekall->Speed')) {
- this.changeSpeed(2);
+ this.changeSpeed(1);
console.debug('speed was ' + tag.getMetadata('Rekall->Speed'));
}
}
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index afd9f67b8e4412ed7cd0213854288ff0472a7fc4..d1f7d3fe350c4b00717872e4d68480a7c446aff0 100644
--- a/capsule-prototype/js/online-script.js
+++ b/capsule-prototype/js/online-script.js
@@ -811,27 +811,16 @@ function closeInputs() {
} else if($(this).attr("id")=="popupSpeedInput") {
var keyDoc = $(this).parent().attr("keydoc");
- var newSpeed = $(this).val().trim();
+ var newSpeed = $('#popupSpeedInput input:checked').val();
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")=="popupLabelsInput") {
var keyDoc = $(this).parent().attr("keydoc");
var newLabels = '';
- $('input.annotation_labels:checked')
- .toArray().forEach(e => {
- newLabels += e.value + ';';
- })
+ $('input.annotation_labels:checked').toArray().forEach(e => newLabels += e.value + ';')
setMetaFromDom(keyDoc, "Rekall->Labels", newLabels);
- if (newLabels === '') {
- $('#popupLabels').html('+ Set annotation labels ').addClass('empty');
- $('#popupLabelsInput').hide();
- }
-
} else if($(this).attr("id")=="popupAuthorInput") {
var keyDoc = $(this).parent().attr("keydoc");
@@ -886,7 +875,7 @@ function closeInputs() {
//alert("ok");
});
- $(".popupInput").hide();
+ $(".popupInput:not(.popupInputNoHide)").hide();
$(".popupRightItem").show();
$("#popupTC").show();
$("#popupTCedit").hide();
@@ -923,6 +912,7 @@ function openMosaic() {
let div=$('<div/>').addClass('mosaic_item').on('click', function() {tagOrDoc.openPopupEdit();});
div.append($('<img/>').attr('src', url).attr('onerror', "this.src='../shared/css/images/img-document.png';"));
div.append($('<span/>').addClass('caption').text(name));
+ div.attr('data-rekall-labels', '');
div.attr('data-rekall-labels', tagOrDoc.getMetadata('Rekall->Labels'));
return div;
}
@@ -1003,6 +993,7 @@ function openMosaic() {
$(f).removeClass('mosaic_label_filter_enabled');
});
}
+ console.debug('filters: ', labels);
$('.mosaic_item').toArray().forEach(t => {
if (!labels.size || Array.from(labels).map(l => t.dataset.rekallLabels.indexOf(l) != -1).includes(true))
$(t).show();
@@ -1096,8 +1087,10 @@ bgColorLeft = getTagGradientColor(tag);
$("#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");
+ if (!speed || speed == '')
+ speed = 1;
+ $('#popupSpeedInput input').attr('checked', false);
+ $('#popupSpeedInput input[value="'+speed+'"]').attr('checked', true);
var labels = tag.getMetadata("Rekall->Labels");
$('input.annotation_labels').attr('checked', false);
@@ -1106,10 +1099,6 @@ bgColorLeft = getTagGradientColor(tag);
$('input.annotation_labels').toArray().forEach(e => {
e.checked = (_labels.indexOf(e.value) != -1);
})
- $('#popupLabelsInput').show();
- } else {
- $('#popupLabelsInput').hide();
- $('#popupLabels').html('+ Add labels');
}
var comments = tag.getMetadata("Rekall->Comments");
@@ -1216,7 +1205,7 @@ function setMetaFromDom(keyDoc, metaType, meta) {
$.ajax("php/project.php", {
type: "POST",
dataType: "json",
- data: {"key": keyDoc, "metadataKey": metaType, "metadataValue": meta.replace(/'/g, '’')},
+ data: {"key": keyDoc, "metadataKey": metaType, "metadataValue": meta.indexOf('\'') == -1 ? meta : meta.replace(/'/g, '’')},
success: function(retour) {
rouletteEnd();
rekall.loadXMLFile();
@@ -1438,24 +1427,3 @@ $(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;
-}