ghassan/takeone-youtube-clone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Audio songs: one-folder storage, version-aware download/share, GPU-checked renders

Browse Source 
Storage structure
- All audio tracks (primary + per-language) now live in one folder per song with
  unique lowercase names ({slug}-{lang}-{id}); no more tracks/ subfolder.
- Generated renders (download video + HLS) moved into the song's local-only cache/
  subfolder, separated from source files (never synced to NAS, safe to wipe).
- tracks:reorganize artisan command (dry-run default) consolidates legacy files,
  updates DB paths, and deletes orphans + empty folders.
- CLAUDE.md documents the canonical layout as a global rule (identical local + NAS).

Version-aware download & share
- Download MP3/Video and Share now act on the version being played; ?track={id}
  is carried through share links and auto-selects audio + title + flag + about +
  OG/meta on open.

GPU + visualizer
- Setting::gpuUsable() runs a cached health probe (nvidia-smi + nvenc smoke test,
  256x144) before sending any encode to the GPU; falls back to CPU otherwise.
- Visualizer "Download Video" bakes in equal-width, cover-coloured, translucent
  frequency bars; loop-filter rebuild makes generation ~25x faster.

Image cropper
- result-callback mode + per-song cover-slide cropper in upload/edit (modal + mobile).

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
ghassanandClaude Opus 4.7 committed 2026-05-23 14:03:43 +03:00
1 parent 66fd78c10f
commit a4384113c2
24 files changed
+1738 -258
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/videos/partials/audio-player.blade.php
+73 -63
View File
@@ -14,6 +14,7 @@
'id' => 0,
'language' => $primaryLang,
'label' => $video->language ? strtoupper($video->language) : 'Default',
'name' => $video->language ? ($allLangData[$primaryLang]['name'] ?? strtoupper($video->language)) : 'Default',
'flag' => $primaryFlag,
'stream_url' => $audioUrl,
'title' => $video->title,
@@ -23,6 +24,7 @@
'id' => $t->id,
'language' => $t->language,
'label' => $t->label,
'name' => $allLangData[$t->language]['name'] ?? strtoupper($t->language),
'flag' => $allLangData[$t->language]['flag'] ?? null,
'stream_url' => route('videos.audio-track', ['video' => $video, 'track' => $t->id]) . '?v=' . $t->updated_at->timestamp,
'title' => $t->title ?? '',
@@ -123,12 +125,13 @@
data-lang-id="{{ $track['id'] }}"
data-lang-url="{{ $track['stream_url'] }}"
data-lang-label="{{ $track['label'] }}"
data-lang-name="{{ $track['name'] }}"
data-lang-flag="{{ $track['flag'] ?? '' }}"
data-lang-title="{{ $track['title'] ?? '' }}"
data-lang-description="{{ $track['description'] ?? '' }}"
data-lang-dl-url="{{ $track['dl_url'] }}">
<span class="fi fi-{{ $track['flag'] ?: 'xx' }}" style="width:22px;height:16px;border-radius:2px;display:inline-block;flex-shrink:0;"></span>
<span class="ytp-lang-opt-label">{{ $track['label'] }}</span>
<span class="ytp-lang-opt-label">{{ $track['name'] }}</span>
<svg class="ytp-lang-check" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
</div>
@endforeach
@@ -450,6 +453,7 @@ const barsBtn = document.getElementById('ytpBarsBtn');
const animCanvas = document.getElementById('audioAnimCanvas');
const NEXT_URL = @json($nextUrl ?? null);
window._LANG_NAMES = window._LANG_NAMES || @json(collect(\App\Data\Languages::all())->map(fn($l) => $l['name']));
let hideTimer = null;
let isDragging = false;
let userSeeking = false;
@@ -586,6 +590,10 @@ const langBtn = document.getElementById('ytpLangBtn');
const langPopup = document.getElementById('ytpLangPopup');
const langOpts = document.querySelectorAll('.ytp-lang-option');
// Which version is currently playing (0 = primary). Download + Share read this so they
// act on exactly the version the viewer chose.
window._ytpTrackId = 0;
if (langBtn && langPopup) {
langBtn.addEventListener('click', e => {
e.stopPropagation();
@@ -603,6 +611,7 @@ if (langBtn && langPopup) {
const url = opt.dataset.langUrl;
const flag = opt.dataset.langFlag;
if (!url) return;
window._ytpTrackId = parseInt(opt.dataset.langId, 10) || 0;
const relPos = audio.duration ? audio.currentTime / audio.duration : 0;
const wasPlaying = !audio.paused;
const _vol = audio.volume, _muted = audio.muted;
@@ -646,83 +655,79 @@ if (langBtn && langPopup) {
if (dlUrl) document.querySelectorAll('.ytp-mp3-dl-link').forEach(l => { l.href = dlUrl; });
});
});
// Shared / deep links: ?track={id} opens directly on that version so the recipient gets
// the same language end-to-end (audio + title + flag + About description). Deferred to
// DOMContentLoaded because this player partial is included BEFORE the title/description
// elements appear in the page — they must exist before the switch handler can update them.
const _ytpAutoSelectTrack = function () {
const want = new URLSearchParams(window.location.search).get('track');
if (!want || want === '0') return;
const opt = [...langOpts].find(o => o.dataset.langId === String(want));
if (opt && !opt.classList.contains('active')) opt.click();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', _ytpAutoSelectTrack);
} else {
_ytpAutoSelectTrack();
}
}
// ── Description box updater ──────────────────────────────────
function _rteToHtml(s) {
s = (s || '').trim();
if (!s) return '';
if (/<[a-z][\s\S]*>/i.test(s)) return s; // already sanitized HTML (server-side)
const d = document.createElement('div');
d.textContent = s;
return d.innerHTML.replace(/\n/g, '<br>'); // legacy plain text
}
function _updateDescriptionBox(text) {
text = (text || '').trim();
const SHORT_LEN = 200;
const needsExpand = text.length > SHORT_LEN;
const short = needsExpand ? text.slice(0, SHORT_LEN) + '…' : text;
const html = _rteToHtml(text);
const aboutPanel = document.getElementById('vdb-about');
let shortEl = document.getElementById('vdbDescShort');
const fullEl = document.getElementById('vdbDescFull');
// If the description elements don't exist yet, inject them into vdb-about
if (!shortEl) {
const aboutPanel = document.getElementById('vdb-about');
if (aboutPanel) {
// Remove existing "No description" placeholder if present
const ph = aboutPanel.querySelector('p[style*="text-secondary"]');
if (ph) ph.style.display = 'none';
shortEl = document.createElement('div');
shortEl.id = 'vdbDescShort';
shortEl.className = 'vdb-desc-text';
aboutPanel.appendChild(shortEl);
}
if (!shortEl && aboutPanel) {
const ph = aboutPanel.querySelector('p[style*="text-secondary"]');
if (ph) ph.style.display = 'none';
shortEl = document.createElement('div');
shortEl.id = 'vdbDescShort';
shortEl.className = 'vdb-desc-text vdb-clamp';
aboutPanel.appendChild(shortEl);
}
if (!shortEl) return;
if (!text) {
// Drop the legacy two-element model if a previous build left it behind.
const legacyFull = document.getElementById('vdbDescFull');
if (legacyFull) legacyFull.remove();
let moreBtn = aboutPanel ? aboutPanel.querySelector('.vdb-show-more') : null;
if (!html) {
shortEl.style.display = 'none';
if (fullEl) fullEl.style.display = 'none';
const moreBtn2 = shortEl.nextElementSibling;
if (moreBtn2 && moreBtn2.classList.contains('vdb-show-more')) moreBtn2.style.display = 'none';
if (moreBtn) moreBtn.style.display = 'none';
return;
}
// Always reset to the collapsed view on a language switch
shortEl.textContent = needsExpand ? short : text;
shortEl.style.display = '';
shortEl.classList.add('vdb-clamp');
shortEl.classList.remove('vdb-expanded');
shortEl.innerHTML = html;
// Ensure the full-text element exists when expansion is needed
let full = fullEl;
if (needsExpand && !full) {
full = document.createElement('div');
full.id = 'vdbDescFull';
full.className = 'vdb-desc-text';
full.style.display = 'none';
shortEl.insertAdjacentElement('afterend', full);
}
if (full) {
full.textContent = text;
full.style.display = 'none';
}
// Locate (or create) the show-more button — it is NOT necessarily shortEl's
// direct sibling because #vdbDescFull sits between them, so search the panel.
const aboutPanel = document.getElementById('vdb-about');
let moreBtn = aboutPanel ? aboutPanel.querySelector('.vdb-show-more') : null;
if (needsExpand) {
if (!moreBtn) {
moreBtn = document.createElement('button');
moreBtn.className = 'vdb-show-more';
moreBtn.onclick = function() {
const f = document.getElementById('vdbDescFull');
const collapsed = !f || f.style.display === 'none';
if (f) f.style.display = collapsed ? 'block' : 'none';
shortEl.style.display = collapsed ? 'none' : '';
moreBtn.textContent = collapsed ? 'Show less' : 'Show more';
};
(full || shortEl).insertAdjacentElement('afterend', moreBtn);
}
moreBtn.textContent = 'Show more';
moreBtn.style.display = '';
} else if (moreBtn) {
moreBtn.style.display = 'none';
if (!moreBtn) {
moreBtn = document.createElement('button');
moreBtn.className = 'vdb-show-more';
moreBtn.onclick = function () { if (window.toggleVdbDesc) toggleVdbDesc(moreBtn); };
shortEl.insertAdjacentElement('afterend', moreBtn);
}
moreBtn.textContent = 'Show more';
// Reveal "Show more" only when the content overflows the clamp. Compare the
// natural content height to the clamp's pixel limit (130px, see .vdb-clamp) —
// clientHeight is unreliable right after innerHTML swap / when re-laying out.
const _btn = moreBtn, _el = shortEl;
requestAnimationFrame(function () {
_btn.style.display = (_el.scrollHeight > 138) ? 'block' : 'none';
});
}
// ── Fullscreen ───────────────────────────────────────────────
@@ -1063,6 +1068,10 @@ window._audioPlayerUpdate = function(d) {
: 'width:22px;height:16px;border-radius:2px;display:inline-block;';
return '<span class="fi fi-' + (flag || 'xx') + '" style="' + s + '"></span>';
}
function langName(code) {
if (!code) return 'Default';
return (window._LANG_NAMES && window._LANG_NAMES[String(code).toLowerCase()]) || String(code).toUpperCase();
}
// Build combined track list: primary + deduped extras
var primaryLangNew = d.language || null;
@@ -1116,12 +1125,13 @@ window._audioPlayerUpdate = function(d) {
+ ' data-lang-id="' + t.id + '"'
+ ' data-lang-url="' + t.stream_url + '"'
+ ' data-lang-label="' + t.label + '"'
+ ' data-lang-name="' + langName(t.language) + '"'
+ ' data-lang-flag="' + (t.flag || '') + '"'
+ ' data-lang-title="' + safeTitle + '"'
+ ' data-lang-description="' + safeDesc + '"'
+ ' data-lang-dl-url="' + (t.dl_url || t.stream_url) + '">'
+ flagHtml(t.flag, 'sm')
+ '<span class="ytp-lang-opt-label">' + t.label + '</span>'
+ '<span class="ytp-lang-opt-label">' + langName(t.language) + '</span>'
+ '<svg class="ytp-lang-check" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
+ '</div>';
});
resources/views/videos/partials/description-box.blade.php
+30 -16
View File
@@ -5,11 +5,9 @@
--}}
@php
$isVideoOwner = Auth::check() && Auth::id() === $video->user_id;
$hasDesc = !empty($video->description) || isset($descriptionSlot);
$renderedDescription = \App\Support\HtmlSanitizer::render($video->description ?? '');
$hasDesc = $renderedDescription !== '' || isset($descriptionSlot);
$showBox = $hasDesc || $isVideoOwner;
$fullDescription = $video->description ?? '';
$shortDescription = Str::limit($fullDescription, 200);
$needsExpand = strlen($fullDescription) > 200;
@endphp
@if ($showBox)
<style>
@@ -23,9 +21,17 @@
.vdb-panel { display:none; padding:14px 16px 16px; }
.vdb-panel.active { display:block; }
.vdb-meta { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:10px; display:flex; gap:10px; flex-wrap:wrap; }
.vdb-desc-text { font-size:14px; line-height:1.6; color:var(--text-primary); white-space:pre-wrap; }
.vdb-desc-text p { margin-bottom:8px; }
.vdb-desc-text { font-size:14px; line-height:1.6; color:var(--text-primary); word-break:break-word; }
.vdb-desc-text p { margin:0 0 8px; }
.vdb-desc-text p:last-child { margin-bottom:0; }
.vdb-desc-text h2 { font-size:19px; font-weight:700; margin:6px 0 8px; }
.vdb-desc-text h3 { font-size:16px; font-weight:700; margin:6px 0 6px; }
.vdb-desc-text ul, .vdb-desc-text ol { margin:0 0 8px; padding-left:22px; }
.vdb-desc-text blockquote { margin:0 0 8px; padding-left:12px; border-left:3px solid var(--border-color); color:var(--text-secondary); }
.vdb-desc-text a { color:#3ea6ff; }
.vdb-desc-text a.action-btn { display:inline-flex; margin:4px 6px 4px 0; color:inherit; text-decoration:none; vertical-align:middle; }
.vdb-desc-text.vdb-clamp { max-height:130px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent); }
.vdb-desc-text.vdb-clamp.vdb-expanded { max-height:none; -webkit-mask-image:none; mask-image:none; }
.vdb-show-more { background:none; border:none; color:var(--text-primary); font-weight:700; font-size:13px; cursor:pointer; padding:6px 0 0; }
</style>
@@ -50,12 +56,9 @@
</div>
@if(isset($descriptionSlot))
{!! $descriptionSlot !!}
@elseif($hasDesc)
<div id="vdbDescShort" class="vdb-desc-text">{{ $needsExpand ? $shortDescription : $fullDescription }}</div>
@if($needsExpand)
<div id="vdbDescFull" class="vdb-desc-text" style="display:none;">{{ $fullDescription }}</div>
<button class="vdb-show-more" onclick="toggleVdbDesc(this)">Show more</button>
@endif
@elseif($renderedDescription !== '')
<div id="vdbDescShort" class="vdb-desc-text vdb-clamp">{!! $renderedDescription !!}</div>
<button id="vdbShowMore" class="vdb-show-more" style="display:none;" onclick="toggleVdbDesc(this)">Show more</button>
@else
<p style="font-size:13px;color:var(--text-secondary);margin:0;">No description added.</p>
@endif
@@ -80,10 +83,21 @@ function switchVdbTab(panelId, btn) {
}
}
function toggleVdbDesc(btn) {
const s = document.getElementById('vdbDescShort'), f = document.getElementById('vdbDescFull');
if (!f) return;
if (f.style.display === 'none') { s.style.display='none'; f.style.display='block'; btn.textContent='Show less'; }
else { s.style.display='block'; f.style.display='none'; btn.textContent='Show more'; }
const d = document.getElementById('vdbDescShort');
if (!d) return;
const expanded = d.classList.toggle('vdb-expanded');
btn.textContent = expanded ? 'Show less' : 'Show more';
}
// Reveal "Show more" only when the description overflows the clamp. Compare the
// natural content height to the clamp limit (130px) rather than clientHeight,
// which is unreliable right after a content swap.
function _vdbCheckOverflow() {
const d = document.getElementById('vdbDescShort'), b = document.getElementById('vdbShowMore');
if (!d || !b) return;
if (d.classList.contains('vdb-expanded')) { b.style.display = 'block'; return; }
b.style.display = (d.scrollHeight > 138) ? 'block' : 'none';
}
document.addEventListener('DOMContentLoaded', _vdbCheckOverflow);
window.addEventListener('load', _vdbCheckOverflow);
</script>
@endif