jasonsewall/video-gallery.html

## video-gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Gallery</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: flex-start;
            background-color: #f0f0f0;
	    z-index: 1;
        }

	#thumbnails-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: 90vw; /* Adjust as needed */
            margin: 0 auto;
        }

        .thumbnail {
            position: relative;
            margin: 10px;
            cursor: pointer;
        }

	.thumbnail video {
	    width: 20vw;
            height: auto;
	}

	.thumbnail p {
	    text-align: center;
	}

        .overlay {
            opacity: 0;
            pointer-events: none; /* Disable pointer events when overlay is not visible */
            position: fixed;
            top: 0;
            left: 0;
	    display: flex;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: opacity 0.5s ease;
        }

        .overlay.active {
            opacity: 1;
	    z-index: 10;
            pointer-events: auto; /* Enable pointer events when overlay is active */
        }

        .video-player {
            width: 90%;
	    justify-content: center;
            align-items: center;
            max-width: 90vw;
            max-height: 90vh;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            color: #fff;
            font-size: 24px;
        }
    </style>
</head>
<body>

<!-- Video Overlay -->
<div class="overlay" id="videoOverlay">
    <div class="video-player">
        <span class="close-button" onclick="closeOverlay()">&times;</span>
        <video id="videoPlayer" width="100%" height="auto" controls>
            Your browser does not support the video tag.
        </video>
    </div>
</div>

<!-- Thumbnails Container -->
<div id="thumbnails-container"></div>

<!-- JavaScript for Dynamic Thumbnails and Periodic Update -->
<script>
    function fetchVideoList() {
        return [
            { url: 'file://M:/sarah-photos/DCIM/Camera/20211111_194723.mp4', caption: "Video 1"},
            { url: 'file://M:/sarah-photos/DCIM/Camera/20210808_131637.mp4', caption: "Video 2"},
            // ...
        ];
    }

    function updateThumbnails() {
        var videoList = fetchVideoList();
        var thumbnailsContainer = document.getElementById('thumbnails-container');

        // Clear existing thumbnails
        thumbnailsContainer.innerHTML = '';

        // Dynamically generate thumbnails
        videoList.forEach(function (video) {
            var thumbnailDiv = document.createElement('div');
            thumbnailDiv.className = 'thumbnail';

            var videoElement = document.createElement('video');
            videoElement.preload = 'metadata';
            videoElement.innerHTML = 'Your browser does not support the video tag.';

            var sourceElement = document.createElement('source');
            sourceElement.src = video.url;
            sourceElement.type = 'video/mp4';

            videoElement.appendChild(sourceElement);
	          thumbnailDiv.appendChild(videoElement);

            var captionElement = document.createElement('p');
	          captionElement.innerHTML = video.caption;

	          thumbnailDiv.appendChild(captionElement);

            thumbnailDiv.onclick = function () { openOverlay(video.url); };

            thumbnailsContainer.appendChild(thumbnailDiv);
        });
    }

    function openOverlay(videoSrc) {
        var videoPlayer = document.getElementById('videoPlayer');
        videoPlayer.src = videoSrc;
        videoPlayer.load(); // Load the new video source
        document.getElementById('videoOverlay').classList.add('active');
        videoPlayer.play(); // Play the video
    }

    function closeOverlay() {
        var videoOverlay = document.getElementById('videoOverlay');
        var videoPlayer = document.getElementById('videoPlayer');

        videoOverlay.classList.remove('active');
        videoPlayer.pause();
        videoPlayer.currentTime = 0; // Reset video playback position
    }

    // Initial update of thumbnails
    updateThumbnails();
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Video Gallery</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
	background-color: #f0f0f0;
	z-index: 1;
	}

	#thumbnails-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 90vw; /* Adjust as needed */
	margin: 0 auto;
	}

	.thumbnail {
	position: relative;
	margin: 10px;
	cursor: pointer;
	}

	.thumbnail video {
	width: 20vw;
	height: auto;
	}

	.thumbnail p {
	text-align: center;
	}

	.overlay {
	opacity: 0;
	pointer-events: none; /* Disable pointer events when overlay is not visible */
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.8);
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: opacity 0.5s ease;
	}

	.overlay.active {
	opacity: 1;
	z-index: 10;
	pointer-events: auto; /* Enable pointer events when overlay is active */
	}

	.video-player {
	width: 90%;
	justify-content: center;
	align-items: center;
	max-width: 90vw;
	max-height: 90vh;
	}

	.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	color: #fff;
	font-size: 24px;
	}
	</style>
	</head>
	<body>

	<!-- Video Overlay -->
	<div class="overlay" id="videoOverlay">
	<div class="video-player">
	<span class="close-button" onclick="closeOverlay()">×</span>
	<video id="videoPlayer" width="100%" height="auto" controls>
	Your browser does not support the video tag.
	</video>
	</div>
	</div>

	<!-- Thumbnails Container -->
	<div id="thumbnails-container"></div>

	<!-- JavaScript for Dynamic Thumbnails and Periodic Update -->
	<script>
	function fetchVideoList() {
	return [
	{ url: 'file://M:/sarah-photos/DCIM/Camera/20211111_194723.mp4', caption: "Video 1"},
	{ url: 'file://M:/sarah-photos/DCIM/Camera/20210808_131637.mp4', caption: "Video 2"},
	// ...
	];
	}

	function updateThumbnails() {
	var videoList = fetchVideoList();
	var thumbnailsContainer = document.getElementById('thumbnails-container');

	// Clear existing thumbnails
	thumbnailsContainer.innerHTML = '';

	// Dynamically generate thumbnails
	videoList.forEach(function (video) {
	var thumbnailDiv = document.createElement('div');
	thumbnailDiv.className = 'thumbnail';

	var videoElement = document.createElement('video');
	videoElement.preload = 'metadata';
	videoElement.innerHTML = 'Your browser does not support the video tag.';

	var sourceElement = document.createElement('source');
	sourceElement.src = video.url;
	sourceElement.type = 'video/mp4';

	videoElement.appendChild(sourceElement);
	thumbnailDiv.appendChild(videoElement);

	var captionElement = document.createElement('p');
	captionElement.innerHTML = video.caption;

	thumbnailDiv.appendChild(captionElement);

	thumbnailDiv.onclick = function () { openOverlay(video.url); };

	thumbnailsContainer.appendChild(thumbnailDiv);
	});
	}

	function openOverlay(videoSrc) {
	var videoPlayer = document.getElementById('videoPlayer');
	videoPlayer.src = videoSrc;
	videoPlayer.load(); // Load the new video source
	document.getElementById('videoOverlay').classList.add('active');
	videoPlayer.play(); // Play the video
	}

	function closeOverlay() {
	var videoOverlay = document.getElementById('videoOverlay');
	var videoPlayer = document.getElementById('videoPlayer');

	videoOverlay.classList.remove('active');
	videoPlayer.pause();
	videoPlayer.currentTime = 0; // Reset video playback position
	}

	// Initial update of thumbnails
	updateThumbnails();
	</script>

	</body>
	</html>