Media Manager

Vue d'ensemble

MediaManager

Système complet de gestion de médias construit avec Livewire et Spatie MediaLibrary. Permet d'uploader, gérer et organiser des fichiers médias de manière flexible et réutilisable.

Fonctionnalités principales

Upload multiple de fichiers
Gestion des collections
Sélection multiple
Recherche et filtres
Médias privés/publics
Interface responsive

Architecture

Structure des fichiers

app/
├── Models/
│   └── TemporaryMedia.php          # Modèle pour les médias temporaires
├── Services/MediaManager/
│   └── MediaHub.php                # Service central (cerveau du système)
└── Livewire/MediaManager/
    ├── Upload.php                   # Composant d'upload
    ├── Viewer.php                   # Composant de visualisation
    ├── Picker.php                   # Composant modal de sélection
    └── Manager.php                  # Composant de composition

resources/views/livewire/media-manager/
├── upload.blade.php
├── viewer.blade.php
├── picker.blade.php
└── manager.blade.php

config/
└── media-manager.php               # Configuration globale

Flux de données

Upload

Fichiers

MediaHub

Service

Viewer

Affichage

Composants

MediaHub (Service)

Le cerveau du système. Gère toute la logique métier pour les médias.

Méthodes principales

  • list($context, $filters, $perPage) - Lister les médias
  • storeUpload($file, $context) - Uploader un fichier
  • delete($mediaId) - Supprimer un média
  • attach($mediaIds, $model, $collection) - Attacher des médias
  • getStats($context) - Obtenir les statistiques

Viewer (Composant Livewire)

Composant principal pour l'affichage et la gestion des médias.

Paramètres de configuration

Interface
  • withSearch - Barre de recherche
  • withFilters - Filtres
  • withActions - Actions
  • withSelection - Sélection
Affichage
  • layout - Layout (grid/list)
  • columns - Nombre de colonnes
  • perPage - Éléments par page

Upload (Composant Livewire)

Composant pour l'upload de fichiers avec drag & drop.

Fonctionnalités

  • • Upload multiple de fichiers
  • • Drag & drop
  • • Validation des types de fichiers
  • • Validation de la taille
  • • Prévisualisation des images
  • • Barre de progression

Utilisation

Utilisation basique

<!-- Utilisation simple avec les valeurs par défaut -->
<livewire:media-manager.viewer />

Utilisation avancée

<!-- Avec paramètres personnalisés -->
<livewire:media-manager.viewer
    :withActions="false"
    :withSelection="false"
    :withSearch="true"
    :withFilters="false"
    layout="list"
    :columns="2"
    :perPage="20"
/>

Dans une page Filament

<!-- resources/views/filament/admin/pages/media-manager.blade.php -->
<div>
    <livewire:media-manager.viewer
        :withActions="true"
        :withSelection="true"
        :withSearch="true"
        :withFilters="true"
        layout="grid"
        :columns="4"
        :perPage="28"
    />
</div>

Mode sélection uniquement

<!-- Pour un formulaire (mode sélection) -->
<livewire:media-manager.viewer
    :withActions="false"
    :withSelection="true"
    :withSearch="true"
    :withFilters="true"
    layout="grid"
    :columns="3"
    :perPage="12"
/>

Configuration

Fichier de configuration

Le fichier config/media-manager.php contient toutes les options de configuration.

<?php
return [
    'per_page' => [
        'default' => env('MEDIA_MANAGER_PER_PAGE', 28),
        'viewer' => env('MEDIA_MANAGER_VIEWER_PER_PAGE', 20),
        'picker' => env('MEDIA_MANAGER_PICKER_PER_PAGE', 20),
    ],

    'layout' => [
        'default' => env('MEDIA_MANAGER_LAYOUT', 'grid'),
        'columns' => env('MEDIA_MANAGER_COLUMNS', 5),
    ],

    'features' => [
        'search' => true,
        'filters' => true,
        'actions' => true,
        'selection' => true,
        'uploader' => true,
        'stats' => true,
    ],

    'upload' => [
        'max_files' => env('MEDIA_MANAGER_MAX_FILES', 10),
        'max_size_mb' => env('MEDIA_MANAGER_MAX_SIZE_MB', 10),
        'allowed_types' => ['image/*', 'video/*', 'audio/*', 'application/pdf'],
    ],
];

Variables d'environnement

  • MEDIA_MANAGER_PER_PAGE - Éléments par page
  • MEDIA_MANAGER_LAYOUT - Layout par défaut
  • MEDIA_MANAGER_COLUMNS - Nombre de colonnes
  • MEDIA_MANAGER_MAX_FILES - Fichiers max par upload
  • MEDIA_MANAGER_MAX_SIZE_MB - Taille max par fichier

Fonctionnalités

  • search - Barre de recherche
  • filters - Filtres avancés
  • actions - Boutons d'action
  • selection - Sélection multiple
  • uploader - Composant d'upload
  • stats - Statistiques

Exemples pratiques

Exemple 1 : Galerie d'images simple

<!-- Galerie d'images en mode grille -->
<livewire:media-manager.viewer
    :withActions="false"
    :withSelection="false"
    :withSearch="true"
    :withFilters="true"
    layout="grid"
    :columns="4"
    :perPage="16"
/>

Exemple 2 : Interface d'administration complète

<!-- Interface complète avec toutes les fonctionnalités -->
<livewire:media-manager.viewer
    :withActions="true"
    :withSelection="true"
    :withSearch="true"
    :withFilters="true"
    layout="grid"
    :columns="5"
    :perPage="20"
/>

Exemple 3 : Sélecteur de médias pour formulaire

<!-- Mode sélection pour formulaire -->
<livewire:media-manager.viewer
    :withActions="false"
    :withSelection="true"
    :withSearch="true"
    :withFilters="true"
    layout="grid"
    :columns="3"
    :perPage="12"
/>

API Reference

MediaHub API

list(array $context, array $filters = [], ?int $perPage = null)

Récupère une liste paginée de médias

Paramètres :
• $context - Contexte (filter, collection, sessionId, deduplicate)
• $filters - Filtres (search, type, min_size, max_size, visibility)
• $perPage - Nombre d'éléments par page
Retour : LengthAwarePaginator

storeUpload(UploadedFile $file, array $context)

Upload un fichier et retourne le média créé

Paramètres :
• $file - Fichier uploadé
• $context - Contexte d'upload
Retour : Media

delete(int $mediaId)

Supprime un média

Paramètres :
• $mediaId - ID du média à supprimer
Retour : bool

attach(array $mediaIds, Model $model, string $collection)

Attache des médias temporaires à un modèle

Paramètres :
• $mediaIds - IDs des médias
• $model - Modèle cible
• $collection - Collection de destination
Retour : int (nombre de médias attachés)

Viewer API

Méthodes publiques

  • selectAll() - Sélectionner tout
  • deselectAll() - Désélectionner tout
  • toggleSelection($id) - Toggle sélection
  • deleteSelected() - Supprimer sélection
  • setLayout($layout) - Changer layout
  • sortBy($field) - Trier par champ

Propriétés publiques

  • $withSearch - Barre de recherche
  • $withFilters - Filtres
  • $withActions - Actions
  • $withSelection - Sélection
  • $layout - Layout actuel
  • $selected - Médias sélectionnés

Dépannage

Problèmes courants

Les paramètres ne sont pas pris en compte

Si vos paramètres withSearch, withActions, etc. ne fonctionnent pas :

  • • Vérifiez que la méthode mount() ne surcharge pas vos valeurs par défaut
  • • Assurez-vous que les paramètres sont passés correctement dans la vue Blade
  • • Vérifiez la configuration dans config/media-manager.php

Erreur "Snapshot missing"

Cette erreur survient avec les composants Livewire imbriqués :

  • • Ajoutez un wire:key unique à chaque composant Livewire
  • • Utilisez wire:key="media-viewer-"

Médias privés non accessibles

Si les médias privés ne s'affichent pas :

  • • Vérifiez que la route /media/{id} est définie
  • • Assurez-vous que le middleware d'authentification est configuré
  • • Vérifiez la propriété visibility des médias

Bonnes pratiques

  • • Utilisez des wire:key uniques pour tous les composants Livewire imbriqués
  • • Testez vos paramètres avec des tests unitaires
  • • Utilisez la configuration globale pour les valeurs par défaut
  • • Surchargez les paramètres au niveau du composant quand nécessaire
  • • Documentez vos configurations personnalisées

Tests recommandés

// Test des paramètres par défaut
it('respects default parameters', function () {
    $viewer = new Viewer();
    $viewer->mount();

    expect($viewer->withSearch)->toBeFalse();
    expect($viewer->withActions)->toBeTrue();
});

// Test de surcharge des paramètres
it('can override parameters', function () {
    $viewer = new Viewer();
    $viewer->mount(withSearch: true, withActions: false);

    expect($viewer->withSearch)->toBeTrue();
    expect($viewer->withActions)->toBeFalse();
});