From 24c1773d8e412b65b1a8a8825b5a330a93e15b12 Mon Sep 17 00:00:00 2001
From: JannisX11 <jannis4236@gmail.com>
Date: Sun, 30 Apr 2023 16:28:53 +0200
Subject: [PATCH] Improve timeline performance slightly

---
 js/animations/timeline.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/js/animations/timeline.js b/js/animations/timeline.js
index 992c1f6a..110132af 100644
--- a/js/animations/timeline.js
+++ b/js/animations/timeline.js
@@ -213,12 +213,13 @@ const Timeline = {
 		Timeline.revealTime(seconds)
 	},
 	revealTime(time) {
-		var scroll = $('#timeline_body').scrollLeft();
+		let body = document.getElementById('timeline_body');
+		var scroll = body.scrollLeft;
 		var playhead = time * Timeline.vue._data.size + 8;
-		if (playhead < scroll || playhead > scroll + $('#timeline_vue').width() - Timeline.vue._data.head_width) {
-			$('#timeline_body').scrollLeft(playhead-16);
+		if (playhead < scroll || playhead > scroll + document.getElementById('timeline_vue').clientWidth - Timeline.vue._data.head_width) {
+			body.scrollLeft = playhead-16;
 		} else if (time == 0) {
-			$('#timeline_body').scrollLeft(0);
+			body.scrollLeft = 0;
 		}
 	},
 	setTimecode(time) {
@@ -228,7 +229,7 @@ const Timeline = {
 		let f = Math.floor((time%1) * second_fractions)
 		if ((s+'').length === 1) {s = '0'+s}
 		if ((f+'').length === 1) {f = '0'+f}
-		$('#timeline_timestamp').text(m + ':' + s  + ':' + f)
+		Timeline.vue.timestamp = `${m}:${s}:${f}`;
 	},
 	snapTime(time, animation) {
 		//return time;
@@ -651,6 +652,7 @@ Interface.definePanels(() => {
 				waveforms: Timeline.waveforms,
 				focus_channel: null,
 				playhead: Timeline.time,
+				timestamp: '0',
 
 				graph_editor_open: false,
 				graph_editor_channel: 'rotation',
@@ -1251,7 +1253,7 @@ Interface.definePanels(() => {
 				<div id="timeline_vue" :class="{graph_editor: graph_editor_open}">
 					<div id="timeline_header">
 						<div id="timeline_corner" v-bind:style="{width: head_width+'px'}">
-							<div id="timeline_timestamp"></div>
+							<div id="timeline_timestamp">{{ timestamp }}</div>
 							<div class="channel_axis_selector" v-if="graph_editor_open">
 								<div @click="graph_editor_axis = 'x';" :class="{selected: graph_editor_axis == 'x'}" style="color: var(--color-axis-x);">X</div>
 								<div @click="graph_editor_axis = 'y';" :class="{selected: graph_editor_axis == 'y'}" style="color: var(--color-axis-y);">Y</div>