zstrike/home-frontend
1
0
Fork 0
forked from vyla-entertainment/home-frontend
Code Pull Requests Activity

added android support

Browse Source
This commit is contained in:
alwaysmesmerizingyou
2026-09-08 17:29:32 -07:00
parent e5327dfc93
commit 0490ecb9c8
1 changed files with 143 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
index.html
View File

@@ -270,21 +270,15 @@
<div id="hero-prism" class="hero-prism"></div>
</div>
<div class="container hero-container">
<div class="logo-image">
<img src="assets/images/header_logo.png" alt="Vyla Home Logo" width="100" height="100"
fetchpriority="high"
srcset="assets/images/header_logo.png 100w, assets/images/header_logo.png 200w" sizes="100px">
</div>
<h1 id="hero-title" class="hero-title">The Local-First Desktop Media Center</h1>
<p class="hero-description">
Vyla Home runs directly on your local workstation. By decentralizing stream resolution to your
residential connection, it eliminates centralized cloud failures, datacenter IP blocks, and
third-party tracking.
</p>
<p class="hero-description"> Vyla Home runs directly on your local workstation. By decentralizing stream
resolution to your residential connection, it eliminates centralized cloud failures, datacenter IP
blocks, and third-party tracking. </p>
<div class="discord-copy-bar reveal" id="copy-discord-btn" role="button" tabindex="0"
aria-label="Copy GitLab releases URL">
<span class="copy-discord-label"
@@ -309,14 +303,12 @@
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g>
<path d="M5.5 12.5L10 17L19.5 7.5" stroke="#ffffff" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
</path>
stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</span>
</span>
</div>
<div class="hero-cta-row reveal">
<div class="download-expandable" id="hero-download-expandable" aria-expanded="false">
<button class="hero-cta hero-cta-dark" id="hero-download-btn">
@@ -335,6 +327,14 @@
</svg>
<span>Windows v0.0.0</span>
</a>
<a href="#" class="download-option" id="hero-go-download">
<svg class="android-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<path
d="M17.6 9.2l1.5-2.6c.1-.2.1-.4-.1-.5-.2-.1-.4-.1-.5.1L17 8.8c-.9-.4-1.9-.6-3-.6s-2.1.2-3 .6L9.5 6.2c-.1-.2-.3-.2-.5-.1-.2.1-.2.3-.1.5l1.5 2.6C8.1 10.2 6.4 12.1 6 14.5h12c-.4-2.4-2.1-4.3-4.4-5.3zM9.5 13.2c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zm5 0c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zM6 15h12v3.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V15zm2 5v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2zm10 0v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2z" />
</svg>
<span>Android v1.0.2</span>
</a>
<a href="#" class="download-option" id="hero-mac-download">
<svg class="mac-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
@@ -345,96 +345,76 @@
</a>
</div>
</div>
<a class="hero-cta hero-cta-unsure" href="https://gitlab.com/vyla-entertainment/home/-/releases"
target="_blank" rel="noopener noreferrer">
View Releases
</a>
target="_blank" rel="noopener noreferrer"> View Releases </a>
</div>
<script>
async function setupExpandableDownload(expandableId, btnId, optionsId, windowsId, macId) {
async function setupExpandableDownload(expandableId, btnId, optionsId, windowsId, goId, macId) {
const expandable = document.getElementById(expandableId);
const downloadBtn = document.getElementById(btnId);
const downloadOptions = document.getElementById(optionsId);
const windowsDownload = document.getElementById(windowsId);
const goDownload = document.getElementById(goId);
const macDownload = document.getElementById(macId);
if (!expandable || !downloadBtn || !downloadOptions || !windowsDownload || !macDownload) return;
if (!expandable || !downloadBtn || !downloadOptions || !windowsDownload || !goDownload || !macDownload) return;
try {
const response = await fetch(
"https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/releases/permalink/latest"
);
const response = await fetch("https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/releases/permalink/latest");
if (!response.ok) throw new Error("Failed to fetch latest release");
const release = await response.json();
const version = release.tag_name;
const fileVersion = version.replace(/^v/, "");
const windowsAsset = release.assets?.links?.find(link =>
link.name?.toLowerCase().endsWith(".exe")
);
const macAsset = release.assets?.links?.find(link =>
link.name?.toLowerCase().endsWith(".dmg")
);
const btnText = downloadBtn.querySelector('.download-btn-text');
const windowsAsset = release.assets?.links?.find(link => link.name?.toLowerCase().endsWith(".exe"));
const macAsset = release.assets?.links?.find(link => link.name?.toLowerCase().endsWith(".dmg"));
const btnText = downloadBtn.querySelector(".download-btn-text");
if (btnText) {
btnText.textContent = `Download ${version}`;
}
if (windowsAsset?.url) {
windowsDownload.href = windowsAsset.url;
windowsDownload.querySelector('span').textContent = `Windows ${version}`;
} else {
windowsDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
windowsDownload.querySelector('span').textContent = `Windows ${version}`;
}
windowsDownload.querySelector("span").textContent = `Windows ${version}`;
goDownload.href = "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fgo/packages/generic/vyla-go/v1.0.2/vyla-go-v1.0.2-1788911736508.apk";
goDownload.querySelector("span").textContent = "Android v1.0.2";
if (macAsset?.url) {
macDownload.href = macAsset.url;
macDownload.querySelector('span').textContent = `Mac ${version}`;
} else {
macDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_aarch64.dmg`;
macDownload.querySelector('span').textContent = `Mac ${version}`;
}
downloadBtn.addEventListener('click', (e) => {
macDownload.querySelector("span").textContent = `Mac ${version}`;
downloadBtn.addEventListener("click", (e) => {
e.preventDefault();
const isExpanded = expandable.getAttribute('aria-expanded') === 'true';
expandable.setAttribute('aria-expanded', !isExpanded);
downloadOptions.setAttribute('aria-hidden', isExpanded);
downloadOptions.classList.toggle('show', !isExpanded);
const isExpanded = expandable.getAttribute("aria-expanded") === "true";
expandable.setAttribute("aria-expanded", String(!isExpanded));
downloadOptions.setAttribute("aria-hidden", String(isExpanded));
downloadOptions.classList.toggle("show", !isExpanded);
});
} catch (error) {
const btnText = downloadBtn.querySelector('.download-btn-text');
const btnText = downloadBtn.querySelector(".download-btn-text");
if (btnText) {
btnText.textContent = "Download Latest Release";
}
windowsDownload.querySelector('span').textContent = "Windows (Latest)";
macDownload.querySelector('span').textContent = "Mac (Latest)";
windowsDownload.querySelector("span").textContent = "Windows (Latest)";
goDownload.href = "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fgo/packages/generic/vyla-go/v1.0.2/vyla-go-v1.0.2-1788911736508.apk";
goDownload.querySelector("span").textContent = "Android v1.0.2";
macDownload.querySelector("span").textContent = "Mac (Latest)";
}
}
setupExpandableDownload("hero-download-expandable", "hero-download-btn", "hero-download-options", "hero-windows-download", "hero-mac-download");
document.addEventListener('click', (e) => {
const expandables = document.querySelectorAll('.download-expandable');
setupExpandableDownload("hero-download-expandable", "hero-download-btn", "hero-download-options", "hero-windows-download", "hero-go-download", "hero-mac-download");
document.addEventListener("click", (e) => {
const expandables = document.querySelectorAll(".download-expandable");
expandables.forEach(expandable => {
const btn = expandable.querySelector('button');
const options = expandable.querySelector('.download-options');
const btn = expandable.querySelector("button");
const options = expandable.querySelector(".download-options");
if (btn && options && !expandable.contains(e.target)) {
expandable.setAttribute('aria-expanded', 'false');
options.setAttribute('aria-hidden', 'true');
options.classList.remove('show');
expandable.setAttribute("aria-expanded", "false");
options.setAttribute("aria-hidden", "true");
options.classList.remove("show");
}
});
});
</script>
<div class="hero-preview-wrap reveal">
<div class="platform-pill">
<svg class="windows-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"
@@ -443,7 +423,18 @@
d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.949-1.951" />
</svg>
<span>Windows 10 / 11 (64-bit)</span>
<span class="platform-divider">•</span>
<svg class="android-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<path
d="M17.6 9.2l1.5-2.6c.1-.2.1-.4-.1-.5-.2-.1-.4-.1-.5.1L17 8.8c-.9-.4-1.9-.6-3-.6s-2.1.2-3 .6L9.5 6.2c-.1-.2-.3-.2-.5-.1-.2.1-.2.3-.1.5l1.5 2.6C8.1 10.2 6.4 12.1 6 14.5h12c-.4-2.4-2.1-4.3-4.4-5.3zM9.5 13.2c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zm5 0c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zM6 15h12v3.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V15zm2 5v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2zm10 0v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2z" />
</svg>
<span>Android</span>
<span class="platform-divider">•</span>
<svg class="mac-icon" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<path
@@ -452,14 +443,12 @@
<span>macOS (Apple Silicon)</span>
</div>
</div>
<div class="partners-inline reveal" id="partners-grid-wrap">
<p class="partners-label">Recognized and indexed across open media ecosystems</p>
<div class="partners-grid" id="partners-grid"></div>
</div>
</div>
</section>
<div class="stats-grid reveal-stagger" id="stats-grid">
<div class="stat-item reveal">
<span class="stat-value" id="stat-members"></span>
@@ -470,13 +459,11 @@
<span class="stat-label">Online Now</span>
</div>
</div>
<section id="features" class="section features-section" aria-labelledby="features-heading">
<div class="container features-container">
<header class="features-heading reveal">
<h2 id="features-heading" class="section-title-lg">Why choose Home?</h2>
</header>
<article class="feature-block reveal">
<figure class="feature-media">
<img src="assets/images/features/1.png"
@@ -487,13 +474,11 @@
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">No Datacenter Throttling</h3>
<p class="section-subtitle">
Shared hosting nodes and VPS providers routinely block traffic originating from datacenters.
We removed the datacenter entirely. Connect directly via your residential network.
</p>
<p class="section-subtitle"> Shared hosting nodes and VPS providers routinely block traffic
originating from datacenters. We removed the datacenter entirely. Connect directly via your
residential network. </p>
</div>
</article>
<article class="feature-block feature-block-reverse reveal">
<figure class="feature-media">
<img src="assets/images/features/2.png"
@@ -504,13 +489,10 @@
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">No Single Point of Failure</h3>
<p class="section-subtitle">
When a central domain gets flagged or suspended, everyone goes dark. Running locally means
your instance cannot be taken down by third parties.
</p>
<p class="section-subtitle"> When a central domain gets flagged or suspended, everyone goes
dark. Running locally means your instance cannot be taken down by third parties. </p>
</div>
</article>
<article class="feature-block reveal">
<figure class="feature-media">
<img src="assets/images/features/3.png"
@@ -521,13 +503,10 @@
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">Encrypted Local Vault</h3>
<p class="section-subtitle">
Your bookmarks, watch history, settings, and tokens are stored in an encrypted vault keyed
uniquely to your hardware profile. Total privacy.
</p>
<p class="section-subtitle"> Your bookmarks, watch history, settings, and tokens are stored in
an encrypted vault keyed uniquely to your hardware profile. Total privacy. </p>
</div>
</article>
<article class="feature-block feature-block-reverse reveal">
<figure class="feature-media">
<img src="assets/images/features/4.png"
@@ -538,13 +517,10 @@
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">Automated OTA Updates</h3>
<p class="section-subtitle">
Vyla Home verifies releases directly from the repository upon startup. Update assets are
downloaded, checksum-verified, and patched automatically.
</p>
<p class="section-subtitle"> Vyla Home verifies releases directly from the repository upon
startup. Update assets are downloaded, checksum-verified, and patched automatically. </p>
</div>
</article>
<article class="feature-block reveal">
<figure class="feature-media">
<img src="assets/images/features/5.png"
@@ -555,13 +531,10 @@
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">Rich Discovery & Curated Media</h3>
<p class="section-subtitle">
Access curated collections, 4K releases, popular anime series, soundcloak music streaming,
and detailed TMDB cast breakdowns seamlessly.
</p>
<p class="section-subtitle"> Access curated collections, 4K releases, popular anime series,
soundcloak music streaming, and detailed TMDB cast breakdowns seamlessly. </p>
</div>
</article>
<article class="feature-block feature-block-reverse reveal">
<figure class="feature-media">
<img src="assets/images/features/6.png"
@@ -572,20 +545,19 @@
</figure>
<div class="feature-copy">
<h3 class="section-title-lg feature-title">Customizable Interface</h3>
<p class="section-subtitle">
Toggle dynamic color adaptations, trailer background playback, custom color themes,
text-only mode, and layout preferences with full persistent storage.
<p class="section-subtitle"> Toggle dynamic color adaptations, trailer background playback,
custom color themes, text-only mode, and layout preferences with full persistent storage.
</p>
</div>
</article>
</div>
</section>
<section id="testimonials" class="section testimonials-section" aria-labelledby="testimonials-heading">
<div class="container testimonials-container">
<header class="testimonials-heading reveal">
<h2 id="testimonials-heading" class="section-title-lg">Here's what people say about <span
class="bold">Vyla Home</span></h2>
class="bold">Vyla Home</span>
</h2>
</header>
<div class="marquee-wrap marquee-fade-wrap" role="region" aria-label="User testimonials carousel">
<div class="marquee-row marquee-left">
@@ -597,13 +569,13 @@
</div>
</div>
</section>
<section id="faq" class="section faq-section" aria-labelledby="faq-heading">
<div class="container">
<header class="faq-heading reveal">
<h2 id="faq-heading" class="section-title-lg">FAQ</h2>
<p class="section-subtitle">Still have questions? <a href="https://discord.gg/5eqRhKeywG"
target="_blank" rel="noopener noreferrer">Ask in our Discord</a></p>
target="_blank" rel="noopener noreferrer">Ask in our Discord</a>
</p>
</header>
<div class="faq-list reveal-stagger" id="faq-list" role="list" aria-label="Frequently asked questions">
</div>
@@ -643,12 +615,84 @@
</svg>
<span>Mac v0.0.0</span>
</a>
<a href="#" class="download-option" id="cta-go-download">
<svg class="android-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<path
d="M17.6 9.2l1.5-2.6c.1-.2.1-.4-.1-.5-.2-.1-.4-.1-.5.1L17 8.8c-.9-.4-1.9-.6-3-.6s-2.1.2-3 .6L9.5 6.2c-.1-.2-.3-.2-.5-.1-.2.1-.2.3-.1.5l1.5 2.6C8.1 10.2 6.4 12.1 6 14.5h12c-.4-2.4-2.1-4.3-4.4-5.3zM9.5 13.2c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zm5 0c-.4 0-.7-.3-.7-.7s.3-.7.7-.7.7.3.7.7-.3.7-.7.7zM6 15h12v3.5c0 .8-.7 1.5-1.5 1.5h-9c-.8 0-1.5-.7-1.5-1.5V15zm2 5v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2zm10 0v2c0 .6-.4 1-1 1s-1-.4-1-1v-2h2z" />
</svg>
<span>Android v1.0.2</span>
</a>
</div>
</div>
</div>
<script>
setupExpandableDownload("cta-download-expandable", "cta-download-btn", "cta-download-options", "cta-windows-download", "cta-mac-download");
async function setupExpandableDownload(expandableId, btnId, optionsId, windowsId, goId, macId) {
const expandable = document.getElementById(expandableId);
const downloadBtn = document.getElementById(btnId);
const downloadOptions = document.getElementById(optionsId);
const windowsDownload = document.getElementById(windowsId);
const goDownload = document.getElementById(goId);
const macDownload = document.getElementById(macId);
if (!expandable || !downloadBtn || !downloadOptions || !windowsDownload || !goDownload || !macDownload) return;
try {
const response = await fetch("https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/releases/permalink/latest");
if (!response.ok) throw new Error("Failed to fetch latest release");
const release = await response.json();
const version = release.tag_name;
const fileVersion = version.replace(/^v/, "");
const windowsAsset = release.assets?.links?.find(link => link.name?.toLowerCase().endsWith(".exe"));
const macAsset = release.assets?.links?.find(link => link.name?.toLowerCase().endsWith(".dmg"));
const btnText = downloadBtn.querySelector(".download-btn-text");
if (btnText) {
btnText.textContent = `Download ${version}`;
}
if (windowsAsset?.url) {
windowsDownload.href = windowsAsset.url;
} else {
windowsDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_x64-setup.exe`;
}
windowsDownload.querySelector("span").textContent = `Windows ${version}`;
goDownload.href = "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fgo/packages/generic/vyla-go/v1.0.2/vyla-go-v1.0.2-1788911736508.apk";
goDownload.querySelector("span").textContent = "Android v1.0.2";
if (macAsset?.url) {
macDownload.href = macAsset.url;
} else {
macDownload.href = `https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/${version}/Vyla-Home_${fileVersion}_aarch64.dmg`;
}
macDownload.querySelector("span").textContent = `Mac ${version}`;
downloadBtn.addEventListener("click", (e) => {
e.preventDefault();
const isExpanded = expandable.getAttribute("aria-expanded") === "true";
expandable.setAttribute("aria-expanded", String(!isExpanded));
downloadOptions.setAttribute("aria-hidden", String(isExpanded));
downloadOptions.classList.toggle("show", !isExpanded);
});
} catch (error) {
const btnText = downloadBtn.querySelector(".download-btn-text");
if (btnText) {
btnText.textContent = "Download Latest Release";
}
windowsDownload.querySelector("span").textContent = "Windows (Latest)";
goDownload.href = "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fgo/packages/generic/vyla-go/v1.0.2/vyla-go-v1.0.2-1788911736508.apk";
goDownload.querySelector("span").textContent = "Android v1.0.2";
macDownload.querySelector("span").textContent = "Mac (Latest)";
}
}
setupExpandableDownload("cta-download-expandable", "cta-download-btn", "cta-download-options", "cta-windows-download", "cta-go-download", "cta-mac-download");
document.addEventListener("click", (e) => {
const expandables = document.querySelectorAll(".download-expandable");
expandables.forEach(expandable => {
const btn = expandable.querySelector("button");
const options = expandable.querySelector(".download-options");
if (btn && options && !expandable.contains(e.target)) {
expandable.setAttribute("aria-expanded", "false");
options.setAttribute("aria-hidden", "true");
options.classList.remove("show");
}
});
});
</script>
</section>