Merge pull request #996 from duckduckgo/brian/play-button

Convert dictionary definition to use new PlayButton view
duckduckgo · Aug 6, 2014 · 13736f7 · 13736f7
2 parents e8d50e4 + 1105890
commit 13736f7
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 101 deletions.
diff --git a/share/spice/dictionary/definition/content.handlebars b/share/spice/dictionary/definition/content.handlebars
@@ -5,8 +5,6 @@
 		<span class="zci__def__word">{{word}}</span>
 	{{/if}}
 	<span class="zci__def__pronunciation"></span>
-	<span class="zci__def__audio ddgsi">►</span>
-	<span class="zci__def__audio--error"></span>
 </h3>
 <ul>
 {{#definitions}}

diff --git 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
@@ -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')
         });
-
     }
 }