Files
ohm_streaming/static/js/recommendations.js
T
root 1fe7392063 feat: Complete Sonarr integration with security enhancements
This commit adds comprehensive Sonarr webhook integration and implements
critical security improvements identified in code review.

## Sonarr Integration
- Full webhook support for Grab, Download, Rename, Delete, and Test events
- HMAC SHA256 signature verification for webhook authentication
- Series mapping system (Sonarr TVDB ID → Anime Provider URL)
- 11 new API endpoints for configuration, mappings, search, and downloads
- Comprehensive test suite (31 tests, all passing)
- Complete documentation in docs/SONARR_INTEGRATION.md

## Security Enhancements
- CORS restricted to specific origins (user's IP: 192.168.1.204:3000)
- Path traversal prevention via sanitize_filename() and is_safe_filename()
- Structured logging infrastructure (replaced all print() statements)
- Environment-based configuration with .env support
- Filename sanitization prevents malicious path attacks

## New Features
- Lpayer and Sibnet downloader support
- Kitsu API integration for anime metadata
- Recommendation engine based on download history
- Latest releases endpoint for new anime
- Modular web interface with component-based templates

## Configuration
- Centralized settings via app/config.py with pydantic-settings
- Sonarr config auto-created in config/ directory
- Example configurations provided for easy setup

## Tests
- 31 Sonarr integration tests (23 functionality + 9 security)
- 100+ tests passing in core test files
- Security utilities fully tested

## Documentation
- Updated CLAUDE.md with Sonarr and testing info
- Added IMPROVEMENTS_2024-01-24.md analysis
- Added SONARR_IMPLEMENTATION.md technical summary

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <[email protected]>
Co-Authored-By: Happy <[email protected]>
2026-01-24 21:25:47 +00:00

274 lines
11 KiB
JavaScript

// Recommendations and Latest Releases module
// Load personalized recommendations
async function loadRecommendations() {
const container = document.getElementById('recommendationsList');
const section = document.getElementById('recommendationsSection');
if (!container) return;
try {
container.innerHTML = '<div class="loading-spinner">Analyse de vos téléchargements...</div>';
const response = await fetch(`${API_BASE}/recommendations?limit=12`);
const data = await response.json();
console.log('Recommendations response:', data);
if (data.recommendations && data.recommendations.length > 0) {
container.innerHTML = `<div class="recommendations-carousel">${data.recommendations.map(anime =>
renderRecommendationCard(anime)
).join('')}</div>`;
} else {
container.innerHTML = `
<div class="no-results">
<p>⚠️ Aucune recommandation disponible pour le moment.</p>
<p style="font-size: 12px; margin-top: 10px; color: #888;">
Soit l'API MyAnimeList est inaccessible, soit vous n'avez pas encore de téléchargements.
</p>
<button class="btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>
`;
}
section.style.display = 'block';
} catch (error) {
console.error('Error loading recommendations:', error);
container.innerHTML = `
<div class="no-results">
<p>❌ Erreur lors du chargement des recommandations.</p>
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
<button class="btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>
`;
section.style.display = 'block';
}
}
// Load latest releases
async function loadLatestReleases() {
const container = document.getElementById('releasesList');
const section = document.getElementById('releasesSection');
if (!container) return;
try {
container.innerHTML = '<div class="loading-spinner">Chargement des dernières sorties...</div>';
const response = await fetch(`${API_BASE}/releases/latest?limit=12`);
const data = await response.json();
console.log('Releases response:', data);
if (data.releases && data.releases.length > 0) {
container.innerHTML = `<div class="releases-carousel">${data.releases.map(anime =>
renderReleaseCard(anime)
).join('')}</div>`;
} else {
container.innerHTML = `
<div class="no-results">
<p>⚠️ Aucune sortie disponible pour le moment.</p>
<p style="font-size: 12px; margin-top: 10px; color: #888;">
L'API MyAnimeList pourrait être temporairement inaccessible.
</p>
<button class="btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>
`;
}
section.style.display = 'block';
} catch (error) {
console.error('Error loading releases:', error);
container.innerHTML = `
<div class="no-results">
<p>❌ Erreur lors du chargement des sorties.</p>
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
<button class="btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>
`;
section.style.display = 'block';
}
}
// Load all home content
async function loadHomeContent() {
console.log('🏠 loadHomeContent() called');
const loading = document.getElementById('homeLoading');
const recommendationsSection = document.getElementById('recommendationsSection');
const releasesSection = document.getElementById('releasesSection');
console.log('Elements found:', {
loading: !!loading,
recommendationsSection: !!recommendationsSection,
releasesSection: !!releasesSection
});
if (loading) loading.style.display = 'block';
if (recommendationsSection) recommendationsSection.style.display = 'none';
if (releasesSection) releasesSection.style.display = 'none';
try {
// Load both sections in parallel
console.log('Loading recommendations and releases...');
await Promise.all([
loadRecommendations(),
loadLatestReleases()
]);
console.log('✅ Home content loaded successfully');
// Show sections if they have content
if (recommendationsSection) recommendationsSection.style.display = 'block';
if (releasesSection) releasesSection.style.display = 'block';
} catch (error) {
console.error('❌ Error loading home content:', error);
if (loading) {
loading.innerHTML = 'Erreur lors du chargement. Consultez la console pour plus de détails.';
}
} finally {
if (loading) loading.style.display = 'none';
}
}
// Render recommendation card (horizontal compact)
function renderRecommendationCard(anime) {
const images = anime.images || {};
const imageUrl = images.jpg?.image_url || images.webp?.image_url || '';
const genres = anime.genres || [];
const score = anime.score || 0;
const reason = anime.recommendation_reason || 'Recommandé';
return `
<div class="anime-card-horizontal recommendation-card">
${reason ? `<div class="recommendation-badge">💡 ${escapeHtml(reason)}</div>` : ''}
<div class="anime-card-header">
<div class="anime-card-title">${escapeHtml(anime.title)}</div>
${score > 0 ? `<div class="anime-card-rating">★ ${score.toFixed(1)}</div>` : ''}
</div>
<div class="anime-card-content">
${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="" class="anime-card-image" onerror="this.style.display='none'">` : ''}
<div class="anime-card-info">
<div class="anime-genres">
${genres.slice(0, 3).map(g => `<span class="anime-genre-tag">${escapeHtml(g)}</span>`).join('')}
</div>
<div class="anime-card-meta">
${anime.episodes ? `📺 ${anime.episodes} ep` : ''}
${anime.episodes && anime.status ? ' • ' : ''}
${anime.status ? translateStatus(anime.status) : ''}
</div>
</div>
</div>
${anime.synopsis ? `
<details class="anime-synopsis">
<summary>📖 Synopsis</summary>
<p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
</details>
` : ''}
<div class="anime-card-actions">
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
🔗 MAL
</button>
<button class="btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
📥 Télécharger
</button>
</div>
</div>
`;
}
// Render release card (horizontal compact)
function renderReleaseCard(anime) {
const images = anime.images || {};
const imageUrl = images.jpg?.image_url || images.webp?.image_url || '';
const genres = anime.genres || [];
const score = anime.score || 0;
const releaseType = anime.release_type || 'Nouveau';
return `
<div class="anime-card-horizontal release-card">
<div class="release-badge">🔥 ${escapeHtml(releaseType)}</div>
<div class="anime-card-header">
<div class="anime-card-title">${escapeHtml(anime.title)}</div>
${score > 0 ? `<div class="anime-card-rating">★ ${score.toFixed(1)}</div>` : ''}
</div>
<div class="anime-card-content">
${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="" class="anime-card-image" onerror="this.style.display='none'">` : ''}
<div class="anime-card-info">
<div class="anime-genres">
${genres.slice(0, 3).map(g => `<span class="anime-genre-tag" style="color: #ff6b6b; background: rgba(255,107,107,0.15);">${escapeHtml(g)}</span>`).join('')}
</div>
<div class="anime-card-meta">
${anime.episodes ? `📺 ${anime.episodes} ep` : ''}
${anime.episodes && anime.status ? ' • ' : ''}
${anime.status ? translateStatus(anime.status) : ''}
</div>
</div>
</div>
${anime.synopsis ? `
<details class="anime-synopsis">
<summary>📖 Synopsis</summary>
<p>${escapeHtml(anime.synopsis.substring(0, 150))}${anime.synopsis.length > 150 ? '...' : ''}</p>
</details>
` : ''}
<div class="anime-card-actions">
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
🔗 MAL
</button>
<button class="btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
📥 Télécharger
</button>
</div>
</div>
`;
}
// Get rating color based on score
function getRatingColor(score) {
if (score >= 9) return 'linear-gradient(45deg, #ffd700, #ffed4e)';
if (score >= 8) return 'linear-gradient(45deg, #00ff88, #00d9ff)';
if (score >= 7) return 'linear-gradient(45deg, #00d9ff, #6c5ce7)';
if (score >= 6) return 'linear-gradient(45deg, #ffa500, #ff6b6b)';
return 'linear-gradient(45deg, #666, #888)';
}
// Search anime on providers (redirects to search tab)
function searchAnimeOnProviders(title) {
// Switch to search tab
switchTab('search');
// Fill search input
const searchInput = document.getElementById('searchInput');
if (searchInput) {
searchInput.value = title;
// Trigger search
setTimeout(() => {
if (typeof searchAnime === 'function') {
searchAnime();
}
}, 300);
}
}