Au secours ??

Bonjour, cette page s'est transformée en liste des problèmes qui me restent à régler pour ne pas que je les oublie !

Sommaire :

Markdown dans HTML ?
Problèmes résolus :)

Markdown dans HML

Ou plutôt un moyen d'écrire un paragraphe dans le bloc notes (donc en txt, puis lu en yaml par le Python) qui serait transmis/traduit en HTML
-> pour les descriptions d'albums et d'artiste, actuellement pas de retour à la ligne dans les fichiers configs (ni de lien mais c'est peut être plus compliqué).
En gros trouver un moyen de remplacer (ou d'insérer) la balise br quand le Python transmet release_description au HTML.

Me faudrait l’URL de ton dépôt… Je l’ai perdue !

https://codeberg.org/Lelio/HzM
!!!

Problèmes résolus, merci :))

Zone de clic

RÉSOLU merci encore pour le code 🙏🙏🙏

Sur la template Spore, on peut cliquer sur la barre de progression d'un morceau pour se rendre à un moment du son. Ça marche grâce aux propriétés de la balise HTML "progress" dont la valeur est changée en JS.

Mais comme j'ai stylisé cette barre de progression pour être le plus réduite possible sur cette template, la zone de clic est haute de 3px💀💀💀 pas hyper accessible.
Il faut que je modifie le JS pour que le clic soit pris en compte dans toute la div du track et pas seulement la progress bar.

Voilà:

// pour toutes les progress bar (et pas une par une !)
  const progressbars = document.querySelectorAll('.amplitude-song-played-progress');
  progressbars.forEach((bar, idx) => {
    // crée un élément pour augmenter la zone de clic
    const wrapper = document.createElement('div');
    // insère l’élément avant le progress
    bar.insertAdjacentElement("beforebegin", wrapper);
    // insère le progress dans l’élément 
    wrapper.appendChild(bar);
    // classname
    wrapper.className = "progress-wrapper";
    // ↓ faut mettre ça dans la CSS sur .progress-wrapper
    wrapper.style = `cursor: pointer; padding-bottom:6px; margin-bottom: -6px`;

    // click sur le wrapper plutôt que sur le progress
    wrapper.addEventListener("click", (e) => {
      if( Amplitude.getActiveIndex() == idx ){
        var offset = wrapper.getBoundingClientRect();
        var x = e.pageX - offset.left;      
        Amplitude.setSongPlayedPercentage( ( parseFloat( x ) / parseFloat( wrapper.offsetWidth) ) * 100 );
      }
    })   

  })

Set interval

RÉSOLU merci pour le code, youpi !

J'ai réussi à avoir un résultat cool pour la template Psilo et l'accumulation d'images, il manque juste 1 truc pour que ça fonctionne parfaitement, mais je me suis cassé les dents dessus.
En gros dans le JS, j'ai lancé un setInterval random pour que les images apparaissent en boucle pendant que le son est joué. Il ne me reste plus qu'à arrêter l'apparition des images lorsque le son est mis en pause.

C'est compliqué à expliquer mais en gros je galère à placer le clearInterval, puisque le setInterval est déclaré au milieu d'une fonction qui intervient au lancement d'un audio (grâce à un paramètre d'AmplitudeJS), et que j'ai besoin du clearInterval à l'arrêt de l'audio. Ça veut dire que le lancement et l'arrêt de l'interval se font à 2 endroits différents et j'ai pas trouvé comment y transférer la variable dans laquelle est stockée l'interval.

Eh eh… Faut utiliser le mécanisme qu’Amplitude met à ta disposition : un objet.
J’ai mis à jour le code et un peu commenté. Y’a un moment bizarre : self = this qui permet de conserver la référence à this à l’intérieur du setInterval (sans quoi, this à l’intérieur n’est plus l’objet Amplitude, mais l’interval :/)

Float canvas

RÉSOLU grace à Corentin, en remplaçant les contrôles drag etc par OrbitControls (interact.js était galère, leur site/doc est cassé et les exemples aussi).
On a aussi fait en sorte de mettre three.js et orbitcontrols dans des fichiers js qui seront donc fournis avec les templates, pour éviter d'avoir recours à des liens cdn

On s'est penchés avec Corentin sur des contrôles adaptés aux mobiles pour le canvas généré par ThreeJS. Les contrôles actuels marchent bien (même si il y a quelques problèmes en fonction des navigateurs et des téléphones, c'est un peu bizarre), mais ne supportent pas le zoom par "pinch".
On a regardé du côté de OrbitControls qui a l'air parfait pour se charger de tous les déplacements/zooms de caméra, mais c'est un addon donc un poil chiant puisqu'il faut récupérer le fichier JS après l'avoir téléchargé (avec Node ou npm ou que sais-je j'en suis pas encore là)

Il faut aussi que je me penche plus sérieusement sur comment intégrer une VideoTexture, mais ça a l'air compliqué de faire passer une vidéo pour un sprite, donc pas le même fonctionnement ?
Les sprites de ThreeJS ne supportent malheureusement pas les gifs, il faut les convertir/importer en tant que vidéos. Dommage mais ça reste possible si j'arrive à faire fonctionner les vidéos je suppose.

Marche pas trop mal sur Firefox mobile, pas sur Chrome·ium

Ateliers web

RÉSOLU : C'était bien les ../ avant l'url........... Je retiens jamais ce truc

En mettant en ligne la template Spore sur les Ateliers Web, je me suis rendu compte que toute la partie audio était cassée.
"Le « Content-Type » HTTP « text/html » n’est pas géré. Le chargement de la ressource média url_ateliers_web_etc a échoué"

Il me semble que c'est parce que dans le JS, les fichiers mp3 sont récupérés comme ça : "url": "../sounds/XXXXX.mp3"
J'ai besoin de remonter dans l'arborescence puisque le fichier JS est dans un dossier js/script.js, ça marche en local et sur Herd mais pas en ligne.

Selon l'erreur, le navigateur cherche le fichier ici : ......../5dgm/lelio/sounds/GENESE.mp3

L'adresse devrait être : ......../5dgm/lelio/spore/sounds/GENESE.mp3

Maxime disait que ça lui était déjà arrivé sur les Ateliers Web à cause d'une protection qui empêche de remonter dans l'arborescence(??), mais honnêtement c'est possible que l'erreur soit très très bête et vienne de moi.......

so weird. Le chemin vers les fichiers devrait être déterminé depuis la page HTML. Soit "url": "sounds/GENESE.mp3".
Il faudrait par ailleurs que tu normalises (→ slugify) les noms de fichiers "JETLAG (feat. NeS).mp3" → "jetlag--feat.-nes-.mp3" (une bibliothèque python fait ça : python-slugify)

PHP ou Python

RÉSOLU : ok pour le python partout, pour l'instant je travaille sur le JS en intégrant les balises img à la main et quand tout marchera bien je passerai au python

Maintenant que la template Psilo est construite (cf dernière question plus bas), il faut que je passe à la partie accumulation d'images. Je sais positionner des images aléatoirement quand elles sont intégrées directement dans le HTML, mais quand il faut les récupérer depuis un dossier c'est différent.

Je voulais juste avoir une discussion/confirmation à ce sujet avant de me lancer là-dedans : est ce qu'il vaudrait mieux utiliser PHP pour injecter les images dans le HTML avec une boucle foreach, ou le faire directement en python avec une boucle qui dupliquerait une balise img pour chaque image dans le dossier ?
Même question pour l'ajout de div pour chaque track (pour chaque fichier mp3 -> dupliquer la div track "modèle"), et chaque album sur la page index (pour chaque dossier -> dupliquer la div release "modèle").

Ma réponse actuellement, confirmez moi si c'est la bonne piste :
Je suis presque sûr que pour les images ce sera du PHP, parce que ça intervient au chargement de la page, et que ça n'a pas vraiment d'intérêt de créer les balises img directement dans le fichier HTML.
Par contre pour les div il vaudrait mieux le faire en Python pour que ce soit plus facile pour les utilisateur·ices de s'y retrouver et de faire des modifications dans le HTML une fois la page générée.

À priori, tout en python !

ça n'a pas vraiment d'intérêt de créer les balises img directement dans le fichier HTML

Si, bien au contraire ! Tu ne veux pas rendre dépendant tes artistes de PHP et ça te permet d’écrire un fichier HTML stable, complet, fini
Tu peux aussi vouloir les écrire dans une variable js (mais toujours en python :)

https://radicalweb.design/ressources/python/files/#lister-le-contenu-dun-dossier

Infinite canvas

RÉSOLU : pas de infinite canvas mais j'ai réussi à intégrer la démo donnée par Julien plus bas qui me plaisait aussi bcp donc c'est parfait !

Pour essayer de reproduire l'effet sur une template, j'ai téléchargé cet exemple. MAIS c'est une architecture Node.js, donc j'y connais + comprends rien de rien, alors j'ai vite abandonné. Pour l'instant c'est en stand by en attendant de chercher si d'autres solutions similaires existent en JS simple.

c’est surtout écrit en TypeScript avec React. Et ça, c’est le mal…

(28/04 : J'ai rdv avec Corentin demain pour en discuter et fouiller du côté de Three.js)

une solution three js sera lourde aussi, mais ça semble une bien meilleure option.
Demo time !: https://ateliers.esad-pyrenees.fr/stolon/inertia-creeps

Cauchemardesque