vyla-entertainment/documentation
2
0
Fork 0
mirror of https://gitlab.com/vyla-entertainment/documentation.git synced 2026-11-09 20:17:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

updated lighthouse/ tweaked UI

Browse Source
This commit is contained in:
alwaysmesmerizingyou
2026-10-07 21:03:19 -07:00
parent 00b542e4d8
commit d90feedd98
5 changed files with 154 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
.well-known/ard.json Normal file
View File

@@ -0,0 +1,22 @@
{
"entries": [
{
"identifier": "urn:air:vyla.cc:service:stream-api",
"displayName": "Vyla Stream API",
"type": "text/html",
"url": "https://vyla.cc/stream-api/overview",
"description": "Self-hosted HTTP/SSE proxy for stream resolution, subtitle extraction, and download links.",
"representativeQueries": [
"resolve a streaming link for a movie by id",
"get subtitles for a tv episode",
"check health status of a self-hosted Stream API instance"
],
"tags": [
"media",
"streaming",
"sdk",
"self-hosted"
]
}
]
}

30
assets/styling/base.css
View File

@@ -1,11 +1,16 @@
#header-container {
position: sticky;
top: 0;
top: 10px;
z-index: 40;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
width: 50%;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
html.dark #header-container {
@@ -645,6 +650,7 @@ aside#toc {
padding-left: 10px;
height: fit-content;
max-height: calc(100vh - var(--header-height) - 40px);
padding-bottom: 10px;
overflow-y: auto;
position: sticky;
top: calc(var(--header-height) + 40px);
@@ -713,12 +719,22 @@ html.dark aside#toc li a:hover {
flex: 1;
min-width: 0;
max-width: 720px;
padding: 20px;
margin-top: 40px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 12px;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
html.dark #main-wrap {
background: rgba(0, 0, 0, 0.4);
}
main.prose {
min-width: 0;
max-width: 100%;
@@ -1221,7 +1237,7 @@ html.dark .mt-menu .mt-item.on {
}
#sidebar {
margin-top: 0;
margin-top: 40px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
@@ -1230,8 +1246,9 @@ html.dark .mt-menu .mt-item.on {
flex-shrink: 0;
padding-top: 20px;
position: sticky;
top: var(--header-height);
max-height: calc(100vh - var(--header-height));
height: fit-content;
top: calc(var(--header-height) + 40px);
max-height: calc(100vh - var(--header-height) - 40px);
overflow-y: auto;
}
@@ -1574,6 +1591,11 @@ html.dark .search-footer {
display: none;
}
#header-container {
width: 90%;
border-radius: 20px;
}
#navbar .tabs,
#theme-toggle,
#navbar .nav-top::after {

22
assets/styling/roots.css
View File

@@ -39,6 +39,23 @@ body {
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(ellipse at center,
transparent 35%,
rgba(255, 255, 255, 0.7) 100%);
}
html.dark body::before {
background: radial-gradient(ellipse at center,
transparent 35%,
rgba(0, 0, 0, 0.7) 100%);
}
html.dark body {
background: var(--bg-dark);
color: var(--text-dark);
@@ -46,12 +63,11 @@ html.dark body {
.video-bg {
position: fixed;
top: 0;
left: 0;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
z-index: -2;
}
a {

36
index.html
View File

@@ -17,7 +17,7 @@
<link rel="stylesheet" href="/assets/styling/highlight.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="ard" href="/ai-catalog.json" />
<link rel="ard" href="/.well-known/ard.json" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
@@ -31,14 +31,34 @@
</head>
<body>
<video class="video-bg" src="" autoplay muted loop></video>
<video class="video-bg" autoplay muted loop playsinline></video>
<script>
const video = document.querySelector('.video-bg');
function setVideoBackground() {
video.src = document.documentElement.classList.contains('dark')
? 'https://www.pexels.com/download/video/38811850//'
: 'https://www.pexels.com/download/video/38811850//';
video.load();
video.play().catch(() => { });
}
setVideoBackground();
new MutationObserver(setVideoBackground).observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
</script>
<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">✕</button>
</div>
<div id="header-container">
<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">✕</button>
</div>
<header id="navbar">
<div class="nav-top">
<a class="brand" href="/"><img src="/assets/images/logo.png" alt="Vyla" id="brand-logo" width="28"

58
start-here/who-are-we.md
View File

@@ -2,6 +2,8 @@
This is the main documentation page for Vyla. Here you can find information about the product, its features, and how to use it.
## Who Are We?
You may wonder who **we are**?
Vyla started from the web project which initially intended to create a clean environment where one could stream movies and TV shows free from all the unnecessary elements. Originally, it was developed mainly as a frontend which embedded other players. With time I got involved in the process of developing the infrastructure.
@@ -15,3 +17,59 @@ Among the main challenges associated with the development of Vyla was hosting. I
However, after receiving a DMCA strike and experiencing problems due to frequent reports in Cloudflare, I figured out that it wouldn’t be efficient to self host the streaming infrastructure. Therefore, the choice was made to focus more on SDK and the application rather than using a remote backend.
Thanks for Reading ❤️
## Credits and Acknowledgments
<p class="page-description">Credits and inspiration behind the Vyla API ecosystem.</p>
This page highlights the open-source projects and developers that heavily inspired the Vyla API, player ecosystem, and overall UI direction.
---
## Player & UI Inspiration
The overall player experience, streaming layout, and much of the UI direction for Vyla was heavily inspired by P-Stream.
- Repository: [https://github.com/p-stream](https://github.com/p-stream)
- Owner: [https://github.com/Pasithea0](https://github.com/Pasithea0)
Their work served as a major reference point for the design language and viewing experience used throughout Vyla.
---
## Stream API Inspiration
The architecture and implementation ideas behind the Vyla streaming API were heavily inspired by CinePro.
### Resources
- Organization: [https://github.com/cinepro-org/](https://github.com/cinepro-org/)
- Main Website: [https://cinepro.cc/](https://cinepro.cc/)
- Documentation: [https://docs.cinepro.cc/](https://docs.cinepro.cc/)
- UI Components: [https://ui.cinepro.cc/](https://ui.cinepro.cc/)
- Owner: [https://github.com/An0n-00](https://github.com/An0n-00)
---
## Source Implementation & Fixes
The owner of Movieslay helped fix and implement new sources across the Vyla API.
- Repository: [gitlab.com/gavingogaming/movieslay-emerald-temp](https://gitlab.com/gavingogaming/movieslay-emerald-temp)
- Discord: [https://discord.gg/rD75qxGBVG](https://discord.gg/rD75qxGBVG)
- Owner: [https://gitlab.com/gavingogaming](https://gitlab.com/gavingogaming)
---
## Open Source Appreciation
Vyla would not exist in its current form without the incredible open-source work created by these developers and communities.
Massive thanks to:
- Pasithea0
- An0n-00
- gavingogaming (Movieslay)
- The P-Stream contributors
- The CinePro contributors
- The Movieslay contributors