CodeDevMLH/SpotlightTrailer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ratio issue when using titel

Browse Source
This commit is contained in:
CodeDevMLH
2025-09-27 01:37:40 +02:00
parent 4323cdb367
commit 2c9e3defd8
1 changed files with 126 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
script.js
View File

@@ -58,6 +58,8 @@ let previousMovies = [];
let forwardMovies = [];
let monitorOutroInterval = null; // Global interval variable to monitor the outro segment of the trailer
let isMuted = startTrailerMuted; userInteracted = false;
const baseBackdropOverlapVW = 11.4;
let activeTrailerLayout = null;
// Get the current browser language
@@ -161,6 +163,7 @@ function isMobile() {
const truncateText = (text, maxLength) => text.length > maxLength ? text.substr(0, maxLength) + '...' : text;
const cleanup = () => {
clearTrailerLayout();
if (player && typeof player.destroy === 'function') {
player.destroy();
}
@@ -172,6 +175,123 @@ const cleanup = () => {
if (container) container.innerHTML = '';
};
const clearTrailerLayout = () => {
if (!activeTrailerLayout) {
return;
}
const { videoContainer, backdrop, plot, genres, loremIpsum, logo } = activeTrailerLayout;
if (videoContainer) {
videoContainer.style.removeProperty('width');
}
if (backdrop) {
backdrop.style.removeProperty('width');
backdrop.style.removeProperty('left');
}
if (plot) {
plot.style.removeProperty('left');
plot.style.removeProperty('max-width');
}
if (genres) {
genres.style.removeProperty('left');
}
if (loremIpsum) {
loremIpsum.style.removeProperty('left');
}
if (logo) {
logo.style.removeProperty('left');
}
activeTrailerLayout = null;
};
const applyTrailerLayout = (videoContainer) => {
if (!videoContainer) {
return;
}
if (activeTrailerLayout && activeTrailerLayout.videoContainer !== videoContainer) {
clearTrailerLayout();
}
const slideWrapper = videoContainer.closest('.slide-wrapper');
if (!slideWrapper) {
return;
}
const slideElement = slideWrapper.querySelector('.slide');
const containerRect = videoContainer.getBoundingClientRect();
const slideRect = slideElement ? slideElement.getBoundingClientRect() : null;
const effectiveHeight = containerRect.height || (slideRect ? slideRect.height : 0);
const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 1920;
if (!effectiveHeight || !viewportWidth) {
return;
}
const idealWidthVw = (effectiveHeight * (16 / 9)) / viewportWidth * 100;
const videoWidthVw = Math.max(idealWidthVw, 18);
const videoWidthVwCapped = Math.min(videoWidthVw, 34.4);
const videoWidthVwRounded = Math.min(Math.max(videoWidthVwCapped, 10), 60);
const backdrop = slideWrapper.querySelector('.backdrop');
const plot = slideWrapper.querySelector('.plot');
const genres = slideWrapper.querySelector('.genres');
const loremIpsum = slideWrapper.querySelector('.lorem-ipsum');
const logo = slideWrapper.querySelector('.logo');
videoContainer.style.width = `${videoWidthVwRounded.toFixed(3)}vw`;
if (backdrop) {
const backdropGap = Math.max(videoWidthVwRounded - baseBackdropOverlapVW, 0).toFixed(3);
backdrop.style.width = `calc(100% - ${backdropGap}vw)`;
backdrop.style.left = '0';
}
if (plot) {
const availableAreaVw = Math.max(100 - videoWidthVwRounded, 20);
const maxWidth = Math.max(availableAreaVw - 4, 30).toFixed(3);
plot.style.left = `calc(50% - ${(videoWidthVwRounded / 2).toFixed(3)}vw)`;
plot.style.maxWidth = `${maxWidth}vw`;
}
const anchorShift = `calc(50% - ${(videoWidthVwRounded / 2).toFixed(3)}vw)`;
if (genres) {
genres.style.left = anchorShift;
}
if (loremIpsum) {
loremIpsum.style.left = anchorShift;
}
if (logo) {
logo.style.left = anchorShift;
}
activeTrailerLayout = {
videoContainer,
backdrop,
plot,
genres,
loremIpsum,
logo
};
};
window.addEventListener('resize', () => {
if (activeTrailerLayout && document.contains(activeTrailerLayout.videoContainer)) {
applyTrailerLayout(activeTrailerLayout.videoContainer);
} else {
activeTrailerLayout = null;
}
});
const createSlideElement = (movie, hasVideo = false) => {
cleanup();
isMuted = startTrailerMuted;
@@ -400,33 +520,11 @@ const createSlideElement = (movie, hasVideo = false) => {
player.setVolume(unmutedVolume); // Set the volume, value between 0 and 100
console.log(`Playing trailer for '${movie.Name}'`);
},
'onStateChange': () => {
if (player.getPlayerState() === YT.PlayerState.PLAYING) {
// Only show when YT video is successfully playing
const backdrop = document.querySelector('.backdrop');
if (backdrop) {
backdrop.style.width = 'calc(100% - 23vw)';
backdrop.style.left = '0vw';
}
const plot = document.querySelector('.plot');
if (plot) {
plot.style.left = '33vw';
plot.style.maxWidth = '63vw';
}
const genres = document.querySelector('.genres');
if (genres) {
genres.style.left = 'calc(50% - 17vw)';
}
const loremIpsum = document.querySelector('.lorem-ipsum');
if (loremIpsum) loremIpsum.style.left = 'calc(50% - 17vw)';
const logo = document.querySelector('.logo');
if (logo) logo.style.left = 'calc(50% - 17vw)';
videoContainer.style.width = '34.4vw';
} else if (player.getPlayerState() === YT.PlayerState.ENDED) {
'onStateChange': (event) => {
if (event.data === YT.PlayerState.PLAYING) {
applyTrailerLayout(videoContainer);
} else if (event.data === YT.PlayerState.ENDED) {
clearTrailerLayout();
clearMonitorOutroInterval();
setTimeout(fetchRandomMovie, 20);
}
@@ -439,19 +537,7 @@ const createSlideElement = (movie, hasVideo = false) => {
player = null;
}
// Reset style when a YT error occurs
const backdrop = document.querySelector('.backdrop');
if (backdrop) backdrop.style.width = '100%';
const plot = document.querySelector('.plot');
if (plot) plot.style.width = '98%';
const loremIpsum = document.querySelector('.lorem-ipsum');
if (loremIpsum) loremIpsum.style.paddingRight = '0';
const logo = document.querySelector('.logo');
if (logo) logo.style.left = '50%';
clearTrailerLayout();
videoContainer.style.width = '0';
startSlideChangeTimer();