SimplePortal
Customization => Custom Coding => Topic started by: Metacritter 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
var shoutbox_id, updated, error, warning, reverse, shout, id, author, time, timeclean, delete_link, content, is_me, new_body = '';
var shoutbox_id, updated, error, warning, reverse, shout, id, author, time, timeclean, delete_link, content, is_me, new_body = '';
var newest_shout_id = '';
id = shout.getElementsByTagName("id")[0].childNodes[0].nodeValue;
id = shout.getElementsByTagName("id")[0].childNodes[0].nodeValue;
if(newest_shout_id == '') newest_shout_id = id;
setInnerHTML(document.getElementById('shouts_' + shoutbox_id), new_body);
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
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>';
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, '">';
function template_shoutbox_embed($shoutbox)
{
global $context, $scripturl, $settings, $txt;
echo '
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
div.shoutbox_input
.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.]
-
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.
-
Works perfectly :D
-
One question - is there any way to remember if user disabled sound in SB? Now after entering page with SB sound is enabled
-
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
</li>
</ul>
<dl>
<dd></dd>';
</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
echo '
<audio src="Themes/default/images/message_received.wav" id="beep" preload></audio>
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'
//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, '">';
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
?>
$txt['disable_SB_sound'] = 'Disable Shoutbox sound';
?>
Users will have new option in Profile » Look and Layout (last position).
-
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.)
-
Great plugin Metacritter :D ;D
-
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
-
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.
-
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!)
-
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.
-
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.
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 (http://simpleportal.net/index.php?topic=14380.msg72380#msg72380) to fix the shoutbox problem that the SMF 2.0.12 update introduced so I wonder if that is my problem.
-
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. ;)
-
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.
-
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 enteredUncaught TypeError: Cannot read property 'nodeValue' of portal.js?236:131 undefined
onShoutReceived @ portal.js?236:131
undefined.i.onreadystatechange @ script.js?fin20:1
-
Start disabling SMF cache.
-
Ok I fixed it by pruning all the shouts. Once I did that it started working again.
-
why not wait for SMF Update 2.0.13 (to correct the 2.0.12 bugs) which is being built right now, I suppose ?
-
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.
-
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.