<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif+Caption:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif+Caption:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200..1000&family=Nunito+Sans:opsz,wdth,wght@6..12,75..125,200..1000&family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif+Caption:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<script>
function updateCodeElements() {
const codeElements = document.querySelectorAll('.code');
codeElements.forEach(el => {
el.classList.add('material-symbols-outlined');
el.classList.add('icon-color');
el.textContent = el.textContent.trim();
console.log("Updated element:", el, "with icon:", el.textContent);
});
}
function updateImageSource() {
const targetImage = document.querySelector('#block-0fc849fdab3f475e949553a035ed89ea img');
const imageSrc = "https://lrcwebdata.s3.us-east-2.amazonaws.com/Home/final-ezgif.com-crop.gif";
if (targetImage) {
targetImage.src = imageSrc;
if (document.documentElement.classList.contains('theme-dark')) {
targetImage.style.filter = 'invert(1) contrast(1) brightness(0.8) saturate(2.4) hue-rotate(-5deg)';
console.log('Theme is dark. Image filter set to: invert(1) contrast(1) brightness(0.8) saturate(2.4) hue-rotate(-5deg)');
} else if (document.documentElement.classList.contains('theme-light')) {
targetImage.style.filter = 'none';
console.log('Theme is light. Image filter set to: none');
}
if (targetImage.src === imageSrc) {
console.log('Image source successfully set.');
} else {
console.log('Failed to set image source.');
}
} else {
console.log('Target image not found.');
}
}
function onThemeChange() {
setTimeout(updateImageSource, 0);
}
let observer; // Define the observer globally to manage its lifecycle
let currentlyPlaying = [];
function updateVideoSettings(maxPlayingVideos = 3) {
const videos = document.querySelectorAll('.notion-video video');
let firstVideoPlayed = false;
// If there's an existing observer, disconnect it to prevent duplication
if (observer) {
observer.disconnect();
}
// Create a new Intersection Observer
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const video = entry.target;
const videoIndex = video.dataset.index;
if (entry.isIntersecting) {
if (video.readyState >= 3) {
playVideo(video, videoIndex);
} else {
video.addEventListener('canplay', () => {
playVideo(video, videoIndex);
}, { once: true });
}
} else {
if (!video.paused) {
pauseVideo(video, videoIndex);
}
}
});
}, { threshold: 0.1 });
videos.forEach(function (video, index) {
video.dataset.index = index + 1;
video.muted = true;
video.removeAttribute('controls');
video.loop = true;
video.style.borderRadius = '20px';
video.setAttribute('preload', 'auto');
video.setAttribute('playsinline', 'true');
video.setAttribute('webkit-playsinline', 'true');
if (index === 0 && !firstVideoPlayed) {
video.load();
video.addEventListener('canplay', () => {
playVideo(video, index + 1);
firstVideoPlayed = true;
}, { once: true });
} else {
observer.observe(video); // Start observing the video
video.load();
}
// Manage click event listener to toggle play/pause
manageEventListener(video, index);
});
}
// Function to manage click event listeners on videos
function manageEventListener(video, index) {
const listener = () => {
toggleVideoPlayPause(video, index + 1);
};
// Remove any existing click listener to prevent duplication
video.removeEventListener('click', listener);
// Add the click event listener
video.addEventListener('click', listener);
}
// Play video logic
function playVideo(video, videoIndex) {
if (currentlyPlaying.length < 3 && !currentlyPlaying.includes(video)) { // Limit the number of videos playing simultaneously
video.play().then(() => {
currentlyPlaying.push(video);
}).catch(err => {
console.error(`Error playing video ${videoIndex} (src: ${video.src}): `, err);
});
}
}
// Pause video logic
function pauseVideo(video, videoIndex) {
if (!video.paused) {
video.pause();
const index = currentlyPlaying.indexOf(video);
if (index > -1) {
currentlyPlaying.splice(index, 1); // Remove video from currently playing list
}
}
}
// Toggle play/pause for manual control
function toggleVideoPlayPause(video, videoIndex) {
if (video.paused) {
playVideo(video, videoIndex);
} else {
pauseVideo(video, videoIndex);
}
}
// Function to clean up event listeners and observers when navigating away or rerunning the script
function cleanupEventListeners(videos) {
videos.forEach(video => {
video.removeEventListener('click', toggleVideoPlayPause);
});
}
// Function to handle route changes
function handleRouteChange() {
updateCodeElements(); // Assuming this updates code elements
updateImageSource(); // Assuming this updates image sources
updateVideoSettings(); // Updating video settings and listeners
const themeToggleButton = document.querySelector('.super-navbar__theme-toggle');
if (themeToggleButton) {
themeToggleButton.removeEventListener('click', onThemeChange); // Remove existing listener if any
themeToggleButton.addEventListener('click', onThemeChange);
}
}
// Set up route change handler and initialize observers/listeners
function setupRouteChangeHandler() {
if (window.events && window.events.on) {
window.events.on('routeChangeComplete', handleRouteChange);
}
}
// Ensure the code runs after the page has loaded
if (document.readyState === 'complete') {
handleRouteChange();
setupRouteChangeHandler();
} else {
window.onload = () => {
handleRouteChange();
setupRouteChangeHandler();
};
}
</script>