Language filter chips on the videos feed
Adds one chip per language currently present in public content —
counting both primary language and any secondary audio track, sorted
by video count, capped at 12. Clicking a chip lists every video whose
primary is that language or that has a matching secondary track; cards
surfaced only via a secondary track link straight to /videos/{key}?track=<id>
so the pinned playback wiring loads the right audio, get a small flag
badge on the thumbnail, and their hover-preview streams the track file
instead of the primary.
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
1 parent
8d27520bdb
commit
fcb752dd76
4 files changed
+163
-10
No files matched your search
@@ -34,6 +34,10 @@
|
||||
|
||||
.yt-empty { text-align: center; padding: 80px 20px; }
|
||||
|
||||
/* Language chips */
|
||||
.yt-chip-sep { display:inline-block; width:1px; align-self:stretch; margin:6px 4px; background:var(--border-color); }
|
||||
.yt-chip-lang { display:inline-flex; align-items:center; gap:6px; }
|
||||
.yt-chip-lang .fi { width:18px; height:13px; border-radius:2px; display:inline-block; flex-shrink:0; }
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@@ -57,6 +61,19 @@
|
||||
class="yt-chip {{ $activeFilter === 'playlists' ? 'active' : '' }}">Playlists</a>
|
||||
<a href="{{ route('videos.index', ['filter' => 'latest']) }}"
|
||||
class="yt-chip {{ $activeFilter === 'latest' ? 'active' : '' }}">New to You</a>
|
||||
|
||||
@if(!empty($langChips ?? []))
|
||||
@php $activeLang = str_starts_with($activeFilter, 'lang:') ? substr($activeFilter, 5) : null; @endphp
|
||||
<span class="yt-chip-sep" aria-hidden="true"></span>
|
||||
@foreach($langChips as $chip)
|
||||
<a href="{{ route('videos.index', ['filter' => 'lang:' . $chip['code']]) }}"
|
||||
class="yt-chip yt-chip-lang {{ $activeLang === $chip['code'] ? 'active' : '' }}"
|
||||
title="{{ $chip['name'] }} ({{ $chip['count'] }})">
|
||||
<span class="fi fi-{{ $chip['flag'] }}"></span>
|
||||
<span>{{ $chip['name'] }}</span>
|
||||
</a>
|
||||
@endforeach
|
||||
@endif
|
||||
</div>
|
||||
@endunless
|
||||
|
||||
|
||||
Reference in new issue
Block a user