From 94bfe5c5d05bae0271caf70c2ee52b0f5bc49493 Mon Sep 17 00:00:00 2001 From: Abhishek Deora Date: Sat, 19 May 2018 01:12:33 +0530 Subject: [PATCH] added settings panel --- background.js | 16 +++++++ content.js | 87 ++++++++++++++++++++++++++++++++------ css/main.css | 32 ++++++++++++-- images/settings.png | Bin 0 -> 726 bytes inject.js | 100 ++++++++++++++++++++++++-------------------- manifest.json | 2 +- popup.html | 53 ++++++++++++++++++++++- 7 files changed, 226 insertions(+), 64 deletions(-) create mode 100755 images/settings.png diff --git a/background.js b/background.js index e106373..c12c108 100644 --- a/background.js +++ b/background.js @@ -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) { @@ -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']}); diff --git a/content.js b/content.js index 7821846..db4b3f7 100644 --- a/content.js +++ b/content.js @@ -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"); @@ -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){ @@ -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"); }); } } @@ -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") ){ @@ -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(); @@ -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"); @@ -849,6 +911,7 @@ $(document).ready(function(){ fillLoadlist(); $("#layer").hide(); $("#editWindow").hide(); + $("#settingsWindow").hide(); $("#info").hide(); // getFeaturedPlaylists(); displayMessageStoreEmpty(); diff --git a/css/main.css b/css/main.css index 1111b91..bdc8cd0 100644 --- a/css/main.css +++ b/css/main.css @@ -49,6 +49,7 @@ body{ padding: 10px; border-radius: 50%; background-color: #C70D14; + cursor: pointer; } .control-icon img{ width:25px; @@ -405,7 +406,7 @@ input:focus{ max-height: 300px !important; } -#editWindow{ +#editWindow, #settingsWindow{ z-index:10; width:80%; margin-left: 10%; @@ -419,7 +420,7 @@ 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; @@ -427,12 +428,12 @@ box-shadow: 0px 0px 9px 0px rgba(158,152,158,1); 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; @@ -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; } \ No newline at end of file diff --git a/images/settings.png b/images/settings.png new file mode 100755 index 0000000000000000000000000000000000000000..7ef944dbd04ec62fc7b8a6e18e0df5e094a19fce GIT binary patch literal 726 zcmV;{0xA88P)YN+qP{pwr$(_iEZ1qZ96-5PuJ~1MYHO+QMS^|($dl>N@s#Yarwv9 zgt}IWNn3F}1)0MRITalju!24H z<{N4eRYSg^Cwp4WrHYCMq*7x=!^5Q7)3W0zMv`jdIYw6eh7bS9hI3eo4=XrF7F5NT znsVb_qS(lAO7b%=^C~}4hG9f=uUzPXT`O+TUbuyp*!7YN^RZdYhl+vUv05${K4m>_ zYr`{}Z?V|GS90SK=Hl|39LSE#0v@xEW4#E|TL$zd%s?)Z9mi0T*zS=5_Yhk-j#X5= z$4Y_>krAU!&B2ae2$D-ilpx5zGO<_8_hrPV1SzO^QHmgs$%rQjQdaSzEJ2=>5l;}L zwBkiUf_yF`J|ajy#f$$4QcOnVO6t0w4_Qr+(K2EvLDuj|JS)=*#CDeqxSQB2a;)sQ zh=GX@9rPhge=d*>kFfxkta9L2T;}qK-1v?SSbVDxJit2K*7K=cSccW_&gS4YUoP~* zt|d1oIEC#d7aopllK<-F@H1r?9`Wtl$TzaMCvRTyK4D&xZ`?wds}8J-1VxpWmX>C<36o)sW-vyoq5uE@07*qo IM6N<$f_6$-d;kCd literal 0 HcmV?d00001 diff --git a/inject.js b/inject.js index eb0c773..0b868a0 100644 --- a/inject.js +++ b/inject.js @@ -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; diff --git a/manifest.json b/manifest.json index aefd33e..188e5f0 100644 --- a/manifest.json +++ b/manifest.json @@ -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", "", "storage"], "browser_action" : { "default_icon" : "icon48.png", diff --git a/popup.html b/popup.html index e749d21..769449f 100644 --- a/popup.html +++ b/popup.html @@ -28,8 +28,8 @@
-
- +
+
@@ -93,6 +93,49 @@
+
+
+ +
+
+
+
+ Repeat All +
+
+ +
+
+
+
+ Show Add Icon on Thumbnails +
+
+ +
+
+
+
+ Full-Screen Mode +
+
+ +
+
+
+
+ Dark Mode +
+
+ +
+
+
+
+ +
+
+
@@ -175,6 +218,12 @@ Click on Empty icon to clear the queue. +
  • + 10. + + Reorder Queue by dragging and dropping the videos in the Queue. + +
    • Close