Updates galore. Improved folder structure, componentized, and notifications upon completion.
This commit is contained in:
parent
b48784e2ad
commit
7e0502ca40
33 changed files with 3565 additions and 728 deletions
|
|
@ -21,6 +21,14 @@
|
|||
<span class="logo-text">Video<strong>Press</strong></span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button
|
||||
id="settings-btn"
|
||||
class="btn-icon"
|
||||
aria-label="Open SMTP email settings"
|
||||
title="Email Settings"
|
||||
>
|
||||
<span aria-hidden="true">⚙</span>
|
||||
</button>
|
||||
<button
|
||||
id="theme-toggle"
|
||||
class="btn-icon"
|
||||
|
|
@ -184,6 +192,48 @@
|
|||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<!-- Notification opt-in -->
|
||||
<div class="notify-group" id="notify-group">
|
||||
<div class="notify-checkbox-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="notify-chk"
|
||||
class="notify-checkbox"
|
||||
aria-describedby="notify-hint"
|
||||
aria-controls="notify-email-row"
|
||||
/>
|
||||
<label for="notify-chk" class="notify-label">
|
||||
Notify me when the compression run is complete.
|
||||
</label>
|
||||
</div>
|
||||
<div class="notify-email-row" id="notify-email-row" hidden>
|
||||
<label for="notify-email" class="field-label notify-email-label">
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="notify-email"
|
||||
class="text-input notify-email-input"
|
||||
placeholder="you@example.com"
|
||||
autocomplete="email"
|
||||
aria-describedby="notify-hint"
|
||||
aria-required="false"
|
||||
maxlength="254"
|
||||
/>
|
||||
<p id="notify-hint" class="field-hint">
|
||||
An email will be sent via your configured SMTP server when all files are processed.
|
||||
Configure SMTP in <button class="btn-link" id="open-settings-from-hint">⚙ Settings</button>.
|
||||
</p>
|
||||
<p id="smtp-not-configured-warn" class="field-hint smtp-warn" hidden>
|
||||
⚠ No SMTP server configured yet.
|
||||
<button class="btn-link" id="open-settings-from-warn">Open ⚙ Settings</button>
|
||||
to set one up before starting compression.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notify-divider" aria-hidden="true"></div>
|
||||
|
||||
<button class="btn btn-primary btn-lg" id="compress-btn" disabled>
|
||||
<span class="btn-icon-prefix" aria-hidden="true">⚡</span>
|
||||
Compress Selected Files
|
||||
|
|
@ -196,8 +246,34 @@
|
|||
<h2 id="progress-heading" class="card-title">
|
||||
<span class="step-badge" aria-hidden="true">03</span>
|
||||
Compression Progress
|
||||
<button
|
||||
class="btn btn-sm btn-outline reconnect-btn"
|
||||
id="reconnect-btn"
|
||||
aria-label="Reconnect to live progress stream"
|
||||
title="Stream disconnected — click to reconnect"
|
||||
hidden
|
||||
>
|
||||
⟳ Reconnect
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<!-- Stream-lost warning banner -->
|
||||
<div
|
||||
id="stream-lost-banner"
|
||||
class="stream-lost-banner"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
hidden
|
||||
>
|
||||
<span class="banner-icon" aria-hidden="true">⚠</span>
|
||||
<span class="banner-text">
|
||||
Live progress stream disconnected — the compression is still running on the server.
|
||||
</span>
|
||||
<button class="btn btn-sm btn-primary" id="reconnect-btn-banner">
|
||||
⟳ Reconnect Now
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="progress-overview" role="region" aria-label="Overall progress">
|
||||
<div class="overview-stats">
|
||||
<div class="stat-chip">
|
||||
|
|
@ -229,6 +305,7 @@
|
|||
<button class="btn btn-danger" id="cancel-btn" aria-label="Cancel all compression operations">
|
||||
✕ Cancel Compression
|
||||
</button>
|
||||
<span id="notify-status" class="notify-status" aria-live="polite" aria-atomic="true" hidden></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -246,6 +323,120 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Settings modal -->
|
||||
<div
|
||||
id="settings-modal"
|
||||
class="modal-backdrop"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="settings-modal-title"
|
||||
hidden
|
||||
>
|
||||
<div class="modal-panel settings-panel">
|
||||
<div class="modal-header">
|
||||
<h3 id="settings-modal-title" class="modal-title">⚙ Email / SMTP Settings</h3>
|
||||
<button class="btn-icon" id="close-settings" aria-label="Close settings">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-body">
|
||||
<p class="settings-intro">
|
||||
Configure your outgoing mail server so VideoPress can send completion
|
||||
notifications. Settings are saved on the server in a local SQLite database.
|
||||
</p>
|
||||
|
||||
<div class="settings-grid">
|
||||
<!-- SMTP Host -->
|
||||
<div class="field-group">
|
||||
<label for="smtp-host" class="field-label">SMTP Server Host</label>
|
||||
<input type="text" id="smtp-host" class="text-input"
|
||||
placeholder="smtp.example.com"
|
||||
autocomplete="off" spellcheck="false" />
|
||||
</div>
|
||||
|
||||
<!-- Port + Security -->
|
||||
<div class="settings-row-2">
|
||||
<div class="field-group">
|
||||
<label for="smtp-port" class="field-label">Port</label>
|
||||
<input type="number" id="smtp-port" class="text-input"
|
||||
value="587" min="1" max="65535" />
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label for="smtp-security" class="field-label">Security</label>
|
||||
<select id="smtp-security" class="text-input select-input">
|
||||
<option value="tls">STARTTLS (587)</option>
|
||||
<option value="ssl">SSL / TLS (465)</option>
|
||||
<option value="none">None (25)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- From address -->
|
||||
<div class="field-group">
|
||||
<label for="smtp-from" class="field-label">From Address</label>
|
||||
<input type="text" id="smtp-from" class="text-input"
|
||||
placeholder="videopress@yourdomain.com"
|
||||
autocomplete="off"
|
||||
spellcheck="false" />
|
||||
</div>
|
||||
|
||||
<!-- Username -->
|
||||
<div class="field-group">
|
||||
<label for="smtp-user" class="field-label">
|
||||
Username
|
||||
<span class="field-unit">(optional)</span>
|
||||
</label>
|
||||
<input type="text" id="smtp-user" class="text-input"
|
||||
placeholder="user@yourdomain.com"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="field-group">
|
||||
<label for="smtp-password" class="field-label">
|
||||
Password
|
||||
<span class="field-unit">(optional)</span>
|
||||
</label>
|
||||
<div class="password-row">
|
||||
<input type="password" id="smtp-password" class="text-input"
|
||||
placeholder="Leave blank to keep existing password"
|
||||
autocomplete="new-password" />
|
||||
<button type="button" class="btn-icon btn-icon-inline"
|
||||
id="toggle-password"
|
||||
aria-label="Show or hide password"
|
||||
title="Show / hide password">👁</button>
|
||||
</div>
|
||||
<p class="field-hint" id="smtp-password-hint"></p>
|
||||
</div>
|
||||
|
||||
<!-- Test recipient -->
|
||||
<div class="field-group settings-divider-above">
|
||||
<label for="smtp-test-to" class="field-label">Send Test Email To</label>
|
||||
<div class="dir-input-row">
|
||||
<input type="text" id="smtp-test-to" class="text-input"
|
||||
placeholder="you@example.com"
|
||||
autocomplete="email"
|
||||
spellcheck="false" />
|
||||
<button class="btn btn-secondary" id="smtp-test-btn">
|
||||
Send Test
|
||||
</button>
|
||||
</div>
|
||||
<p class="field-hint settings-test-result" id="smtp-test-result"
|
||||
aria-live="polite" aria-atomic="true"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" id="settings-cancel">Cancel</button>
|
||||
<button class="btn btn-primary" id="settings-save">Save Settings</button>
|
||||
</div>
|
||||
|
||||
<!-- Save status -->
|
||||
<p class="settings-save-status" id="settings-save-status"
|
||||
aria-live="polite" aria-atomic="true"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="app-footer" role="contentinfo">
|
||||
|
|
@ -255,6 +446,6 @@
|
|||
<!-- Live region for screen reader announcements -->
|
||||
<div id="sr-announce" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
|
||||
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script type="module" src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue