initial commit
This commit is contained in:
Lurkars
+126
@@ -0,0 +1,126 @@
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src: url('" + browser.extension.getURL("fonts/fontawesome.eot") + "?v=4.7.0');
|
||||
src: url('" + browser.extension.getURL("fonts/fontawesome.eot") + "?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome.svg?v=4.7.0#fontawesomeregular') format('svg');
|
||||
font - weight: normal;
|
||||
font - style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'OpenSans', 'Roboto', 'sans-serif', 'sans';
|
||||
max-width: 400px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #d13d29;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #9e2e1f;
|
||||
}
|
||||
|
||||
#muffcast {
|
||||
width: 400px;
|
||||
background-color: #fefefe;
|
||||
color: #444;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#idle, #error {
|
||||
width: 100%;
|
||||
display: none;
|
||||
color: #d13d29;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#title {
|
||||
display: block;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#title:hover {}
|
||||
|
||||
#host {
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: #468ac3;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.audio {
|
||||
display: -moz-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#mute {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#volume {
|
||||
flex-grow: 1;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#volume::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
cursor: pointer;
|
||||
background: #468ac3;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#volume::-moz-range-thumb {
|
||||
box-shadow: 0px 0px 0px #d13d29;
|
||||
border: 0px solid #d13d29;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: #d13d29;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#volume::-moz-range-thumb:hover {
|
||||
color: #9e2e1f;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.bottom-menu {
|
||||
display: block;
|
||||
background-color: #efefef;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#play {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#stop {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="popup.css" />
|
||||
<link rel="stylesheet" href="../css/font-awesome.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="idle"><i class="icon fa fa-television"></i> Muffcast is ready!</div>
|
||||
<div id="error">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="icon fa fa-television fa-stack-1x"></i>
|
||||
<i class="fa fa-ban fa-stack-1x"></i>
|
||||
</span>
|
||||
<span>Muffcast is not reachable!</span>
|
||||
<p class="text-center">Please check settings and server.</p>
|
||||
</div>
|
||||
<div id="muffcast">
|
||||
<div class="info">
|
||||
<a id="title"></a>
|
||||
<span id="host"></span>
|
||||
<div class="audio">
|
||||
<a id="mute"></a>
|
||||
<input id="volume" type="range" min="0" max="1" step="0.01" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-menu">
|
||||
<a id="play"><i class="fa fa-play"></i></a>
|
||||
<a id="stop">Stop Muffcast</a>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
var muffcastUrl = "http://localhost:8128";
|
||||
browser.storage.local.get("muffcast").then(function(result) {
|
||||
muffcastUrl = result.muffcast && result.muffcast.url || muffcastUrl;
|
||||
})
|
||||
|
||||
var clientUpdate = function() {
|
||||
return browser.tabs.query({
|
||||
currentWindow: true,
|
||||
active: true
|
||||
}).then(function(tabs) {
|
||||
var tab = tabs[0];
|
||||
return browser.tabs.sendMessage(tab.id, {
|
||||
command: "update"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var setStatus = function() {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.open("GET", muffcastUrl, true);
|
||||
xhttp.onreadystatechange = function() {
|
||||
var idleElement = document.getElementById("idle");
|
||||
var errorElement = document.getElementById("error");
|
||||
var muffcastElement = document.getElementById("muffcast");
|
||||
if (this.readyState == 4) {
|
||||
if (this.status == 200) {
|
||||
var status = this.responseText && JSON.parse(this.responseText);
|
||||
if (status && status.running) {
|
||||
var titleElement = document.getElementById("title");
|
||||
titleElement.textContent = status.title;
|
||||
titleElement.href = decodeURIComponent(status.url);
|
||||
|
||||
var hostElement = document.getElementById("host");
|
||||
hostElement.textContent = decodeURIComponent(status.host);
|
||||
|
||||
var muteElement = document.getElementById("mute");
|
||||
|
||||
var updateMuteElement = function() {
|
||||
muteElement.innerHTML = status.muted ? '<i class="fa fa-fw fa-volume-off"></i>' : (status.volume < 0.5 ? '<i class="fa fa-fw fa-volume-down"></i>' : '<i class="fa fa-fw fa-volume-up"></i>');
|
||||
}
|
||||
|
||||
muteElement.addEventListener("click", function(event) {
|
||||
status.muted = !status.muted;
|
||||
browser.runtime.sendMessage({
|
||||
"command": "mute",
|
||||
"muted": status.muted
|
||||
});
|
||||
volumeElement.value = status.muted ? 0 : status.volume;
|
||||
updateMuteElement();
|
||||
clientUpdate();
|
||||
})
|
||||
|
||||
updateMuteElement();
|
||||
|
||||
var volumeElement = document.getElementById("volume");
|
||||
volumeElement.setAttribute("value", status.muted ? 0 : status.volume);
|
||||
|
||||
volumeElement.addEventListener("change", function(event) {
|
||||
browser.runtime.sendMessage({
|
||||
"command": "volume",
|
||||
"volume": volumeElement.value
|
||||
});
|
||||
status.volume = volumeElement.value;
|
||||
status.muted = volumeElement.value == 0;
|
||||
updateMuteElement();
|
||||
});
|
||||
|
||||
var playElement = document.getElementById("play");
|
||||
|
||||
playElement.innerHTML = status.playing ? '<i class="fa fa-fw fa-pause"></i>' : '<i class="fa fa-fw fa-play"></i>';
|
||||
|
||||
playElement.addEventListener("click", function(event) {
|
||||
browser.runtime.sendMessage({
|
||||
"command": status.playing ? "pause" : "play"
|
||||
});
|
||||
status.playing = !status.playing;
|
||||
playElement.innerHTML = status.playing ? '<i class="fa fa-fw fa-pause"></i>' : '<i class="fa fa-fw fa-play"></i>';
|
||||
|
||||
clientUpdate();
|
||||
})
|
||||
|
||||
var stopElement = document.getElementById("stop");
|
||||
|
||||
stopElement.addEventListener("click", function(event) {
|
||||
browser.runtime.sendMessage({
|
||||
"command": "stop"
|
||||
});
|
||||
clientUpdate();
|
||||
muffcastElement.classList.remove("visible");
|
||||
idleElement.classList.add("visible");
|
||||
errorElement.classList.remove("visible");
|
||||
})
|
||||
|
||||
muffcastElement.classList.add("visible");
|
||||
idleElement.classList.remove("visible");
|
||||
errorElement.classList.remove("visible");
|
||||
|
||||
} else {
|
||||
muffcastElement.classList.remove("visible");
|
||||
idleElement.classList.add("visible");
|
||||
errorElement.classList.remove("visible");
|
||||
}
|
||||
} else {
|
||||
muffcastElement.classList.remove("visible");
|
||||
idleElement.classList.remove("visible");
|
||||
errorElement.classList.add("visible");
|
||||
}
|
||||
}
|
||||
}
|
||||
xhttp.setRequestHeader("Content-type", "application/json");
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
setStatus();
|
||||
Reference in New Issue
Block a user