Browse Source

initial commit

master
Lurkars 7 years ago
commit
240332c0d2
  1. 21
      LICENSE
  2. 24
      README.md
  3. 88
      background/client.js
  4. 2928
      css/font-awesome.css
  5. 117
      css/overlay.css
  6. BIN
      fonts/FontAwesome.otf
  7. BIN
      fonts/fontawesome.eot
  8. 2671
      fonts/fontawesome.svg
  9. BIN
      fonts/fontawesome.ttf
  10. BIN
      fonts/fontawesome.woff
  11. BIN
      fonts/fontawesome.woff2
  12. BIN
      icons/muffcast-client-32-light.png
  13. BIN
      icons/muffcast-client-32.png
  14. BIN
      icons/muffcast-client-48.png
  15. 61
      manifest.json
  16. 358
      muffcast.js
  17. 20
      options/options.html
  18. 19
      options/options.js
  19. 126
      popup/popup.css
  20. 39
      popup/popup.html
  21. 114
      popup/popup.js

21
LICENSE

@ -0,0 +1,21 @@
The MIT License
Copyright (c) 2017 Lukas Haubaum
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

24
README.md

@ -0,0 +1,24 @@
# Muffcast
An alternative to Chromecast working with every website with HTML5 Video/Audio elements by just playing HTML5 video/audio on other Firefox instance in full-screen.
## Client
This is the client extension. Go to any website with HTML5 Video elements to play it on the **Muffcast Server** instance by clicking on a **Muffcast**-symbol next to it.
### Requirements
- Firefox/Browser
- **Muffcast Server** running in same network
- Internet access
### Firefox/Browser Setup
In Add-ons Preferences, define URL of the *Muffcast Server*-extension running on any device in your network on port 8128.
###### Limitations
This only works for websites with HTML5 Video/Audio elements. This does not work in native applications.
To work properly for websites with authentication (like Netflix), the browser on server side also needs valid session. This extension does not handle any authentication, so valid sessions are required. In short: manually login and save session before use.
There are some websites that required further interactions before the HTML5 Video is loaded properly, e.g. to click a non-standard play button. Those sites do not work without special treatment in the server component. Please feel free to report issues with those sites for being included in server component code.
This extension is developed and tested in Firefox 57. A port for other browsers like Chrome should be easy due to WebExtensions API, but is not warranted to work properly.
Video quality is not part of the Media API and any websites handles this on it's own. So like authentication, to control playback quality, manually settings on server side are required. (Hopefully the automatic settings fit your needs, but e.g. on a Raspberry Pi to high quality can cause stuttering.)

88
background/client.js

@ -0,0 +1,88 @@
console.log("muffcast client v0.1");
var muffcastUrl = "http://localhost:8128";
browser.storage.local.get("muffcast").then(function(result) {
muffcastUrl = result.muffcast && result.muffcast.url || muffcastUrl;
})
var sendServer = function(message) {
return new Promise(function(resolve, reject) {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", muffcastUrl, true);
xhttp.addEventListener("load", function() {
if (this.readyState == 4) {
if (this.status == 200) {
var response = this.responseText ? JSON.parse(this.responseText) : false;
resolve(response);
} else {
reject({
status: this.status,
error: this.statusText,
body: this.responseText
});
}
}
});
xhttp.setRequestHeader("content-type", "application/json");
xhttp.send(JSON.stringify(message));
})
}
var clientUpdate = function() {
browser.tabs.query({
currentWindow: true,
active: true
}).then(function(tabs) {
var tab = tabs[0];
browser.tabs.sendMessage(
tab.id, {
command: "update"
}
);
});
}
var injectCss = function(tabId) {
browser.tabs.insertCSS(tabId, {
code: "@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('" + browser.extension.getURL("fonts/fontawesome.woff2") + "?v=4.7.0') format('woff2')," +
"url('" + browser.extension.getURL("fonts/fontawesome.woff") + "?v=4.7.0') format('woff')," +
"url('" + browser.extension.getURL("fonts/fontawesome.ttf") + "?v=4.7.0') format('truetype')," +
"url('" + browser.extension.getURL("fonts/fontawesome.svg") + "?v=4.7.0#fontawesomeregular') format('svg');" +
"font - weight: normal;" +
"font - style: normal;}"
});
browser.tabs.insertCSS(tabId, {
file: "css/font-awesome.css"
});
browser.tabs.insertCSS(tabId, {
file: "css/overlay.css"
});
}
browser.tabs.onActivated.addListener(function(tab) {
injectCss(tab.id);
clientUpdate();
});
browser.tabs.onUpdated.addListener(function(tabId, changeInfo) {
injectCss(tabId);
if (changeInfo.status === "complete") {
clientUpdate();
}
});
browser.runtime.onMessage.addListener(function(message) {
console.log("send", message);
sendServer(message).then(function(response) {
console.log("response", response);
if (message.command == "load") {
clientUpdate();
}
})
})

2928
css/font-awesome.css
File diff suppressed because it is too large
View File

117
css/overlay.css

@ -0,0 +1,117 @@
a.muffcast-loader {
position: absolute;
color: #d13d29;
font-size: 20px;
z-index: 8128;
padding-left: 3px;
padding-top: 1px;
cursor: pointer;
}
a.muffcast-loader:hover {
color: #9e2e1f;
}
a.muffcast-loader.active {
color: #468ac3;
}
#muffcast-overlay {
font-family: 'Roboto', 'sans-serif', 'sans';
box-sizing: border-box;
display: -moz-flex;
display: flex;
width: 100%;
height: 55px;
padding: 10px;
background-color: #efefef;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 2000;
}
#muffcast-overlay * {
box-sizing: border-box;
}
#muffcast-overlay a {
padding: 5px;
min-width: 35px;
color: #d13d29;
font-size: 18px;
cursor: pointer;
}
#muffcast-overlay a:hover {
color: #9e2e1f;
}
#muffcast-overlay span.time {
padding: 11px 4px;
font-size: 10px;
}
#muffcast-overlay #muffcast-icon {
color: #468ac3;
font-size: 24px;
padding: 2px 4px;
}
#muffcast-overlay #muffcast-audio {
position: relative;
width: 35px;
min-width: 35px;
height: 35px;
overflow: hidden;
transition: width 0.3s, min-width 0.3s;
transition-timing-function: ease-out;
}
#muffcast-overlay #muffcast-audio:hover {
width: 160px;
min-width: 160px;
}
#muffcast-overlay #muffcast-mute {
float: left;
}
#muffcast-overlay input[type="range"] {
float: left;
margin: 0;
height: 35px;
cursor: pointer;
}
#muffcast-overlay input[type="range"]::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
background: #468ac3;
border-radius: 2px;
}
#muffcast-overlay input[type="range"]::-moz-range-thumb {
box-shadow: 0px 0px 0px #d13d29;
border: 0px solid #d13d29;
height: 14px;
width: 14px;
border-radius: 50%;
background: #d13d29;
cursor: pointer;
}
#muffcast-overlay input[type="range"]::-moz-range-thumb:hover {
color: #9e2e1f;
height: 16px;
width: 16px;
}
#muffcast-overlay #muffcast-volume {
width: 120px;
}
#muffcast-overlay #muffcast-seek {
flex-grow: 1;
}

BIN
fonts/FontAwesome.otf

BIN
fonts/fontawesome.eot

2671
fonts/fontawesome.svg
File diff suppressed because it is too large
View File

BIN
fonts/fontawesome.ttf

BIN
fonts/fontawesome.woff

BIN
fonts/fontawesome.woff2

BIN
icons/muffcast-client-32-light.png

After

Width: 32  |  Height: 32  |  Size: 206 B

BIN
icons/muffcast-client-32.png

After

Width: 32  |  Height: 32  |  Size: 213 B

BIN
icons/muffcast-client-48.png

After

Width: 48  |  Height: 48  |  Size: 230 B

61
manifest.json

@ -0,0 +1,61 @@
{
"description": "Cast HTML5 video to other Firefox instance. This is the client extension. Setup: define url of the Muffcast Server Extension, running on any device in your network on port 8128. After Setup, go to any website with HTML5 Video elements and cast it on server.",
"manifest_version": 2,
"name": "Muffcast",
"version": "0.1.3",
"homepage_url": "https://www.champonthis.de/projects/muffcast",
"icons": {
"48": "icons/muffcast-client-48.png"
},
"applications": {
"gecko": {
"id": "muffcast-client@champonthis.de"
}
},
"permissions": [
"activeTab",
"http://*/",
"https://*/",
"nativeMessaging",
"storage"
],
"background": {
"scripts": ["background/client.js"]
},
"browser_action": {
"default_icon": "icons/muffcast-client-32.png",
"theme_icons": [{
"light": "icons/muffcast-client-32-light.png",
"dark": "icons/muffcast-client-32.png",
"size": 32
}],
"default_title": "Muffcast",
"default_popup": "popup/popup.html"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["muffcast.js"]
}],
"options_ui": {
"page": "options/options.html",
"browser_style": true
},
"web_accessible_resources": [
"icons/muffcast-client-32.png",
"fonts/fontawesome.eot",
"fonts/fontawesome.otf",
"fonts/fontawesome.svg",
"fonts/fontawesome.ttf",
"fonts/fontawesome.woff",
"fonts/fontawesome.woff2"
]
}

358
muffcast.js

@ -0,0 +1,358 @@
console.log("muffcast client v0.1");
var currentStatus;
var syncIntervals = [];
var syncIntervalTime = 30000;
var seekIntervals = [];
var muffcastUrl = "http://localhost:8128";
browser.storage.local.get("muffcast").then(function(result) {
muffcastUrl = result.muffcast && result.muffcast.url || muffcastUrl;
syncIntervalTime = result.muffcast && result.muffcast.syncInterval && parseInt(result.muffcast.syncInterval) || syncIntervalTime;
})
var getStatus = function() {
return new Promise(function(resolve, reject) {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", muffcastUrl, true);
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
var response = this.responseText ? JSON.parse(this.responseText) : false;
resolve(response);
} else {
reject({
status: this.status,
error: this.statusText,
body: this.responseText,
});
}
}
}
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.send();
})
}
var getPlayer = function(type, index, sleep) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
var player = document.getElementsByTagName(type)[index];
if (player) {
resolve(player);
} else if (sleep < 3000) {
return getPlayer(type, index, sleep + 500);
} else {
reject(player);
}
}, sleep);
})
}
var getTimeString = function(seconds) {
var hours = parseInt(seconds / 3600);
var minutes = parseInt((seconds % 3600) / 60);
var seconds = parseInt(seconds % 60);
return (hours > 0 ? hours + ":" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
}
var addCastLinks = function(type) {
// add cast links
var elements = document.getElementsByTagName(type);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var position = element.getBoundingClientRect();
var castLink = document.createElement("a");
castLink.id = "muffcast-cast-link_" + i;
castLink.index = i;
castLink.classList.add("muffcast-loader");
castLink.style["top"] = position.top + "px";
castLink.style["left"] = position.left + "px";
castLink.innerHTML = '<i class="fa fa-fw fa-television"></i>';
document.body.appendChild(castLink);
castLink.addEventListener("click", function(event) {
var index = event.target.parentNode.index;
var player = document.getElementsByTagName(type)[index];
player.pause();
browser.runtime.sendMessage({
"command": "load",
"url": encodeURIComponent(window.location.href),
"type": type,
"index": index,
"seek": player.currentTime,
"volume": player.volume,
"muted": player.muted
});
})
}
}
var setStatus = function() {
for (let seekInterval of seekIntervals) {
clearInterval(seekInterval);
}
for (let syncInterval of syncIntervals) {
clearInterval(syncInterval);
}
var overlay = document.getElementById("muffcast-overlay");
if (overlay) {
overlay.parentNode.removeChild(overlay);
}
// remove all cast links
for (let castLink of document.getElementsByClassName("muffcast-loader")) {
document.body.removeChild(castLink);
}
addCastLinks("video");
addCastLinks("audio");
getStatus().then(function(status) {
currentStatus = status;
if (currentStatus.url && currentStatus.url == encodeURIComponent(window.location.href)) {
getPlayer(currentStatus.type, currentStatus.index, 0).then(function(player) {
player.muted = currentStatus.muted;
player.currentTime = currentStatus.currentTime;
player.addEventListener("canplaythrough", function() {
if (currentStatus.playing && currentStatus.url == encodeURIComponent(window.location.href)) {
player.pause();
}
})
overlay = document.createElement("div");
overlay.id = "muffcast-overlay";
document.body.appendChild(overlay);
var play = document.createElement("a");
play.id = "muffcast-play";
play.innerHTML = currentStatus.playing ? '<i class="fa fa-fw fa-pause"></i>' : '<i class="fa fa-fw fa-play"></i>';;
play.addEventListener("click", function(event) {
if (currentStatus.playing) {
browser.runtime.sendMessage({
"command": "pause",
"seek": player.currentTime
});
} else {
browser.runtime.sendMessage({
"command": "play",
"seek": player.currentTime
});
player.pause();
}
currentStatus.playing = !currentStatus.playing;
play.innerHTML = currentStatus.playing ? '<i class="fa fa-fw fa-pause"></i>' : '<i class="fa fa-fw fa-play"></i>';
})
var stop = document.createElement("a");
stop.id = "muffcast-stop";
stop.innerHTML = '<i class="fa fa-fw fa-stop"></i>';
stop.addEventListener("click", function(event) {
browser.runtime.sendMessage({
"command": "stop"
});
setStatus();
})
var duration = document.createElement("span");
duration.id = "muffcast-duration";
duration.classList.add("time");
duration.textContent = getTimeString(player.duration);
var currentTime = document.createElement("span");
currentTime.id = "muffcast-currenttime";
currentTime.classList.add("time");
currentTime.textContent = getTimeString(player.currentTime);
var seek = document.createElement("input");
seek.id = "muffcast-seek";
seek.setAttribute("type", "range");
seek.setAttribute("min", 0);
seek.setAttribute("max", currentStatus.duration);
seek.setAttribute("value", currentStatus.currentTime);
seek.addEventListener("change", function(event) {
browser.runtime.sendMessage({
"command": "seek",
"seek": seek.value
});
player.currentTime = seek.value;
currentTime.textContent = getTimeString(player.currentTime);
});
seekIntervals.push(setInterval(function() {
if (seek.value < currentStatus.duration) {
if (!player.paused || currentStatus.playing) {
seek.value++;
currentTime.textContent = getTimeString(seek.value);
}
} else {
seek.value = 0;
clearInterval(seekInterval);
}
}, 1000));
var audio = document.createElement("div");
audio.id = "muffcast-audio";
var volume = document.createElement("input");
volume.id = "muffcast-volume";
volume.setAttribute("type", "range");
volume.setAttribute("min", 0);
volume.setAttribute("max", 1);
volume.setAttribute("step", 0.01);
volume.setAttribute("value", status.muted ? 0 : status.volume);
volume.addEventListener("change", function(event) {
browser.runtime.sendMessage({
"command": "volume",
"volume": volume.value
});
player.volume = volume.value;
player.muted = volume.value == 0;
});
var mute = document.createElement("a");
mute.id = "muffcast-mute";
mute.innerHTML = status.muted ? '<i class="fa fa-fw fa-volume-off"></i>' : (player.volume < 0.5 ? '<i class="fa fa-fw fa-volume-down"></i>' : '<i class="fa fa-fw fa-volume-up"></i>');
mute.addEventListener("click", function(event) {
browser.runtime.sendMessage({
"command": "mute",
"muted": !player.muted
});
player.muted = !player.muted;
volume.value = player.muted ? 0 : player.volume;
mute.innerHTML = player.muted ? '<i class="fa fa-fw fa-volume-off"></i>' : (player.volume < 0.5 ? '<i class="fa fa-fw fa-volume-down"></i>' : '<i class="fa fa-fw fa-volume-up"></i>');
})
var icon = document.createElement("span");
icon.id = "muffcast-icon";
icon.innerHTML = '<i class="fa fa-television"></i>';
overlay.appendChild(icon);
overlay.appendChild(play);
audio.appendChild(mute);
audio.appendChild(volume);
overlay.appendChild(audio);
overlay.appendChild(currentTime);
overlay.appendChild(seek);
overlay.appendChild(duration);
overlay.appendChild(stop);
var castLink = document.getElementById("muffcast-cast-link_" + status.index);
castLink.classList.add("active");
syncIntervals.push(setInterval(function() {
// sync status
if (!player.isSyncInterval) {
getStatus().then(function(status) {
player.isSyncInterval = true;
currentStatus.playing = status.playing;
currentStatus.currentTime = status.currentTime;
currentStatus.volume = status.volume;
currentStatus.muted = status.muted;
currentTime.textContent = getTimeString(currentStatus.currentTime);
seek.value = currentStatus.currentTime
play.innerHTML = currentStatus.playing ? '<i class="fa fa-fw fa-pause"></i>' : '<i class="fa fa-fw fa-play"></i>';
volume.value = currentStatus.muted ? 0 : currentStatus.volume;
mute.innerHTML = currentStatus.muted ? '<i class="fa fa-fw fa-volume-off"></i>' : (currentStatus.volume < 0.5 ? '<i class="fa fa-fw fa-volume-down"></i>' : '<i class="fa fa-fw fa-volume-up"></i>');
player.volume = currentStatus.volume;
player.muted = currentStatus.muted;
player.currentTime = currentStatus.currentTime;
})
}
}, syncIntervalTime));
setTimeout(function() {
player.addEventListener("play", function(event) {
if (status.playing && status.url == encodeURIComponent(window.location.href)) {
browser.runtime.sendMessage({
"command": "pause",
"seek": player.currentTime
});
play.innerHTML = '<i class="fa fa-fw fa-play"></i>';
status.playing = !status.playing;
}
})
player.addEventListener("pause", function(event) {
if (!status.playing && status.url == encodeURIComponent(window.location.href.href)) {
browser.runtime.sendMessage({
"command": "play",
"seek": player.currentTime
});
play.innerHTML = '<i class="fa fa-fw fa-play"></i>';
status.playing = !status.playing;
}
})
player.addEventListener("seeked", function(event) {
if (status.playing && status.url == encodeURIComponent(window.location.href)) {
if (!player.isSyncInterval) {
browser.runtime.sendMessage({
"command": "seek",
"seek": player.currentTime
});
seek.value = player.currentTime;
currentTime.textContent = getTimeString(player.currentTime);
} else {
player.isSyncInterval = false;
};
}
})
player.addEventListener("volumechange", function(event) {
if (status.url == encodeURIComponent(window.location.href)) {
browser.runtime.sendMessage({
"command": "volume",
"volume": player.volume
});
volume.value = player.muted ? 0 : player.volume;
mute.innerHTML = player.muted ? '<i class="fa fa-fw fa-volume-off"></i>' : (player.volume < 0.5 ? '<i class="fa fa-fw fa-volume-down"></i>' : '<i class="fa fa-fw fa-volume-up"></i>');
}
})
}, 1500);
})
}
})
}
browser.runtime.onMessage.addListener(function(message) {
var videos = document.getElementsByTagName("video");
switch (message.command) {
case "update":
setStatus();
break;
case "load":
var player = videos[message.index];
player.pause();
player.style.border = "none";
browser.runtime.sendMessage({
"command": "load",
"url": encodeURIComponent(window.location.href),
"type": "video",
"index": message.index,
"seek": player.currentTime,
"volume": player.volume,
"muted": player.muted
});
break;
case "mark":
var player = videos[message.index];
player.style.border = "5px solid red";
break;
case "unmark":
var player = videos[message.index];
player.style.border = "none";
break;
}
})

20
options/options.html

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>Muffcast URL<input type="url" id="muffcast-url" /></label> <br />
<label>Muffcast Sync Interval<input type="number" id="muffcast-sync-interval" min="1000" step="1000" /></label> <br />
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>

19
options/options.js

@ -0,0 +1,19 @@
function saveOptions(e) {
e.preventDefault();
browser.storage.local.set({
"muffcast": {
"url": document.querySelector("#muffcast-url").value,
"syncInterval": document.querySelector("#muffcast-sync-interval").value
}
});
}
function restoreOptions() {
browser.storage.local.get("muffcast").then(function(result) {
document.querySelector("#muffcast-url").value = result.muffcast && result.muffcast.url || "http://localhost:8128";
document.querySelector("#muffcast-sync-interval").value = result.muffcast && result.muffcast.syncInterval || 30000;
});
}
document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);

126
popup/popup.css

@ -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;
}

39
popup/popup.html

@ -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
popup/popup.js

@ -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();
Loading…
Cancel
Save