diff --git a/share/spice/dictionary/definition/content.handlebars b/share/spice/dictionary/definition/content.handlebars
index cb7ed9be67..b747298a23 100644
--- a/share/spice/dictionary/definition/content.handlebars
+++ b/share/spice/dictionary/definition/content.handlebars
@@ -5,8 +5,6 @@
{{word}}
{{/if}}
- ►
-
{{#definitions}}
diff --git a/share/spice/dictionary/definition/dictionary_definition.css b/share/spice/dictionary/definition/dictionary_definition.css
index 7cc008fbd1..53168f5fdd 100644
--- a/share/spice/dictionary/definition/dictionary_definition.css
+++ b/share/spice/dictionary/definition/dictionary_definition.css
@@ -10,63 +10,3 @@
.zci__def__part-of-speech {
font-style: italic;
}
-
-.zci__def__audio {
- display: none;
- font-size: 0.5em;
- text-align: center;
- vertical-align: middle;
- background: #979797;
- color: #fafafa;
- width: 1em;
- height: 1em;
- border-radius: 1.8em;
- line-height: 1em;
- padding: .4em;
- cursor: pointer;
- -webkit-transition: all 0.2s linear;
- -moz-transition: all 0.2s linear;
- -o-transition: all 0.2s linear;
- transition: all 0.2s linear;
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- -o-transform: scale(1);
- transform: scale(1);
-}
-
-.zci__def__audio:hover {
- background: #a7a7a7;
- color: #fff;
-}
-
-.zci__def__audio.is-showing {
- display: inline-block;
-}
-
-.zci__def__audio.is-loading {
- background: #c9481c;
- -webkit-transform: scale(.5);
- -moz-transform: scale(.5);
- -0-transform: scale(.5);
- transform: scale(.5);
-}
-
-.zci__def__audio.is-playing:hover,
-.zci__def__audio.is-playing {
- background: #60ae50;
- -webkit-transform: scale(.8);
- -moz-transform: scale(.8);
- -o-transform: scale(.8);
- transform: scale(.8);
-}
-
-.zci__def__audio--error {
- display: none;
- color: #aaa;
- font-style: italic;
- font-size: .5em;
-}
-
-.zci__def__audio--error.is-showing {
- display: inline;
-}
diff --git a/share/spice/dictionary/definition/dictionary_definition.js b/share/spice/dictionary/definition/dictionary_definition.js
index ca55a25876..bb5a72f9e4 100644
--- a/share/spice/dictionary/definition/dictionary_definition.js
+++ b/share/spice/dictionary/definition/dictionary_definition.js
@@ -161,18 +161,7 @@ var ddg_spice_dictionary = {
if (!api_result || !api_result.length) { return; }
- var url = api_result[0].fileUrl, // default to the first audio file
- $play_button = this.$el.find(".zci__def__audio"),
- $error = this.$el.find('.zci__def__audio--error'),
- onError = function() {
- $play_button.removeClass('is-showing');
- $error.text('Audio Unavailable');
- $error.addClass('is-showing');
- },
- onFinished = function() {
- $play_button.removeClass('is-playing');
- $play_button.text('►');
- };
+ var url = api_result[0].fileUrl; // default to the first audio file
// Try to find the audio url that was created by Macmillan (it usually sounds better).
for (var i=0,r; r=api_result[i]; i++) {
@@ -183,35 +172,11 @@ var ddg_spice_dictionary = {
// Audio URL should go to DDG's proxy server for privacy reasons.
url = '/audio/?u=' + url;
-
- $play_button.addClass('is-showing');
-
- $play_button.click(function() {
- $play_button.addClass('is-loading');
- $play_button.text('');
- // don't load the audio resources until they click the button:
- DDG.require('audio',function(player) {
- if (!player || !player.ready) {
- return onError();
- }
-
- player.play("dictionary-sound",url,{
- autoPlay: true,
- onload: function(success){
- if (!success) {
- onError();
- }
- },
- onplay: function() {
- $play_button.removeClass('is-loading');
- $play_button.addClass('is-playing');
- },
- onfinish: onFinished,
- });
- });
+ this.playBtn = new DDG.Views.PlayButton({
+ url: url,
+ after: this.$el.find('.zci__def__pronunciation')
});
-
}
}