feat(app): integrate Jamendo API and enhance UI components
- Added Jamendo API client ID to the environment configuration for music search. - Updated pnpm lock file to include new dependencies for enhanced functionality. - Integrated Plyr library for improved media playback experience. - Refactored ChatHeader, ChatInput, and ChatMessage components to utilize new styles and improve user interaction. - Enhanced CSS styles for path-glass elements to align with the new design system. Made-with: Cursor
This commit is contained in:
Dorian
@@ -2,7 +2,7 @@
|
||||
<Transition name="panel">
|
||||
<aside
|
||||
v-if="panelOpen"
|
||||
class="glass-card overflow-hidden flex flex-col"
|
||||
class="path-glass-card overflow-hidden flex flex-col"
|
||||
:class="isMobile
|
||||
? 'fixed inset-0 z-30'
|
||||
: 'w-80 xl:w-96 shrink-0'"
|
||||
|
||||
@@ -18,10 +18,20 @@
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg backdrop-blur-md transition-colors bg-black/30 text-white/80 hover:bg-black/50"
|
||||
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-20 h-20 rounded-full flex items-center justify-center path-glass-icon hover:scale-105 active:scale-95 transition-all duration-200 z-10"
|
||||
title="Play"
|
||||
@click="onPlay"
|
||||
>
|
||||
<svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7L8 5z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
@@ -49,13 +59,26 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="wavlakeChartUrl" class="rounded-xl overflow-hidden border"
|
||||
:class="isDark ? 'border-white/10' : 'border-black/8'">
|
||||
<h4 class="text-xs font-semibold mb-2 px-3 pt-3"
|
||||
:class="isDark ? 'text-white/50' : 'text-gray-500'">Discover on Wavlake</h4>
|
||||
<iframe
|
||||
:src="wavlakeChartUrl"
|
||||
class="w-full h-[380px] border-0"
|
||||
loading="lazy"
|
||||
title="Wavlake chart"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="text-xs font-semibold mb-2"
|
||||
:class="isDark ? 'text-white/50' : 'text-gray-500'">Listen on</h4>
|
||||
<div class="space-y-2">
|
||||
<a
|
||||
v-if="youtubeSearchUrl"
|
||||
:href="youtubeSearchUrl"
|
||||
v-for="link in listenLinks"
|
||||
:key="link.url"
|
||||
:href="link.url"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="flex items-center justify-between p-3 rounded-xl transition-colors"
|
||||
@@ -64,12 +87,12 @@
|
||||
: 'bg-black/3 hover:bg-black/5'"
|
||||
>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="text-sm">▶️</span>
|
||||
<span class="text-sm">{{ link.icon }}</span>
|
||||
<div>
|
||||
<p class="text-xs font-medium"
|
||||
:class="isDark ? 'text-white/80' : 'text-gray-800'">YouTube (free)</p>
|
||||
<p class="text-[10px]"
|
||||
:class="isDark ? 'text-white/30' : 'text-gray-400'">Search for this song</p>
|
||||
:class="isDark ? 'text-white/80' : 'text-gray-800'">{{ link.name }}</p>
|
||||
<p v-if="link.desc" class="text-[10px]"
|
||||
:class="isDark ? 'text-white/30' : 'text-gray-400'">{{ link.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-4 h-4" :class="isDark ? 'text-white/30' : 'text-gray-400'"
|
||||
@@ -109,14 +132,47 @@ import { ref, computed, onMounted } from 'vue'
|
||||
import type { Song } from '@aiui/core/types/content'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
import { generateSongCoverFallback, fetchMusicCover } from '@/composables/useImageFallback'
|
||||
import { usePlayer } from '@/composables/usePlayer'
|
||||
import { mapToWavlakeGenre } from '@/utils/wavlakeGenres'
|
||||
|
||||
const props = defineProps<{ song: Song }>()
|
||||
const { play } = usePlayer()
|
||||
|
||||
function onPlay() {
|
||||
play(props.song)
|
||||
}
|
||||
defineEmits<{ back: [] }>()
|
||||
|
||||
const { isDark } = useTheme()
|
||||
const coverFailed = ref(false)
|
||||
const fetchedCover = ref<string | null>(null)
|
||||
|
||||
const q = computed(() =>
|
||||
`${props.song.title} ${props.song.artist}`.trim().replace(/\s+/g, '+'),
|
||||
)
|
||||
|
||||
const listenLinks = computed(() => {
|
||||
const links: { name: string; url: string; icon: string; desc?: string }[] = [
|
||||
{ name: 'Internet Archive', url: `https://archive.org/search?query=${q.value}`, icon: '🏛️', desc: 'Free, open archive' },
|
||||
{ name: 'Bandcamp', url: `https://bandcamp.com/search?q=${q.value}`, icon: '📦', desc: 'Artist-first' },
|
||||
{ name: 'SoundCloud', url: `https://soundcloud.com/search?q=${q.value}`, icon: '☁️', desc: 'Indie & remixes' },
|
||||
{ name: 'Wavlake', url: `https://wavlake.com/`, icon: '⚡', desc: 'Lightning, indie discovery' },
|
||||
{ name: 'Odysee', url: `https://odysee.com/$/search?q=${q.value}`, icon: '🔗', desc: 'Decentralized' },
|
||||
{ name: 'Jamendo', url: `https://www.jamendo.com/search?q=${q.value}`, icon: '🎵', desc: 'Royalty-free' },
|
||||
]
|
||||
return links
|
||||
})
|
||||
|
||||
const wavlakeGenre = computed(() =>
|
||||
mapToWavlakeGenre(props.song.genres ?? []),
|
||||
)
|
||||
|
||||
const wavlakeChartUrl = computed(() => {
|
||||
const genre = wavlakeGenre.value
|
||||
if (!genre) return null
|
||||
return `https://embed.wavlake.com/chart?days=21&limit=10&genre=${encodeURIComponent(genre)}`
|
||||
})
|
||||
|
||||
const coverSrc = computed(() => {
|
||||
if (coverFailed.value) return null
|
||||
return props.song.coverUrl || fetchedCover.value
|
||||
@@ -126,11 +182,6 @@ const fallbackCover = computed(() =>
|
||||
generateSongCoverFallback(props.song.title, props.song.artist)
|
||||
)
|
||||
|
||||
const youtubeSearchUrl = computed(() => {
|
||||
const q = `${props.song.title} ${props.song.artist}`.trim()
|
||||
return q ? `https://www.youtube.com/results?search_query=${encodeURIComponent(q)}` : null
|
||||
})
|
||||
|
||||
function formatDuration(sec: number): string {
|
||||
const m = Math.floor(sec / 60)
|
||||
const s = sec % 60
|
||||
@@ -143,6 +194,12 @@ function sourceIcon(type: string): string {
|
||||
youtube: '▶️',
|
||||
'apple-music': '🍎',
|
||||
bandcamp: '📦',
|
||||
soundcloud: '☁️',
|
||||
wavlake: '⚡',
|
||||
internet_archive: '🏛️',
|
||||
jamendo: '🎵',
|
||||
odysee: '🔗',
|
||||
funkwhale: '🐋',
|
||||
}
|
||||
return icons[type] ?? '🎵'
|
||||
}
|
||||
|
||||
@@ -48,8 +48,19 @@
|
||||
class="group flex flex-col items-stretch text-left w-full"
|
||||
@click="$emit('selectSong', song)"
|
||||
>
|
||||
<div class="cover-card flex-1 min-h-0">
|
||||
<div class="cover-card flex-1 min-h-0 relative">
|
||||
<div class="aspect-square relative w-full overflow-hidden rounded-[10px]">
|
||||
<button
|
||||
class="absolute inset-0 flex items-center justify-center z-10 backdrop-blur-sm bg-black/30 opacity-0 group-hover:opacity-100 transition-all duration-200"
|
||||
title="Play"
|
||||
@click.stop="onPlayClick(song)"
|
||||
>
|
||||
<span class="w-16 h-16 rounded-full flex items-center justify-center path-glass-icon">
|
||||
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7L8 5z" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<img
|
||||
v-if="coverSrc(song)"
|
||||
:src="coverSrc(song)!"
|
||||
@@ -103,6 +114,7 @@
|
||||
import { ref, computed, reactive, onMounted, watch } from 'vue'
|
||||
import type { Song } from '@aiui/core/types/content'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
import { usePlayer } from '@/composables/usePlayer'
|
||||
import { generateSongCoverFallback, fetchMusicCover } from '@/composables/useImageFallback'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
@@ -115,6 +127,7 @@ const props = withDefaults(defineProps<{
|
||||
defineEmits<{ selectSong: [song: Song] }>()
|
||||
|
||||
const { isDark } = useTheme()
|
||||
const { play } = usePlayer()
|
||||
const search = ref('')
|
||||
const activeGenre = ref<string | null>(null)
|
||||
const failedCovers = ref<Set<string>>(new Set())
|
||||
@@ -135,6 +148,10 @@ function onCoverError(song: Song) {
|
||||
failedCovers.value = new Set(failedCovers.value)
|
||||
}
|
||||
|
||||
function onPlayClick(song: Song) {
|
||||
play(song)
|
||||
}
|
||||
|
||||
function fetchCoversFor(songs: Song[]) {
|
||||
for (const song of songs) {
|
||||
if (song.coverUrl || fetchedCovers.has(song.id)) continue
|
||||
|
||||
Reference in New Issue
Block a user