Files
documentation/index.html
2026-11-14 18:21:12 -08:00

834 lines
47 KiB
HTML

<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#070709" />
<meta name="color-scheme" content="dark" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Vyla Docs" />
<meta name="application-name" content="Vyla Docs" />
<title>Vyla Entertainment - Free &amp; Decentralized Media Platform</title>
<meta name="description"
content="Vyla Entertainment is a community-built, decentralized media platform and developer ecosystem. Featuring native client apps for Desktop, Mobile, and Android TV, a scraping SDK, and a self-hosted Stream API." />
<meta name="keywords"
content="Vyla, Vyla Entertainment, self-hosted media, media player, streaming platform, open source streaming, Android TV streaming, stream API, developer SDK, decentralized media, privacy media player" />
<meta name="author" content="Vyla Entertainment" />
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<link rel="canonical" href="https://vyla.cc/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Vyla Entertainment - Free &amp; Decentralized Media Platform" />
<meta property="og:description"
content="A community-built media ecosystem focused on freedom, privacy, and control. Featuring native Desktop, Android, and TV apps backed by modular developer tools." />
<meta property="og:url" content="https://vyla.cc/" />
<meta property="og:site_name" content="Vyla Entertainment" />
<meta property="og:image" content="https://vyla.cc/src/assets/images/thumbnail.png" />
<meta property="og:image:secure_url" content="https://vyla.cc/src/assets/images/thumbnail.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Vyla Entertainment Ecosystem Overview" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Vyla Entertainment - Free &amp; Decentralized Media Platform" />
<meta name="twitter:description"
content="Explore Vyla Home, Go, TV, and the developer SDK. Built for privacy, performance, and complete streaming control." />
<meta name="twitter:image" content="https://vyla.cc/src/assets/images/thumbnail.png" />
<meta name="twitter:image:alt" content="Vyla Entertainment Ecosystem Overview" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebSite",
"@id": "https://vyla.cc/#website",
"url": "https://vyla.cc/",
"name": "Vyla Entertainment",
"description": "A community-built media project focused on freedom, privacy, and decentralized control.",
"publisher": {
"@id": "https://vyla.cc/#organization"
},
"potentialAction": {
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://vyla.cc/?q={search_term_string}"
},
"query-input": "required name=search_term_string"
}
},
{
"@type": "Organization",
"@id": "https://vyla.cc/#organization",
"name": "Vyla Entertainment",
"url": "https://vyla.cc/",
"logo": {
"@type": "ImageObject",
"url": "https://vyla.cc/src/assets/images/logo.png",
"width": 512,
"height": 512
},
"image": "https://vyla.cc/src/assets/images/thumbnail.png",
"sameAs": [
"https://gitlab.com/vyla-entertainment/",
"https://discord.gg/5eqRhKeywG",
"https://www.reddit.com/r/Vyla/"
]
},
{
"@type": "SoftwareApplication",
"@id": "https://vyla.cc/#software",
"name": "Vyla",
"applicationCategory": "MultimediaApplication",
"operatingSystem": "Windows, macOS, Linux, Android, Android TV",
"downloadUrl": "https://gitlab.com/vyla-entertainment/",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://vyla.cc/#breadcrumbs",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://vyla.cc/"
}
]
}
]
}
</script>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/src/assets/images/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/src/assets/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/src/assets/images/favicon-96x96.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/src/assets/images/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
</noscript>
<link rel="stylesheet" href="/src/css/bundle.min.css" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="preload" as="image" href="/src/assets/images/wallpaper-media/tree-mobile.webp" type="image/webp"
media="(max-width: 768px)" fetchpriority="high" />
<link rel="ard" href="/.well-known/ard.json" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script defer
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script>
(function () {
var saved = localStorage.getItem('vyla-theme') || 'auto';
if (saved === 'auto') {
var d = new Date();
var m = d.getMonth();
saved = m === 9 ? 'halloween' : m === 10 ? 'autumn' : m === 11 ? 'christmas' : (m === 0 || m === 1) ? 'winter' : (m === 8 && d.getDate() >= 22) ? 'autumn' : 'dark';
}
document.documentElement.setAttribute('data-theme', saved);
})();
</script>
</head>
<body class="is-home">
<video class="video-bg" autoplay muted loop playsinline></video>
<div id="banner">
<span>
Rights holders can request source removal - <a href="/misc/project/dmca">DMCA policy</a>.
</span>
<button id="banner-close" onclick="dismissBanner()" aria-label="Dismiss banner">&times;</button>
</div>
<div id="header-container">
<header id="navbar">
<div class="nav-top">
<a class="brand" href="/" aria-label="Vyla Homepage"><img src="/src/assets/images/logo.png"
alt="Vyla Logo" id="brand-logo" width="28" height="28" decoding="async" /></a>
<button id="search-trigger" type="button" onclick="openSearch()" aria-label="Search"></button>
<div class="links">
<button id="settings-trigger" type="button" onclick="openSettings()"
aria-label="Personalize preferences"></button>
<button id="theme-toggle" type="button" onclick="toggleThemeMenu(event)"
aria-label="Toggle theme"></button>
</div>
</div>
<nav class="tabs" id="nav-tabs" aria-label="Main Navigation"></nav>
</header>
</div>
<div id="layout">
<nav id="sidebar" aria-label="Documentation Navigation"></nav>
<div id="content-wrapper">
<div id="content-col">
<div id="main-wrap">
<main class="prose" id="main-content">
<style>
.home-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.home-header {
position: relative;
width: 100vw;
height: auto;
margin-top: calc(var(--header-height) + max(10px, env(safe-area-inset-top)) + 12px);
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding: 40px 0 64px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.header-video,
.header-image {
position: absolute;
inset: 0;
width: 80%;
height: 100%;
object-fit: cover;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
left: 50%;
transform: translateX(-50%);
border-top-left-radius: 50px !important;
border-top-right-radius: 50px !important;
will-change: transform, opacity;
backface-visibility: hidden;
transform-origin: center top;
mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0.2) 72%, transparent 88%);
background-position: center top;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-tint {
position: absolute;
inset: 0;
z-index: 1;
}
.header-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 680px;
padding: 0 20px;
}
.header-logo-badge {
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
flex-shrink: 0;
}
.header-logo-badge img {
width: 100%;
height: 100%;
display: block;
}
.header-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.header-actions-row {
display: flex;
align-items: center;
gap: 10px;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 22px;
border-radius: 100px;
background: var(--btn-primary-bg);
color: var(--btn-primary-text) !important;
font-size: 13.5px;
font-weight: 600;
text-decoration: none !important;
transition: transform 0.15s ease;
}
.btn-secondary {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: 100px;
font-size: 13.5px;
font-weight: 600;
text-decoration: none !important;
backdrop-filter: blur(25px) saturate(2);
-webkit-backdrop-filter: blur(25px) saturate(2);
transition: transform 0.15s ease;
}
@keyframes fadeVideoBg {
to {
opacity: 0;
}
}
.body-blurred-backdrop {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: -1;
pointer-events: none;
overflow: hidden;
animation: fadeVideoBg linear both;
animation-timeline: scroll();
animation-range: 0 800px;
will-change: opacity;
}
.body-blurred-video,
.body-blurred-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(25px);
display: block;
}
.body-blurred-video:not([src]),
.body-blurred-video[src=""],
.body-blurred-image:not([src]),
.body-blurred-image[src=""],
.header-video:not([src]),
.header-video[src=""],
.header-image:not([src]),
.header-image[src=""] {
display: none;
}
.content-section {
width: 100%;
max-width: 1040px;
display: flex;
flex-direction: column;
margin-top: 48px;
position: relative;
z-index: 1;
}
.header-desc {
font-size: 14.5px;
margin-top: 0 !important;
}
.section-head {
margin-bottom: 22px;
text-align: left;
width: 100%;
}
.section-head h2 {
font-size: 22px !important;
font-weight: 700 !important;
margin: 0 0 6px !important;
color: var(--text) !important;
}
.section-head p {
font-size: 14.5px;
margin: 0;
color: var(--muted);
}
.vyla-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 16px;
width: 100%;
box-sizing: border-box;
}
.feature-box {
position: relative;
display: flex;
flex-direction: column;
padding: 24px;
border-radius: 30px;
background: rgba(187, 187, 187, 0.6) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
text-decoration: none !important;
color: inherit !important;
transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.feature-box::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 45%);
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
html.dark .feature-box {
background: rgba(25, 25, 25, 0.2) !important;
}
.feature-box:hover {
background: rgba(150, 150, 150, 1);
}
.feature-box:hover::after {
opacity: 1;
}
.box-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--bg-elevated);
color: var(--text-primary);
margin-bottom: 16px;
}
.box-icon svg {
width: 20px;
height: 20px;
}
.box-title {
font-size: 17px;
font-weight: 700;
margin: 0 0 8px;
color: var(--text-primary);
}
.box-desc {
font-size: 14px;
line-height: 1.55;
margin: 0;
color: var(--text-muted) !important;
}
.box-meta {
margin-top: auto;
padding-top: 18px;
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-muted);
opacity: 0.75;
}
.hero-greeting {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 0 0 14px;
border-radius: 100px;
color: var(--text);
letter-spacing: 0.01em;
}
.hero-resume {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--text);
margin-top: 30px;
text-align: center;
}
@media (max-width: 900px) {
#header-container {
border-radius: 100px;
top: max(6px, env(safe-area-inset-top));
width: 90%;
}
.header-video,
.header-image {
border-top-left-radius: 55px !important;
border-top-right-radius: 55px !important;
width: 97% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0px !important;
}
}
@media (orientation: landscape) and (max-height: 550px) {
.home-header {
padding: 20px 0 40px;
}
.header-logo-badge {
width: 44px;
height: 44px;
margin-bottom: 8px;
}
.header-title {
font-size: 26px;
margin-bottom: 6px;
}
.header-desc {
font-size: 13.5px;
margin-bottom: 14px;
max-width: 540px;
}
.content-section {
margin-top: 32px;
}
.vyla-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
}
</style>
<div class="home-container">
<div class="body-blurred-backdrop">
<video class="body-blurred-video" autoplay muted loop playsinline src=""></video>
<img class="body-blurred-image" alt="" width="1920" height="1080" />
</div>
<header class="home-header">
<video class="header-video" autoplay muted loop playsinline preload="none"
src=""></video>
<img class="header-image" alt="Vyla tree wallpaper backdrop" width="1920" height="1080"
src="/src/assets/images/wallpaper-media/tree-mobile.webp" fetchpriority="high"
decoding="async" />
<div class="header-tint"></div>
<div class="header-content">
<div class="header-logo-badge">
<img src="/src/assets/images/logo.png" alt="Vyla Entertainment Logo" width="58"
height="58" decoding="async" />
</div>
<h1 class="header-title">Vyla Entertainment</h1>
<p class="header-desc">A community-built media project focused on freedom, privacy,
and giving people control over their own experience.</p>
<div class="header-actions">
<div class="header-actions-row">
<a href="/start-here/introduction" class="btn-primary"
aria-label="Get Started with Vyla Ecosystem">
Get Started
<svg width="15" height="15" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
</a>
<a href="/sdk" class="btn-secondary"
aria-label="Explore Vyla SDK Documentation">Vyla SDK</a>
</div>
<a href="/stream-api/overview" class="btn-secondary"
aria-label="Explore Stream API Documentation">Stream API</a>
</div>
</div>
</header>
<div class="content-section">
<div class="section-head">
<h2>Ecosystem &amp; Products</h2>
<p>Native frontends running on desktop, mobile, and television form factors.</p>
</div>
<div class="vyla-grid">
<a href="/products/home" class="feature-box"
aria-label="Explore Vyla Home desktop application for Windows, macOS, and Linux">
<div class="box-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" />
<line x1="8" y1="21" x2="16" y2="21" />
<line x1="12" y1="17" x2="12" y2="21" />
</svg>
</div>
<div class="box-title">Vyla Home</div>
<p class="box-desc">Desktop control center and runtime designed for Windows,
macOS, and Linux.</p>
<div class="box-meta">Explore Desktop &rarr;</div>
</a>
<a href="/products/go" class="feature-box"
aria-label="Explore Vyla Go mobile application for Android">
<div class="box-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
<line x1="12" y1="18" x2="12.01" y2="18" />
</svg>
</div>
<div class="box-title">Vyla Go</div>
<p class="box-desc">Android mobile application managing local service lifecycles
and background playback.</p>
<div class="box-meta">Explore Mobile &rarr;</div>
</a>
<a href="/products/tv" class="feature-box"
aria-label="Explore Vyla TV application for Android TV and Fire TV">
<div class="box-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="15" rx="2" ry="2" />
<polyline points="17 2 12 7 7 2" />
</svg>
</div>
<div class="box-title">Vyla TV</div>
<p class="box-desc">Leanback streaming client for Android TV built with Jetpack
Compose and ExoPlayer.</p>
<div class="box-meta">Explore Android TV &rarr;</div>
</a>
</div>
</div>
<div class="content-section">
<div class="section-head">
<h2>Developer Services</h2>
<p>Self-hostable tools and scraper libraries for distributed playback resolution.
</p>
</div>
<div class="vyla-grid">
<a href="/sdk" class="feature-box"
aria-label="Explore Vyla SDK scraping library and API reference">
<div class="box-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round"
stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M9 8L5 11.6923L9 16M15 8L19 11.6923L15 16"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
</path>
</g>
</svg>
</div>
<div class="box-title">Vyla SDK</div>
<p class="box-desc">Node.js scraper resolver package providing resilient
provider extraction and subtitle parsing.</p>
<div class="box-meta">View SDK Reference &rarr;</div>
</a>
<a href="/stream-api/overview" class="feature-box"
aria-label="Explore Stream API progressive SSE streaming gateway">
<div class="box-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<path d="M12 12v9" />
<path d="m8 17 4 4 4-4" />
</svg>
</div>
<div class="box-title">Stream API</div>
<p class="box-desc">Self-hosted HTTP and SSE proxy emitting real-time discovery
events directly to players.</p>
<div class="box-meta">View API Endpoints &rarr;</div>
</a>
<a href="/concepts/providers" class="feature-box"
aria-label="Explore Provider architecture, jitter buffering, and verification">
<div class="box-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round"
stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="currentColor" stroke-width="2"></path>
<path
d="M3.5 11H6C7.10457 11 8 11.8954 8 13V13C8 14.1046 8.89543 15 10 15V15C11.1046 15 12 15.8954 12 17V20.5"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
<path
d="M8 4V5C8 6.10457 8.89543 7 10 7H10.1459C11.1699 7 12 7.83011 12 8.8541V8.8541C12 9.55638 12.3968 10.1984 13.0249 10.5125L13.1056 10.5528C13.6686 10.8343 14.3314 10.8343 14.8944 10.5528L14.9751 10.5125C15.6032 10.1984 16 9.55638 16 8.8541V8.8541C16 7.83011 16.8301 7 17.8541 7H19.5"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M16 19.5V17C16 15.8954 16.8954 15 18 15H20"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"></path>
</g>
</svg>
</div>
<div class="box-title">Provider Architecture</div>
<p class="box-desc">Jitter buffering, failover priority arrays, proxy
validation, and verification mechanics.</p>
<div class="box-meta">Read Mechanics &rarr;</div>
</a>
</div>
</div>
</div>
<script>
(() => {
const bg = document.querySelector('.body-blurred-backdrop');
if (!bg || CSS.supports?.('animation-timeline', 'scroll()')) return;
const onScroll = () => {
const y = window.scrollY || document.documentElement.scrollTop;
bg.style.opacity = Math.max(0, 1 - y / 450);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
})();
</script>
</main>
<footer id="site-footer">
<div class="footer-nav">
<a id="footer-prev" class="footer-link prev" href="#"></a>
<a id="footer-next" class="footer-link next" href="#"></a>
</div>
<div class="footer-grid">
<div class="footer-brand-col">
<a href="/" class="footer-brand-link" aria-label="Vyla Homepage">
<img src="/src/assets/images/logo.png" alt="Vyla Logo" width="24" height="24"
loading="lazy" decoding="async" />
<span class="footer-brand-name">Vyla</span>
</a>
<p class="footer-brand-desc">A community-built, decentralized media platform and
developer ecosystem focused on freedom, privacy, and control.</p>
<div class="footer-socials">
<a href="https://discord.gg/5eqRhKeywG" target="_blank" rel="noopener"
aria-label="Discord Community">
<svg class="footer-icon" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<path
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.929 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
</svg>
</a>
<a href="https://gitlab.com/vyla-entertainment/" target="_blank" rel="noopener"
aria-label="GitLab Repository">
<svg class="footer-icon" viewBox="0 0 16 16" fill="currentColor"
aria-hidden="true">
<path fill="currentColor"
d="M14.975 8.904L14.19 6.55l-1.552-4.67a.268.268 0 00-.255-.18.268.268 0 00-.254.18l-1.552 4.667H5.422L3.87 1.879a.267.267 0 00-.254-.179.267.267 0 00-.254.18l-1.55 4.667-.784 2.357a.515.515 0 00.193.583l6.78 4.812 6.778-4.812a.516.516 0 00.196-.583z">
</path>
</svg>
</a>
<a href="https://www.reddit.com/r/Vyla/" target="_blank" rel="noopener"
aria-label="Reddit Community">
<svg class="footer-icon" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<path
d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.702zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.197-2.512-.73a.326.326 0 0 0-.232-.095z" />
</svg>
</a>
</div>
</div>
<div class="footer-links-col">
<div class="footer-col-title">Applications</div>
<ul class="footer-col-list">
<li><a href="/products/home">Vyla Home (Desktop)</a></li>
<li><a href="/products/go">Vyla Go (Android Mobile)</a></li>
<li><a href="/products/tv">Vyla TV (Android TV)</a></li>
<li><a href="/products/player">Web Player</a></li>
</ul>
</div>
<div class="footer-links-col">
<div class="footer-col-title">Developers</div>
<ul class="footer-col-list">
<li><a href="/stream-api/overview">Stream API Gateway</a></li>
<li><a href="/sdk/vyla-sdk">Vyla SDK Resolver</a></li>
<li><a href="/stream-api/reference/paths">API Endpoints</a></li>
<li><a href="/start-here/architecture">Architecture Guide</a></li>
<li><a href="/guides/integrations">Player Integration</a></li>
</ul>
</div>
<div class="footer-links-col">
<div class="footer-col-title">Resources &amp; Legal</div>
<ul class="footer-col-list">
<li><a href="/resources/faq">FAQ</a></li>
<li><a href="/resources/troubleshooting">Troubleshooting</a></li>
<li><a href="/resources/glossary">Ecosystem Glossary</a></li>
<li><a href="/misc/project/dmca">DMCA Policy</a></li>
<li><a href="/misc/project/story">Project Story</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="footer-bottom-info">
<p id="footer-note">&copy; 2026 Vyla Entertainment. Open-source under MIT &amp; GPL-3.0
licenses.</p>
<p class="footer-subtext">Free and decentralized media streaming engineered for user
privacy.</p>
</div>
<div class="footer-badges">
<a href="https://www.thegreenwebfoundation.org" target="_blank" rel="noopener"
class="footer-green-badge"
aria-label="Verified green hosting by The Green Web Foundation">
<img src="https://app.greenweb.org/api/v3/greencheckimage/vyla.cc?nocache=true"
alt="This website runs on green hosting - verified by thegreenwebfoundation.org"
width="200" height="95" loading="lazy" decoding="async" />
</a>
</div>
</div>
</footer>
</div>
<aside id="toc" aria-label="Table of Contents">
<p class="toc-title">On this page</p>
<ul id="toc-list"></ul>
</aside>
</div>
</div>
</div>
<script defer src="/src/js/main.js"></script>
<script defer src="/src/js/api/contribute.js"></script>
<script defer src="/src/js/api/donations.js"></script>
<script defer src="/src/js/api/download.js"></script>
<script defer src="/src/js/api/release.js"></script>
<script defer src="/src/js/main/settings.js"></script>
</body>
</html>