Sonnerie lors d'une notifications ?

[adrien_69]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.passionlachasse.com

Description du problème

Bonjour,

Afin de rendre de le système de notification sur le forum, j'aimerais savoir s'il est possible de rajouter un son lors d'une notification quand on est connecté sur le forum (Tag, demande d'amis, connexion d'un amis, etc..) ?

Merci.

Cordialement, Adrien.

[adrien_69]

up !

[adrien_69]

up !

[oasisdudesert]

je pense que c'est tout a fait possible , genre un play sur un wav que tu lance au moment de l'affichage new mp

[adrien_69]

up !

[adrien_69]

up !

[w00tw00t]

Bonjour Adrien,

A ma connaissance, pour le moment FA ne fourni aucune facilité JavaScript (ou options dans le panneau d'administration) qui permettrait de déclencher des actions spécifiques lorsqu'un utilisateur donné reçoit une notification.

Je peux néanmoins essayer de vous concocter un petit script qui adresse ce besoin, mais il vous faut savoir que ce ne sera très probablement pas une solution professionnelle/fiable dans la durée (il vous faudra probablement ouvrir un nouveau ticket support ici-même plus tard si le système ne fonctionne plus, pour que soient explorées d'autres voies)

Laissez moi savoir si cette solution peut convenir. Et le cas échéant :
- avez-vous une idée (un lien vers le MP3/WAV) de la sonnerie que vous souhaitez mettre en place ?
- sur quels évènements une telle sonnerie est censée se déclencher ? Est-ce seulement à la réception d'un nouveau MP ? Pour tout types de notifications ?

Vous souhaitant une excellente journée,

Cordialement,
w00tw00t

[adrien_69]

Bonjour,

Merci, c'est vraiment sympa de votre part. J'aimerais en effet une petite sonnerie pour tous type de notifications, demande d'amis, nouveau message privé, tag, etc ...

Celui ci par exemple ?

http://s1download-universal-soundbank.com/mp3/sounds/newalert.mp3

Merci encore !

Cordialement, Adrien.

[w00tw00t]

Bonjour Adrien,

De mémoire, les codes JavaScript officiels FA qui régissent les notifications via websockets/long polling sont relativement anciens, et puisqu'ils fonctionnent bien, ils sont à ma connaissance assez peu modifiés. C'est pourquoi je vous propose de tester une première solution de contournement rapide qui consiste à écouter les objets passés dans le FA.Debugger pour répondre à votre besoin, ce qui aura le mérite de minimiser l'impact sur l'existant.

Je vous propose de vous rendre dans le template "overall_header", et de procéder comme suit :
1) Faire une sauvegarde (copier/coller) de ce template dans un fichier texte par exemple par précaution.
2) Repérer la balise fermante "</head>".
3) Copier/coller le code suivant AVANT cette balise "</head>" :

Code:

<script type="text/javascript">
/* Dernier timestamp connu */
let max_timestamp = Math.trunc($.now() / 1000);
 
/* Indique si les paramètres de debug correspondent à un objet de notification websocket FA */
const isFANotificationObject = (a,b) => {
 
  let res = false;
   
  if( typeof a === "object" &&
      a !== null &&
      a.hasOwnProperty('data') &&
      a.hasOwnProperty('unread') &&
      a.hasOwnProperty('map') &&
      a.hasOwnProperty('set') &&
      a.hasOwnProperty('clear') &&
      a.unread > 0
  ){
      const fa_data = a.data;
      for(const fa_key in fa_data){
        if (!fa_data.hasOwnProperty(fa_key)){
            continue;
        }
        let dt = null;
        let channel = false;
        const fa_obj = fa_data[fa_key];
     
        for (const fa_prop in fa_obj) {
            if(fa_prop === 'channel'){
              channel = true;
            } else if(fa_prop === 'text' && fa_obj[fa_prop].hasOwnProperty('dt') ){
              dt = fa_obj[fa_prop].dt;
            }
        }
     
        if(channel && dt !== null){
                     
            if( dt > max_timestamp ) {
              dt = max_timestamp;
              res = true;
            }
        }
      }
   
  }
 
  return res;
 
};
 
/* Indique si le membre FA est connecté */
const isFAMemberLoggedIn = () => {
  return typeof _userdata !== "undefined" && _userdata["user_id"] > 0;
};
 
/* Indique si les notifications FA sont activées */
const isFAMemberAllowNotifications = () => {
  return typeof _userdata !== "undefined" && _userdata["activate_toolbar"] > 0 && _userdata["notifications"] > 0;
};
 
/* Analyse les messages de debug */
if(typeof FA !== "undefined" && typeof FA.Debugger !== "undefined"){
  const old_fa_debug_log = FA.Debugger.log;
  FA.Debugger.log = (a,b) => {
 
    try {
   
        if( isFAMemberLoggedIn() &&
          isFAMemberAllowNotifications() &&
          (isFANotificationObject(a) || isFANotificationObject(b))
        ){
       
          const audio = new Audio('http://s1download-universal-soundbank.com/mp3/sounds/newalert.mp3');
          audio.play();
       
        }
 
        /* Rétro-compatibilité */
        if( typeof old_fa_debug_log === "function" ){
          old_fa_debug_log(a,b);
        }
     
    } catch(e){
        console.log('Notifications FA Override Error',e);
    }
   
  };
}
</script>

4) Valider ce template pour qu'il soit effectif.

J'ai testé avec succès ce script rédigé pour adresser votre souhait, et ce avec le son adéquat, mais si il ne fonctionne pas sur votre forum, n'hésitez pas à m'en faire part, pour que l'on puisse explorer ensemble d'autres voies.

Je reste à votre disposition pour plus de détails,

Cordialement,
w00tw00t

EDIT :

- mise à jour du premier code

- pour ceux qui souhaitent avoir en plus une icône dans la barre de notification pour pouvoir couper ou non le son des notifications, il faudra utiliser ces codes :

CSS :

Code:

body::after {
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url('https://i62.servimg.com/u/f62/09/00/66/99/son-on10.png') url('https://i62.servimg.com/u/f62/09/00/66/99/son-of10.png');
}
               
#fa_toggle_sound {
    cursor: pointer;
    height: 30px;
    width: 30px;
}
 
#fa_menu #fa_welcome {
    vertical-align: middle;
}

JS (à placer au même endroit et en remplacement du premier code) :

Code:

<script type="text/javascript">
 
/* Son à jouer */
const fa_sound_url = 'http://s1download-universal-soundbank.com/mp3/sounds/newalert.mp3';
 
/* Image représentant l'état son ouvert */
const fa_sound_open = 'https://i62.servimg.com/u/f62/09/00/66/99/son-on10.png';
 
/* Image représentant l'état son fermé */
const fa_sound_close = 'https://i62.servimg.com/u/f62/09/00/66/99/son-of10.png';
 
/* Dernier timestamp connu */
let max_timestamp = Math.trunc($.now() / 1000);
 
/* Indique l'état courant du haut parleur */
const isFASoundStateEnabled = () => {
  try {
      const storage = window['localStorage'];
      return ('true' == storage.getItem('fa_sound'));
  } catch(e){
      console.error(e);
  }
  return false;
};
 
/* Défini l'état du haut parleur */
const setFASoundState = (state) => {
  try {
      const storage = window['localStorage'];
      storage.setItem('fa_sound',''+state);
  } catch(e){
      console.error(e);
  }
  return false;
};
 
/* Rafraichir la vue en fonction du modèle */
const FASoundViewRefresh = ($fa_toggle_sound, state) => {
 
  $fa_toggle_sound.css('background-image', 'url(' + (state ? fa_sound_open : fa_sound_close) + ')' );
 
};
 
/* Action au clic sur le haut parleur */
const FASoundViewSetEvents = ($fa_toggle_sound) => {
 
  $fa_toggle_sound.on('click',function(event){
 
      const $this = $(this);
      const state = !isFASoundStateEnabled();
 
      event.preventDefault();
 
      setFASoundState( state );
   
      FASoundViewRefresh($this, state);
   
  });
 
};
 
/* Indique si les paramètres de debug correspondent à un objet de notification websocket FA */
const isFANotificationObject = (a,b) => {
 
  let res = false;
   
  if( typeof a === "object" &&
      a !== null &&
      a.hasOwnProperty('data') &&
      a.hasOwnProperty('unread') &&
      a.hasOwnProperty('map') &&
      a.hasOwnProperty('set') &&
      a.hasOwnProperty('clear') &&
      a.unread > 0
  ){
      const fa_data = a.data;
      for(const fa_key in fa_data){
        if (!fa_data.hasOwnProperty(fa_key)){
            continue;
        }
        let dt = null;
        let channel = false;
        const fa_obj = fa_data[fa_key];
     
        for (const fa_prop in fa_obj) {
            if(fa_prop === 'channel'){
              channel = true;
            } else if(fa_prop === 'text' && fa_obj[fa_prop].hasOwnProperty('dt') ){
              dt = fa_obj[fa_prop].dt;
            }
        }
     
        if(channel && dt !== null){
                     
            if( dt > max_timestamp ) {
              dt = max_timestamp;
              res = true;
            }
        }
      }
   
  }
 
  return res;
 
};
 
/* Indique si le membre FA est connecté */
const isFAMemberLoggedIn = () => {
  return typeof _userdata !== "undefined" && _userdata["user_id"] > 0;
};
 
/* Indique si les notifications FA sont activées */
const isFAMemberAllowNotifications = () => {
  return typeof _userdata !== "undefined" && _userdata["activate_toolbar"] > 0 && _userdata["notifications"] > 0;
};
 
/* Analyse les messages de debug */
if(typeof FA !== "undefined" && typeof FA.Debugger !== "undefined"){
  const old_fa_debug_log = FA.Debugger.log;
  FA.Debugger.log = (a,b) => {
 
    try {
   
      /* Conditions précédentes réunies */
        if( isFAMemberLoggedIn() &&
        isFAMemberAllowNotifications() &&
        (isFANotificationObject(a) || isFANotificationObject(b))
        ){
     
        /* Notification reçue + son activé, on déclenche le son */
        if( isFASoundStateEnabled() ){
            const audio = new Audio(fa_sound_url);
          audio.play();
        }
     
      }
 
        /* Rétro-compatibilité */
        if( typeof old_fa_debug_log === "function" ){
        old_fa_debug_log(a,b);
        }
     
    } catch(e){
        console.log('Notifications FA Override Error',e);
    }
   
  };
 
  /* Permet de placer le toggle son on/off dans la toolbar */
  $(function() {
   
    if( isFAMemberLoggedIn() && isFAMemberAllowNotifications() ){
     
        $('#fa_hide').before('<a id="fa_toggle_sound"></a>');
     
        const $fa_toggle_sound = $('#fa_toggle_sound');
       
        FASoundViewRefresh($fa_toggle_sound, isFASoundStateEnabled() );
     
        FASoundViewSetEvents($fa_toggle_sound);
   
    }
   
  });
}
 
</script>

[adrien_69]

Bonjour,

Merci beaucoup, cela fonctionne.

C'est vraiment sympa.

Merci encore.

Au plaisir, Adrien.