reset on new videos, toggle off, indices fixed

README.md

@@ -13,6 +13,9 @@ An extension that lets you search for words in a youtube video, and seeks to tha
 - <s>Write a function that will given a word and transcript get a list of timestamps</s>
 - <s>Write a function that will seek a youtube video to a timestamp</s>
 - <s>Searchbar + enter + shortcut logic</s>
+- <s>Reset transcript/search on new vids</s>
+- <s>Switch to indices starting at 1</s>
+- <s>Option F to toggle search bar off</s>
 
 ## Development Usage
 

background.js

@@ -2,8 +2,15 @@ let currVideoID;
 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
 	if ( tab.url && tab.url.includes('watch?v') ) {
 		if(currVideoID != tab.url.split('?v=')[1].slice(0,11)) {
+			//New video
+			if (changeInfo.url) {
+				chrome.tabs.sendMessage( tabId, {
+				  type: 'closeSearch',
+				  url: changeInfo.url
+				})
+			  }
 			currVideoID = tab.url.split('?v=')[1].slice(0,11);
-			let endpoint = `http://3.137.212.199:5000/get-mapping?videoid=${currVideoID}`;
+			let endpoint = `http://youtubedl.acceleratedcloudone.com:5000/get-mapping?videoid=${currVideoID}`;
 			var xhr = new XMLHttpRequest();
 			xhr.open("GET", endpoint, true);
 			xhr.onreadystatechange = function () {
@@ -27,4 +34,3 @@ chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
 	}
 });
 
-

content.js

@@ -3,6 +3,15 @@ let word = '';
 let idx = 0;
 let numWords = 0;
 let timestamps = [];
+
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
+	if (request.type == "closeSearch") {
+		closeSearch(true);
+		sendResponse(true);
+	}
+	return true;
+});
+
 function openSearchBar(e) {
 	//Open search bar on option+f
 	if (window.location.href.includes('watch') && e.code=="KeyF" && e.altKey) {
@@ -17,7 +26,9 @@ function openSearchBar(e) {
 			document.getElementById('searchBarInput').value = '';
 			document.getElementById('wordCounter').innerHTML = `${idx} of ${numWords}`;
 			document.getElementById('searchBarOuter').style.display = "flex";
-		} 
+		} else {
+			closeSearch();
+		}
 	} 
 } 
 
@@ -27,7 +38,7 @@ function nextTimeStamp(increment='up') {
 	} else {
 		idx -= 1;
 	}
-	let timestamp = timestamps[idx];
+	let timestamp = timestamps[idx-1];
 	video = document.getElementsByTagName('video')[0];
 	video.pause();
 	video.currentTime = timestamp;
@@ -53,7 +64,7 @@ function incrementUp(e) {
 }
 
 function incrementDown(e) {
-	if (idx > 0) {
+	if (idx > 1) {
 		nextTimeStamp('down');
 	}	
 }
@@ -67,9 +78,13 @@ function handleInput(e) {
 	chrome.runtime.sendMessage({type:"getTimestamp",word:word}, function(response){
 		if (response) {
 			numWords = response.length;
-			document.getElementById('wordCounter').innerHTML = `${idx} of ${numWords}`;
 			timestamps = response;
+		} else {
+			idx = 0;
+			numWords = 0;
+			timestamps = [];
 		}
+		document.getElementById('wordCounter').innerHTML = `${idx} of ${numWords}`;
 	})
 }
 
@@ -129,7 +144,6 @@ function createSearchBar(){
     searchBarContainer.appendChild(close);
     
 	var list = document.getElementById('primary-inner');
-	console.log(list.childNodes[0]);
 	list.insertBefore(searchBarOuter,list.childNodes[0]);
 	
 }
@@ -137,5 +151,3 @@ function createSearchBar(){
 document.addEventListener('keydown',openSearchBar);
 
 
-  
-

searchbars.html

@@ -1,37 +0,0 @@
-<div style="display: flex; background: white; border: 1px solid rgb(204, 204, 204); width: 50%; justify-content: space-between; height: 50px;">
-	<input name="query" type="text" style="border: none; height: 50px; font-size: 16px; width: 240px;">
-	<p id="wordCounter">0 of 0</p>
-	<div style="border-left: 1px solid black;">
-	</div>
-	<div style="display: flex;">
-		<p style="padding-left: 5px; padding-right: 5px;">∧</p>
-		<p style="padding-left: 5px; padding-right: 5px;">∨</p>
-	</div>
-	<p style="margin-top: 10px;">❌</p>
-</div>
-
-<div style="position: absolute;width: 300px;height: 40px;background: #DADADA;border-radius: 5px;display:flex;justify-content: space-between;">
-	<input style = "margin:1%;height:30px;border:none;background: #DADADA;" />
-	<p style = "margin:0;line-height:40px;color:#2c2c2c;" id="wordCounter">0 of 0</p>
-	<div style="border-left: 1px solid #2c2c2c;">
-	</div>
-	<div style="display: flex;">
-		<p style="padding-left: 5px; padding-right: 5px;margin:0;line-height:40px;color:#2c2c2c;">∧</p>
-		<p style="padding-left: 5px; padding-right: 5px;margin:0;line-height: 40px;color:#2c2c2c;">∨</p>
-	</div>
-	<p style="margin:0;line-height: 40px;padding-right:5px;font-size:1.5em;color:#2c2c2c;">&#215</p>
-</div>
-
-
-
-<div style="margin-top:100px;position: absolute;width: 300px;height: 40px;background: #2c2c2c;border-radius: 5px;display:flex;justify-content: space-between;">
-	<input style = "margin:1%;height:30px;border:none;background: #2c2c2c;color:white;" />
-	<p style = "margin:0;line-height:40px;color:#DADADA;" id="wordCounter">0 of 0</p>
-	<div style="border-left: 1px solid #DADADA;">
-	</div>
-	<div style="display: flex;">
-		<p style="padding-left: 5px; padding-right: 5px;margin:0;line-height:40px;color:#DADADA;">∧</p>
-		<p style="padding-left: 5px; padding-right: 5px;margin:0;line-height: 40px;color:#DADADA;">∨</p>
-	</div>
-	<p style="margin:0;line-height: 40px;padding-right:5px;font-size:1.5em;color:#DADADA;">&#215</p>
-</div>