smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-11 10:31:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix navigation plugin

Browse Source
This commit is contained in:
TC
2019-07-06 20:03:29 +02:00
parent 0420f2e49e
commit b10a1bb32d
5 changed files with 149 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/navigation/back.js
View File

@ -1,7 +1,10 @@
const { listenAction } = require("../utils");
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:

11
plugins/navigation/front.js
View File

@ -1,13 +1,14 @@
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 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);
menu.prepend(backButton, forwardButton);
}
}

36
plugins/navigation/style.css Normal file
View File

@ -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);
}

58
plugins/navigation/templates/back.html
View File

@ -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%;">
<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>
<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>
<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%;">
<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>
<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>
</div>
</div>

59
plugins/navigation/templates/forward.html
View File

@ -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%;">
<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
<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>
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>
</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%;">
<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
<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>
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>
</div>
</div>
</div>