snapserver: Added snapweb with config options

As per forum request:
https://forum.libreelec.tv/thread/23750-snapserver-enable-http-json-rpc-http-post-and-websockets/?postID=153424#post153424
This commit is contained in:
EvTheFuture
2021-04-05 16:28:46 +02:00
parent f256f19f1d
commit b4accbb4d6
22 changed files with 36492 additions and 4 deletions

View File

@@ -1,3 +1,6 @@
106
- Added options to enable and configure the HTTP server
105
- aixlog: update to 1.5.0
- snapcast: update to 0.24.0

View File

@@ -3,7 +3,7 @@
PKG_NAME="snapserver"
PKG_VERSION="0.24.0"
PKG_REV="105"
PKG_REV="106"
PKG_ARCH="any"
PKG_LICENSE="GPLv3"
PKG_DEPENDS_TARGET="toolchain shairport-sync snapcast"
@@ -23,4 +23,6 @@ addon() {
cp "$(get_install_dir shairport-sync)/usr/bin/shairport-sync" \
"$(get_install_dir snapcast)/usr/bin/snapserver" \
"${ADDON_BUILD}/${PKG_ADDON_ID}/bin"
cp -Pr ${PKG_DIR}/snapweb ${ADDON_BUILD}/${PKG_ADDON_ID}/
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,5 @@
"use strict";
let config = {
baseUrl: (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host
};
//# sourceMappingURL=config.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"config.js","sourceRoot":"","sources":["../page/config.ts"],"names":[],"mappings":";AAAA,IAAI,MAAM,GAAG;IACT,OAAO,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI;CAC/F,CAAA"}

View File

@@ -0,0 +1,24 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#455A64">
<meta name="author" content="Johannes M. Pohl">
<meta name="version" content="0.2.0">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Snapweb</title>
<script src="3rd-party/libflac.js"></script>
<script src="config.js"></script>
<script src="snapstream.js"></script>
<script src="snapcontrol.js"></script>
</head>
<body>
<div id="show"></div>
</body>
</html>

View File

@@ -0,0 +1,16 @@
{
"short_name": "Snapweb",
"name": "Snapcast WebApp",
"icons": [
{
"src": "launcher-icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"categories": ["music"],
"description": "Snapcast web client",
"theme_color": "#455A64"
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,299 @@
body {
background-color: rgb(246, 246, 246);
color: rgb(255, 255, 255);
font-family: 'Arial', sans-serif;
width: 100%;
margin: 0;
font-size: 20px;
overscroll-behavior: contain;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #1f1f1f;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #333;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.navbar {
overflow: hidden;
background-color: #607d8b;
z-index: 1; /* Sit on top */
padding: 13px;
color: white;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
font-size: 21px;
font-weight: 500;
user-select: none;
}
.play-button {
display: block;
position: absolute;
right: 34px;
top: 5px;
height: 40px;
width: 40px;
}
.content {
margin-top: 62px
}
.group {
float: none;
background-color: white;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
clear: both;
padding: 8px;
margin: 10px 15px 10px 15px;
overflow: auto;
width: auto;
border-radius: 3px;
user-select: none;
}
.group.muted {
opacity: 0.27;
}
.groupheader {
/* margin: 10px; */
width: auto;
height: fit-content;
/* padding: 10px; */
padding-bottom: 0px;
display: grid;
grid-template-columns: min-content auto min-content;
grid-template-rows: min-content min-content;
grid-gap: 0px;
}
.groupheader-separator {
height: 1px;
margin: 8px 0px;
border-width: 0px;
color: lightgray;
background-color: lightgray;
}
.stream {
color: #686868;
grid-row: 1;
grid-column: 1/3;
width: fit-content;
}
select {
background-color: transparent;
border: 0px;
width: 150px;
font-size: 20px;
color: #e3e3e3;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.slidergroupdiv {
/* background: greenyellow; */
display: flex;
justify-content: center;
align-items: center;
grid-row: 2;
grid-column: 2;
}
.client {
/* text-align: left; */
/* margin: 10px; */
width: auto;
height: fit-content;
/* padding: 10px; */
display: grid;
grid-template-columns: min-content auto min-content;
grid-template-rows: min-content min-content;
grid-gap: 0px;
}
/* .client:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
} */
.client.disconnected {
opacity: 0.27;
}
.name {
color: #686868;
user-select: none;
/* background: red; */
padding-top: 5px;
grid-row: 1;
grid-column: 1/3;
text-decoration: none;
}
.editdiv {
background: violet;
grid-row: 0/4;
grid-column: 3;
}
.edit-icon {
color: #686868;
text-decoration: none;
}
.delete-icon {
color: #ff4081;
text-decoration: none;
}
.edit-icons {
align-items: center;
display: flex;
grid-row: 1/3;
grid-column: 3;
}
.edit-group-icon {
display: flex;
color: transparent;
align-items: center;
grid-row: 1/3;
grid-column: 3;
text-decoration: none;
}
.mute-button {
color: #686868;
grid-row: 2;
grid-column: 1;
height: 25px;
width: 25px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
.sliderdiv {
display: flex;
justify-content: center;
align-items: center;
grid-row: 2;
grid-column: 2;
/* padding-left: 40px; */
/* display: inline-block;
text-align: left;
width: 250px; */
}
.slider {
writing-mode: bt-lr;
-webkit-appearance: none;
background: #dbdbdb;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
height: 2px;
width: 90%;
}
.slider::-moz-range-track {
padding: 6px;
background-color: transparent;
border: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 12px;
width: 12px;
border-radius: 50%;
background: #ff4081;
cursor: pointer;
}
.slider::-moz-range-thumb {
height: 12px;
width: 12px;
border-radius: 50%;
background: #ff4081;
cursor: pointer;
}
.slider.muted {
opacity: 0.27;
}
.client-settings {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.client-setting-content {
background-color: #fefefe;
color: #686868;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
.client-input {
color: #686868;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

View File

@@ -39,10 +39,20 @@ case "$ss_st" in
;;
esac
if [ "$ss_eh" = "true" ] ; then
enable_http=1
else
enable_http=0
fi
HOME="$ADDON_HOME" \
nice -n "$ss_ni" \
snapserver \
--controlPort "$ss_cp" \
--port "$ss_sp" \
--stream "$stream" \
--controlPort "$ss_cp" \
--port "$ss_sp" \
--http.enabled "$enable_http" \
--http.port "$ss_hp" \
--http.bind_to_address "$ss_ha" \
--http.doc_root="$ADDON_DIR/snapweb" \
--stream "$stream" \
> /dev/null

View File

@@ -24,3 +24,15 @@ msgstr ""
msgctxt "#30004"
msgid "Stream"
msgstr ""
msgctxt "#30005"
msgid "Enable HTTP server"
msgstr ""
msgctxt "#30006"
msgid "HTTP server port"
msgstr ""
msgctxt "#30007"
msgid "HTTP server bind address"
msgstr ""

Some files were not shown because too many files have changed in this diff Show More