Customization > Custom Coding
Shoutbox Sound Notification HTML5
Metacritter:
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) --- var shoutbox_id, updated, error, warning, reverse, shout, id, author, time, timeclean, delete_link, content, is_me, new_body = '';
--- End code ---
--- Code: (Replace with) --- var shoutbox_id, updated, error, warning, reverse, shout, id, author, time, timeclean, delete_link, content, is_me, new_body = '';
var newest_shout_id = '';
--- End code ---
--- Code: (Find) ---id = shout.getElementsByTagName("id")[0].childNodes[0].nodeValue;
--- End code ---
--- Code: (Replace with) ---id = shout.getElementsByTagName("id")[0].childNodes[0].nodeValue;
if(newest_shout_id == '') newest_shout_id = id;
--- End code ---
--- Code: (Find) --- setInnerHTML(document.getElementById('shouts_' + shoutbox_id), new_body);
--- End code ---
--- Code: (Replace with) --- 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;
--- End code ---
$themedir/PortalShoutbox.template.php
--- Code: (Find) --- 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>';
--- End code ---
--- Code: (Replace with) --- 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, '">';
--- End code ---
--- Code: (Find) ---function template_shoutbox_embed($shoutbox)
{
global $context, $scripturl, $settings, $txt;
echo '
--- End code ---
--- Code: (Replace with) ---function template_shoutbox_embed($shoutbox)
{
global $context, $scripturl, $settings, $txt;
echo '
<audio src="Themes/default/images/message_received.wav" id="beep" preload></audio>
--- End code ---
$themedir/css/portal.css
--- Code: (Find) ---div.shoutbox_input
--- End code ---
--- Code: (Replace with) ---.shoutbox_mute_control
{
padding-left: 20px;
line-height: 1.8em;
}
div.shoutbox_input
--- End code ---
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.]
Aimee:
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.
phantomm:
Works perfectly :D
phantomm:
One question - is there any way to remember if user disabled sound in SB? Now after entering page with SB sound is enabled
phantomm:
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) --- </li>
</ul>
<dl>
<dd></dd>';
--- End code ---
--- Code: (Replace with) --- </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>';
--- End code ---
PortalShoutbox.template.php
--- Code: (Find) ---
echo '
<audio src="Themes/default/images/message_received.wav" id="beep" preload></audio>
--- End code ---
--- Code: (Replace with) --- 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'
--- End code ---
--- Code: (Find) --- //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, '">';
--- End code ---
--- Code: (Replace with) ---
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, '">';
}
--- End code ---
Modifications.english.php
--- Code: (Find) ---?>
--- End code ---
--- Code: (Replace with) ---$txt['disable_SB_sound'] = 'Disable Shoutbox sound';
?>
--- End code ---
Users will have new option in Profile ยป Look and Layout (last position).
Navigation
[0] Message Index
[#] Next page
Go to full version