From 3916ba4bc3431aaa76fb82ee8b458d0b90a4a80b Mon Sep 17 00:00:00 2001 From: HxxxxxS <16c52527@opayq.com> Date: Mon, 6 May 2024 02:11:03 +0200 Subject: [PATCH] Initial commit --- index.html | 25 +++++++ index.js | 31 +++++++++ package.json | 17 +++++ script.js | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 12 ++++ videoFiles.js | 1 + 6 files changed, 264 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 package.json create mode 100644 script.js create mode 100644 styles.css create mode 100644 videoFiles.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..da03713 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + VFX2 + + + +
+
+
+ +
+
+ + + +
+ +
+
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..661a66d --- /dev/null +++ b/index.js @@ -0,0 +1,31 @@ +const express = require('express'); +const app = express(); +const path = require('path'); + +const port = 8000 + +const videoFiles = [ + { "src": "assets/Blender Physics Simulations-8TGNRJDZX_o_compressed.webm"}, + { "src": "assets/Death Grips - Birds-XX5wk-6Mn5s_compressed.webm"}, + { "src": "assets/Jon Hopkins - 'Open Eye Signal' (Official Music Video)-Q04ILDXe3QE_compressed.webm"}, + { "src": "assets/Best Scene From Hackers The Movie-IyWv6snuZLk_compressed.webm"}, + { "src": "assets/$UICIDEBOY$ - O PANA!-VSXg2swBmrY_compressed.webm"}, + { "src": "assets/3D Fractals (Render Test 1)-xQ6nJYanKCY_compressed.webm"}, + { "src": "assets/Beyond The Minds Eye-wKxH51vPtHk -4_compressed.webm"}, + { "src": "assets/A Scene From Troll 2-HyophYBP_w4_compressed.webm"} + // Add more video files as needed +]; + +app.use(express.static(path.join(__dirname))); + +app.get('/', (req, res) => { + res.sendFile(path.join(__dirname, 'index.html')); +}); + +app.get('/api/videos', (req, res) => { + res.json(videoFiles); +}); + +app.listen(port, () => { + console.log('Server started on port', port); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..39d583c --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "vfx2", + "version": "1.0.0", + "description": "", + "main": "script.js", + "scripts": { + "dev": "node index.js", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "express": "^4.18.2", + "http-server": "^14.1.1" + } +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..73f1f8b --- /dev/null +++ b/script.js @@ -0,0 +1,178 @@ +// Define a debug mode variable +let debugMode = true; + +const canvas = document.getElementById("videoCanvas"); +const ctx = canvas.getContext("2d"); + +const videos = [createVideoElement(), createVideoElement()]; +let videosLoaded = 0; +let aspectRatio = 1; + +window.addEventListener("DOMContentLoaded", () => { + let previousVideo + videos.forEach((video) => { + previousVideo = selectRandomVideo(previousVideo || video) + }); +}) + +videos.forEach((video) => { + video.addEventListener("loadedmetadata", handleVideoLoaded); + video.addEventListener("ended", handleVideoEnded); +}); + +function createVideoElement() { + const video = document.createElement("video"); + video.autoplay = true; + video.muted = true; + return video; +} + +function handleVideoLoaded() { + videosLoaded++; + if (videosLoaded === videos.length) { + updateCanvasSize(); + drawVideos(); + } +} + +function handleVideoEnded(event) { + const video = event.target; + selectRandomVideo(video); +} + +// Function to extract filename from full path and unescape it +function extractFilename(src) { + // Split the path by '/' + const parts = src.split('/'); + // Get the last part of the path (filename) + const filename = parts[parts.length - 1]; + // Unescape the filename and replace '%20' with whitespace + return decodeURIComponent(filename.replace(/\%20/g, ' ')); +} + +// Function to draw debug text on the canvas +function drawDebugText() { + // Set font style and color + ctx.font = "16px Arial"; + ctx.fillStyle = "white"; + + let corners = [[0,0],[1,1],[0,1],[1,0]]; + let padding = 20; + + videos.forEach((video,i) => { + //console.log("Drawing debug text for video",i,video); + + let corner = corners[i]; + let positionX = corner[0] === 0 ? padding : canvas.width - padding; + let positionY = corner[1] === 0 ? padding : canvas.height - padding; + + // Adjust position for bottom right corner to stay within canvas bounds + if (corner[0] === 1 && positionY + 40 > canvas.height) { + positionY = canvas.height - 40; + } + + // Set text alignment based on corner + ctx.textAlign = corner[0] === 0 ? "left" : "right"; + ctx.textBaseline = corner[1] === 0 ? "top" : "bottom"; + + // Draw debug text for the video + ctx.fillText(getFilename(video.src), positionX, positionY); + ctx.fillText("Dimensions: " + video.videoWidth + "x" + video.videoHeight, positionX, positionY + 20); + ctx.fillText(formatTime(video.currentTime) + "/" + formatTime(video.duration), positionX, positionY + 40); + // Add more debug information as needed + }); +} + + + +// Function to extract filename from full path +function getFilename(src) { + const parts = src.split('/'); + return decodeURIComponent(parts[parts.length - 1].replace(/\%20/g, ' ')); +} + + +// Helper function to format time in HH:MM:SS format +function formatTime(seconds) { + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + const remainingSeconds = Math.floor(seconds % 60); + return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`; +} + +// Modify the drawVideos function to include debug text drawing +function drawVideos() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + + // Resize the canvas to accommodate both videos side by side + canvas.width = Math.max(videos[0].videoWidth, videos[1].videoWidth); + canvas.height = Math.max(videos[0].videoHeight, videos[1].videoHeight); + + // Calculate positions for each video + const video1X = (canvas.width - videos[0].videoWidth) / 2; + const video1Y = (canvas.height - videos[0].videoHeight) / 2; + const video2X = (canvas.width - videos[1].videoWidth) / 2; + const video2Y = (canvas.height - videos[1].videoHeight) / 2; + + // Draw video 1 + ctx.drawImage(videos[0], video1X, video1Y, videos[0].videoWidth, videos[0].videoHeight); + + // Set composite operation to overlay + ctx.globalCompositeOperation = "overlay"; + + // Draw video 2 + ctx.drawImage(videos[1], video2X, video2Y, videos[1].videoWidth, videos[1].videoHeight); + + // Reset composite operation + ctx.globalCompositeOperation = "source-over"; + + // Draw debug text if debug mode is enabled + if (debugMode) { + drawDebugText(); + } + // Request next frame + requestAnimationFrame(drawVideos); +} + + +function updateCanvasSize() { + aspectRatio = Math.max( + videos[0].videoWidth / videos[0].videoHeight, + videos[1].videoWidth / videos[1].videoHeight + ); + + canvas.width = window.innerWidth; + canvas.height = window.innerWidth / aspectRatio; +} + +window.addEventListener("resize", updateCanvasSize); + +updateCanvasSize() + +function selectRandomVideo(videoElement) { + console.log("selectRandomVideo",videoElement) + fetch("/api/videos") + .then((response) => response.json()) + .then((videoFiles) => { + const otherVideo = videos.find((video) => video !== videoElement); + + let randomVideo; + do { + const randomIndex = Math.floor(Math.random() * videoFiles.length); + randomVideo = videoFiles[randomIndex]; + } while (randomVideo === otherVideo); + + videoElement.src = randomVideo.src; + videoElement.play(); + return videoElement + }); +} + +document.addEventListener('keydown', function(event) { + // Check if the pressed key is the one you want to bind + if (event.key === 'Enter') { // Change 'Enter' to the desired key + debugMode = !debugMode + console.log("debugMode:",debugMode) + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..03474bb --- /dev/null +++ b/styles.css @@ -0,0 +1,12 @@ +body, html { + background: black; + height: 100%; + margin: 0; + padding: 0; +} + +#videoCanvas { + position: absolute; + width: 100%; + height: 100%; +} diff --git a/videoFiles.js b/videoFiles.js new file mode 100644 index 0000000..079b579 --- /dev/null +++ b/videoFiles.js @@ -0,0 +1 @@ +]