diff --git a/background.js b/background.js index cf3621d..e11167b 100644 --- a/background.js +++ b/background.js @@ -1,9 +1,8 @@ - chrome.tabs.onUpdated.addListener(function (tabID, changeInfo, tab){ if (changeInfo.status == 'complete') { chrome.pageAction.show(tab.id); - chrome.tabs.sendMessage(tabID, {url: tab.url}, function(response) { + chrome.tabs.sendMessage(tabID, {data: tab}, function(response) { }); } }); \ No newline at end of file diff --git a/content.js b/content.js index 568f105..13f45ba 100644 --- a/content.js +++ b/content.js @@ -1,10 +1,26 @@ -window.onkeyup = function(e){ - if(e.which == 'f'){ - if(sidePanel.style.display != "none") - sidePanel.style.display = "none"; - else - sidePanel.style.display = "block"; +var port = chrome.runtime.connect(); +var curNote = null; +function reload(url){ + + window.onkeyup = function(e){ + if(e.which == 'f'){ + if(sidePanel.style.display != "none") + sidePanel.style.display = "none"; + else + sidePanel.style.display = "block"; + } } + if(document.getElementById("youtubeButton") != null){ + return 0; + } + var button = document.createElement("button"); + button.id = "youtubeButton"; + button.style.cursor = "pointer"; + button.appendChild(document.createTextNode("YouTubeNotes")); + button.addEventListener('click', function(){ + var a = addPanel(url); + }); + document.getElementById('watch8-secondary-actions').appendChild(button); } var dictionary = {}; @@ -12,7 +28,7 @@ var emailID; var button = document.createElement("button"); var current_url; -function enableContent() { +function enableContent(url) { // if(document != null){ @@ -36,12 +52,12 @@ if(document != null){ alert('Please sign into your gmail account to access this extension'); } else - var a = addPanel(); + var a = addPanel(url); }); document.getElementById('watch8-secondary-actions').appendChild(button); } - -function addPanel(){ +} +function addPanel(url){ var curNote = null; var a = document.getElementById("mainPanel"); if(a != null && a.style.display != "none") @@ -50,119 +66,163 @@ function addPanel(){ a.style.display = "block"; return a; } - var sidePanel = document.createElement("div"); - sidePanel.style.backgroundColor = "white"; - sidePanel.style.overflowY = "scroll"; - sidePanel.style.height = (videoContainer.clientHeight - 10 )+ "px"; - sidePanel.id = "mainPanel"; - sidePanel.style.backgroundColor = "white"; - sidePanel.style.display = "block"; - sidePanel.style.position = "relative"; - sidePanel.style.left = "50%"; - sidePanel.style.transform = "translateX(-50%)"; - sidePanel.style.top = "-10px"; - sidePanel.style.margin = "5px"; - sidePanel.style.padding = "0px 5px"; - sidePanel.style.height = (document.getElementsByClassName("ytp-iv-video-content")[0].clientHeight - 10) + "px"; - var clickFunc = function () { - if(sidePanel.style.display != "none") - sidePanel.style.display = "none"; - else + if(a == null){ + var sidePanel = document.createElement("div"); + sidePanel.id = "mainPanel"; + sidePanel.style.backgroundColor = "white"; sidePanel.style.display = "block"; - }; - document.getElementsByClassName("ytp-size-button")[0].onclick = clickFunc; - document.getElementsByClassName("ytp-fullscreen-button")[0].onclick = clickFunc; - - var closeBut = document.createElement("button"); - closeBut.style.cursor = "pointer"; - closeBut.style.fontSize = "16px"; - closeBut.style.fontFamily = "cursive"; - closeBut.style.fontWeight = "700"; - closeBut.style.color = "#a90909"; - closeBut.style.position = "absolute"; - closeBut.style.right = "0%"; - closeBut.style.top = "0%"; - closeBut.onmouseenter = function(){ - closeBut.style.color = "black"; - closeBut.style.textDecoration = "underline"; - } - closeBut.onmouseleave = function(){ + sidePanel.style.position = "relative"; + sidePanel.style.left = "50%"; + sidePanel.style.transform = "translateX(-50%)"; + sidePanel.style.top = "-10px"; + sidePanel.style.margin = "5px"; + sidePanel.style.padding = "0px 5px"; + sidePanel.style.height = (document.getElementsByClassName("ytp-iv-video-content")[0].clientHeight - 10) + "px"; + var clickFunc = function () { + if(sidePanel.style.display != "none") + sidePanel.style.display = "none"; + else + sidePanel.style.display = "block"; + // console.log(sidePanel.style.display); + }; + document.getElementsByClassName("ytp-size-button")[0].onclick = clickFunc; + document.getElementsByClassName("ytp-fullscreen-button")[0].onclick = clickFunc; + + var closeBut = document.createElement("button"); + closeBut.style.cursor = "pointer"; + closeBut.style.fontSize = "16px"; + closeBut.style.fontFamily = "cursive"; + closeBut.style.fontWeight = "700"; closeBut.style.color = "#a90909"; - closeBut.style.textDecoration = "none"; - } - closeBut.onclick = function(){ - sidePanel.style.display="none"; - } - closeBut.appendChild(document.createTextNode("close")); - sidePanel.appendChild(closeBut); - + closeBut.style.position = "absolute"; + closeBut.style.right = "0%"; + closeBut.style.top = "0%"; + closeBut.onmouseenter = function(){ + closeBut.style.color = "black"; + closeBut.style.textDecoration = "underline"; + } + closeBut.onmouseleave = function(){ + closeBut.style.color = "#a90909"; + closeBut.style.textDecoration = "none"; + } + closeBut.onclick = function(){ + sidePanel.style.display="none"; + } + closeBut.appendChild(document.createTextNode("close")); + sidePanel.appendChild(closeBut); - var addBut = document.createElement("button"); - addBut.style.cursor = "pointer"; - addBut.style.fontSize = "16px"; - addBut.style.fontFamily = "cursive"; - addBut.style.fontWeight = "700"; - addBut.style.color = "#a90909"; - addBut.onclick = function(){ - //contact server for this - var startTime = document.getElementsByClassName("ytp-time-current")[0].innerText; - var note = createNote(); - } - addBut.onmouseenter = function(){ - addBut.style.color = "black"; - addBut.style.textDecoration = "underline"; - } - addBut.onmouseleave = function(){ + var addBut = document.createElement("button"); + addBut.style.cursor = "pointer"; + addBut.style.fontSize = "16px"; + addBut.style.fontFamily = "cursive"; + addBut.style.fontWeight = "700"; addBut.style.color = "#a90909"; - addBut.style.textDecoration = "none"; - } - addBut.appendChild(document.createTextNode("+ Add Note")); - sidePanel.appendChild(addBut); - sidePanel.appendChild(addBut); - addBut.addEventListener('click',function(){ - //TODO:contact server for this - var curtime = document.getElementsByClassName("ytp-time-current")[0].innerText; - console.log(curtime); - var emailid = document.getElementsByClassName("yt-masthead-picker-header yt-masthead-picker-active-account")[0].innerText; - console.log(emailid); + addBut.onclick = function(){ + //contact server for this + if(url != null){ + var postURL = "http://10.21.27.98:8000/youtubenotesapis/SaveNotes/?"; + var videoId = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/); + if(videoId != null) { + console.log("video id = ",videoId[1]); + } else { + console.log("The youtube url is not valid."); + } + var note = createNote(); + var timeStart = document.getElementsByClassName("ytp-time-current")[0].innerHTML; + note.startTime = timeStart; + console.log(timeStart); + if(curNote != null && videoId != null){ + var http = new XMLHttpRequest(); + console.log(curNote); + curNote.endTime = curNote.endTime != null ? curNote.endTime : note.startTime; + var notes = document.getElementById("curNoteId").firstChild.innerText; + notes = notes.length == 0 ? "" : notes; + var emailId = getEmailAddress(); + var params = "emailID=" + emailId + "&videoID=" + videoId[1] + "&startTime=" + curNote.startTime + "&endTime=" + curNote.endTime + "¬es=" + notes; + http.open("POST", postURL + params, true); + http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + http.onreadystatechange = function(){ + if(this.readyState == 4 && this.status == 200){ + document.getElementById("curNoteId").remove(); + sidePanel.appendChild(note.dom); + note.endTime = null; + document.getElementById("endButton").onclick = function(){ + curNote.endTime = document.getElementsByClassName("ytp-time-current")[0].innerHTML; + } + } + curNote = note; + } + http.send(); + }else{ + curNote = createNote(); + curNote.startTime = timeStart; + curNote.endTime = null; + sidePanel.appendChild(curNote.dom); + document.getElementById("endButton").onclick = function(){ + curNote.endTime = document.getElementsByClassName("ytp-time-current")[0].innerHTML; + } + } + console.log(curNote); - var inp = document.createElement("div"); - var textbox = document.createElement("textarea"); - var saveBut = document.createElement("button"); - saveBut.appendChild(document.createTextNode("Save")); - saveBut.style.cursor="pointer"; - inp.appendChild(textbox); - inp.appendChild(saveBut); - var view = document.createElement("details"); - view.style.cursor = "pointer"; - view.appendChild(inp); - sidePanel.appendChild(view); - saveBut.addEventListener('click',function(){ - //TODO:save to the database. - }); - }); - - //TODO:get content from server + } } + addBut.onmouseenter = function(){ + addBut.style.color = "black"; + addBut.style.textDecoration = "underline"; + } + addBut.onmouseleave = function(){ + addBut.style.color = "#a90909"; + addBut.style.textDecoration = "none"; + } + addBut.appendChild(document.createTextNode("+ Add Note")); + sidePanel.appendChild(addBut); + + var sideBar = document.getElementById("watch7-sidebar-contents"); + sideBar.insertBefore(sidePanel, sideBar.firstChild); + + return sidePanel; + } +} - var sideBar = document.getElementById("watch7-sidebar-contents"); - sideBar.insertBefore(sidePanel, sideBar.firstChild); - return sidePanel; +function createNote(){ + var objNote = {}; + var note = document.createElement("div"); + note.id = "curNoteId"; + var inputForm = document.createElement("p"); + var endBut = document.createElement("button"); + endBut.id = "endButton"; + endBut.appendChild(document.createTextNode("End Notes")); + var saveBut = document.createElement("button"); + saveBut.id = "saveButton"; + saveBut.appendChild(document.createTextNode("Save Notes")); + note.appendChild(inputForm); + note.appendChild(endBut); + note.appendChild(saveBut); + objNote.dom = note; + return objNote; } chrome.runtime.onMessage.addListener( function(request, sender, sendResponse){ - current_url = request.url; - enableContent(); - } -); + enableContent(request.data.url); + }); + + Element.prototype.remove = function() { + this.parentElement.removeChild(this); +} +NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { + for(var i = this.length - 1; i >= 0; i--) { + if(this[i] && this[i].parentElement) { + this[i].parentElement.removeChild(this[i]); + } + } +} -function getEmailAddress(argument) { - var emailElement = document.getElementsByClassName("yt-masthead-picker-header yt-masthead-picker-active-account"); - if (emailElement.length == 0) { - return false; +function getEmailAddress(){ + var email = document.getElementsByClassName("yt-masthead-picker-header yt-masthead-picker-active-account")[0].innerText.replace(/ +/g, ""); + if (email.length == 0) { + return null; } else { - emailID = emailElement[0].innerText; - return true; + return email; } } \ No newline at end of file