Added overlay video

1 year ago · 461d0acb71
parent f111f3b3fc
commit 461d0acb71
3 changed files with 51 additions and 10 deletions
--- a/index.js
+++ b/index.js
@ -74,7 +74,8 @@ if (fs.existsSync('/selectedvideo')) {
 }

 function startVideo(path) {
-	process = require('child_process').spawn('ffplay', ['-fs', '-loop', '2147483647', '-hide_banner', '-loglevel', 'error', path]);
+
+	const newProcess = require('child_process').spawn('ffplay', ['-fs', '-loop', '2147483647', '-hide_banner', '-loglevel', 'error', path]);

 	// process.stdout.on('data', (data) => {
 	// 	console.log(`stdout: ${data}`);
@ -84,11 +85,23 @@ function startVideo(path) {
 	// 	console.error(`stderr: ${data}`);
 	// });

-	process.on("exit", () => {
-		if (!mayRestart) {
-			startVideo(path);
+	// newProcess.on("exit", (code) => {
+	// 	if (!mayRestart && code !== 0) {
+	// 		startVideo(path);
+	// 	}
+	// });
+
+	setTimeout(() => {
+		if (process) {
+			process.kill();
 		}
-	});
+		// newProcess.on("exit", (code) => {
+		// 	if (!mayRestart && code !== 0 && process === newProcess) {
+		// 		startVideo(path);
+		// 	}
+		// });
+		process = newProcess;
+	}, 5000);
 }

 fs.mkdirSync('/video', { recursive: true });
@ -116,6 +129,18 @@ app.post('/play', (req, res) => {
 	res.json({ status: 'ok' });
 });

+app.post("/select", (req, res) => {
+	let video = req.query.video;
+	fs.writeFileSync('/overlayvideo', video);
+	res.json({ status: 'ok' });
+});
+
+app.post("/playoverlay", (req, res) => {
+	let video = fs.readFileSync('/overlayvideo');
+	require('child_process').spawn('ffplay', ['-fs', '-autoexit', '-hide_banner', '-loglevel', 'error', video]);
+	res.json({ status: 'ok' });
+});
+
 app.post('/upload', function (req, res) {

 	if (!req.files || Object.keys(req.files).length === 0) {
--- a/public/index.html
+++ b/public/index.html
@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>PI Video Player</title>
  <style>
-    #videos {
+    /* #videos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
@ -15,7 +15,7 @@
    }
    #videos button {
      margin: 2px;
-    }
+    } */
  </style>
 </head>
 <body>
@ -28,7 +28,11 @@
        <input type="file" name="file" />
        <input type='submit' value='Upload!' />
    </form>    
-	<div id="videos"></div>
+    <h2>Background video</h2>
+    <div id="videos"></div>
+    <h2>Overlay video</h2>
+    <div id="overlayvideos"></div>
+    <button id="play" onclick="fetch(`/playoverlay`, { method: 'POST' });">Play Overlay now</button>
 	<script src="/main.js"></script>
 </body>
-</html>
+</html>
--- a/public/main.js
+++ b/public/main.js
@ -2,8 +2,12 @@ async function main() {
 	const response = await fetch('/videos');
 	const videos = await response.json();
 	const videoDiv = document.getElementById('videos');
+	const overlayVideoDiv = document.getElementById('overlayvideos');
 	
 	videoDiv.innerHTML = '';
+	overlayVideoDiv.innerHTML = '';
+
+	console.log(videoDiv);

 	for (const video of videos) {
 		const button = document.createElement('button');
@ -11,8 +15,16 @@ async function main() {
 		button.addEventListener('click', () => {
 			fetch(`/play?video=${video.path}`, { method: 'POST' });
 		});
+		console.log(button)
 		videoDiv.appendChild(button);
+
+		const overlayButton = document.createElement('button');
+		overlayButton.textContent = video.name;
+		overlayButton.addEventListener('click', () => {
+			fetch(`/select?video=${video.path}`, { method: 'POST' });
+		});
+		overlayVideoDiv.appendChild(overlayButton);
 	}
 }

-main();
+main();