collapse collapse

* User Info

 
 
Welcome, Guest. Please login or register.
Did you miss your activation email?

* Who's Online

  • Dot Guests: 107
  • Dot Hidden: 0
  • Dot Users: 2
  • Dot Users Online:

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • ♦ Ninja ZX-10RR ♦: <3 aegersz
    September 13, 2018, 03:36:09 PM
  • aegersz: I STILL <3 LOVE SimplePortal
    September 13, 2018, 07:11:39 AM
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM
  • phantomm: and from what I see only patch is broken, full install package is fine
    October 21, 2016, 03:44:44 PM
  • phantomm: they say it for over 3 weeks now..
    October 21, 2016, 03:43:52 PM
Blocks speak! Do you have an interest in getting more blocks - or even making your own? The Blocks Board is for you!

Author Topic: Shoutbox Sound Notification HTML5  (Read 16453 times)

0 Members and 1 Guest are viewing this topic.

Offline Metacritter

  • Newbie
  • Posts: 4
  • SMF Version: 2.0.2
  • SP Version: 2.3.5
Shoutbox Sound Notification HTML5
« on: June 22, 2012, 11:59:03 AM »
My users were asking for chatbox notification sounds with a specific feature (muting) that the existing sound mod lacked, so I ended up making my own.  It uses the HTML 5 Audio element and hooks into the onShoutReceived js function, so the database contents remain unaltered.

Tested on FF/Chrome/Safari OS X and IE/FF/Chrome Windows.  Sound doesn't play on iOS devices and users with Android devices report mixed results.

I've packaged this up as a mod and used it on my own board (2.0.2/2.3.5).  Attached for your convenience, but please check it over thoroughly before using. 

$themedir/scripts/portal.js
Code: (Find) [Select]
   var shoutbox_id, updated, error, warning, reverse, shout, id, author, time, timeclean, delete_link, content, is_me, new_body = '';
Code: (Replace with) [Select]
   var shoutbox_id, updated, error, warning, reverse, shout, id, author, time, timeclean, delete_link, content, is_me, new_body = '';
   var newest_shout_id = '';


Code: (Find) [Select]
id = shout.getElementsByTagName("id")[0].childNodes[0].nodeValue;
Code: (Replace with) [Select]
id = shout.getElementsByTagName("id")[0].childNodes[0].nodeValue;
if(newest_shout_id == '') newest_shout_id = id;


Code: (Find) [Select]
         setInnerHTML(document.getElementById('shouts_' + shoutbox_id), new_body);
Code: (Replace with) [Select]
         setInnerHTML(document.getElementById('shouts_' + shoutbox_id), new_body);

         //play beep if not muted and if not already notified.
         if(!document.getElementById("shout_beep_mute").checked)
         {
            if((newest_shout_id != document.getElementById("newest_shout_id").value) && newest_shout_id != '')
            {
               document.getElementById("beep").cloneNode(true).play();
            }
         }
         document.getElementById("newest_shout_id").value = newest_shout_id;


$themedir/PortalShoutbox.template.php
Code: (Find) [Select]
      echo ' <a href="#smiley" onclick="sp_collapse_object(\'sb_smiley_', $shoutbox['id'], '\', false); return false;">', sp_embed_image('smiley'), '</a> <a href="#style" onclick="sp_collapse_object(\'sb_style_', $shoutbox['id'], '\', false); return false;">', sp_embed_image('style'), '</a>';
Code: (Replace with) [Select]
      echo ' <a href="#smiley" onclick="sp_collapse_object(\'sb_smiley_', $shoutbox['id'], '\', false); return false;">', sp_embed_image('smiley'), '</a> <a href="#style" onclick="sp_collapse_object(\'sb_style_', $shoutbox['id'], '\', false); return false;">', sp_embed_image('style'), '</a>';
      //Mute control checkbox & persistent last shout indicator
      $tmparr = array_values($shoutbox['shouts']);
      $first_shout = $tmparr[0]['id'];
      echo '<span class="shoutbox_mute_control smalltext">Mute<input type="checkbox" style="vertical-align: bottom" name="shout_beep_mute" id="shout_beep_mute"></span><input type="hidden" name="newest_shout_id" id="newest_shout_id" value="', $first_shout, '">';


Code: (Find) [Select]
function template_shoutbox_embed($shoutbox)
{
   global $context, $scripturl, $settings, $txt;

   echo '
Code: (Replace with) [Select]
function template_shoutbox_embed($shoutbox)
{
   global $context, $scripturl, $settings, $txt;

   echo '
   <audio src="Themes/default/images/message_received.wav" id="beep" preload></audio>


$themedir/css/portal.css
Code: (Find) [Select]
div.shoutbox_input
Code: (Replace with) [Select]
.shoutbox_mute_control
{
   padding-left: 20px;
   line-height: 1.8em;
}
div.shoutbox_input

This is my first practical exposure SMF/SP modding (and to PHP coding for that matter), so I'd welcome any advice or feedback for improving my methods.  I also have a couple of specific questions:
  • I used array_values() to get the first shout ID in PortalShoutbox.template.php.  This seems like an awkward way to accomplish what I wanted to do.  Any advice on better ways?
  • I'd like to persist the value of the Mute checkbox via cookie, so it defaults to whatever state it was last in on page load.  Any advice on how to do this?

[Edit:  Noticed I'd uploaded the attachment twice.  Deleted duplicate attachment.]
« Last Edit: June 22, 2012, 04:03:06 PM by Metacritter »

Offline Aimee

  • Semi Newbie
  • *
  • Posts: 12
  • SMF Version: 2.0.2
  • SP Version: 2.3.5
Re: Shoutbox Sound Notification HTML5
« Reply #1 on: June 22, 2012, 10:14:20 PM »
I'm new to SMF modding too.

Instead of array_values, that element "should" :) be directly addressable as $shoutbox['shouts'][0]['id']

I've used print_r($shoutbox['shouts']); to dump a humanly-readable form to the page, then picked out its structure.

Offline phantomm

  • Translator
  • *
  • Posts: 406
  • Gender: Male
  • Smile, tomorrow will be worse...
    • Polish ElkArte community
  • SMF Version: None
  • Elkarte Version: 1.0.5
Re: Shoutbox Sound Notification HTML5
« Reply #2 on: July 02, 2012, 01:57:28 PM »
Works perfectly :D

Offline phantomm

  • Translator
  • *
  • Posts: 406
  • Gender: Male
  • Smile, tomorrow will be worse...
    • Polish ElkArte community
  • SMF Version: None
  • Elkarte Version: 1.0.5
Re: Shoutbox Sound Notification HTML5
« Reply #3 on: August 04, 2012, 09:23:00 AM »
One question - is there any way to remember if user disabled sound in SB? Now after entering page with SB sound is enabled

Offline phantomm

  • Translator
  • *
  • Posts: 406
  • Gender: Male
  • Smile, tomorrow will be worse...
    • Polish ElkArte community
  • SMF Version: None
  • Elkarte Version: 1.0.5
Re: Shoutbox Sound Notification HTML5
« Reply #4 on: August 26, 2012, 05:09:17 AM »
Nice... 3 posts in a row :P

If you want to add option to allow users disable sound make this edits (after making this from first post):
Profile.template.php
Code: (Find) [Select]
</li>
</ul>
<dl>
<dd></dd>';
Code: (Replace with) [Select]
</li>';
echo '
<li>
<input type="hidden" name="default_options[disable_SB_sound]" value="0" />
<label for="disable_SB_sound"><input type="checkbox" name="default_options[disable_SB_sound]" id="disable_SB_sound" value="1"', !empty($context['member']['options']['disable_SB_sound']) ? ' checked="checked"' : '', ' class="input_check" />', $txt['disable_SB_sound'], '</label>
</li>';
echo '
</ul>
<dl>
<dd></dd>';


PortalShoutbox.template.php
Code: (Find) [Select]

echo '
<audio src="Themes/default/images/message_received.wav" id="beep" preload></audio>
Code: (Replace with) [Select]
global $options, $user_info;

if ($user_info['is_guest'] || empty($options['disable_SB_sound']))
{
echo '
<audio src="Themes/default/images/message_received.wav" id="beep" preload></audio>';
}

echo'

Code: (Find) [Select]
//Mute control checkbox & persistent last shout indicator
$tmparr = array_values($shoutbox['shouts']);
$first_shout = $tmparr[0]['id'];
echo '<span class="shoutbox_mute_control smalltext">', $txt['sp_mute_sound'], '<input type="checkbox" style="vertical-align: bottom" name="shout_beep_mute" id="shout_beep_mute"></span><input type="hidden" name="newest_shout_id" id="newest_shout_id" value="', $first_shout, '">';
Code: (Replace with) [Select]

if ($user_info['is_guest'] || empty($options['disable_SB_sound']))
{
//Mute control checkbox & persistent last shout indicator
$tmparr = array_values($shoutbox['shouts']);
$first_shout = $tmparr[0]['id'];
echo '<span class="shoutbox_mute_control smalltext">', $txt['sp_mute_sound'], '<input type="checkbox" style="vertical-align: bottom" name="shout_beep_mute" id="shout_beep_mute"></span><input type="hidden" name="newest_shout_id" id="newest_shout_id" value="', $first_shout, '">';
}


Modifications.english.php
Code: (Find) [Select]
?>
Code: (Replace with) [Select]
$txt['disable_SB_sound'] = 'Disable Shoutbox sound';

?>


Users will have new option in Profile » Look and Layout (last position).

Offline Metacritter

  • Newbie
  • Posts: 4
  • SMF Version: 2.0.2
  • SP Version: 2.3.5
Re: Shoutbox Sound Notification HTML5
« Reply #5 on: September 22, 2012, 08:26:42 PM »
This is cool, phantomm, thank you!  Like I said, I'm pretty new at this, and you're showing me techniques I didn't know.  I suspect my users would enjoy this.  In the unknown future, I have ideas about allowing selection of different chat sounds and/or allowing users to upload their own.  When I get back into this, I'll definitely try out your persistent muting.

(Sorry for my long silence... I've been distracted from coding and site issues for a while.)

weerforum

  • Guest
Re: Shoutbox Sound Notification HTML5
« Reply #6 on: September 23, 2012, 08:08:42 AM »
Great plugin  Metacritter  :D ;D

Offline 420connect

  • Jr. Member
  • **
  • Posts: 94
Re: Shoutbox Sound Notification HTML5
« Reply #7 on: March 09, 2015, 12:30:45 PM »
Sorry for bumping an oldie!

- I've installed this as I was having trouble using the other Shoutbox Sounds Plugin
(due to using multiple SP Shoutbox MOD's; some didn't want to work together nicely :( )


Anyway, I don't experience this myself - but have one member reporting that the auto-refreshing isn't working properly for them and wondered if someone wouldn't mind having a check to see if something is causing it?
(attached PortalShoutbox.Template.php & portal.js)

Many thanks

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1176
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Shoutbox Sound Notification HTML5
« Reply #8 on: March 09, 2015, 01:24:13 PM »
Very much likely something on their end if it's just one user ;) My guess would be a no-script addon for the browser blocking the js execution.
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline 420connect

  • Jr. Member
  • **
  • Posts: 94
Re: Shoutbox Sound Notification HTML5
« Reply #9 on: March 09, 2015, 05:17:45 PM »
Very much likely something on their end if it's just one user ;) My guess would be a no-script addon for the browser blocking the js execution.

Aha! Thank you for the suggestion - I will ask the member to add my site an an exception for any blockers.

(Strange the issue has only begun since this edit though!)

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1176
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Shoutbox Sound Notification HTML5
« Reply #10 on: March 09, 2015, 06:58:34 PM »
ooooh wait, I confused the topics. Thought this was posted in the other shoutbox one... In that case then it's 99% the browser not completely supporting HTML5, try to ask him what browser he is on, and to update it to its last version.
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline Jailer

  • Semi Newbie
  • *
  • Posts: 6
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
  • Elkarte Version: None
Re: Shoutbox Sound Notification HTML5
« Reply #11 on: October 07, 2016, 08:48:41 PM »
I know this is a necro post but is anyone still using this mod? I tried to install it on my forum and it generates an error in the log every time a new shout is posted. The error is listed below.

Code: [Select]
Invalid argument supplied for foreach()
File: /usr/local/www/nginx/Sources/Subs-Portal.php
Line: 1286

I'm using the Sub-Portal.php file from this post to fix the shoutbox problem that the SMF 2.0.12 update introduced so I wonder if that is my problem.

Offline emanuele

  • Developer
  • *
  • Posts: 293
Re: Shoutbox Sound Notification HTML5
« Reply #12 on: October 08, 2016, 05:40:34 PM »
The line of the error you reported doesn't match with the file you should be using, so either the error comes from before you replaced the file, or you are not using that file. ;)

Offline Jailer

  • Semi Newbie
  • *
  • Posts: 6
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
  • Elkarte Version: None
Re: Shoutbox Sound Notification HTML5
« Reply #13 on: October 08, 2016, 07:52:27 PM »
edit: Ok looks like it's working fine now. I guess I missed the fact that those errors were from before I replaced the file. Sorry for the confusion.
« Last Edit: October 08, 2016, 08:32:24 PM by Jailer »

Offline Jailer

  • Semi Newbie
  • *
  • Posts: 6
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
  • Elkarte Version: None
Re: Shoutbox Sound Notification HTML5
« Reply #14 on: October 09, 2016, 07:48:50 AM »
New problem. Now I get no sounds and the shoutbox isn't refreshing. I tried uninstalling the mod and it still won't refresh without a page reload. I get a spinning circle in the top right corner of the shoutbox whether the mod is installed or not. This is on my live site. On my test site it works just fine. No errors in the log either. Any idea where to start looking for the problem?

Edit: Opened the dev tools in Chrome and I'm getting this error when a new shout is entered
Code: [Select]
Uncaught TypeError: Cannot read property 'nodeValue' of portal.js?236:131 undefined

onShoutReceived @ portal.js?236:131
undefined.i.onreadystatechange @ script.js?fin20:1
« Last Edit: October 09, 2016, 08:02:55 AM by Jailer »

Offline emanuele

  • Developer
  • *
  • Posts: 293
Re: Shoutbox Sound Notification HTML5
« Reply #15 on: October 09, 2016, 09:56:19 AM »
Start disabling SMF cache.

Offline Jailer

  • Semi Newbie
  • *
  • Posts: 6
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
  • Elkarte Version: None
Re: Shoutbox Sound Notification HTML5
« Reply #16 on: October 10, 2016, 06:14:22 PM »
Ok I fixed it by pruning all the shouts. Once I did that it started working again.

Offline aegersz

  • Jr. Member
  • **
  • Posts: 58
  • Gender: Male
  • SMF Bulletin Board / Forum Fanatic
    • dopetalk
  • SMF Version: 2.0.15
  • SP Version: 2.3.6
Re: Shoutbox Sound Notification HTML5
« Reply #17 on: October 10, 2016, 08:26:57 PM »
why not wait for SMF Update 2.0.13 (to correct the 2.0.12 bugs) which is being built right now, I suppose ?
"mods" fan (SMF 2.0.15) with 140+ mods (Full List is at http://forum.drugs-and-users.org/index.php/topic,3301)

Offline emanuele

  • Developer
  • *
  • Posts: 293
Re: Shoutbox Sound Notification HTML5
« Reply #18 on: October 11, 2016, 08:13:29 AM »
Ok I fixed it by pruning all the shouts. Once I did that it started working again.
That will work until 5 or 6 shouts are there again.
This is no fix at all.

The only workaround is disable the cache.
But apply this workaround is up to you.

Offline Jailer

  • Semi Newbie
  • *
  • Posts: 6
  • SMF Version: 2.0.11
  • SP Version: 2.3.6
  • Elkarte Version: None
Re: Shoutbox Sound Notification HTML5
« Reply #19 on: October 12, 2016, 06:34:36 PM »
why not wait for SMF Update 2.0.13 (to correct the 2.0.12 bugs) which is being built right now, I suppose ?

Because at the rate that updates are released it will be a year or so before it's fixed.

Ok I fixed it by pruning all the shouts. Once I did that it started working again.
That will work until 5 or 6 shouts are there again.
This is no fix at all.

The only workaround is disable the cache.
But apply this workaround is up to you.

Seems to be working fine now for several days. I'll roll with it for a bit and see how it goes.