From b10a1bb32dbea187422a43487527c379a9ddbb26 Mon Sep 17 00:00:00 2001
From: TC <th-ch@users.noreply.github.com>
Date: Sat, 6 Jul 2019 20:03:29 +0200
Subject: [PATCH] Fix navigation plugin

---
 plugins/navigation/back.js                |  7 ++-
 plugins/navigation/front.js               | 17 +++---
 plugins/navigation/style.css              | 36 ++++++++++++
 plugins/navigation/templates/back.html    | 70 +++++++++++++++-------
 plugins/navigation/templates/forward.html | 71 ++++++++++++++++-------
 5 files changed, 149 insertions(+), 52 deletions(-)
 create mode 100644 plugins/navigation/style.css

diff --git a/plugins/navigation/back.js b/plugins/navigation/back.js
index f19bb7de..54ee18a7 100644
--- a/plugins/navigation/back.js
+++ b/plugins/navigation/back.js
@@ -1,7 +1,10 @@
-const { listenAction } = require("../utils");
-const { ACTIONS, CHANNEL } = require("./actions.js");
+const path = require("path");
+
+const { injectCSS, listenAction } = require("../utils");
+const { ACTIONS, CHANNEL }        = require("./actions.js");
 
 function handle(win) {
+	injectCSS(win.webContents, path.join(__dirname, "style.css"));
 	listenAction(CHANNEL, (event, action) => {
 		switch (action) {
 			case ACTIONS.NEXT: 
diff --git a/plugins/navigation/front.js b/plugins/navigation/front.js
index 0d7848d2..92bc1325 100644
--- a/plugins/navigation/front.js
+++ b/plugins/navigation/front.js
@@ -1,14 +1,15 @@
-const { ElementFromFile, templatePath } = require('../utils');
+const { ElementFromFile, templatePath } = require("../utils");
 
 function run() {
-    const forwardButton = ElementFromFile(templatePath(__dirname, 'forward.html'));
-    const backButton = ElementFromFile(templatePath(__dirname, 'back.html'));
-    const menu = document.querySelector("ytmusic-pivot-bar-renderer");
+	const forwardButton = ElementFromFile(
+		templatePath(__dirname, "forward.html")
+	);
+	const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
+	const menu       = document.querySelector("ytmusic-pivot-bar-renderer");
 
-    if (menu) {
-        menu.prepend(forwardButton);
-        menu.prepend(backButton);
-    }
+	if (menu) {
+		menu.prepend(backButton, forwardButton);
+	}
 }
 
 module.exports = run;
diff --git a/plugins/navigation/style.css b/plugins/navigation/style.css
new file mode 100644
index 00000000..5c7331cd
--- /dev/null
+++ b/plugins/navigation/style.css
@@ -0,0 +1,36 @@
+.navigation-item {
+	font-family                : Roboto, Noto Naskh Arabic UI, Arial, sans-serif;
+	font-size                  : 20px;
+	line-height                : var(--ytmusic-title-1_-_line-height);
+	font-weight                : 500;
+	color                      : #fff;
+	--yt-endpoint-color        : #fff;
+	--yt-endpoint-hover-color  : #fff;
+	--yt-endpoint-visited-color: #fff;
+	display                    : inline-flex;
+	align-items                : center;
+	color                      : rgba(255, 255, 255, 0.5);
+	cursor                     : pointer;
+	margin                     : 0 var(--ytmusic-pivot-bar-tab-margin);
+}
+
+.navigation-item:hover {
+	color: #fff;
+}
+
+.navigation-icon {
+	display                : inline-flex;
+	-ms-flex-align         : center;
+	-webkit-align-items    : center;
+	align-items            : center;
+	-ms-flex-pack          : center;
+	-webkit-justify-content: center;
+	justify-content        : center;
+	position               : relative;
+	vertical-align         : middle;
+	fill                   : var(--iron-icon-fill-color, currentcolor);
+	stroke                 : none;
+	width                  : var(--iron-icon-width, 24px);
+	height                 : var(--iron-icon-height, 24px);
+	animation              : var(--iron-icon_-_animation);
+}
diff --git a/plugins/navigation/templates/back.html b/plugins/navigation/templates/back.html
index eda72891..157a4613 100644
--- a/plugins/navigation/templates/back.html
+++ b/plugins/navigation/templates/back.html
@@ -1,21 +1,51 @@
-<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_back" role="tab" onclick="goToPreviousPage()">
-    <yt-icon class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
-        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
-            <g class="style-scope yt-icon">
-                <path class="st0" d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z" class="style-scope yt-icon">
-                </path>
-            </g>
-        </svg>
-    </yt-icon>
+<div
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
+	tab-id="FEmusic_back"
+	role="tab"
+	onclick="goToPreviousPage()"
+>
+	<div
+		class="tab-icon style-scope ytmusic-pivot-bar-item-renderer yt-icon-container"
+	>
+		<svg
+			viewBox="0 0 24 24"
+			preserveAspectRatio="xMidYMid meet"
+			focusable="false"
+			class="style-scope yt-icon"
+			style="pointer-events: none; display: block; width: 100%; height: 100%;"
+		>
+			<g class="style-scope yt-icon">
+				<path
+					class="st0"
+					d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z"
+					class="style-scope yt-icon"
+				></path>
+			</g>
+		</svg>
+	</div>
 
-    <paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to previous page">
-        <iron-icon id="icon" class="style-scope paper-icon-button">
-            <svg viewBox="0 0 492 492"  preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
-                <g class="style-scope iron-icon">
-                    <path class="st0" d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z">
-                    </path>
-                </g>
-            </svg>
-        </iron-icon>
-    </paper-icon-button>
-</ytmusic-pivot-bar-item-renderer>
+	<div
+		class="search-icon style-scope ytmusic-search-box"
+		role="button"
+		tabindex="0"
+		aria-disabled="false"
+		title="Go to previous page"
+	>
+		<div id="icon" class="style-scope paper-icon-button navigation-icon">
+			<svg
+				viewBox="0 0 492 492"
+				preserveAspectRatio="xMidYMid meet"
+				focusable="false"
+				class="style-scope iron-icon"
+				style="pointer-events: none; display: block; width: 100%; height: 100%;"
+			>
+				<g class="style-scope iron-icon">
+					<path
+						class="st0"
+						d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z"
+					></path>
+				</g>
+			</svg>
+		</div>
+	</div>
+</div>
diff --git a/plugins/navigation/templates/forward.html b/plugins/navigation/templates/forward.html
index 0e5c5f5e..252a8721 100644
--- a/plugins/navigation/templates/forward.html
+++ b/plugins/navigation/templates/forward.html
@@ -1,26 +1,53 @@
-<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_next" role="tab" onclick="goToNextPage()">
-    <yt-icon class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
-        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
-            <g class="style-scope yt-icon">
-                <path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12
+<div
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
+	tab-id="FEmusic_next"
+	role="tab"
+	onclick="goToNextPage()"
+>
+	<div class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
+		<svg
+			viewBox="0 0 24 24"
+			preserveAspectRatio="xMidYMid meet"
+			focusable="false"
+			class="style-scope yt-icon"
+			style="pointer-events: none; display: block; width: 100%; height: 100%;"
+		>
+			<g class="style-scope yt-icon">
+				<path
+					d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12
                 c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028
                 c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265
-                c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z" class="style-scope yt-icon">
-                </path>
-            </g>
-        </svg>
-    </yt-icon>
+                c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"
+					class="style-scope yt-icon"
+				></path>
+			</g>
+		</svg>
+	</div>
 
-    <paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to next page">
-        <iron-icon id="icon" class="style-scope paper-icon-button">
-            <svg viewBox="0 0 492 492"  preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
-                <g class="style-scope iron-icon">
-                    <path class="st0" d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
+	<div
+		class="search-icon style-scope ytmusic-search-box"
+		role="button"
+		tabindex="0"
+		aria-disabled="false"
+		title="Go to next page"
+	>
+		<div id="icon" class="style-scope paper-icon-button navigation-icon">
+			<svg
+				viewBox="0 0 492 492"
+				preserveAspectRatio="xMidYMid meet"
+				focusable="false"
+				class="style-scope iron-icon"
+				style="pointer-events: none; display: block; width: 100%; height: 100%;"
+			>
+				<g class="style-scope iron-icon">
+					<path
+						class="st0"
+						d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
                     l183.9,183.9L109.3,430c-5.1,5.1-7.9,11.8-7.9,19c0,7.2,2.8,14,7.9,19l16.1,16.1c5.1,5.1,11.8,7.9,19,7.9s14-2.8,19-7.9L382.7,265
-                    c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z">
-                    </path>
-                </g>
-            </svg>
-        </iron-icon>
-    </paper-icon-button>
-</ytmusic-pivot-bar-item-renderer>
+                    c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z"
+					></path>
+				</g>
+			</svg>
+		</div>
+	</div>
+</div>