Delete app-BACKUP2.py
Browse files- app-BACKUP2.py +0 -1458
app-BACKUP2.py
DELETED
|
@@ -1,1458 +0,0 @@
|
|
| 1 |
-
"""
|
| 2 |
-
Simple Video Editor - Canvas 기반 렌더링
|
| 3 |
-
빈 프레임 문제 완전 해결 + 서버 사이드 MP4 내보내기
|
| 4 |
-
블러 배경 내보내기 수정: 더블 버퍼링
|
| 5 |
-
"""
|
| 6 |
-
|
| 7 |
-
import gradio as gr
|
| 8 |
-
import base64
|
| 9 |
-
import os
|
| 10 |
-
import json
|
| 11 |
-
import subprocess
|
| 12 |
-
import tempfile
|
| 13 |
-
import shutil
|
| 14 |
-
import time
|
| 15 |
-
|
| 16 |
-
# 서버 사이드 MP4 내보내기용
|
| 17 |
-
UPLOAD_DIR = tempfile.mkdtemp()
|
| 18 |
-
uploaded_files = {} # {filename: filepath}
|
| 19 |
-
|
| 20 |
-
def get_editor_html(media_data="[]"):
|
| 21 |
-
return f'''<!DOCTYPE html>
|
| 22 |
-
<html lang="ko">
|
| 23 |
-
<head>
|
| 24 |
-
<meta charset="UTF-8">
|
| 25 |
-
<style>
|
| 26 |
-
*{{margin:0;padding:0;box-sizing:border-box}}
|
| 27 |
-
body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7;font-size:13px}}
|
| 28 |
-
.editor{{display:flex;flex-direction:column;height:100vh}}
|
| 29 |
-
.toolbar{{height:44px;background:#fff;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;padding:0 12px}}
|
| 30 |
-
.toolbar-title{{font-size:15px;font-weight:600}}
|
| 31 |
-
.btn{{padding:5px 10px;border:none;border-radius:5px;cursor:pointer;font-size:11px;font-weight:500}}
|
| 32 |
-
.btn-secondary{{background:#f0f0f0;color:#333}}
|
| 33 |
-
.btn-secondary:hover{{background:#e0e0e0}}
|
| 34 |
-
.btn-success{{background:#10b981;color:#fff}}
|
| 35 |
-
.btn-danger{{background:#ef4444;color:#fff}}
|
| 36 |
-
.main{{display:flex;flex:1;overflow:hidden}}
|
| 37 |
-
.library{{width:160px;background:#fff;border-right:1px solid #ddd;display:flex;flex-direction:column}}
|
| 38 |
-
.lib-header{{padding:8px;border-bottom:1px solid #eee;font-size:10px;font-weight:600;color:#666}}
|
| 39 |
-
.lib-content{{flex:1;overflow-y:auto;padding:6px}}
|
| 40 |
-
.lib-hint{{text-align:center;padding:15px;color:#999;font-size:10px}}
|
| 41 |
-
.media-grid{{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}}
|
| 42 |
-
.media-item{{aspect-ratio:16/9;background:#f0f0f0;border-radius:4px;overflow:hidden;cursor:grab;position:relative;border:1px solid #e0e0e0}}
|
| 43 |
-
.media-item:hover{{border-color:#6366f1}}
|
| 44 |
-
.media-item img{{width:100%;height:100%;object-fit:cover}}
|
| 45 |
-
.media-item-icon{{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px}}
|
| 46 |
-
.media-item-dur{{position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.7);padding:1px 3px;border-radius:2px;font-size:8px;color:#fff}}
|
| 47 |
-
.preview-area{{flex:1;display:flex;flex-direction:column;background:#1a1a1a;margin:6px;border-radius:8px;overflow:hidden}}
|
| 48 |
-
.preview-box{{flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}}
|
| 49 |
-
#previewCanvas{{background:#000;box-shadow:0 0 20px rgba(0,0,0,0.5);cursor:default}}
|
| 50 |
-
.controls{{height:45px;background:#222;display:flex;align-items:center;justify-content:center;gap:6px}}
|
| 51 |
-
.ctrl-btn{{width:28px;height:28px;border:none;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;font-size:12px}}
|
| 52 |
-
.ctrl-btn:hover{{background:rgba(255,255,255,0.2)}}
|
| 53 |
-
.ctrl-btn.play{{width:36px;height:36px;background:#6366f1}}
|
| 54 |
-
.time-display{{font-family:monospace;font-size:10px;color:#aaa;min-width:90px;text-align:center}}
|
| 55 |
-
.props{{width:140px;background:#fff;border-left:1px solid #ddd}}
|
| 56 |
-
.props-header{{padding:8px;border-bottom:1px solid #eee;font-size:10px;font-weight:600;color:#666}}
|
| 57 |
-
.props-content{{padding:8px}}
|
| 58 |
-
.no-sel{{color:#999;text-align:center;padding:15px;font-size:10px}}
|
| 59 |
-
.prop-group{{margin-bottom:10px}}
|
| 60 |
-
.prop-label{{font-size:9px;color:#666;margin-bottom:2px}}
|
| 61 |
-
.prop-input{{width:100%;padding:4px;border:1px solid #ddd;border-radius:3px;font-size:10px}}
|
| 62 |
-
.timeline{{height:180px;background:#fff;border-top:1px solid #ddd;display:flex;flex-direction:column}}
|
| 63 |
-
.tl-toolbar{{height:28px;background:#fafafa;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 6px;gap:4px}}
|
| 64 |
-
.tl-toolbar .btn{{padding:2px 6px;font-size:9px}}
|
| 65 |
-
.tl-zoom{{display:flex;align-items:center;gap:3px;margin-left:auto;font-size:9px;color:#666}}
|
| 66 |
-
.tl-zoom input{{width:50px}}
|
| 67 |
-
.tl-container{{flex:1;overflow-x:auto;position:relative}}
|
| 68 |
-
.tl-ruler{{height:18px;background:#fff;border-bottom:1px solid #eee}}
|
| 69 |
-
.tl-tracks{{position:relative}}
|
| 70 |
-
.tl-track{{height:45px;border-bottom:1px solid #eee;display:flex}}
|
| 71 |
-
.tl-track:nth-child(2){{background:#fffbeb}}
|
| 72 |
-
.tl-track:nth-child(3){{background:#fdf2f8}}
|
| 73 |
-
.track-label{{width:50px;padding:0 4px;font-size:8px;color:#666;background:#fafafa;display:flex;align-items:center;border-right:1px solid #eee}}
|
| 74 |
-
.track-content{{flex:1;position:relative;min-width:600px}}
|
| 75 |
-
.clip{{position:absolute;height:36px;top:4px;border-radius:4px;cursor:grab;display:flex;align-items:center;overflow:hidden}}
|
| 76 |
-
.clip:hover{{box-shadow:0 0 0 2px #6366f1}}
|
| 77 |
-
.clip.selected{{box-shadow:0 0 0 2px #6366f1}}
|
| 78 |
-
.clip.video{{background:linear-gradient(135deg,#818cf8,#6366f1)}}
|
| 79 |
-
.clip.image{{background:linear-gradient(135deg,#34d399,#10b981)}}
|
| 80 |
-
.clip.audio{{background:linear-gradient(135deg,#fbbf24,#f59e0b)}}
|
| 81 |
-
.clip.text{{background:linear-gradient(135deg,#f472b6,#ec4899)}}
|
| 82 |
-
.clip-thumb{{width:36px;height:100%;object-fit:cover}}
|
| 83 |
-
.clip-info{{padding:0 4px;flex:1;overflow:hidden}}
|
| 84 |
-
.clip-name{{font-size:8px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
|
| 85 |
-
.clip-dur{{font-size:7px;color:rgba(255,255,255,0.7)}}
|
| 86 |
-
.clip-handle{{position:absolute;top:0;bottom:0;width:8px;background:rgba(255,255,255,0.5);cursor:ew-resize;opacity:0}}
|
| 87 |
-
.clip:hover .clip-handle{{opacity:1}}
|
| 88 |
-
.clip-handle-l{{left:0;border-radius:4px 0 0 4px}}
|
| 89 |
-
.clip-handle-r{{right:0;border-radius:0 4px 4px 0}}
|
| 90 |
-
.playhead{{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;z-index:10;pointer-events:none}}
|
| 91 |
-
.playhead::before{{content:"";position:absolute;top:0;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #ef4444}}
|
| 92 |
-
.drop-zone{{background:rgba(99,102,241,0.1)!important;outline:2px dashed #6366f1!important}}
|
| 93 |
-
.status{{height:20px;background:#f5f5f5;border-top:1px solid #ddd;display:flex;align-items:center;padding:0 8px;font-size:9px;color:#666}}
|
| 94 |
-
.ctx-menu{{position:fixed;background:#fff;border:1px solid #ddd;border-radius:5px;padding:3px 0;min-width:100px;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.15);display:none}}
|
| 95 |
-
.ctx-item{{padding:5px 10px;cursor:pointer;font-size:10px}}
|
| 96 |
-
.ctx-item:hover{{background:#f5f5f5}}
|
| 97 |
-
.ctx-item.danger{{color:#ef4444}}
|
| 98 |
-
.modal{{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}}
|
| 99 |
-
.modal-box{{background:#fff;border-radius:8px;padding:16px;min-width:240px;text-align:center}}
|
| 100 |
-
.modal-box h3{{margin-bottom:8px;font-size:13px}}
|
| 101 |
-
.progress{{height:5px;background:#eee;border-radius:3px;overflow:hidden;margin:10px 0}}
|
| 102 |
-
.progress-bar{{height:100%;background:#6366f1;transition:width 0.2s}}
|
| 103 |
-
.hidden-media{{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}}
|
| 104 |
-
</style>
|
| 105 |
-
</head>
|
| 106 |
-
<body>
|
| 107 |
-
<div class="editor">
|
| 108 |
-
<div class="toolbar">
|
| 109 |
-
<div class="toolbar-title">🎬 Video Editor</div>
|
| 110 |
-
<div style="display:flex;gap:8px;align-items:center">
|
| 111 |
-
<select id="ratioSelect" onchange="setRatio(this.value)" style="padding:4px 8px;border-radius:4px;border:1px solid #ddd;font-size:11px">
|
| 112 |
-
<option value="16:9">16:9 (가로)</option>
|
| 113 |
-
<option value="9:16">9:16 (세로)</option>
|
| 114 |
-
<option value="1:1">1:1 (정사각)</option>
|
| 115 |
-
<option value="4:3">4:3</option>
|
| 116 |
-
<option value="4:5">4:5 (인스타)</option>
|
| 117 |
-
</select>
|
| 118 |
-
<select id="fillMode" onchange="setFillMode(this.value)" style="padding:4px 8px;border-radius:4px;border:1px solid #ddd;font-size:11px">
|
| 119 |
-
<option value="fit">맞춤 (여백)</option>
|
| 120 |
-
<option value="fill">채우기 (확대)</option>
|
| 121 |
-
<option value="blur">블러 배경</option>
|
| 122 |
-
</select>
|
| 123 |
-
<button class="btn btn-secondary" onclick="undo()">↩ 실행취소</button>
|
| 124 |
-
<button class="btn btn-success" onclick="exportVideo()">📥 내보내기</button>
|
| 125 |
-
</div>
|
| 126 |
-
</div>
|
| 127 |
-
<div class="main">
|
| 128 |
-
<div class="library">
|
| 129 |
-
<div class="lib-header">📁 미디어</div>
|
| 130 |
-
<div class="lib-content">
|
| 131 |
-
<div class="lib-hint" id="hint">파일을 업로드하세요</div>
|
| 132 |
-
<div class="media-grid" id="mediaGrid"></div>
|
| 133 |
-
</div>
|
| 134 |
-
</div>
|
| 135 |
-
<div class="preview-area">
|
| 136 |
-
<div class="preview-box">
|
| 137 |
-
<canvas id="previewCanvas" width="640" height="360"></canvas>
|
| 138 |
-
</div>
|
| 139 |
-
<div class="controls">
|
| 140 |
-
<button class="ctrl-btn" onclick="seek(0)">⏮</button>
|
| 141 |
-
<button class="ctrl-btn" onclick="seek(S.time-5)">⏪</button>
|
| 142 |
-
<button class="ctrl-btn play" onclick="togglePlay()" id="playBtn">▶</button>
|
| 143 |
-
<button class="ctrl-btn" onclick="seek(S.time+5)">⏩</button>
|
| 144 |
-
<button class="ctrl-btn" onclick="seek(S.dur)">⏭</button>
|
| 145 |
-
<div class="time-display"><span id="curT">00:00.00</span> / <span id="totT">00:00.00</span></div>
|
| 146 |
-
<button class="ctrl-btn" onclick="toggleMute()" id="muteBtn">🔊</button>
|
| 147 |
-
</div>
|
| 148 |
-
</div>
|
| 149 |
-
<div class="props">
|
| 150 |
-
<div class="props-header">⚙️ 속성</div>
|
| 151 |
-
<div class="props-content" id="propsBox"><div class="no-sel">클립 선택</div></div>
|
| 152 |
-
</div>
|
| 153 |
-
</div>
|
| 154 |
-
<div class="timeline">
|
| 155 |
-
<div class="tl-toolbar">
|
| 156 |
-
<button class="btn btn-secondary" onclick="addTextClip()">📝 텍스트</button>
|
| 157 |
-
<button class="btn btn-secondary" onclick="splitClip()">✂ 자르기</button>
|
| 158 |
-
<button class="btn btn-secondary" onclick="dupeClip()">📋 복제</button>
|
| 159 |
-
<button class="btn btn-danger" onclick="delClip()">🗑 삭제</button>
|
| 160 |
-
<div class="tl-zoom">🔍<input type="range" min="0.5" max="3" step="0.1" value="1" oninput="setZoom(this.value)"></div>
|
| 161 |
-
</div>
|
| 162 |
-
<div class="tl-container" id="tlBox" onclick="tlClick(event)">
|
| 163 |
-
<div class="tl-ruler" id="ruler"></div>
|
| 164 |
-
<div class="tl-tracks">
|
| 165 |
-
<div class="tl-track"><div class="track-label">🎬 영상</div><div class="track-content" id="t0"></div></div>
|
| 166 |
-
<div class="tl-track"><div class="track-label">🎵 오디오</div><div class="track-content" id="t1"></div></div>
|
| 167 |
-
<div class="tl-track"><div class="track-label">📝 텍스트</div><div class="track-content" id="t2"></div></div>
|
| 168 |
-
</div>
|
| 169 |
-
<div class="playhead" id="playhead" style="left:50px"></div>
|
| 170 |
-
</div>
|
| 171 |
-
</div>
|
| 172 |
-
<div class="status" id="status">준비됨</div>
|
| 173 |
-
</div>
|
| 174 |
-
<div class="ctx-menu" id="ctx">
|
| 175 |
-
<div class="ctx-item" onclick="splitClip()">✂ 자르기</div>
|
| 176 |
-
<div class="ctx-item" onclick="dupeClip()">📋 복제</div>
|
| 177 |
-
<div class="ctx-item danger" onclick="delClip()">🗑 삭제</div>
|
| 178 |
-
</div>
|
| 179 |
-
<div class="modal" id="exportModal" style="display:none">
|
| 180 |
-
<div class="modal-box">
|
| 181 |
-
<h3>🎬 영상 내보내기</h3>
|
| 182 |
-
<p id="exportMsg">준비중...</p>
|
| 183 |
-
<div class="progress"><div class="progress-bar" id="exportBar"></div></div>
|
| 184 |
-
<button class="btn btn-secondary" onclick="cancelExport()">취소</button>
|
| 185 |
-
</div>
|
| 186 |
-
</div>
|
| 187 |
-
<div class="modal" id="textModal" style="display:none">
|
| 188 |
-
<div class="modal-box" style="min-width:320px">
|
| 189 |
-
<h3>📝 텍스트 추가</h3>
|
| 190 |
-
<div style="margin:10px 0;text-align:left">
|
| 191 |
-
<div style="margin-bottom:8px">
|
| 192 |
-
<label style="font-size:11px;color:#666">텍스트 내용</label>
|
| 193 |
-
<input type="text" id="textInput" placeholder="텍스트 입력..." style="width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
|
| 194 |
-
</div>
|
| 195 |
-
<div style="display:flex;gap:8px;margin-bottom:8px">
|
| 196 |
-
<div style="flex:1">
|
| 197 |
-
<label style="font-size:11px;color:#666">글자 크기</label>
|
| 198 |
-
<select id="textSize" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
|
| 199 |
-
<option value="24">작게 (24px)</option>
|
| 200 |
-
<option value="36">보통 (36px)</option>
|
| 201 |
-
<option value="48" selected>크게 (48px)</option>
|
| 202 |
-
<option value="64">매우 크게 (64px)</option>
|
| 203 |
-
<option value="96">최대 (96px)</option>
|
| 204 |
-
</select>
|
| 205 |
-
</div>
|
| 206 |
-
<div style="flex:1">
|
| 207 |
-
<label style="font-size:11px;color:#666">글자 색상</label>
|
| 208 |
-
<input type="color" id="textColor" value="#ffffff" style="width:100%;height:32px;border:1px solid #ddd;border-radius:4px;margin-top:4px;cursor:pointer">
|
| 209 |
-
</div>
|
| 210 |
-
</div>
|
| 211 |
-
<div style="display:flex;gap:8px;margin-bottom:8px">
|
| 212 |
-
<div style="flex:1">
|
| 213 |
-
<label style="font-size:11px;color:#666">배경 스타일</label>
|
| 214 |
-
<select id="textBgStyle" onchange="toggleBgColor()" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
|
| 215 |
-
<option value="none">배경 없음</option>
|
| 216 |
-
<option value="solid" selected>단색 배경</option>
|
| 217 |
-
<option value="rounded">둥근 배경</option>
|
| 218 |
-
</select>
|
| 219 |
-
</div>
|
| 220 |
-
<div style="flex:1" id="bgColorBox">
|
| 221 |
-
<label style="font-size:11px;color:#666">배경 색상</label>
|
| 222 |
-
<input type="color" id="textBgColor" value="#000000" style="width:100%;height:32px;border:1px solid #ddd;border-radius:4px;margin-top:4px;cursor:pointer">
|
| 223 |
-
</div>
|
| 224 |
-
</div>
|
| 225 |
-
<div style="margin-bottom:8px">
|
| 226 |
-
<label style="font-size:11px;color:#666">표시 시간 (초)</label>
|
| 227 |
-
<input type="number" id="textDuration" value="5" min="1" max="60" step="0.5" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
|
| 228 |
-
</div>
|
| 229 |
-
</div>
|
| 230 |
-
<div style="display:flex;gap:8px;justify-content:center">
|
| 231 |
-
<button class="btn btn-secondary" onclick="closeTextModal()">취소</button>
|
| 232 |
-
<button class="btn btn-success" onclick="confirmAddText()">추가</button>
|
| 233 |
-
</div>
|
| 234 |
-
</div>
|
| 235 |
-
</div>
|
| 236 |
-
<div id="hiddenMedia" class="hidden-media"></div>
|
| 237 |
-
<script>
|
| 238 |
-
var S={{
|
| 239 |
-
media:[],
|
| 240 |
-
clips:[],
|
| 241 |
-
sel:null,
|
| 242 |
-
playing:false,
|
| 243 |
-
muted:false,
|
| 244 |
-
time:0,
|
| 245 |
-
dur:0,
|
| 246 |
-
zoom:1,
|
| 247 |
-
pps:80,
|
| 248 |
-
history:[],
|
| 249 |
-
animId:null,
|
| 250 |
-
cancelled:false,
|
| 251 |
-
els:{{}},
|
| 252 |
-
canvas:null,
|
| 253 |
-
ctx:null,
|
| 254 |
-
lastClipId:null,
|
| 255 |
-
ratio:'16:9',
|
| 256 |
-
fillMode:'fit',
|
| 257 |
-
ratioSizes:{{
|
| 258 |
-
'16:9':{{w:1280,h:720,pw:640,ph:360}},
|
| 259 |
-
'9:16':{{w:720,h:1280,pw:203,ph:360}},
|
| 260 |
-
'1:1':{{w:1080,h:1080,pw:360,ph:360}},
|
| 261 |
-
'4:3':{{w:1280,h:960,pw:480,ph:360}},
|
| 262 |
-
'4:5':{{w:1080,h:1350,pw:288,ph:360}}
|
| 263 |
-
}}
|
| 264 |
-
}};
|
| 265 |
-
|
| 266 |
-
function init(){{
|
| 267 |
-
S.canvas=document.getElementById('previewCanvas');
|
| 268 |
-
S.ctx=S.canvas.getContext('2d');
|
| 269 |
-
updateCanvasSize();
|
| 270 |
-
drawPlaceholder();
|
| 271 |
-
setupCanvasDrag();
|
| 272 |
-
}}
|
| 273 |
-
|
| 274 |
-
// 캔버스에서 텍스트 드래그 설정
|
| 275 |
-
function setupCanvasDrag(){{
|
| 276 |
-
var canvas=S.canvas;
|
| 277 |
-
var dragging=null;
|
| 278 |
-
var dragOffsetX=0,dragOffsetY=0;
|
| 279 |
-
|
| 280 |
-
canvas.addEventListener('mousedown',function(e){{
|
| 281 |
-
var rect=canvas.getBoundingClientRect();
|
| 282 |
-
var scaleX=canvas.width/rect.width;
|
| 283 |
-
var scaleY=canvas.height/rect.height;
|
| 284 |
-
var mx=(e.clientX-rect.left)*scaleX;
|
| 285 |
-
var my=(e.clientY-rect.top)*scaleY;
|
| 286 |
-
|
| 287 |
-
// 현재 시간의 텍스트 클립 중 클릭된 것 찾기
|
| 288 |
-
var textClips=getTextClipsAt(S.time);
|
| 289 |
-
for(var i=textClips.length-1;i>=0;i--){{
|
| 290 |
-
var tc=textClips[i];
|
| 291 |
-
if(tc._bounds){{
|
| 292 |
-
var b=tc._bounds;
|
| 293 |
-
if(mx>=b.x&&mx<=b.x+b.w&&my>=b.y&&my<=b.y+b.h){{
|
| 294 |
-
dragging=tc;
|
| 295 |
-
selClip(tc.id);
|
| 296 |
-
var size=S.ratioSizes[S.ratio];
|
| 297 |
-
dragOffsetX=mx-size.pw*tc.posX;
|
| 298 |
-
dragOffsetY=my-size.ph*tc.posY;
|
| 299 |
-
canvas.style.cursor='move';
|
| 300 |
-
e.preventDefault();
|
| 301 |
-
return;
|
| 302 |
-
}}
|
| 303 |
-
}}
|
| 304 |
-
}}
|
| 305 |
-
}});
|
| 306 |
-
|
| 307 |
-
canvas.addEventListener('mousemove',function(e){{
|
| 308 |
-
var rect=canvas.getBoundingClientRect();
|
| 309 |
-
var scaleX=canvas.width/rect.width;
|
| 310 |
-
var scaleY=canvas.height/rect.height;
|
| 311 |
-
var mx=(e.clientX-rect.left)*scaleX;
|
| 312 |
-
var my=(e.clientY-rect.top)*scaleY;
|
| 313 |
-
|
| 314 |
-
if(dragging){{
|
| 315 |
-
var size=S.ratioSizes[S.ratio];
|
| 316 |
-
dragging.posX=Math.max(0.1,Math.min(0.9,(mx-dragOffsetX)/size.pw));
|
| 317 |
-
dragging.posY=Math.max(0.1,Math.min(0.9,(my-dragOffsetY)/size.ph));
|
| 318 |
-
drawFrame();
|
| 319 |
-
}}else{{
|
| 320 |
-
// 호버 커서 변경
|
| 321 |
-
var textClips=getTextClipsAt(S.time);
|
| 322 |
-
var onText=false;
|
| 323 |
-
for(var i=0;i<textClips.length;i++){{
|
| 324 |
-
var tc=textClips[i];
|
| 325 |
-
if(tc._bounds){{
|
| 326 |
-
var b=tc._bounds;
|
| 327 |
-
if(mx>=b.x&&mx<=b.x+b.w&&my>=b.y&&my<=b.y+b.h){{
|
| 328 |
-
onText=true;
|
| 329 |
-
break;
|
| 330 |
-
}}
|
| 331 |
-
}}
|
| 332 |
-
}}
|
| 333 |
-
canvas.style.cursor=onText?'move':'default';
|
| 334 |
-
}}
|
| 335 |
-
}});
|
| 336 |
-
|
| 337 |
-
canvas.addEventListener('mouseup',function(){{
|
| 338 |
-
if(dragging){{
|
| 339 |
-
save();
|
| 340 |
-
dragging=null;
|
| 341 |
-
canvas.style.cursor='default';
|
| 342 |
-
renderProps();
|
| 343 |
-
}}
|
| 344 |
-
}});
|
| 345 |
-
|
| 346 |
-
canvas.addEventListener('mouseleave',function(){{
|
| 347 |
-
if(dragging){{
|
| 348 |
-
save();
|
| 349 |
-
dragging=null;
|
| 350 |
-
canvas.style.cursor='default';
|
| 351 |
-
}}
|
| 352 |
-
}});
|
| 353 |
-
}}
|
| 354 |
-
|
| 355 |
-
function updateCanvasSize(){{
|
| 356 |
-
var size=S.ratioSizes[S.ratio];
|
| 357 |
-
S.canvas.width=size.pw;
|
| 358 |
-
S.canvas.height=size.ph;
|
| 359 |
-
S.canvas.style.width=size.pw+'px';
|
| 360 |
-
S.canvas.style.height=size.ph+'px';
|
| 361 |
-
}}
|
| 362 |
-
|
| 363 |
-
function setRatio(r){{
|
| 364 |
-
S.ratio=r;
|
| 365 |
-
updateCanvasSize();
|
| 366 |
-
drawFrame();
|
| 367 |
-
stat('화면 비율: '+r);
|
| 368 |
-
}}
|
| 369 |
-
|
| 370 |
-
function setFillMode(m){{
|
| 371 |
-
S.fillMode=m;
|
| 372 |
-
drawFrame();
|
| 373 |
-
stat('채우기 모드: '+(m==='fit'?'맞춤 (여백)':m==='fill'?'채우기 (확대)':'블러 배경'));
|
| 374 |
-
}}
|
| 375 |
-
|
| 376 |
-
function id(){{return Math.random().toString(36).substr(2,9)}}
|
| 377 |
-
function fmt(t){{if(!t||isNaN(t))t=0;var m=Math.floor(t/60),s=Math.floor(t%60),ms=Math.floor((t%1)*100);return String(m).padStart(2,'0')+':'+String(s).padStart(2,'0')+'.'+String(ms).padStart(2,'0')}}
|
| 378 |
-
function r(n){{return Math.round(n*1000)/1000}}
|
| 379 |
-
function stat(m){{document.getElementById('status').textContent=m}}
|
| 380 |
-
function save(){{S.history.push(JSON.stringify(S.clips));if(S.history.length>30)S.history.shift()}}
|
| 381 |
-
|
| 382 |
-
function drawPlaceholder(){{
|
| 383 |
-
var size=S.ratioSizes[S.ratio];
|
| 384 |
-
var pw=size.pw,ph=size.ph;
|
| 385 |
-
S.ctx.fillStyle='#000';
|
| 386 |
-
S.ctx.fillRect(0,0,pw,ph);
|
| 387 |
-
S.ctx.fillStyle='#444';
|
| 388 |
-
S.ctx.font='14px sans-serif';
|
| 389 |
-
S.ctx.textAlign='center';
|
| 390 |
-
S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
|
| 391 |
-
}}
|
| 392 |
-
|
| 393 |
-
function addMedia(name,type,url,filePath){{
|
| 394 |
-
var m={{id:id(),name:name,type:type,url:url,filePath:filePath||name,dur:type==='image'?5:0,thumb:type==='image'?url:null}};
|
| 395 |
-
S.media.push(m);
|
| 396 |
-
var container=document.getElementById('hiddenMedia');
|
| 397 |
-
if(type==='video'){{
|
| 398 |
-
var v=document.createElement('video');
|
| 399 |
-
v.src=url;
|
| 400 |
-
v.muted=true;
|
| 401 |
-
v.playsInline=true;
|
| 402 |
-
v.preload='auto';
|
| 403 |
-
v.crossOrigin='anonymous';
|
| 404 |
-
container.appendChild(v);
|
| 405 |
-
S.els[m.id]=v;
|
| 406 |
-
v.onloadedmetadata=function(){{
|
| 407 |
-
m.dur=r(v.duration);
|
| 408 |
-
renderLib();
|
| 409 |
-
v.currentTime=0.5;
|
| 410 |
-
}};
|
| 411 |
-
v.onseeked=function(){{
|
| 412 |
-
if(!m.thumb){{
|
| 413 |
-
try{{
|
| 414 |
-
var c=document.createElement('canvas');
|
| 415 |
-
c.width=160;c.height=90;
|
| 416 |
-
c.getContext('2d').drawImage(v,0,0,160,90);
|
| 417 |
-
m.thumb=c.toDataURL();
|
| 418 |
-
renderLib();
|
| 419 |
-
}}catch(e){{}}
|
| 420 |
-
}}
|
| 421 |
-
}};
|
| 422 |
-
}}else if(type==='audio'){{
|
| 423 |
-
var a=document.createElement('audio');
|
| 424 |
-
a.src=url;
|
| 425 |
-
a.preload='auto';
|
| 426 |
-
container.appendChild(a);
|
| 427 |
-
S.els[m.id]=a;
|
| 428 |
-
a.onloadedmetadata=function(){{m.dur=r(a.duration);renderLib()}};
|
| 429 |
-
}}else if(type==='image'){{
|
| 430 |
-
var img=new Image();
|
| 431 |
-
img.src=url;
|
| 432 |
-
img.crossOrigin='anonymous';
|
| 433 |
-
S.els[m.id]=img;
|
| 434 |
-
}}
|
| 435 |
-
renderLib();
|
| 436 |
-
stat('미디어 추가: '+name);
|
| 437 |
-
setTimeout(function(){{addClip(m)}},400);
|
| 438 |
-
}}
|
| 439 |
-
|
| 440 |
-
function renderLib(){{
|
| 441 |
-
var g=document.getElementById('mediaGrid');
|
| 442 |
-
var h=document.getElementById('hint');
|
| 443 |
-
h.style.display=S.media.length?'none':'block';
|
| 444 |
-
g.innerHTML='';
|
| 445 |
-
S.media.forEach(function(m){{
|
| 446 |
-
var d=document.createElement('div');
|
| 447 |
-
d.className='media-item';
|
| 448 |
-
d.draggable=true;
|
| 449 |
-
d.ondblclick=function(){{addClip(m)}};
|
| 450 |
-
d.ondragstart=function(e){{e.dataTransfer.setData('mid',m.id)}};
|
| 451 |
-
var th=m.thumb?'<img src="'+m.thumb+'">':'<div class="media-item-icon">'+(m.type==='video'?'🎬':m.type==='audio'?'🎵':'🖼')+'</div>';
|
| 452 |
-
d.innerHTML=th+(m.dur?'<div class="media-item-dur">'+fmt(m.dur)+'</div>':'');
|
| 453 |
-
g.appendChild(d);
|
| 454 |
-
}});
|
| 455 |
-
}}
|
| 456 |
-
|
| 457 |
-
function trackEnd(tr){{
|
| 458 |
-
var end=0;
|
| 459 |
-
for(var i=0;i<S.clips.length;i++){{
|
| 460 |
-
var c=S.clips[i];
|
| 461 |
-
if(c.track===tr){{
|
| 462 |
-
var e=r(c.start+(c.te-c.ts));
|
| 463 |
-
if(e>end)end=e;
|
| 464 |
-
}}
|
| 465 |
-
}}
|
| 466 |
-
return end;
|
| 467 |
-
}}
|
| 468 |
-
|
| 469 |
-
function addClip(m,at){{
|
| 470 |
-
save();
|
| 471 |
-
var tr=m.type==='audio'?1:0;
|
| 472 |
-
var st=at!==undefined?r(at):trackEnd(tr);
|
| 473 |
-
S.clips.push({{
|
| 474 |
-
id:id(),
|
| 475 |
-
mid:m.id,
|
| 476 |
-
name:m.name,
|
| 477 |
-
type:m.type,
|
| 478 |
-
track:tr,
|
| 479 |
-
start:st,
|
| 480 |
-
dur:m.dur,
|
| 481 |
-
ts:0,
|
| 482 |
-
te:m.dur,
|
| 483 |
-
vol:1,
|
| 484 |
-
filePath:m.filePath
|
| 485 |
-
}});
|
| 486 |
-
renderTL();
|
| 487 |
-
updateDur();
|
| 488 |
-
stat('클립 추가: '+m.name);
|
| 489 |
-
drawFrame();
|
| 490 |
-
}}
|
| 491 |
-
|
| 492 |
-
function renderTL(){{
|
| 493 |
-
['t0','t1','t2'].forEach(function(tid){{document.getElementById(tid).innerHTML=''}});
|
| 494 |
-
S.clips.forEach(function(c){{
|
| 495 |
-
var tr=document.getElementById('t'+c.track);
|
| 496 |
-
var el=document.createElement('div');
|
| 497 |
-
el.className='clip '+c.type+(S.sel===c.id?' selected':'');
|
| 498 |
-
var len=r(c.te-c.ts);
|
| 499 |
-
el.style.left=r(c.start*S.pps*S.zoom)+'px';
|
| 500 |
-
el.style.width=Math.max(25,r(len*S.pps*S.zoom))+'px';
|
| 501 |
-
el.draggable=true;
|
| 502 |
-
el.onclick=function(e){{e.stopPropagation();selClip(c.id)}};
|
| 503 |
-
el.oncontextmenu=function(e){{e.preventDefault();selClip(c.id);showCtx(e.clientX,e.clientY)}};
|
| 504 |
-
el.ondragstart=function(e){{e.dataTransfer.setData('cid',c.id);e.dataTransfer.setData('ox',e.offsetX)}};
|
| 505 |
-
var m=S.media.find(function(x){{return x.id===c.mid}});
|
| 506 |
-
var th=m&&m.thumb?'<img class="clip-thumb" src="'+m.thumb+'">':'';
|
| 507 |
-
var clipName=c.type==='text'?('📝 '+c.text.substring(0,8)):c.name;
|
| 508 |
-
el.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+clipName+'</div><div class="clip-dur">'+fmt(len)+'</div></div><div class="clip-handle clip-handle-l"></div><div class="clip-handle clip-handle-r"></div>';
|
| 509 |
-
el.querySelector('.clip-handle-l').onmousedown=function(e){{e.stopPropagation();startTrim(c.id,'l',e)}};
|
| 510 |
-
el.querySelector('.clip-handle-r').onmousedown=function(e){{e.stopPropagation();startTrim(c.id,'r',e)}};
|
| 511 |
-
tr.appendChild(el);
|
| 512 |
-
}});
|
| 513 |
-
renderRuler();
|
| 514 |
-
setupDrop();
|
| 515 |
-
}}
|
| 516 |
-
|
| 517 |
-
function renderRuler(){{
|
| 518 |
-
var ru=document.getElementById('ruler');
|
| 519 |
-
var w=Math.max(r(S.dur*S.pps*S.zoom)+150,600);
|
| 520 |
-
ru.style.width=w+'px';
|
| 521 |
-
var h='<svg width="100%" height="18" style="position:absolute;left:50px">';
|
| 522 |
-
var step=S.zoom<0.7?5:S.zoom<1.5?2:1;
|
| 523 |
-
for(var i=0;i<=S.dur+10;i+=step){{
|
| 524 |
-
var x=r(i*S.pps*S.zoom);
|
| 525 |
-
h+='<line x1="'+x+'" y1="13" x2="'+x+'" y2="18" stroke="#ccc"/>';
|
| 526 |
-
h+='<text x="'+x+'" y="10" fill="#999" font-size="8" text-anchor="middle">'+fmt(i)+'</text>';
|
| 527 |
-
}}
|
| 528 |
-
ru.innerHTML=h+'</svg>';
|
| 529 |
-
}}
|
| 530 |
-
|
| 531 |
-
function setupDrop(){{
|
| 532 |
-
['t0','t1','t2'].forEach(function(tid,idx){{
|
| 533 |
-
var tr=document.getElementById(tid);
|
| 534 |
-
tr.ondragover=function(e){{e.preventDefault();tr.classList.add('drop-zone')}};
|
| 535 |
-
tr.ondragleave=function(){{tr.classList.remove('drop-zone')}};
|
| 536 |
-
tr.ondrop=function(e){{
|
| 537 |
-
e.preventDefault();
|
| 538 |
-
tr.classList.remove('drop-zone');
|
| 539 |
-
var rect=tr.getBoundingClientRect();
|
| 540 |
-
var t=r(Math.max(0,(e.clientX-rect.left)/(S.pps*S.zoom)));
|
| 541 |
-
var mid=e.dataTransfer.getData('mid');
|
| 542 |
-
var cid=e.dataTransfer.getData('cid');
|
| 543 |
-
var ox=parseFloat(e.dataTransfer.getData('ox')||0);
|
| 544 |
-
if(mid){{
|
| 545 |
-
var m=S.media.find(function(x){{return x.id===mid}});
|
| 546 |
-
if(m)addClip(m,t);
|
| 547 |
-
}}else if(cid){{
|
| 548 |
-
save();
|
| 549 |
-
var c=S.clips.find(function(x){{return x.id===cid}});
|
| 550 |
-
if(c){{
|
| 551 |
-
c.start=r(Math.max(0,t-ox/(S.pps*S.zoom)));
|
| 552 |
-
// 텍스트는 텍스트 트랙으로만, 그 외는 영상/오디오 트랙으로
|
| 553 |
-
if(c.type==='text'){{
|
| 554 |
-
c.track=2;
|
| 555 |
-
}}else if(c.type==='audio'){{
|
| 556 |
-
c.track=1;
|
| 557 |
-
}}else{{
|
| 558 |
-
c.track=idx===2?0:idx;
|
| 559 |
-
}}
|
| 560 |
-
renderTL();
|
| 561 |
-
updateDur();
|
| 562 |
-
drawFrame();
|
| 563 |
-
}}
|
| 564 |
-
}}
|
| 565 |
-
}};
|
| 566 |
-
}});
|
| 567 |
-
}}
|
| 568 |
-
|
| 569 |
-
var trimData=null;
|
| 570 |
-
function startTrim(cid,side,e){{
|
| 571 |
-
e.preventDefault();
|
| 572 |
-
var c=S.clips.find(function(x){{return x.id===cid}});
|
| 573 |
-
if(!c)return;
|
| 574 |
-
save();
|
| 575 |
-
trimData={{cid:cid,side:side,sx:e.clientX,ots:c.ts,ote:c.te,ost:c.start}};
|
| 576 |
-
document.addEventListener('mousemove',doTrim);
|
| 577 |
-
document.addEventListener('mouseup',endTrim);
|
| 578 |
-
}}
|
| 579 |
-
function doTrim(e){{
|
| 580 |
-
if(!trimData)return;
|
| 581 |
-
var c=S.clips.find(function(x){{return x.id===trimData.cid}});
|
| 582 |
-
if(!c)return;
|
| 583 |
-
var dx=e.clientX-trimData.sx;
|
| 584 |
-
var dt=r(dx/(S.pps*S.zoom));
|
| 585 |
-
if(trimData.side==='l'){{
|
| 586 |
-
var newTs=Math.max(0,Math.min(c.te-0.1,trimData.ots+dt));
|
| 587 |
-
c.ts=r(newTs);
|
| 588 |
-
c.start=r(trimData.ost+(newTs-trimData.ots));
|
| 589 |
-
}}else{{
|
| 590 |
-
c.te=r(Math.max(c.ts+0.1,Math.min(c.dur,trimData.ote+dt)));
|
| 591 |
-
}}
|
| 592 |
-
renderTL();
|
| 593 |
-
updateDur();
|
| 594 |
-
}}
|
| 595 |
-
function endTrim(){{
|
| 596 |
-
trimData=null;
|
| 597 |
-
document.removeEventListener('mousemove',doTrim);
|
| 598 |
-
document.removeEventListener('mouseup',endTrim);
|
| 599 |
-
}}
|
| 600 |
-
|
| 601 |
-
function selClip(cid){{S.sel=cid;renderTL();renderProps()}}
|
| 602 |
-
|
| 603 |
-
function renderProps(){{
|
| 604 |
-
var box=document.getElementById('propsBox');
|
| 605 |
-
var c=S.clips.find(function(x){{return x.id===S.sel}});
|
| 606 |
-
if(!c){{box.innerHTML='<div class="no-sel">클립 선택</div>';return}}
|
| 607 |
-
var len=r(c.te-c.ts);
|
| 608 |
-
|
| 609 |
-
if(c.type==='text'){{
|
| 610 |
-
// 텍스트 클립 속성
|
| 611 |
-
box.innerHTML='<div class="prop-group"><div class="prop-label">텍스트</div><input class="prop-input" value="'+c.text+'" onchange="setProp(\\'text\\',this.value)"></div>'+
|
| 612 |
-
'<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
|
| 613 |
-
'<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
|
| 614 |
-
'<div class="prop-group"><div class="prop-label">위치 X ('+Math.round((c.posX||0.5)*100)+'%)</div><input class="prop-input" type="range" min="0.05" max="0.95" step="0.01" value="'+(c.posX||0.5)+'" oninput="setProp(\\'posX\\',parseFloat(this.value))"></div>'+
|
| 615 |
-
'<div class="prop-group"><div class="prop-label">위치 Y ('+Math.round((c.posY||0.85)*100)+'%)</div><input class="prop-input" type="range" min="0.05" max="0.95" step="0.01" value="'+(c.posY||0.85)+'" oninput="setProp(\\'posY\\',parseFloat(this.value))"></div>'+
|
| 616 |
-
'<div class="prop-group"><div class="prop-label">글자 크기</div><select class="prop-input" onchange="setProp(\\'fontSize\\',parseInt(this.value))">'+
|
| 617 |
-
'<option value="24"'+(c.fontSize===24?' selected':'')+'>작게</option>'+
|
| 618 |
-
'<option value="36"'+(c.fontSize===36?' selected':'')+'>보통</option>'+
|
| 619 |
-
'<option value="48"'+(c.fontSize===48?' selected':'')+'>크게</option>'+
|
| 620 |
-
'<option value="64"'+(c.fontSize===64?' selected':'')+'>매우 크게</option>'+
|
| 621 |
-
'<option value="96"'+(c.fontSize===96?' selected':'')+'>최대</option>'+
|
| 622 |
-
'</select></div>'+
|
| 623 |
-
'<div class="prop-group"><div class="prop-label">글자 색상</div><input class="prop-input" type="color" value="'+c.fontColor+'" onchange="setProp(\\'fontColor\\',this.value)"></div>'+
|
| 624 |
-
'<div class="prop-group"><div class="prop-label">배경 스타일</div><select class="prop-input" onchange="setProp(\\'bgStyle\\',this.value)">'+
|
| 625 |
-
'<option value="none"'+(c.bgStyle==='none'?' selected':'')+'>없음</option>'+
|
| 626 |
-
'<option value="solid"'+(c.bgStyle==='solid'?' selected':'')+'>단색</option>'+
|
| 627 |
-
'<option value="rounded"'+(c.bgStyle==='rounded'?' selected':'')+'>둥근</option>'+
|
| 628 |
-
'</select></div>'+
|
| 629 |
-
'<div class="prop-group"><div class="prop-label">배경 색상</div><input class="prop-input" type="color" value="'+c.bgColor+'" onchange="setProp(\\'bgColor\\',this.value)"></div>';
|
| 630 |
-
}}else{{
|
| 631 |
-
// 기존 미디어 클립 속성
|
| 632 |
-
box.innerHTML='<div class="prop-group"><div class="prop-label">이름</div><input class="prop-input" value="'+c.name+'" onchange="setProp(\\'name\\',this.value)"></div>'+
|
| 633 |
-
'<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
|
| 634 |
-
'<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
|
| 635 |
-
(c.type!=='image'?'<div class="prop-group"><div class="prop-label">볼륨 '+Math.round(c.vol*100)+'%</div><input class="prop-input" type="range" min="0" max="1" step="0.05" value="'+c.vol+'" oninput="setProp(\\'vol\\',parseFloat(this.value))"></div>':'');
|
| 636 |
-
}}
|
| 637 |
-
}}
|
| 638 |
-
|
| 639 |
-
function setProp(p,v){{
|
| 640 |
-
save();
|
| 641 |
-
var c=S.clips.find(function(x){{return x.id===S.sel}});
|
| 642 |
-
if(c){{c[p]=p==='start'?r(v):v;renderTL();updateDur();renderProps();drawFrame()}}
|
| 643 |
-
}}
|
| 644 |
-
|
| 645 |
-
function splitClip(){{
|
| 646 |
-
if(!S.sel){{alert('클립을 선택하세요');return}}
|
| 647 |
-
var c=S.clips.find(function(x){{return x.id===S.sel}});
|
| 648 |
-
if(!c)return;
|
| 649 |
-
var cEnd=r(c.start+c.te-c.ts);
|
| 650 |
-
if(S.time<=c.start||S.time>=cEnd){{alert('플레이헤드가 클립 안에 있어야 합니다');return}}
|
| 651 |
-
save();
|
| 652 |
-
var splitAt=r(S.time-c.start);
|
| 653 |
-
var c2=JSON.parse(JSON.stringify(c));
|
| 654 |
-
c2.id=id();
|
| 655 |
-
c2.start=r(S.time);
|
| 656 |
-
c2.ts=r(c.ts+splitAt);
|
| 657 |
-
c.te=r(c.ts+splitAt);
|
| 658 |
-
S.clips.push(c2);
|
| 659 |
-
renderTL();updateDur();hideCtx();stat('클립 분할됨');
|
| 660 |
-
}}
|
| 661 |
-
|
| 662 |
-
function dupeClip(){{
|
| 663 |
-
if(!S.sel)return;
|
| 664 |
-
var c=S.clips.find(function(x){{return x.id===S.sel}});
|
| 665 |
-
if(!c)return;
|
| 666 |
-
save();
|
| 667 |
-
var len=r(c.te-c.ts);
|
| 668 |
-
var nc=JSON.parse(JSON.stringify(c));
|
| 669 |
-
nc.id=id();
|
| 670 |
-
nc.start=r(c.start+len);
|
| 671 |
-
S.clips.push(nc);
|
| 672 |
-
renderTL();updateDur();hideCtx();stat('클립 복제됨');
|
| 673 |
-
}}
|
| 674 |
-
|
| 675 |
-
function delClip(){{
|
| 676 |
-
if(!S.sel)return;
|
| 677 |
-
save();
|
| 678 |
-
S.clips=S.clips.filter(function(x){{return x.id!==S.sel}});
|
| 679 |
-
S.sel=null;
|
| 680 |
-
renderTL();renderProps();updateDur();hideCtx();stat('클립 삭제됨');
|
| 681 |
-
drawFrame();
|
| 682 |
-
}}
|
| 683 |
-
|
| 684 |
-
function undo(){{if(S.history.length){{S.clips=JSON.parse(S.history.pop());renderTL();updateDur();stat('실행취소');drawFrame()}}}}
|
| 685 |
-
|
| 686 |
-
function updateDur(){{
|
| 687 |
-
var mx=0;
|
| 688 |
-
for(var i=0;i<S.clips.length;i++){{
|
| 689 |
-
var c=S.clips[i];
|
| 690 |
-
var e=r(c.start+c.te-c.ts);
|
| 691 |
-
if(e>mx)mx=e;
|
| 692 |
-
}}
|
| 693 |
-
S.dur=mx;
|
| 694 |
-
document.getElementById('totT').textContent=fmt(mx);
|
| 695 |
-
}}
|
| 696 |
-
|
| 697 |
-
function togglePlay(){{
|
| 698 |
-
S.playing=!S.playing;
|
| 699 |
-
document.getElementById('playBtn').textContent=S.playing?'⏸':'▶';
|
| 700 |
-
if(S.playing)play();else stop();
|
| 701 |
-
}}
|
| 702 |
-
|
| 703 |
-
function play(){{
|
| 704 |
-
var last=performance.now();
|
| 705 |
-
function loop(now){{
|
| 706 |
-
if(!S.playing)return;
|
| 707 |
-
var dt=(now-last)/1000;
|
| 708 |
-
last=now;
|
| 709 |
-
S.time=S.time+dt;
|
| 710 |
-
if(S.time>=S.dur){{
|
| 711 |
-
S.time=0;
|
| 712 |
-
if(S.dur===0){{S.playing=false;document.getElementById('playBtn').textContent='▶';return}}
|
| 713 |
-
}}
|
| 714 |
-
updateHead();
|
| 715 |
-
drawFrame();
|
| 716 |
-
S.animId=requestAnimationFrame(loop);
|
| 717 |
-
}}
|
| 718 |
-
S.animId=requestAnimationFrame(loop);
|
| 719 |
-
}}
|
| 720 |
-
|
| 721 |
-
function stop(){{
|
| 722 |
-
if(S.animId){{cancelAnimationFrame(S.animId);S.animId=null}}
|
| 723 |
-
Object.keys(S.els).forEach(function(k){{
|
| 724 |
-
var el=S.els[k];
|
| 725 |
-
if(el&&el.pause)el.pause();
|
| 726 |
-
}});
|
| 727 |
-
}}
|
| 728 |
-
|
| 729 |
-
function seek(t){{
|
| 730 |
-
S.time=Math.max(0,Math.min(S.dur||0,t));
|
| 731 |
-
updateHead();
|
| 732 |
-
drawFrame();
|
| 733 |
-
}}
|
| 734 |
-
|
| 735 |
-
function updateHead(){{
|
| 736 |
-
document.getElementById('playhead').style.left=(50+S.time*S.pps*S.zoom)+'px';
|
| 737 |
-
document.getElementById('curT').textContent=fmt(S.time);
|
| 738 |
-
}}
|
| 739 |
-
|
| 740 |
-
function getClipAt(t,type){{
|
| 741 |
-
var sorted=S.clips.filter(function(c){{
|
| 742 |
-
if(type==='visual')return c.type==='video'||c.type==='image';
|
| 743 |
-
if(type==='audio')return c.type==='audio';
|
| 744 |
-
return true;
|
| 745 |
-
}}).sort(function(a,b){{return a.start-b.start}});
|
| 746 |
-
for(var i=0;i<sorted.length;i++){{
|
| 747 |
-
var c=sorted[i];
|
| 748 |
-
var cEnd=c.start+(c.te-c.ts);
|
| 749 |
-
if(t>=c.start&&t<cEnd)return c;
|
| 750 |
-
}}
|
| 751 |
-
return null;
|
| 752 |
-
}}
|
| 753 |
-
|
| 754 |
-
function drawFrame(){{
|
| 755 |
-
var t=S.time;
|
| 756 |
-
var vc=getClipAt(t,'visual');
|
| 757 |
-
var size=S.ratioSizes[S.ratio];
|
| 758 |
-
var pw=size.pw,ph=size.ph;
|
| 759 |
-
|
| 760 |
-
S.ctx.fillStyle='#000';
|
| 761 |
-
S.ctx.fillRect(0,0,pw,ph);
|
| 762 |
-
|
| 763 |
-
if(vc){{
|
| 764 |
-
var el=S.els[vc.mid];
|
| 765 |
-
if(el){{
|
| 766 |
-
if(vc.type==='video'){{
|
| 767 |
-
var clipT=t-vc.start+vc.ts;
|
| 768 |
-
if(Math.abs(el.currentTime-clipT)>0.05){{
|
| 769 |
-
el.currentTime=clipT;
|
| 770 |
-
}}
|
| 771 |
-
if(S.playing&&el.paused)el.play().catch(function(){{}});
|
| 772 |
-
if(!S.playing&&!el.paused)el.pause();
|
| 773 |
-
el.volume=S.muted?0:vc.vol;
|
| 774 |
-
}}
|
| 775 |
-
try{{
|
| 776 |
-
var sw=el.videoWidth||el.naturalWidth||el.width||pw;
|
| 777 |
-
var sh=el.videoHeight||el.naturalHeight||el.height||ph;
|
| 778 |
-
drawWithMode(S.ctx,el,sw,sh,pw,ph,S.fillMode);
|
| 779 |
-
}}catch(e){{}}
|
| 780 |
-
}}
|
| 781 |
-
}}else if(S.clips.length===0){{
|
| 782 |
-
S.ctx.fillStyle='#444';
|
| 783 |
-
S.ctx.font='14px sans-serif';
|
| 784 |
-
S.ctx.textAlign='center';
|
| 785 |
-
S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
|
| 786 |
-
}}
|
| 787 |
-
var audioClips=S.clips.filter(function(c){{
|
| 788 |
-
if(c.type!=='audio')return false;
|
| 789 |
-
var cEnd=c.start+(c.te-c.ts);
|
| 790 |
-
return t>=c.start&&t<cEnd;
|
| 791 |
-
}});
|
| 792 |
-
audioClips.forEach(function(ac){{
|
| 793 |
-
var el=S.els[ac.mid];
|
| 794 |
-
if(el){{
|
| 795 |
-
var clipT=t-ac.start+ac.ts;
|
| 796 |
-
if(Math.abs(el.currentTime-clipT)>0.1)el.currentTime=clipT;
|
| 797 |
-
el.volume=S.muted?0:ac.vol;
|
| 798 |
-
if(S.playing&&el.paused)el.play().catch(function(){{}});
|
| 799 |
-
if(!S.playing&&!el.paused)el.pause();
|
| 800 |
-
}}
|
| 801 |
-
}});
|
| 802 |
-
S.clips.forEach(function(c){{
|
| 803 |
-
if(c.type!=='audio')return;
|
| 804 |
-
var cEnd=c.start+(c.te-c.ts);
|
| 805 |
-
if(t<c.start||t>=cEnd){{
|
| 806 |
-
var el=S.els[c.mid];
|
| 807 |
-
if(el&&!el.paused)el.pause();
|
| 808 |
-
}}
|
| 809 |
-
}});
|
| 810 |
-
if(!vc&&!audioClips.length&&S.clips.length>0){{
|
| 811 |
-
var hasText=getTextClipsAt(t).length>0;
|
| 812 |
-
if(!hasText){{
|
| 813 |
-
S.ctx.fillStyle='#333';
|
| 814 |
-
S.ctx.font='12px sans-serif';
|
| 815 |
-
S.ctx.textAlign='center';
|
| 816 |
-
S.ctx.fillText('재생 위치에 미디어가 없습니다',pw/2,ph/2);
|
| 817 |
-
}}
|
| 818 |
-
}}
|
| 819 |
-
|
| 820 |
-
// 텍스트 오버레이 렌더링
|
| 821 |
-
var textClips=getTextClipsAt(t);
|
| 822 |
-
textClips.forEach(function(tc){{
|
| 823 |
-
drawText(S.ctx,tc,pw,ph);
|
| 824 |
-
}});
|
| 825 |
-
}}
|
| 826 |
-
|
| 827 |
-
function drawWithMode(ctx,el,sw,sh,dw,dh,mode){{
|
| 828 |
-
if(mode==='fill'){{
|
| 829 |
-
// 채우기: 캔버스를 꽉 채우도록 확대, 넘치는 부분 잘림
|
| 830 |
-
var scale=Math.max(dw/sw,dh/sh);
|
| 831 |
-
var nw=sw*scale,nh=sh*scale;
|
| 832 |
-
var ox=(dw-nw)/2,oy=(dh-nh)/2;
|
| 833 |
-
ctx.drawImage(el,ox,oy,nw,nh);
|
| 834 |
-
}}else if(mode==='blur'){{
|
| 835 |
-
// 프레임 먼저 캡처
|
| 836 |
-
var frameCanvas=document.createElement('canvas');
|
| 837 |
-
frameCanvas.width=sw;frameCanvas.height=sh;
|
| 838 |
-
var frameCtx=frameCanvas.getContext('2d');
|
| 839 |
-
frameCtx.drawImage(el,0,0,sw,sh);
|
| 840 |
-
|
| 841 |
-
// 블러용 작은 캔버스
|
| 842 |
-
var blurCanvas=document.createElement('canvas');
|
| 843 |
-
blurCanvas.width=16;blurCanvas.height=16;
|
| 844 |
-
var blurCtx=blurCanvas.getContext('2d');
|
| 845 |
-
blurCtx.drawImage(frameCanvas,0,0,16,16);
|
| 846 |
-
|
| 847 |
-
// 배경
|
| 848 |
-
ctx.imageSmoothingEnabled=true;
|
| 849 |
-
ctx.imageSmoothingQuality='high';
|
| 850 |
-
var scale=Math.max(dw/sw,dh/sh)*1.1;
|
| 851 |
-
var nw=sw*scale,nh=sh*scale;
|
| 852 |
-
var ox=(dw-nw)/2,oy=(dh-nh)/2;
|
| 853 |
-
ctx.drawImage(blurCanvas,ox,oy,nw,nh);
|
| 854 |
-
|
| 855 |
-
// 어둡게
|
| 856 |
-
ctx.fillStyle='rgba(0,0,0,0.4)';
|
| 857 |
-
ctx.fillRect(0,0,dw,dh);
|
| 858 |
-
|
| 859 |
-
// 원본 (캡처된 프레임)
|
| 860 |
-
var fitScale=Math.min(dw/sw,dh/sh);
|
| 861 |
-
var fw=sw*fitScale,fh=sh*fitScale;
|
| 862 |
-
var fx=(dw-fw)/2,fy=(dh-fh)/2;
|
| 863 |
-
ctx.drawImage(frameCanvas,fx,fy,fw,fh);
|
| 864 |
-
}}else{{
|
| 865 |
-
// 맞춤 (fit): 원본 비율 유지, 여백
|
| 866 |
-
var scale=Math.min(dw/sw,dh/sh);
|
| 867 |
-
var nw=sw*scale,nh=sh*scale;
|
| 868 |
-
var ox=(dw-nw)/2,oy=(dh-nh)/2;
|
| 869 |
-
ctx.drawImage(el,ox,oy,nw,nh);
|
| 870 |
-
}}
|
| 871 |
-
}}
|
| 872 |
-
|
| 873 |
-
function toggleMute(){{S.muted=!S.muted;document.getElementById('muteBtn').textContent=S.muted?'🔇':'🔊'}}
|
| 874 |
-
|
| 875 |
-
// 텍스트 클립 관련 함수들
|
| 876 |
-
function addTextClip(){{
|
| 877 |
-
document.getElementById('textModal').style.display='flex';
|
| 878 |
-
document.getElementById('textInput').value='';
|
| 879 |
-
document.getElementById('textInput').focus();
|
| 880 |
-
}}
|
| 881 |
-
|
| 882 |
-
function closeTextModal(){{
|
| 883 |
-
document.getElementById('textModal').style.display='none';
|
| 884 |
-
}}
|
| 885 |
-
|
| 886 |
-
function toggleBgColor(){{
|
| 887 |
-
var style=document.getElementById('textBgStyle').value;
|
| 888 |
-
document.getElementById('bgColorBox').style.opacity=style==='none'?'0.5':'1';
|
| 889 |
-
}}
|
| 890 |
-
|
| 891 |
-
function confirmAddText(){{
|
| 892 |
-
var text=document.getElementById('textInput').value.trim();
|
| 893 |
-
if(!text){{alert('텍스트를 입력하세요');return}}
|
| 894 |
-
save();
|
| 895 |
-
var duration=parseFloat(document.getElementById('textDuration').value)||5;
|
| 896 |
-
S.clips.push({{
|
| 897 |
-
id:id(),
|
| 898 |
-
type:'text',
|
| 899 |
-
track:2,
|
| 900 |
-
start:S.time,
|
| 901 |
-
dur:duration,
|
| 902 |
-
ts:0,
|
| 903 |
-
te:duration,
|
| 904 |
-
text:text,
|
| 905 |
-
fontSize:parseInt(document.getElementById('textSize').value),
|
| 906 |
-
fontColor:document.getElementById('textColor').value,
|
| 907 |
-
bgStyle:document.getElementById('textBgStyle').value,
|
| 908 |
-
bgColor:document.getElementById('textBgColor').value,
|
| 909 |
-
posX:0.5, // 0~1 비율 (가운데)
|
| 910 |
-
posY:0.85 // 0~1 비율 (하단)
|
| 911 |
-
}});
|
| 912 |
-
closeTextModal();
|
| 913 |
-
renderTL();
|
| 914 |
-
updateDur();
|
| 915 |
-
drawFrame();
|
| 916 |
-
stat('텍스트 추가: '+text);
|
| 917 |
-
}}
|
| 918 |
-
|
| 919 |
-
function getTextClipsAt(t){{
|
| 920 |
-
return S.clips.filter(function(c){{
|
| 921 |
-
if(c.type!=='text')return false;
|
| 922 |
-
var cEnd=c.start+(c.te-c.ts);
|
| 923 |
-
return t>=c.start&&t<cEnd;
|
| 924 |
-
}});
|
| 925 |
-
}}
|
| 926 |
-
|
| 927 |
-
function drawText(ctx,clip,dw,dh){{
|
| 928 |
-
var text=clip.text;
|
| 929 |
-
var fontSize=clip.fontSize||48;
|
| 930 |
-
var fontColor=clip.fontColor||'#ffffff';
|
| 931 |
-
var bgStyle=clip.bgStyle||'none';
|
| 932 |
-
var bgColor=clip.bgColor||'#000000';
|
| 933 |
-
var posX=clip.posX!==undefined?clip.posX:0.5;
|
| 934 |
-
var posY=clip.posY!==undefined?clip.posY:0.85;
|
| 935 |
-
|
| 936 |
-
ctx.font='bold '+fontSize+'px -apple-system,BlinkMacSystemFont,sans-serif';
|
| 937 |
-
ctx.textAlign='center';
|
| 938 |
-
ctx.textBaseline='middle';
|
| 939 |
-
|
| 940 |
-
var metrics=ctx.measureText(text);
|
| 941 |
-
var textW=metrics.width;
|
| 942 |
-
var textH=fontSize;
|
| 943 |
-
var x=dw*posX;
|
| 944 |
-
var y=dh*posY;
|
| 945 |
-
|
| 946 |
-
// 텍스트 영역 저장 (클릭 감지용)
|
| 947 |
-
clip._bounds={{
|
| 948 |
-
x:x-textW/2-fontSize*0.3,
|
| 949 |
-
y:y-textH/2-fontSize*0.15,
|
| 950 |
-
w:textW+fontSize*0.6,
|
| 951 |
-
h:textH+fontSize*0.3
|
| 952 |
-
}};
|
| 953 |
-
|
| 954 |
-
if(bgStyle!=='none'){{
|
| 955 |
-
var padding=fontSize*0.3;
|
| 956 |
-
var bgX=x-textW/2-padding;
|
| 957 |
-
var bgY=y-textH/2-padding/2;
|
| 958 |
-
var bgW=textW+padding*2;
|
| 959 |
-
var bgH=textH+padding;
|
| 960 |
-
|
| 961 |
-
ctx.fillStyle=bgColor+'cc';
|
| 962 |
-
if(bgStyle==='rounded'){{
|
| 963 |
-
ctx.beginPath();
|
| 964 |
-
ctx.roundRect(bgX,bgY,bgW,bgH,10);
|
| 965 |
-
ctx.fill();
|
| 966 |
-
}}else{{
|
| 967 |
-
ctx.fillRect(bgX,bgY,bgW,bgH);
|
| 968 |
-
}}
|
| 969 |
-
}}
|
| 970 |
-
|
| 971 |
-
// 텍스트 그림자
|
| 972 |
-
ctx.fillStyle='rgba(0,0,0,0.5)';
|
| 973 |
-
ctx.fillText(text,x+2,y+2);
|
| 974 |
-
|
| 975 |
-
// 텍스트
|
| 976 |
-
ctx.fillStyle=fontColor;
|
| 977 |
-
ctx.fillText(text,x,y);
|
| 978 |
-
|
| 979 |
-
// 선택된 텍스트면 테두리 표시
|
| 980 |
-
if(S.sel===clip.id){{
|
| 981 |
-
ctx.strokeStyle='#6366f1';
|
| 982 |
-
ctx.lineWidth=2;
|
| 983 |
-
ctx.setLineDash([5,3]);
|
| 984 |
-
ctx.strokeRect(clip._bounds.x,clip._bounds.y,clip._bounds.w,clip._bounds.h);
|
| 985 |
-
ctx.setLineDash([]);
|
| 986 |
-
}}
|
| 987 |
-
}}
|
| 988 |
-
function setZoom(v){{S.zoom=parseFloat(v);renderTL();updateHead()}}
|
| 989 |
-
function tlClick(e){{
|
| 990 |
-
if(e.target.closest('.clip'))return;
|
| 991 |
-
var rect=document.getElementById('tlBox').getBoundingClientRect();
|
| 992 |
-
var scrollL=document.getElementById('tlBox').scrollLeft;
|
| 993 |
-
S.time=Math.max(0,Math.min(S.dur||0,(e.clientX-rect.left-50+scrollL)/(S.pps*S.zoom)));
|
| 994 |
-
updateHead();
|
| 995 |
-
drawFrame();
|
| 996 |
-
}}
|
| 997 |
-
|
| 998 |
-
function showCtx(x,y){{var m=document.getElementById('ctx');m.style.display='block';m.style.left=x+'px';m.style.top=y+'px'}}
|
| 999 |
-
function hideCtx(){{document.getElementById('ctx').style.display='none'}}
|
| 1000 |
-
document.addEventListener('click',function(e){{if(!e.target.closest('.ctx-menu'))hideCtx()}});
|
| 1001 |
-
|
| 1002 |
-
function exportVideo(){{
|
| 1003 |
-
if(!S.clips.length){{alert('클립을 추가하세요');return}}
|
| 1004 |
-
S.cancelled=false;
|
| 1005 |
-
document.getElementById('exportModal').style.display='flex';
|
| 1006 |
-
document.getElementById('exportBar').style.width='0%';
|
| 1007 |
-
document.getElementById('exportMsg').textContent='녹화 준비 중...';
|
| 1008 |
-
doExport();
|
| 1009 |
-
}}
|
| 1010 |
-
|
| 1011 |
-
// ============================================
|
| 1012 |
-
// 핵심 수정: 더블 버퍼링으로 블러 번쩍임 방지
|
| 1013 |
-
// ============================================
|
| 1014 |
-
async function doExport(){{
|
| 1015 |
-
var size=S.ratioSizes[S.ratio];
|
| 1016 |
-
var exportW=size.w,exportH=size.h;
|
| 1017 |
-
|
| 1018 |
-
// ★ 메인 캔버스 (MediaRecorder 연결) - 완성된 프레임만 받음
|
| 1019 |
-
var mainCanvas=document.createElement('canvas');
|
| 1020 |
-
mainCanvas.width=exportW;mainCanvas.height=exportH;
|
| 1021 |
-
var mainCtx=mainCanvas.getContext('2d');
|
| 1022 |
-
|
| 1023 |
-
// ★ 오프스크린 캔버스 (렌더링용) - 여기서 모든 작업 후 한번에 복사
|
| 1024 |
-
var offCanvas=document.createElement('canvas');
|
| 1025 |
-
offCanvas.width=exportW;offCanvas.height=exportH;
|
| 1026 |
-
var offCtx=offCanvas.getContext('2d');
|
| 1027 |
-
|
| 1028 |
-
// 초기 검은 화면
|
| 1029 |
-
mainCtx.fillStyle='#000';
|
| 1030 |
-
mainCtx.fillRect(0,0,exportW,exportH);
|
| 1031 |
-
|
| 1032 |
-
var stream=mainCanvas.captureStream(30);
|
| 1033 |
-
|
| 1034 |
-
// 고화질 설정
|
| 1035 |
-
var opts={{mimeType:'video/webm;codecs=vp9',videoBitsPerSecond:8000000}};
|
| 1036 |
-
if(!MediaRecorder.isTypeSupported(opts.mimeType)){{
|
| 1037 |
-
opts={{mimeType:'video/webm;codecs=vp8',videoBitsPerSecond:8000000}};
|
| 1038 |
-
}}
|
| 1039 |
-
if(!MediaRecorder.isTypeSupported(opts.mimeType)){{
|
| 1040 |
-
opts={{mimeType:'video/webm',videoBitsPerSecond:5000000}};
|
| 1041 |
-
}}
|
| 1042 |
-
|
| 1043 |
-
var rec=new MediaRecorder(stream,opts);
|
| 1044 |
-
var chunks=[];
|
| 1045 |
-
rec.ondataavailable=function(e){{if(e.data.size>0)chunks.push(e.data)}};
|
| 1046 |
-
|
| 1047 |
-
document.getElementById('exportMsg').textContent='녹화 중... ('+S.ratio+')';
|
| 1048 |
-
rec.start(100);
|
| 1049 |
-
|
| 1050 |
-
var dur=S.dur;
|
| 1051 |
-
var fillMode=S.fillMode;
|
| 1052 |
-
|
| 1053 |
-
// 블러용 캔버스 (재사용)
|
| 1054 |
-
var frameCanvas=document.createElement('canvas');
|
| 1055 |
-
var frameCtx=frameCanvas.getContext('2d');
|
| 1056 |
-
var blurCanvas=document.createElement('canvas');
|
| 1057 |
-
blurCanvas.width=16;blurCanvas.height=16;
|
| 1058 |
-
var blurCtx=blurCanvas.getContext('2d');
|
| 1059 |
-
|
| 1060 |
-
// 모든 비디오를 처음으로 되돌리고 재생
|
| 1061 |
-
var videoClips=S.clips.filter(function(c){{return c.type==='video'}});
|
| 1062 |
-
videoClips.forEach(function(vc){{
|
| 1063 |
-
var el=S.els[vc.mid];
|
| 1064 |
-
if(el){{
|
| 1065 |
-
el.currentTime=vc.ts;
|
| 1066 |
-
el.muted=true;
|
| 1067 |
-
}}
|
| 1068 |
-
}});
|
| 1069 |
-
|
| 1070 |
-
// 잠시 대기 후 재생 시작
|
| 1071 |
-
await new Promise(function(r){{setTimeout(r,200)}});
|
| 1072 |
-
|
| 1073 |
-
videoClips.forEach(function(vc){{
|
| 1074 |
-
var el=S.els[vc.mid];
|
| 1075 |
-
if(el)el.play().catch(function(){{}});
|
| 1076 |
-
}});
|
| 1077 |
-
|
| 1078 |
-
var startTime=performance.now();
|
| 1079 |
-
|
| 1080 |
-
// 실시간 렌더링 루프
|
| 1081 |
-
await new Promise(function(resolve){{
|
| 1082 |
-
function render(){{
|
| 1083 |
-
if(S.cancelled){{rec.stop();resolve();return}}
|
| 1084 |
-
|
| 1085 |
-
var elapsed=(performance.now()-startTime)/1000;
|
| 1086 |
-
if(elapsed>=dur){{
|
| 1087 |
-
rec.stop();
|
| 1088 |
-
setTimeout(resolve,200);
|
| 1089 |
-
return;
|
| 1090 |
-
}}
|
| 1091 |
-
|
| 1092 |
-
// 진행률 업데이트
|
| 1093 |
-
document.getElementById('exportBar').style.width=(elapsed/dur*100)+'%';
|
| 1094 |
-
document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(elapsed/dur*100)+'%';
|
| 1095 |
-
|
| 1096 |
-
// ★ 오프스크린 캔버스에 완전히 렌더링 ★
|
| 1097 |
-
offCtx.fillStyle='#000';
|
| 1098 |
-
offCtx.fillRect(0,0,exportW,exportH);
|
| 1099 |
-
|
| 1100 |
-
var vc=getClipAt(elapsed,'visual');
|
| 1101 |
-
if(vc){{
|
| 1102 |
-
var el=S.els[vc.mid];
|
| 1103 |
-
if(el){{
|
| 1104 |
-
// 비디오 시간 동기화 (차이가 크면 보정)
|
| 1105 |
-
if(vc.type==='video'){{
|
| 1106 |
-
var targetT=elapsed-vc.start+vc.ts;
|
| 1107 |
-
if(Math.abs(el.currentTime-targetT)>0.5){{
|
| 1108 |
-
el.currentTime=targetT;
|
| 1109 |
-
}}
|
| 1110 |
-
}}
|
| 1111 |
-
|
| 1112 |
-
try{{
|
| 1113 |
-
var sw=el.videoWidth||el.naturalWidth||el.width||exportW;
|
| 1114 |
-
var sh=el.videoHeight||el.naturalHeight||el.height||exportH;
|
| 1115 |
-
|
| 1116 |
-
if(fillMode==='blur'){{
|
| 1117 |
-
// ★ 블러: 오프스크린에서 완전히 처리 후 메인에 복사 ★
|
| 1118 |
-
frameCanvas.width=sw;
|
| 1119 |
-
frameCanvas.height=sh;
|
| 1120 |
-
frameCtx.drawImage(el,0,0,sw,sh);
|
| 1121 |
-
blurCtx.drawImage(frameCanvas,0,0,16,16);
|
| 1122 |
-
|
| 1123 |
-
offCtx.imageSmoothingEnabled=true;
|
| 1124 |
-
offCtx.imageSmoothingQuality='high';
|
| 1125 |
-
var scale=Math.max(exportW/sw,exportH/sh)*1.1;
|
| 1126 |
-
var nw=sw*scale,nh=sh*scale;
|
| 1127 |
-
offCtx.drawImage(blurCanvas,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
|
| 1128 |
-
offCtx.fillStyle='rgba(0,0,0,0.4)';
|
| 1129 |
-
offCtx.fillRect(0,0,exportW,exportH);
|
| 1130 |
-
var fitScale=Math.min(exportW/sw,exportH/sh);
|
| 1131 |
-
var fw=sw*fitScale,fh=sh*fitScale;
|
| 1132 |
-
offCtx.drawImage(frameCanvas,(exportW-fw)/2,(exportH-fh)/2,fw,fh);
|
| 1133 |
-
}}else if(fillMode==='fill'){{
|
| 1134 |
-
var scale=Math.max(exportW/sw,exportH/sh);
|
| 1135 |
-
var nw=sw*scale,nh=sh*scale;
|
| 1136 |
-
offCtx.drawImage(el,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
|
| 1137 |
-
}}else{{
|
| 1138 |
-
// fit
|
| 1139 |
-
var scale=Math.min(exportW/sw,exportH/sh);
|
| 1140 |
-
var nw=sw*scale,nh=sh*scale;
|
| 1141 |
-
offCtx.drawImage(el,(exportW-nw)/2,(exportH-nh)/2,nw,nh);
|
| 1142 |
-
}}
|
| 1143 |
-
}}catch(e){{console.error('Draw error:',e)}}
|
| 1144 |
-
}}
|
| 1145 |
-
}}
|
| 1146 |
-
|
| 1147 |
-
// 텍스트 오버레이 렌더링 (오프스크린에)
|
| 1148 |
-
var textClips=getTextClipsAt(elapsed);
|
| 1149 |
-
textClips.forEach(function(tc){{
|
| 1150 |
-
drawTextExport(offCtx,tc,exportW,exportH);
|
| 1151 |
-
}});
|
| 1152 |
-
|
| 1153 |
-
// ★ 오프스크린 → 메인 캔버스로 한번에 복사 (atomic) ★
|
| 1154 |
-
mainCtx.drawImage(offCanvas,0,0);
|
| 1155 |
-
|
| 1156 |
-
requestAnimationFrame(render);
|
| 1157 |
-
}}
|
| 1158 |
-
requestAnimationFrame(render);
|
| 1159 |
-
}});
|
| 1160 |
-
|
| 1161 |
-
// 정리
|
| 1162 |
-
Object.keys(S.els).forEach(function(k){{
|
| 1163 |
-
var el=S.els[k];
|
| 1164 |
-
if(el&&el.pause)el.pause();
|
| 1165 |
-
}});
|
| 1166 |
-
|
| 1167 |
-
if(S.cancelled)return;
|
| 1168 |
-
|
| 1169 |
-
var webmBlob=new Blob(chunks,{{type:'video/webm'}});
|
| 1170 |
-
if(webmBlob.size<1000){{document.getElementById('exportMsg').textContent='녹화 실패';return}}
|
| 1171 |
-
|
| 1172 |
-
document.getElementById('exportBar').style.width='100%';
|
| 1173 |
-
document.getElementById('exportMsg').textContent='완료! ('+Math.round(webmBlob.size/1024/1024*10)/10+'MB, '+S.ratio+') - 아래에서 다운로드';
|
| 1174 |
-
|
| 1175 |
-
var downloadDiv=document.createElement('div');
|
| 1176 |
-
downloadDiv.style.marginTop='10px';
|
| 1177 |
-
var webmLink=document.createElement('a');
|
| 1178 |
-
webmLink.href=URL.createObjectURL(webmBlob);
|
| 1179 |
-
webmLink.download='video_'+S.ratio.replace(':','x')+'_'+Date.now()+'.webm';
|
| 1180 |
-
webmLink.className='btn btn-success';
|
| 1181 |
-
webmLink.textContent='📥 WebM 다운로드';
|
| 1182 |
-
webmLink.style.marginRight='5px';
|
| 1183 |
-
downloadDiv.appendChild(webmLink);
|
| 1184 |
-
|
| 1185 |
-
var copyBtn=document.createElement('button');
|
| 1186 |
-
copyBtn.className='btn btn-secondary';
|
| 1187 |
-
copyBtn.textContent='📋 MP4변환용 복사';
|
| 1188 |
-
copyBtn.onclick=async function(){{
|
| 1189 |
-
document.getElementById('exportMsg').textContent='데이터 준비 중...';
|
| 1190 |
-
var reader=new FileReader();
|
| 1191 |
-
reader.onload=function(){{
|
| 1192 |
-
var base64=reader.result.split(',')[1];
|
| 1193 |
-
navigator.clipboard.writeText(base64).then(function(){{
|
| 1194 |
-
document.getElementById('exportMsg').textContent='복사 완료! 위 입력란에 붙여넣기';
|
| 1195 |
-
alert('복사 완료!\\n\\nGradio의 "WebM 데이터" 입력란에 붙여넣기(Ctrl+V) 후\\n"MP4 변환" 버튼을 클릭하세요.');
|
| 1196 |
-
}}).catch(function(){{
|
| 1197 |
-
prompt('아래 데이터를 복사하세요:', base64.substring(0,100)+'...');
|
| 1198 |
-
}});
|
| 1199 |
-
}};
|
| 1200 |
-
reader.readAsDataURL(webmBlob);
|
| 1201 |
-
}};
|
| 1202 |
-
downloadDiv.appendChild(copyBtn);
|
| 1203 |
-
document.querySelector('.modal-box').appendChild(downloadDiv);
|
| 1204 |
-
}}
|
| 1205 |
-
|
| 1206 |
-
// 내보내기용 텍스트 렌더링
|
| 1207 |
-
function drawTextExport(ctx,clip,dw,dh){{
|
| 1208 |
-
var text=clip.text;
|
| 1209 |
-
var fontSize=Math.round(clip.fontSize*(dw/640))||72;
|
| 1210 |
-
var fontColor=clip.fontColor||'#ffffff';
|
| 1211 |
-
var bgStyle=clip.bgStyle||'none';
|
| 1212 |
-
var bgColor=clip.bgColor||'#000000';
|
| 1213 |
-
var posX=clip.posX!==undefined?clip.posX:0.5;
|
| 1214 |
-
var posY=clip.posY!==undefined?clip.posY:0.85;
|
| 1215 |
-
|
| 1216 |
-
ctx.font='bold '+fontSize+'px -apple-system,BlinkMacSystemFont,sans-serif';
|
| 1217 |
-
ctx.textAlign='center';
|
| 1218 |
-
ctx.textBaseline='middle';
|
| 1219 |
-
|
| 1220 |
-
var metrics=ctx.measureText(text);
|
| 1221 |
-
var textW=metrics.width;
|
| 1222 |
-
var textH=fontSize;
|
| 1223 |
-
var x=dw*posX;
|
| 1224 |
-
var y=dh*posY;
|
| 1225 |
-
|
| 1226 |
-
if(bgStyle!=='none'){{
|
| 1227 |
-
var padding=fontSize*0.3;
|
| 1228 |
-
var bgX=x-textW/2-padding;
|
| 1229 |
-
var bgY=y-textH/2-padding/2;
|
| 1230 |
-
var bgW=textW+padding*2;
|
| 1231 |
-
var bgH=textH+padding;
|
| 1232 |
-
|
| 1233 |
-
ctx.fillStyle=bgColor+'cc';
|
| 1234 |
-
if(bgStyle==='rounded'){{
|
| 1235 |
-
ctx.beginPath();
|
| 1236 |
-
ctx.roundRect(bgX,bgY,bgW,bgH,15);
|
| 1237 |
-
ctx.fill();
|
| 1238 |
-
}}else{{
|
| 1239 |
-
ctx.fillRect(bgX,bgY,bgW,bgH);
|
| 1240 |
-
}}
|
| 1241 |
-
}}
|
| 1242 |
-
|
| 1243 |
-
ctx.fillStyle='rgba(0,0,0,0.5)';
|
| 1244 |
-
ctx.fillText(text,x+3,y+3);
|
| 1245 |
-
|
| 1246 |
-
ctx.fillStyle=fontColor;
|
| 1247 |
-
ctx.fillText(text,x,y);
|
| 1248 |
-
}}
|
| 1249 |
-
|
| 1250 |
-
function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}
|
| 1251 |
-
|
| 1252 |
-
document.addEventListener('keydown',function(e){{
|
| 1253 |
-
if(e.target.tagName==='INPUT')return;
|
| 1254 |
-
if(e.code==='Space'){{e.preventDefault();togglePlay()}}
|
| 1255 |
-
else if(e.code==='Delete'){{e.preventDefault();delClip()}}
|
| 1256 |
-
else if(e.code==='ArrowLeft'){{seek(S.time-0.1)}}
|
| 1257 |
-
else if(e.code==='ArrowRight'){{seek(S.time+0.1)}}
|
| 1258 |
-
}});
|
| 1259 |
-
|
| 1260 |
-
init();
|
| 1261 |
-
renderTL();
|
| 1262 |
-
stat('준비됨');
|
| 1263 |
-
var initData={media_data};
|
| 1264 |
-
if(initData&&initData.length)initData.forEach(function(m){{addMedia(m.name,m.type,m.dataUrl,m.filePath)}});
|
| 1265 |
-
</script>
|
| 1266 |
-
</body>
|
| 1267 |
-
</html>'''
|
| 1268 |
-
|
| 1269 |
-
def process_file(files):
|
| 1270 |
-
"""파일 처리 및 서버에 저장"""
|
| 1271 |
-
global uploaded_files
|
| 1272 |
-
if not files:
|
| 1273 |
-
return []
|
| 1274 |
-
results = []
|
| 1275 |
-
file_list = files if isinstance(files, list) else [files]
|
| 1276 |
-
for f in file_list:
|
| 1277 |
-
if not f:
|
| 1278 |
-
continue
|
| 1279 |
-
path = f.name if hasattr(f, 'name') else f
|
| 1280 |
-
name = os.path.basename(path)
|
| 1281 |
-
ext = name.lower().split('.')[-1]
|
| 1282 |
-
if ext in ['mp4', 'webm', 'mov', 'avi', 'mkv']:
|
| 1283 |
-
t, m = 'video', f'video/{ext}'
|
| 1284 |
-
elif ext in ['jpg', 'jpeg', 'png', 'gif', 'webp']:
|
| 1285 |
-
t, m = 'image', f'image/{ext}'
|
| 1286 |
-
elif ext in ['mp3', 'wav', 'ogg', 'm4a', 'aac']:
|
| 1287 |
-
t, m = 'audio', f'audio/{ext}'
|
| 1288 |
-
else:
|
| 1289 |
-
continue
|
| 1290 |
-
|
| 1291 |
-
# 서버에 파일 복사 (MP4 내보내기용)
|
| 1292 |
-
dst_path = os.path.join(UPLOAD_DIR, f"{int(time.time()*1000)}_{name}")
|
| 1293 |
-
shutil.copy(path, dst_path)
|
| 1294 |
-
uploaded_files[name] = dst_path
|
| 1295 |
-
|
| 1296 |
-
with open(path, 'rb') as fp:
|
| 1297 |
-
d = base64.b64encode(fp.read()).decode()
|
| 1298 |
-
results.append({'name': name, 'type': t, 'dataUrl': f'data:{m};base64,{d}', 'filePath': name})
|
| 1299 |
-
return results
|
| 1300 |
-
|
| 1301 |
-
def make_iframe(data):
|
| 1302 |
-
j = json.dumps(data, ensure_ascii=False)
|
| 1303 |
-
h = get_editor_html(j).replace("'", "'")
|
| 1304 |
-
return f"<iframe srcdoc='{h}' style='width:100%;height:750px;border:none;border-radius:10px'></iframe>"
|
| 1305 |
-
|
| 1306 |
-
def export_mp4(export_json):
|
| 1307 |
-
"""서버 사이드 MP4 내보내기"""
|
| 1308 |
-
global uploaded_files
|
| 1309 |
-
|
| 1310 |
-
if not export_json or len(export_json) < 10:
|
| 1311 |
-
return None
|
| 1312 |
-
|
| 1313 |
-
try:
|
| 1314 |
-
data = json.loads(export_json)
|
| 1315 |
-
clips = data.get('clips', [])
|
| 1316 |
-
|
| 1317 |
-
if not clips:
|
| 1318 |
-
return None
|
| 1319 |
-
|
| 1320 |
-
video_clips = [c for c in clips if c['type'] in ['video', 'image']]
|
| 1321 |
-
if not video_clips:
|
| 1322 |
-
return None
|
| 1323 |
-
|
| 1324 |
-
temp_dir = tempfile.mkdtemp()
|
| 1325 |
-
output_path = os.path.join(temp_dir, f'output_{int(time.time())}.mp4')
|
| 1326 |
-
|
| 1327 |
-
# 단일 클립
|
| 1328 |
-
if len(video_clips) == 1:
|
| 1329 |
-
clip = video_clips[0]
|
| 1330 |
-
file_path = uploaded_files.get(clip['filePath'])
|
| 1331 |
-
|
| 1332 |
-
if not file_path or not os.path.exists(file_path):
|
| 1333 |
-
return None
|
| 1334 |
-
|
| 1335 |
-
duration = clip['te'] - clip['ts']
|
| 1336 |
-
|
| 1337 |
-
if clip['type'] == 'image':
|
| 1338 |
-
cmd = ['ffmpeg', '-y', '-loop', '1', '-i', file_path, '-c:v', 'libx264', '-t', str(duration), '-pix_fmt', 'yuv420p', '-vf', 'scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2', output_path]
|
| 1339 |
-
else:
|
| 1340 |
-
cmd = ['ffmpeg', '-y', '-i', file_path, '-ss', str(clip['ts']), '-t', str(duration), '-c:v', 'libx264', '-preset', 'fast', '-crf', '23', '-c:a', 'aac', '-b:a', '128k', '-vf', 'scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2', '-movflags', '+faststart', output_path]
|
| 1341 |
-
|
| 1342 |
-
subprocess.run(cmd, capture_output=True, timeout=300)
|
| 1343 |
-
|
| 1344 |
-
if os.path.exists(output_path) and os.path.getsize(output_path) > 0:
|
| 1345 |
-
return output_path
|
| 1346 |
-
return None
|
| 1347 |
-
|
| 1348 |
-
# 여러 클립
|
| 1349 |
-
temp_files = []
|
| 1350 |
-
concat_file = os.path.join(temp_dir, 'concat.txt')
|
| 1351 |
-
|
| 1352 |
-
for i, clip in enumerate(sorted(video_clips, key=lambda x: x['start'])):
|
| 1353 |
-
file_path = uploaded_files.get(clip['filePath'])
|
| 1354 |
-
if not file_path or not os.path.exists(file_path):
|
| 1355 |
-
continue
|
| 1356 |
-
|
| 1357 |
-
temp_out = os.path.join(temp_dir, f'temp_{i}.mp4')
|
| 1358 |
-
duration = clip['te'] - clip['ts']
|
| 1359 |
-
|
| 1360 |
-
if clip['type'] == 'image':
|
| 1361 |
-
cmd = ['ffmpeg', '-y', '-loop', '1', '-i', file_path, '-c:v', 'libx264', '-t', str(duration), '-pix_fmt', 'yuv420p', '-r', '30', '-vf', 'scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2', temp_out]
|
| 1362 |
-
else:
|
| 1363 |
-
cmd = ['ffmpeg', '-y', '-i', file_path, '-ss', str(clip['ts']), '-t', str(duration), '-c:v', 'libx264', '-preset', 'fast', '-c:a', 'aac', '-r', '30', '-vf', 'scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2', temp_out]
|
| 1364 |
-
|
| 1365 |
-
subprocess.run(cmd, capture_output=True, timeout=120)
|
| 1366 |
-
if os.path.exists(temp_out):
|
| 1367 |
-
temp_files.append(temp_out)
|
| 1368 |
-
|
| 1369 |
-
if not temp_files:
|
| 1370 |
-
return None
|
| 1371 |
-
|
| 1372 |
-
with open(concat_file, 'w') as f:
|
| 1373 |
-
for tf in temp_files:
|
| 1374 |
-
f.write(f"file '{tf}'\n")
|
| 1375 |
-
|
| 1376 |
-
cmd = ['ffmpeg', '-y', '-f', 'concat', '-safe', '0', '-i', concat_file, '-c:v', 'libx264', '-preset', 'fast', '-c:a', 'aac', '-movflags', '+faststart', output_path]
|
| 1377 |
-
subprocess.run(cmd, capture_output=True, timeout=300)
|
| 1378 |
-
|
| 1379 |
-
for tf in temp_files:
|
| 1380 |
-
try: os.remove(tf)
|
| 1381 |
-
except: pass
|
| 1382 |
-
|
| 1383 |
-
if os.path.exists(output_path) and os.path.getsize(output_path) > 0:
|
| 1384 |
-
return output_path
|
| 1385 |
-
return None
|
| 1386 |
-
|
| 1387 |
-
except Exception as e:
|
| 1388 |
-
print(f"[Export] Error: {e}")
|
| 1389 |
-
return None
|
| 1390 |
-
|
| 1391 |
-
def convert_webm_to_mp4(webm_base64):
|
| 1392 |
-
"""WebM base64 데이터를 MP4로 변환"""
|
| 1393 |
-
if not webm_base64 or len(webm_base64) < 100:
|
| 1394 |
-
return None
|
| 1395 |
-
|
| 1396 |
-
try:
|
| 1397 |
-
# base64 디코딩
|
| 1398 |
-
webm_data = base64.b64decode(webm_base64)
|
| 1399 |
-
|
| 1400 |
-
temp_dir = tempfile.mkdtemp()
|
| 1401 |
-
webm_path = os.path.join(temp_dir, 'input.webm')
|
| 1402 |
-
mp4_path = os.path.join(temp_dir, f'output_{int(time.time())}.mp4')
|
| 1403 |
-
|
| 1404 |
-
# WebM 파일 저장
|
| 1405 |
-
with open(webm_path, 'wb') as f:
|
| 1406 |
-
f.write(webm_data)
|
| 1407 |
-
|
| 1408 |
-
# FFmpeg로 MP4 변환
|
| 1409 |
-
cmd = [
|
| 1410 |
-
'ffmpeg', '-y',
|
| 1411 |
-
'-i', webm_path,
|
| 1412 |
-
'-c:v', 'libx264',
|
| 1413 |
-
'-preset', 'fast',
|
| 1414 |
-
'-crf', '23',
|
| 1415 |
-
'-c:a', 'aac',
|
| 1416 |
-
'-b:a', '128k',
|
| 1417 |
-
'-movflags', '+faststart',
|
| 1418 |
-
mp4_path
|
| 1419 |
-
]
|
| 1420 |
-
|
| 1421 |
-
result = subprocess.run(cmd, capture_output=True, text=True, timeout=300)
|
| 1422 |
-
|
| 1423 |
-
# WebM 파일 삭제
|
| 1424 |
-
try:
|
| 1425 |
-
os.remove(webm_path)
|
| 1426 |
-
except:
|
| 1427 |
-
pass
|
| 1428 |
-
|
| 1429 |
-
if os.path.exists(mp4_path) and os.path.getsize(mp4_path) > 0:
|
| 1430 |
-
return mp4_path
|
| 1431 |
-
|
| 1432 |
-
return None
|
| 1433 |
-
|
| 1434 |
-
except Exception as e:
|
| 1435 |
-
print(f"[Convert] Error: {e}")
|
| 1436 |
-
return None
|
| 1437 |
-
|
| 1438 |
-
with gr.Blocks() as demo:
|
| 1439 |
-
gr.Markdown("## 🎬 Video Editor (블러 수정)")
|
| 1440 |
-
|
| 1441 |
-
f = gr.File(label="📁 파일 업로드", file_count="multiple", file_types=["video", "image", "audio"])
|
| 1442 |
-
e = gr.HTML(value=make_iframe([]))
|
| 1443 |
-
|
| 1444 |
-
gr.Markdown("---")
|
| 1445 |
-
gr.Markdown("### 📥 MP4 변환")
|
| 1446 |
-
gr.Markdown("에디터에서 '내보내기' → 'MP4변환용 복사' 클릭 후 아래에 붙여넣기")
|
| 1447 |
-
|
| 1448 |
-
with gr.Row():
|
| 1449 |
-
webm_data = gr.Textbox(label="WebM 데이터 (base64)", placeholder="여기에 붙여넣기 (Ctrl+V)", lines=2, scale=4)
|
| 1450 |
-
convert_btn = gr.Button("🎬 MP4 변환", variant="primary", scale=1)
|
| 1451 |
-
|
| 1452 |
-
mp4_output = gr.File(label="📥 MP4 다운로드")
|
| 1453 |
-
|
| 1454 |
-
f.change(fn=lambda x: make_iframe(process_file(x)), inputs=[f], outputs=[e])
|
| 1455 |
-
convert_btn.click(fn=convert_webm_to_mp4, inputs=[webm_data], outputs=[mp4_output])
|
| 1456 |
-
|
| 1457 |
-
if __name__ == "__main__":
|
| 1458 |
-
demo.launch()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|