2.0 pre-stable

- Added shortcuts for video quality - Added OSD for shortcuts - Improved data migration - Core fixes - GUI fixes & optimizations
code-charity · Oct 27, 2019 · 086cd14 · 086cd14
1 parent a4d2316
commit 086cd14
Show file tree

Hide file tree

Showing 22 changed files with 527 additions and 392 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
     "manifest_version": 2,
-    "name": "ImprovedTube Beta",
-    "version": "2.0",
-    "version_name": "2.0 alpha",
+    "name": "ImprovedTube",
+    "version": "2.0.100",
+    "version_name": "2.0",
 
     "default_locale": "en",
     "description": "Make YouTube wonderful&Keep It clean! YouTube Player Size Playback Quality Auto HD Speed Style Adblock Volume Playlist Channel H.264",
@@ -43,6 +43,7 @@
             "youtube/css/channel.css",
             "youtube/css/blacklist.css",
             "youtube/css/settings.css",
+            "youtube/css/shortcuts.css",
             "youtube/css/themes/legacy.css",
             "youtube/css/themes/default.css",
             "youtube/css/themes/black.css",

diff --git a/popup/header.js b/popup/header.js
@@ -7,7 +7,7 @@ Satus.prototype.menu.header = {
         back: {
             type: 'button',
             class: 'back',
-            icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24" style=width:20px;height:20px><path d="M16.6 3c-.5-.5-1.3-.5-1.8 0l-8.3 8.3a1 1 0 0 0 0 1.4l8.3 8.3a1.2 1.2 0 1 0 1.8-1.7L9.4 12l7.2-7.3c.5-.4.5-1.2 0-1.7z"></svg>',
+            icon: '<svg viewBox="0 0 24 24" style=width:20px;height:20px><path d="M16.6 3c-.5-.5-1.3-.5-1.8 0l-8.3 8.3a1 1 0 0 0 0 1.4l8.3 8.3a1.2 1.2 0 1 0 1.8-1.7L9.4 12l7.2-7.3c.5-.4.5-1.2 0-1.7z"></svg>',
             onclick: function(satus, component) {
                 let status = satus.container.querySelector('main').goBack();
 
@@ -36,7 +36,7 @@ Satus.prototype.menu.header = {
 
         search: {
             type: 'button',
-            icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l4.3 4.3a1 1 0 0 0 1.4-1.5L15.5 14zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"></svg>',
+            icon: '<svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l4.3 4.3a1 1 0 0 0 1.4-1.5L15.5 14zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"></svg>',
             onclick: function(satus, component) {
                 let offset = component.offsetLeft - component.offsetWidth / 2;
 
@@ -63,7 +63,7 @@ Satus.prototype.menu.header = {
 
                     /*back: {
                         type: 'button',
-                        icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24" style=width:20px;height:20px><path d="M16.6 3c-.5-.5-1.3-.5-1.8 0l-8.3 8.3a1 1 0 0 0 0 1.4l8.3 8.3a1.2 1.2 0 1 0 1.8-1.7L9.4 12l7.2-7.3c.5-.4.5-1.2 0-1.7z"></svg>',
+                        icon: '<svg viewBox="0 0 24 24" style=width:20px;height:20px><path d="M16.6 3c-.5-.5-1.3-.5-1.8 0l-8.3 8.3a1 1 0 0 0 0 1.4l8.3 8.3a1.2 1.2 0 1 0 1.8-1.7L9.4 12l7.2-7.3c.5-.4.5-1.2 0-1.7z"></svg>',
                         onclick: function(satus, component) {
                             component.parentNode.parentNode.querySelector('.satus-dialog__scrim').click();
                         }
@@ -149,7 +149,7 @@ Satus.prototype.menu.header = {
         },
         vert: {
             type: 'button',
-            icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></svg>',
+            icon: '<svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></svg>',
 
             onclick: function(self, component) {
                 if (self.container.querySelector('main').dataset.path === '/settings/about') {
@@ -168,7 +168,7 @@ Satus.prototype.menu.header = {
                         save_as: {
                             type: 'button',
                             label: 'saveAs',
-                            icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24" style=width:16px;height:16px;margin-right:10px;margin-top:2px><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>',
+                            icon: '<svg viewBox="0 0 24 24" style=width:16px;height:16px;margin-right:10px;margin-top:2px><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>',
                             onclick: function(satus, component) {
                                 chrome.runtime.sendMessage({
                                     name: 'download',
@@ -194,12 +194,12 @@ Satus.prototype.menu.header = {
                         github: {
                             type: 'button',
                             label: 'github',
-                            icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 16 16" style=width:16px;height:16px;margin-right:10px><path fill-rule=evenodd d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></svg>'
+                            icon: '<svg viewBox="0 0 16 16" style=width:16px;height:16px;margin-right:10px><path fill-rule=evenodd d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></svg>'
                         },
                         rate: {
                             type: 'button',
                             label: 'rateUs',
-                            icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24" style=width:16px;height:16px;margin-right:10px><path fill=none d="M0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M13 2L8 8 7 9v10l2 2h9l2-1 3-8c1-2-1-4-3-4h-5l1-5-1-1h-2zM3 21l2-2v-8L3 9l-2 2v8l2 2z"></svg>'
+                            icon: '<svg viewBox="0 0 24 24" style=width:16px;height:16px;margin-right:10px><path fill=none d="M0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M13 2L8 8 7 9v10l2 2h9l2-1 3-8c1-2-1-4-3-4h-5l1-5-1-1h-2zM3 21l2-2v-8L3 9l-2 2v8l2 2z"></svg>'
                         }
                     });
                 }

diff --git a/popup/template-parts/analyzer.js b/popup/template-parts/analyzer.js
@@ -1,7 +1,7 @@
 Satus.prototype.menu.main.analyzer = {
     type: 'directory',
     label: 'analyzer',
-    icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0z"/></defs><defs><path id="b" d="M0 0h24v24H0z"/></defs><path d="M23 8a2 2 0 0 1-2.51 1.93l-3.56 3.55A2 2 0 0 1 15 16a2 2 0 0 1-1.93-2.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56A2 2 0 0 1 3 18c-1.1 0-2-.9-2-2a2 2 0 0 1 2.51-1.93l4.56-4.55A2 2 0 0 1 10 7a2 2 0 0 1 1.93 2.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56A2 2 0 0 1 21 6a2 2 0 0 1 2 2zm0 0a2 2 0 0 1-2.51 1.93l-3.56 3.55A2 2 0 0 1 15 16a2 2 0 0 1-1.93-2.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56A2 2 0 0 1 3 18c-1.1 0-2-.9-2-2a2 2 0 0 1 2.51-1.93l4.56-4.55A2 2 0 0 1 10 7a2 2 0 0 1 1.93 2.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56A2 2 0 0 1 21 6a2 2 0 0 1 2 2z"></svg>',
+    icon: '<svg viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0z"/></defs><defs><path id="b" d="M0 0h24v24H0z"/></defs><path d="M23 8a2 2 0 0 1-2.51 1.93l-3.56 3.55A2 2 0 0 1 15 16a2 2 0 0 1-1.93-2.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56A2 2 0 0 1 3 18c-1.1 0-2-.9-2-2a2 2 0 0 1 2.51-1.93l4.56-4.55A2 2 0 0 1 10 7a2 2 0 0 1 1.93 2.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56A2 2 0 0 1 21 6a2 2 0 0 1 2 2zm0 0a2 2 0 0 1-2.51 1.93l-3.56 3.55A2 2 0 0 1 15 16a2 2 0 0 1-1.93-2.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55 4.56A2 2 0 0 1 3 18c-1.1 0-2-.9-2-2a2 2 0 0 1 2.51-1.93l4.56-4.55A2 2 0 0 1 10 7a2 2 0 0 1 1.93 2.52l2.55 2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56A2 2 0 0 1 21 6a2 2 0 0 1 2 2z"></svg>',
 
     section: {
         type: 'section',

diff --git a/popup/template-parts/appearance.js b/popup/template-parts/appearance.js
@@ -1,6 +1,6 @@
 Satus.prototype.menu.main.appearance = {
     type: 'directory',
-    icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M7 16c.6 0 1 .5 1 1a2 2 0 0 1-2 2h-.5a4 4 0 0 0 .5-2c0-.6.5-1 1-1M18.7 3a1 1 0 0 0-.7.3l-9 9 2.8 2.7 9-9c.3-.4.3-1 0-1.4l-1.4-1.3a1 1 0 0 0-.7-.3zM7 14a3 3 0 0 0-3 3c0 1.3-1.2 2-2 2 1 1.2 2.5 2 4 2a4 4 0 0 0 4-4 3 3 0 0 0-3-3z"></svg>',
+    icon: '<svg viewBox="0 0 24 24"><path d="M7 16c.6 0 1 .5 1 1a2 2 0 0 1-2 2h-.5a4 4 0 0 0 .5-2c0-.6.5-1 1-1M18.7 3a1 1 0 0 0-.7.3l-9 9 2.8 2.7 9-9c.3-.4.3-1 0-1.4l-1.4-1.3a1 1 0 0 0-.7-.3zM7 14a3 3 0 0 0-3 3c0 1.3-1.2 2-2 2 1 1.2 2.5 2 4 2a4 4 0 0 0 4-4 3 3 0 0 0-3-3z"></svg>',
 
     header: {
         type: 'button',

diff --git a/popup/template-parts/blacklist.js b/popup/template-parts/blacklist.js
@@ -1,7 +1,7 @@
 Satus.prototype.menu.main.blacklist = {
     type: 'directory',
     label: 'blacklist',
-    icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM4 12a8 8 0 0 1 12.9-6.3L5.7 16.9c-1-1.3-1.7-3-1.7-4.9zm8 8c-1.9 0-3.5-.6-4.9-1.7L18.3 7.1A8 8 0 0 1 12 20z"></svg>',
+    icon: '<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM4 12a8 8 0 0 1 12.9-6.3L5.7 16.9c-1-1.3-1.7-3-1.7-4.9zm8 8c-1.9 0-3.5-.6-4.9-1.7L18.3 7.1A8 8 0 0 1 12 20z"></svg>',
 
     channels: {
     	type: 'directory',
@@ -36,7 +36,7 @@ Satus.prototype.menu.main.blacklist = {
 
 		        					delete: {
 			        					type: 'button',
-			        					icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v10zM18 4h-2.5l-.7-.7A1 1 0 0 0 14 3H9.9a1 1 0 0 0-.7.3l-.7.7H6c-.6 0-1 .5-1 1s.5 1 1 1h12c.6 0 1-.5 1-1s-.5-1-1-1z"></svg>',
+			        					icon: '<svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v10zM18 4h-2.5l-.7-.7A1 1 0 0 0 14 3H9.9a1 1 0 0 0-.7.3l-.7.7H6c-.6 0-1 .5-1 1s.5 1 1 1h12c.6 0 1-.5 1-1s-.5-1-1-1z"></svg>',
 			        					onclick: function (satus, component) {
 			        						satus.storage.set(item, false, '/blacklist/channels/');
 			        						component.parentNode.parentNode.classList.add('removing');
@@ -89,7 +89,7 @@ Satus.prototype.menu.main.blacklist = {
 
 		        					delete: {
 			        					type: 'button',
-			        					icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v10zM18 4h-2.5l-.7-.7A1 1 0 0 0 14 3H9.9a1 1 0 0 0-.7.3l-.7.7H6c-.6 0-1 .5-1 1s.5 1 1 1h12c.6 0 1-.5 1-1s-.5-1-1-1z"></svg>',
+			        					icon: '<svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v10zM18 4h-2.5l-.7-.7A1 1 0 0 0 14 3H9.9a1 1 0 0 0-.7.3l-.7.7H6c-.6 0-1 .5-1 1s.5 1 1 1h12c.6 0 1-.5 1-1s-.5-1-1-1z"></svg>',
 			        					onclick: function (satus, component) {
 			        						satus.storage.set(item, false, '/blacklist/videos/');
 			        						component.parentNode.parentNode.classList.add('removing');

diff --git a/popup/template-parts/channel.js b/popup/template-parts/channel.js
@@ -1,6 +1,6 @@
 Satus.prototype.menu.main.channel = {
   type: 'directory',
-  icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M10.5 17.1l4-2.2a1 1 0 0 0 0-1.8l-4-2.3a1 1 0 0 0-1.5 1v4.5a1 1 0 0 0 1.5.8zM21 6h-7.6l3-3c.2-.1.2-.4 0-.6s-.6-.2-.8 0L12 6 8.4 2.4c-.2-.2-.6-.2-.8 0s-.2.5 0 .7l3 2.9H3a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h18a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm-1 14H4a1 1 0 0 1-1-1V9c0-.6.5-1 1-1h16c.6 0 1 .5 1 1v10c0 .6-.5 1-1 1z"></svg>',
+  icon: '<svg viewBox="0 0 24 24"><path d="M10.5 17.1l4-2.2a1 1 0 0 0 0-1.8l-4-2.3a1 1 0 0 0-1.5 1v4.5a1 1 0 0 0 1.5.8zM21 6h-7.6l3-3c.2-.1.2-.4 0-.6s-.6-.2-.8 0L12 6 8.4 2.4c-.2-.2-.6-.2-.8 0s-.2.5 0 .7l3 2.9H3a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h18a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm-1 14H4a1 1 0 0 1-1-1V9c0-.6.5-1 1-1h16c.6 0 1 .5 1 1v10c0 .6-.5 1-1 1z"></svg>',
 
   channel_default_tab: {
     type: 'select',

diff --git a/popup/template-parts/general.js b/popup/template-parts/general.js
@@ -1,6 +1,6 @@
 Satus.prototype.menu.main.general = {
   type: 'directory',
-  icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M3 18c0 .6.5 1 1 1h5v-2H4a1 1 0 0 0-1 1zM3 6c0 .6.5 1 1 1h9V5H4a1 1 0 0 0-1 1zm10 14v-1h7c.6 0 1-.5 1-1s-.5-1-1-1h-7v-1c0-.6-.5-1-1-1s-1 .5-1 1v4c0 .6.5 1 1 1s1-.5 1-1zM7 10v1H4c-.6 0-1 .5-1 1s.5 1 1 1h3v1c0 .6.5 1 1 1s1-.5 1-1v-4c0-.6-.5-1-1-1s-1 .5-1 1zm14 2c0-.6-.5-1-1-1h-9v2h9c.6 0 1-.5 1-1zm-5-3c.6 0 1-.5 1-1V7h3c.6 0 1-.5 1-1s-.5-1-1-1h-3V4c0-.6-.5-1-1-1s-1 .5-1 1v4c0 .6.5 1 1 1z"></svg>',
+  icon: '<svg viewBox="0 0 24 24"><path d="M3 18c0 .6.5 1 1 1h5v-2H4a1 1 0 0 0-1 1zM3 6c0 .6.5 1 1 1h9V5H4a1 1 0 0 0-1 1zm10 14v-1h7c.6 0 1-.5 1-1s-.5-1-1-1h-7v-1c0-.6-.5-1-1-1s-1 .5-1 1v4c0 .6.5 1 1 1s1-.5 1-1zM7 10v1H4c-.6 0-1 .5-1 1s.5 1 1 1h3v1c0 .6.5 1 1 1s1-.5 1-1v-4c0-.6-.5-1-1-1s-1 .5-1 1zm14 2c0-.6-.5-1-1-1h-9v2h9c.6 0 1-.5 1-1zm-5-3c.6 0 1-.5 1-1V7h3c.6 0 1-.5 1-1s-.5-1-1-1h-3V4c0-.6-.5-1-1-1s-1 .5-1 1v4c0 .6.5 1 1 1z"></svg>',
 
   legacy_youtube: {
     type: 'switch',

diff --git a/popup/template-parts/mixer.js b/popup/template-parts/mixer.js
@@ -1,7 +1,7 @@
 Satus.prototype.menu.main.mixer = {
     type: 'directory',
     label: 'mixer',
-    icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M3 10v4c0 .6.5 1 1 1h3l3.3 3.3a1 1 0 0 0 1.7-.7V6.4a1 1 0 0 0-1.7-.7L7 9H4a1 1 0 0 0-1 1zm13.5 2c0-1.8-1-3.3-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 4.5v.2c0 .3.3.7.6.8a7 7 0 0 1 0 13 1 1 0 0 0-.6.8v.3c0 .6.6 1 1.2.8a9 9 0 0 0 0-16.8c-.6-.2-1.2.2-1.2.8z"></svg>',
+    icon: '<svg viewBox="0 0 24 24"><path d="M3 10v4c0 .6.5 1 1 1h3l3.3 3.3a1 1 0 0 0 1.7-.7V6.4a1 1 0 0 0-1.7-.7L7 9H4a1 1 0 0 0-1 1zm13.5 2c0-1.8-1-3.3-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 4.5v.2c0 .3.3.7.6.8a7 7 0 0 1 0 13 1 1 0 0 0-.6.8v.3c0 .6.6 1 1.2.8a9 9 0 0 0 0-16.8c-.6-.2-1.2.2-1.2.8z"></svg>',
 
     section: {
         type: 'section',

diff --git a/popup/template-parts/player.js b/popup/template-parts/player.js
@@ -1,6 +1,6 @@
 Satus.prototype.menu.main.player = {
     type: 'directory',
-    icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M8 6.8v10.4a1 1 0 0 0 1.5.8l8.2-5.2a1 1 0 0 0 0-1.7L9.5 6a1 1 0 0 0-1.5.8z"></svg>',
+    icon: '<svg viewBox="0 0 24 24"><path d="M8 6.8v10.4a1 1 0 0 0 1.5.8l8.2-5.2a1 1 0 0 0 0-1.7L9.5 6a1 1 0 0 0-1.5.8z"></svg>',
 
     section: {
         type: 'section',

diff --git a/popup/template-parts/playlist.js b/popup/template-parts/playlist.js
@@ -1,6 +1,6 @@
 Satus.prototype.menu.main.playlist = {
     type: 'directory',
-    icon: '<svg xmlns=//www.w3.org/2000/svg viewBox="0 0 24 24"><path d="M8 7h12c.6 0 1-.5 1-1s-.5-1-1-1H8c-.6 0-1 .5-1 1s.5 1 1 1zm12 10H8c-.6 0-1 .5-1 1s.5 1 1 1h12c.6 0 1-.5 1-1s-.5-1-1-1zm0-6H8c-.6 0-1 .5-1 1s.5 1 1 1h12c.6 0 1-.5 1-1s-.5-1-1-1zM4.5 16h-2c-.3 0-.5.2-.5.5s.2.5.5.5H4v.5h-.5c-.3 0-.5.2-.5.5s.2.5.5.5H4v.5H2.5c-.3 0-.5.2-.5.5s.2.5.5.5h2c.3 0 .5-.2.5-.5v-3c0-.3-.2-.5-.5-.5zm-2-11H3v2.5c0 .3.2.5.5.5s.5-.2.5-.5v-3c0-.3-.2-.5-.5-.5h-1c-.3 0-.5.2-.5.5s.2.5.5.5zm2 5h-2c-.3 0-.5.2-.5.5s.2.5.5.5h1.3l-1.7 2-.1.3v.2c0 .3.2.5.5.5h2c.3 0 .5-.2.5-.5s-.2-.5-.5-.5H3.2l1.7-2 .1-.3v-.2c0-.3-.2-.5-.5-.5z"></svg>',
+    icon: '<svg viewBox="0 0 24 24"><path d="M8 7h12c.6 0 1-.5 1-1s-.5-1-1-1H8c-.6 0-1 .5-1 1s.5 1 1 1zm12 10H8c-.6 0-1 .5-1 1s.5 1 1 1h12c.6 0 1-.5 1-1s-.5-1-1-1zm0-6H8c-.6 0-1 .5-1 1s.5 1 1 1h12c.6 0 1-.5 1-1s-.5-1-1-1zM4.5 16h-2c-.3 0-.5.2-.5.5s.2.5.5.5H4v.5h-.5c-.3 0-.5.2-.5.5s.2.5.5.5H4v.5H2.5c-.3 0-.5.2-.5.5s.2.5.5.5h2c.3 0 .5-.2.5-.5v-3c0-.3-.2-.5-.5-.5zm-2-11H3v2.5c0 .3.2.5.5.5s.5-.2.5-.5v-3c0-.3-.2-.5-.5-.5h-1c-.3 0-.5.2-.5.5s.2.5.5.5zm2 5h-2c-.3 0-.5.2-.5.5s.2.5.5.5h1.3l-1.7 2-.1.3v.2c0 .3.2.5.5.5h2c.3 0 .5-.2.5-.5s-.2-.5-.5-.5H3.2l1.7-2 .1-.3v-.2c0-.3-.2-.5-.5-.5z"></svg>',
 
     playlist_autoplay: {
         type: 'switch',