alihan/youtube-video-search
1
0
Fork 0
mirror of https://github.com/MoizAhmedd/youtube-video-search.git synced 2021-07-26 20:45:06 +03:00
Code Issues Projects Releases Wiki Activity

reset on new videos, toggle off, indices fixed

Browse Source
This commit is contained in:
MoizAhmedd
2021-03-16 02:53:09 -04:00
parent 245369ce2f
commit 3afff3a21f
4 changed files with 30 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -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

10
background.js
View File

@@ -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) {
}
});

26
content.js
View File

@@ -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);

37
searchbars.html
View File

@@ -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>