@@ -23,9 +23,10 @@ if (isset($_POST['ssid']))
23
23
$new_config .= "CONFIG_PULSEAUDIO_ACTIVE=" . escapeshellarg($_POST['pulseaudio'] == 'active' ? '1' : '0') . "\n";
24
24
$new_config .= "CONFIG_PULSEAUDIO_LATENCY=" . escapeshellarg($config['CONFIG_PULSEAUDIO_LATENCY']) . "\n";
25
25
$new_config .= "CONFIG_LIBRESPOT_ACTIVE=" . escapeshellarg($_POST['librespot'] == 'active' ? '1' : '0') . "\n";
26
+ $new_config .= "CONFIG_SNAPCAST_CLIENT_ACTIVE=" . escapeshellarg($_POST['snapclient'] == 'active' ? '1' : '0') . "\n";
27
+ $new_config .= "CONFIG_SNAPCAST_CLIENT_HOST=" . escapeshellarg($_POST['snapclienthost']) . "\n";
26
28
27
29
$new_config .= "CONFIG_LINEIN_STREAM_ACTIVE=" . escapeshellarg($_POST['linein'] == 'active' ? '1' : '0') . "\n";
28
- $new_config .= "CONFIG_LINEIN_STREAM_TARGET=" . escapeshellarg($_POST['lineintarget']) . "\n";
29
30
30
31
31
32
file_put_contents("/mnt/config.sh", $new_config);
@@ -118,14 +119,45 @@ $loadavg = $loadavg[0] . ", " . $loadavg[1] . ", " . $loadavg[2];
118
119
-ms-user-select: none;
119
120
margin-right: 20px;
120
121
}
122
+
123
+ label.form-check-label {
124
+ user-drag: none;
125
+ user-select: none;
126
+ -moz-user-select: none;
127
+ -webkit-user-drag: none;
128
+ -webkit-user-select: none;
129
+ -ms-user-select: none;
130
+ }
131
+
132
+ .bd-callout {
133
+ padding: 1.25rem;
134
+ /* margin-top: 1.25rem; */
135
+ margin-bottom: 1.25rem;
136
+ border: 1px solid #e9ecef;
137
+ border-left-width: .25rem;
138
+ border-radius: .25rem;
139
+ background-color: #ffffff;
140
+ }
141
+ .bd-callout-info {
142
+ border-left-color: #5bc0de !important;
143
+ }
144
+
145
+ .bd-callout-warning {
146
+ border-left-color: #f0ad4e
147
+ }
148
+
149
+ .bd-callout-danger {
150
+ border-left-color: #d9534f
151
+ }
152
+
121
153
</style>
122
154
123
155
124
156
<!-- Custom styles for this template -->
125
157
<link href="assets/form-validation.css" rel="stylesheet">
126
158
</head>
127
159
<body class="bg-light">
128
-
160
+
129
161
<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
130
162
<div class="mx-auto">
131
163
<a href="/cgi-bin/ottercast" class="text-decoration-none text-reset">
@@ -204,7 +236,7 @@ $loadavg = $loadavg[0] . ", " . $loadavg[1] . ", " . $loadavg[2];
204
236
</ul>
205
237
</div>
206
238
<div class="col-md-7 col-lg-8">
207
- <form class="needs-validation" novalidate action="/cgi-bin/ottercast" method="POST">
239
+ <form class="needs-validation" novalidate action="/cgi-bin/ottercast" method="POST" id="settingsform" >
208
240
<div class="col-12">
209
241
<label for="hostname" class="form-label">Display name</label>
210
242
<input type="text" class="form-control" name="hostname" id="hostname" placeholder="OtterCast Bathroom" value="<?php echo htmlspecialchars($config["CONFIG_DISPLAY_NAME"]); ?>" pattern="[A-Za-z0-9\-]{3,50}" required>
@@ -255,22 +287,28 @@ $loadavg = $loadavg[0] . ", " . $loadavg[1] . ", " . $loadavg[2];
255
287
<label class="form-check-label" for="librespot">Spotify Connect (librespot)</label>
256
288
</div>
257
289
290
+ <div class="form-check">
291
+ <input type="checkbox" class="form-check-input" name="snapclient" id="snapclient" value="active" <?php if ($config["CONFIG_SNAPCAST_CLIENT_ACTIVE"]) echo "checked"; ?>>
292
+ <label class="form-check-label" for="snapclient">Snapcast Client</label>
293
+ </div>
294
+ <div class="col-12 bd-callout bd-callout-info" id="snapclienthostdiv">
295
+ <label for="snapclienthost" class="form-label">Snapcast Server (IP/hostname)</label>
296
+ <input type="text" class="form-control" name="snapclienthost" id="snapclienthost" placeholder="ottercast2.local" value="<?php echo htmlspecialchars($config["CONFIG_SNAPCAST_CLIENT_HOST"]); ?>">
297
+ <div class="invalid-feedback">
298
+ Please enter a valid hostname or IP address.
299
+ </div>
300
+ </div>
301
+
258
302
<hr class="my-4">
259
303
260
- <h4 class="mb-3">Line-In Streaming</h4>
261
- <div class="mb-2 small">OtterCast is able to stream the Line-In port directly to another OtterCast or networked PulseAudio device.
262
- Make sure "PulseAudio Sink " protocol is active on the receiver and set the correct target hostname. Avahi/mDNS can be used with the ".local" suffix.</div>
304
+ <h4 class="mb-3">Line-In Streaming (Snapcast Server) </h4>
305
+ <div class="mb-2 small bd-callout bd-callout-info ">OtterCast is able to stream the Line-In port directly to another OtterCast or <a href="https://github.com/badaix/snapcast/" target="_blank">Snapcast Client</a>.<br>
306
+ Make sure "Snapcast Client " protocol is active on the receiver. <br> Avahi/mDNS can be used with the ".local" suffix.</div>
263
307
<div class="form-check">
264
308
<input type="checkbox" class="form-check-input mb-3" name="linein" id="linein" value="active" <?php if ($config["CONFIG_LINEIN_STREAM_ACTIVE"]) echo "checked"; ?>>
265
- <label class="form-check-label" for="linein">Streaming active</label>
309
+ <label class="form-check-label" for="linein">Streaming server active</label>
266
310
</div>
267
- <div class="col-12">
268
- <label for="ssid" class="form-label">Target (IP/hostname)</label>
269
- <input type="text" class="form-control" name="lineintarget" id="lineintarget" placeholder="ottercast2.local" value="<?php echo htmlspecialchars($config["CONFIG_LINEIN_STREAM_TARGET"]); ?>">
270
- <div class="invalid-feedback">
271
- Please enter a valid hostname or IP address.
272
- </div>
273
- </div>
311
+
274
312
275
313
<hr class="my-4">
276
314
@@ -290,7 +328,35 @@ $loadavg = $loadavg[0] . ", " . $loadavg[1] . ", " . $loadavg[2];
290
328
</footer>
291
329
</div>
292
330
331
+ <script
332
+ src="assets/jquery-3.5.1.min.js"
333
+ integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
334
+ ></script>
293
335
<script src="assets/bootstrap.bundle.min.js"></script>
294
336
<script src="assets/form-validation.js"></script>
337
+
338
+ <script type="text/javascript">
339
+ function eval_snapclient_checkbox()
340
+ {
341
+ var snapclienthostdiv = $('#snapclienthostdiv');
342
+ if($('#snapclient').is(':checked'))
343
+ {
344
+ snapclienthostdiv.show();
345
+ snapclienthostdiv.find('input').attr('required', true);
346
+ } else {
347
+ snapclienthostdiv.hide();
348
+ snapclienthostdiv.find('input').attr('required', false);
349
+ }
350
+ }
351
+
352
+ $(function()
353
+ {
354
+ var snapclienthostdiv = $('#snapclienthostdiv');
355
+ snapclienthostdiv.hide();
356
+
357
+ $('#snapclient').on('change', eval_snapclient_checkbox);
358
+ eval_snapclient_checkbox();
359
+ });
360
+ </script>
295
361
</body>
296
362
</html>
0 commit comments