ORGANISATION-KA-INTERNATIONALE/FEDIVERSE-OKI
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Funkwhale integration

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-10-17 21:10:20 +04:00
parent 0319fa20c3
commit 95de788114
6 changed files with 637 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/funkwhale-tracks.css
+216
View File
@@ -0,0 +1,216 @@
/* Styles pour la liste compacte de morceaux Funkwhale */
.funkwhale-container {
background: var(--card-bg);
border-radius: 12px;
border: 1px solid var(--border-color);
box-shadow: var(--card-shadow);
overflow: hidden;
height: 400px;
display: flex;
flex-direction: column;
}
.funkwhale-section {
width: 100%;
min-width: 0;
}
.funkwhale-header {
background: var(--primary-red);
color: white;
padding: 12px 16px;
font-size: 1rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 8px;
}
.funkwhale-header a {
color: white;
text-decoration: none;
transition: opacity 0.2s ease;
}
.funkwhale-header a:hover {
opacity: 0.8;
text-decoration: underline;
}
.funkwhale-tracks-list {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--primary-red) transparent;
}
.funkwhale-tracks-list::-webkit-scrollbar {
width: 6px;
}
.funkwhale-tracks-list::-webkit-scrollbar-track {
background: transparent;
}
.funkwhale-tracks-list::-webkit-scrollbar-thumb {
background-color: var(--primary-red);
border-radius: 3px;
}
.funkwhale-track-item {
display: flex;
padding: 8px 12px;
border-bottom: 1px solid var(--border-color);
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease;
gap: 8px;
}
.funkwhale-track-item:hover {
background: var(--hover-bg);
text-decoration: none;
color: inherit;
}
.funkwhale-track-item:last-child {
border-bottom: none;
}
.funkwhale-track-thumb {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: var(--tag-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
position: relative;
}
.funkwhale-track-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.funkwhale-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.funkwhale-track-item:hover .funkwhale-play-icon {
opacity: 1;
}
.funkwhale-track-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.funkwhale-track-title {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 4px 0;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.funkwhale-track-artist {
font-size: 0.7rem;
color: var(--primary-red);
font-weight: 600;
margin: 0 0 4px 0;
display: flex;
align-items: center;
gap: 4px;
}
.funkwhale-track-artist i {
font-size: 0.65rem;
}
.funkwhale-track-meta {
font-size: 0.65rem;
color: var(--text-secondary);
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.funkwhale-track-meta i {
font-size: 0.6rem;
}
.funkwhale-no-tracks {
text-align: center;
color: var(--text-secondary);
padding: 20px;
font-style: italic;
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.funkwhale-section {
width: 100%;
}
.funkwhale-container {
height: auto;
max-height: 400px;
}
}
@media (max-width: 768px) {
.funkwhale-track-thumb {
width: 65px;
height: 65px;
}
.funkwhale-track-item {
padding: 10px 12px;
gap: 10px;
}
.funkwhale-track-title {
font-size: 0.85rem;
}
.funkwhale-track-artist {
font-size: 0.7rem;
}
.funkwhale-track-meta {
font-size: 0.65rem;
}
.funkwhale-header {
padding: 10px 12px;
font-size: 0.9rem;
}
.funkwhale-play-icon {
font-size: 1.3rem;
}
}
css/grid-layout.css
+117
View File
@@ -0,0 +1,117 @@
/* Layout grid pour Hero, Castopod, Funkwhale, Mastodon et WordPress */
/* Ce fichier surcharge les anciens styles pour le nouveau layout responsive */
/* Force le wrapper parent à être un simple bloc, pas une grille */
.hero-mastodon-wrapper {
display: block !important;
grid-template-columns: none !important;
width: 100%;
padding: 0 20px;
margin-bottom: 30px;
}
/* Le vrai container grid qui contient tous les éléments */
.timeline-wordpress-container {
display: grid !important;
gap: 20px;
margin: 0;
width: 100%;
}
/* Supprime toutes les limitations de largeur sur les anciens containers */
.timeline-container {
max-width: none !important;
width: 100% !important;
justify-self: auto !important;
grid-template-columns: none !important;
display: block !important;
}
/* S'assurer que les sections prennent toute la largeur disponible */
.castopod-section,
.funkwhale-section,
.mastodon-section,
.wordpress-section {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
/* Desktop : 2 éléments par ligne */
@media (min-width: 1200px) {
.timeline-wordpress-container {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Hero prend toute la largeur si présent */
.hero-video-container,
.hero-live-container,
.hero-playlist-container {
grid-column: 1 / -1 !important;
}
/* Centrer Mastodon quand il est seul (HERO_TYPE='none', pas de Castopod ni Funkwhale) */
.timeline-wordpress-container:not(:has(.castopod-section)):not(:has(.funkwhale-section)) {
grid-template-columns: 1fr !important;
justify-items: center !important;
}
.timeline-wordpress-container:not(:has(.castopod-section)):not(:has(.funkwhale-section)) .mastodon-section {
max-width: 800px !important;
width: 100% !important;
}
/* Centrer le dernier élément quand il est seul sur sa ligne (nombre impair d'éléments) */
/* Cas : Castopod + Funkwhale + Mastodon (3 éléments) */
/* Mastodon sera le 3e élément (impair) et doit être centré */
.timeline-wordpress-container:has(.castopod-section):has(.funkwhale-section) .mastodon-section:nth-child(3) {
grid-column: 1 / -1 !important;
max-width: 800px !important;
width: 800px !important;
margin: 0 auto !important;
justify-self: center !important;
}
}
/* Tablette et Mobile : 1 élément par ligne */
@media (max-width: 1199px) {
.timeline-wordpress-container {
grid-template-columns: 1fr !important;
}
.hero-mastodon-wrapper {
padding: 0 15px;
}
/* En mobile, tous les éléments prennent toute la largeur */
.castopod-section,
.funkwhale-section,
.mastodon-section,
.wordpress-section {
width: 100% !important;
max-width: none !important;
}
}
@media (max-width: 768px) {
.hero-mastodon-wrapper {
padding: 0 10px;
}
}
/* Hauteurs fixes pour les containers scrollables */
.castopod-container,
.funkwhale-container,
.mt-container,
.wordpress-container {
height: 400px;
}
@media (max-width: 768px) {
.castopod-container,
.funkwhale-container,
.mt-container,
.wordpress-container {
height: 350px;
}
}
includes/config.default.php
+13
View File
@@ -154,6 +154,19 @@ if (!defined('CASTOPOD_PODCAST_SLUGS')) {
// Nombre d'épisodes à afficher (total, tous podcasts confondus)
if (!defined('CASTOPOD_EPISODES_COUNT')) define('CASTOPOD_EPISODES_COUNT', 5);
// =========================================
// Configuration Funkwhale
// =========================================
// Activer l'affichage des morceaux Funkwhale
if (!defined('FUNKWHALE_ENABLED')) define('FUNKWHALE_ENABLED', false);
// URL de l'instance Funkwhale
if (!defined('FUNKWHALE_URL')) define('FUNKWHALE_URL', 'https://mizik.o-k-i.net');
// Nombre de morceaux à afficher
if (!defined('FUNKWHALE_TRACKS_COUNT')) define('FUNKWHALE_TRACKS_COUNT', 10);
// Tags pour filtrer les vidéos selon les catégories
if (!defined('TAG_SHORT')) define('TAG_SHORT', 'short');
includes/config.local.php.sample
+13
View File
@@ -333,6 +333,19 @@ define('WORDPRESS_ENABLED', false);
// define('CACHE_ENABLED', true);
// define('CACHE_DURATION', 3600); // 1 heure recommandé
// =========================================
// Intégration Funkwhale (Musique)
// =========================================
// Activer/désactiver l'affichage des morceaux Funkwhale
// define('FUNKWHALE_ENABLED', true);
// URL de l'instance Funkwhale
// define('FUNKWHALE_URL', 'https://mizik.o-k-i.net');
// Nombre de morceaux aléatoires à afficher
// define('FUNKWHALE_TRACKS_COUNT', 10);
// =========================================
// Système de dons
// =========================================
includes/config.php
+127
View File
@@ -873,4 +873,131 @@ function getCastopodEpisodes($castopodUrl = null, $podcastSlugs = null, $count =
return $allEpisodes;
}
/**
* Récupère des morceaux aléatoires depuis Funkwhale via l'API
*
* @param string $funkwhaleUrl URL de l'instance Funkwhale
* @param int $count Nombre de morceaux à récupérer
* @return array Liste des morceaux formatés
*/
function getFunkwhaleTracks($funkwhaleUrl = null, $count = null) {
if (!defined('FUNKWHALE_ENABLED') || !FUNKWHALE_ENABLED) {
return [];
}
$funkwhaleUrl = $funkwhaleUrl ?? FUNKWHALE_URL;
$count = $count ?? FUNKWHALE_TRACKS_COUNT;
// Clé de cache - on récupère un grand nombre de morceaux pour le cache
$cacheKey = 'funkwhale_' . md5($funkwhaleUrl);
$cacheFetchSize = 50; // Nombre de morceaux à mettre en cache
// Vérifier le cache
$allTracks = null;
if (defined('CACHE_ENABLED') && CACHE_ENABLED) {
$allTracks = getFromCache($cacheKey);
}
// Si pas de cache, récupérer depuis l'API
if ($allTracks === null) {
try {
// Construire l'URL de l'API avec filtre pour morceaux locaux uniquement
// Le paramètre scope=me récupère uniquement les morceaux de l'instance locale
$apiUrl = rtrim($funkwhaleUrl, '/') . '/api/v1/tracks?ordering=random&page_size=' . $cacheFetchSize . '&scope=all';
// Récupérer les morceaux via cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
$jsonContent = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpCode !== 200 || !$jsonContent) {
return [];
}
// Parser le JSON
$data = json_decode($jsonContent, true);
if (!$data || !isset($data['results'])) {
return [];
}
$allTracks = [];
// Extraire le domaine de l'instance locale pour filtrer
$localDomain = parse_url($funkwhaleUrl, PHP_URL_HOST);
// Parcourir les morceaux et filtrer pour garder uniquement les morceaux locaux
foreach ($data['results'] as $item) {
// Vérifier si le morceau est local en comparant le domaine
// Les morceaux fédérés ont généralement un domaine différent dans leur URL
$isLocal = true;
// Vérifier via l'URL de l'artiste ou de l'album
if (isset($item['artist']['channel'])) {
$artistDomain = parse_url($item['artist']['channel'], PHP_URL_HOST);
if ($artistDomain && $artistDomain !== $localDomain) {
$isLocal = false;
}
}
// Ou vérifier via le champ is_local si disponible
if (isset($item['is_local']) && !$item['is_local']) {
$isLocal = false;
}
// Ne garder que les morceaux locaux
if ($isLocal) {
$track = [
'title' => $item['title'] ?? '',
'artist' => $item['artist']['name'] ?? 'Artiste inconnu',
'album' => $item['album']['title'] ?? '',
'cover' => $item['album']['cover']['urls']['medium_square_crop'] ?? '',
'duration' => $item['uploads'][0]['duration'] ?? 0,
'link' => rtrim($funkwhaleUrl, '/') . '/library/tracks/' . ($item['id'] ?? ''),
'trackId' => $item['id'] ?? 0,
];
// Formater la durée
if ($track['duration']) {
$track['formattedDuration'] = formatDuration($track['duration']);
} else {
$track['formattedDuration'] = '';
}
$allTracks[] = $track;
}
}
// Mettre en cache tous les morceaux locaux
if (defined('CACHE_ENABLED') && CACHE_ENABLED) {
saveToCache($cacheKey, $allTracks);
}
} catch (Exception $e) {
error_log('Erreur lors de la récupération des morceaux Funkwhale: ' . $e->getMessage());
return [];
}
}
// Si pas assez de morceaux, retourner ce qu'on a
if (empty($allTracks)) {
return [];
}
// Sélectionner aléatoirement $count morceaux parmi tous les morceaux en cache
$trackCount = count($allTracks);
if ($trackCount <= $count) {
return $allTracks;
}
// Mélanger et prendre les N premiers
shuffle($allTracks);
return array_slice($allTracks, 0, $count);
}
?>
index.php
+142 -2
View File
@@ -30,6 +30,10 @@ setSecurityHeaders();
<?php if (defined('CASTOPOD_ENABLED') && CASTOPOD_ENABLED): ?>
<link rel="stylesheet" href="css/castopod-podcasts.css?v=<?php echo filemtime('css/castopod-podcasts.css'); ?>">
<?php endif; ?>
<?php if (defined('FUNKWHALE_ENABLED') && FUNKWHALE_ENABLED): ?>
<link rel="stylesheet" href="css/funkwhale-tracks.css?v=<?php echo filemtime('css/funkwhale-tracks.css'); ?>">
<?php endif; ?>
<link rel="stylesheet" href="css/grid-layout.css?v=<?php echo filemtime('css/grid-layout.css'); ?>">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
@@ -104,6 +108,7 @@ setSecurityHeaders();
<?php include 'includes/header.php'; ?>
<!-- Hero and Mastodon container -->
<div class="hero-mastodon-wrapper">
<div class="timeline-wordpress-container">
<!-- Hero Banner -->
<?php include 'includes/hero-section.php'; ?>
@@ -180,8 +185,79 @@ setSecurityHeaders();
</div>
<?php endif; ?>
<!-- Container pour Mastodon et Castopod côte à côte -->
<div style="<?php if(defined('HERO_TYPE') && HERO_TYPE !== 'none'): echo 'grid-column: 1 / -1;'; endif; ?>" class="timeline-container">
<!-- Section Morceaux Funkwhale -->
<?php if (defined('FUNKWHALE_ENABLED') && FUNKWHALE_ENABLED && defined('FUNKWHALE_URL') && !empty(FUNKWHALE_URL)): ?>
<div class="funkwhale-section">
<div class="funkwhale-container">
<div class="funkwhale-header">
<i class="fas fa-music"></i>
Morceaux
<?php if (!empty(FUNKWHALE_URL)): ?>
<a href="<?php echo htmlspecialchars(FUNKWHALE_URL); ?>"
target="_blank"
rel="noopener noreferrer"
title="Visiter <?php echo htmlspecialchars(parse_url(FUNKWHALE_URL, PHP_URL_HOST)); ?>">
<?php echo htmlspecialchars(parse_url(FUNKWHALE_URL, PHP_URL_HOST)); ?>
</a>
<?php endif; ?>
</div>
<div class="funkwhale-tracks-list">
<?php
$funkwhaleTracks = getFunkwhaleTracks();
if (empty($funkwhaleTracks)) {
echo '<div class="funkwhale-no-tracks">Aucun morceau disponible</div>';
} else {
foreach ($funkwhaleTracks as $track):
?>
<a href="<?php echo htmlspecialchars($track['link']); ?>"
class="funkwhale-track-item"
target="_blank"
rel="noopener noreferrer"
title="<?php echo htmlspecialchars($track['title'] . ' - ' . $track['artist']); ?>">
<div class="funkwhale-track-thumb">
<?php if (!empty($track['cover'])): ?>
<img src="<?php echo htmlspecialchars($track['cover']); ?>"
alt="<?php echo htmlspecialchars($track['album']); ?>"
loading="lazy">
<div class="funkwhale-play-icon">
<i class="fas fa-play-circle"></i>
</div>
<?php else: ?>
<i class="fas fa-music"></i>
<?php endif; ?>
</div>
<div class="funkwhale-track-info">
<h3 class="funkwhale-track-title">
<?php echo htmlspecialchars($track['title']); ?>
</h3>
<div class="funkwhale-track-artist">
<i class="fas fa-user"></i> <?php echo htmlspecialchars($track['artist']); ?>
</div>
<div class="funkwhale-track-meta">
<span><i class="fas fa-compact-disc"></i> <?php echo htmlspecialchars($track['album']); ?></span>
<?php if (!empty($track['formattedDuration'])): ?>
<span>•</span>
<span><i class="far fa-clock"></i> <?php echo htmlspecialchars($track['formattedDuration']); ?></span>
<?php endif; ?>
</div>
</div>
</a>
<?php
endforeach;
}
?>
</div>
</div>
</div>
<?php endif; ?>
<!-- Timeline Mastodon -->
<div class="mastodon-section">
<div id="mt-container" class="mt-container">
<div class="mt-header">
<h2 class="mt-title">Fil d'actualités <i class="fab fa-mastodon"></i></h2>
@@ -191,6 +267,70 @@ setSecurityHeaders();
</div>
</div>
</div>
<!-- Section Articles WordPress -->
<?php if (defined('WORDPRESS_ENABLED') && WORDPRESS_ENABLED && !empty(WORDPRESS_URL)): ?>
<div class="wordpress-section">
<div class="wordpress-container">
<div class="wordpress-header">
<i class="fas fa-newspaper"></i>
Articles <?php if (!empty(WORDPRESS_URL)): ?>
<a href="<?php echo htmlspecialchars(WORDPRESS_URL); ?>"
target="_blank"
rel="noopener noreferrer"
title="Visiter <?php echo htmlspecialchars(parse_url(WORDPRESS_URL, PHP_URL_HOST)); ?>">
<?php echo htmlspecialchars(parse_url(WORDPRESS_URL, PHP_URL_HOST)); ?>
</a>
<?php endif; ?>
</div>
<div class="wordpress-posts-list">
<?php
$wordpressPosts = getWordPressPosts();
if (empty($wordpressPosts)) {
echo '<div class="wordpress-no-posts">Aucun article disponible</div>';
} else {
foreach ($wordpressPosts as $post):
?>
<a href="<?php echo htmlspecialchars($post['link']); ?>"
class="wordpress-post-item"
target="_blank"
rel="noopener noreferrer"
title="<?php echo htmlspecialchars($post['title']); ?>">
<div class="wordpress-post-thumb">
<?php if (!empty($post['featured_image'])): ?>
<img src="<?php echo htmlspecialchars($post['featured_image']); ?>"
alt="<?php echo htmlspecialchars($post['title']); ?>"
loading="lazy">
<?php else: ?>
<i class="fas fa-file-alt"></i>
<?php endif; ?>
</div>
<div class="wordpress-post-info">
<h3 class="wordpress-post-title">
<?php echo htmlspecialchars($post['title']); ?>
</h3>
<div class="wordpress-post-meta">
<span><?php echo htmlspecialchars($post['date']); ?></span>
<?php if (!empty($post['author'])): ?>
<span>•</span>
<span><?php echo htmlspecialchars($post['author']); ?></span>
<?php endif; ?>
</div>
</div>
</a>
<?php
endforeach;
}
?>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>