added runnable scripts and web frontend
This commit is contained in:
parent
680a31b49f
commit
109e4d7a8a
24 changed files with 24183 additions and 16 deletions
|
|
@ -5,6 +5,12 @@ description = ""
|
||||||
authors = ["Christoph Stahl <christoph.stahl@tu-dortmund.de>"]
|
authors = ["Christoph Stahl <christoph.stahl@tu-dortmund.de>"]
|
||||||
license = "GPL3"
|
license = "GPL3"
|
||||||
readme = "README.md"
|
readme = "README.md"
|
||||||
|
include = ["syng/static"]
|
||||||
|
|
||||||
|
[tool.poetry.scripts]
|
||||||
|
syng-client = "syng.client:main"
|
||||||
|
syng-server = "syng.server:main"
|
||||||
|
syng-shell = "syng.webclientmockup:main"
|
||||||
|
|
||||||
[tool.poetry.dependencies]
|
[tool.poetry.dependencies]
|
||||||
python = "^3.7"
|
python = "^3.7"
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,9 @@ async def handle_buffer(data):
|
||||||
@sio.on("play")
|
@sio.on("play")
|
||||||
async def handle_play(data):
|
async def handle_play(data):
|
||||||
entry = Entry(**data)
|
entry = Entry(**data)
|
||||||
print(f"Playing: {entry.artist} - {entry.title} [{entry.album}] ({entry.source}) for {entry.performer}")
|
print(
|
||||||
|
f"Playing: {entry.artist} - {entry.title} [{entry.album}] ({entry.source}) for {entry.performer}"
|
||||||
|
)
|
||||||
try:
|
try:
|
||||||
meta_info = await sources[entry.source].buffer(entry)
|
meta_info = await sources[entry.source].buffer(entry)
|
||||||
await sio.emit("meta-info", {"uuid": data["uuid"], "meta": meta_info})
|
await sio.emit("meta-info", {"uuid": data["uuid"], "meta": meta_info})
|
||||||
|
|
@ -103,7 +105,7 @@ async def handle_request_config(data):
|
||||||
await sio.emit("config", {"source": data["source"], "config": config})
|
await sio.emit("config", {"source": data["source"], "config": config})
|
||||||
|
|
||||||
|
|
||||||
async def main():
|
async def aiomain():
|
||||||
parser = ArgumentParser()
|
parser = ArgumentParser()
|
||||||
|
|
||||||
parser.add_argument("--room", "-r")
|
parser.add_argument("--room", "-r")
|
||||||
|
|
@ -122,5 +124,9 @@ async def main():
|
||||||
await sio.wait()
|
await sio.wait()
|
||||||
|
|
||||||
|
|
||||||
|
def main():
|
||||||
|
asyncio.run(aiomain())
|
||||||
|
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
asyncio.run(main())
|
main()
|
||||||
|
|
|
||||||
|
|
@ -15,10 +15,10 @@ import socketio
|
||||||
from .entry import Entry
|
from .entry import Entry
|
||||||
from .sources import Source, available_sources
|
from .sources import Source, available_sources
|
||||||
|
|
||||||
sio = socketio.AsyncServer(cors_allowed_origins="*",
|
sio = socketio.AsyncServer(cors_allowed_origins="*", logger=True, engineio_logger=False)
|
||||||
logger=True, engineio_logger=False)
|
|
||||||
app = web.Application()
|
app = web.Application()
|
||||||
sio.attach(app)
|
sio.attach(app)
|
||||||
|
app.add_routes([web.static("/", "syng/static/")])
|
||||||
|
|
||||||
logging.basicConfig(level=logging.INFO)
|
logging.basicConfig(level=logging.INFO)
|
||||||
logger = logging.getLogger(__name__)
|
logger = logging.getLogger(__name__)
|
||||||
|
|
@ -135,8 +135,7 @@ async def handle_pop_then_get_next(sid, data={}):
|
||||||
|
|
||||||
|
|
||||||
def gen_id(length=4) -> str:
|
def gen_id(length=4) -> str:
|
||||||
client_id = "".join([random.choice(string.ascii_letters)
|
client_id = "".join([random.choice(string.ascii_letters) for _ in range(length)])
|
||||||
for _ in range(length)])
|
|
||||||
if client_id in clients:
|
if client_id in clients:
|
||||||
client_id = gen_id(length + 1)
|
client_id = gen_id(length + 1)
|
||||||
return client_id
|
return client_id
|
||||||
|
|
@ -165,8 +164,7 @@ async def handle_register_client(sid, data: dict[str, Any]):
|
||||||
else:
|
else:
|
||||||
logger.info("Registerd new client %s", room)
|
logger.info("Registerd new client %s", room)
|
||||||
initial_entries = [Entry(**entry) for entry in data["queue"]]
|
initial_entries = [Entry(**entry) for entry in data["queue"]]
|
||||||
clients[room] = State(data["secret"], {}, [],
|
clients[room] = State(data["secret"], {}, [], Queue(initial_entries), sid)
|
||||||
Queue(initial_entries), sid)
|
|
||||||
sio.enter_room(sid, room)
|
sio.enter_room(sid, room)
|
||||||
await sio.emit("client-registered", {"success": True, "room": room}, room=sid)
|
await sio.emit("client-registered", {"success": True, "room": room}, room=sid)
|
||||||
|
|
||||||
|
|
@ -215,8 +213,7 @@ async def handle_config(sid, data):
|
||||||
room = session["room"]
|
room = session["room"]
|
||||||
state = clients[room]
|
state = clients[room]
|
||||||
|
|
||||||
state.sources[data["source"]] = available_sources[data["source"]](
|
state.sources[data["source"]] = available_sources[data["source"]](data["config"])
|
||||||
data["config"])
|
|
||||||
logger.info("Added source %s", data["source"])
|
logger.info("Added source %s", data["source"])
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -252,8 +249,7 @@ async def handle_get_config(sid, data):
|
||||||
if is_admin:
|
if is_admin:
|
||||||
await sio.emit(
|
await sio.emit(
|
||||||
"config",
|
"config",
|
||||||
{name: source.get_config()
|
{name: source.get_config() for name, source in state.sources.items()},
|
||||||
for name, source in state.sources.items()},
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
219
syng/static/css/app.css
Normal file
219
syng/static/css/app.css
Normal file
|
|
@ -0,0 +1,219 @@
|
||||||
|
|
||||||
|
li {
|
||||||
|
opacity: 0.9;
|
||||||
|
margin-left: 0.2em;
|
||||||
|
margin-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin:0 !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height:100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-color: #008000;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
display: block;
|
||||||
|
padding: 1.25rem;
|
||||||
|
font-size: .75rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splitter {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comp-column {
|
||||||
|
max-height: 100vh;
|
||||||
|
flex:1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left-side {
|
||||||
|
margin: 0.2em 0.1em 0.2em 0.2em;
|
||||||
|
}
|
||||||
|
#middle {
|
||||||
|
margin: 0.2em 0.1em 0.1em 0.2em;
|
||||||
|
}
|
||||||
|
#right-side {
|
||||||
|
margin: 0.2em 0.2em 0.1em 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#main-content {
|
||||||
|
height: 100vh;
|
||||||
|
max-height: 100vh;
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-container {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-panel {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vsplit {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.singer {
|
||||||
|
font-size: smaller;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li {
|
||||||
|
padding:0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-12 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#search-results div {
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tabs-panel {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li:nth-child(odd) {
|
||||||
|
background-color: #e6e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li:nth-child(even) {
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#current::before, #large-current::before{
|
||||||
|
content: "Now Playing";
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eta {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eta::before {
|
||||||
|
content: "in ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.eta::after {
|
||||||
|
content: " min";
|
||||||
|
}
|
||||||
|
|
||||||
|
.artist::after{
|
||||||
|
content: " - ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.album::before {
|
||||||
|
content: " [";
|
||||||
|
}
|
||||||
|
.album::after {
|
||||||
|
content: "]";
|
||||||
|
}
|
||||||
|
|
||||||
|
#large-current, #current, .button, button:focus {
|
||||||
|
background-color: #008000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover, button:hover{
|
||||||
|
background-color: #3b3b3b;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: url(../syng.png) fixed;
|
||||||
|
background-color: #8a8a8a;
|
||||||
|
background-size: auto 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #a53b2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-title > a{
|
||||||
|
color: #008000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-title > a:hover {
|
||||||
|
background-color: #444444;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-title > a:focus, .tabs-title > a[aria-selected="true"]{
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #008000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.tabs {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fright {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.tabs .tabs-title {
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
margin-bottom: 0.1em;
|
||||||
|
background-color: #3b3b3b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bulk-upload-label {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group .button {
|
||||||
|
/* margin-left: 0.5em; */
|
||||||
|
}
|
||||||
2337
syng/static/css/font-awesome.css
vendored
Normal file
2337
syng/static/css/font-awesome.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
6455
syng/static/css/foundation.css
vendored
Normal file
6455
syng/static/css/foundation.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
syng/static/css/foundation.min.css
vendored
Normal file
1
syng/static/css/foundation.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
syng/static/fonts/FontAwesome.otf
Normal file
BIN
syng/static/fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
syng/static/fonts/fontawesome-webfont.eot
Normal file
BIN
syng/static/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
syng/static/fonts/fontawesome-webfont.svg
Normal file
2671
syng/static/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 434 KiB |
BIN
syng/static/fonts/fontawesome-webfont.ttf
Normal file
BIN
syng/static/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
syng/static/fonts/fontawesome-webfont.woff
Normal file
BIN
syng/static/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
syng/static/fonts/fontawesome-webfont.woff2
Normal file
BIN
syng/static/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
527
syng/static/index.html
Normal file
527
syng/static/index.html
Normal file
|
|
@ -0,0 +1,527 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
|
<title>syng 2.0.0</title>
|
||||||
|
<link rel="stylesheet" href="css/foundation.min.css"/>
|
||||||
|
<link rel="stylesheet" href="css/app.css"/>
|
||||||
|
<link rel="stylesheet" href="css/font-awesome.css"/>
|
||||||
|
<script src="jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="jquery.serialize-object.min.js"></script>
|
||||||
|
<script src="js/vendor/foundation.js"></script>
|
||||||
|
<script src="js/vendor/rivets.bundled.min.js"></script>
|
||||||
|
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="row" id="main-content">
|
||||||
|
<div class="hide-for-large">
|
||||||
|
<div class="splitter">
|
||||||
|
<div class="comp-column">
|
||||||
|
<div data-tabs class="tabs" id="main-tab">
|
||||||
|
<div class="tabs-title is-active"><a href="#simplesearch"><i class="fa fa-search fa-3x"></i></a></div>
|
||||||
|
<div class="tabs-title"><a href="#queue-list" id="queue-tab"><i class="fa fa-list fa-3x"></i></a></div>
|
||||||
|
<div class="tabs-title"><a href="#recent-list"><i class="fa fa-history fa-3x"></i></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="tabs-container" data-tabs-content="main-tab">
|
||||||
|
<div class="tabs-panel is-active" id="simplesearch">
|
||||||
|
<div class="vsplit">
|
||||||
|
|
||||||
|
|
||||||
|
<form id="simple-search-form" class="form">
|
||||||
|
<div class="input-group">
|
||||||
|
<input id="search-query" class="input-group-field" type="search" placeholder="Search term or YouTube link (https://www.youtube.com/watch?v=...)" name="q" />
|
||||||
|
<div class="input-group-button">
|
||||||
|
<button class="button" type="submit"><i class="fa fa-search"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div id="search-results" class="results">
|
||||||
|
<ul class="vertical menu" >
|
||||||
|
<li rv-each-result="results.items">
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns small-10">
|
||||||
|
<span class="artist">{ result.artist }</span>
|
||||||
|
<span class="title">{ result.title }</span>
|
||||||
|
<span class="album">{ result.album }</span>
|
||||||
|
</div>
|
||||||
|
<div class="columns small-2">
|
||||||
|
<button class="button alert fright" rv-if="result.type | eq 'youtube'" rv-on-click="results.openNewTab">
|
||||||
|
<i class="fa fa-play"></i>
|
||||||
|
</button>
|
||||||
|
<button class="button fright" rv-on-click="results.addToQueue">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabs-panel" id="queue-list">
|
||||||
|
<div class="vsplit">
|
||||||
|
<div id="queue-list-wrapper" class="results">
|
||||||
|
<ul id="queue" class="vertical menu">
|
||||||
|
<li rv-if="queue.current" id="current">
|
||||||
|
{% if admin == True -%}
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns small-9">
|
||||||
|
{%- endif %}
|
||||||
|
<div class="row">
|
||||||
|
<span class="artist">{ queue.current.artist }</span>
|
||||||
|
<span class="title">{ queue.current.title }</span>
|
||||||
|
<span class="album">{ queue.current.album }</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="singer">{ queue.current.performer }</span>
|
||||||
|
</div>
|
||||||
|
{% if admin == True -%}
|
||||||
|
</div>
|
||||||
|
<div class="columns small-3">
|
||||||
|
<div class="button-group">
|
||||||
|
<button class="button alert fright" rv-on-click="queue.abort"><i class="fa fa-step-forward"></i></button>
|
||||||
|
<button class="button alert fright" rv-on-click="queue.kill"><i class="fa fa-times"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{%- endif %}
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li rv-each-entry="queue.queue">
|
||||||
|
{% if admin == True -%}
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns small-9">
|
||||||
|
{%- endif %}
|
||||||
|
<div class="row">
|
||||||
|
<span class="artist">{ entry.artist }</span>
|
||||||
|
<span class="title">{ entry.title }</span>
|
||||||
|
<span class="album">{ entry.album }</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="singer">{ entry.performer }</span>
|
||||||
|
<span class="eta">{ entry.etamin }</span>
|
||||||
|
</div>
|
||||||
|
{% if admin == True -%}
|
||||||
|
</div>
|
||||||
|
<div class="columns small-3">
|
||||||
|
<button class="button alert fright" rv-on-click="queue.deleteFromQueue"><i class="fa fa-minus"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{%- endif %}
|
||||||
|
</li>
|
||||||
|
{% if admin == True %}
|
||||||
|
<li>
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns small-12">
|
||||||
|
<a class="button" download="queue.json" rv-href="queue.data">Save</a>
|
||||||
|
<label for="small-bulk-upload" class="button bulk-upload-label">Bulk Append</label>
|
||||||
|
<input type="file" id="small-bulk-upload" rv-on-change="queue.bulk_append" class="show-for-sr">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tabs-panel" id="recent-list">
|
||||||
|
<div class="vsplit">
|
||||||
|
<div id="recent-list-wrapper" class="results">
|
||||||
|
<ol id="last10" class="vertical menu">
|
||||||
|
<li rv-each-entry="queue.last10">
|
||||||
|
<div class="row">
|
||||||
|
<span class="artist">{ entry.artist }</span>
|
||||||
|
<span class="title">{ entry.title }</span>
|
||||||
|
<span class="album">{ entry.album }</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="singer">{ entry.performer }</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="show-for-large">
|
||||||
|
<div class="splitter">
|
||||||
|
<div class="comp-column" id="left-side">
|
||||||
|
<div class="header">Search</div>
|
||||||
|
<div id="large-simplesearch">
|
||||||
|
<div class="vsplit">
|
||||||
|
<form id="large-simple-search-form" class="form">
|
||||||
|
<div class="input-group">
|
||||||
|
<input id="large-search-query" class="input-group-field" type="search" placeholder="Search term or YouTube link (https://www.youtube.com/watch?v=...)" name="q" />
|
||||||
|
<div class="input-group-button">
|
||||||
|
<button class="button" type="submit"><i class="fa fa-search"></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="input-group-button" style="padding-left: 0.25em">
|
||||||
|
<button class="button" type="button" data-open="settings-large"><i class="fa fa-sliders"></i></button>
|
||||||
|
<div class="reveal" id="settings-large" data-reveal>
|
||||||
|
<div class="grid-x">
|
||||||
|
<div class="cell small-4 medium-2">
|
||||||
|
<div class="switch">
|
||||||
|
<input class="switch-input" name="append-karaoke" id="large-append-karaoke" type="checkbox" checked="checked"> <label class="switch-paddle" for="large-append-karaoke"></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell small-8 medium-4">
|
||||||
|
<label class="text-left middle" for="large-append-karaoke">Add "Karaoke" to Search</label>
|
||||||
|
</div>
|
||||||
|
<div class="cell small-4 medium-2">
|
||||||
|
<div class="switch">
|
||||||
|
<input class="switch-input" name="youtube" id="large-youtube" type="checkbox" checked="checked"> <label class="switch-paddle" for="large-youtube"></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell small-8 medium-4">
|
||||||
|
<label class="text-left middle" for="large-youtube">Search YouTube</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- {%- for channel in channels %} -->
|
||||||
|
<!-- <div class="cell small-4 medium-2"> -->
|
||||||
|
<!-- <div class="switch"> -->
|
||||||
|
<!-- <input class="switch-input" name="{{channel}}" id="large-channel-{{loop.index}}" type="checkbox" checked="checked"> <label class="switch-paddle" for="large-channel-{{loop.index}}"></label> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- <div class="cell small-8 medium-4"> -->
|
||||||
|
<!-- <label class="text-left middle" for="large-channel-{{loop.index}}">Search {{ channel }}</label> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- {%- endfor %} -->
|
||||||
|
|
||||||
|
<button class="close-button" data-close aria-label="Close modal" type="button">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div id="large-search-results" class="results">
|
||||||
|
<ul class="vertical menu">
|
||||||
|
<li rv-each-result="results.items">
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns small-10">
|
||||||
|
<span class="artist">{ result.artist }</span>
|
||||||
|
<span class="title">{ result.title }</span>
|
||||||
|
<span class="album">{ result.album }</span>
|
||||||
|
</div>
|
||||||
|
<div class="columns small-2">
|
||||||
|
<button class="button alert fright" rv-if="result.source | eq 'youtube'" rv-on-click="results.openNewTab">
|
||||||
|
<i class="fa fa-play"></i>
|
||||||
|
</button>
|
||||||
|
<button class="button fright" rv-on-click="results.addToQueue">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comp-column" id="middle">
|
||||||
|
<div class="header">Queue</div>
|
||||||
|
<div id="large-queue-list">
|
||||||
|
<div class="vsplit">
|
||||||
|
<div id="large-queue-list-wrapper" class="results">
|
||||||
|
<ul id="large-queue" class="vertical menu">
|
||||||
|
<li rv-if="queue.current" id="large-current">
|
||||||
|
{% if admin == True -%}
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns small-9">
|
||||||
|
{%- endif %}
|
||||||
|
<div class="row">
|
||||||
|
<span class="artist">{ queue.current.artist }</span>
|
||||||
|
<span class="title">{ queue.current.title }</span>
|
||||||
|
<span class="album">{ queue.current.album }</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="singer">{ queue.current.performer }</span>
|
||||||
|
</div>
|
||||||
|
{% if admin == True -%}
|
||||||
|
</div>
|
||||||
|
<div class="columns small-3">
|
||||||
|
<div class="button-group">
|
||||||
|
<button class="button alert fright" rv-on-click="queue.kill">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</button>
|
||||||
|
<button class="button alert fright" rv-on-click="queue.abort">
|
||||||
|
<i class="fa fa-step-forward"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{%- endif %}
|
||||||
|
|
||||||
|
</li>
|
||||||
|
<li {% if admin == True %} draggable="true" {% endif %} rv-each-entry="queue.queue">
|
||||||
|
{% if admin == True -%}
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns small-9">
|
||||||
|
{%- endif %}
|
||||||
|
<div class="row">
|
||||||
|
<span class="artist">{ entry.artist }</span>
|
||||||
|
<span class="title">{ entry.title }</span>
|
||||||
|
<span class="album">{ entry.album }</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="singer">{ entry.performer }</span>
|
||||||
|
<span class="eta">{ entry.etamin }</span>
|
||||||
|
</div>
|
||||||
|
{% if admin == True -%}
|
||||||
|
</div>
|
||||||
|
<div class="columns small-3">
|
||||||
|
<div class="button-group">
|
||||||
|
<button class="button alert fright" rv-on-click="queue.moveup">
|
||||||
|
<i class="fa fa-arrow-circle-up"></i>
|
||||||
|
</button>
|
||||||
|
<button class="button alert fright" rv-on-click="queue.deleteFromQueue">
|
||||||
|
<i class="fa fa-minus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{%- endif %}
|
||||||
|
</li>
|
||||||
|
{% if admin == True %}
|
||||||
|
<li>
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns small-6">
|
||||||
|
<a class="button" download="queue.json" rv-href="queue.data">Save</a>
|
||||||
|
<label for="large-bulk-upload" class="button bulk-upload-label">Bulk Append</label>
|
||||||
|
<input type="file" id="large-bulk-upload" rv-on-change="queue.bulk_append" class="show-for-sr">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comp-column" id="right-side">
|
||||||
|
<div class="header">Recent</div>
|
||||||
|
<div id="large-recent-list">
|
||||||
|
<div class="vsplit">
|
||||||
|
<div id="large-recent-list-wrapper" class="results">
|
||||||
|
<ol id="large-last10" class="vertical menu">
|
||||||
|
<li rv-each-entry="queue.last10">
|
||||||
|
<div class="row">
|
||||||
|
<span class="artist">{ entry.artist }</span>
|
||||||
|
<span class="title">{ entry.title }</span>
|
||||||
|
<span class="album">{ entry.album }</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="singer">{ entry.performer }</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
const socket = io();
|
||||||
|
|
||||||
|
function ytselect(event) {
|
||||||
|
console.log(event.target.value);
|
||||||
|
var ytwarning = document.getElementsById("ytwarning");
|
||||||
|
if(event.target.value === "no_channel") {
|
||||||
|
ytwarning.style.display = "list-item";
|
||||||
|
}
|
||||||
|
ytwarning.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getQuery() {
|
||||||
|
var query = {};
|
||||||
|
$('input').each(function() {
|
||||||
|
if(this.type == "checkbox") {
|
||||||
|
query[this.name] = this.checked;
|
||||||
|
} else {
|
||||||
|
if(this.disabled == false) {
|
||||||
|
query[this.name] = this.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return query;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).foundation();
|
||||||
|
results = {
|
||||||
|
items : [],
|
||||||
|
openNewTab : function(event, item) {
|
||||||
|
event.preventDefault();
|
||||||
|
window.open(item.result.id, '_blank');
|
||||||
|
},
|
||||||
|
addToQueue : function(event, item) {
|
||||||
|
event.preventDefault();
|
||||||
|
var singer = prompt("Performer:");
|
||||||
|
if(singer !== null) {
|
||||||
|
// $.post('queue', JSON.stringify({'id': item.result.id, 'singer': singer, 'type': item.result.type, 'location': item.result.location}), addQueueCallback, 'json');
|
||||||
|
socket.emit("append", {"performer": singer, "source": item.result.source, "id": item.result.id});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
queue = {
|
||||||
|
current: null,
|
||||||
|
last10: [],
|
||||||
|
queue: [],
|
||||||
|
moveup: function (event, item) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (item.index === 0) {
|
||||||
|
alert("You cannot switch places with the currently playing song.");
|
||||||
|
} else {
|
||||||
|
$.ajax({
|
||||||
|
method: 'patch',
|
||||||
|
url: 'queue',
|
||||||
|
data: JSON.stringify({'action': 'move', 'param': {'src': item.index, 'dst': item.index - 1}}),
|
||||||
|
success: updateHandler,
|
||||||
|
dataType: 'json'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deleteFromQueue: function (event, item) {
|
||||||
|
event.preventDefault();
|
||||||
|
$.ajax({
|
||||||
|
method: 'patch',
|
||||||
|
url: 'queue',
|
||||||
|
data: JSON.stringify({'action': 'delete', 'param': {'index': item.index} }),
|
||||||
|
success: updateHandler,
|
||||||
|
dataType: 'json'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
bulk_append: function (event) {
|
||||||
|
var file = event.target.files[0];
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = (function(theFile) {
|
||||||
|
return function(e) {
|
||||||
|
new_queue = JSON.parse(e.target.result);
|
||||||
|
$.post('queue', JSON.stringify(new_queue.queue), addQueueCallback, 'json');
|
||||||
|
}
|
||||||
|
})(file);
|
||||||
|
reader.readAsText(file);
|
||||||
|
},
|
||||||
|
data: "",
|
||||||
|
kill: function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
areyousure = confirm("This will kill the players process. Did you try skipping the song?");
|
||||||
|
if(areyousure === true) {
|
||||||
|
$.ajax({
|
||||||
|
method: 'patch',
|
||||||
|
url: 'queue',
|
||||||
|
data: JSON.stringify({'action': 'kill'}),
|
||||||
|
success: updateHandler,
|
||||||
|
dataType: 'json'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
abort: function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
$.ajax({
|
||||||
|
method: 'patch',
|
||||||
|
url: 'queue',
|
||||||
|
data: JSON.stringify({'action': 'skip'}),
|
||||||
|
success: updateHandler,
|
||||||
|
dataType: 'json'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
rivets.formatters.eq = function(value, arg) {
|
||||||
|
return value === arg;
|
||||||
|
};
|
||||||
|
|
||||||
|
if(Foundation.MediaQuery.atLeast("large")) {
|
||||||
|
$('#large-search-query').focus();
|
||||||
|
$('#search-query').get(0).disabled = true;
|
||||||
|
$('#large-search-query').get(0).disabled = false;
|
||||||
|
rivets.bind(document.getElementById("large-search-results"), {results: results});
|
||||||
|
rivets.bind(document.getElementById("large-queue"), {queue: queue});
|
||||||
|
rivets.bind(document.getElementById("large-last10"), {queue: queue});
|
||||||
|
} else {
|
||||||
|
$('#search-query').focus();
|
||||||
|
$('#large-search-query').get(0).disabled = true;
|
||||||
|
$('#search-query').get(0).disabled = false;
|
||||||
|
rivets.bind(document.getElementById("search-results"), {results: results});
|
||||||
|
rivets.bind(document.getElementById("queue"), {queue: queue});
|
||||||
|
rivets.bind(document.getElementById("last10"), {queue: queue});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addQueueCallback(data) {
|
||||||
|
$("#queue-tab").click();
|
||||||
|
updateHandler(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHandler(data) {
|
||||||
|
queue.queue = data['queue'];
|
||||||
|
queue.current = data['current'];
|
||||||
|
queue.last10 = data['last10'];
|
||||||
|
queue.data = "data:application/json," + (JSON.stringify({
|
||||||
|
'queue': [queue.current].concat(queue.queue)
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#large-simple-search-form, #simple-search-form").on("submit", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
if ($(this).serializeObject().q.startsWith("https://www.youtube.com/")) {
|
||||||
|
results.addToQueue(event, {result: {id: $(this).serializeObject().q, type: "youtube"}});
|
||||||
|
} else {
|
||||||
|
results.items = [{title: "Loading...", artist: "Loading...", album: "Loading...", type:"temp"}];
|
||||||
|
query = {"query": $("#large-search-query").val()}
|
||||||
|
socket.emit("search", query);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(window).on('changed.zf.mediaquery', function() {
|
||||||
|
if(Foundation.MediaQuery.atLeast("large")) {
|
||||||
|
$('#large-search-query').focus();
|
||||||
|
$('#search-query').get(0).disabled = true;
|
||||||
|
$('#large-search-query').get(0).disabled = false;
|
||||||
|
rivets.bind(document.getElementById("large-search-results"), {results: results});
|
||||||
|
rivets.bind(document.getElementById("large-queue"), {queue: queue});
|
||||||
|
rivets.bind(document.getElementById("large-last10"), {queue: queue});
|
||||||
|
} else {
|
||||||
|
$('#search-query').focus();
|
||||||
|
$('#large-search-query').get(0).disabled = true;
|
||||||
|
$('#search-query').get(0).disabled = false;
|
||||||
|
rivets.bind(document.getElementById("search-results"), {results: results});
|
||||||
|
rivets.bind(document.getElementById("queue"), {queue: queue});
|
||||||
|
rivets.bind(document.getElementById("last10"), {queue: queue});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on("connect", () => {
|
||||||
|
socket.emit("register-web", {"room": "ABCD"})
|
||||||
|
})
|
||||||
|
|
||||||
|
socket.on("state", (data) => {
|
||||||
|
data['queue'] = data.slice(1);
|
||||||
|
data['current'] = data[0];
|
||||||
|
data['last10'] = [];
|
||||||
|
updateHandler(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on("search-results", (data) => {
|
||||||
|
results.items = data;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* $.get("queue", updateHandler);
|
||||||
|
setInterval(function() {
|
||||||
|
$.get("queue", updateHandler)
|
||||||
|
}, 2000); */
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
4
syng/static/jquery-3.2.1.min.js
vendored
Normal file
4
syng/static/jquery-3.2.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
syng/static/jquery.serialize-object.min.js
vendored
Normal file
8
syng/static/jquery.serialize-object.min.js
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/**
|
||||||
|
* jQuery serializeObject
|
||||||
|
* @copyright 2014, macek <paulmacek@gmail.com>
|
||||||
|
* @link https://github.com/macek/jquery-serialize-object
|
||||||
|
* @license BSD
|
||||||
|
* @version 2.5.0
|
||||||
|
*/
|
||||||
|
!function(e,i){if("function"==typeof define&&define.amd)define(["exports","jquery"],function(e,r){return i(e,r)});else if("undefined"!=typeof exports){var r=require("jquery");i(exports,r)}else i(e,e.jQuery||e.Zepto||e.ender||e.$)}(this,function(e,i){function r(e,r){function n(e,i,r){return e[i]=r,e}function a(e,i){for(var r,a=e.match(t.key);void 0!==(r=a.pop());)if(t.push.test(r)){var u=s(e.replace(/\[\]$/,""));i=n([],u,i)}else t.fixed.test(r)?i=n([],r,i):t.named.test(r)&&(i=n({},r,i));return i}function s(e){return void 0===h[e]&&(h[e]=0),h[e]++}function u(e){switch(i('[name="'+e.name+'"]',r).attr("type")){case"checkbox":return"on"===e.value?!0:e.value;default:return e.value}}function f(i){if(!t.validate.test(i.name))return this;var r=a(i.name,u(i));return l=e.extend(!0,l,r),this}function d(i){if(!e.isArray(i))throw new Error("formSerializer.addPairs expects an Array");for(var r=0,t=i.length;t>r;r++)this.addPair(i[r]);return this}function o(){return l}function c(){return JSON.stringify(o())}var l={},h={};this.addPair=f,this.addPairs=d,this.serialize=o,this.serializeJSON=c}var t={validate:/^[a-z_][a-z0-9_]*(?:\[(?:\d*|[a-z0-9_]+)\])*$/i,key:/[a-z0-9_]+|(?=\[\])/gi,push:/^$/,fixed:/^\d+$/,named:/^[a-z0-9_]+$/i};return r.patterns=t,r.serializeObject=function(){return new r(i,this).addPairs(this.serializeArray()).serialize()},r.serializeJSON=function(){return new r(i,this).addPairs(this.serializeArray()).serializeJSON()},"undefined"!=typeof i.fn&&(i.fn.serializeObject=r.serializeObject,i.fn.serializeJSON=r.serializeJSON),e.FormSerializer=r,r});
|
||||||
1
syng/static/js/app.js
Normal file
1
syng/static/js/app.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
$(document).foundation()
|
||||||
531
syng/static/js/vendor/foundation.js
vendored
Normal file
531
syng/static/js/vendor/foundation.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
syng/static/js/vendor/foundation.min.js
vendored
Normal file
1
syng/static/js/vendor/foundation.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
10881
syng/static/js/vendor/jquery.js
vendored
Normal file
10881
syng/static/js/vendor/jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
6
syng/static/js/vendor/rivets.bundled.min.js
vendored
Normal file
6
syng/static/js/vendor/rivets.bundled.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
517
syng/static/js/vendor/what-input.js
vendored
Normal file
517
syng/static/js/vendor/what-input.js
vendored
Normal file
|
|
@ -0,0 +1,517 @@
|
||||||
|
/**
|
||||||
|
* what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
|
||||||
|
* @version v5.2.10
|
||||||
|
* @link https://github.com/ten1seven/what-input
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
|
module.exports = factory();
|
||||||
|
else if(typeof define === 'function' && define.amd)
|
||||||
|
define("whatInput", [], factory);
|
||||||
|
else if(typeof exports === 'object')
|
||||||
|
exports["whatInput"] = factory();
|
||||||
|
else
|
||||||
|
root["whatInput"] = factory();
|
||||||
|
})(this, function() {
|
||||||
|
return /******/ (function(modules) { // webpackBootstrap
|
||||||
|
/******/ // The module cache
|
||||||
|
/******/ var installedModules = {};
|
||||||
|
|
||||||
|
/******/ // The require function
|
||||||
|
/******/ function __webpack_require__(moduleId) {
|
||||||
|
|
||||||
|
/******/ // Check if module is in cache
|
||||||
|
/******/ if(installedModules[moduleId])
|
||||||
|
/******/ return installedModules[moduleId].exports;
|
||||||
|
|
||||||
|
/******/ // Create a new module (and put it into the cache)
|
||||||
|
/******/ var module = installedModules[moduleId] = {
|
||||||
|
/******/ exports: {},
|
||||||
|
/******/ id: moduleId,
|
||||||
|
/******/ loaded: false
|
||||||
|
/******/ };
|
||||||
|
|
||||||
|
/******/ // Execute the module function
|
||||||
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||||
|
|
||||||
|
/******/ // Flag the module as loaded
|
||||||
|
/******/ module.loaded = true;
|
||||||
|
|
||||||
|
/******/ // Return the exports of the module
|
||||||
|
/******/ return module.exports;
|
||||||
|
/******/ }
|
||||||
|
|
||||||
|
|
||||||
|
/******/ // expose the modules object (__webpack_modules__)
|
||||||
|
/******/ __webpack_require__.m = modules;
|
||||||
|
|
||||||
|
/******/ // expose the module cache
|
||||||
|
/******/ __webpack_require__.c = installedModules;
|
||||||
|
|
||||||
|
/******/ // __webpack_public_path__
|
||||||
|
/******/ __webpack_require__.p = "";
|
||||||
|
|
||||||
|
/******/ // Load entry module and return exports
|
||||||
|
/******/ return __webpack_require__(0);
|
||||||
|
/******/ })
|
||||||
|
/************************************************************************/
|
||||||
|
/******/ ([
|
||||||
|
/* 0 */
|
||||||
|
/***/ (function(module, exports) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
module.exports = function () {
|
||||||
|
/*
|
||||||
|
* bail out if there is no document or window
|
||||||
|
* (i.e. in a node/non-DOM environment)
|
||||||
|
*
|
||||||
|
* Return a stubbed API instead
|
||||||
|
*/
|
||||||
|
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||||
|
return {
|
||||||
|
// always return "initial" because no interaction will ever be detected
|
||||||
|
ask: function ask() {
|
||||||
|
return 'initial';
|
||||||
|
},
|
||||||
|
|
||||||
|
// always return null
|
||||||
|
element: function element() {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
// no-op
|
||||||
|
ignoreKeys: function ignoreKeys() {},
|
||||||
|
|
||||||
|
// no-op
|
||||||
|
specificKeys: function specificKeys() {},
|
||||||
|
|
||||||
|
// no-op
|
||||||
|
registerOnChange: function registerOnChange() {},
|
||||||
|
|
||||||
|
// no-op
|
||||||
|
unRegisterOnChange: function unRegisterOnChange() {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* variables
|
||||||
|
*/
|
||||||
|
|
||||||
|
// cache document.documentElement
|
||||||
|
var docElem = document.documentElement;
|
||||||
|
|
||||||
|
// currently focused dom element
|
||||||
|
var currentElement = null;
|
||||||
|
|
||||||
|
// last used input type
|
||||||
|
var currentInput = 'initial';
|
||||||
|
|
||||||
|
// last used input intent
|
||||||
|
var currentIntent = currentInput;
|
||||||
|
|
||||||
|
// UNIX timestamp of current event
|
||||||
|
var currentTimestamp = Date.now();
|
||||||
|
|
||||||
|
// check for a `data-whatpersist` attribute on either the `html` or `body` elements, defaults to `true`
|
||||||
|
var shouldPersist = 'false';
|
||||||
|
|
||||||
|
// form input types
|
||||||
|
var formInputs = ['button', 'input', 'select', 'textarea'];
|
||||||
|
|
||||||
|
// empty array for holding callback functions
|
||||||
|
var functionList = [];
|
||||||
|
|
||||||
|
// list of modifier keys commonly used with the mouse and
|
||||||
|
// can be safely ignored to prevent false keyboard detection
|
||||||
|
var ignoreMap = [16, // shift
|
||||||
|
17, // control
|
||||||
|
18, // alt
|
||||||
|
91, // Windows key / left Apple cmd
|
||||||
|
93 // Windows menu / right Apple cmd
|
||||||
|
];
|
||||||
|
|
||||||
|
var specificMap = [];
|
||||||
|
|
||||||
|
// mapping of events to input types
|
||||||
|
var inputMap = {
|
||||||
|
keydown: 'keyboard',
|
||||||
|
keyup: 'keyboard',
|
||||||
|
mousedown: 'mouse',
|
||||||
|
mousemove: 'mouse',
|
||||||
|
MSPointerDown: 'pointer',
|
||||||
|
MSPointerMove: 'pointer',
|
||||||
|
pointerdown: 'pointer',
|
||||||
|
pointermove: 'pointer',
|
||||||
|
touchstart: 'touch',
|
||||||
|
touchend: 'touch'
|
||||||
|
|
||||||
|
// boolean: true if the page is being scrolled
|
||||||
|
};var isScrolling = false;
|
||||||
|
|
||||||
|
// store current mouse position
|
||||||
|
var mousePos = {
|
||||||
|
x: null,
|
||||||
|
y: null
|
||||||
|
|
||||||
|
// map of IE 10 pointer events
|
||||||
|
};var pointerMap = {
|
||||||
|
2: 'touch',
|
||||||
|
3: 'touch', // treat pen like touch
|
||||||
|
4: 'mouse'
|
||||||
|
|
||||||
|
// check support for passive event listeners
|
||||||
|
};var supportsPassive = false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
var opts = Object.defineProperty({}, 'passive', {
|
||||||
|
get: function get() {
|
||||||
|
supportsPassive = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('test', null, opts);
|
||||||
|
} catch (e) {}
|
||||||
|
// fail silently
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* set up
|
||||||
|
*/
|
||||||
|
|
||||||
|
var setUp = function setUp() {
|
||||||
|
// add correct mouse wheel event mapping to `inputMap`
|
||||||
|
inputMap[detectWheel()] = 'mouse';
|
||||||
|
|
||||||
|
addListeners();
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* events
|
||||||
|
*/
|
||||||
|
|
||||||
|
var addListeners = function addListeners() {
|
||||||
|
// `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
|
||||||
|
// can only demonstrate potential, but not actual, interaction
|
||||||
|
// and are treated separately
|
||||||
|
var options = supportsPassive ? { passive: true } : false;
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', setPersist);
|
||||||
|
|
||||||
|
// pointer events (mouse, pen, touch)
|
||||||
|
if (window.PointerEvent) {
|
||||||
|
window.addEventListener('pointerdown', setInput);
|
||||||
|
window.addEventListener('pointermove', setIntent);
|
||||||
|
} else if (window.MSPointerEvent) {
|
||||||
|
window.addEventListener('MSPointerDown', setInput);
|
||||||
|
window.addEventListener('MSPointerMove', setIntent);
|
||||||
|
} else {
|
||||||
|
// mouse events
|
||||||
|
window.addEventListener('mousedown', setInput);
|
||||||
|
window.addEventListener('mousemove', setIntent);
|
||||||
|
|
||||||
|
// touch events
|
||||||
|
if ('ontouchstart' in window) {
|
||||||
|
window.addEventListener('touchstart', setInput, options);
|
||||||
|
window.addEventListener('touchend', setInput);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// mouse wheel
|
||||||
|
window.addEventListener(detectWheel(), setIntent, options);
|
||||||
|
|
||||||
|
// keyboard events
|
||||||
|
window.addEventListener('keydown', setInput);
|
||||||
|
window.addEventListener('keyup', setInput);
|
||||||
|
|
||||||
|
// focus events
|
||||||
|
window.addEventListener('focusin', setElement);
|
||||||
|
window.addEventListener('focusout', clearElement);
|
||||||
|
};
|
||||||
|
|
||||||
|
// checks if input persistence should happen and
|
||||||
|
// get saved state from session storage if true (defaults to `false`)
|
||||||
|
var setPersist = function setPersist() {
|
||||||
|
shouldPersist = !(docElem.getAttribute('data-whatpersist') || document.body.getAttribute('data-whatpersist') === 'false');
|
||||||
|
|
||||||
|
if (shouldPersist) {
|
||||||
|
// check for session variables and use if available
|
||||||
|
try {
|
||||||
|
if (window.sessionStorage.getItem('what-input')) {
|
||||||
|
currentInput = window.sessionStorage.getItem('what-input');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.sessionStorage.getItem('what-intent')) {
|
||||||
|
currentIntent = window.sessionStorage.getItem('what-intent');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// fail silently
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// always run these so at least `initial` state is set
|
||||||
|
doUpdate('input');
|
||||||
|
doUpdate('intent');
|
||||||
|
};
|
||||||
|
|
||||||
|
// checks conditions before updating new input
|
||||||
|
var setInput = function setInput(event) {
|
||||||
|
var eventKey = event.which;
|
||||||
|
var value = inputMap[event.type];
|
||||||
|
|
||||||
|
if (value === 'pointer') {
|
||||||
|
value = pointerType(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
var ignoreMatch = !specificMap.length && ignoreMap.indexOf(eventKey) === -1;
|
||||||
|
|
||||||
|
var specificMatch = specificMap.length && specificMap.indexOf(eventKey) !== -1;
|
||||||
|
|
||||||
|
var shouldUpdate = value === 'keyboard' && eventKey && (ignoreMatch || specificMatch) || value === 'mouse' || value === 'touch';
|
||||||
|
|
||||||
|
// prevent touch detection from being overridden by event execution order
|
||||||
|
if (validateTouch(value)) {
|
||||||
|
shouldUpdate = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldUpdate && currentInput !== value) {
|
||||||
|
currentInput = value;
|
||||||
|
|
||||||
|
persistInput('input', currentInput);
|
||||||
|
doUpdate('input');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldUpdate && currentIntent !== value) {
|
||||||
|
// preserve intent for keyboard interaction with form fields
|
||||||
|
var activeElem = document.activeElement;
|
||||||
|
var notFormInput = activeElem && activeElem.nodeName && (formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1 || activeElem.nodeName.toLowerCase() === 'button' && !checkClosest(activeElem, 'form'));
|
||||||
|
|
||||||
|
if (notFormInput) {
|
||||||
|
currentIntent = value;
|
||||||
|
|
||||||
|
persistInput('intent', currentIntent);
|
||||||
|
doUpdate('intent');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// updates the doc and `inputTypes` array with new input
|
||||||
|
var doUpdate = function doUpdate(which) {
|
||||||
|
docElem.setAttribute('data-what' + which, which === 'input' ? currentInput : currentIntent);
|
||||||
|
|
||||||
|
fireFunctions(which);
|
||||||
|
};
|
||||||
|
|
||||||
|
// updates input intent for `mousemove` and `pointermove`
|
||||||
|
var setIntent = function setIntent(event) {
|
||||||
|
var value = inputMap[event.type];
|
||||||
|
|
||||||
|
if (value === 'pointer') {
|
||||||
|
value = pointerType(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
// test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
|
||||||
|
detectScrolling(event);
|
||||||
|
|
||||||
|
// only execute if scrolling isn't happening
|
||||||
|
if ((!isScrolling && !validateTouch(value) || isScrolling && event.type === 'wheel' || event.type === 'mousewheel' || event.type === 'DOMMouseScroll') && currentIntent !== value) {
|
||||||
|
currentIntent = value;
|
||||||
|
|
||||||
|
persistInput('intent', currentIntent);
|
||||||
|
doUpdate('intent');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var setElement = function setElement(event) {
|
||||||
|
if (!event.target.nodeName) {
|
||||||
|
// If nodeName is undefined, clear the element
|
||||||
|
// This can happen if click inside an <svg> element.
|
||||||
|
clearElement();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentElement = event.target.nodeName.toLowerCase();
|
||||||
|
docElem.setAttribute('data-whatelement', currentElement);
|
||||||
|
|
||||||
|
if (event.target.classList && event.target.classList.length) {
|
||||||
|
docElem.setAttribute('data-whatclasses', event.target.classList.toString().replace(' ', ','));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var clearElement = function clearElement() {
|
||||||
|
currentElement = null;
|
||||||
|
|
||||||
|
docElem.removeAttribute('data-whatelement');
|
||||||
|
docElem.removeAttribute('data-whatclasses');
|
||||||
|
};
|
||||||
|
|
||||||
|
var persistInput = function persistInput(which, value) {
|
||||||
|
if (shouldPersist) {
|
||||||
|
try {
|
||||||
|
window.sessionStorage.setItem('what-' + which, value);
|
||||||
|
} catch (e) {
|
||||||
|
// fail silently
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* utilities
|
||||||
|
*/
|
||||||
|
|
||||||
|
var pointerType = function pointerType(event) {
|
||||||
|
if (typeof event.pointerType === 'number') {
|
||||||
|
return pointerMap[event.pointerType];
|
||||||
|
} else {
|
||||||
|
// treat pen like touch
|
||||||
|
return event.pointerType === 'pen' ? 'touch' : event.pointerType;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// prevent touch detection from being overridden by event execution order
|
||||||
|
var validateTouch = function validateTouch(value) {
|
||||||
|
var timestamp = Date.now();
|
||||||
|
|
||||||
|
var touchIsValid = value === 'mouse' && currentInput === 'touch' && timestamp - currentTimestamp < 200;
|
||||||
|
|
||||||
|
currentTimestamp = timestamp;
|
||||||
|
|
||||||
|
return touchIsValid;
|
||||||
|
};
|
||||||
|
|
||||||
|
// detect version of mouse wheel event to use
|
||||||
|
// via https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
|
||||||
|
var detectWheel = function detectWheel() {
|
||||||
|
var wheelType = null;
|
||||||
|
|
||||||
|
// Modern browsers support "wheel"
|
||||||
|
if ('onwheel' in document.createElement('div')) {
|
||||||
|
wheelType = 'wheel';
|
||||||
|
} else {
|
||||||
|
// Webkit and IE support at least "mousewheel"
|
||||||
|
// or assume that remaining browsers are older Firefox
|
||||||
|
wheelType = document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
|
||||||
|
}
|
||||||
|
|
||||||
|
return wheelType;
|
||||||
|
};
|
||||||
|
|
||||||
|
// runs callback functions
|
||||||
|
var fireFunctions = function fireFunctions(type) {
|
||||||
|
for (var i = 0, len = functionList.length; i < len; i++) {
|
||||||
|
if (functionList[i].type === type) {
|
||||||
|
functionList[i].fn.call(undefined, type === 'input' ? currentInput : currentIntent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// finds matching element in an object
|
||||||
|
var objPos = function objPos(match) {
|
||||||
|
for (var i = 0, len = functionList.length; i < len; i++) {
|
||||||
|
if (functionList[i].fn === match) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var detectScrolling = function detectScrolling(event) {
|
||||||
|
if (mousePos.x !== event.screenX || mousePos.y !== event.screenY) {
|
||||||
|
isScrolling = false;
|
||||||
|
|
||||||
|
mousePos.x = event.screenX;
|
||||||
|
mousePos.y = event.screenY;
|
||||||
|
} else {
|
||||||
|
isScrolling = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// manual version of `closest()`
|
||||||
|
var checkClosest = function checkClosest(elem, tag) {
|
||||||
|
var ElementPrototype = window.Element.prototype;
|
||||||
|
|
||||||
|
if (!ElementPrototype.matches) {
|
||||||
|
ElementPrototype.matches = ElementPrototype.msMatchesSelector || ElementPrototype.webkitMatchesSelector;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!ElementPrototype.closest) {
|
||||||
|
do {
|
||||||
|
if (elem.matches(tag)) {
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
|
||||||
|
elem = elem.parentElement || elem.parentNode;
|
||||||
|
} while (elem !== null && elem.nodeType === 1);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
} else {
|
||||||
|
return elem.closest(tag);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* init
|
||||||
|
*/
|
||||||
|
|
||||||
|
// don't start script unless browser cuts the mustard
|
||||||
|
// (also passes if polyfills are used)
|
||||||
|
if ('addEventListener' in window && Array.prototype.indexOf) {
|
||||||
|
setUp();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* api
|
||||||
|
*/
|
||||||
|
|
||||||
|
return {
|
||||||
|
// returns string: the current input type
|
||||||
|
// opt: 'intent'|'input'
|
||||||
|
// 'input' (default): returns the same value as the `data-whatinput` attribute
|
||||||
|
// 'intent': includes `data-whatintent` value if it's different than `data-whatinput`
|
||||||
|
ask: function ask(opt) {
|
||||||
|
return opt === 'intent' ? currentIntent : currentInput;
|
||||||
|
},
|
||||||
|
|
||||||
|
// returns string: the currently focused element or null
|
||||||
|
element: function element() {
|
||||||
|
return currentElement;
|
||||||
|
},
|
||||||
|
|
||||||
|
// overwrites ignored keys with provided array
|
||||||
|
ignoreKeys: function ignoreKeys(arr) {
|
||||||
|
ignoreMap = arr;
|
||||||
|
},
|
||||||
|
|
||||||
|
// overwrites specific char keys to update on
|
||||||
|
specificKeys: function specificKeys(arr) {
|
||||||
|
specificMap = arr;
|
||||||
|
},
|
||||||
|
|
||||||
|
// attach functions to input and intent "events"
|
||||||
|
// funct: function to fire on change
|
||||||
|
// eventType: 'input'|'intent'
|
||||||
|
registerOnChange: function registerOnChange(fn, eventType) {
|
||||||
|
functionList.push({
|
||||||
|
fn: fn,
|
||||||
|
type: eventType || 'input'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
unRegisterOnChange: function unRegisterOnChange(fn) {
|
||||||
|
var position = objPos(fn);
|
||||||
|
|
||||||
|
if (position || position === 0) {
|
||||||
|
functionList.splice(position, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
clearStorage: function clearStorage() {
|
||||||
|
window.sessionStorage.clear();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
/***/ })
|
||||||
|
/******/ ])
|
||||||
|
});
|
||||||
|
;
|
||||||
BIN
syng/static/syng.png
Normal file
BIN
syng/static/syng.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -74,9 +74,9 @@ class SyngShell(aiocmd.PromptToolkitCmd):
|
||||||
await sio.emit("get-state")
|
await sio.emit("get-state")
|
||||||
|
|
||||||
|
|
||||||
async def main():
|
def main():
|
||||||
await sio.connect("http://127.0.0.1:8080")
|
asyncio.run(SyngShell().run())
|
||||||
|
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
asyncio.run(SyngShell().run())
|
main()
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue