sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update site

Browse Source
This commit is contained in:
hensm
2019-05-21 15:23:29 +01:00
parent b4d7ef3569
commit 3c2bee7b41
8 changed files with 508 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/images/menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
docs/images/preview-bg@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 446 KiB

After

Width:  |  Height:  |  Size: 388 KiB

BIN
docs/images/preview-fg_macOS.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
docs/images/preview-fg_macOS@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 58 KiB

159
docs/index.css
View File

@@ -1,24 +1,13 @@
:root.theme-light {
--page-color: var(--white-100);
--page-color: var(--grey-10);
--text-color-primary: var(--grey-90);
--text-color-secondary: var(--grey-50);
}
:root.theme-dark {
--page-color: var(--grey-80);
--text-color-primary: var(--white-100);
--text-color-secondary: var(--grey-40);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: initial;
font-weight: unset;
--text-color-secondary: var(--grey-30);
}
* {
@@ -31,12 +20,21 @@ body {
width: 100%;
}
h1, h2, h3, h4, h5, h6, p {
margin: initial;
font-weight: unset;
}
ul {
margin: initial;
padding: initial;
}
:root {
background-color: var(--page-color);
color: var(--text-color-primary);
font-family: "SF Mono";
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 10px;
font-weight: lighter;
}
body {
@@ -46,20 +44,21 @@ body {
.container {
display: grid;
font-size: 13px;
font-size: 15px;
margin: auto;
margin-top: 10vh;
margin-top: initial;
min-width: 480px;
grid-row-gap: 2rem;
grid-template-areas:
"header preview"
"description preview"
"download preview"
"footer preview";
grid-template-columns: min-content min-content;
grid-template-rows: min-content min-content 1fr min-content;
"faqs faqs"
"footer footer";
grid-template-columns: 45rem minmax(0, auto);
grid-template-rows: min-content minmax(200px, auto) 1fr min-content min-content;
overflow-x: hidden;
padding: 2rem 6rem;
padding: 2rem;
}
.site-header {
@@ -67,6 +66,7 @@ body {
align-items: flex-end;
display: flex;
flex-direction: column;
font-family: "SF Mono";
grid-area: header;
justify-content: flex-end;
margin-top: 5rem;
@@ -74,7 +74,7 @@ body {
.site-header__title {
font-size: 5rem;
font-weight: 400;
font-weight: 500;
margin-bottom: 0.5rem;
}
.site-header__subtitle {
@@ -92,17 +92,17 @@ body {
.description {
font-size: 1.75rem;
grid-area: description;
padding-right: 40px;
padding-right: 4rem;
text-align: right;
width: 45ch;
width: 45rem;
}
.description__disclaimer {
color: var(--text-color-secondary);
font-size: 0.8em;
font-size: 0.85em;
}
.description__prerelease {
color: var(--red-50);
font-size: 0.8em;
font-size: 0.85em;
font-weight: bolder;
}
@@ -126,6 +126,13 @@ body {
margin-bottom: 0.5em;
}
.download__app[data-version]::after {
color: var(--text-color-secondary);
content: attr(data-version);
font-size: 0.75em;
margin-left: 0.5rem;
}
.download__app-other {
margin-top: 1em;
}
@@ -147,22 +154,22 @@ body {
}
.app-list__app:not(.btn) {
.app-list__app:not(.button) {
color: var(--blue-50);
position: relative;
padding-right: 50px;
text-decoration: initial;
}
.app-list__app:not(.btn):hover {
.app-list__app:not(.button):hover {
text-decoration: underline;
}
.app-list__app:not(.btn):active {
.app-list__app:not(.button):active {
color: var(--blue-60);
}
.app-list__app:not(.btn)[data-app-size]::after {
.app-list__app:not(.button)[data-app-size]::after {
content: "(" attr(data-app-size) ")";
display: block;
position: absolute;
@@ -230,12 +237,83 @@ body {
.preview--fg {
align-self: flex-start;
grid-row-start: 2;
margin-left: -60px;
position: relative;
top: calc(-30px + 1rem);
width: 462px;
margin-top: 1rem;
}
.preview--fg[src="images/preview-fg.png"] {
transform: translate(-56px, -28px);
}
.preview--fg[src="images/preview-fg_macOS.png"] {
transform: translate(-22px, -18px);
}
:root.theme-light .preview-dark,
:root.theme-dark .preview--light {
display: none;
}
.faqs {
grid-area: faqs;
position: relative;
z-index: 1;
}
.faqs__list {
list-style: none;
}
.faqs__list-item {
margin: 1rem 0;
}
.faq {
box-sizing: content-box;
}
.faq__summary {
cursor: pointer;
font-size: 1.1em;
padding: 1rem;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.faq__content {
max-width: 70rem;
padding: 2rem;
padding-top: 1rem;
}
.faq__content p {
margin: 1rem 0;
}
.faq__content ul {
padding-left: 2rem;
}
.faq__content h3, h4 {
font-weight: 500;
}
.faq__content code {
background-color: var(--grey-90-a10);
border-radius: 3px;
white-space: nowrap;
}
:root.theme-dark .faq {
background-color: #202023;
}
:root.theme-dark .faq[open],
:root.theme-dark .faq:hover {
border: 5px solid var(--grey-60);
}
:root.theme-dark .faq code {
background-color: var(--grey-10-a10);
}
.footer {
align-items: center;
display: flex;
@@ -243,8 +321,19 @@ body {
font-size: 1.5rem;
grid-area: footer;
justify-content: center;
margin-top: 5rem;
}
:root.theme-dark .links__github {
.links__link-github {
align-items: center;
display: flex;
justify-content: center;
}
.links__link-github img {
margin-right: 1rem;
}
:root.theme-dark .links__link-github img {
filter: invert(1);
}

215
docs/index.html
View File

@@ -15,7 +15,7 @@
<div class="container">
<header class="site-header">
<h1 class="site-header__title">fx_cast</h1>
<h2 class="site-header__subtitle">chromecast for firefox</h2>
<p class="site-header__subtitle">chromecast for firefox</p>
</header>
<main class="site-content">
<section class="description">
@@ -30,11 +30,11 @@
</p>
</section>
<section class="download">
<a class="download__ext btn btn--puffy btn--primary" disabled title="No available download found">
<img class="btn__icon" src="icons/extension_light.svg" alt="">
<a class="download__ext button button--puffy button--primary" disabled title="No available download found">
<img class="button__icon" src="icons/extension_light.svg" alt="">
Firefox Extension
</a>
<a class="download__app btn btn--puffy" disabled title="No available download found"></a>
<a class="download__app button button--puffy" disabled title="No available download found"></a>
<details class="download__app-other">
<summary>Other bridge downloads</summary>
<div class="app-list">
@@ -57,6 +57,202 @@
</div>
</details>
</section>
<section class="other-downloads">
</section>
<section class="faqs">
<h1>FAQs</h1>
<ul class="faqs__list">
<li class="faqs__list-item">
<details class="faq card" open>
<summary class="faq__summary">How do I cast something?</summary>
<div class="faq__content">
<img src="images/menu.png" alt="Media context menu" style="float: right">
<p>
Ignore the toolbar button for now, it's just a placeholder for development.
</p>
<p>
For sites with built-in cast support, click the cast button in the page and select the destination in the receiver selector popup. You may have to add the site to the whitelist to get the cast button to appear.
</p>
<p>
For other sites, there is a "Cast..." item in the context menu when right-clicking on a media player. This may not be visible depending on whether the site has chosen to obscure the player with an overlay or if the media is DRM-encumbered (see below).
</p>
<p>
As a last resort, casting the tab or screen may provide a means of displaying this media on the Chromecast, but it has its own limitations: the performance is very poor and there's no audio casting.
</p>
<div style="clear: right"></div>
</div>
</details>
</li>
<li class="faqs__list-item">
<details class="faq card">
<summary class="faq__summary">Why do I need the bridge?</summary>
<div class="faq__content">
<p>
Access to TCP/UDP sockets.
</p>
<p>
Network discovery for Chromecast devices relies on mDNS, the implementation of which is reliant on being able to send UDP packets. Communication with the Chromecast device itself relies on a TCP connection. The current workaround is to offload that work to a native companion application that the extension can then launch communicate with.
</p>
<p>
It's possible that this functionality will be re-exposed to extensions, in which case the bridge will be made redundant:
<ul>
<li>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1247628">bug 1247628 — Enable "TCP and UDP Socket API" for WebExtensions</a>
</li>
<li>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1461830">bug 1461830 — [experimental api] mDNS APIs for IoT and p2p extensions</a>
</li>
</ul>
</p>
</div>
</details>
</li>
<li class="faqs__list-item">
<details class="faq card">
<summary class="faq__summary">How do I completely remove the bridge?</summary>
<div class="faq__content">
<p>
<ul>
<li>
<h3>Windows</h3>
<p>
Removing the bridge on Windows should be as easy as running the uninstaller (<code>C:\Program Files\fx_cast_bridge\uninstaller.exe</code>) found in the control panel or settings application.
</p>
<p>
To manually uninstall, remove the following files/folders and registry keys:
<ul>
<li>
<code>C:\Program Files\fx_cast_bridge\</code>
</li>
<li>
<code>HKLM\Software\Mozilla\NativeMessagingHosts\fx_cast_bridge</code>
</li>
<li>
<code>HKLM\Software\Microsoft\Windows\CurrentVersion\Uninstall\fx_cast_bridge</code>
</li>
</ul>
</p>
</li>
<li>
<h3>macOS</h3>
<p>
Remove the following files/folders:
<ul>
<li>
<code>/Library/Application Support/fx_cast/</code>
</li>
<li>
<code>/Library/Application Support/Mozilla/NativeMessagingHosts/fx_cast_bridge.json</code>
</li>
</ul>
</p>
</li>
<li>
<h3>Linux</h3>
<p>
On Debian-based systems, remove the <code>fx-cast-bridge</code> package, otherwise remove the <code>fx_cast_bridge</code> package.
</p>
<p>
To manually uninstall, remove the following files/folders:
<ul>
<li>
<code>/opt/fx_cast_bridge</code>
</li>
<li>
<code>/usr/lib/mozilla/native-messaging-hosts/fx_cast_bridge.json</code> OR
</li>
<li>
<code>/usr/lib64/mozilla/native-messaging-hosts/fx_cast_bridge.json</code>
</li>
</ul>
</p>
</li>
</ul>
</p>
</div>
</details>
</li>
<li class="faqs__list-item">
<details class="faq card">
<summary class="faq__summary">Why is there no sound when casting a screen or tab?</summary>
<div class="faq__content">
<p>
API limitations. There's no method of obtaining the audio streams. Merging of audio streams from remote media is also not possible due to cross-origin issues.
<ul>
<li>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1391223">bug 1391223 — Implement tabCapture API</a>
</li>
<li>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1541425">bug 1541425 — Implement audio capture for getDisplayMedia</a>
</li>
</ul>
</p>
</div>
</details>
</li>
<li class="faqs__list-item">
<details class="faq card">
<summary class="faq__summary">Why doesn't 𝑥 site work?</summary>
<div class="faq__content">
<p>
Compatibility with Chrome is far from perfect. Most sites will only enable their cast support if the browser reports itself as Chrome. Ensure that you've added the site to the whitelist. Some sites may not test their Chrome-specific code with Firefox, so it's possible that they're using incompatible/non-standard APIs.
</p>
<p>
The API is also not fully implemented and is missing some methods (mostly queue management). The current implementation likely also has edge-cases and bugs which may cause issues.
</p>
<p>
Check the <a href="https://github.com/hensm/fx_cast/issues?q=is%3Aissue+is%3Aopen+label%3Acompat">compatibilty list</a> or if it's missing, <a href="https://github.com/hensm/fx_cast/issues/new/choose">submit a new compatibility report issue</a>.
</p>
</div>
</details>
</li>
<li class="faqs__list-item">
<details class="faq card">
<summary class="faq__summary">Why can't I cast DRM-encumbered media?</summary>
<div class="faq__content">
<p>
Unforunately, for DRM-encumbered media, there's no network-accessible URL to provide to the Chromecast and no means of accessing the media streams. The only way to cast on sites like this is via built-in Chromecast support (look for a cast button), which may not always be available.
</p>
</div>
</details>
</li>
<li class="faqs__list-item">
<details class="faq card">
<summary class="faq__summary">Why is it taking so long for a full release?</summary>
<div class="faq__content">
<p>
Though I do enjoy working on this, it's (obviously) not a full-time thing. It's just a hobby project. You can help speed up development by contributing (see below).
</p>
</div>
</details>
</li>
<li class="faqs__list-item">
<details class="faq card">
<summary class="faq__summary">How can I support development?</summary>
<div class="faq__content">
<p>
Contributing code, translations, compatibility reports, or even reporting bugs is very helpful. See the <a href="https://github.com/hensm/fx_cast/blob/master/CONTRIBUTING.md">contributing guide</a> for more information.
</p>
<hr>
<p>
You can also donate via PayPal:
</p>
<p>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=3Z2FTMSG976WN&source=url">
<img src="https://camo.githubusercontent.com/fb9813996f164bbcc88900197f61c0d22935ce24/68747470733a2f2f7777772e70617970616c2e636f6d2f656e5f55532f692f62746e2f62746e5f646f6e61746543435f4c472e676966" alt="Donate with PayPal button">
</a>
</p>
</div>
</details>
</li>
</ul>
</section>
</main>
<img class="preview preview--bg"
@@ -64,15 +260,22 @@
src="images/preview-bg.png"
srcset="images/preview-bg.png,
images/preview-bg@2x.png 2x">
<img class="preview preview--fg"
<img class="preview preview--fg preview--light"
alt="Screenshot preview, foreground"
width="462"
src="images/preview-fg.png"
srcset="images/preview-fg.png,
images/preview-fg@2x.png 2x">
<img class="preview preview--fg preview--dark"
alt="Screenshot preview, foreground"
width="396"
src="images/preview-fg_macOS.png"
srcset="images/preview-fg_macOS.png,
images/preview-fg_macOS@2x.png 2x">
<footer class="footer">
<div class="links">
<a class="links__github" href="https://github.com/hensm/fx_cast">
<a class="links__link links__link-github" href="https://github.com/hensm/fx_cast">
<img src="icons/GitHub-Mark-32px.png"
srcset="icons/GitHub-Mark-32px.png,
icons/GitHub-Mark-64px.png 2x,

10
docs/index.js
View File

@@ -41,10 +41,10 @@ switch (navigator.platform) {
downloadAppOtherSummary.hidden = true;
appList.classList.add("app-list--buttons");
appListWinBtn.classList.add("btn", "btn--puffy");
appListMacBtn.classList.add("btn", "btn--puffy");
appListDebBtn.classList.add("btn", "btn--puffy");
appListRpmBtn.classList.add("btn", "btn--puffy");
appListWinBtn.classList.add("button", "button--puffy");
appListMacBtn.classList.add("button", "button--puffy");
appListDebBtn.classList.add("button", "button--puffy");
appListRpmBtn.classList.add("button", "button--puffy");
}
@@ -106,10 +106,12 @@ function onResponse (res) {
case "win":
downloadAppBtn.href = appListWinBtn.href;
downloadAppBtn.title = appListWinBtn.title;
downloadAppBtn.dataset.version = res.tag_name;
break;
case "mac":
downloadAppBtn.href = appListMacBtn.href;
downloadAppBtn.title = appListMacBtn.title;
downloadAppBtn.dataset.version = res.tag_name;
break;
default: {

273
docs/photon.css
View File

@@ -1,122 +1,187 @@
:root {
--shadow-10: 0 1px 4px rgba(12, 12, 13, 0.1);
--shadow-20: 0 2px 8px rgba(12, 12, 13, 0.1);
--shadow-30: 0 4px 16px rgba(12, 12, 13, 0.1);
--__photon__focus_box-shadow:
0 0 0 1px #0a84ff inset
, 0 0 0 1px #0a84ff
, 0 0 0 4px rgba(10, 132, 255, 0.3);
--__photon__link_color: var(--blue-60);
--__photon__link_color_hover: var(--blue-60);
--__photon__link_color_active: var(--blue-70);
--__photon__card_background: var(--white-100);
--__photon__card_border: 5px solid transparent;
--__photon__card_border-color_hover: var(--grey-30);
--__photon__card_border-radius: 4px;
--__photon__card_box-shadow: var(--shadow-10);
--__photon__button_background: var(--grey-90-a10);
--__photon__button_background_hover: var(--grey-90-a20);
--__photon__button_background_active: var(--grey-90-a30);
--__photon__button_background_primary: var(--blue-60);
--__photon__button_background_primary_hover: var(--blue-70);
--__photon__button_background_primary_active: var(--blue-80);
--__photon__button_background_ghost: transparent;
--__photon__button_background_ghost_hover: var(--grey-90-a10);
--__photon__button_background_ghost_active: var(--grey-90-a20);
--__photon__button_color: var(--grey-90);
--__photon__button_color_primary: var(--white-100);
--__photon__button_color_ghost: var(--grey-90-a80);
}
:root.theme-dark {
--__photon__link_color: var(--blue-50);
--__photon__link_color_hover: var(--blue-50);
--__photon__link_color_active: var(--blue-60);
--__photon__card_background: #202023;
--__photon__card_border-color_hover: var(--grey-60);
--__photon__button_background: var(--grey-10-a10);
--__photon__button_background_hover: rgba(249, 249, 250, 0.15);
--__photon__button_background_active: rgba(249, 249, 250, 0.2);
--__photon__button_background_ghost_hover: rgba(249, 249, 250, 0.1);
--__photon__button_background_ghost_active: rgba(249, 249, 250, 0.15);
--__photon__button_color: var(--white-100);
--__photon__button_color_ghost: var(--grey-10-a80);
}
/* ------------------------ */
/* --------- Links -------- */
/* ------------------------ */
a:not(.button) {
color: var(--__photon__link_color);
text-decoration: none;
}
a:not(.button):hover {
color: var(--__photon__link_color_hover);
text-decoration: underline;
}
a:not(.button):hover:active {
color: var(--__photon__link_color_active);
}
a:not(.button):focus {
box-shadow: var(--__photon__focus_box-shadow);
}
/* ------------------------ */
/* --------- Cards -------- */
/* ------------------------ */
.card {
background-color: var(--__photon__card_background);
border: var(--__photon__card_border);
border-radius: var(--__photon__card_border-radius);
box-shadow: var(--__photon__card_box-shadow);
}
.card:hover,
.card[open] {
border-color: var(--__photon__card_border-color_hover);
}
/* ------------------------ */
/* -------- Buttons ------- */
/* ------------------------ */
a.btn {
text-decoration: initial;
}
button.btn,
select.btn {
border: initial;
font: inherit;
}
select.btn {
-webkit-appearance: none;
-moz-appearance: none;
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
}
select.btn {
background-image: url("icons/arrow_down_dark.svg");
}
select.btn.btn--primary {
background-image: url("icons/arrow_down_light.svg");
}
select.btn:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 var(--btn-color);
}
.btn {
--btn-bg: var(--grey-90-a10);
--btn-bg-hover: var(--grey-90-a20);
--btn-bg-active: var(--grey-90-a30);
--btn-color: var(--grey-90);
--btn-padding: 8px;
--btn-height: 32px;
.button {
align-items: center;
background-color: var(--btn-bg);
border-radius: 2px;
color: var(--btn-color);
font-size: 13px;
font-weight: 400;
height: var(--btn-height);
justify-content: center;
padding: 0 var(--btn-padding);
}
.btn:not([hidden]) {
display: inline-flex;
}
.btn--primary {
--btn-bg: var(--blue-60);
--btn-bg-hover: var(--blue-70);
--btn-bg-active: var(--blue-80);
--btn-color: var(--white-100);
}
.btn:hover { background-color: var(--btn-bg-hover); }
.btn:active { background-color: var(--btn-bg-active); }
.btn:focus {
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff
, 0 0 0 4px rgba(10, 132, 255, 0.3);
}
.btn:disabled,
.btn[disabled] {
background-color: var(--btn-bg) !important;
box-shadow: initial;
cursor: default;
opacity: 0.4;
}
.btn::-moz-focus-inner {
border: 0;
}
.btn--micro {
font-size: 11px;
height: 24px;
}
.btn--puffy {
--btn-padding: 16px;
--btn-height: 48px;
border-radius: 4px;
font-size: 15px;
}
.btn > a {
display: flex;
border: initial;
font-family: inherit;
text-decoration: initial;
}
.btn > a:visited {
color: inherit;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.btn__icon {
.button__icon {
height: 20px;
margin-right: 8px;
width: 20px;
}
:root.theme-dark .btn:not(.btn--primary) {
--btn-bg: var(--grey-10-a10);
--btn-bg-hover: var(--grey-10-a20);
--btn-bg-active: var(--grey-10-a30);
--btn-color: var(--grey-10);
/* Types */
.button {
background-color: var(--__photon__button_background);
color: var(--__photon__button_color);
}
:root.theme-dark .btn__dropdown-arrow::before {
content: url("icons/arrow_down_light.svg");
.button--primary {
background-color: var(--__photon__button_background_primary);
color: var(--__photon__button_color_primary);
}
.button--ghost {
background-color: transparent;
color: var(--__photon__button_color_ghost);
height: 32px;
padding: 8px;
width: 32px;
}
/* Sizes */
.button {
border-radius: 2px;
font-size: inherit;
font-weight: 400;
height: 32px;
padding: 0 8px;
}
.button--micro {
font-size: 11px;
height: 24px;
}
.button--puffy {
border-radius: 4px;
font-size: 15px;
height: 48px;
padding: 0 16px;
}
.button:not(
.button--micro):not(
.button--puffy):not(
.button--ghost) {
min-width: 132px;
}
/* Behaviours */
.button:disabled {
opacity: 0.4;
}
.button:focus,
.button:focus-within {
box-shadow: var(--__photon__focus_box-shadow);
}
.button::-moz-focus-inner {
border: initial;
}
.button:not(:disabled):hover {
background-color: var(--__photon__button_background_hover);
}
.button:not(:disabled):hover:active {
background-color: var(--__photon__button_background_active);
}
.button--primary:not(:disabled):hover {
background-color: var(--__photon__button_background_primary_hover);
}
.button--primary:not(:disabled):hover:active {
background-color: var(--__photon__button_background_primary_active);
}
.button--ghost:not(:disabled):hover {
background-color: var(--__photon__button_background_ghost_hover);
}
.button--ghost:not(:disabled):hover:active {
background-color: var(--__photon__button_background_ghost_active);
}