Skip to content

Commit b10a1bb

Browse files
th-chth-ch
committed
Fix navigation plugin
1 parent 0420f2e commit b10a1bb

File tree

5 files changed

+149
-52
lines changed

5 files changed

+149
-52
lines changed

‎plugins/navigation/back.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
const { listenAction } = require("../utils");
2-
const { ACTIONS, CHANNEL } = require("./actions.js");
1+
const path = require("path");
2+
3+
const { injectCSS, listenAction } = require("../utils");
4+
const { ACTIONS, CHANNEL } = require("./actions.js");
35

46
function handle(win) {
7+
injectCSS(win.webContents, path.join(__dirname, "style.css"));
58
listenAction(CHANNEL, (event, action) => {
69
switch (action) {
710
case ACTIONS.NEXT:

‎plugins/navigation/front.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
const { ElementFromFile, templatePath } = require('../utils');
1+
const { ElementFromFile, templatePath } = require("../utils");
22

33
function run() {
4-
const forwardButton = ElementFromFile(templatePath(__dirname, 'forward.html'));
5-
const backButton = ElementFromFile(templatePath(__dirname, 'back.html'));
6-
const menu = document.querySelector("ytmusic-pivot-bar-renderer");
4+
const forwardButton = ElementFromFile(
5+
templatePath(__dirname, "forward.html")
6+
);
7+
const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
8+
const menu = document.querySelector("ytmusic-pivot-bar-renderer");
79

8-
if (menu) {
9-
menu.prepend(forwardButton);
10-
menu.prepend(backButton);
11-
}
10+
if (menu) {
11+
menu.prepend(backButton, forwardButton);
12+
}
1213
}
1314

1415
module.exports = run;

‎plugins/navigation/style.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.navigation-item {
2+
font-family : Roboto, Noto Naskh Arabic UI, Arial, sans-serif;
3+
font-size : 20px;
4+
line-height : var(--ytmusic-title-1_-_line-height);
5+
font-weight : 500;
6+
color : #fff;
7+
--yt-endpoint-color : #fff;
8+
--yt-endpoint-hover-color : #fff;
9+
--yt-endpoint-visited-color: #fff;
10+
display : inline-flex;
11+
align-items : center;
12+
color : rgba(255, 255, 255, 0.5);
13+
cursor : pointer;
14+
margin : 0 var(--ytmusic-pivot-bar-tab-margin);
15+
}
16+
17+
.navigation-item:hover {
18+
color: #fff;
19+
}
20+
21+
.navigation-icon {
22+
display : inline-flex;
23+
-ms-flex-align : center;
24+
-webkit-align-items : center;
25+
align-items : center;
26+
-ms-flex-pack : center;
27+
-webkit-justify-content: center;
28+
justify-content : center;
29+
position : relative;
30+
vertical-align : middle;
31+
fill : var(--iron-icon-fill-color, currentcolor);
32+
stroke : none;
33+
width : var(--iron-icon-width, 24px);
34+
height : var(--iron-icon-height, 24px);
35+
animation : var(--iron-icon_-_animation);
36+
}

‎plugins/navigation/templates/back.html

+50-20
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,51 @@
1-
<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_back" role="tab" onclick="goToPreviousPage()">
2-
<yt-icon class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
3-
<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%;">
4-
<g class="style-scope yt-icon">
5-
<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">
6-
</path>
7-
</g>
8-
</svg>
9-
</yt-icon>
1+
<div
2+
class="style-scope ytmusic-pivot-bar-renderer navigation-item"
3+
tab-id="FEmusic_back"
4+
role="tab"
5+
onclick="goToPreviousPage()"
6+
>
7+
<div
8+
class="tab-icon style-scope ytmusic-pivot-bar-item-renderer yt-icon-container"
9+
>
10+
<svg
11+
viewBox="0 0 24 24"
12+
preserveAspectRatio="xMidYMid meet"
13+
focusable="false"
14+
class="style-scope yt-icon"
15+
style="pointer-events: none; display: block; width: 100%; height: 100%;"
16+
>
17+
<g class="style-scope yt-icon">
18+
<path
19+
class="st0"
20+
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"
21+
class="style-scope yt-icon"
22+
></path>
23+
</g>
24+
</svg>
25+
</div>
1026

11-
<paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to previous page">
12-
<iron-icon id="icon" class="style-scope paper-icon-button">
13-
<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%;">
14-
<g class="style-scope iron-icon">
15-
<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">
16-
</path>
17-
</g>
18-
</svg>
19-
</iron-icon>
20-
</paper-icon-button>
21-
</ytmusic-pivot-bar-item-renderer>
27+
<div
28+
class="search-icon style-scope ytmusic-search-box"
29+
role="button"
30+
tabindex="0"
31+
aria-disabled="false"
32+
title="Go to previous page"
33+
>
34+
<div id="icon" class="style-scope paper-icon-button navigation-icon">
35+
<svg
36+
viewBox="0 0 492 492"
37+
preserveAspectRatio="xMidYMid meet"
38+
focusable="false"
39+
class="style-scope iron-icon"
40+
style="pointer-events: none; display: block; width: 100%; height: 100%;"
41+
>
42+
<g class="style-scope iron-icon">
43+
<path
44+
class="st0"
45+
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"
46+
></path>
47+
</g>
48+
</svg>
49+
</div>
50+
</div>
51+
</div>

‎plugins/navigation/templates/forward.html

+49-22
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,53 @@
1-
<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_next" role="tab" onclick="goToNextPage()">
2-
<yt-icon class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
3-
<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%;">
4-
<g class="style-scope yt-icon">
5-
<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
1+
<div
2+
class="style-scope ytmusic-pivot-bar-renderer navigation-item"
3+
tab-id="FEmusic_next"
4+
role="tab"
5+
onclick="goToNextPage()"
6+
>
7+
<div class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
8+
<svg
9+
viewBox="0 0 24 24"
10+
preserveAspectRatio="xMidYMid meet"
11+
focusable="false"
12+
class="style-scope yt-icon"
13+
style="pointer-events: none; display: block; width: 100%; height: 100%;"
14+
>
15+
<g class="style-scope yt-icon">
16+
<path
17+
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
618
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
719
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
8-
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">
9-
</path>
10-
</g>
11-
</svg>
12-
</yt-icon>
20+
c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"
21+
class="style-scope yt-icon"
22+
></path>
23+
</g>
24+
</svg>
25+
</div>
1326

14-
<paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to next page">
15-
<iron-icon id="icon" class="style-scope paper-icon-button">
16-
<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%;">
17-
<g class="style-scope iron-icon">
18-
<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
27+
<div
28+
class="search-icon style-scope ytmusic-search-box"
29+
role="button"
30+
tabindex="0"
31+
aria-disabled="false"
32+
title="Go to next page"
33+
>
34+
<div id="icon" class="style-scope paper-icon-button navigation-icon">
35+
<svg
36+
viewBox="0 0 492 492"
37+
preserveAspectRatio="xMidYMid meet"
38+
focusable="false"
39+
class="style-scope iron-icon"
40+
style="pointer-events: none; display: block; width: 100%; height: 100%;"
41+
>
42+
<g class="style-scope iron-icon">
43+
<path
44+
class="st0"
45+
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
1946
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
20-
c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z">
21-
</path>
22-
</g>
23-
</svg>
24-
</iron-icon>
25-
</paper-icon-button>
26-
</ytmusic-pivot-bar-item-renderer>
47+
c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z"
48+
></path>
49+
</g>
50+
</svg>
51+
</div>
52+
</div>
53+
</div>

0 commit comments

Comments
 (0)