Expand preview media support
This commit is contained in:
Mikei386
+124
-3
@@ -40,7 +40,8 @@ const icons = {
|
||||
symlink: 'Link',
|
||||
other: 'Item'
|
||||
};
|
||||
const previewExtensions = new Set(['txt', 'log', 'md', 'rd', 'rst', 'yaml', 'yml', 'json', 'xml', 'csv', 'ini', 'cfg', 'conf', 'sh', 'php', 'js', 'css', 'html']);
|
||||
const previewExtensions = new Set(['txt', 'log', 'md', 'rd', 'rst', 'yaml', 'yml', 'json', 'xml', 'csv', 'tsv', 'ini', 'cfg', 'conf', 'env', 'toml', 'sql', 'nfo', 'srt', 'sub', 'vtt', 'm3u', 'm3u8', 'pls', 'sh', 'bash', 'zsh', 'php', 'js', 'ts', 'tsx', 'jsx', 'css', 'html', 'py', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'hpp', 'bat', 'ps1', 'properties', 'service', 'timer', 'mount', 'rules', 'cron', 'plg', 'page', 'jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'pdf', 'mp3', 'flac', 'm4a', 'ogg', 'wav', 'mp4', 'mkv', 'webm', 'mov']);
|
||||
const previewFilenames = new Set(['dockerfile', 'makefile']);
|
||||
|
||||
document.querySelector('#newExplorerButton').addEventListener('click', () => openExplorer());
|
||||
document.querySelector('#newPropertiesButton').addEventListener('click', () => openProperties());
|
||||
@@ -429,10 +430,32 @@ function renderPreview(body, win) {
|
||||
<strong>${escapeHtml(entry?.name || data.name || 'Vorschau')}</strong>
|
||||
<span>${escapeHtml(formatBytes(data.size || entry?.size || 0))}</span>
|
||||
</div>
|
||||
<pre class="preview-text">${escapeHtml(data.content || '')}</pre>
|
||||
${renderPreviewContent(data)}
|
||||
`;
|
||||
}
|
||||
|
||||
function renderPreviewContent(data) {
|
||||
if (data.type === 'markdown') {
|
||||
return `<article class="preview-rendered">${renderMarkdown(data.content || '')}</article>`;
|
||||
}
|
||||
if (data.type === 'csv') {
|
||||
return renderCsvPreview(data.content || '', data.extension === 'tsv' ? '\t' : ',');
|
||||
}
|
||||
if (data.type === 'image') {
|
||||
return `<div class="preview-media"><img src="${escapeAttr(apiUrl(data.rawUrl))}" alt="${escapeAttr(data.name || 'Vorschau')}"></div>`;
|
||||
}
|
||||
if (data.type === 'pdf') {
|
||||
return `<iframe class="preview-frame" src="${escapeAttr(apiUrl(data.rawUrl))}" title="${escapeAttr(data.name || 'PDF Vorschau')}"></iframe>`;
|
||||
}
|
||||
if (data.type === 'audio') {
|
||||
return `<div class="preview-media"><audio controls src="${escapeAttr(apiUrl(data.rawUrl))}"></audio></div>`;
|
||||
}
|
||||
if (data.type === 'video') {
|
||||
return `<div class="preview-media"><video controls src="${escapeAttr(apiUrl(data.rawUrl))}"></video></div>`;
|
||||
}
|
||||
return `<pre class="preview-text">${escapeHtml(data.content || '')}</pre>`;
|
||||
}
|
||||
|
||||
async function loadPreview(win, entry) {
|
||||
win.data.loading = true;
|
||||
win.data.error = null;
|
||||
@@ -442,6 +465,9 @@ async function loadPreview(win, entry) {
|
||||
win.data.entry = entry;
|
||||
win.data.name = result.name;
|
||||
win.data.size = result.size;
|
||||
win.data.type = result.type;
|
||||
win.data.extension = result.extension;
|
||||
win.data.rawUrl = result.rawUrl;
|
||||
win.data.content = result.content;
|
||||
} catch (error) {
|
||||
win.data.error = error.message;
|
||||
@@ -451,6 +477,99 @@ async function loadPreview(win, entry) {
|
||||
}
|
||||
}
|
||||
|
||||
function renderMarkdown(content) {
|
||||
const blocks = [];
|
||||
let listItems = [];
|
||||
const flushList = () => {
|
||||
if (listItems.length) {
|
||||
blocks.push(`<ul>${listItems.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join('')}</ul>`);
|
||||
listItems = [];
|
||||
}
|
||||
};
|
||||
|
||||
for (const line of String(content).split(/\r?\n/)) {
|
||||
const heading = /^(#{1,6})\s+(.*)$/.exec(line);
|
||||
if (heading) {
|
||||
flushList();
|
||||
const level = heading[1].length;
|
||||
blocks.push(`<h${level}>${renderInlineMarkdown(heading[2])}</h${level}>`);
|
||||
continue;
|
||||
}
|
||||
const list = /^\s*[-*]\s+(.*)$/.exec(line);
|
||||
if (list) {
|
||||
listItems.push(list[1]);
|
||||
continue;
|
||||
}
|
||||
flushList();
|
||||
if (!line.trim()) continue;
|
||||
blocks.push(`<p>${renderInlineMarkdown(line)}</p>`);
|
||||
}
|
||||
flushList();
|
||||
return blocks.join('');
|
||||
}
|
||||
|
||||
function renderInlineMarkdown(value) {
|
||||
return escapeHtml(value)
|
||||
.replace(/`([^`]+)`/g, '<code>$1</code>')
|
||||
.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/\*([^*]+)\*/g, '<em>$1</em>');
|
||||
}
|
||||
|
||||
function renderCsvPreview(content, delimiter) {
|
||||
const rows = parseDelimitedRows(content, delimiter).slice(0, 80);
|
||||
if (!rows.length) {
|
||||
return '<p class="muted">Keine Tabellenzeilen.</p>';
|
||||
}
|
||||
return `
|
||||
<div class="preview-table-wrap">
|
||||
<table class="preview-table">
|
||||
<tbody>
|
||||
${rows.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join('')}</tr>`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function parseDelimitedRows(content, delimiter) {
|
||||
const rows = [];
|
||||
let row = [];
|
||||
let cell = '';
|
||||
let quoted = false;
|
||||
const text = String(content || '');
|
||||
for (let index = 0; index < text.length; index += 1) {
|
||||
const char = text[index];
|
||||
if (char === '"') {
|
||||
if (quoted && text[index + 1] === '"') {
|
||||
cell += '"';
|
||||
index += 1;
|
||||
} else {
|
||||
quoted = !quoted;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (!quoted && char === delimiter) {
|
||||
row.push(cell);
|
||||
cell = '';
|
||||
continue;
|
||||
}
|
||||
if (!quoted && (char === '\n' || char === '\r')) {
|
||||
if (char === '\r' && text[index + 1] === '\n') index += 1;
|
||||
row.push(cell);
|
||||
rows.push(row);
|
||||
row = [];
|
||||
cell = '';
|
||||
continue;
|
||||
}
|
||||
cell += char;
|
||||
}
|
||||
if (cell || row.length) {
|
||||
row.push(cell);
|
||||
rows.push(row);
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
function renderQueue(body) {
|
||||
body.innerHTML = queueMarkup();
|
||||
bindQueueActions(body);
|
||||
@@ -1421,7 +1540,9 @@ function extensionOf(name) {
|
||||
}
|
||||
|
||||
function isPreviewable(entry) {
|
||||
return entry?.type === 'file' && previewExtensions.has(extensionOf(entry.name || entry.path));
|
||||
if (entry?.type !== 'file') return false;
|
||||
const name = String(entry.name || entry.path || '').toLowerCase();
|
||||
return previewFilenames.has(name) || previewExtensions.has(extensionOf(name));
|
||||
}
|
||||
|
||||
function joinPath(parent, name) {
|
||||
|
||||
@@ -731,6 +731,82 @@
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.u-nav .preview-rendered,
|
||||
.u-nav .preview-table-wrap,
|
||||
.u-nav .preview-media,
|
||||
.u-nav .preview-frame {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.u-nav .preview-rendered {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
overflow: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.u-nav .preview-rendered h1,
|
||||
.u-nav .preview-rendered h2,
|
||||
.u-nav .preview-rendered h3,
|
||||
.u-nav .preview-rendered p,
|
||||
.u-nav .preview-rendered ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.u-nav .preview-rendered code {
|
||||
background: var(--surface-2);
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.u-nav .preview-table-wrap {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.u-nav .preview-table {
|
||||
border-collapse: collapse;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.u-nav .preview-table td {
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 6px 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.u-nav .preview-media {
|
||||
align-items: center;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.u-nav .preview-media img,
|
||||
.u-nav .preview-media video {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.u-nav .preview-media audio {
|
||||
width: min(100%, 560px);
|
||||
}
|
||||
|
||||
.u-nav .preview-frame {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.u-nav .topbar {
|
||||
align-items: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user