Como personalizar meu chatbox com códigos personalizados?

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 28.01.18 2:32

Detalhes da questão


Endereço do fórum: http://ams7.forumeiros.com/
Versão do fórum: phpBB2

Descrição


Olá pessoas! Espero que vocês estejam bem, de verdade. Feliz

Andando por aí nos tutoriais me deparei com este: Códigos para personalizar o seu chatbox, porém encontrei algumas dificuldades para alterar o código de acordo com minhas necessidades. Será que você poderia me ajudar? Primeiramente, quero dizer que testei o código exatamente como ele está e de certa forma ele funciona, com alguns bugs, atrasos (que não sei se são devido à minha conexão de internet ou ao próprio código), etc.

Bom, gostaria de alterar o som de notificação atual para esse: New_message_notification
Também gostaria que o efeito trabalhasse ainda que eu não esteja na página do fórum, porque de certa forma óbvia, a ideia da notificação é de me alertar que há uma nova mensagem que eu não vi chegar.

Desde já, lhe agradeço pela atenção! Feliz Feliz
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 28.01.18 8:42

Olá novamente, Bruno.

Andando por aí nos tutoriais me deparei com este: Códigos para personalizar o seu chatbox [...]

Poderia ser mais específico nesse caso? O que está acontecendo de errado?

Bom, gostaria de alterar o som de notificação atual para esse: New_message_notification

Para isso, precisaremos que você hospede (de algum modo) o arquivo .mp4 do som que você deseja usar. Feliz

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 28.01.18 13:19

Olá Luiz!
Poderia ser mais específico nesse caso? O que está acontecendo de errado?
Então, como mencionei, o efeito tem atrasado um pouco: eu envio a mensagem por uma máquina, a mensagem é enviada, mas o som de notificação é reproduzido com atraso, um tanto depois. E pelos testes que fiz, percebi que, aparentemente, ele não é reproduzido quando estou em outra aba, ou com outra janela aberta, sendo tocado quando eu volto a acessar a página do fórum.

Para isso, precisaremos que você hospede (de algum modo) o arquivo .mp4 do som que você deseja usar.
Devo hospedá-lo em .mp4 mesmo? Não seria .mp3?
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 28.01.18 13:23

O atraso é normal. Infelizmente isso é dado por uma série de fatores, os quais infelizmente não podemos fazer nada a fim de contorná-los. :/

Devo hospedá-lo em .mp4 mesmo? Não seria .mp3?
Também serve. Ambos formatos são válidos para o nosso caso. Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 28.01.18 13:41

Hospedei o arquivo de áudio aqui: http://picosong.com/wyvxY/

Entretanto, não sei se este seria o link direto para o mesmo ou se mesmo este link funcionaria. Pensativo
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 28.01.18 13:44

Eu preciso do link do arquivo .mp3 ou .mp4 em si, por exemplo:

Código:
http://ajuda.forumeiros.com/audios/notify-sound.mp3

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 29.01.18 12:07

Aqui de volta!

Este link é funcional? https://drive.google.com/file/d/1trb_BB1zUydGA0qe8aTLV0Iq69dD527x/view

Só não estou conseguindo fazê-lo reproduzir automaticamente ao abrir o link.



Aqui também → http://www.driveplayer.com/#fileIds=1trb_BB1zUydGA0qe8aTLV0Iq69dD527x&userId=110633504095218054066
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 29.01.18 12:14

Olá novamente,

Infelizmente não. O link deve ser como este:
Código:
http://illiweb.com/fa/fdf/secret.mp3

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 29.01.18 12:42

Será que assim vai? https://www.dropbox.com/s/4nuc4hjb6k4lza2/newmesage.mp3

Entretanto ele não reproduz automaticamente... pelo menos, não consegui fazê-lo.


Poxa vida, que difícil Louco Feliz
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 29.01.18 16:45

Também não. :s
Quando você entra no link, deve ser algo similar a este:
Código:
http://illiweb.com/fa/fdf/secret.mp3

Não se esqueça de votar nos seus candidatos favoritos!


o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 29.01.18 17:39

Bom, dando continuidade... aqui está:
Código:
https://s1.vocaroo.com/media/download_temp/Vocaroo_s1W4QI3NjNuN.mp3


Aliás, obrigado pela ajuda lá. ^^
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 30.01.18 9:58

Qual código você está usando para criar o som?
Creio que agora só falte modificar o áudio, certo?
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 30.01.18 12:29

Estou usando este:

Código:
  window.localStorage && $(window).load(function() {
      var chatbox_script = function() {
        var sounds = {
          'future': 'http://illiweb.com/fa/fdf/future.mp3',
          'hal': 'http://illiweb.com/fa/fdf/hal.mp3',
          'secret': 'http://illiweb.com/fa/fdf/secret.mp3',
          'zelda': 'http://illiweb.com/fa/fdf/zelda.mp3'
        };
        var default_sound = sounds['zelda'];
        var default_freq = 'new';
        var default_when = 'once';
        var default_volume = 100;
 
   
        if(localStorage.cb_sound && !localStorage.cb_sound.indexOf('https://dl.dropboxusercontent.com/u/181621985/')) localStorage.removeItem('cb_sound');
        var a = document.createElement('audio');
        if(!a.canPlayType) return;
        a.volume = Math.min(1, Math.max(0, localStorage.cb_volume||(default_volume/100)));
   
        var origin_send = Chatbox.prototype.send;
        Chatbox.prototype.send = function(params) {
          var m = $.trim($("#message").val());
          if(m.indexOf('/sound')&&m.indexOf('/soudn'))
            return origin_send.call(this, params);
          m = $.trim(m.substr(6)).split(/\s+/,3);
          var bad_apple = false;
          switch(m[0].toLowerCase()) {
            case "":
              if(!a.src) {
                a.src = localStorage.cb_sound||default_sound;
                a.load();
            }
              a.play();
              break;
            case "all":
            case "new":
              localStorage.cb_freq = m[0]; break;
            case "always":
            case "off":
            case "on":
            case "once":
            case "never":
              localStorage.cb_when = m[0]; break;
            case "stop":
              if(!a.paused) a.pause();
              if(!a.ended) a.currentTime = 0;
              break;
            case "pause":
              if(!a.paused) a.pause();
              break;
            case "volume":
              if(m.length>1) {
                localStorage.cb_volume = Math.min(1, Math.max(0, parseFloat(m[1].replace(',','.'))/100));
                a.volume = localStorage.cb_volume;
                break
              }
            default:
              bad_apple = true;
          };
          if(bad_apple) {
            if(m[0] in sounds) {
              m[0]= sounds[m[0]];
            }
            if(m[0]=="default") {
              m[0]=default_sound;
              localStorage.removeItem('cb_sound');
              localStorage.removeItem('cb_freq');
              localStorage.removeItem('cb_volume');
              localStorage.removeItem('cb_when');
              a.volume = Math.min(1, Math.max(0, default_volume/100));
            }
            if(/^https?:\/\/.+/.test(m[0])) {
              localStorage.cb_sound = m[0];
              a.pause();
              a.src = m[0];
              a.load();
              a.play();
            } else {
              var message = $('#message').val();
              alert('/sound [all | new]\n/sound [always | off | on | once | never]\n/sound [stop | pause]\n/sound default\n/sound volume 0-100\n/sound ['+$.map(sounds,function(_,k){return k}).join(' | ')+']\n/sound [http://* | https://*]');
              setTimeout(function(){ $("#message").val(message).select().focus(); }, 100);
              return;
            }
          }
          return $("#message").val('').focus();
        };
 
        $(window).on("focus", function(){ localStorage.removeItem('cb_once'); localStorage.removeItem('cb_blurred') }).on("blur", function(){ localStorage.cb_blurred=1; });
 
        var play_sound = function(){
          if(a.paused || a.ended) {
            a.currentTime=0;
            if(!a.src) {
              a.src = localStorage.cb_sound||default_sound;
              a.load()
            }
            a.play()
          }
        };
        var overrided = Chatbox.prototype.refresh;
        Chatbox.prototype.refresh = function(data) {
          if (data.messages && data.messages.length) {
            var lm = data.messages.slice(-1)[0];
            var last_message = lm.time+','+lm.action+','+lm.msg;
            if(this.last_message_sound != last_message) {
              var user = $.grep(data.users, function(v){return v.id==chatbox.userId});
              user = user.length ? user[0] : [{}];
              if(this.last_message_sound!==undefined) {
                var freq = (localStorage.cb_freq||default_freq);
                var when = (localStorage.cb_when||default_when);
                console.log([when, freq, localStorage.cb_blurred, localStorage.cb_once]);
                if(when != "never" && (when != "off" || localStorage.cb_blurred) && (when != "on" || !localStorage.cb_blurred) && (when != "once" || (localStorage.cb_blurred && !localStorage.cb_once))) {
                  console.log([when, freq, localStorage.cb_blurred, localStorage.cb_once]);
                  if(freq =="all" || (lm.userId!=chatbox.userId && user.username!=lm.username)) {
                    if(when!="once" || !localStorage.cb_once) {
                      play_sound();
                      localStorage.cb_once = 1;
                    }
                  }
                }
              }
              this.last_message_sound = lm;
            }
          }
          overrided.call(this, data);
        };
      };
      var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";jQuery('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{jQuery(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
    });

Do tutorial supracitado. Entretanto, é feita uma observação sobre esse código que é a seguinte:
Assim que aplicar, saiba que há uma série de mudanças que deve ser feito. default_sound corresponde a pasta com o áudio ou URL da mesma.

Fiquei confuso com o dito "uma série de mudanças" porque a meu ver, só devo mudar o valor da variável:

Código:
var sounds = {
          'NOME DO ARQUIVO': 'ENDEREÇO DO ARQUIVO'
};

e a variável:

Código:
var default_sound = sounds['NOME DADO AO ARQUIVO'];


Seria somente essas mudanças ou estou deixando passar algo mais?


EDIT
Fiz as alterações mencionadas e o resultado bateu. Entretanto, resta uma última dúvida. O efeito é aplicado uma única vez quando há uma nova mensagem, ou seja, após o recebimento de uma nova mensagem, as outras novas que vêm depois não são notificadas. Para alterar isso de maneira que cada nova mensagem seja notificada eu devo alterar a variável
Código:
var default_when = 'once';
?

Quais são os possível valores para essa variável?
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 30.01.18 13:00

Tente mudar para:
Código:
always

Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 30.01.18 13:52

Excelente! Feliz Deu certo a questão de todas as mensagens serem notificadas, mas agora um efeito "colateral" foi desenvolvido: o som de notificação também é reproduzido quando estou na página do fórum e não somente quando estou em outra aba ou janela (o que acontecia antes e gostaria que permanecesse).
Devo dar este tópico por resolvido e abrir outro para solicitar apoio neste detalhe?
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 30.01.18 13:56

Creio que seja uma opção padrão do script. :/
Não creio que possamos fazer muita coisa a respeito.

E não, não é necessário abrir outro tópico neste caso, tendo em vista que ainda estamos tratando do mesmo script. Feliz

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 30.01.18 14:17

É que enquanto o valor da variável é "once" em
Código:
var default_when = 'once';
o som não é reproduzido enquanto estou com a janela com o chat aberta. De fato, ele o efeito só é aplicado quando estou em outra janela, ou aba.
Ao mudar o valor para "always" ele reproduz mesmo na janela do chat.
Não há nada que possa ser feito mesmo? Não seria alguma outra variável que necessitaria ser alterada?
Feliz
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 30.01.18 14:29

Creio que não, mas você pode testar com cada um dos valores e ver se resolve:
Código:
all
Código:
new
Código:
always
Código:
off
Código:
on
Código:
once
Código:
never
Código:
stop
Código:
pause
Código:
volume

o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Bruno Franks 31.01.18 12:33

Olá! Testei alguns valores e realmente, não muda muita coisa...
Enfim, creio que uma solução será a futura adição de um botão "mute" para dar opção ao usuário de silenciar o chat (bom, espero que isso seja possível). Por enquanto, creio que o tópico pode ser fechado.Quero deixar aqui meus sinceros agradecimentos a @Luiz. Feliz
Bruno Franks

Bruno Franks
***

Membro desde : 20/06/2012
Mensagens : 153
Pontos : 201

http://ams7.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como personalizar meu chatbox com códigos personalizados?

Mensagem por Luiz 31.01.18 12:40

Às ordens. Feliz

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos