Skip to content

Commit

Permalink
added settings panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@adeora7
adeora7 committed May 18, 2018
1 parent 29a1dc1 commit 94bfe5c
Show file tree
Hide file tree
Showing 7 changed files with 226 additions and 64 deletions.
16 changes: 16 additions & 0 deletions background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@ var main = {
tab_create : 0
}

var showIconsToggle = "yes";

function updateShowIconsVariable(){
chrome.storage.sync.get( "youtube_queue_extension_show_icons", function(data){
if( data["youtube_queue_extension_show_icons"] != undefined)
showIconsToggle = data["youtube_queue_extension_show_icons"];
});
}
updateShowIconsVariable();

chrome.storage.sync.get('youtube_queue_extension_queue', function(data){
if(data['youtube_queue_extension_queue'] == undefined)
{
Expand Down Expand Up @@ -345,6 +355,12 @@ chrome.runtime.onMessage.addListener(
reorderQueue(request.newPositions);
sendResponse({res: "Order Changed"});
}
else if(request.greeting == "checkShowIconsToggle"){
sendResponse({res: showIconsToggle});
}
else if(request.greeting == "updatedShowIcons"){
updateShowIconsVariable();
}
// else if(request.greeting == "new_feature"){
// chrome.storage.sync.get('youtube_queue_extension_v140', function(data){
// sendResponse({feature: data['youtube_queue_extension_v140']});
Expand Down
87 changes: 75 additions & 12 deletions content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,14 @@ var songToAdd = -1;
document.getElementById("play_next").addEventListener('click', play_next, false);
document.getElementById("pause_play").addEventListener('click', play_pause, false);
document.getElementById("play_previous").addEventListener('click', play_previous, false);
document.getElementById("loop_all").addEventListener('click', toggle_loop, false);
document.getElementById("settings").addEventListener('click', open_settings, false);
document.getElementById("empty").addEventListener('click', empty_queue, false);

// settings listeners
document.getElementById("repeatAll").addEventListener('click', toggle_loop, false);
document.getElementById("showIcons").addEventListener('click', toggle_show_icons, false);

//settings listeners end

function hideP(){
$("#dropdown1").removeClass("active");
Expand Down Expand Up @@ -74,6 +79,15 @@ var removeSpecific = function(){

//popup functions end

//settins
function open_settings(){
$("#settingsWindowHead").html("Settings");
$("#settingsWindowDone").html("Done");
$("#layer").fadeIn("fast");
$("#settingsWindow").fadeIn("medium");
}
//settings ends

//loop functions start
function toggle_loop(){
chrome.storage.sync.get("youtube_queue_extension_toggle", function(data){
Expand All @@ -85,19 +99,19 @@ function toggle_loop(){
else{
if(data["youtube_queue_extension_toggle"] == "loop"){
chrome.storage.sync.set({"youtube_queue_extension_toggle" : "no_loop"}, function(){
$('#loop_all').tooltip('remove');
$("#loop_all").attr("data-tooltip", "No Loop");
$("#loop_all").tooltip();
$("#loop_all").css("opacity", "0.3");
// $('#loop_all').tooltip('remove');
// $("#loop_all").attr("data-tooltip", "No Loop");
// $("#loop_all").tooltip();
// $("#loop_all").css("opacity", "0.3");
});
}
else
{
chrome.storage.sync.set({"youtube_queue_extension_toggle" : "loop"}, function(){
$("#loop_all").tooltip('remove');
$("#loop_all").attr("data-tooltip", "Loop");
$("#loop_all").tooltip();
$("#loop_all").css("opacity", "1");
// $("#loop_all").tooltip('remove');
// $("#loop_all").attr("data-tooltip", "Loop");
// $("#loop_all").tooltip();
// $("#loop_all").css("opacity", "1");
});
}
}
Expand All @@ -106,6 +120,36 @@ function toggle_loop(){
}
//loop functions end

//show icons function
function toggle_show_icons(){
chrome.storage.sync.get("youtube_queue_extension_show_icons", function(data){
if(data["youtube_queue_extension_show_icons"] == undefined || (data["youtube_queue_extension_show_icons"] != "no" && data["youtube_queue_extension_show_icons"] != "yes") ){
chrome.storage.sync.set({"youtube_queue_extension_show_icons" : "yes"}, function(){

});
}
else{
if(data["youtube_queue_extension_show_icons"] == "yes"){
chrome.storage.sync.set({"youtube_queue_extension_show_icons" : "no"}, function(){
chrome.runtime.sendMessage({greeting: "updatedShowIcons"}, function(res){

});
});
}
else
{
chrome.storage.sync.set({"youtube_queue_extension_show_icons" : "yes"}, function(){
chrome.runtime.sendMessage({greeting: "updatedShowIcons"}, function(res){

});
});
}
}

});
}
//show icons function ends

function load_tooltips(){
chrome.storage.sync.get("youtube_queue_extension_toggle", function(data){
if(data["youtube_queue_extension_toggle"] == undefined || (data["youtube_queue_extension_toggle"] != "no_loop" && data["youtube_queue_extension_toggle"] != "loop") ){
Expand All @@ -115,14 +159,27 @@ function load_tooltips(){
}
chrome.storage.sync.get("youtube_queue_extension_toggle", function(data){
if(data["youtube_queue_extension_toggle"] == "no_loop"){
$("#loop_all").attr("data-tooltip", "No Loop");
$("#loop_all").css("opacity", "0.3");
$("#repeatAll").attr("checked", false);
}
else
$("#loop_all").attr("data-tooltip", "Loop");
$("#repeatAll").attr("checked", true);
});
});

chrome.storage.sync.get("youtube_queue_extension_show_icons", function(data){
if(data["youtube_queue_extension_show_icons"] == undefined || (data["youtube_queue_extension_show_icons"] != "no" && data["youtube_queue_extension_show_icons"] != "yes") ){
chrome.storage.sync.set({"youtube_queue_extension_show_icons" : "yes"}, function(){

});
}
chrome.storage.sync.get("youtube_queue_extension_show_icons", function(data){
if(data["youtube_queue_extension_show_icons"] == "no"){
$("#showIcons").attr("checked", false);
}
else
$("#showIcons").attr("checked", true);
});
});

}
load_tooltips();
Expand Down Expand Up @@ -835,6 +892,11 @@ $("#editWindowDone").click(function(){
$("#layer").fadeOut("fast");
});

$("#settingsWindowDone").click(function(){
$("#settingsWindow").fadeOut("medium");
$("#layer").fadeOut("fast");
});

$("#infoClose").click(function(){
$("#info").fadeOut("medium");
$("#layer").fadeOut("fast");
Expand All @@ -849,6 +911,7 @@ $(document).ready(function(){
fillLoadlist();
$("#layer").hide();
$("#editWindow").hide();
$("#settingsWindow").hide();
$("#info").hide();
// getFeaturedPlaylists();
displayMessageStoreEmpty();
Expand Down
32 changes: 28 additions & 4 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ body{
padding: 10px;
border-radius: 50%;
background-color: #C70D14;
cursor: pointer;
}
.control-icon img{
width:25px;
Expand Down Expand Up @@ -405,7 +406,7 @@ input:focus{
max-height: 300px !important;
}

#editWindow{
#editWindow, #settingsWindow{
z-index:10;
width:80%;
margin-left: 10%;
Expand All @@ -419,20 +420,20 @@ input:focus{
-moz-box-shadow: 0px 0px 9px 0px rgba(158,152,158,1);
box-shadow: 0px 0px 9px 0px rgba(158,152,158,1);
}
#editWindowHead{
#editWindowHead, #settingsWindowHead{
padding-left: 10px;
height: 35px;
line-height: 35px;
border-bottom: 1px solid #DADADA;
font-size: 16px;
color: #D4030B;
}
#editWindowBody{
#editWindowBody, #settingsWindowBody{
min-height: 40px;
overflow-y:auto;
max-height: 210px;
}
#editWindowDone{
#editWindowDone, #settingsWindowDone{
height:35px;
line-height: 35px;
cursor:pointer;
Expand Down Expand Up @@ -679,4 +680,27 @@ box-shadow: 0px 0px 9px 0px rgba(158,152,158,1);
margin-left: 5%;
margin-top: 5px;
margin-bottom: 5px;
}
.settingsWindowBody{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.settingsOptionEach{
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #DADADA;
padding: 5px;
}
.settingsOptionTitle{
font-size:14px;
}
.settingsOptionButton > input[type="checkbox"]{
position: relative !important;
left:0 !important;
opacity: 1 !important;
width: 18px;
height: 18px;
}
Binary file added images/settings.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 55 additions & 45 deletions inject.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,51 +6,61 @@ function removeDone(value, index, self){
}

function addIcon(){
var nl = document.getElementsByTagName("ytd-thumbnail");
var thumbs = [];
for(var i = nl.length; i--; thumbs.unshift(nl[i]));
thumbs = thumbs.filter( removeDone );
var url = "https://www.youtube.com";
for (let i = 0; i < thumbs.length; i++) {
var node = document.createElement("yt-icon");
var textnode = document.createTextNode("Q");
node.appendChild(textnode);
var cssT = `font-weight: 800;
font-size: 19px;
background-color: red;
color: white;
z-index: 2000;
opacity: 0.7;
width: 30px;
height: 30px;
cursor: pointer;`
node.setAttribute("style", cssT);
node.setAttribute("title", "Add to Queue");
node.setAttribute("href", url + thumbs[i].children[0].getAttribute("href"));
node.onmouseover = function(){
this.style.opacity = "1";
};
node.onmouseleave = function(){
this.style.opacity = "0.7";
this.style.backgroundColor = "red";
};
node.onmousedown = function(){
this.style.backgroundColor = "#96281B";
}
node.onmouseup = function(){
this.style.backgroundColor = "red";
}
node.onclick = function(event){
// console.log(event);
event.stopPropagation();
var link = this.getAttribute("href");
chrome.runtime.sendMessage({greeting: "addIconClicked", link : link}, function(res) {
//Request sent to add video to queue
});
}
thumbs[i].appendChild(node);
}
thumbsDone = thumbsDone.concat(thumbs);
chrome.runtime.sendMessage({greeting: "checkShowIconsToggle"}, function(res) {
if(res.res == "yes")
{

var nl = document.getElementsByTagName("ytd-thumbnail");
var thumbs = [];
for(var i = nl.length; i--; thumbs.unshift(nl[i]));
thumbs = thumbs.filter( removeDone );
var url = "https://www.youtube.com";
for (let i = 0; i < thumbs.length; i++) {
var node = document.createElement("yt-icon");
var textnode = document.createTextNode("Q");
node.appendChild(textnode);
var cssT = `font-weight: 800;
font-size: 19px;
background-color: red;
color: white;
z-index: 2000;
opacity: 0.5;
width: 30px;
height: 30px;
cursor: pointer;`
node.setAttribute("style", cssT);
node.setAttribute("title", "Add to Queue");
node.setAttribute("href", url + thumbs[i].children[0].getAttribute("href"));
node.onmouseover = function(){
this.style.opacity = "1";
};
node.onmouseleave = function(){
this.style.opacity = "0.5";
this.style.backgroundColor = "red";
};
node.onmousedown = function(){
this.style.backgroundColor = "#96281B";
}
node.onmouseup = function(){
this.style.backgroundColor = "red";
}
node.onclick = function(event){
// console.log(event);
event.stopPropagation();
var link = this.getAttribute("href");
chrome.runtime.sendMessage({greeting: "addIconClicked", link : link}, function(res) {
//Request sent to add video to queue
});
}
thumbs[i].appendChild(node);
}
thumbsDone = thumbsDone.concat(thumbs);



}
});

}

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "Youtube Queue",
"description": "Allows you to queue youtube videos and plays them for you.",
"version": "1.40",
"version": "1.41",
"permissions": ["contextMenus", "tabs", "<all_urls>", "storage"],
"browser_action" : {
"default_icon" : "icon48.png",
Expand Down
Loading

0 comments on commit 94bfe5c

Please sign in to comment.