vibe styling pt. 2

This commit is contained in:
Yuri Tatishchev 2025-06-16 22:31:33 -07:00
parent 175d73f98d
commit 2b7c256f4a
Signed by: CaZzzer
SSH Key Fingerprint: SHA256:sqXB3fe0LMpfH+IeM/vlmxKdso52kssrIJBlwKXVe1U
4 changed files with 29 additions and 22 deletions

View File

@ -1,6 +1,8 @@
{
"server_ip": "0.0.0.0",
"server_port": 3000,
"video_path": "videos/Orb-22.mp4",
"server_port": 8080,
"video_path": "videos/Orb-21.mp4",
"subtitles_path": "videos/Orb-21.vtt",
"bg_path": "videos/bg-20.png",
"password": "password"
}

View File

@ -145,6 +145,7 @@ app.get("/video", function (req, res) {
"Accept-Ranges": "bytes",
"Content-Length": contentLength,
"Content-Type": "video/mp4",
"Cache-Control": "no-cache, no-store, must-revalidate",
};
// HTTP Status 206 for Partial Content
@ -163,7 +164,11 @@ app.get("/video", function (req, res) {
// subtitles track
app.get("/subtitles", function (req, res) {
console.log("hello)");
res.sendFile(__dirname + "/subs/Orb-22.vtt");
res.sendFile(fs.realpathSync(settings.subtitles_path));
});
app.get("/background", function (req, res) {
res.sendFile(fs.realpathSync(settings.bg_path))
});

View File

@ -8,15 +8,23 @@
}
body {
height: 100vh;
color: aliceblue;
min-height: 100vh;
margin: 0;
padding: 2rem;
background-color: gray;
background-color: #161616;
font-family: "Roboto", sans-serif;
}
body[data-background] {
background-image: url('/background');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: darken;
}
.container {
max-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
@ -25,13 +33,7 @@ body {
header {
text-align: center;
font-size: 2rem;
}
.video-wrapper {
/*position: relative;*/
/*width: 100%;*/
/*padding-bottom: 56.25%;*/
/* 16:9 aspect ratio for responsive video */
text-shadow: aliceblue 0 0 0.25rem;
}
video {

View File

@ -7,19 +7,17 @@
<script defer type="text/javascript" src="client.js"></script>
<title>Client</title>
</head>
<body>
<body data-background>
<div class="container">
<header>
<h1>Watch-Together</h1>
<h1>Welcome to the Orboverse</h1>
</header>
<div class="video-wrapper">
<video id="videoPlayer" controls controlsList="nodownload noplaybackrate">
<source src="/video" type="video/mp4" />
<video id="videoPlayer" controls controlsList="nodownload noplaybackrate">
<source src="/video" type="video/mp4" />
<!-- subtitle track-->
<track kind="subtitles" src="/subtitles" srclang="en" label="English" default>
<p>Your browser does not support the video tag.</p>
</video>
</div>
<track kind="subtitles" src="/subtitles" srclang="en" label="English" default>
<p>Your browser does not support the video tag.</p>
</video>
<div class="subtitle-controls">
<label for="subtitle-size">Subtitle Size: <span id="size-value">1.25em</span></label>
<input type="range" id="subtitle-size" min="0.8" max="2.5" step="0.05" value="1.25">