Some style changes

pull/2/head
Trond Ekseth 2022-11-19 02:28:11 +01:00
parent e79f5aee67
commit ceebf7c099
7 changed files with 354 additions and 78 deletions

4
.gitignore vendored
View File

@ -11,3 +11,7 @@ cache
bin
ambiance/*.mp3
*.yml
public/
node_modules/

View File

@ -1,41 +1,69 @@
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
padding: 10px;
border-radius: 10px;
--grid-layout-gap: 8px;
--grid-column-count: 3;
--grid-item--min-width: 150px;
--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
grid-auto-rows: 1fr;
grid-gap: var(--grid-layout-gap);
}
.playing {
background-color: burlywood;
background-color: burlywood;
}
h2.bot {
margin-top: 10px;
margin-bottom: 0px;
text-align: center;
margin-top: 0;
margin-bottom: .5rem;
text-align: center;
}
.item {
background-color: #80cbc4;
border: 1px solid black;
padding: 20px;
font-size: clamp(1rem, -0.8750rem + 8.3333vw, 2rem);
text-align: center;
cursor: pointer;
color: #073642
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
background-color: #80cbc4;
border: 1px solid black;
font-size: clamp(1rem, -0.8750rem + 8.3333vw, 2rem);
text-align: center;
cursor: pointer;
color: #073642
}
.container2 {
display: block;
border-radius: 10px;
padding: 10px;
.item.stop {
background-color: #cb4b16;
}
#info {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.controls {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
margin: 0 auto;
max-width: 512px;
}
.input-container {
max-width: 512px;
}
.box {
/* background-color: #fefefe;*/
/* background-color: #fefefe;*/
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
padding: 2rem;
/*border: 1px solid #888;*/
width: 80%; /* Could be more or less, depending on screen size */
align-content: center;
@ -58,12 +86,72 @@ h2.bot {
/* Modal Content/Box */
.modal-content {
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
padding: 2rem;
width: 80%; /* Could be more or less, depending on screen size */
text-align: center;
font-size: 32px;
}
body > div.container2 > input[type=text]:nth-child(2) {
width: 512px;
body, html {
margin: 0;
padding: .5rem;
}
input[type="button"],
input[type="submit"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
input[type="button"]:focus,
input[type="submit"]:hover {
color: #333;
border-color: #888;
outline: 0;
}
input[type="text"] {
height: 38px;
padding: 6px 10px;
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="text"]:focus {
border: 1px solid #33C3F0;
outline: 0;
}
section {
margin-bottom: .5rem;
}
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-hidden {
display: none;
}

View File

@ -1,4 +1,7 @@
window.onload = function() {
import ReconnectingWebSocket from 'reconnecting-websocket';
import Sortable from 'sortablejs';
window.onload = function () {
const ws = new ReconnectingWebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");
const items = document.querySelector("#items");
@ -6,6 +9,8 @@ window.onload = function() {
const submit = document.querySelector("#addplaylist")
const output = document.querySelector(".container2 p#output")
const info = document.querySelector("#info")
const link = document.querySelector("#link")
const time = document.querySelector("#time")
const waiting = document.querySelector("#waiting")
document.querySelector("input#next").addEventListener("click", (e) => {
@ -63,11 +68,11 @@ window.onload = function() {
})
ws.onopen = (e) => {
waiting.style.display = "none";
waiting.classList.add("u-hidden")
}
ws.onclose = (e) => {
waiting.style.display = "block";
waiting.classList.remove("u-hidden")
}
ws.onmessage = (e) => {
@ -88,14 +93,14 @@ window.onload = function() {
el.style.removeProperty("background-color")
})
if (data.payload.pause) {
info.style.display = "none"
info.classList.add("u-hidden")
} else {
info.style.display = "block"
info.children.link.children.channel.innerText = data.payload.channel
info.children.link.children.title.innerText = data.payload.current
info.children.link.href = "https://youtu.be/" + data.payload.song
info.children.link.target = "_blank"
info.children.time.innerText = `( ${msToTime(data.payload.position)} / ${msToTime(data.payload.len)} )`
info.classList.remove("u-hidden")
link.children.channel.innerText = data.payload.channel
link.children.title.innerText = data.payload.current
link.href = "https://youtu.be/" + data.payload.song
link.target = "_blank"
time.innerText = `${msToTime(data.payload.position)} / ${msToTime(data.payload.len)}`
document.querySelector(`#items > div[data-id='${data.payload.playlist}']`).style.backgroundColor = "burlywood"
}
setTimeout(() => {
@ -103,15 +108,15 @@ window.onload = function() {
}, 1000);
break
case "song_position":
info.children.time.innerText = `( ${msToTime(data.payload.position)} / ${msToTime(data.payload.len)} )`
info.style.display = "block"
time.innerText = `${msToTime(data.payload.position)} / ${msToTime(data.payload.len)}`
info.classList.remove("u-hidden")
break
case "stop":
setTimeout(() => {
items.style.pointerEvents = 'auto'
}, 2000);
info.style.display = "none"
info.classList.add("u-hidden")
break
case "new_playlist":
addPlaylist(data.payload);

10
package.json Normal file
View File

@ -0,0 +1,10 @@
{
"scripts": {
"build": "esbuild js/script.js --bundle --outdir=public/"
},
"dependencies": {
"esbuild": "^0.15.14",
"reconnecting-websocket": "^4.4.0",
"sortablejs": "^1.15.0"
}
}

View File

@ -22,7 +22,7 @@ func init() {
app.router.GET("/play/:playlist", app.Play)
app.router.GET("/reset", app.Reset)
app.router.ServeFiles("/js/*filepath", http.Dir("js"))
app.router.ServeFiles("/js/*filepath", http.Dir("public"))
app.router.ServeFiles("/css/*filepath", http.Dir("css"))
app.router.HandlerFunc("GET", "/ws", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {

View File

@ -5,47 +5,67 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>D&D Music Bot!</title>
<link rel="stylesheet" href="/css/solarized-dark.min.css">
<link rel="stylesheet" href="/css/solarized-dark.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div><h2 class="bot">Playlists</h2></div>
<div id="items" class="container">
{{ range .Playlists }}
<div class="item" data-id="{{ .Id }}">{{ .Title }}</div>
{{ end}}
<div class="item locked" data-id="reset">Stop</div>
</div>
<div id="inputplaylist" class="container2">
<input name="title" type="text" placeholder="Enter name..">
<input name="url" type="text" placeholder="https://youtube.com/playlist?list=...">
<input id="addplaylist" name="submit" value="Add" type="submit">
</div>
<div class="container2">
<h2 class="bot">Playlists</h2>
<section>
<div id="items" class="container">
{{ range .Playlists }}
<div class="item" data-id="{{ .Id }}">{{ .Title }}</div>
{{ end}}
<div class="item locked stop" data-id="reset">Stop</div>
</div>
</section>
<section>
<div id="inputplaylist" class="input-container">
<input class="u-full-width" name="title" type="text" placeholder="Enter name..">
<input class="u-full-width" name="url" type="text" placeholder="https://youtube.com/playlist?list=...">
<input id="addplaylist" name="submit" value="Add" type="submit">
</div>
</section>
<section>
<p id="output"></p>
</div>
<div id="info" class="container2">
<input id="prev" name="prev" type="button" value="prev">
<input id="next" name="next" type="button" value="next">
<a id="link" style="text-decoration: none;">
<span id="channel"></span>
<span> - </span>
<span id="title"></span>
</a>
<span id="time"></span>
</div>
<div><h2 class="bot">Ambiance</h2></div>
<div id="ambiance" class="container">
{{ range .Ambiance }}
<div class="item drag" data-id="{{ . }}">{{ . }}</div>
{{ end}}
<div class="item locked" data-id="reset">Stop</div>
</div>
<div id="inputambiance" class="container2">
<input name="title" type="text" placeholder="Enter name..">
<input name="url" type="text" placeholder="Enter url...">
<input id="addambiance" name="submit" value="Add" type="submit">
</div>
<div id="info">
<a id="link" style="text-decoration: none;">
<span id="channel"></span>
<span> - </span>
<span id="title"></span>
</a>
<div class="controls">
<input id="prev" name="prev" type="button" value="prev">
<span id="time"></span>
<input id="next" name="next" type="button" value="next">
</div>
</div>
</div>
</section>
<h2 class="bot">Ambiance</h2>
<section>
<div id="ambiance" class="container">
{{ range .Ambiance }}
<div class="item drag" data-id="{{ . }}">{{ . }}</div>
{{ end}}
<div class="item locked stop" data-id="reset">Stop</div>
</div>
</section>
<section>
<div id="inputambiance" class="input-container">
<input class="u-full-width" name="title" type="text" placeholder="Enter name..">
<input class="u-full-width" name="url" type="text" placeholder="Enter url...">
<input id="addambiance" name="submit" value="Add" type="submit">
</div>
</section>
<!-- The Modal -->
<div id="waiting" class="modal">
<!-- Modal content -->
@ -53,8 +73,6 @@
<p>Waiting for bot..</p>
</div>
</div>
<script src="/js/reconnecting-websocket.min.js"></script>
<script src="/js/Sortable.min.js"></script>
<script src="/js/script.js"></script>
</body>
</html>

151
yarn.lock Normal file
View File

@ -0,0 +1,151 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
"@esbuild/android-arm@0.15.14":
version "0.15.14"
resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.14.tgz#5d0027f920eeeac313c01fd6ecb8af50c306a466"
integrity sha512-+Rb20XXxRGisNu2WmNKk+scpanb7nL5yhuI1KR9wQFiC43ddPj/V1fmNyzlFC9bKiG4mYzxW7egtoHVcynr+OA==
"@esbuild/linux-loong64@0.15.14":
version "0.15.14"
resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.14.tgz#1221684955c44385f8af34f7240088b7dc08d19d"
integrity sha512-eQi9rosGNVQFJyJWV0HCA5WZae/qWIQME7s8/j8DMvnylfBv62Pbu+zJ2eUDqNf2O4u3WB+OEXyfkpBoe194sg==
esbuild-android-64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.14.tgz#114e55b0d58fb7b45d7fa3d93516bd13fc8869cc"
integrity sha512-HuilVIb4rk9abT4U6bcFdU35UHOzcWVGLSjEmC58OVr96q5UiRqzDtWjPlCMugjhgUGKEs8Zf4ueIvYbOStbIg==
esbuild-android-arm64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.14.tgz#8541f38a9aacf88e574fb13f5ad4ca51a04c12bb"
integrity sha512-/QnxRVxsR2Vtf3XottAHj7hENAMW2wCs6S+OZcAbc/8nlhbAL/bCQRCVD78VtI5mdwqWkVi3wMqM94kScQCgqg==
esbuild-darwin-64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.14.tgz#b40b334db81ff1e3677a6712b23761748a157c57"
integrity sha512-ToNuf1uifu8hhwWvoZJGCdLIX/1zpo8cOGnT0XAhDQXiKOKYaotVNx7pOVB1f+wHoWwTLInrOmh3EmA7Fd+8Vg==
esbuild-darwin-arm64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.14.tgz#44b5c1477bb7bdb852dd905e906f68765e2828bc"
integrity sha512-KgGP+y77GszfYJgceO0Wi/PiRtYo5y2Xo9rhBUpxTPaBgWDJ14gqYN0+NMbu+qC2fykxXaipHxN4Scaj9tUS1A==
esbuild-freebsd-64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.14.tgz#8c57315d238690f34b6ed0c94e5cfc04c858247a"
integrity sha512-xr0E2n5lyWw3uFSwwUXHc0EcaBDtsal/iIfLioflHdhAe10KSctV978Te7YsfnsMKzcoGeS366+tqbCXdqDHQA==
esbuild-freebsd-arm64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.14.tgz#2e92acca09258daa849e635565f52469266f0b7b"
integrity sha512-8XH96sOQ4b1LhMlO10eEWOjEngmZ2oyw3pW4o8kvBcpF6pULr56eeYVP5radtgw54g3T8nKHDHYEI5AItvskZg==
esbuild-linux-32@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.14.tgz#ca5ed3e9dff82df486ddde362d7e00775a597dfd"
integrity sha512-6ssnvwaTAi8AzKN8By2V0nS+WF5jTP7SfuK6sStGnDP7MCJo/4zHgM9oE1eQTS2jPmo3D673rckuCzRlig+HMA==
esbuild-linux-64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.14.tgz#42952e1d08a299d5f573c567639fb37b033befbf"
integrity sha512-ONySx3U0wAJOJuxGUlXBWxVKFVpWv88JEv0NZ6NlHknmDd1yCbf4AEdClSgLrqKQDXYywmw4gYDvdLsS6z0hcw==
esbuild-linux-arm64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.14.tgz#0c0d788099703327ec0ae70758cb2639ef6c5d88"
integrity sha512-kle2Ov6a1e5AjlHlMQl1e+c4myGTeggrRzArQFmWp6O6JoqqB9hT+B28EW4tjFWgV/NxUq46pWYpgaWXsXRPAg==
esbuild-linux-arm@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.14.tgz#751a5ca5042cd60f669b07c3bcec3dd6c4f8151c"
integrity sha512-D2LImAIV3QzL7lHURyCHBkycVFbKwkDb1XEUWan+2fb4qfW7qAeUtul7ZIcIwFKZgPcl+6gKZmvLgPSj26RQ2Q==
esbuild-linux-mips64le@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.14.tgz#da8ac35f2704de0b52bf53a99c12f604fbe9b916"
integrity sha512-FVdMYIzOLXUq+OE7XYKesuEAqZhmAIV6qOoYahvUp93oXy0MOVTP370ECbPfGXXUdlvc0TNgkJa3YhEwyZ6MRA==
esbuild-linux-ppc64le@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.14.tgz#a315b5016917429080c3d32e03319f1ff876ac55"
integrity sha512-2NzH+iuzMDA+jjtPjuIz/OhRDf8tzbQ1tRZJI//aT25o1HKc0reMMXxKIYq/8nSHXiJSnYV4ODzTiv45s+h73w==
esbuild-linux-riscv64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.14.tgz#9f2e0a935e5086d398fc19c7ff5d217bfefe3e12"
integrity sha512-VqxvutZNlQxmUNS7Ac+aczttLEoHBJ9e3OYGqnULrfipRvG97qLrAv9EUY9iSrRKBqeEbSvS9bSfstZqwz0T4Q==
esbuild-linux-s390x@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.14.tgz#53108112faff5a4e1bad17f7b0b0ffa1df4b7efb"
integrity sha512-+KVHEUshX5n6VP6Vp/AKv9fZIl5kr2ph8EUFmQUJnDpHwcfTSn2AQgYYm0HTBR2Mr4d0Wlr0FxF/Cs5pbFgiOw==
esbuild-netbsd-64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.14.tgz#5330efc41fe4f1c2bab5462bcfe7a4ffce7ba00a"
integrity sha512-6D/dr17piEgevIm1xJfZP2SjB9Z+g8ERhNnBdlZPBWZl+KSPUKLGF13AbvC+nzGh8IxOH2TyTIdRMvKMP0nEzQ==
esbuild-openbsd-64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.14.tgz#ee64944d863e937611fc31adf349e9bb4f5f7eac"
integrity sha512-rREQBIlMibBetgr2E9Lywt2Qxv2ZdpmYahR4IUlAQ1Efv/A5gYdO0/VIN3iowDbCNTLxp0bb57Vf0LFcffD6kA==
esbuild-sunos-64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.14.tgz#29b0b20de6fe6ef50f9fbe533ec20dc4b595f9aa"
integrity sha512-DNVjSp/BY4IfwtdUAvWGIDaIjJXY5KI4uD82+15v6k/w7px9dnaDaJJ2R6Mu+KCgr5oklmFc0KjBjh311Gxl9Q==
esbuild-windows-32@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.14.tgz#05e9b159d664809f7a4a8a68ed048d193457b27d"
integrity sha512-pHBWrcA+/oLgvViuG9FO3kNPO635gkoVrRQwe6ZY1S0jdET07xe2toUvQoJQ8KT3/OkxqUasIty5hpuKFLD+eg==
esbuild-windows-64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.14.tgz#d5ae086728ab30b72969e40ed0a7a0d9082f2cdd"
integrity sha512-CszIGQVk/P8FOS5UgAH4hKc9zOaFo69fe+k1rqgBHx3CSK3Opyk5lwYriIamaWOVjBt7IwEP6NALz+tkVWdFog==
esbuild-windows-arm64@0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.14.tgz#8eb50ab9a0ecaf058593fbad17502749306f801d"
integrity sha512-KW9W4psdZceaS9A7Jsgl4WialOznSURvqX/oHZk3gOP7KbjtHLSsnmSvNdzagGJfxbAe30UVGXRe8q8nDsOSQw==
esbuild@^0.15.14:
version "0.15.14"
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.14.tgz#09202b811f1710363d5088a3401a351351c79875"
integrity sha512-pJN8j42fvWLFWwSMG4luuupl2Me7mxciUOsMegKvwCmhEbJ2covUdFnihxm0FMIBV+cbwbtMoHgMCCI+pj1btQ==
optionalDependencies:
"@esbuild/android-arm" "0.15.14"
"@esbuild/linux-loong64" "0.15.14"
esbuild-android-64 "0.15.14"
esbuild-android-arm64 "0.15.14"
esbuild-darwin-64 "0.15.14"
esbuild-darwin-arm64 "0.15.14"
esbuild-freebsd-64 "0.15.14"
esbuild-freebsd-arm64 "0.15.14"
esbuild-linux-32 "0.15.14"
esbuild-linux-64 "0.15.14"
esbuild-linux-arm "0.15.14"
esbuild-linux-arm64 "0.15.14"
esbuild-linux-mips64le "0.15.14"
esbuild-linux-ppc64le "0.15.14"
esbuild-linux-riscv64 "0.15.14"
esbuild-linux-s390x "0.15.14"
esbuild-netbsd-64 "0.15.14"
esbuild-openbsd-64 "0.15.14"
esbuild-sunos-64 "0.15.14"
esbuild-windows-32 "0.15.14"
esbuild-windows-64 "0.15.14"
esbuild-windows-arm64 "0.15.14"
reconnecting-websocket@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783"
integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==
sortablejs@^1.15.0:
version "1.15.0"
resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a"
integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==