mirror of
https://gitlab.com/vyla-entertainment/documentation.git
synced 2026-11-09 20:17:20 -05:00
updated lighthouse/ tweaked UI
This commit is contained in:
22
.well-known/ard.json
Normal file
22
.well-known/ard.json
Normal 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"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
26
index.html
26
index.html
@@ -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>
|
||||
<div id="header-container">
|
||||
<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">
|
||||
<header id="navbar">
|
||||
<div class="nav-top">
|
||||
<a class="brand" href="/"><img src="/assets/images/logo.png" alt="Vyla" id="brand-logo" width="28"
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user