web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Preview mediatag in the drive and in diffMarked

Browse Source
This commit is contained in:
yflory 2020-03-31 16:43:00 +02:00
parent 817309d602
commit 6a10ec711a
7 changed files with 253 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
customize.dist/src/less2/include/modals-ui-elements.less
View File

@ -106,4 +106,33 @@
.cp-teams-help { .cp-teams-help {
margin-left: 10px; margin-left: 10px;
} }
// mediatag preview
#cp-mediatag-preview-modal {
.cp-modal {
display: flex;
align-items: center;
justify-content: center;
.cp-mediatag-container {
height: 100%;
width: 100%;
media-tag {
& > * {
max-width: 100%;
max-height: 100%;
}
& > iframe {
width: 100%;
height: 100%;
}
& > .plain-text-reader {
white-space: pre-wrap;
text-align: left;
word-break: break-word;
color: @cryptpad_text_col;
}
}
}
}
}
} }

60
www/common/common-interface.js
View File

@ -1283,5 +1283,65 @@ define([
}; };
}; };
UI.createContextMenu = function (menu) {
var $menu = $(menu).appendTo($('body'));
var display = function (e) {
$menu.css({ display: "block" });
var h = $menu.outerHeight();
var w = $menu.outerWidth();
var wH = window.innerHeight;
var wW = window.innerWidth;
if (h > wH) {
$menu.css({
top: '0px',
bottom: ''
});
} else if (e.pageY + h <= wH) {
$menu.css({
top: e.pageY+'px',
bottom: ''
});
} else {
$menu.css({
bottom: '0px',
top: ''
});
}
if(w > wW) {
$menu.css({
left: '0px',
right: ''
});
} else if (e.pageX + w <= wW) {
$menu.css({
left: e.pageX+'px',
right: ''
});
} else {
$menu.css({
left: '',
right: '0px',
});
}
};
var hide = function () {
$menu.hide();
};
var remove = function () {
$menu.remove();
};
$('body').click(hide);
return {
menu: menu,
show: display,
hide: hide,
remove: remove
};
};
return UI; return UI;
}); });

116
www/common/common-ui-elements.js
View File

@ -3373,122 +3373,6 @@ define([
}; };
var createContextMenu = function (menu) {
var $menu = $(menu).appendTo($('body'));
var display = function (e) {
$menu.css({ display: "block" });
var h = $menu.outerHeight();
var w = $menu.outerWidth();
var wH = window.innerHeight;
var wW = window.innerWidth;
if (h > wH) {
$menu.css({
top: '0px',
bottom: ''
});
} else if (e.pageY + h <= wH) {
$menu.css({
top: e.pageY+'px',
bottom: ''
});
} else {
$menu.css({
bottom: '0px',
top: ''
});
}
if(w > wW) {
$menu.css({
left: '0px',
right: ''
});
} else if (e.pageX + w <= wW) {
$menu.css({
left: e.pageX+'px',
right: ''
});
} else {
$menu.css({
left: '',
right: '0px',
});
}
};
var hide = function () {
$menu.hide();
};
var remove = function () {
$menu.remove();
};
$('body').click(hide);
return {
menu: menu,
show: display,
hide: hide,
remove: remove
};
};
var mediatagContextMenu;
UIElements.importMediaTagMenu = function (common) {
if (mediatagContextMenu) { return mediatagContextMenu; }
// Create context menu
var menu = h('div.cp-contextmenu.dropdown.cp-unselectable', [
h('ul.dropdown-menu', {
'role': 'menu',
'aria-labelledBy': 'dropdownMenu',
'style': 'display:block;position:static;margin-bottom:5px;'
}, [
h('li', h('a.cp-app-code-context-saveindrive.dropdown-item', {
'tabindex': '-1',
'data-icon': "fa-cloud-upload",
}, Messages.pad_mediatagImport)),
h('li', h('a.cp-app-code-context-download.dropdown-item', {
'tabindex': '-1',
'data-icon': "fa-download",
}, Messages.download_mt_button)),
])
]);
// create the icon for each contextmenu option
$(menu).find("li a.dropdown-item").each(function (i, el) {
var $icon = $("<span>");
if ($(el).attr('data-icon')) {
var font = $(el).attr('data-icon').indexOf('cptools') === 0 ? 'cptools' : 'fa';
$icon.addClass(font).addClass($(el).attr('data-icon'));
} else {
$icon.text($(el).text());
}
$(el).prepend($icon);
});
var m = createContextMenu(menu);
mediatagContextMenu = m;
var $menu = $(m.menu);
$menu.on('click', 'a', function (e) {
e.stopPropagation();
m.hide();
var $mt = $menu.data('mediatag');
if ($(this).hasClass("cp-app-code-context-saveindrive")) {
common.importMediaTag($mt);
}
else if ($(this).hasClass("cp-app-code-context-download")) {
var media = $mt[0]._mediaObject;
window.saveAs(media._blob.content, media.name);
}
});
return m;
};
UIElements.getMediaTagPreview = function () {
};
UIElements.displayFriendRequestModal = function (common, data) { UIElements.displayFriendRequestModal = function (common, data) {
var msg = data.content.msg; var msg = data.content.msg;
var userData = msg.content.user; var userData = msg.content.user;

14
www/common/diffMarked.js
View File

@ -5,13 +5,14 @@ define([
'/common/common-hash.js', '/common/common-hash.js',
'/common/common-util.js', '/common/common-util.js',
'/common/hyperscript.js', '/common/hyperscript.js',
'/common/inner/common-mediatag.js',
'/common/media-tag.js', '/common/media-tag.js',
'/common/highlight/highlight.pack.js', '/common/highlight/highlight.pack.js',
'/customize/messages.js', '/customize/messages.js',
'/bower_components/diff-dom/diffDOM.js', '/bower_components/diff-dom/diffDOM.js',
'/bower_components/tweetnacl/nacl-fast.min.js', '/bower_components/tweetnacl/nacl-fast.min.js',
'css!/common/highlight/styles/github.css' 'css!/common/highlight/styles/github.css'
],function ($, ApiConfig, Marked, Hash, Util, h, MediaTag, Highlight, Messages) { ],function ($, ApiConfig, Marked, Hash, Util, h, MT, MediaTag, Highlight, Messages) {
var DiffMd = {}; var DiffMd = {};
var DiffDOM = window.diffDOM; var DiffDOM = window.diffDOM;
@ -355,7 +356,7 @@ define([
DD.apply($content[0], patch); DD.apply($content[0], patch);
var $mts = $content.find('media-tag:not(:has(*))'); var $mts = $content.find('media-tag:not(:has(*))');
$mts.each(function (i, el) { $mts.each(function (i, el) {
$(el).contextmenu(function (e) { var $mt = $(el).contextmenu(function (e) {
e.preventDefault(); e.preventDefault();
$(contextMenu.menu).data('mediatag', $(el)); $(contextMenu.menu).data('mediatag', $(el));
contextMenu.show(e); contextMenu.show(e);
@ -371,6 +372,15 @@ define([
observer.disconnect(); observer.disconnect();
} }
}); });
$mt.off('dblclick');
if ($mt.find('img').length) {
$mt.on('dblclick', function () {
common.getMediaTagPreview({
src: $mt.attr('src'),
key: $mt.attr('data-crypto-key')
});
});
}
}); });
observer.observe(el, { observer.observe(el, {
attributes: false, attributes: false,

40
www/common/drive-ui.js
View File

@ -80,6 +80,7 @@ define([
var faCollapseAll = 'fa-minus-square-o'; var faCollapseAll = 'fa-minus-square-o';
var faShared = 'fa-shhare-alt'; var faShared = 'fa-shhare-alt';
var faReadOnly = 'fa-eye'; var faReadOnly = 'fa-eye';
var faPreview = 'fa-eye';
var faOpenInCode = 'cptools-code'; var faOpenInCode = 'cptools-code';
var faRename = 'fa-pencil'; var faRename = 'fa-pencil';
var faColor = 'cptools-palette'; var faColor = 'cptools-palette';
@ -317,6 +318,10 @@ define([
'style': 'display:block;position:static;margin-bottom:5px;' 'style': 'display:block;position:static;margin-bottom:5px;'
}, [ }, [
h('span.cp-app-drive-context-noAction.dropdown-item.disabled', Messages.fc_noAction || "No action possible"), h('span.cp-app-drive-context-noAction.dropdown-item.disabled', Messages.fc_noAction || "No action possible"),
h('li', h('a.cp-app-drive-context-preview.dropdown-item', {
'tabindex': '-1',
'data-icon': faPreview,
}, 'PREVIEW')), // XXX
h('li', h('a.cp-app-drive-context-open.dropdown-item', { h('li', h('a.cp-app-drive-context-open.dropdown-item', {
'tabindex': '-1', 'tabindex': '-1',
'data-icon': faFolderOpen, 'data-icon': faFolderOpen,
@ -1042,12 +1047,23 @@ define([
return ret; return ret;
}; };
var openFile = function (el, isRo) { var openFile = function (el, isRo, app) {
var data = manager.getFileData(el); var data = manager.getFileData(el);
if (!data || (!data.href && !data.roHref)) { if (!data || (!data.href && !data.roHref)) {
return void logError("Missing data for the file", el, data); return void logError("Missing data for the file", el, data);
} }
var href = isRo ? data.roHref : (data.href || data.roHref); var href = isRo ? data.roHref : (data.href || data.roHref);
var parsed = Hash.parsePadUrl(href);
if (parsed.hashData && parsed.hashData.type === 'file' && !app) {
common.getMediaTagPreview({
href: data.href,
password: data.password
});
return;
}
var priv = metadataMgr.getPrivateData(); var priv = metadataMgr.getPrivateData();
var useUnsafe = Util.find(priv, ['settings', 'security', 'unsafeLinks']); var useUnsafe = Util.find(priv, ['settings', 'security', 'unsafeLinks']);
if (useUnsafe !== false) { // true of undefined: use unsafe links if (useUnsafe !== false) { // true of undefined: use unsafe links
@ -1055,7 +1071,6 @@ define([
} }
// Get hidden hash // Get hidden hash
var parsed = Hash.parsePadUrl(href);
var secret = Hash.getSecrets(parsed.type, parsed.hash, data.password); var secret = Hash.getSecrets(parsed.type, parsed.hash, data.password);
var opts = {}; var opts = {};
if (isRo) { opts.view = true; } if (isRo) { opts.view = true; }
@ -1175,6 +1190,7 @@ define([
if (!$element.is('.cp-border-color-file')) { if (!$element.is('.cp-border-color-file')) {
//hide.push('download'); //hide.push('download');
hide.push('openincode'); hide.push('openincode');
hide.push('preview');
} }
if ($element.is('.cp-border-color-sheet')) { if ($element.is('.cp-border-color-sheet')) {
hide.push('download'); hide.push('download');
@ -1192,6 +1208,9 @@ define([
if (!metadata || !Util.isPlainTextFile(metadata.fileType, metadata.title)) { if (!metadata || !Util.isPlainTextFile(metadata.fileType, metadata.title)) {
hide.push('openincode'); hide.push('openincode');
} }
if (metadata.channel && metadata.channel.length < 48) {
hide.push('preview');
}
if (!metadata.channel || metadata.channel.length > 32 || metadata.rtChannel) { if (!metadata.channel || metadata.channel.length > 32 || metadata.rtChannel) {
hide.push('makeacopy'); // Not for blobs hide.push('makeacopy'); // Not for blobs
} }
@ -1260,6 +1279,7 @@ define([
hide.push('savelocal'); hide.push('savelocal');
hide.push('openincode'); // can't because of race condition hide.push('openincode'); // can't because of race condition
hide.push('makeacopy'); hide.push('makeacopy');
hide.push('preview');
} }
if (containsFolder && paths.length > 1) { if (containsFolder && paths.length > 1) {
// Cannot open multiple folders // Cannot open multiple folders
@ -1276,12 +1296,12 @@ define([
show = ['newfolder', 'newsharedfolder', 'uploadfiles', 'uploadfolder', 'newdoc']; show = ['newfolder', 'newsharedfolder', 'uploadfiles', 'uploadfolder', 'newdoc'];
break; break;
case 'tree': case 'tree':
show = ['open', 'openro', 'openincode', 'expandall', 'collapseall', show = ['open', 'openro', 'preview', 'openincode', 'expandall', 'collapseall',
'color', 'download', 'share', 'savelocal', 'rename', 'delete', 'makeacopy', 'color', 'download', 'share', 'savelocal', 'rename', 'delete', 'makeacopy',
'deleteowned', 'removesf', 'access', 'properties', 'hashtag']; 'deleteowned', 'removesf', 'access', 'properties', 'hashtag'];
break; break;
case 'default': case 'default':
show = ['open', 'openro', 'share', 'openparent', 'delete', 'deleteowned', 'properties', 'access', 'hashtag', 'makeacopy']; show = ['open', 'openro', 'preview', 'share', 'openparent', 'delete', 'deleteowned', 'properties', 'access', 'hashtag', 'makeacopy'];
break; break;
case 'trashtree': { case 'trashtree': {
show = ['empty']; show = ['empty'];
@ -3980,11 +4000,15 @@ define([
else if ($this.hasClass('cp-app-drive-context-deleteowned')) { else if ($this.hasClass('cp-app-drive-context-deleteowned')) {
deleteOwnedPaths(paths); deleteOwnedPaths(paths);
} }
else if ($this.hasClass('cp-app-drive-context-preview')) {
if (paths.length !== 1) { return; }
el = manager.find(paths[0].path);
openFile(el);
}
else if ($this.hasClass('cp-app-drive-context-open')) { else if ($this.hasClass('cp-app-drive-context-open')) {
paths.forEach(function (p) { paths.forEach(function (p) {
var $element = p.element; var el = manager.find(p.path);
$element.click(); openFile(el, false, true);
$element.dblclick();
}); });
} }
else if ($this.hasClass('cp-app-drive-context-openro')) { else if ($this.hasClass('cp-app-drive-context-openro')) {
@ -3999,7 +4023,7 @@ define([
} else { } else {
if (!el || manager.isFolder(el)) { return; } if (!el || manager.isFolder(el)) { return; }
} }
openFile(el, true); openFile(el, true, true);
}); });
} }
else if ($this.hasClass('cp-app-drive-context-makeacopy')) { else if ($this.hasClass('cp-app-drive-context-makeacopy')) {

129
www/common/inner/common-mediatag.js
View File

@ -3,14 +3,18 @@ define([
'/common/common-util.js', '/common/common-util.js',
'/common/common-hash.js', '/common/common-hash.js',
'/common/common-interface.js', '/common/common-interface.js',
'/common/hyperscript.js',
'/common/media-tag.js', '/common/media-tag.js',
'/customize/messages.js', '/customize/messages.js',
'/bower_components/croppie/croppie.min.js', '/bower_components/croppie/croppie.min.js',
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/croppie/croppie.css', 'css!/bower_components/croppie/croppie.css',
], function ($, Util, Hash, UI, MediaTag, Messages) { ], function ($, Util, Hash, UI, h, MediaTag, Messages) {
var MT = {}; var MT = {};
var Nacl = window.nacl;
// Configure MediaTags to use our local viewer // Configure MediaTags to use our local viewer
if (MediaTag) { if (MediaTag) {
MediaTag.setDefaultConfig('pdf', { MediaTag.setDefaultConfig('pdf', {
@ -204,7 +208,7 @@ define([
return data; return data;
}; };
MT.previewMediaTag = function (common, config) { MT.getMediaTagPreview = function (common, config) {
config = config || {}; config = config || {};
var metadataMgr = common.getMetadataMgr(); var metadataMgr = common.getMetadataMgr();
@ -217,21 +221,124 @@ define([
var secret = Hash.getSecrets(parsed.type, parsed.hash, config.password); var secret = Hash.getSecrets(parsed.type, parsed.hash, config.password);
var host = priv.fileHost || priv.origin || ''; var host = priv.fileHost || priv.origin || '';
src = host + Hash.getBlobPathFromHex(secret.channel); src = host + Hash.getBlobPathFromHex(secret.channel);
key = secret.keys && secret.keys.cryptKey; var _key = secret.keys && secret.keys.cryptKey;
} if (_key) { key = 'cryptpad:' + Nacl.util.encodeBase64(_key); }
if (!src || !key) {
// XXX
return;
} }
if (!src || !key) { return void UI.log(Messages.error); }
var tag = h('media-tag', { var tag = h('media-tag', {
src: src, src: src,
'data-crypto-key': 'cryptpad:' + key 'data-crypto-key': key
}); });
$img.attr('src', src);
$img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
var $modal = UI.createModal({
id: 'cp-mediatag-preview-modal',
$body: $('body')
}).show().focus();
var $container = $modal.find('.cp-modal').append(h('div.cp-mediatag-container', [
tag
]));
var el;
var checkSize = function () {
if (!el) { return; }
$container.find('.cp-mediatag-container').css('height', '');
var size = el.naturalHeight || el.videoHeight;
// Center small images and videos
if (size && size < $container.height()) {
$container.find('.cp-mediatag-container').css('height', 'auto');
}
};
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length === 1) {
el = mutation.addedNodes[0];
if (el.readyState === 0) {
// Wait for the video to be ready before checking the size
el.onloadedmetadata = checkSize;
return;
}
if (el.complete === false) {
el.onload = checkSize;
return;
}
setTimeout(checkSize);
}
});
});
observer.observe(tag, {
attributes: false,
childList: true,
characterData: false
});
MediaTag(tag).on('error', function () {
UI.log(Messages.error);
$modal.hide();
});
};
var mediatagContextMenu;
MT.importMediaTagMenu = function (common) {
if (mediatagContextMenu) { return mediatagContextMenu; }
// Create context menu
var menu = h('div.cp-contextmenu.dropdown.cp-unselectable', [
h('ul.dropdown-menu', {
'role': 'menu',
'aria-labelledBy': 'dropdownMenu',
'style': 'display:block;position:static;margin-bottom:5px;'
}, [
h('li', h('a.cp-app-code-context-open.dropdown-item', {
'tabindex': '-1',
'data-icon': "fa-eye",
}, Messages.fc_open)), // XXX
h('li', h('a.cp-app-code-context-saveindrive.dropdown-item', {
'tabindex': '-1',
'data-icon': "fa-cloud-upload",
}, Messages.pad_mediatagImport)),
h('li', h('a.cp-app-code-context-download.dropdown-item', {
'tabindex': '-1',
'data-icon': "fa-download",
}, Messages.download_mt_button)),
])
]);
// create the icon for each contextmenu option
$(menu).find("li a.dropdown-item").each(function (i, el) {
var $icon = $("<span>");
if ($(el).attr('data-icon')) {
var font = $(el).attr('data-icon').indexOf('cptools') === 0 ? 'cptools' : 'fa';
$icon.addClass(font).addClass($(el).attr('data-icon'));
} else {
$icon.text($(el).text());
}
$(el).prepend($icon);
});
var m = UI.createContextMenu(menu);
mediatagContextMenu = m;
var $menu = $(m.menu);
$menu.on('click', 'a', function (e) {
e.stopPropagation();
m.hide();
var $mt = $menu.data('mediatag');
if ($(this).hasClass("cp-app-code-context-saveindrive")) {
common.importMediaTag($mt);
}
else if ($(this).hasClass("cp-app-code-context-download")) {
var media = $mt[0]._mediaObject;
window.saveAs(media._blob.content, media.name);
}
else if ($(this).hasClass("cp-app-code-context-open")) {
common.getMediaTagPreview({
src: $mt.attr('src'),
key: $mt.attr('data-crypto-key')
});
}
});
return m;
}; };
return MT; return MT;

4
www/common/sframe-common.js
View File

@ -104,8 +104,8 @@ define([
funcs.getBurnAfterReadingWarning = callWithCommon(UIElements.getBurnAfterReadingWarning); funcs.getBurnAfterReadingWarning = callWithCommon(UIElements.getBurnAfterReadingWarning);
funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal); funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal);
funcs.onServerError = callWithCommon(UIElements.onServerError); funcs.onServerError = callWithCommon(UIElements.onServerError);
funcs.importMediaTagMenu = callWithCommon(UIElements.importMediaTagMenu); funcs.importMediaTagMenu = callWithCommon(MT.importMediaTagMenu);
funcs.getMediaTagPreview = callWithCommon(UIElements.getMediaTagPreview); funcs.getMediaTagPreview = callWithCommon(MT.getMediaTagPreview);
// Thumb // Thumb
funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail); funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);