Country / Dev

Après la petite présentation de Brooser, je vais maintenant expliquer comment réaliser un plugin pour celui-ci. Les plugins sont très simples, il servent juste à afficher l’aperçu d’un type de fichier lors de sa sélection dans le browser.

Pour cet exemple nous aller créer un petit plugin tout simple qui va nous permettre de faire un aperçu des vidéos quicktime (.mov).

Fonctionnement

Ils sont tous stockés dans le dossier

php/plugins

et sont nommés par rapport au type mime du fichier.
Par exemple les images gif ont comme type mime image/gif , le plugin qui gère sont aperçu est donc

php/plugins/image/gif.php

Attention : les types mime sont calculés par rapport à l’extension du fichier (faute d’une solution plus fiable en php actuellement), tous les types mime sont stockés dans le fichier

php/mime_types.ini

. Un fichier dont le type mime est inconnu sera considéré comme un fichier texte (text/plain).

Création du plugin

Pour cela il faut tout d’abord connaître le type mime du fichier concerné par le plugin. Ici aucun problème, il s’agit tout simplement de video/quicktime.
Nous allons donc créer un fichier quicktime.php dans le dossier

php/plugins/video/

Voici le code de base d’un plugin :

<?php
// Code php

// Json
$json = array(
    'style' => '',
    'script' => '',
    'content' => ''
);
?>

Tout d’abord vous avez une partie où vous tapez votre code PHP et où vous faites toutes les manipulations que vous avez à faire.
Ensuite, vous avez un tableau $json qui contiendra les données à renvoyer au visiteur :

• style : le style css récessaire à l’aperçu de ce fichier (optionnel)
• script : le javascript récessaire à l’aperçu de ce fichier (optionnel)
• content : le code HTML à renvoyer et qui sera affiché dans la zone de l’aperçu (requis)

Avec ceci notre plugin fonctionne déjà, mais ne renvoi rien :

Partie PHP

Vous pouvez placer ici tout le code PHP que vous souhaitez. Vous disposez aussi de 2 variables que vous pouvez utiliser pour récupérer des informations sur le fichier :

• $htmlpath

  : le chemin relatif du fichier

• $fullpath

  : le chemin absolu du fichier

Comme notre plugin est assez simple nous n’avons pas de code php à placer dans cette partie.

Partie JSON

Toutes les données à envoyer au client sont stockées dans le tableau $json (qui sera converti en JSON avant d’être envoyé).

Le contenu

Le code HTML à renvoyer au client est celui d’un player quicktime classique :

<?php
// Code php

// Json
$json = array(
    'style' => '',
    'script' => '',
    'content' => '<div class="object">
            <object
            type="video/quicktime"
            data="'.$htmlpath.'"
            width="200"
            height="160"
            >
                <param name="src" value="'.$htmlpath.'" />
                <param name="autoplay" value="false">
                <param name="controller" value="true">
                <param name="loop" value="false">
                <param name="scale" value="aspect">
                <p>The movie require the <a href="http://www.apple.com/quicktime/download/">Quicktime plugin</a></p>
            </object>
        </div>'
);
?>

Vous remarquerez l’utilisation de la variable

extension.png

afin d’indiquer au player le chemin de la vidéo.
A cette étape notre plugin fonctionne déjà bien, reste un effort sur la présentation à faire :

Les styles

Actuellement notre vidéo est collée à gauche, ce qui n’est pas très joli. Nous allons donc ajouter un style sur div.object afin de la centrer :

<?php
// Code php

// Json
$json = array(
    'style' => '
        #brooser-preview .object {
            width:200px;
            margin:1em auto;
        }
    ',
    'script' => '',
    'content' => '<div class="object">
            <object
            type="video/quicktime"
            data="'.$htmlpath.'"
            width="200"
            height="160"
            >
                <param name="src" value="'.$htmlpath.'" />
                <param name="autoplay" value="false">
                <param name="controller" value="true">
                <param name="loop" value="false">
                <param name="scale" value="aspect">
                <p>The movie require the <a href="http://www.apple.com/quicktime/download/">Quicktime plugin</a></p>
            </object>
        </div>'
);
?>

Attention : Afin de limiter vos styles à l’aperçu il est conseillé de les faire précéder de l’ID du conteneur de l’aperçu (#brooser-preview).

Conclusion

Et voila notre plugin est terminé. Simple non ?
Vous pouvez voir le code complet du plugin ici et l’essayer ici (dans l’exemple 2).

Bonus

Dans la liste des fichiers, notre vidéo a toujours l’icône par défaut : . Pour assigner une icône à un type de fichier il vous suffit de mettre un fichier

icons

dans

mov.png

. Dans notre cas on mettra l’icône avec comme nom