Adds tooltip for timeline seeking

zrbarrita · Apr 19, 2015 · c192e17 · c192e17
1 parent 66de49e
commit c192e17
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/index.css b/index.css
@@ -166,6 +166,34 @@ body, html {
   border-radius: 3px;
 }
 
+#controls-timeline-tooltip {
+  background: #1F2021;
+  border-radius: 3px;
+  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
+  padding: 4px 8px;
+  color: #fff;
+  text-align: center;
+  font-size: 11px;
+  position: absolute;
+  bottom: 53px;
+  z-index: 100;
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+#controls-timeline-tooltip:after {
+  width: 0;
+  height: 0;
+  top: 100%;
+  left: 50%;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #1F2021;
+  content: "";
+  margin-left: -6px;
+  position: absolute;
+}
+
 #popup .button.bottom {
   position: absolute;
   bottom: 0;
@@ -222,7 +250,7 @@ body:hover #overlay, body:hover .titlebar {
   background-color: #31A357;
   width: 0%;
   height: 10px;
-  transition: width 0.25s linear;
+  transition: width 0.25s;
 }
 
 .controls-secondary {

diff --git a/index.html b/index.html
@@ -26,6 +26,7 @@
       <div id="idle"></div>
       <div id="controls">
         <div id="controls-timeline">
+          <div id="controls-timeline-tooltip"></div>
           <div id="controls-timeline-position"></div>
         </div>
         <div id="controls-main">

diff --git a/index.js b/index.js
@@ -155,6 +155,29 @@ $('#controls-timeline').on('click', function (e) {
   media.time(time)
 })
 
+function updateTimelineTooltip(e) {
+  var tooltip = $('#controls-timeline-tooltip')[0]
+  var percentage = e.pageX / $('#controls-timeline')[0].offsetWidth
+  var time =  formatTime(percentage * media.duration)
+  tooltip.innerHTML = time
+  tooltip.style.left = (e.pageX - tooltip.offsetWidth / 2) + "px"
+}
+
+$('#controls-timeline').on('mousemove', function (e) {
+  updateTimelineTooltip(e)
+})
+
+$('#controls-timeline').on('mouseover', function (e) {
+  var tooltip = $('#controls-timeline-tooltip')[0]
+  tooltip.style.opacity = 1
+  updateTimelineTooltip(e)
+})
+
+$('#controls-timeline').on('mouseout', function (e) {
+  var tooltip = $('#controls-timeline-tooltip')[0]
+  tooltip.style.opacity = 0
+})
+
 $(document).on('keydown', function (e) {
   if (e.keyCode === 27 && isFullscreen) return onfullscreentoggle(e)
   if (e.keyCode === 13 && e.metaKey) return onfullscreentoggle(e)