From c192e17ed55aba162c1558a0febb065606b02ff9 Mon Sep 17 00:00:00 2001
From: Brian Mathews <spoonart@gmail.com>
Date: Sat, 18 Apr 2015 17:30:42 -0700
Subject: [PATCH 1/2] Adds tooltip for timeline seeking

---
 index.css  | 30 +++++++++++++++++++++++++++++-
 index.html |  1 +
 index.js   | 23 +++++++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/index.css b/index.css
index 2bc2cf2..f4e8643 100644
--- 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
index 8f9a5fe..ce04eb0 100644
--- 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
index 1893a97..bf8964f 100644
--- 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)

From 8a0e5384ca993705bb668be2454bdfd368ea1de1 Mon Sep 17 00:00:00 2001
From: Brian Mathews <spoonart@gmail.com>
Date: Sat, 18 Apr 2015 22:03:30 -0700
Subject: [PATCH 2/2] Adds linear transition back to timeline animations

---
 index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.css b/index.css
index f4e8643..64c1cfe 100644
--- a/index.css
+++ b/index.css
@@ -250,7 +250,7 @@ body:hover #overlay, body:hover .titlebar {
   background-color: #31A357;
   width: 0%;
   height: 10px;
-  transition: width 0.25s;
+  transition: width 0.25s linear;
 }
 
 .controls-secondary {