add first slider videos

project-page/.gitignore

@@ -0,0 +1 @@
+test/*

project-page/static/css/style.css

@@ -0,0 +1,6 @@
+/* 
+.video-container {
+  width: 512px;
+  height: 512px;
+} */
+

project-page/static/js/compare.js

@@ -0,0 +1,63 @@
+var videoContainerList = document.getElementsByClassName("video-compare-container")
+var videoClipperList = document.getElementsByClassName("video-clipper")
+var video1ready = new Array(videoContainerList.length).fill(false);
+var video2ready = new Array(videoContainerList.length).fill(false);
+
+for (var i = 0; i < videoContainerList.length; i++) {
+    var videoContainer = videoContainerList[i]
+    var videoClipper = videoClipperList[i]
+
+    videoContainer.addEventListener("mousemove", trackLocation(videoContainer, videoClipper));
+    videoContainer.addEventListener("touchstart", trackLocation(videoContainer, videoClipper));
+    videoContainer.addEventListener("touchmove", trackLocation(videoContainer, videoClipper));
+
+    var video1 = videoClipper.getElementsByTagName("video")[0]
+    var video2 = videoContainer.getElementsByTagName("video")[0]
+
+    // Check canplay event to know when both videos are ready to play and start them.
+
+    video1.addEventListener('canplay', canplay1(video1, video2, i));
+    video2.addEventListener('canplay', canplay2(video1, video2, i));
+    // Stopped to load next frame, make the other video wait too.
+    video1.addEventListener('waiting', () => { video2.pause(); });
+    video2.addEventListener('waiting', () => { video1.pause(); });
+    // Resumed from buffering, continue playing the other video too.
+    video1.addEventListener('playing', () => { video2.play(); });
+    video2.addEventListener('playing', () => { video1.play(); });
+}
+
+function tryStart(video1, video2, video1ready, video2ready) {
+    if (video1ready && video2ready) {
+        video1.play();
+        video2.play();
+    }
+}
+
+function canplay1(video1, video2, i) {
+    return function () {
+        video1ready[i] = true;
+        tryStart(video1, video2, video1ready[i], video2ready[i]);
+    }
+}
+
+function canplay2(video1, video2, i) {
+    return function () {
+        video2ready[i] = true;
+        tryStart(video1, video2, video1ready[i], video2ready[i]);
+    }
+}
+
+
+function trackLocation(videoContainer, videoClipper) {
+    return function (e) {
+        var clippedVideo = videoClipper.getElementsByTagName("video")[0]
+        var rect = videoContainer.getBoundingClientRect()
+        var position = ((e.pageX - rect.left) / videoContainer.offsetWidth) * 100
+
+        if (position <= 100) {
+            videoClipper.style.width = position + "%";
+            clippedVideo.style.width = ((100 / position) * 100) + "%";
+            clippedVideo.style.zIndex = 3;
+        }
+    }
+}

project-page/static/js/vidsplit.js

@@ -0,0 +1,73 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const video = document.getElementsByClassName('sourceVideo')[0];
+    const canvas = document.getElementsByClassName('videoCanvas')[0];
+    const ctx = canvas.getContext('2d');
+
+
+    let splitX = canvas.width; // Initial split position
+
+    video.addEventListener('loadedmetadata', () => {
+        // Adjust canvas size based on the video frame, halving the height for display
+        canvas.width = video.videoWidth / 2;
+        canvas.height = video.videoHeight;
+    });
+
+    video.play();
+
+    function draw() {
+        if (video.paused || video.ended) return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the left part of the top video
+        ctx.drawImage(
+            video,
+
+            0, // sx
+            0, // sy
+            splitX, // sWidth
+            video.videoHeight, // sHeight
+
+            0, // dx
+            0, // dy
+            splitX, //dWidth
+            video.videoHeight // dHeight
+        );
+
+        // Draw the right part of the bottom video
+        ctx.drawImage(
+            video,
+
+            video.videoWidth / 2 + splitX,
+            0,
+            video.videoWidth / 2 - splitX,
+            video.videoHeight,
+
+            splitX,
+            0,
+            video.videoWidth / 2 - splitX,
+            canvas.height
+        );
+
+
+        // Draw a vertical line at the split
+        ctx.beginPath(); // Begin a new path for the line
+        ctx.moveTo(splitX, 0); // Move to the start point of the line at the top of the canvas
+        ctx.lineTo(splitX, canvas.height); // Draw a line to the bottom of the canvas
+        ctx.strokeStyle = 'white'; // Set the color of the line
+        ctx.lineWidth = 1; // Set the line width
+        ctx.stroke(); // Render the line
+
+        requestAnimationFrame(draw);
+    }
+
+    video.onplay = () => {
+        draw();
+    };
+
+    canvas.addEventListener('mousemove', function (e) {
+        const rect = canvas.getBoundingClientRect();
+        splitX = e.clientX - rect.left;
+        splitX = Math.max(0, Math.min(splitX, canvas.width));
+        draw();
+    });
+});

project-page/static/js/vidsplit_multi.js

@@ -0,0 +1,78 @@
+let glob_splitX = []
+
+document.addEventListener('DOMContentLoaded', function () {
+    const videos = document.getElementsByClassName('sourceVideo');
+    const canvases = document.getElementsByClassName('videoCanvas');
+    for (let i = 0; i < videos.length; i++) {
+        let cur_video = videos[i];
+        let cur_canvas = canvases[i];
+        let cur_ctx = cur_canvas.getContext('2d');
+        glob_splitX.push(50);
+
+        cur_video.addEventListener('loadedmetadata', load_event(cur_canvas, cur_video));
+        cur_video.play();
+        cur_video.addEventListener('playing', play_event(cur_video, cur_canvas, cur_ctx, i));
+        cur_canvas.addEventListener('mousemove', move_event(cur_canvas, i))
+    }
+});
+
+function load_event(canvas, video){
+    return () => {
+        canvas.width = video.videoWidth / 2;
+        canvas.height = video.videoHeight;
+    }
+}
+
+function play_event(video, canvas, ctx, index) {
+    return () => {
+        setInterval(() => {
+            draw(video, canvas, ctx, glob_splitX[index]);
+        }, 5);
+    }
+}
+
+function move_event(canvas, index){
+    return (e) => {
+        const rect = canvas.getBoundingClientRect();
+        glob_splitX[index] = e.clientX - rect.left;
+        glob_splitX[index] = Math.max(0, Math.min(glob_splitX[index], canvas.width));
+    }
+}
+
+function draw(video, canvas, ctx, splitX) {
+    if (video.paused || video.ended) return;
+    if (ctx === undefined) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(
+        video,
+        0, // sx
+        0, // sy
+        splitX, // sWidth
+        video.videoHeight, // sHeight
+        0, // dx
+        0, // dy
+        splitX, //dWidth
+        video.videoHeight // dHeight
+    );
+
+    ctx.drawImage(
+        video,
+        video.videoWidth / 2 + splitX,
+        0,
+        video.videoWidth / 2 - splitX,
+        video.videoHeight,
+        splitX,
+        0,
+        video.videoWidth / 2 - splitX,
+        canvas.height
+    );
+
+    // Draw a vertical line at the split
+    ctx.beginPath();
+    ctx.moveTo(splitX, 0);
+    ctx.lineTo(splitX, canvas.height);
+    ctx.strokeStyle = 'white';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    requestAnimationFrame(draw);
+}