mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-11 18:19:58 +00:00
Detect and offer platform-specific bridge download
This commit is contained in:
hensm
@@ -1,6 +1,6 @@
|
|||||||
|
|
||||||
:root.theme-light {
|
:root.theme-light {
|
||||||
--page-color: white;
|
--page-color: var(--white-100);
|
||||||
--text-color-primary: var(--grey-90);
|
--text-color-primary: var(--grey-90);
|
||||||
--text-color-secondary: var(--grey-50);
|
--text-color-secondary: var(--grey-50);
|
||||||
}
|
}
|
||||||
@@ -41,14 +41,14 @@ body {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: initial;
|
margin: initial;`
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
align-items: center;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
margin-top: 10vh;
|
||||||
min-width: 480px;
|
min-width: 480px;
|
||||||
grid-row-gap: 2rem;
|
grid-row-gap: 2rem;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
@@ -57,33 +57,27 @@ body {
|
|||||||
"download preview"
|
"download preview"
|
||||||
"footer preview";
|
"footer preview";
|
||||||
grid-template-columns: min-content min-content;
|
grid-template-columns: min-content min-content;
|
||||||
grid-template-rows: min-content min-content min-content min-content;
|
grid-template-rows: min-content min-content 1fr min-content;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding: 2rem 6rem;
|
padding: 2rem 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.site-header {
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-header {
|
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
grid-area: header;
|
grid-area: header;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
margin-top: 5rem;
|
||||||
.main-content {
|
|
||||||
display: contents;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-title {
|
.site-header__title {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
.main-subtitle {
|
.site-header__subtitle {
|
||||||
background-color: var(--text-color-secondary);
|
background-color: var(--text-color-secondary);
|
||||||
color: var(--page-color);
|
color: var(--page-color);
|
||||||
font-size: 2.75rem;
|
font-size: 2.75rem;
|
||||||
@@ -91,6 +85,10 @@ body {
|
|||||||
margin-right: -1rem;
|
margin-right: -1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-content {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
grid-area: description;
|
grid-area: description;
|
||||||
@@ -98,11 +96,11 @@ body {
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
width: 45ch;
|
width: 45ch;
|
||||||
}
|
}
|
||||||
.discription__disclaimer {
|
.description__disclaimer {
|
||||||
color: var(--text-color-secondary);
|
color: var(--text-color-secondary);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
.discription__prerelease {
|
.description__prerelease {
|
||||||
color: var(--red-50);
|
color: var(--red-50);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
@@ -117,34 +115,48 @@ body {
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-size: 2rem;
|
|
||||||
grid-area: download;
|
grid-area: download;
|
||||||
|
margin-top: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download__ext,
|
.download__ext,
|
||||||
.download__app .app-list__app {
|
.download__app {
|
||||||
font-size: 0.85em;
|
font-size: 1.75rem;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download__app-other {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download__app-other > summary {
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: right;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-list {
|
.app-list {
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
column-gap: 1rem;
|
display: flex;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: min-content min-content min-content min-content;
|
|
||||||
grid-template-rows: min-content min-content;
|
|
||||||
margin-top: 1rem;
|
|
||||||
row-gap: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-list > *:not(:first-child) {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-list__platform {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.app-list__app {
|
.app-list__app {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-list__label {
|
.app-list__platform > .app-list__app + .app-list__app {
|
||||||
color: var(--text-color-secondary);
|
margin-top: 0.5rem;
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-list__app-label {
|
.app-list__app-label {
|
||||||
@@ -156,7 +168,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.app-list__rpm {
|
.app-list__rpm {
|
||||||
grid-column-start: 4;
|
grid-column-start: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -182,8 +194,9 @@ body {
|
|||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
margin-left: -60px;
|
margin-left: -60px;
|
||||||
width: 462px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
top: calc(-30px + 1rem);
|
||||||
|
width: 462px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
|||||||
@@ -12,37 +12,38 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="main">
|
<header class="site-header">
|
||||||
<header class="main-header">
|
<h1 class="site-header__title">fx_cast</h1>
|
||||||
<h1 class="main-title">fx_cast</h1>
|
<h2 class="site-header__subtitle">chromecast for firefox</h2>
|
||||||
<h2 class="main-subtitle">chromecast for firefox</h2>
|
</header>
|
||||||
</header>
|
<main class="site-content">
|
||||||
<main class="main-content">
|
<section class="description">
|
||||||
<section class="description">
|
<p>
|
||||||
<p>
|
Enables Chromecast support for casting web apps (like Netflix or BBC iPlayer), HTML5 video and screen/tab sharing.
|
||||||
Enables Chromecast support for casting web apps (like Netflix or BBC iPlayer), HTML5 video and screen/tab sharing.
|
</p>
|
||||||
</p>
|
<p class="description__disclaimer">
|
||||||
<p class="discription__disclaimer">
|
Requires a native bridge app to connect with receiver devices. Currently supported on Windows, macOS and Linux.
|
||||||
Requires a native bridge app to connect with receiver devices. Currently supported on Windows, macOS and Linux.
|
</p>
|
||||||
</p>
|
<p class="description__prerelease">
|
||||||
<p class="discription__prerelease">
|
No full public release yet! Pre-release beta version is incomplete and likely buggy.
|
||||||
No full public release yet! Pre-release beta version is incomplete and likely buggy.
|
</p>
|
||||||
</p>
|
</section>
|
||||||
</section>
|
<section class="download">
|
||||||
<section class="download">
|
<a class="download__ext btn btn--puffy btn--primary" disabled title="No available download found">
|
||||||
<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="">
|
||||||
<img class="btn__icon" src="icons/extension_light.svg" alt="">
|
Firefox Extension
|
||||||
Firefox Extension
|
</a>
|
||||||
</a>
|
<a class="download__app btn btn--puffy" disabled title="No available download found"></a>
|
||||||
<div class="download__app">
|
<details class="download__app-other">
|
||||||
<div class="app-list">
|
<summary>Other bridge downloads</summary>
|
||||||
<div class="app-list__label">Bridge:</div>
|
<div class="app-list">
|
||||||
<a class="app-list__app app-list__win btn btn--puffy" disabled title="No available download found">
|
<a class="app-list__app app-list__win btn btn--puffy" disabled title="No available download found">
|
||||||
Windows
|
Windows
|
||||||
</a>
|
</a>
|
||||||
<a class="app-list__app app-list__mac btn btn--puffy" disabled title="No available download found">
|
<a class="app-list__app app-list__mac btn btn--puffy" disabled title="No available download found">
|
||||||
macOS
|
macOS
|
||||||
</a>
|
</a>
|
||||||
|
<div class="app-list__platform app-list__platform--linux">
|
||||||
<a class="app-list__app app-list__deb btn btn--puffy" disabled title="No available download found">
|
<a class="app-list__app app-list__deb btn btn--puffy" disabled title="No available download found">
|
||||||
Linux
|
Linux
|
||||||
<span class="app-list__app-label">deb</span>
|
<span class="app-list__app-label">deb</span>
|
||||||
@@ -53,9 +54,9 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</details>
|
||||||
</main>
|
</section>
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
<img class="preview preview--bg"
|
<img class="preview preview--bg"
|
||||||
alt="Screenshot preview, background"
|
alt="Screenshot preview, background"
|
||||||
|
|||||||
@@ -1,5 +1,47 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
const downloadAppBtn = document.querySelector(".download__app");
|
||||||
|
const downloadAppOther = document.querySelector(".download__app-other");
|
||||||
|
const downloadAppOtherSummary = downloadAppOther.querySelector(":scope > summary");
|
||||||
|
|
||||||
|
// Ext download button
|
||||||
|
const downloadExtBtn = document.querySelector(".download__ext");
|
||||||
|
|
||||||
|
// App download buttons
|
||||||
|
const appListWinBtn = document.querySelector(".app-list__win");
|
||||||
|
const appListMacBtn = document.querySelector(".app-list__mac");
|
||||||
|
const appListDebBtn = document.querySelector(".app-list__deb");
|
||||||
|
const appListRpmBtn = document.querySelector(".app-list__rpm");
|
||||||
|
|
||||||
|
|
||||||
|
let platform;
|
||||||
|
|
||||||
|
switch (navigator.platform) {
|
||||||
|
case "Win32":
|
||||||
|
case "Win64":
|
||||||
|
platform = "win";
|
||||||
|
downloadAppBtn.textContent = "Windows Bridge";
|
||||||
|
appListWinBtn.hidden = true;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "MacIntel":
|
||||||
|
platform = "mac";
|
||||||
|
downloadAppBtn.textContent = "macOS Bridge";
|
||||||
|
appListMacBtn.hidden = true;
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
/**
|
||||||
|
* Hide default download button and display other downloads
|
||||||
|
* without details summary.
|
||||||
|
*/
|
||||||
|
downloadAppBtn.remove();
|
||||||
|
downloadAppOther.open = true;
|
||||||
|
downloadAppOtherSummary.hidden = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const ENDPOINT_URL = "https://api.github.com/repos/hensm/fx_cast/releases/latest";
|
const ENDPOINT_URL = "https://api.github.com/repos/hensm/fx_cast/releases/latest";
|
||||||
|
|
||||||
fetch(ENDPOINT_URL)
|
fetch(ENDPOINT_URL)
|
||||||
@@ -11,16 +53,6 @@ function onResponse (res) {
|
|||||||
for (const asset of res.assets) {
|
for (const asset of res.assets) {
|
||||||
const { browser_download_url } = asset;
|
const { browser_download_url } = asset;
|
||||||
|
|
||||||
// Ext download button
|
|
||||||
const downloadExtBtn = document.querySelector(".download__ext");
|
|
||||||
|
|
||||||
// App download buttons
|
|
||||||
const appListWinBtn = document.querySelector(".app-list__win");
|
|
||||||
const appListMacBtn = document.querySelector(".app-list__mac");
|
|
||||||
const appListDebBtn = document.querySelector(".app-list__deb");
|
|
||||||
const appListRpmBtn = document.querySelector(".app-list__rpm");
|
|
||||||
|
|
||||||
|
|
||||||
switch (asset.name.match(/.*\.(.*)$/).pop()) {
|
switch (asset.name.match(/.*\.(.*)$/).pop()) {
|
||||||
case "xpi":
|
case "xpi":
|
||||||
downloadExtBtn.href = browser_download_url;
|
downloadExtBtn.href = browser_download_url;
|
||||||
@@ -50,6 +82,24 @@ function onResponse (res) {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (platform) {
|
||||||
|
switch (platform) {
|
||||||
|
case "win":
|
||||||
|
downloadAppBtn.href = appListWinBtn.href;
|
||||||
|
break;
|
||||||
|
case "mac":
|
||||||
|
downloadAppBtn.href = appListMacBtn.href;
|
||||||
|
break;
|
||||||
|
|
||||||
|
default: {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
downloadAppBtn.removeAttribute("disabled");
|
||||||
|
downloadAppBtn.removeAttribute("title");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onError (err) {
|
function onError (err) {
|
||||||
|
|||||||
@@ -44,7 +44,6 @@ select.btn:-moz-focusring {
|
|||||||
background-color: var(--btn-bg);
|
background-color: var(--btn-bg);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
color: var(--btn-color);
|
color: var(--btn-color);
|
||||||
display: inline-flex;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
height: var(--btn-height);
|
height: var(--btn-height);
|
||||||
@@ -52,6 +51,10 @@ select.btn:-moz-focusring {
|
|||||||
padding: 0 var(--btn-padding);
|
padding: 0 var(--btn-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn:not([hidden]) {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
.btn--primary {
|
.btn--primary {
|
||||||
--btn-bg: var(--blue-60);
|
--btn-bg: var(--blue-60);
|
||||||
--btn-bg-hover: var(--blue-70);
|
--btn-bg-hover: var(--blue-70);
|
||||||
|
|||||||
Reference in New Issue
Block a user