Added a working tooltip for audio; however, a simple autoplay might b…

…e troublesome when audios are long and don't know when to pause. Would be nice if one can detect the visibility of the tooltip and add callbacks
phurwicz · Dec 26, 2020 · 015b9de · 015b9de
1 parent 624850f
commit 015b9de
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 16 deletions.
diff --git a/hover/core/explorer.py b/hover/core/explorer.py
@@ -48,7 +48,7 @@ class BokehForLabeledText(Loggable, ABC):
         ],
         # inspection details
         "tooltips": bokeh_hover_tooltip(
-            label=True, text=True, image=False, coords=True, index=True
+            label=True, text=True, image=False, audio=False, coords=True, index=True
         ),
         # bokeh recommends webgl for scalability
         "output_backend": "webgl",

diff --git a/hover/core/local_config.py b/hover/core/local_config.py
@@ -53,27 +53,17 @@ def bokeh_hover_tooltip(
         <div>
             <img
                 src="@image" height="60" alt="@image" width="60"
-                style="float: left; margin: 0px 5px 5px 0px;"
+                style="float: left; margin: 0px 0px 0px 0px;"
                 border="2"
             ></img>
         </div>
         """
     if audio:
         divbox += """
-        <audio id="sound" controls preload="auto">
-            <source src="@audio" controls>
-            </source>
-        </audio>
-        """
-        script += """
-        var audioclip = $("#sound")[0];
-        $( "div.tooltip" )
-          .mouseenter(function() {
-            audioclip.play();
-          })
-          .mouseleave(function() {
-            audioclip.pause();
-          });
+        <div>
+            <audio autoplay preload="auto" src="@audio">
+            </audio>
+        </div>
         """
     if coords:
         divbox += """
@@ -99,6 +89,7 @@ def bokeh_hover_tooltip(
             </span>
         </div>
         """
+
     divbox += divbox_suffix
     script += script_suffix
     return divbox + script