mirror of
https://github.com/Mastermindzh/tidal-hifi.git
synced 2025-11-04 10:49:26 +01:00
added settings
This commit is contained in:
74
src/pages/settings/preload.js
Normal file
74
src/pages/settings/preload.js
Normal file
@@ -0,0 +1,74 @@
|
||||
let notifications;
|
||||
let playBackControl;
|
||||
let api;
|
||||
let port;
|
||||
let menuBar;
|
||||
|
||||
const { store, settings } = require("./../../scripts/settings");
|
||||
const { ipcRenderer } = require("electron");
|
||||
const globalEvents = require("./../../constants/globalEvents");
|
||||
|
||||
/**
|
||||
* Sync the UI forms with the current settings
|
||||
*/
|
||||
function refreshSettings() {
|
||||
notifications.checked = store.get(settings.notifications);
|
||||
playBackControl.checked = store.get(settings.playBackControl);
|
||||
api.checked = store.get(settings.api);
|
||||
port.value = store.get(settings.apiSettings.port);
|
||||
menuBar.checked = store.get(settings.menuBar);
|
||||
}
|
||||
|
||||
/**
|
||||
* hide the settings window
|
||||
*/
|
||||
window.hide = function() {
|
||||
ipcRenderer.send(globalEvents.hideSettings);
|
||||
};
|
||||
|
||||
/**
|
||||
* Restart tidal-hifi after changes
|
||||
*/
|
||||
window.restart = function() {
|
||||
const remote = require("electron").remote;
|
||||
remote.app.relaunch();
|
||||
remote.app.exit(0);
|
||||
};
|
||||
|
||||
/**
|
||||
* Bind UI components to functions after DOMContentLoaded
|
||||
*/
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
function get(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
function addInputListener(source, key) {
|
||||
source.addEventListener("input", function(event, data) {
|
||||
if (this.value === "on") {
|
||||
store.set(key, source.checked);
|
||||
} else {
|
||||
store.set(key, this.value);
|
||||
}
|
||||
ipcRenderer.send(globalEvents.storeChanged);
|
||||
});
|
||||
}
|
||||
|
||||
ipcRenderer.on("refreshData", () => {
|
||||
refreshSettings();
|
||||
});
|
||||
|
||||
notifications = get("notifications");
|
||||
playBackControl = get("playBackControl");
|
||||
api = get("apiCheckbox");
|
||||
port = get("port");
|
||||
menuBar = get("menuBar");
|
||||
|
||||
refreshSettings();
|
||||
|
||||
addInputListener(notifications, settings.notifications);
|
||||
addInputListener(playBackControl, settings.playBackControl);
|
||||
addInputListener(api, settings.api);
|
||||
addInputListener(port, settings.apiSettings.port);
|
||||
addInputListener(menuBar, settings.menuBar);
|
||||
});
|
||||
387
src/pages/settings/settings.html
Normal file
387
src/pages/settings/settings.html
Normal file
@@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1 class="title">Settings</h1>
|
||||
<a href="javascript:hide();" class="exitWindow">
|
||||
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 348.333 348.334">
|
||||
<g>
|
||||
<path fill="white" d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85
|
||||
c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563
|
||||
c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85
|
||||
l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554
|
||||
L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" />
|
||||
</svg>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="tabset">
|
||||
<!-- Tab 1 -->
|
||||
<input type="radio" name="tabset" id="tab1" checked />
|
||||
<label for="tab1">General</label>
|
||||
<!-- Tab 2 -->
|
||||
<input type="radio" name="tabset" id="tab2" />
|
||||
<label for="tab2">Api</label>
|
||||
|
||||
<div class="tab-panels">
|
||||
<section id="general" class="tab-panel">
|
||||
<div class="section">
|
||||
<h3>Playback</h3>
|
||||
<div class="option">
|
||||
<h4>Notifications</h4>
|
||||
<p>
|
||||
Whether to show a notification when a new song starts.
|
||||
</p>
|
||||
<label class="switch">
|
||||
<input id="notifications" type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>UI</h3>
|
||||
<div class="option">
|
||||
<h4>Menubar</h4>
|
||||
<p>
|
||||
Show Tidal-hifi's menu bar
|
||||
</p>
|
||||
<label class="switch">
|
||||
<input id="menuBar" type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="api" class="tab-panel">
|
||||
<div class="section">
|
||||
<h3>Api</h3>
|
||||
<p style="margin-bottom: 15px;">
|
||||
Tidal-hifi has a web api built in to allow users to get current song information. You can optionally enable playback control as well.
|
||||
<br />
|
||||
<br />
|
||||
<small>* api changes require a restart to update</small>
|
||||
</p>
|
||||
|
||||
<div class="option">
|
||||
<h4>Web API</h4>
|
||||
<p>
|
||||
Whether to enable the Tidal-hifi web api
|
||||
</p>
|
||||
<label class="switch">
|
||||
<input id="apiCheckbox" type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<h4 style="margin-bottom: 5px;">API port</h4>
|
||||
<input id="port" type="text" class="freeTextInput" name="port">
|
||||
</div>
|
||||
<div class="option">
|
||||
<h4>Playback control</h4>
|
||||
<p>
|
||||
Whether to enable playback control from the api
|
||||
</p>
|
||||
<label class="switch">
|
||||
<input id="playBackControl" type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick="restart()">Restart Tidal-hifi</button>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.header a {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-stretch: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: nationale, nationale-regular, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
small {
|
||||
font-style: italic;
|
||||
color: #72777f;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #242528;
|
||||
border-bottom: 1px solid #5a5a5a;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.title {
|
||||
float: left;
|
||||
line-height: 50px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: #0ff;
|
||||
}
|
||||
|
||||
.exitWindow {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
font-size: 1.4rem;
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.exitWindow svg {
|
||||
height: 50px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(246, 245, 255, .1);
|
||||
}
|
||||
|
||||
.section .option {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section .option p {
|
||||
max-width: 75%;
|
||||
float: left
|
||||
}
|
||||
|
||||
.section .option label {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.section:after,
|
||||
.section .option:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section h4 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.section p {
|
||||
color: #72777f;
|
||||
}
|
||||
|
||||
.bottom-border {
|
||||
border-bottom: 1px solid #0ff;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 15px;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.body::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
background-color: 2a2a2a;
|
||||
}
|
||||
|
||||
.body::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.body::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
||||
background-color: #5a5a5a;
|
||||
}
|
||||
/* Tabs */
|
||||
|
||||
.tabset > input[type="radio"] {
|
||||
position: absolute;
|
||||
left: -200vw;
|
||||
}
|
||||
|
||||
.tabset .tab-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
|
||||
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
|
||||
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabset > label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 15px 0px 10px;
|
||||
border-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabset > input + label {
|
||||
color: #e0e0e0;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.tabset > input:checked + label {
|
||||
color: #0ff;
|
||||
border-bottom: 2px solid #0ff;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
padding: 10px 0;
|
||||
}
|
||||
/* switches */
|
||||
/* The switch - the box around the slider */
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
}
|
||||
/* Hide default HTML checkbox */
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
/* The slider */
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(246, 245, 255, .1);
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #0ff;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #0ff;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(22px);
|
||||
-ms-transform: translateX(22px);
|
||||
transform: translateX(22px);
|
||||
}
|
||||
/* Rounded sliders */
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* input field */
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(246, 245, 255, .1);
|
||||
color: rgba(229, 238, 255, .6);
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 0 0 12px;
|
||||
}
|
||||
|
||||
.freeTextInput:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px solid #0ff;
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
button{
|
||||
border:none;
|
||||
background:none;
|
||||
align-items: center;
|
||||
background-color: rgba(229,238,255,.2);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
height: 48px;
|
||||
line-height: 49px;
|
||||
padding: 0 24px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: background .35s ease;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
font-size: 1.14286rem;
|
||||
font-family: nationale,nationale-regular,Helvetica,sans-serif;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover{
|
||||
background-color: rgba(229,238,255,.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user