Delete app-backup2.py
Browse files- app-backup2.py +0 -609
app-backup2.py
DELETED
|
@@ -1,609 +0,0 @@
|
|
| 1 |
-
"""
|
| 2 |
-
Simple Video Editor - νκΉ
νμ΄μ€ μ€νμ΄μ€μ©
|
| 3 |
-
srcdoc λ°©μμΌλ‘ iframe μ¬μ© - νμΌ μ
λ‘λ μ UI μ μ§
|
| 4 |
-
"""
|
| 5 |
-
|
| 6 |
-
import gradio as gr
|
| 7 |
-
import base64
|
| 8 |
-
import os
|
| 9 |
-
import json
|
| 10 |
-
|
| 11 |
-
def get_editor_html(media_data="[]"):
|
| 12 |
-
"""μλν° HTML μμ±"""
|
| 13 |
-
return f'''<!DOCTYPE html>
|
| 14 |
-
<html lang="ko">
|
| 15 |
-
<head>
|
| 16 |
-
<meta charset="UTF-8">
|
| 17 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 18 |
-
<style>
|
| 19 |
-
*{{margin:0;padding:0;box-sizing:border-box}}
|
| 20 |
-
body{{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',sans-serif;background:#f5f5f7;color:#1d1d1f;font-size:13px}}
|
| 21 |
-
.editor-container{{display:flex;flex-direction:column;height:100vh;background:#f5f5f7;overflow:hidden}}
|
| 22 |
-
.toolbar{{height:48px;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}}
|
| 23 |
-
.toolbar-title{{font-size:15px;font-weight:600;color:#1d1d1f;display:flex;align-items:center;gap:6px}}
|
| 24 |
-
.toolbar-title svg{{width:20px;height:20px;color:#6366f1}}
|
| 25 |
-
.toolbar-actions{{display:flex;gap:8px}}
|
| 26 |
-
.btn{{padding:6px 12px;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;display:flex;align-items:center;gap:4px;transition:all 0.15s}}
|
| 27 |
-
.btn svg{{width:14px;height:14px}}
|
| 28 |
-
.btn-primary{{background:#6366f1;color:#fff}}
|
| 29 |
-
.btn-primary:hover{{background:#4f46e5}}
|
| 30 |
-
.btn-success{{background:#10b981;color:#fff}}
|
| 31 |
-
.btn-success:hover{{background:#059669}}
|
| 32 |
-
.btn-danger{{background:#ef4444;color:#fff}}
|
| 33 |
-
.btn-danger:hover{{background:#dc2626}}
|
| 34 |
-
.btn-secondary{{background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}}
|
| 35 |
-
.btn-secondary:hover{{background:#e5e7eb}}
|
| 36 |
-
.main-area{{display:flex;flex:1;overflow:hidden;background:#f5f5f7}}
|
| 37 |
-
.media-library{{width:200px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}}
|
| 38 |
-
.library-header{{padding:10px 12px;border-bottom:1px solid #e0e0e0;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px}}
|
| 39 |
-
.library-content{{flex:1;overflow-y:auto;padding:8px}}
|
| 40 |
-
.library-hint{{text-align:center;padding:20px 10px;color:#9ca3af;font-size:11px;line-height:1.5}}
|
| 41 |
-
.media-grid{{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}}
|
| 42 |
-
.media-item{{aspect-ratio:16/9;background:#f3f4f6;border-radius:6px;overflow:hidden;cursor:grab;position:relative;transition:all 0.15s;border:1px solid #e5e7eb}}
|
| 43 |
-
.media-item:hover{{transform:scale(1.02);box-shadow:0 2px 8px rgba(0,0,0,0.1);border-color:#6366f1}}
|
| 44 |
-
.media-item img,.media-item video{{width:100%;height:100%;object-fit:cover}}
|
| 45 |
-
.media-item-overlay{{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,0.7));opacity:0;transition:opacity 0.15s;display:flex;align-items:flex-end;padding:4px}}
|
| 46 |
-
.media-item:hover .media-item-overlay{{opacity:1}}
|
| 47 |
-
.media-item-name{{font-size:9px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
|
| 48 |
-
.media-item-duration{{position:absolute;top:3px;right:3px;background:rgba(0,0,0,0.6);padding:1px 4px;border-radius:3px;font-size:9px;color:#fff}}
|
| 49 |
-
.media-item-type{{position:absolute;top:3px;left:3px;width:16px;height:16px;background:rgba(0,0,0,0.6);border-radius:50%;display:flex;align-items:center;justify-content:center}}
|
| 50 |
-
.media-item-type svg{{width:10px;height:10px;color:#fff}}
|
| 51 |
-
.media-item-icon{{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#9ca3af;background:#e5e7eb}}
|
| 52 |
-
.preview-area{{flex:1;display:flex;flex-direction:column;background:#1a1a1a;margin:8px;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.15)}}
|
| 53 |
-
.preview-container{{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#000}}
|
| 54 |
-
.preview-container video,.preview-container img{{max-width:100%;max-height:100%;object-fit:contain}}
|
| 55 |
-
.preview-placeholder{{text-align:center;color:#666}}
|
| 56 |
-
.preview-placeholder svg{{width:48px;height:48px;margin-bottom:12px;opacity:0.5}}
|
| 57 |
-
.preview-placeholder p{{font-size:12px}}
|
| 58 |
-
.playback-controls{{height:50px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px}}
|
| 59 |
-
.control-btn{{width:32px;height:32px;border:none;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}}
|
| 60 |
-
.control-btn:hover{{background:rgba(255,255,255,0.2)}}
|
| 61 |
-
.control-btn svg{{width:14px;height:14px}}
|
| 62 |
-
.control-btn.play-btn{{width:40px;height:40px;background:#6366f1}}
|
| 63 |
-
.control-btn.play-btn:hover{{background:#4f46e5;transform:scale(1.05)}}
|
| 64 |
-
.control-btn.play-btn svg{{width:18px;height:18px}}
|
| 65 |
-
.time-display{{font-family:'SF Mono',Monaco,monospace;font-size:11px;color:#aaa;min-width:110px;text-align:center}}
|
| 66 |
-
.properties-panel{{width:180px;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column}}
|
| 67 |
-
.properties-header{{padding:10px 12px;border-bottom:1px solid #e0e0e0;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px}}
|
| 68 |
-
.properties-content{{flex:1;padding:12px;overflow-y:auto}}
|
| 69 |
-
.property-group{{margin-bottom:14px}}
|
| 70 |
-
.property-label{{font-size:10px;color:#6b7280;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px}}
|
| 71 |
-
.property-input{{width:100%;padding:6px 8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:5px;color:#1d1d1f;font-size:12px}}
|
| 72 |
-
.property-input:focus{{outline:none;border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,0.1)}}
|
| 73 |
-
.property-row{{display:flex;gap:8px}}
|
| 74 |
-
.property-row>div{{flex:1}}
|
| 75 |
-
.no-selection{{color:#9ca3af;text-align:center;padding:30px 15px;font-size:12px;line-height:1.5}}
|
| 76 |
-
.timeline-area{{height:180px;background:#fff;border-top:1px solid #e0e0e0;display:flex;flex-direction:column}}
|
| 77 |
-
.timeline-toolbar{{height:32px;background:#fafafa;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;padding:0 8px;gap:6px}}
|
| 78 |
-
.timeline-toolbar .btn{{padding:4px 8px;font-size:11px}}
|
| 79 |
-
.timeline-toolbar .btn svg{{width:12px;height:12px}}
|
| 80 |
-
.timeline-zoom{{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:11px;color:#6b7280}}
|
| 81 |
-
.timeline-zoom input{{width:60px;height:4px}}
|
| 82 |
-
.timeline-zoom svg{{width:12px;height:12px}}
|
| 83 |
-
.timeline-container{{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;background:#f9fafb}}
|
| 84 |
-
.timeline-ruler{{height:22px;background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #e5e7eb}}
|
| 85 |
-
.timeline-tracks{{position:relative;min-height:120px}}
|
| 86 |
-
.timeline-track{{height:55px;border-bottom:1px solid #e5e7eb;position:relative;display:flex;align-items:center;background:#fff}}
|
| 87 |
-
.timeline-track:nth-child(2){{background:#fffbeb}}
|
| 88 |
-
.track-label{{width:70px;padding:0 8px;font-size:10px;color:#6b7280;background:#f9fafb;height:100%;display:flex;align-items:center;gap:4px;border-right:1px solid #e5e7eb;position:sticky;left:0;z-index:5}}
|
| 89 |
-
.track-label svg{{width:12px;height:12px}}
|
| 90 |
-
.track-content{{flex:1;height:100%;position:relative;min-width:800px}}
|
| 91 |
-
.timeline-clip{{position:absolute;height:45px;top:5px;border-radius:6px;cursor:grab;display:flex;align-items:center;overflow:hidden;transition:box-shadow 0.15s;min-width:40px;box-shadow:0 1px 3px rgba(0,0,0,0.1)}}
|
| 92 |
-
.timeline-clip:hover{{box-shadow:0 0 0 2px #6366f1}}
|
| 93 |
-
.timeline-clip.selected{{box-shadow:0 0 0 2px #6366f1,0 4px 12px rgba(99,102,241,0.3)}}
|
| 94 |
-
.timeline-clip.video{{background:linear-gradient(135deg,#818cf8,#6366f1)}}
|
| 95 |
-
.timeline-clip.image{{background:linear-gradient(135deg,#34d399,#10b981)}}
|
| 96 |
-
.timeline-clip.audio{{background:linear-gradient(135deg,#fbbf24,#f59e0b)}}
|
| 97 |
-
.clip-thumbnail{{width:45px;height:100%;object-fit:cover;flex-shrink:0}}
|
| 98 |
-
.clip-info{{padding:0 6px;flex:1;overflow:hidden}}
|
| 99 |
-
.clip-name{{font-size:10px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
|
| 100 |
-
.clip-duration{{font-size:9px;color:rgba(255,255,255,0.7)}}
|
| 101 |
-
.clip-handles{{position:absolute;top:0;bottom:0;width:10px;background:rgba(255,255,255,0.5);cursor:ew-resize;opacity:0;transition:opacity 0.15s;z-index:10}}
|
| 102 |
-
.timeline-clip:hover .clip-handles{{opacity:1}}
|
| 103 |
-
.clip-handle-left{{left:0;border-radius:6px 0 0 6px}}
|
| 104 |
-
.clip-handle-right{{right:0;border-radius:0 6px 6px 0}}
|
| 105 |
-
.playhead{{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;z-index:20;pointer-events:none}}
|
| 106 |
-
.playhead::before{{content:'';position:absolute;top:0;left:-5px;width:12px;height:12px;background:#ef4444;clip-path:polygon(50% 100%,0 0,100% 0)}}
|
| 107 |
-
.drop-highlight{{background:rgba(99,102,241,0.1)!important;outline:2px dashed #6366f1!important;outline-offset:-2px}}
|
| 108 |
-
.context-menu{{position:fixed;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px 0;min-width:140px;z-index:1000;box-shadow:0 10px 40px rgba(0,0,0,0.15)}}
|
| 109 |
-
.context-menu-item{{padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px}}
|
| 110 |
-
.context-menu-item:hover{{background:#f3f4f6}}
|
| 111 |
-
.context-menu-item svg{{width:12px;height:12px}}
|
| 112 |
-
.context-menu-item.danger{{color:#ef4444}}
|
| 113 |
-
.context-menu-divider{{height:1px;background:#e5e7eb;margin:4px 0}}
|
| 114 |
-
.status-bar{{height:24px;background:#f0f0f0;border-top:1px solid #e0e0e0;display:flex;align-items:center;padding:0 12px;font-size:11px;color:#666}}
|
| 115 |
-
.modal-overlay{{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}}
|
| 116 |
-
.modal{{background:#fff;border-radius:12px;padding:24px;min-width:280px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3)}}
|
| 117 |
-
.modal h3{{margin-bottom:12px;font-size:16px}}
|
| 118 |
-
.modal p{{font-size:13px;color:#6b7280}}
|
| 119 |
-
.progress-bar{{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin:16px 0}}
|
| 120 |
-
.progress-fill{{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width 0.3s}}
|
| 121 |
-
::-webkit-scrollbar{{width:6px;height:6px}}
|
| 122 |
-
::-webkit-scrollbar-track{{background:#f1f1f1}}
|
| 123 |
-
::-webkit-scrollbar-thumb{{background:#c1c1c1;border-radius:3px}}
|
| 124 |
-
</style>
|
| 125 |
-
</head>
|
| 126 |
-
<body>
|
| 127 |
-
<div class="editor-container">
|
| 128 |
-
<div class="toolbar">
|
| 129 |
-
<div class="toolbar-title">
|
| 130 |
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/></svg>
|
| 131 |
-
Simple Video Editor
|
| 132 |
-
</div>
|
| 133 |
-
<div class="toolbar-actions">
|
| 134 |
-
<button class="btn btn-secondary" onclick="editorUndo()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v6h6M3 13a9 9 0 1 0 2.5-6.5"/></svg>μ€νμ·¨μ</button>
|
| 135 |
-
<button class="btn btn-success" onclick="editorExport()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>λ΄λ³΄λ΄κΈ°</button>
|
| 136 |
-
</div>
|
| 137 |
-
</div>
|
| 138 |
-
<div class="main-area">
|
| 139 |
-
<div class="media-library">
|
| 140 |
-
<div class="library-header">π λ―Έλμ΄</div>
|
| 141 |
-
<div class="library-content">
|
| 142 |
-
<div class="library-hint" id="libraryHint">β¬οΈ μμ νμΌ μ
λ‘λλ₯Ό<br>μ¬μ©νμΈμ</div>
|
| 143 |
-
<div class="media-grid" id="mediaGrid"></div>
|
| 144 |
-
</div>
|
| 145 |
-
</div>
|
| 146 |
-
<div class="preview-area">
|
| 147 |
-
<div class="preview-container" id="previewContainer">
|
| 148 |
-
<div class="preview-placeholder">
|
| 149 |
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="2" y="2" width="20" height="20" rx="2"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
|
| 150 |
-
<p>νμλΌμΈμ λ―Έλμ΄λ₯Ό μΆκ°νμΈμ</p>
|
| 151 |
-
</div>
|
| 152 |
-
</div>
|
| 153 |
-
<div class="playback-controls">
|
| 154 |
-
<button class="control-btn" onclick="editorSkipStart()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg></button>
|
| 155 |
-
<button class="control-btn" onclick="editorSkipBack()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg></button>
|
| 156 |
-
<button class="control-btn play-btn" onclick="editorTogglePlay()"><svg viewBox="0 0 24 24" fill="currentColor" id="playIcon"><polygon points="5 3 19 12 5 21 5 3"/></svg></button>
|
| 157 |
-
<button class="control-btn" onclick="editorSkipForward()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg></button>
|
| 158 |
-
<button class="control-btn" onclick="editorSkipEnd()"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg></button>
|
| 159 |
-
<div class="time-display"><span id="currentTimeDisplay">00:00.00</span> / <span id="durationDisplay">00:00.00</span></div>
|
| 160 |
-
<button class="control-btn" onclick="editorToggleMute()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="volumeIcon"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></button>
|
| 161 |
-
</div>
|
| 162 |
-
</div>
|
| 163 |
-
<div class="properties-panel">
|
| 164 |
-
<div class="properties-header">βοΈ μμ±</div>
|
| 165 |
-
<div class="properties-content" id="propertiesContent"><div class="no-selection">ν΄λ¦½μ μ ννλ©΄<br>μμ±μ νΈμ§ν μ μμ΅λλ€</div></div>
|
| 166 |
-
</div>
|
| 167 |
-
</div>
|
| 168 |
-
<div class="timeline-area">
|
| 169 |
-
<div class="timeline-toolbar">
|
| 170 |
-
<button class="btn btn-secondary" onclick="editorSplit()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/></svg>μλ₯΄κΈ°</button>
|
| 171 |
-
<button class="btn btn-secondary" onclick="editorDuplicate()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>볡μ </button>
|
| 172 |
-
<button class="btn btn-danger" onclick="editorDelete()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>μμ </button>
|
| 173 |
-
<div class="timeline-zoom">
|
| 174 |
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
| 175 |
-
<input type="range" min="0.5" max="3" step="0.1" value="1" oninput="editorSetZoom(this.value)">
|
| 176 |
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
|
| 177 |
-
</div>
|
| 178 |
-
</div>
|
| 179 |
-
<div class="timeline-container" id="timelineContainer" onclick="editorTimelineClick(event)">
|
| 180 |
-
<div class="timeline-ruler" id="timelineRuler"></div>
|
| 181 |
-
<div class="timeline-tracks">
|
| 182 |
-
<div class="timeline-track" data-track="0">
|
| 183 |
-
<div class="track-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>μμ</div>
|
| 184 |
-
<div class="track-content" id="track0"></div>
|
| 185 |
-
</div>
|
| 186 |
-
<div class="timeline-track" data-track="1">
|
| 187 |
-
<div class="track-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>μ€λμ€</div>
|
| 188 |
-
<div class="track-content" id="track1"></div>
|
| 189 |
-
</div>
|
| 190 |
-
</div>
|
| 191 |
-
<div class="playhead" id="playhead" style="left:70px"></div>
|
| 192 |
-
</div>
|
| 193 |
-
</div>
|
| 194 |
-
<div class="status-bar" id="statusBar">μ€λΉλ¨ | λ―Έλμ΄: 0κ° | ν΄λ¦½: 0κ°</div>
|
| 195 |
-
</div>
|
| 196 |
-
<div class="context-menu" id="contextMenu" style="display:none">
|
| 197 |
-
<div class="context-menu-item" onclick="editorSplit()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/></svg>μλ₯΄κΈ°</div>
|
| 198 |
-
<div class="context-menu-item" onclick="editorDuplicate()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>볡μ </div>
|
| 199 |
-
<div class="context-menu-divider"></div>
|
| 200 |
-
<div class="context-menu-item danger" onclick="editorDelete()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>μμ </div>
|
| 201 |
-
</div>
|
| 202 |
-
<div class="modal-overlay" id="exportModal" style="display:none">
|
| 203 |
-
<div class="modal">
|
| 204 |
-
<h3>π¬ μμ λ΄λ³΄λ΄κΈ°</h3>
|
| 205 |
-
<p id="exportStatus">μμμ μ²λ¦¬νκ³ μμ΅λλ€...</p>
|
| 206 |
-
<div class="progress-bar"><div class="progress-fill" id="exportProgress" style="width:0%"></div></div>
|
| 207 |
-
<button class="btn btn-secondary" onclick="editorCancelExport()" id="cancelExportBtn">μ·¨μ</button>
|
| 208 |
-
</div>
|
| 209 |
-
</div>
|
| 210 |
-
<script>
|
| 211 |
-
var S={{mediaLibrary:[],timelineClips:[],selectedClipId:null,isPlaying:false,isMuted:false,currentTime:0,totalDuration:0,zoom:1,pps:80,undoStack:[],animId:null,audioElements:{{}},trimData:null,exportCancelled:false}};
|
| 212 |
-
function gid(){{return Date.now().toString(36)+Math.random().toString(36).substr(2)}}
|
| 213 |
-
function fmt(s){{if(!s||isNaN(s))s=0;var m=Math.floor(s/60),sec=Math.floor(s%60),ms=Math.floor((s%1)*100);return(m<10?'0':'')+m+':'+(sec<10?'0':'')+sec+'.'+(ms<10?'0':'')+ms}}
|
| 214 |
-
function upStat(msg){{var e=document.getElementById('statusBar');if(e)e.textContent=msg+' | λ―Έλμ΄: '+S.mediaLibrary.length+'κ° | ν΄λ¦½: '+S.timelineClips.length+'κ°'}}
|
| 215 |
-
function save(){{S.undoStack.push(JSON.stringify(S.timelineClips));if(S.undoStack.length>50)S.undoStack.shift()}}
|
| 216 |
-
function addMedia(name,type,url){{
|
| 217 |
-
console.log('Adding:',name,type);
|
| 218 |
-
var m={{id:gid(),name:name,type:type,url:url,duration:type==='image'?5:0,thumb:type==='image'?url:null}};
|
| 219 |
-
S.mediaLibrary.push(m);
|
| 220 |
-
if(type==='video'||type==='audio'){{
|
| 221 |
-
var el=document.createElement(type);el.src=url;el.preload='metadata';
|
| 222 |
-
el.onloadedmetadata=function(){{m.duration=el.duration;renderLib();if(type==='video')el.currentTime=Math.min(1,el.duration/2)}};
|
| 223 |
-
el.onseeked=function(){{if(type==='video'){{try{{var c=document.createElement('canvas');c.width=160;c.height=90;c.getContext('2d').drawImage(el,0,0,160,90);m.thumb=c.toDataURL();renderLib()}}catch(e){{}}}}}}
|
| 224 |
-
}}
|
| 225 |
-
renderLib();upStat('λ―Έλμ΄ μΆκ°λ¨: '+name);
|
| 226 |
-
setTimeout(function(){{addToTL(m)}},100);
|
| 227 |
-
}}
|
| 228 |
-
function renderLib(){{
|
| 229 |
-
var g=document.getElementById('mediaGrid'),h=document.getElementById('libraryHint');
|
| 230 |
-
if(!g)return;
|
| 231 |
-
if(h)h.style.display=S.mediaLibrary.length===0?'block':'none';
|
| 232 |
-
g.innerHTML='';
|
| 233 |
-
var icons={{video:'<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21"/></svg>',image:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',audio:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>'}};
|
| 234 |
-
S.mediaLibrary.forEach(function(m){{
|
| 235 |
-
var d=document.createElement('div');d.className='media-item';d.draggable=true;
|
| 236 |
-
d.ondblclick=function(){{addToTL(m)}};
|
| 237 |
-
d.ondragstart=function(e){{e.dataTransfer.setData('mid',m.id);this.style.opacity='0.5'}};
|
| 238 |
-
d.ondragend=function(){{this.style.opacity='1'}};
|
| 239 |
-
var th=m.thumb?'<img src="'+m.thumb+'">':'<div class="media-item-icon">'+(m.type==='video'?'π¬':m.type==='audio'?'π΅':'πΌοΈ')+'</div>';
|
| 240 |
-
d.innerHTML=th+'<div class="media-item-type">'+icons[m.type]+'</div>'+(m.duration>0?'<div class="media-item-duration">'+fmt(m.duration)+'</div>':'')+'<div class="media-item-overlay"><span class="media-item-name">'+m.name+'</span></div>';
|
| 241 |
-
g.appendChild(d);
|
| 242 |
-
}});
|
| 243 |
-
}}
|
| 244 |
-
function addToTL(m,st){{
|
| 245 |
-
save();
|
| 246 |
-
var tr=m.type==='audio'?1:0;
|
| 247 |
-
var start=st!==undefined?st:getTrEnd(tr);
|
| 248 |
-
var c={{id:gid(),mid:m.id,name:m.name,type:m.type,url:m.url,thumb:m.thumb,track:tr,start:start,dur:m.duration,ts:0,te:m.duration,vol:1}};
|
| 249 |
-
S.timelineClips.push(c);
|
| 250 |
-
renderTL();upDur();upStat('ν΄λ¦½ μΆκ°λ¨: '+c.name);
|
| 251 |
-
}}
|
| 252 |
-
function getTrEnd(tr){{var mx=0;S.timelineClips.forEach(function(c){{if(c.track===tr){{var e=c.start+(c.te-c.ts);if(e>mx)mx=e}}}});return Math.round(mx*1000)/1000}}
|
| 253 |
-
function renderTL(){{
|
| 254 |
-
var t0=document.getElementById('track0'),t1=document.getElementById('track1');
|
| 255 |
-
if(t0)t0.innerHTML='';if(t1)t1.innerHTML='';
|
| 256 |
-
S.timelineClips.forEach(function(c){{
|
| 257 |
-
var tr=document.getElementById('track'+c.track);if(!tr)return;
|
| 258 |
-
var d=document.createElement('div');
|
| 259 |
-
d.className='timeline-clip '+c.type+(S.selectedClipId===c.id?' selected':'');
|
| 260 |
-
var cd=c.te-c.ts,l=c.start*S.pps*S.zoom,w=Math.max(40,cd*S.pps*S.zoom);
|
| 261 |
-
d.style.left=l+'px';d.style.width=w+'px';d.draggable=true;
|
| 262 |
-
d.onclick=function(e){{e.stopPropagation();selClip(c.id)}};
|
| 263 |
-
d.oncontextmenu=function(e){{e.preventDefault();selClip(c.id);showCtx(e.clientX,e.clientY)}};
|
| 264 |
-
d.ondragstart=function(e){{e.dataTransfer.setData('cid',c.id);e.dataTransfer.setData('ox',e.offsetX.toString())}};
|
| 265 |
-
var th=c.thumb?'<img class="clip-thumbnail" src="'+c.thumb+'">':'';
|
| 266 |
-
d.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+c.name+'</div><div class="clip-duration">'+fmt(cd)+'</div></div><div class="clip-handles clip-handle-left" data-cid="'+c.id+'" data-side="left"></div><div class="clip-handles clip-handle-right" data-cid="'+c.id+'" data-side="right"></div>';
|
| 267 |
-
var hl=d.querySelector('.clip-handle-left');
|
| 268 |
-
var hr=d.querySelector('.clip-handle-right');
|
| 269 |
-
hl.onmousedown=function(e){{e.stopPropagation();startTrim(e,c.id,'left')}};
|
| 270 |
-
hr.onmousedown=function(e){{e.stopPropagation();startTrim(e,c.id,'right')}};
|
| 271 |
-
tr.appendChild(d);
|
| 272 |
-
}});
|
| 273 |
-
renderRuler();setupDrop();
|
| 274 |
-
}}
|
| 275 |
-
function startTrim(e,cid,side){{
|
| 276 |
-
e.preventDefault();
|
| 277 |
-
var c=S.timelineClips.find(function(x){{return x.id===cid}});if(!c)return;
|
| 278 |
-
save();
|
| 279 |
-
S.trimData={{cid:cid,side:side,startX:e.clientX,origTs:c.ts,origTe:c.te,origStart:c.start}};
|
| 280 |
-
document.addEventListener('mousemove',doTrim);
|
| 281 |
-
document.addEventListener('mouseup',endTrim);
|
| 282 |
-
}}
|
| 283 |
-
function doTrim(e){{
|
| 284 |
-
if(!S.trimData)return;
|
| 285 |
-
var c=S.timelineClips.find(function(x){{return x.id===S.trimData.cid}});if(!c)return;
|
| 286 |
-
var dx=e.clientX-S.trimData.startX;
|
| 287 |
-
var dt=dx/(S.pps*S.zoom);
|
| 288 |
-
if(S.trimData.side==='left'){{
|
| 289 |
-
var newTs=Math.max(0,Math.min(c.te-0.1,S.trimData.origTs+dt));
|
| 290 |
-
var delta=newTs-S.trimData.origTs;
|
| 291 |
-
c.ts=newTs;
|
| 292 |
-
c.start=S.trimData.origStart+delta;
|
| 293 |
-
}}else{{
|
| 294 |
-
var newTe=Math.max(c.ts+0.1,Math.min(c.dur,S.trimData.origTe+dt));
|
| 295 |
-
c.te=newTe;
|
| 296 |
-
}}
|
| 297 |
-
renderTL();upDur();
|
| 298 |
-
}}
|
| 299 |
-
function endTrim(){{
|
| 300 |
-
S.trimData=null;
|
| 301 |
-
document.removeEventListener('mousemove',doTrim);
|
| 302 |
-
document.removeEventListener('mouseup',endTrim);
|
| 303 |
-
}}
|
| 304 |
-
function renderRuler(){{
|
| 305 |
-
var r=document.getElementById('timelineRuler');if(!r)return;
|
| 306 |
-
var w=Math.max(S.totalDuration*S.pps*S.zoom+300,1000);r.style.width=w+'px';
|
| 307 |
-
var h='<svg width="100%" height="22" style="position:absolute;left:70px">';
|
| 308 |
-
var st=S.zoom<0.7?5:S.zoom<1.5?2:1;
|
| 309 |
-
for(var i=0;i<=Math.ceil(S.totalDuration)+10;i+=st){{var x=i*S.pps*S.zoom;h+='<line x1="'+x+'" y1="17" x2="'+x+'" y2="22" stroke="#d1d5db"/><text x="'+x+'" y="12" fill="#9ca3af" font-size="9" text-anchor="middle">'+fmt(i)+'</text>'}}
|
| 310 |
-
h+='</svg>';r.innerHTML=h;
|
| 311 |
-
}}
|
| 312 |
-
function setupDrop(){{
|
| 313 |
-
['track0','track1'].forEach(function(tid,idx){{
|
| 314 |
-
var tr=document.getElementById(tid);if(!tr)return;
|
| 315 |
-
tr.ondragover=function(e){{e.preventDefault();tr.classList.add('drop-highlight')}};
|
| 316 |
-
tr.ondragleave=function(){{tr.classList.remove('drop-highlight')}};
|
| 317 |
-
tr.ondrop=function(e){{
|
| 318 |
-
e.preventDefault();tr.classList.remove('drop-highlight');
|
| 319 |
-
var rect=tr.getBoundingClientRect(),x=e.clientX-rect.left,t=Math.max(0,x/(S.pps*S.zoom));
|
| 320 |
-
var mid=e.dataTransfer.getData('mid'),cid=e.dataTransfer.getData('cid'),ox=parseFloat(e.dataTransfer.getData('ox')||0);
|
| 321 |
-
if(mid){{var m=S.mediaLibrary.find(function(x){{return x.id===mid}});if(m){{addToTL(m,t);var tgt=m.type==='audio'?1:idx;if(tgt!==idx){{S.timelineClips[S.timelineClips.length-1].track=tgt;renderTL()}}}}}}
|
| 322 |
-
else if(cid){{save();var c=S.timelineClips.find(function(x){{return x.id===cid}});if(c){{c.start=Math.max(0,t-ox/(S.pps*S.zoom));c.track=c.type==='audio'?1:idx;renderTL();upDur()}}}}
|
| 323 |
-
}};
|
| 324 |
-
}});
|
| 325 |
-
}}
|
| 326 |
-
function selClip(id){{S.selectedClipId=id;renderTL();renderProps()}}
|
| 327 |
-
function renderProps(){{
|
| 328 |
-
var ct=document.getElementById('propertiesContent');if(!ct)return;
|
| 329 |
-
var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});
|
| 330 |
-
if(!c){{ct.innerHTML='<div class="no-selection">ν΄λ¦½μ μ ννλ©΄<br>μμ±μ νΈμ§ν μ μμ΅λλ€</div>';return}}
|
| 331 |
-
var cd=c.te-c.ts;
|
| 332 |
-
var h='<div class="property-group"><div class="property-label">μ΄λ¦</div><input type="text" class="property-input" value="'+c.name+'" onchange="upProp(\\'name\\',this.value)"></div>'+
|
| 333 |
-
'<div class="property-group"><div class="property-label">μμ</div><input type="number" class="property-input" value="'+c.start.toFixed(2)+'" step="0.1" min="0" onchange="upProp(\\'start\\',parseFloat(this.value))"></div>'+
|
| 334 |
-
'<div class="property-group"><div class="property-row"><div><div class="property-label">νΈλ¦Όμμ</div><input type="number" class="property-input" value="'+c.ts.toFixed(2)+'" step="0.1" min="0" max="'+c.dur+'" onchange="upProp(\\'ts\\',parseFloat(this.value))"></div>'+
|
| 335 |
-
'<div><div class="property-label">νΈλ¦Όλ</div><input type="number" class="property-input" value="'+c.te.toFixed(2)+'" step="0.1" min="0" max="'+c.dur+'" onchange="upProp(\\'te\\',parseFloat(this.value))"></div></div></div>'+
|
| 336 |
-
'<div class="property-group"><div class="property-label">κΈΈμ΄</div><div style="padding:6px 0;font-size:12px;color:#374151">'+fmt(cd)+'</div></div>';
|
| 337 |
-
if(c.type!=='image')h+='<div class="property-group"><div class="property-label">λ³Όλ₯¨ ('+Math.round(c.vol*100)+'%)</div><input type="range" class="property-input" style="padding:0" min="0" max="1" step="0.05" value="'+c.vol+'" oninput="upProp(\\'vol\\',parseFloat(this.value))"></div>';
|
| 338 |
-
ct.innerHTML=h;
|
| 339 |
-
}}
|
| 340 |
-
function upProp(p,v){{save();var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(c){{c[p]=v;renderTL();upDur();renderProps()}}}}
|
| 341 |
-
function editorSplit(){{
|
| 342 |
-
if(!S.selectedClipId){{alert('ν΄λ¦½μ μ νν΄μ£ΌμΈμ.');return}}
|
| 343 |
-
var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(!c)return;
|
| 344 |
-
var clipEnd=c.start+(c.te-c.ts);
|
| 345 |
-
if(S.currentTime<=c.start||S.currentTime>=clipEnd){{alert('νλ μ΄ν€λκ° μ νν ν΄λ¦½ λ²μ μμ μμ΄μΌ ν©λλ€.');return}}
|
| 346 |
-
save();
|
| 347 |
-
var splitAt=S.currentTime-c.start;
|
| 348 |
-
var c2=JSON.parse(JSON.stringify(c));
|
| 349 |
-
c2.id=gid();
|
| 350 |
-
c2.start=S.currentTime;
|
| 351 |
-
c2.ts=c.ts+splitAt;
|
| 352 |
-
c.te=c.ts+splitAt;
|
| 353 |
-
S.timelineClips.push(c2);
|
| 354 |
-
renderTL();upDur();hideCtx();upStat('ν΄λ¦½μ΄ νμ¬ μμΉμμ λΆν λ¨');
|
| 355 |
-
}}
|
| 356 |
-
function editorDuplicate(){{
|
| 357 |
-
if(!S.selectedClipId)return;
|
| 358 |
-
var c=S.timelineClips.find(function(x){{return x.id===S.selectedClipId}});if(!c)return;
|
| 359 |
-
save();var cd=c.te-c.ts;
|
| 360 |
-
var nc=JSON.parse(JSON.stringify(c));nc.id=gid();nc.start=c.start+cd;
|
| 361 |
-
S.timelineClips.push(nc);renderTL();upDur();hideCtx();upStat('ν΄λ¦½ 볡μ λ¨');
|
| 362 |
-
}}
|
| 363 |
-
function editorDelete(){{
|
| 364 |
-
if(!S.selectedClipId)return;save();
|
| 365 |
-
S.timelineClips=S.timelineClips.filter(function(x){{return x.id!==S.selectedClipId}});
|
| 366 |
-
S.selectedClipId=null;renderTL();renderProps();upDur();hideCtx();upStat('ν΄λ¦½ μμ λ¨');
|
| 367 |
-
}}
|
| 368 |
-
function editorUndo(){{if(S.undoStack.length>0){{S.timelineClips=JSON.parse(S.undoStack.pop());renderTL();upDur();upStat('μ€νμ·¨μ')}}}}
|
| 369 |
-
function upDur(){{var mx=0;S.timelineClips.forEach(function(c){{var e=c.start+(c.te-c.ts);if(e>mx)mx=e}});S.totalDuration=mx;document.getElementById('durationDisplay').textContent=fmt(mx)}}
|
| 370 |
-
function editorTogglePlay(){{
|
| 371 |
-
S.isPlaying=!S.isPlaying;var ic=document.getElementById('playIcon');
|
| 372 |
-
if(S.isPlaying){{ic.innerHTML='<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>';startPB()}}
|
| 373 |
-
else{{ic.innerHTML='<polygon points="5 3 19 12 5 21 5 3"/>';stopPB()}}
|
| 374 |
-
}}
|
| 375 |
-
function startPB(){{
|
| 376 |
-
var last=performance.now();
|
| 377 |
-
function anim(now){{
|
| 378 |
-
if(!S.isPlaying)return;
|
| 379 |
-
var d=(now-last)/1000;last=now;S.currentTime+=d;
|
| 380 |
-
if(S.currentTime>=S.totalDuration){{S.currentTime=0;if(S.totalDuration===0){{S.isPlaying=false;document.getElementById('playIcon').innerHTML='<polygon points="5 3 19 12 5 21 5 3"/>';return}}}}
|
| 381 |
-
upPH();upPrev();S.animId=requestAnimationFrame(anim);
|
| 382 |
-
}}
|
| 383 |
-
S.animId=requestAnimationFrame(anim);
|
| 384 |
-
}}
|
| 385 |
-
function stopPB(){{if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}var v=document.querySelector('#previewContainer video');if(v&&!v.paused)v.pause();if(S.audioElements)Object.keys(S.audioElements).forEach(function(id){{var au=S.audioElements[id];if(au&&!au.paused)au.pause()}})}}
|
| 386 |
-
function upPH(){{var p=document.getElementById('playhead');if(p)p.style.left=(70+S.currentTime*S.pps*S.zoom)+'px';document.getElementById('currentTimeDisplay').textContent=fmt(S.currentTime)}}
|
| 387 |
-
function upPrev(){{
|
| 388 |
-
var ct=document.getElementById('previewContainer');if(!ct)return;
|
| 389 |
-
var cur=S.timelineClips.filter(function(c){{var ce=c.start+(c.te-c.ts);return S.currentTime>=c.start&&S.currentTime<ce}});
|
| 390 |
-
var vc=cur.find(function(c){{return c.type==='video'||c.type==='image'}});
|
| 391 |
-
var ac=cur.filter(function(c){{return c.type==='audio'}});
|
| 392 |
-
if(vc){{
|
| 393 |
-
var ct2=S.currentTime-vc.start+vc.ts;
|
| 394 |
-
if(vc.type==='image'){{if(!ct.querySelector('img[data-cid="'+vc.id+'"]'))ct.innerHTML='<img src="'+vc.url+'" data-cid="'+vc.id+'">'}}
|
| 395 |
-
else if(vc.type==='video'){{
|
| 396 |
-
var v=ct.querySelector('video[data-cid="'+vc.id+'"]');
|
| 397 |
-
if(!v){{ct.innerHTML='<video src="'+vc.url+'" data-cid="'+vc.id+'"'+(S.isMuted?' muted':'')+'></video>';v=ct.querySelector('video')}}
|
| 398 |
-
if(Math.abs(v.currentTime-ct2)>0.2)v.currentTime=ct2;
|
| 399 |
-
if(S.isPlaying&&v.paused)v.play().catch(function(){{}});
|
| 400 |
-
else if(!S.isPlaying&&!v.paused)v.pause();
|
| 401 |
-
v.volume=S.isMuted?0:vc.vol;v.muted=S.isMuted;
|
| 402 |
-
}}
|
| 403 |
-
}}else{{
|
| 404 |
-
var ha=ac.length>0;
|
| 405 |
-
if(!ct.querySelector('.preview-placeholder'))ct.innerHTML='<div class="preview-placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="2" y="2" width="20" height="20" rx="2"/><polygon points="10 8 16 12 10 16 10 8"/></svg><p>'+(ha?'π΅ μ€λμ€ μ¬μ μ€':'νμλΌμΈμ λ―Έλμ΄λ₯Ό μΆκ°νμΈμ')+'</p></div>';
|
| 406 |
-
}}
|
| 407 |
-
handleAudio(ac);
|
| 408 |
-
}}
|
| 409 |
-
function handleAudio(audioClips){{
|
| 410 |
-
if(!S.audioElements)S.audioElements={{}};
|
| 411 |
-
var activeIds={{}};
|
| 412 |
-
audioClips.forEach(function(c){{
|
| 413 |
-
activeIds[c.id]=true;
|
| 414 |
-
var at=S.currentTime-c.start+c.ts;
|
| 415 |
-
var au=S.audioElements[c.id];
|
| 416 |
-
if(!au){{
|
| 417 |
-
au=document.createElement('audio');
|
| 418 |
-
au.src=c.url;
|
| 419 |
-
au.preload='auto';
|
| 420 |
-
S.audioElements[c.id]=au;
|
| 421 |
-
}}
|
| 422 |
-
if(Math.abs(au.currentTime-at)>0.3)au.currentTime=at;
|
| 423 |
-
au.volume=S.isMuted?0:c.vol;
|
| 424 |
-
au.muted=S.isMuted;
|
| 425 |
-
if(S.isPlaying&&au.paused)au.play().catch(function(){{}});
|
| 426 |
-
else if(!S.isPlaying&&!au.paused)au.pause();
|
| 427 |
-
}});
|
| 428 |
-
Object.keys(S.audioElements).forEach(function(id){{
|
| 429 |
-
if(!activeIds[id]){{
|
| 430 |
-
var au=S.audioElements[id];
|
| 431 |
-
if(au&&!au.paused)au.pause();
|
| 432 |
-
}}
|
| 433 |
-
}});
|
| 434 |
-
}}
|
| 435 |
-
function editorSkipStart(){{S.currentTime=0;upPH();upPrev()}}
|
| 436 |
-
function editorSkipEnd(){{S.currentTime=S.totalDuration;upPH();upPrev()}}
|
| 437 |
-
function editorSkipBack(){{S.currentTime=Math.max(0,S.currentTime-5);upPH();upPrev()}}
|
| 438 |
-
function editorSkipForward(){{S.currentTime=Math.min(S.totalDuration,S.currentTime+5);upPH();upPrev()}}
|
| 439 |
-
function editorToggleMute(){{
|
| 440 |
-
S.isMuted=!S.isMuted;var ic=document.getElementById('volumeIcon');
|
| 441 |
-
if(S.isMuted)ic.innerHTML='<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>';
|
| 442 |
-
else ic.innerHTML='<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/>';
|
| 443 |
-
var v=document.querySelector('#previewContainer video');if(v)v.muted=S.isMuted;
|
| 444 |
-
if(S.audioElements)Object.keys(S.audioElements).forEach(function(id){{var au=S.audioElements[id];if(au)au.muted=S.isMuted}});
|
| 445 |
-
}}
|
| 446 |
-
function editorSetZoom(v){{S.zoom=parseFloat(v);renderTL();upPH()}}
|
| 447 |
-
function editorTimelineClick(e){{
|
| 448 |
-
if(e.target.closest('.timeline-clip'))return;
|
| 449 |
-
var ct=document.getElementById('timelineContainer'),rect=ct.getBoundingClientRect();
|
| 450 |
-
var x=e.clientX-rect.left-70+ct.scrollLeft;
|
| 451 |
-
S.currentTime=Math.max(0,Math.min(S.totalDuration,x/(S.pps*S.zoom)));
|
| 452 |
-
upPH();upPrev();
|
| 453 |
-
}}
|
| 454 |
-
function showCtx(x,y){{var m=document.getElementById('contextMenu');m.style.display='block';m.style.left=x+'px';m.style.top=y+'px'}}
|
| 455 |
-
function hideCtx(){{document.getElementById('contextMenu').style.display='none'}}
|
| 456 |
-
document.addEventListener('click',function(e){{if(!e.target.closest('.context-menu'))hideCtx()}});
|
| 457 |
-
function editorExport(){{
|
| 458 |
-
if(S.timelineClips.length===0){{alert('νμλΌμΈμ ν΄λ¦½μ μΆκ°ν΄μ£ΌμΈμ.');return}}
|
| 459 |
-
document.getElementById('exportModal').style.display='flex';
|
| 460 |
-
document.getElementById('exportProgress').style.width='0%';
|
| 461 |
-
document.getElementById('exportStatus').textContent='μμ λ λλ§ μ€λΉ μ€...';
|
| 462 |
-
document.getElementById('cancelExportBtn').textContent='μ·¨μ';
|
| 463 |
-
S.exportCancelled=false;
|
| 464 |
-
setTimeout(function(){{startRender()}},100);
|
| 465 |
-
}}
|
| 466 |
-
function startRender(){{
|
| 467 |
-
var canvas=document.createElement('canvas');
|
| 468 |
-
canvas.width=1280;canvas.height=720;
|
| 469 |
-
var ctx=canvas.getContext('2d');
|
| 470 |
-
var stream=canvas.captureStream(30);
|
| 471 |
-
var audioCtx=new(window.AudioContext||window.webkitAudioContext)();
|
| 472 |
-
var dest=audioCtx.createMediaStreamDestination();
|
| 473 |
-
stream.addTrack(dest.stream.getAudioTracks()[0]||stream.getAudioTracks()[0]);
|
| 474 |
-
var chunks=[];
|
| 475 |
-
var recorder=new MediaRecorder(stream,{{mimeType:'video/webm;codecs=vp9',videoBitsPerSecond:5000000}});
|
| 476 |
-
recorder.ondataavailable=function(e){{if(e.data.size>0)chunks.push(e.data)}};
|
| 477 |
-
recorder.onstop=function(){{
|
| 478 |
-
if(S.exportCancelled)return;
|
| 479 |
-
var blob=new Blob(chunks,{{type:'video/webm'}});
|
| 480 |
-
var url=URL.createObjectURL(blob);
|
| 481 |
-
var a=document.createElement('a');
|
| 482 |
-
a.href=url;a.download='edited_video_'+Date.now()+'.webm';
|
| 483 |
-
document.body.appendChild(a);a.click();document.body.removeChild(a);
|
| 484 |
-
URL.revokeObjectURL(url);
|
| 485 |
-
document.getElementById('exportStatus').textContent='β
λ€μ΄λ‘λ μλ£!';
|
| 486 |
-
document.getElementById('cancelExportBtn').textContent='λ«κΈ°';
|
| 487 |
-
}};
|
| 488 |
-
recorder.start();
|
| 489 |
-
var renderTime=0;
|
| 490 |
-
var duration=S.totalDuration;
|
| 491 |
-
var fps=30;
|
| 492 |
-
var frameTime=1/fps;
|
| 493 |
-
var audioSources={{}};
|
| 494 |
-
S.mediaLibrary.forEach(function(m){{
|
| 495 |
-
if(m.type==='video'||m.type==='audio'){{
|
| 496 |
-
var el=document.createElement(m.type);
|
| 497 |
-
el.src=m.url;el.crossOrigin='anonymous';el.preload='auto';el.muted=true;
|
| 498 |
-
audioSources[m.id]=el;
|
| 499 |
-
}}
|
| 500 |
-
}});
|
| 501 |
-
function renderFrame(){{
|
| 502 |
-
if(S.exportCancelled){{recorder.stop();return}}
|
| 503 |
-
if(renderTime>=duration){{recorder.stop();return}}
|
| 504 |
-
var prog=Math.min(100,Math.round((renderTime/duration)*100));
|
| 505 |
-
document.getElementById('exportProgress').style.width=prog+'%';
|
| 506 |
-
document.getElementById('exportStatus').textContent='λ λλ§ μ€... '+prog+'% ('+fmt(renderTime)+' / '+fmt(duration)+')';
|
| 507 |
-
ctx.fillStyle='#000';ctx.fillRect(0,0,1280,720);
|
| 508 |
-
var curClips=S.timelineClips.filter(function(c){{var ce=c.start+(c.te-c.ts);return renderTime>=c.start&&renderTime<ce}});
|
| 509 |
-
var vc=curClips.find(function(c){{return c.type==='video'||c.type==='image'}});
|
| 510 |
-
if(vc){{
|
| 511 |
-
var clipTime=renderTime-vc.start+vc.ts;
|
| 512 |
-
var media=S.mediaLibrary.find(function(m){{return m.id===vc.mid}});
|
| 513 |
-
if(media){{
|
| 514 |
-
if(vc.type==='image'){{
|
| 515 |
-
var img=new Image();img.src=media.url;
|
| 516 |
-
try{{drawFit(ctx,img,1280,720)}}catch(e){{}}
|
| 517 |
-
}}else if(vc.type==='video'){{
|
| 518 |
-
var vid=audioSources[media.id];
|
| 519 |
-
if(vid){{vid.currentTime=clipTime;try{{drawFit(ctx,vid,1280,720)}}catch(e){{}}}}
|
| 520 |
-
}}
|
| 521 |
-
}}
|
| 522 |
-
}}
|
| 523 |
-
renderTime+=frameTime;
|
| 524 |
-
setTimeout(renderFrame,1);
|
| 525 |
-
}}
|
| 526 |
-
setTimeout(renderFrame,500);
|
| 527 |
-
}}
|
| 528 |
-
function drawFit(ctx,src,w,h){{
|
| 529 |
-
var sw=src.videoWidth||src.width||1280;
|
| 530 |
-
var sh=src.videoHeight||src.height||720;
|
| 531 |
-
var scale=Math.min(w/sw,h/sh);
|
| 532 |
-
var dw=sw*scale,dh=sh*scale;
|
| 533 |
-
var dx=(w-dw)/2,dy=(h-dh)/2;
|
| 534 |
-
ctx.drawImage(src,dx,dy,dw,dh);
|
| 535 |
-
}}
|
| 536 |
-
function editorCancelExport(){{S.exportCancelled=true;document.getElementById('exportModal').style.display='none';document.getElementById('cancelExportBtn').textContent='μ·¨μ'}}
|
| 537 |
-
document.addEventListener('keydown',function(e){{
|
| 538 |
-
if(e.target.tagName==='INPUT')return;
|
| 539 |
-
if(e.code==='Space'){{e.preventDefault();editorTogglePlay()}}
|
| 540 |
-
else if(e.code==='Delete'||e.code==='Backspace'){{e.preventDefault();editorDelete()}}
|
| 541 |
-
else if(e.code==='KeyD'&&(e.ctrlKey||e.metaKey)){{e.preventDefault();editorDuplicate()}}
|
| 542 |
-
else if(e.code==='KeyZ'&&(e.ctrlKey||e.metaKey)){{e.preventDefault();editorUndo()}}
|
| 543 |
-
else if(e.code==='ArrowLeft'){{e.preventDefault();S.currentTime=Math.max(0,S.currentTime-(e.shiftKey?1:0.1));upPH();upPrev()}}
|
| 544 |
-
else if(e.code==='ArrowRight'){{e.preventDefault();S.currentTime=Math.min(S.totalDuration,S.currentTime+(e.shiftKey?1:0.1));upPH();upPrev()}}
|
| 545 |
-
}});
|
| 546 |
-
renderTL();upStat('μ€λΉλ¨');
|
| 547 |
-
var initMedia={media_data};
|
| 548 |
-
if(initMedia&&initMedia.length>0)initMedia.forEach(function(m){{addMedia(m.name,m.type,m.dataUrl)}});
|
| 549 |
-
console.log('Editor ready');
|
| 550 |
-
</script>
|
| 551 |
-
</body>
|
| 552 |
-
</html>'''
|
| 553 |
-
|
| 554 |
-
|
| 555 |
-
def process_file(file):
|
| 556 |
-
if file is None:
|
| 557 |
-
return []
|
| 558 |
-
results = []
|
| 559 |
-
files = file if isinstance(file, list) else [file]
|
| 560 |
-
for f in files:
|
| 561 |
-
if f is None:
|
| 562 |
-
continue
|
| 563 |
-
file_path = f.name if hasattr(f, 'name') else f
|
| 564 |
-
file_name = os.path.basename(file_path)
|
| 565 |
-
ext = file_name.lower().split('.')[-1]
|
| 566 |
-
if ext in ['mp4', 'webm', 'mov', 'avi', 'mkv']:
|
| 567 |
-
file_type, mime = 'video', f'video/{ext}'
|
| 568 |
-
elif ext in ['jpg', 'jpeg', 'png', 'gif', 'webp']:
|
| 569 |
-
file_type, mime = 'image', f'image/{ext}'
|
| 570 |
-
elif ext in ['mp3', 'wav', 'ogg', 'm4a', 'aac']:
|
| 571 |
-
file_type, mime = 'audio', f'audio/{ext}'
|
| 572 |
-
else:
|
| 573 |
-
continue
|
| 574 |
-
with open(file_path, 'rb') as fp:
|
| 575 |
-
data = base64.b64encode(fp.read()).decode('utf-8')
|
| 576 |
-
results.append({'name': file_name, 'type': file_type, 'dataUrl': f'data:{mime};base64,{data}'})
|
| 577 |
-
return results
|
| 578 |
-
|
| 579 |
-
|
| 580 |
-
def create_editor_iframe(media_data):
|
| 581 |
-
"""srcdoc λ°©μμΌλ‘ iframe μμ±"""
|
| 582 |
-
media_json = json.dumps(media_data, ensure_ascii=False)
|
| 583 |
-
html_content = get_editor_html(media_json)
|
| 584 |
-
# srcdocλ₯Ό μμλ°μ΄νλ‘ κ°μΈλ―λ‘, λ΄λΆμ μμλ°μ΄νλ§ μ΄μ€μΌμ΄ν
|
| 585 |
-
escaped = html_content.replace("'", "'")
|
| 586 |
-
return f"<iframe srcdoc='{escaped}' style='width:100%;height:800px;border:none;border-radius:12px;'></iframe>"
|
| 587 |
-
|
| 588 |
-
|
| 589 |
-
with gr.Blocks() as demo:
|
| 590 |
-
gr.Markdown("## π¬ Simple Video Editor")
|
| 591 |
-
gr.Markdown("νμΌμ μ
λ‘λνλ©΄ μλμΌλ‘ νμλΌμΈμ μΆκ°λ©λλ€.")
|
| 592 |
-
|
| 593 |
-
file_input = gr.File(
|
| 594 |
-
label="π νμΌ μ
λ‘λ (μμ/μ΄λ―Έμ§/μ€λμ€)",
|
| 595 |
-
file_count="multiple",
|
| 596 |
-
file_types=["video", "image", "audio"]
|
| 597 |
-
)
|
| 598 |
-
|
| 599 |
-
editor_html = gr.HTML(value=create_editor_iframe([]))
|
| 600 |
-
|
| 601 |
-
def on_file_upload(files):
|
| 602 |
-
if not files:
|
| 603 |
-
return create_editor_iframe([])
|
| 604 |
-
return create_editor_iframe(process_file(files))
|
| 605 |
-
|
| 606 |
-
file_input.change(fn=on_file_upload, inputs=[file_input], outputs=[editor_html])
|
| 607 |
-
|
| 608 |
-
if __name__ == "__main__":
|
| 609 |
-
demo.launch()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|