WIP: storage-fix-local-nas work before playlist controls feature
Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
This commit is contained in:
ghassanandClaude Sonnet 4.6 committed
1 parent
6b3ab5b65e
commit
c160242dbc
46 files changed
+5365
-815
No files matched your search
@@ -336,26 +336,81 @@
|
||||
<small>
|
||||
When enabled, uploads go <strong>directly to the NAS</strong> — no permanent local copy is kept.
|
||||
Files are stored at <code>users/{username}/videos/{title-slug}/</code> on the NAS share.
|
||||
Thumbnails and video are fetched from NAS on demand for streaming and playback.
|
||||
When disabled, files are stored in local storage using the same directory schema.
|
||||
Requires the NAS connection to be configured under
|
||||
<a href="{{ route('admin.nas-storage') }}" style="color:var(--brand)">NAS Storage</a>.
|
||||
When disabled, all files are served from local disk using the same directory schema.
|
||||
<strong>Disabling NAS will prompt you to migrate files or start fresh.</strong>
|
||||
</small>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<label class="toggle-wrap">
|
||||
<div class="toggle-switch">
|
||||
<input type="checkbox" id="nasSyncInput" name="nas_sync_enabled_check"
|
||||
{{ $settings['nas_sync_enabled'] === 'true' ? 'checked' : '' }}>
|
||||
<div class="toggle-track"></div>
|
||||
<div class="toggle-thumb"></div>
|
||||
</div>
|
||||
<span class="toggle-label" id="nasSyncLabel">
|
||||
{{ $settings['nas_sync_enabled'] === 'true' ? 'Enabled' : 'Disabled' }}
|
||||
</span>
|
||||
</label>
|
||||
<input type="hidden" name="nas_sync_enabled" id="nasSyncHidden"
|
||||
value="{{ $settings['nas_sync_enabled'] }}">
|
||||
@if($settings['nas_sync_enabled'] === 'true')
|
||||
<button type="button" class="adm-btn adm-btn-danger" onclick="openNasDisableModal()">
|
||||
<i class="bi bi-hdd-network"></i> Disable NAS
|
||||
</button>
|
||||
@else
|
||||
<span style="font-size:13px;color:var(--text-2);">NAS is disabled. Enable it under <a href="{{ route('admin.nas-storage') }}" style="color:var(--brand)">NAS Storage</a>.</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($settings['nas_sync_enabled'] === 'true')
|
||||
<div class="setting-row" style="border-top:1px solid var(--border-color);padding-top:18px;">
|
||||
<div class="setting-label">
|
||||
<strong>Repair stuck files</strong>
|
||||
<small>
|
||||
Scans for files that were saved locally but never reached the NAS (e.g. due to a
|
||||
connection error during upload or edit). Uploads them to the NAS, then removes the
|
||||
local copies. Safe to run at any time — nothing is deleted until the NAS confirms receipt.
|
||||
</small>
|
||||
</div>
|
||||
<div class="setting-control" style="gap:10px;align-items:flex-start;">
|
||||
<button type="button" id="nasRepairScanBtn" class="adm-btn" style="white-space:nowrap;">
|
||||
<i class="bi bi-search" id="nasRepairScanIcon"></i> Scan
|
||||
</button>
|
||||
<button type="button" id="nasRepairFixBtn" class="adm-btn adm-btn-primary" style="white-space:nowrap;display:none;">
|
||||
<i class="bi bi-arrow-repeat" id="nasRepairFixIcon"></i> Fix All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="nasRepairResult" style="padding:0 22px 18px;display:none;">
|
||||
<div id="nasRepairResultInner"></div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Backup & Restore ──────────────────────────────────────────────────────── --}}
|
||||
<div class="settings-section">
|
||||
<div class="settings-section-header">
|
||||
<i class="bi bi-archive"></i>
|
||||
Backup & Restore
|
||||
</div>
|
||||
<div class="settings-section-body">
|
||||
|
||||
<div class="setting-row" style="padding-top:0;">
|
||||
<div class="setting-label">
|
||||
<strong>Export users & settings</strong>
|
||||
<small>Downloads a JSON file containing all user accounts and system settings. Does not include media files.</small>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<a href="{{ route('admin.backup.users-settings') }}" class="adm-btn">
|
||||
<i class="bi bi-download"></i> Download Backup
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<div class="setting-label">
|
||||
<strong>Restore users & settings</strong>
|
||||
<small>Upload a previously exported backup JSON. Existing users are matched by email and updated; new users are created. Settings are merged.</small>
|
||||
</div>
|
||||
<div class="setting-control">
|
||||
<form method="POST" action="{{ route('admin.backup.restore') }}" enctype="multipart/form-data" id="restoreForm">
|
||||
@csrf
|
||||
<input type="file" name="backup" id="restoreFile" accept=".json" style="display:none" onchange="document.getElementById('restoreForm').submit()">
|
||||
<button type="button" class="adm-btn" onclick="document.getElementById('restoreFile').click()">
|
||||
<i class="bi bi-upload"></i> Upload & Restore
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -392,15 +447,6 @@ function selectEncoder(el) {
|
||||
document.getElementById('gpuPresetSelect').value = isCpu ? 'fast' : 'p4';
|
||||
}
|
||||
|
||||
// ── NAS sync toggle ───────────────────────────────────────────
|
||||
const nasToggle = document.getElementById('nasSyncInput');
|
||||
const nasHidden = document.getElementById('nasSyncHidden');
|
||||
const nasLabel = document.getElementById('nasSyncLabel');
|
||||
nasToggle.addEventListener('change', () => {
|
||||
nasHidden.value = nasToggle.checked ? 'true' : 'false';
|
||||
nasLabel.textContent = nasToggle.checked ? 'Enabled' : 'Disabled';
|
||||
});
|
||||
|
||||
// ── GPU toggle ────────────────────────────────────────────────
|
||||
const gpuToggle = document.getElementById('gpuEnabledInput');
|
||||
const gpuHidden = document.getElementById('gpuEnabledHidden');
|
||||
@@ -476,9 +522,271 @@ function buildGpuCards(gpus, selectedDevice) {
|
||||
function escHtml(s) {
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
// ── NAS Repair ────────────────────────────────────────────────
|
||||
(function () {
|
||||
const scanBtn = document.getElementById('nasRepairScanBtn');
|
||||
const fixBtn = document.getElementById('nasRepairFixBtn');
|
||||
const resultEl = document.getElementById('nasRepairResult');
|
||||
const inner = document.getElementById('nasRepairResultInner');
|
||||
const scanIcon = document.getElementById('nasRepairScanIcon');
|
||||
const fixIcon = document.getElementById('nasRepairFixIcon');
|
||||
if (! scanBtn) return;
|
||||
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||||
let stuckCount = 0;
|
||||
|
||||
function showResult(html, type = 'info') {
|
||||
const colours = { success: '#22c55e', warning: '#f59e0b', danger: '#ef4444', info: 'var(--text-secondary)' };
|
||||
inner.innerHTML = `<div style="font-size:13px;color:${colours[type] ?? colours.info};padding:12px 0;">${html}</div>`;
|
||||
resultEl.style.display = 'block';
|
||||
}
|
||||
|
||||
scanBtn.addEventListener('click', async function () {
|
||||
scanBtn.disabled = true;
|
||||
fixBtn.style.display = 'none';
|
||||
scanIcon.className = 'bi bi-arrow-repeat spin';
|
||||
showResult('Scanning…', 'info');
|
||||
|
||||
try {
|
||||
const res = await fetch('{{ url("/admin/nas-repair") }}?scan=1', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
|
||||
body: JSON.stringify({ scan_only: true }),
|
||||
});
|
||||
const data = await res.json();
|
||||
stuckCount = data.stuck ?? 0;
|
||||
|
||||
if (stuckCount === 0) {
|
||||
showResult('✅ All clear — no stuck local files found.', 'success');
|
||||
} else {
|
||||
let html = `<strong style="color:var(--brand);">⚠ ${stuckCount} video(s) have files stuck locally.</strong>`;
|
||||
if (data.details && data.details.length) {
|
||||
html += `<ul style="margin:8px 0 0;padding-left:18px;">` +
|
||||
data.details.map(d => `<li>${escHtml(d)}</li>`).join('') + `</ul>`;
|
||||
}
|
||||
html += `<p style="margin-top:10px;color:var(--text-secondary);font-size:12px;">Click <strong>Fix All</strong> to upload them to the NAS and remove local copies.</p>`;
|
||||
showResult(html, 'warning');
|
||||
fixBtn.style.display = '';
|
||||
}
|
||||
} catch (e) {
|
||||
showResult('❌ Scan failed: ' + escHtml(e.message), 'danger');
|
||||
}
|
||||
|
||||
scanIcon.className = 'bi bi-search';
|
||||
scanBtn.disabled = false;
|
||||
});
|
||||
|
||||
fixBtn.addEventListener('click', async function () {
|
||||
if (! confirm(`Upload ${stuckCount} stuck file(s) to NAS and remove local copies?`)) return;
|
||||
fixBtn.disabled = true;
|
||||
scanBtn.disabled = true;
|
||||
fixIcon.className = 'bi bi-arrow-repeat spin';
|
||||
showResult('Uploading to NAS…', 'info');
|
||||
|
||||
try {
|
||||
const res = await fetch('{{ url("/admin/nas-repair") }}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
|
||||
});
|
||||
const data = await res.json();
|
||||
const type = data.failed > 0 ? 'warning' : 'success';
|
||||
let html = `${data.success ? '✅' : '⚠️'} ${escHtml(data.message)}`;
|
||||
if (data.details && data.details.length) {
|
||||
html += `<ul style="margin:8px 0 0;padding-left:18px;">` +
|
||||
data.details.map(d => `<li>${escHtml(d)}</li>`).join('') + `</ul>`;
|
||||
}
|
||||
showResult(html, type);
|
||||
fixBtn.style.display = 'none';
|
||||
} catch (e) {
|
||||
showResult('❌ Repair failed: ' + escHtml(e.message), 'danger');
|
||||
}
|
||||
|
||||
fixIcon.className = 'bi bi-arrow-repeat';
|
||||
fixBtn.disabled = false;
|
||||
scanBtn.disabled = false;
|
||||
});
|
||||
})();
|
||||
|
||||
// ── NAS Disable Modal ────────────────────────────────────────
|
||||
let _nasOpt = null;
|
||||
let _nasPollTimer = null;
|
||||
|
||||
function openNasDisableModal() {
|
||||
_nasOpt = null;
|
||||
document.getElementById('nasDisableModal').style.display = 'flex';
|
||||
document.getElementById('nasDisableStep1').style.display = 'block';
|
||||
document.getElementById('nasDisableStep2Migrate').style.display = 'none';
|
||||
document.getElementById('nasDisableStep2Fresh').style.display = 'none';
|
||||
document.getElementById('nasDisableNextBtn').disabled = true;
|
||||
['optMigrate','optFresh'].forEach(id => {
|
||||
document.getElementById(id).style.borderColor = 'var(--border)';
|
||||
});
|
||||
}
|
||||
|
||||
function closeNasDisableModal() {
|
||||
if (_nasPollTimer) clearInterval(_nasPollTimer);
|
||||
document.getElementById('nasDisableModal').style.display = 'none';
|
||||
}
|
||||
|
||||
function selectNasOpt(opt) {
|
||||
_nasOpt = opt;
|
||||
document.getElementById('optMigrate').style.borderColor = opt === 'migrate' ? 'var(--brand)' : 'var(--border)';
|
||||
document.getElementById('optFresh').style.borderColor = opt === 'fresh' ? '#e74c3c' : 'var(--border)';
|
||||
document.getElementById('nasDisableNextBtn').disabled = false;
|
||||
}
|
||||
|
||||
function nasDisableNext() {
|
||||
document.getElementById('nasDisableStep1').style.display = 'none';
|
||||
if (_nasOpt === 'migrate') {
|
||||
document.getElementById('nasDisableStep2Migrate').style.display = 'block';
|
||||
nasStartMigration();
|
||||
} else {
|
||||
document.getElementById('nasDisableStep2Fresh').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
async function nasStartMigration() {
|
||||
try {
|
||||
await fetch('{{ route("admin.nas.disable") }}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
|
||||
body: JSON.stringify({ mode: 'migrate' }),
|
||||
});
|
||||
} catch(e) {
|
||||
document.getElementById('nasDisableError').textContent = 'Failed to start migration: ' + e.message;
|
||||
document.getElementById('nasDisableError').style.display = 'block';
|
||||
return;
|
||||
}
|
||||
_nasPollTimer = setInterval(nasPollProgress, 2000);
|
||||
}
|
||||
|
||||
async function nasPollProgress() {
|
||||
try {
|
||||
const r = await fetch('{{ route("admin.nas.migrate-progress") }}');
|
||||
const d = await r.json();
|
||||
const pct = d.total > 0 ? Math.round((d.current / d.total) * 100) : 0;
|
||||
document.getElementById('nasDisableBar').style.width = pct + '%';
|
||||
document.getElementById('nasDisableCount').textContent = d.current + ' / ' + d.total;
|
||||
document.getElementById('nasDisablePhase').textContent = d.phase || '';
|
||||
if (d.error) {
|
||||
clearInterval(_nasPollTimer);
|
||||
document.getElementById('nasDisableError').textContent = 'Error: ' + d.error;
|
||||
document.getElementById('nasDisableError').style.display = 'block';
|
||||
}
|
||||
if (d.done) {
|
||||
clearInterval(_nasPollTimer);
|
||||
document.getElementById('nasDisableBar').style.width = '100%';
|
||||
document.getElementById('nasDisableCount').textContent = d.total + ' / ' + d.total;
|
||||
document.getElementById('nasDisableDone').style.display = 'block';
|
||||
}
|
||||
} catch(e) { /* network blip, keep polling */ }
|
||||
}
|
||||
|
||||
async function nasDisableFreshConfirm() {
|
||||
const val = document.getElementById('nasDeleteConfirmInput').value.trim();
|
||||
const errEl = document.getElementById('nasDeleteConfirmError');
|
||||
if (val !== 'DELETE') {
|
||||
errEl.textContent = 'Type DELETE (all caps) to confirm.';
|
||||
errEl.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
errEl.style.display = 'none';
|
||||
try {
|
||||
const r = await fetch('{{ route("admin.nas.disable") }}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
|
||||
body: JSON.stringify({ mode: 'fresh' }),
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.ok) {
|
||||
closeNasDisableModal();
|
||||
location.reload();
|
||||
} else {
|
||||
errEl.textContent = d.message || 'An error occurred.';
|
||||
errEl.style.display = 'block';
|
||||
}
|
||||
} catch(e) {
|
||||
errEl.textContent = 'Failed: ' + e.message;
|
||||
errEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.spin { display: inline-block; animation: spin .6s linear infinite; }
|
||||
.adm-input {
|
||||
background: var(--bg-input, #1e1e1e);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
outline: none;
|
||||
}
|
||||
.adm-input:focus { border-color: var(--brand); }
|
||||
</style>
|
||||
|
||||
{{-- ── NAS Disable Modal ─────────────────────────────────────── --}}
|
||||
<div id="nasDisableModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);align-items:center;justify-content:center;">
|
||||
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:min(520px,94vw);padding:28px;max-height:90vh;overflow-y:auto;">
|
||||
|
||||
{{-- Step 1: Choose action --}}
|
||||
<div id="nasDisableStep1">
|
||||
<h3 style="margin:0 0 8px;font-size:17px;">Disable NAS Storage</h3>
|
||||
<p style="margin:0 0 20px;font-size:13px;color:var(--text-2);">All your files currently live on the NAS. Choose what to do before disabling:</p>
|
||||
|
||||
<div style="display:grid;gap:12px;margin-bottom:24px;">
|
||||
<div id="optMigrate" onclick="selectNasOpt('migrate')" style="border:2px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;transition:border-color .15s;">
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
|
||||
<i class="bi bi-arrow-down-circle" style="color:var(--brand);font-size:18px;"></i>
|
||||
<strong style="font-size:14px;">Copy all files to local disk</strong>
|
||||
</div>
|
||||
<p style="margin:0;font-size:12px;color:var(--text-2);">Downloads every video, thumbnail, avatar, and banner from the NAS to <code>storage/app/users/…</code>. Same directory structure — everything keeps working. May take a while.</p>
|
||||
</div>
|
||||
<div id="optFresh" onclick="selectNasOpt('fresh')" style="border:2px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;transition:border-color .15s;">
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
|
||||
<i class="bi bi-trash3" style="color:#e74c3c;font-size:18px;"></i>
|
||||
<strong style="font-size:14px;color:#e74c3c;">Delete all media, start fresh</strong>
|
||||
</div>
|
||||
<p style="margin:0;font-size:12px;color:var(--text-2);">Removes all videos, thumbnails, playlists, comments, and posts. <strong>User accounts are kept.</strong> Nothing is downloaded.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:10px;justify-content:flex-end;">
|
||||
<button type="button" class="adm-btn" onclick="closeNasDisableModal()">Cancel</button>
|
||||
<button type="button" id="nasDisableNextBtn" class="adm-btn adm-btn-danger" disabled onclick="nasDisableNext()">Continue →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Step 2a: Migration progress --}}
|
||||
<div id="nasDisableStep2Migrate" style="display:none;">
|
||||
<h3 style="margin:0 0 8px;font-size:17px;">Migrating files to local disk…</h3>
|
||||
<p id="nasDisablePhase" style="margin:0 0 16px;font-size:13px;color:var(--text-2);">Starting…</p>
|
||||
<div style="background:var(--border);border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden;">
|
||||
<div id="nasDisableBar" style="height:100%;background:var(--brand);border-radius:4px;width:0%;transition:width .3s;"></div>
|
||||
</div>
|
||||
<div id="nasDisableCount" style="font-size:12px;color:var(--text-2);margin-bottom:20px;">0 / 0</div>
|
||||
<div id="nasDisableDone" style="display:none;">
|
||||
<div style="color:#27ae60;font-size:13px;margin-bottom:16px;"><i class="bi bi-check-circle-fill"></i> Migration complete! NAS has been disabled. Reload the page to continue.</div>
|
||||
<button type="button" class="adm-btn adm-btn-primary" onclick="location.reload()">Reload Page</button>
|
||||
</div>
|
||||
<div id="nasDisableError" style="display:none;color:#e74c3c;font-size:13px;margin-bottom:16px;"></div>
|
||||
</div>
|
||||
|
||||
{{-- Step 2b: Fresh start confirmation --}}
|
||||
<div id="nasDisableStep2Fresh" style="display:none;">
|
||||
<h3 style="margin:0 0 8px;font-size:17px;color:#e74c3c;">Delete all media?</h3>
|
||||
<p style="margin:0 0 16px;font-size:13px;color:var(--text-2);">This will permanently delete all videos, playlists, comments, and posts. User accounts will remain. <strong>This cannot be undone.</strong></p>
|
||||
<p style="margin:0 0 8px;font-size:13px;">Type <strong>DELETE</strong> to confirm:</p>
|
||||
<input type="text" id="nasDeleteConfirmInput" placeholder="DELETE" class="adm-input" style="width:100%;margin-bottom:8px;box-sizing:border-box;">
|
||||
<div id="nasDeleteConfirmError" style="display:none;color:#e74c3c;font-size:12px;margin-bottom:12px;"></div>
|
||||
<div style="display:flex;gap:10px;justify-content:flex-end;">
|
||||
<button type="button" class="adm-btn" onclick="closeNasDisableModal()">Cancel</button>
|
||||
<button type="button" class="adm-btn adm-btn-danger" onclick="nasDisableFreshConfirm()">Delete & Disable NAS</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in new issue
Block a user