523 lines
13 KiB
TypeScript
523 lines
13 KiB
TypeScript
import * as plugins from '../plugins.js';
|
|
import { apiService } from '../services/index.js';
|
|
import { formatSize, getFileName } from '../utilities/index.js';
|
|
import { themeStyles } from '../styles/index.js';
|
|
|
|
const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;
|
|
|
|
@customElement('tsview-s3-preview')
|
|
export class TsviewS3Preview extends DeesElement {
|
|
@property({ type: String })
|
|
public accessor bucketName: string = '';
|
|
|
|
@property({ type: String })
|
|
public accessor objectKey: string = '';
|
|
|
|
@state()
|
|
private accessor loading: boolean = false;
|
|
|
|
@state()
|
|
private accessor saving: boolean = false;
|
|
|
|
@state()
|
|
private accessor content: string = '';
|
|
|
|
@state()
|
|
private accessor originalTextContent: string = '';
|
|
|
|
@state()
|
|
private accessor hasChanges: boolean = false;
|
|
|
|
@state()
|
|
private accessor contentType: string = '';
|
|
|
|
@state()
|
|
private accessor size: number = 0;
|
|
|
|
@state()
|
|
private accessor lastModified: string = '';
|
|
|
|
@state()
|
|
private accessor error: string = '';
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
themeStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.preview-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.preview-header {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.preview-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.preview-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.preview-content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
}
|
|
|
|
.preview-content.code-editor {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview-content.code-editor dees-input-code {
|
|
height: 100%;
|
|
}
|
|
|
|
.preview-image {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.preview-text {
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
color: #ccc;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.preview-actions {
|
|
padding: 12px;
|
|
border-top: 1px solid #333;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
padding: 8px 16px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid #404040;
|
|
color: #e0e0e0;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.action-btn.danger {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
border-color: #ef4444;
|
|
color: #f87171;
|
|
}
|
|
|
|
.action-btn.danger:hover {
|
|
background: rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: rgba(59, 130, 246, 0.3);
|
|
border-color: #3b82f6;
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.action-btn.primary:hover {
|
|
background: rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.action-btn.primary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.action-btn.secondary {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: #555;
|
|
color: #aaa;
|
|
}
|
|
|
|
.action-btn.secondary:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
}
|
|
|
|
.unsaved-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
background: rgba(251, 191, 36, 0.1);
|
|
border: 1px solid rgba(251, 191, 36, 0.3);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #fbbf24;
|
|
}
|
|
|
|
.unsaved-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #fbbf24;
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: #666;
|
|
text-align: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.empty-state svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 12px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.loading-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: #888;
|
|
}
|
|
|
|
.error-state {
|
|
padding: 16px;
|
|
color: #f87171;
|
|
text-align: center;
|
|
}
|
|
|
|
.binary-preview {
|
|
text-align: center;
|
|
color: #888;
|
|
padding: 24px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
updated(changedProperties: Map<string, unknown>) {
|
|
if (changedProperties.has('objectKey') || changedProperties.has('bucketName')) {
|
|
if (this.objectKey) {
|
|
this.loadObject();
|
|
} else {
|
|
this.content = '';
|
|
this.contentType = '';
|
|
this.error = '';
|
|
this.originalTextContent = '';
|
|
this.hasChanges = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
private async loadObject() {
|
|
if (!this.objectKey || !this.bucketName) return;
|
|
|
|
this.loading = true;
|
|
this.error = '';
|
|
this.hasChanges = false;
|
|
|
|
try {
|
|
const result = await apiService.getObject(this.bucketName, this.objectKey);
|
|
this.content = result.content;
|
|
this.contentType = result.contentType;
|
|
this.size = result.size;
|
|
this.lastModified = result.lastModified;
|
|
|
|
// For text files, decode and store original content
|
|
if (this.isText()) {
|
|
this.originalTextContent = this.getTextContent();
|
|
}
|
|
} catch (err) {
|
|
console.error('Error loading object:', err);
|
|
this.error = 'Failed to load object';
|
|
}
|
|
|
|
this.loading = false;
|
|
}
|
|
|
|
private formatDate(dateStr: string): string {
|
|
if (!dateStr) return '-';
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleString();
|
|
}
|
|
|
|
private isImage(): boolean {
|
|
return this.contentType.startsWith('image/');
|
|
}
|
|
|
|
private isText(): boolean {
|
|
return (
|
|
this.contentType.startsWith('text/') ||
|
|
this.contentType === 'application/json' ||
|
|
this.contentType === 'application/xml' ||
|
|
this.contentType === 'application/javascript'
|
|
);
|
|
}
|
|
|
|
private getTextContent(): string {
|
|
try {
|
|
// Properly decode base64 to UTF-8 text
|
|
const binaryString = atob(this.content);
|
|
const bytes = new Uint8Array(binaryString.length);
|
|
for (let i = 0; i < binaryString.length; i++) {
|
|
bytes[i] = binaryString.charCodeAt(i);
|
|
}
|
|
return new TextDecoder('utf-8').decode(bytes);
|
|
} catch {
|
|
return 'Unable to decode content';
|
|
}
|
|
}
|
|
|
|
private async handleDownload() {
|
|
try {
|
|
const blob = new Blob([Uint8Array.from(atob(this.content), (c) => c.charCodeAt(0))], {
|
|
type: this.contentType,
|
|
});
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = getFileName(this.objectKey);
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
} catch (err) {
|
|
console.error('Error downloading:', err);
|
|
}
|
|
}
|
|
|
|
private async handleDelete() {
|
|
if (!confirm(`Delete "${getFileName(this.objectKey)}"?`)) return;
|
|
|
|
try {
|
|
await apiService.deleteObject(this.bucketName, this.objectKey);
|
|
this.dispatchEvent(
|
|
new CustomEvent('object-deleted', {
|
|
detail: { key: this.objectKey },
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
} catch (err) {
|
|
console.error('Error deleting object:', err);
|
|
}
|
|
}
|
|
|
|
private getLanguage(): string {
|
|
const ext = this.objectKey.split('.').pop()?.toLowerCase() || '';
|
|
const languageMap: Record<string, string> = {
|
|
ts: 'typescript',
|
|
tsx: 'typescript',
|
|
js: 'javascript',
|
|
jsx: 'javascript',
|
|
mjs: 'javascript',
|
|
cjs: 'javascript',
|
|
json: 'json',
|
|
html: 'html',
|
|
htm: 'html',
|
|
css: 'css',
|
|
scss: 'scss',
|
|
sass: 'scss',
|
|
less: 'less',
|
|
md: 'markdown',
|
|
markdown: 'markdown',
|
|
xml: 'xml',
|
|
yaml: 'yaml',
|
|
yml: 'yaml',
|
|
py: 'python',
|
|
rb: 'ruby',
|
|
go: 'go',
|
|
rs: 'rust',
|
|
java: 'java',
|
|
c: 'c',
|
|
cpp: 'cpp',
|
|
h: 'c',
|
|
hpp: 'cpp',
|
|
cs: 'csharp',
|
|
php: 'php',
|
|
sh: 'shell',
|
|
bash: 'shell',
|
|
zsh: 'shell',
|
|
sql: 'sql',
|
|
graphql: 'graphql',
|
|
gql: 'graphql',
|
|
dockerfile: 'dockerfile',
|
|
txt: 'plaintext',
|
|
};
|
|
return languageMap[ext] || 'plaintext';
|
|
}
|
|
|
|
private handleContentChange(event: CustomEvent) {
|
|
const newValue = event.detail as string;
|
|
this.hasChanges = newValue !== this.originalTextContent;
|
|
}
|
|
|
|
private handleDiscard() {
|
|
const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
|
|
if (codeEditor) {
|
|
codeEditor.value = this.originalTextContent;
|
|
}
|
|
this.hasChanges = false;
|
|
}
|
|
|
|
private async handleSave() {
|
|
if (!this.hasChanges || this.saving) return;
|
|
|
|
this.saving = true;
|
|
|
|
try {
|
|
// Get current content from the editor
|
|
const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
|
|
const currentContent = codeEditor?.value ?? '';
|
|
|
|
// Encode the text content to base64
|
|
const encoder = new TextEncoder();
|
|
const bytes = encoder.encode(currentContent);
|
|
const base64Content = btoa(String.fromCharCode(...bytes));
|
|
|
|
const success = await apiService.putObject(
|
|
this.bucketName,
|
|
this.objectKey,
|
|
base64Content,
|
|
this.contentType
|
|
);
|
|
|
|
if (success) {
|
|
this.originalTextContent = currentContent;
|
|
this.hasChanges = false;
|
|
// Update the stored content as well
|
|
this.content = base64Content;
|
|
}
|
|
} catch (err) {
|
|
console.error('Error saving object:', err);
|
|
}
|
|
|
|
this.saving = false;
|
|
}
|
|
|
|
render() {
|
|
if (!this.objectKey) {
|
|
return html`
|
|
<div class="preview-container">
|
|
<div class="empty-state">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14 2 14 8 20 8" />
|
|
</svg>
|
|
<p>Select a file to preview</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (this.loading) {
|
|
return html`
|
|
<div class="preview-container">
|
|
<div class="loading-state">Loading...</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (this.error) {
|
|
return html`
|
|
<div class="preview-container">
|
|
<div class="error-state">${this.error}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<div class="preview-container">
|
|
<div class="preview-header">
|
|
<div class="preview-title">${getFileName(this.objectKey)}</div>
|
|
<div class="preview-meta">
|
|
<span class="meta-item">${this.contentType}</span>
|
|
<span class="meta-item">${formatSize(this.size)}</span>
|
|
<span class="meta-item">${this.formatDate(this.lastModified)}</span>
|
|
${this.hasChanges ? html`
|
|
<span class="unsaved-indicator">
|
|
<span class="unsaved-dot"></span>
|
|
Unsaved changes
|
|
</span>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-content ${this.isText() ? 'code-editor' : ''}">
|
|
${this.isImage()
|
|
? html`<img class="preview-image" src="data:${this.contentType};base64,${this.content}" />`
|
|
: this.isText()
|
|
? html`
|
|
<dees-input-code
|
|
.value=${this.originalTextContent}
|
|
.language=${this.getLanguage()}
|
|
height="100%"
|
|
@content-change=${(e: CustomEvent) => this.handleContentChange(e)}
|
|
></dees-input-code>
|
|
`
|
|
: html`
|
|
<div class="binary-preview">
|
|
<p>Binary file preview not available</p>
|
|
<p>Download to view</p>
|
|
</div>
|
|
`}
|
|
</div>
|
|
|
|
<div class="preview-actions">
|
|
${this.hasChanges ? html`
|
|
<button class="action-btn secondary" @click=${this.handleDiscard}>Discard</button>
|
|
<button
|
|
class="action-btn primary"
|
|
@click=${this.handleSave}
|
|
?disabled=${this.saving}
|
|
>
|
|
${this.saving ? 'Saving...' : 'Save'}
|
|
</button>
|
|
` : html`
|
|
<button class="action-btn" @click=${this.handleDownload}>Download</button>
|
|
<button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
|
|
`}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|