cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

foo

Browse source
This commit is contained in:
XenGi 2023-11-06 22:38:39 +01:00
parent ace989b445
commit 5a30fa059c
Signed by: xengi
SSH key fingerprint: SHA256:FGp51kRvGOcWnTHiOI39ImwVO4A3fpvR30nPX3LpV7g
6 changed files with 237 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
sanic
result result
# Created by https://www.toptal.com/developers/gitignore/api/linux,windows,macos,vim,goland+all,go,direnv # Created by https://www.toptal.com/developers/gitignore/api/linux,windows,macos,vim,goland+all,go,direnv

60
mpd.go
View file

@ -1,60 +0,0 @@
package main
import (
"fmt"
"github.com/fhs/gompd/v2/mpd"
"log"
"time"
)
func main() {
w, err := mpd.NewWatcher("tcp", ":6600", "")
if err != nil {
log.Fatalln(err)
}
defer w.Close()
// Log errors.
go func() {
for err := range w.Error {
log.Println("Error:", err)
}
}()
// Log events.
go func() {
for subsystem := range w.Event {
log.Println("Changed subsystem:", subsystem)
}
}()
// Do other stuff...
time.Sleep(3 * time.Minute)
}
func main2() {
// Connect to MPD server
conn, err := mpd.Dial("tcp", "localhost:6600")
if err != nil {
log.Fatalln(err)
}
defer conn.Close()
// Loop printing the current status of MPD
for {
status, err := conn.Status()
if err != nil {
log.Fatalln(err)
}
song, err := conn.CurrentSong()
if err != nil {
log.Fatalln(err)
}
if status["state"] == "play" {
fmt.Println(fmt.Sprintf("%s - %s", song["Artist"], song["Title"]))
} else {
fmt.Println(fmt.Sprintf("State: %s", status["state"]))
}
time.Sleep(1 * time.Second)
}
}

81
static/index.html
View file

@ -4,62 +4,16 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>sanic :: paused</title> <title>sanic :: paused</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="/style.css" />
<style>
/* generic styles */
* {
margin: 0;
}
header, footer, main, section {
border: 1px solid red;
margin: 1px;
padding: 1px;
}
/* tab controls */
.tabs {
overflow: hidden; /* what does this do? */
}
.tabs button {
float: left;
}
.tabs button:hover {
background-color: #ddd;
}
.tabs button.active {
background-color: #ccc;
}
.tab {
display: none;
}
/* table */
thead {
background-color: #ccc;
}
/* player controls */
#player-controls {
border: 1px solid blue;
}
</style>
<script>
function switchTab(event, tabname) {
document.getElementsByClassName("tab").forEach((tab) => tab.style.display = "none");
document.getElementsByClassName("tablink").forEach((but) => but.className = but.className.replace(" active", ""));
document.getElementById(tabname).style.display = "block";
event.currentTarget.className += " active";
}
</script>
</head> </head>
<body> <body>
<!-- top navigation and playback control --> <!-- top navigation and playback control -->
<header id="top-nav"> <header id="top-nav">
<div id="player-controls"> <div class="navbox box">
<div> <button>sanic</button>
<input type="text" value="artist - track" /> <button>Config</button>
</div> </div>
<div class="navbox box">
<div> <div>
<button>⏮️</button> <button>⏮️</button>
<button>⏯️</button> <button>⏯️</button>
@ -67,13 +21,26 @@ thead {
<button>⏭️</button> <button>⏭️</button>
</div> </div>
<div> <div>
<input type="range" id="track-progress" name="track-progress" min="0" max="100" /> <label for="progress"></label>
<input type="range" id="progress" name="progress" min="0" max="100" />
</div>
</div>
<div class="navbox box">
<p>[ ] repeat</p>
<p>[ ] shuffle</p>
<label for="volume"></label>
<input id="volume" name="volume" type="range" min="1" max="100" />
</div>
<div class="navbox box">
<div>
<label for="track"></label>
<input id="track" name="track" type="text" value="artist - track" />
</div> </div>
</div> </div>
</header> </header>
<main> <main>
<section id="playlist"> <section id="playlist" class="box">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -95,7 +62,7 @@ thead {
</tbody> </tbody>
</table> </table>
</section> </section>
<section id="db"> <section id="db" class="box">
<!-- tabs --> <!-- tabs -->
<div id="tabs"> <div id="tabs">
<button class="tablink active" onclick="switchTab(event, 'folders')">Folders</button> <button class="tablink active" onclick="switchTab(event, 'folders')">Folders</button>
@ -150,10 +117,10 @@ thead {
</main> </main>
<!-- informational footer --> <!-- informational footer -->
<footer id="bottom"> <footer id="bottom" class="box">
<p>sanic mpd web ui - by XenGi and coon &copy; 2023</p> <p>sanic mpd web ui - by XenGi and coon &copy; 2023</p>
</footer> </footer>
<script src="index.js"></script> <script src="/index.js"></script>
</body> </body>
</html> </html>

12
static/index.js
View file

@ -0,0 +1,12 @@
function switchTab(event, tabname) {
for (let tab in document.getElementsByClassName("tab")) {
tab.style.display = "none";
}
for (let button in document.getElementsByClassName("tablink")) {
button.className = button.className.replace(" active", "");
}
document.getElementById(tabname).style.display = "block";
event.currentTarget.className += " active";
}

130
static/index2.html Normal file
View file

@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 128px 1fr 1fr 32px;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "header" "playlist" "db" "footer";
}
header {
display: grid;
grid-template-columns: 128px 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "config playback-controls playlist-controls track-info";
grid-area: header;
}
section.playlist {
grid-area: playlist;
}
header .config {
grid-area: config;
}
header .playback-controls {
grid-area: playback-controls;
}
header .playlist-controls {
grid-area: playlist-controls;
}
header .track-info {
grid-area: track-info;
}
footer {
grid-area: footer;
}
section.db {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
grid-template-rows: 1fr;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "tabs result";
grid-area: db;
}
.db .tabs {
grid-area: tabs;
}
.db .result {
grid-area: result;
}
</style>
</head>
<body>
<header class="header">
<div class="config">
<button disabled>sanic</button>
<button>Config</button>
</div>
<div class="playback-controls">
<div>
<button>⏮️</button>
<button>⏯️</button>
<button>⏹️</button>
<button>⏭️</button>
</div>
<label for="progress"></label>
<input type="range" id="progress" name="progress" min="0" max="100" />
</div>
<div class="playlist-controls">
<div>
<label for="repeat">repeat</label>
<input type="checkbox" id="repeat" name="repeat" />
<label for="shuffle">shuffle</label>
<input type="checkbox" id="shuffle" name="shuffle" />
</div>
<div>
<label for="fade">fade</label>
<button>-</button>
<input type="number" id="fade" name="fade" min="0" />
<button>+</button>
</div>
<label for="volume"></label>
<input id="volume" name="volume" type="range" min="1" max="100" />
</div>
<div class="track-info">
<p>Now playing: 00:00:00/100:00:00</p>
<label for="track">track</label>
<input type="text" id="track" name="track" disabled />
</div>
</header>
<section class="playlist">
<table>
<thead>
<tr>
<td>Artist</td>
<td>Album</td>
<td>Track</td>
</tr>
</thead>
<tbody>
<tr>
<td>The Beatles</td>
<td>Some Album</td>
<td>Yellow Submarine</td>
</tr>
</tbody>
</table>
</section>
<section class="db">
<div class="tabs"></div>
<div class="result"></div>
</section>
<footer class="footer"></footer>
</body>
</html>

70
static/style.css
View file

@ -0,0 +1,70 @@
:root {
--main-bg-color: #ddd;
--main-color: #333;
}
body {
background-color: #000;
color: #fff;
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
min-height:64px;
background-color: var(--main-color);
border: 1px solid var(--main-bg-color);
}
footer {
min-height:24px;
}
.box {
background-color: var(--main-color);
border: 1px solid var(--main-bg-color);
}
header .box {
float: left;
padding: 1em;
height: 60px;
}
main {
clear: left;
}
/* tab controls */
.tabs {
overflow: hidden; /* what does this do? */
}
.tabs button {
float: left;
}
.tabs button:hover {
background-color: #ddd;
}
.tabs button.active {
background-color: #ccc;
}
.tab {
display: none;
}
/* table */
thead {
background-color: #ccc;
}
/* navigation */
/* player controls */
#player-controls {
border: 1px solid blue;
}