211 lines
7.6 KiB
HTML
211 lines
7.6 KiB
HTML
{% extends "base.htm" %}
|
|
|
|
{% block title %}NanoShare - File info{% endblock %}
|
|
|
|
{% block meta %}
|
|
<meta name="description" content="NanoShare file details and access information.">
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.file-info-page { padding: clamp(16px, 3vw, 28px); }
|
|
.top-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
|
|
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 10px 14px; margin-top: 14px; }
|
|
.kv dt { color: var(--muted); font-weight: 700; }
|
|
.kv dd { margin: 0; word-break: break-word; }
|
|
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
|
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .92rem; }
|
|
.preview-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
|
|
.preview-head { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .9rem; font-weight: 700; }
|
|
.preview-body { min-height: 230px; display: grid; place-items: center; padding: 10px; }
|
|
.preview-body img, .preview-body video, .preview-body audio, .preview-body iframe { width: 100%; max-width: 100%; border: 0; border-radius: 8px; }
|
|
.preview-body video { max-height: 260px; }
|
|
.preview-body pre { width: 100%; max-height: 260px; overflow: auto; margin: 0; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(0,0,0,.16); white-space: pre-wrap; word-break: break-word; }
|
|
.preview-note { color: var(--muted); font-size: .88rem; text-align: center; }
|
|
@media (max-width: 980px) { .top-grid { grid-template-columns: 1fr; } }
|
|
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; gap: 4px; } }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<main class="file-info-page">
|
|
<section class="card" style="padding: clamp(18px, 2.6vw, 28px);">
|
|
<div class="top-grid">
|
|
<div>
|
|
<h1 class="page-title">File details</h1>
|
|
<p class="subtle">Everything about this file, including expiration date and recent accesses.</p>
|
|
|
|
<dl class="kv">
|
|
<dt>Filename</dt>
|
|
<dd>{{ file.file_name }}</dd>
|
|
|
|
<dt>Note</dt>
|
|
<dd>{{ file.note or 'No note' }}</dd>
|
|
|
|
<dt>Size</dt>
|
|
<dd><span class="badge">{{ file.file_size }}</span></dd>
|
|
|
|
<dt>Uploaded at</dt>
|
|
<dd><time class="local-time" data-ts="{{ file.uploaded_at }}"></time></dd>
|
|
|
|
<dt>Expires at</dt>
|
|
<dd>
|
|
{% if file.expires_at %}
|
|
<time class="local-time" data-ts="{{ file.expires_at }}"></time>
|
|
{% else %}
|
|
Never
|
|
{% endif %}
|
|
</dd>
|
|
|
|
<dt>Public URL</dt>
|
|
<dd><a class="mono" href="{{ share_url }}">{{ share_url }}</a></dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<aside class="preview-card" aria-label="File preview">
|
|
<div class="preview-head">Preview</div>
|
|
<div id="previewBody" class="preview-body">
|
|
<p class="preview-note">Loading preview...</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="toolbar">
|
|
<a class="btn" href="{{ url_for('side_main.file_edit', file_id=file.file_id) }}">Edit</a>
|
|
<button id="copyUrlBtn" class="btn btn-ghost" type="button">Copy link</button>
|
|
<a class="btn btn-ghost" href="{{ url_for('side_main.files_list') }}">Back to files</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card" style="padding: clamp(18px, 2.6vw, 28px); margin-top: 16px;">
|
|
<h2 style="margin:0 0 8px;">Access history</h2>
|
|
<p class="subtle">Latest request metadata for this file.</p>
|
|
|
|
<div class="table-wrap" role="region" aria-label="Access history" tabindex="0">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Time</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">IP</th>
|
|
<th scope="col">User Agent</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if accesses %}
|
|
{% for access in accesses %}
|
|
<tr>
|
|
<td><time class="local-time" data-ts="{{ access.accessed_at }}"></time></td>
|
|
<td><span class="badge">{{ access.status }}</span></td>
|
|
<td>{{ access.ip or '-' }}</td>
|
|
<td>{{ access.user_agent or '-' }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="4">No access records yet.</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
function formatDate(value) {
|
|
if (!value) return '';
|
|
const raw = String(value);
|
|
let date;
|
|
if (/^\d+$/.test(raw)) {
|
|
date = new Date(Number.parseInt(raw, 10));
|
|
} else {
|
|
date = new Date(raw);
|
|
}
|
|
if (Number.isNaN(date.getTime())) return raw;
|
|
return date.toLocaleString(undefined, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false,
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('time.local-time').forEach((el) => {
|
|
const raw = el.dataset.ts || '';
|
|
el.textContent = formatDate(raw) || '-';
|
|
});
|
|
|
|
async function loadPreview() {
|
|
const previewBody = document.getElementById('previewBody');
|
|
if (!previewBody) return;
|
|
|
|
let url = '{{ share_url }}';
|
|
if (window.location.protocol === 'https:' && url.startsWith('http://')) {
|
|
const parsed = new URL(url);
|
|
if (parsed.host === window.location.host) {
|
|
parsed.protocol = 'https:';
|
|
url = parsed.toString();
|
|
}
|
|
}
|
|
try {
|
|
const response = await fetch(url, { method: 'GET' });
|
|
if (!response.ok) {
|
|
previewBody.innerHTML = '<p class="preview-note">Preview unavailable.</p>';
|
|
return;
|
|
}
|
|
|
|
const contentType = (response.headers.get('content-type') || '').toLowerCase();
|
|
|
|
if (contentType.startsWith('image/')) {
|
|
previewBody.innerHTML = `<img src="${url}" alt="File preview">`;
|
|
return;
|
|
}
|
|
if (contentType.startsWith('video/')) {
|
|
previewBody.innerHTML = `<video controls src="${url}"></video>`;
|
|
return;
|
|
}
|
|
if (contentType.startsWith('audio/')) {
|
|
previewBody.innerHTML = `<audio controls src="${url}"></audio>`;
|
|
return;
|
|
}
|
|
if (contentType.includes('pdf')) {
|
|
previewBody.innerHTML = `<iframe src="${url}" title="PDF preview" height="260"></iframe>`;
|
|
return;
|
|
}
|
|
if (contentType.startsWith('text/') || contentType.includes('json') || contentType.includes('xml')) {
|
|
const text = await response.text();
|
|
const safe = text
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
previewBody.innerHTML = `<pre>${safe.slice(0, 6000) || 'Empty text file.'}</pre>`;
|
|
return;
|
|
}
|
|
|
|
previewBody.innerHTML = `<p class="preview-note">No inline preview for this file type.<br><a href="${url}" target="_blank" rel="noopener">Open file</a></p>`;
|
|
} catch {
|
|
previewBody.innerHTML = '<p class="preview-note">Preview unavailable.</p>';
|
|
}
|
|
}
|
|
|
|
loadPreview();
|
|
|
|
document.getElementById('copyUrlBtn')?.addEventListener('click', async () => {
|
|
try {
|
|
await navigator.clipboard.writeText('{{ share_url }}');
|
|
const btn = document.getElementById('copyUrlBtn');
|
|
if (!btn) return;
|
|
const label = btn.textContent;
|
|
btn.textContent = 'Copied';
|
|
setTimeout(() => { btn.textContent = label; }, 1200);
|
|
} catch {
|
|
alert('Could not copy link.');
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|