vibe styling pt. 2
This commit is contained in:
parent
175d73f98d
commit
2b7c256f4a
@ -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"
|
||||
}
|
||||
|
@ -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))
|
||||
});
|
||||
|
||||
|
||||
|
22
src/main.css
22
src/main.css
@ -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 {
|
||||
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user