|
import { api } from '../api.js';
|
|
|
|
export class RecentFiles extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.recentFiles = [];
|
|
}
|
|
|
|
async connectedCallback() {
|
|
await this.loadRecentFiles();
|
|
}
|
|
|
|
async loadRecentFiles() {
|
|
try {
|
|
this.recentFiles = await api.listRecentFiles();
|
|
this.render();
|
|
} catch (error) {
|
|
console.error('Failed to load recent files:', error);
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Failed to load recent files: ' + error.message, type: 'error' }
|
|
}));
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this.recentFiles.length === 0) {
|
|
this.innerHTML = `
|
|
<div class="recent-files-container">
|
|
<h2>Recent Files</h2>
|
|
<p class="empty-state">No recent files found.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
this.innerHTML = `
|
|
<div class="recent-files-container">
|
|
<h2>Recent Files</h2>
|
|
<div class="file-grid">
|
|
${this.recentFiles.map(file => this.renderFile(file)).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
this.attachListeners();
|
|
}
|
|
|
|
renderFile(file) {
|
|
const icon = this.getFileIcon(file.mime_type);
|
|
const size = this.formatFileSize(file.size);
|
|
const lastAccessed = file.last_accessed_at ? new Date(file.last_accessed_at).toLocaleString() : 'N/A';
|
|
|
|
return `
|
|
<div class="file-item" data-file-id="${file.id}">
|
|
<div class="file-icon">${icon}</div>
|
|
<div class="file-name">${file.name}</div>
|
|
<div class="file-size">${size}</div>
|
|
<div class="file-last-accessed">Accessed: ${lastAccessed}</div>
|
|
<div class="file-actions-menu">
|
|
<button class="action-btn" data-action="download" data-id="${file.id}">Download</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
getFileIcon(mimeType) {
|
|
if (mimeType.startsWith('image/')) return '📷';
|
|
if (mimeType.startsWith('video/')) return '🎥';
|
|
if (mimeType.startsWith('audio/')) return '🎵';
|
|
if (mimeType.includes('pdf')) return '📄';
|
|
if (mimeType.includes('text')) return '📄';
|
|
return '📄';
|
|
}
|
|
|
|
formatFileSize(bytes) {
|
|
if (bytes < 1024) return bytes + ' B';
|
|
if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
|
|
if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
|
|
return (bytes / 1073741824).toFixed(1) + ' GB';
|
|
}
|
|
|
|
attachListeners() {
|
|
this.querySelectorAll('.action-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
const action = btn.dataset.action;
|
|
const id = parseInt(btn.dataset.id);
|
|
if (action === 'download') {
|
|
await this.handleDownload(id);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
async handleDownload(fileId) {
|
|
try {
|
|
const blob = await api.downloadFile(fileId);
|
|
const file = this.recentFiles.find(f => f.id === fileId);
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = file.name;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'File downloaded successfully!', type: 'success' }
|
|
}));
|
|
} catch (error) {
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Failed to download file: ' + error.message, type: 'error' }
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('recent-files', RecentFiles);
|