Browse Source

Ne plus surcharger le modele doc, surcharger le modele audio quand on embed, gérer l'affichage des sons de moins d'une minutes

master
BoOz 3 months ago
parent
commit
56ee4c0b5a
  1. 2
      inclure/player.html
  2. 7
      modeles/audio.html
  3. 64
      modeles/doc.html
  4. 41
      test_player.html
  5. 1
      tinyplayer.css.html

2
inclure/player.html

@ -1,6 +1,6 @@
<div class="tinyplayer">
<div class="audio progress_bar" style="background:[(#ENV{couleur}) ][rgb((#ENV{rgb})) ][url('(#ENV{image})') repeat] scroll 0% 0% / cover;">
<div class="position" [(#ENV{couleur}|ou{#ENV{image}}|ou{#ENV{rgb}}|oui)style="background-color:#000000"]></div>
<div class="position" [(#ENV{couleur}|ou{#ENV{image}}|ou{#ENV{rgb}}|oui)style="background-color:#333;mix-blend-mode: overlay;"]></div>
<div class="loading"></div>
<div class="player_info">
<button class="play" title="Lancer la lecture." data-lecture="Lancer la lecture." data-pause="Mettre la lecture en pause."></button>

7
modeles/audioplayer.html → modeles/audio.html

@ -7,10 +7,11 @@
#SET{largeur,#ENV{largeur, #LARGEUR|?{#LARGEUR,400}}|max{120}}
#SET{duree,#ENV{duree,#DUREE}}[(#SET{duree,[(#GET{duree}|intval|?{[(#GET{duree}|intval)],''})]})]
#SET{duree,#GET{duree}|duree_en_secondes|replace{s$}|replace{min,:}}
[(#GET{duree}|match{:}|non)
[(#GET{duree}|<={9}|oui)#SET{duree,#VAL{0}|concat{#GET{duree}}}][(#GET{duree}|<={59}|oui)#SET{duree,00:#GET{duree}}]
]
<INCLURE{fond=inclure/player,titre,descriptif,url_document=#FICHIER,duree=#GET{duree},couleur,image,rgb}>
</BOUCLE_audio>
<INCLURE{fond=modeles/file,env} />
<//B_audio>
<//B_audio>

64
modeles/doc.html

@ -1,64 +0,0 @@
[(#REM)
Modele pour <doc> modifié pour pour les MP3
https://contrib.spip.net/Soundmanager
Si les fichiers ne sont pas MP3, on utilise le comportement normal.
Paramètres facultatifs à passer au modèle :
- class : une class spécifique associée à l'élément parent du lecteur
- download : si la valeur est "non", on n'affiche pas le lien de téléchargement (affiché par défaut)
]
<BOUCLE_doc(DOCUMENTS) {id_document} {extension IN mp3} {tout}>
<BOUCLE_article(ARTICLES){id_document}>#SET{titre_art,#TITRE}</BOUCLE_article>
[(#EXTENSION|=={mp3}|oui)
<div class="haudio audio[ (#ENV{align}|oui)audio_#ENV{align}]">
<div class="lecture">
<button class="play">play</button>
</div>
<div class="controles">
<div class="track [(#EDIT{titre})]">
[<a href="(#URL_DOCUMENT)" rel="enclosure" title="Ecouter"><span class="fn">[(#TITRE|sinon{#GET{titre_art}})]</span></a>]
</div>
<div>
<div class="progress_bar">
<div class="position"></div>
<div class="loading"></div></div>
<div class="lesinfos">
<div class="file">
<a href="[(#URL_DOCUMENT)]" class="inline-exclude" title="Télécharger le fichier - [(#TAILLE|taille_en_octets|texte_backend)]">[<small>(#TYPE_DOCUMENT|strtolower)</small>]</a>
</div>
<div class="time">00:00</div>
<div class="duration">/ 00:00</div>
</div>
</div>
<div class="descriptif [(#EDIT{descriptif})]">
[(#DESCRIPTIF|PtoBR)]
</div>
</div>
<br style="clear:both;" />
</div>
]
</BOUCLE_doc>
[(#REM)
Cas (rare) d'un mp3 d'une boucle articles sur une base distante qui utilise un
modele modele doc dans squelettes qui inclu ce modele.
en precisant url=#URL_DOCUMENT pour garder l'url distante.
Le doc ne sera pas trouvé dans la base locale, mais c'est quand meme un mp3.
On envoie alors une balise audio.
]
[(#ENV{url}|match{mp3$}|oui)
<audio controls="controls">
<source src="#ENV{url}" type="audio/mp3" />
</audio>
]
[(#REM)
Cas normal d'un document ne correspondant pas aux type de fichiers
gérés par le lecteur multimedia
]
[(#ENV{url}|match{mp3$}|non)
[(#SPIP_VERSION|>={3.0}|oui) [(#INCLURE{fond=plugins-dist/medias/modeles/doc,env})] ]
[(#SPIP_VERSION|<{3.0}|oui) [(#INCLURE{fond=prive/modeles/doc,env})] ]
]
<//B_doc>

41
test_player.html

@ -17,28 +17,27 @@ p {
<div style="width:800px;margin:auto">
<p>Test du modèle <code>audioplayer</code></p>
<BOUCLE_d(DOCUMENTS){extension=mp3}{!par date}{0,1}>
#MODELE{audioplayer}
<p>Test du modèle <code>audio</code></p>
<BOUCLE_d(DOCUMENTS){extension=mp3}{titre!=""}{!par date}{0,1}>
#MODELE{audio}
</BOUCLE_d>
<p>Test du modèle <code>audioplayer</code> avec une couleur rgb au hasard</p>
<p>Test du modèle <code>audio</code> avec une couleur rgb au hasard</p>
#SET{rgb, #VAL{","}|join{#ARRAY{1,#VAL{195}|mt_rand{245},2,#VAL{195}|mt_rand{245},3,#VAL{195}|mt_rand{245}}}
<BOUCLE_d5(DOCUMENTS){extension=mp3}{!par date}{0,1}>
#MODELE{audioplayer, rgb=#GET{rgb}}
<BOUCLE_d5(DOCUMENTS){extension=mp3}{titre!=""}{!par date}{0,1}>
#MODELE{audio,rgb=#GET{rgb}}
</BOUCLE_d5>
<p>Test du modèle <code>audioplayer</code> avec une couleur #f3e7d7</p>
<BOUCLE_d6(DOCUMENTS){extension=mp3}{!par date}{0,1}>
#MODELE{audioplayer, couleur=#f3e7d7}
<p>Test du modèle <code>audio</code> avec une couleur #f3e7d7</p>
<BOUCLE_d6(DOCUMENTS){extension=mp3}{titre!=""}{!par date}{0,1}>
#MODELE{audio,couleur=#f3e7d7}
</BOUCLE_d6>
<p>Test du modèle <code>audioplayer</code> sans titre et avec image</p>
<p>Test du modèle <code>audio</code> sans titre et avec image</p>
<BOUCLE_dr(DOCUMENTS){extension=mp3}{titre=""}{distant=non}{!par date}{0,1}>
<BOUCLE1r(ARTICLES){id_document}>
@ -47,27 +46,27 @@ p {
#SET{titre,#TITRE}
#SET{extrait,#APERCU} #SET{date,#DATE_REDAC}
#SET{url,#URL_ARTICLE}
<BOUCLE_alterogr(DOCUMENTS){id_article}{titre=alterog}{si #GET{logo}|non}>
<BOUCLE_alterogr(DOCUMENTS types_documents){id_article}{media=image}{si #GET{logo}|non}>
#SET{logo,#FICHIER|image_recadre{600,315,center}}
</BOUCLE_alterogr>
[(#SET{couleur,[(#GET{logo}|?{[(#GET{logo}|couleur_extraire{5,10}|couleur_saturation{0.9}|couleur_luminance{0.1})], eeeeee})]})]
#SET{logo,#GET{logo}|image_alpha{100}|extraire_attribut{src}|supprimer_timestamp|url_absolue}
</BOUCLE_infos_articler>
</BOUCLE1r>
#MODELE{audioplayer,image=#GET{logo},couleur=##GET{couleur}}
#GET{logo}
#MODELE{audio,image=#GET{logo},couleur=##GET{couleur}}
</BOUCLE_dr>
<p>Test du modèle <code>audioplayer</code> avec un titre, une description, une couleur et une image</p>
<p>Test du modèle <code>audio</code> avec un titre, une description, une couleur et une image</p>
<BOUCLE_d3(DOCUMENTS){extension=mp3}{!par date}{0,1}>
<BOUCLE_d3(DOCUMENTS){extension=mp3}{titre!=""}{!par date}{0,1}>
<BOUCLE1(documents_liens){objet=article}{id_document}>
<BOUCLE_infos_article(ARTICLES){id_article}>
#SET{logo,#LOGO_ARTICLE|image_recadre{600,60,top=50}}
#SET{titre,#TITRE}
#SET{extrait,#APERCU} #SET{date,#DATE_REDAC}
#SET{url,#URL_ARTICLE}
<BOUCLE_alterog(DOCUMENTS){id_article}{titre=alterog}{si #GET{logo}|non}>
<BOUCLE_alterog(DOCUMENTS types_documents){id_article}{media=image}{si #GET{logo}|non}>
#SET{logo,#FICHIER|image_recadre{600,315,center}}
</BOUCLE_alterog>
[(#SET{couleur,[(#GET{logo}|?{[(#GET{logo}|couleur_extraire{5,10}|couleur_saturation{0.9}|couleur_luminance{0.1})], eeeeee})]})]
@ -75,7 +74,7 @@ p {
</BOUCLE_infos_article>
</BOUCLE1>
#MODELE{audioplayer,image=#GET{logo},couleur=##GET{couleur}}
#MODELE{audio,image=#GET{logo},couleur=##GET{couleur}}
</BOUCLE_d3>
<p>Test du modèle <code>doc</code> avec un titre et une description</p>

1
tinyplayer.css.html

@ -35,7 +35,6 @@
background-color: rgba(21, 29, 31, 0.15) ;
width: 0%;
height: 100%;
mix-blend-mode: overlay;
}
.tinyplayer .progress_bar .loading {

Loading…
Cancel
Save