timeline: Eliminate playheadOffset

- By styling the playhead_top div with `margin-left: -12px` and
  adjusting the position of the other playhead components accordingly,
  the need for a `playheadOffset` scope variable can be completely
  eliminated. All of its positioning code becomes slightly simpler.

Author: ferdnyc

src/timeline/index.html

@@ -44,7 +44,7 @@
 		<!-- RULER (right of screen) -->
 		<div id="scrolling_ruler">
 			<!-- PLAYHEAD TOP -->
-			<div tl-playhead class="playhead playhead-top" ng-right-click="showPlayheadMenu(project.playhead_position)" style="left:{{(project.playhead_position * pixelsPerSecond) + playheadOffset}}px;">
+			<div tl-playhead class="playhead playhead-top" ng-right-click="showPlayheadMenu(project.playhead_position)" style="left:{{project.playhead_position * pixelsPerSecond}}px;">
 				<div class="playhead-line-small"></div>
 			</div>
 			<!-- Ruler extends beyond tracks area at least for a width of vertical scroll bar (or more, like 50px here) -->
@@ -122,7 +122,7 @@
 			</div>
 
 			<!-- FLOATING PLAYHEAD LINE -->
-			<div class="playhead playhead-line" style="height: {{ playhead_height }}px; left:{{(project.playhead_position * pixelsPerSecond) + playheadOffset}}px;"></div>
+			<div class="playhead playhead-line" style="height: {{ playhead_height }}px; left:{{project.playhead_position * pixelsPerSecond}}px;"></div>
 
 			<!-- SNAPPING HINT LINE -->
 			<div ng-show="snapline" class="snapping-line" style="height: {{ playhead_height }}px; left:{{ snapline_position}}px;"></div>
@@ -140,7 +140,7 @@
 		</div>
 
 		<div ng-show="debug" class="debug-window ui-corner-all">
-				<div class="debug-text ui-corner-all" style="width: 20%;">PROJECT DATA: <pre>pixels per second: {{pixelsPerSecond}} <br> playhead offset: {{playheadOffset}} <br> {{project | json}}</pre></div>
+				<div class="debug-text ui-corner-all" style="width: 20%;">PROJECT DATA: <pre>pixels per second: {{pixelsPerSecond}}<br> {{project | json}}</pre></div>
 				<div class="debug-text ui-corner-all" style="width: 70%;">ACTIONS:<br><br>
 					<div>
 						<p>Add Clips:</p>	

src/timeline/js/controllers.js

@@ -56,7 +56,6 @@ App.controller("TimelineCtrl", function ($scope) {
 
   // Additional variables used to control the rendering of HTML
   $scope.pixelsPerSecond = parseFloat($scope.project.tick_pixels) / parseFloat($scope.project.scale);
-  $scope.playheadOffset = 0;
   $scope.playhead_animating = false;
   $scope.playhead_height = 300;
   $scope.playheadTime = secondsToTime($scope.project.playhead_position, $scope.project.fps.num, $scope.project.fps.den);
@@ -93,8 +92,8 @@ App.controller("TimelineCtrl", function ($scope) {
     $scope.playheadTime = secondsToTime(position_seconds, $scope.project.fps.num, $scope.project.fps.den);
 
     // Use JQuery to move playhead (for performance reasons) - scope.apply is too expensive here
-    $(".playhead-top").css("left", (($scope.project.playhead_position * $scope.pixelsPerSecond) + $scope.playheadOffset) + "px");
-    $(".playhead-line").css("left", (($scope.project.playhead_position * $scope.pixelsPerSecond) + $scope.playheadOffset) + "px");
+    $(".playhead-top").css("left", ($scope.project.playhead_position * $scope.pixelsPerSecond) + "px");
+    $(".playhead-line").css("left", ($scope.project.playhead_position * $scope.pixelsPerSecond) + "px");
     $("#ruler_time").text($scope.playheadTime.hour + ":" + $scope.playheadTime.min + ":" + $scope.playheadTime.sec + ":" + $scope.playheadTime.frame);
   };
 

src/timeline/js/directives/playhead.js

@@ -37,10 +37,6 @@ App.directive("tlPlayhead", function () {
       // get the default top position so we can lock it in place vertically
       playhead_y_max = element.position().top;
 
-      // get the size of the playhead and line so we can determine the offset
-      var playhead_top_w = parseInt($(".playhead-top").css("width"), 10);
-      scope.playheadOffset = 0.0 - (playhead_top_w / 2.0);
-
       // Move playhead to new position (if it's not currently being animated)
       element.on("mousemove", function (e) {
         if (e.which === 1 && !scope.playhead_animating) { // left button

src/timeline/js/directives/ruler.js

@@ -121,8 +121,8 @@ App.directive("tlRuler", function ($timeout) {
 
         // Animate to new position (and then update scope)
         scope.playhead_animating = true;
-        $(".playhead-line").animate({left: playhead_left + scope.playheadOffset}, 200);
-        $(".playhead-top").animate({left: playhead_left + scope.playheadOffset}, 200, function () {
+        $(".playhead-line").animate({left: playhead_left}, 200);
+        $(".playhead-top").animate({left: playhead_left}, 200, function () {
           // Update playhead
           scope.movePlayhead(playhead_seconds);
 

src/timeline/media/css/main.css

@@ -63,9 +63,9 @@ img {
 .track { height: 64px; background-color: #000; margin-bottom: 8px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,50,50,1)), color-stop(100%,rgba(6,6,6,1))); border-top: 1px solid #4b92ad; border-bottom: 1px solid #4b92ad; border-right: 1px solid #4B92AD; border-top-right-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0px 0px 10px #000; }
 
 /* Playhead */
-.playhead-line { z-index: 9998; position: absolute; height:316px; top:0px; margin-left: 12px; width:1px; background-color:#ff0024; opacity:1;}
+.playhead-line { z-index: 9998; position: absolute; height:316px; top:0px; width:1px; background-color:#ff0024; opacity:1;}
 .playhead-line-small { z-index: 9999; position: absolute; height:20px; top:32px;; margin-left: 12px; width:1px; background-color:#ff0024; opacity:1;}
-.playhead-top { cursor:move; z-index: 9999; position: absolute; margin-left: 0px; margin-top: 12px; width:25px; height:32px; background-image: url(../images/play_head.png); opacity:1;}
+.playhead-top { cursor:move; z-index: 9999; position: absolute; margin-left: -12px; margin-top: 12px; width:25px; height:32px; background-image: url(../images/play_head.png); opacity:1;}
 .marker {position:absolute; top:30px;}
 
 /* Clips */