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

fix search bar, increments, hide/display

Browse Source
This commit is contained in:
MoizAhmedd
2021-03-15 15:24:16 -04:00
parent 070749b8ad
commit 474c10248c
3 changed files with 125 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
background.js
View File

@@ -3,7 +3,7 @@ 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)) {
currVideoID = tab.url.split('?v=')[1].slice(0,11);
let endpoint = `http://localhost:5000/get-mapping?videoid=${currVideoID}`;
let endpoint = `http://3.137.212.199:5000/get-mapping?videoid=${currVideoID}`;
var xhr = new XMLHttpRequest();
xhr.open("GET", endpoint, true);
xhr.onreadystatechange = function () {

110
content.js
View File

@@ -6,29 +6,62 @@ let timestamps = [];
function openSearchBar(e) {
//Open search bar on option+f
if (window.location.href.includes('watch') && e.code=="KeyF" && e.altKey) {
createSearchBar();
document.addEventListener('keydown',seekToTimeStamp);
// document.getElementById('searchBar___container').classList.add("activeSearch");
}
if (!document.getElementById('searchBarOuter')) {
createSearchBar();
document.addEventListener('keydown',seekToTimeStamp);
} else if (document.getElementById('searchBarOuter').style.display == 'none') {
word = '';
idx = 0;
numWords = 0;
timestamps = [];
document.getElementById('searchBarInput').value = '';
document.getElementById('wordCounter').innerHTML = `${idx} of ${numWords}`;
document.getElementById('searchBarOuter').style.display = "flex";
}
}
}
function nextTimeStamp(increment='up') {
if ( increment == 'up' ) {
idx += 1;
} else {
idx -= 1;
}
let timestamp = timestamps[idx];
video = document.getElementsByTagName('video')[0];
video.pause();
video.currentTime = timestamp;
video.play();
document.getElementById('wordCounter').innerHTML = `${idx} of ${numWords}`;
}
function seekToTimeStamp(e) {
if (e.key == "Enter" && (idx < numWords)) {
try {
let timestamp = timestamps[idx];
console.log(timestamp);
video = document.getElementsByTagName('video')[0];
video.pause();
video.currentTime = timestamp;
video.play();
idx += 1;
document.getElementById('wordCounter').innerHTML = `${idx} of ${numWords}`;
nextTimeStamp();
} catch(error) {
console.log(error);
}
}
}
function incrementUp(e) {
if (idx < numWords) {
nextTimeStamp();
}
}
function incrementDown(e) {
if (idx > 0) {
nextTimeStamp('down');
}
}
function closeSearch(e) {
document.getElementById('searchBarOuter').style.display = 'none';
}
function handleInput(e) {
word = e.target.value;
chrome.runtime.sendMessage({type:"getTimestamp",word:word}, function(response){
@@ -42,34 +75,50 @@ function handleInput(e) {
function createSearchBar(){
var searchBarOuter = document.createElement('div')
searchBarOuter.style = 'display:flex;flex-direction:row-reverse;'
var searchBarContainer = document.createElement('div')
searchBarContainer.style = 'margin-bottom:10px;width: 300px;height: 40px;background: #DADADA;border-radius: 5px;display:flex;justify-content: space-between;';
var searchBarOuter = document.createElement('div');
searchBarOuter.setAttribute('id','searchBarOuter');
var searchBarContainer = document.createElement('div')
searchBarContainer.setAttribute('class','searchBarContainer');
var searchBarInput = document.createElement('input');
searchBarInput.style = 'margin:1%;height:30px;border:none;background: #DADADA;';
searchBarInput.setAttribute('id','searchBarInput');
searchBarInput.setAttribute('name','query');
searchBarInput.setAttribute('type','text');
searchBarInput.setAttribute('placeholder','Search for a word');
searchBarInput.addEventListener('input',handleInput);
var counter = document.createElement('p')
var counter = document.createElement('p');
counter.setAttribute('id','wordCounter');
counter.innerHTML = `0 of 0`
counter.style = 'margin:0;line-height:40px;color:#2c2c2c;';
var verticalLine = document.createElement('div')
verticalLine.style = 'border-left: 1px solid #2c2c2c;'
var jump = document.createElement('div')
jump.style = 'display:flex';
jumpStyle = 'padding-left: 5px; padding-right: 5px;margin:0;line-height:40px;color:#2c2c2c;'
var jumpAnd = document.createElement('p')
var verticalLine = document.createElement('div');
verticalLine.setAttribute('class','verticalLine');
var jump = document.createElement('div')
jump.style = 'display:flex';
jumpStyle = 'padding-left: 5px; padding-right: 5px;margin:0;line-height:40px;color:#2c2c2c;'
var jumpAnd = document.createElement('p')
jumpAnd.setAttribute('id','jumpAnd');
jumpAnd.innerHTML = '&and;'
jumpAnd.style = jumpStyle;
var jumpOr = document.createElement('p')
jumpAnd.style = jumpStyle;
jumpAnd.addEventListener('click',incrementUp);
var jumpOr = document.createElement('p')
jumpOr.setAttribute('id','jumpOr');
jumpOr.innerHTML = '&or;'
jumpOr.style = jumpStyle;
var close = document.createElement('p')
jumpOr.style = jumpStyle;
jumpOr.addEventListener('click',incrementDown);
var close = document.createElement('p')
close.setAttribute('id','closeIcon');
close.style = 'margin:0;line-height: 40px;padding-right:5px;font-size:1.5em;color:#2c2c2c;'
close.innerHTML = '&#215'
close.addEventListener('click',closeSearch);
//Link Elements
searchBarOuter.appendChild(searchBarContainer)
searchBarContainer.appendChild(searchBarInput)
searchBarContainer.appendChild(counter)
@@ -79,14 +128,13 @@ function createSearchBar(){
jump.appendChild(jumpOr);
searchBarContainer.appendChild(close);
var list = document.getElementById('primary');
var list = document.getElementById('primary-inner');
console.log(list.childNodes[0]);
list.insertBefore(searchBarOuter,list.childNodes[0]);
}
document.addEventListener('keydown',openSearchBar);
// document.addEventListener('click',createSearchBar);

102
styles.css
View File

@@ -1,63 +1,51 @@
.centered {
width: 100%;
top: 50%;
transform: translate(0,-50%);
}
.activeJump {
cursor: pointer;
color: #424242;
}
.activeSearch {
opacity: 1 !important;
transform: translateY(3px) !important;
transition: all 150ms linear;
#searchBarOuter {
display:flex;
flex-direction:row-reverse;
}
#searchBar___container .searchBar___inputContainer {
display: inline-block;
position: absolute;
height: 50px;
width: 96%;
padding: 0 2% 0 2%;
}
#searchBar___container .searchBar___inputContainer .searchBar___input {
padding: 0;
display: inline-block;
height: 24px;
border: none;
font-size: 16px;
width: 240px;
}
#searchBar___container .searchBar___inputContainer .searchBar___input:focus {
outline-width: 0;
}
#searchBar___container .searchBar___inputContainer .searchBar___counter {
display: inline-block;
text-align: center;
border-right: 1px solid #aaa;
width: 60px;
color: #aaa;
}
#searchBar___container .searchBar___inputContainer .searchBar___jump {
display: inline-block;
text-align: center;
width: 60px;
color: #aaa;
right: 0;
}
#searchBar___container .searchBar___inputContainer .searchBar___jump span {
padding-left: 5px;
padding-right: 5px;
}
#searchBar___container .searchBar___close {
cursor: pointer;
display: inline-block;
position: absolute;
width: 20px;
right: 5px;
color: black;
}
.searchBarContainer {
display:flex;
justify-content: space-between;
margin-bottom:10px;
width: 300px;
height: 40px;
background: #DADADA;
border-radius: 5px;
}
#searchBarInput {
margin:1%;
height:30px;
border:none;
background: #DADADA;
}
#wordCounter {
margin:0;
line-height:40px;
color:#2c2c2c;
}
.verticalLine {
border-left: 1px solid #2c2c2c;
}
#jumpAnd:hover {
cursor: pointer;
color: #7c7c7c !important;
}
#jumpOr:hover {
cursor: pointer;
color: #7c7c7c !important;
}
#closeIcon:hover {
cursor:pointer;
color: red !important;
}
::placeholder {
font-style: italic;