Skip to content

Commit

Permalink
Navigation buttons, new filter and minor fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@doihaveto
doihaveto authored Jun 29, 2024
1 parent 92d78d4 commit de566a5
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 14 deletions.
13 changes: 12 additions & 1 deletion code/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<span id="indicator-year-filter" title="Years" style="display: none;"></span>
<span id="indicator-community-rating-filter" title="Community rating" style="display: none;"></span>
<span id="indicator-critic-rating-filter" title="Critic rating" style="display: none;"></span>
<span id="indicator-runtime-minutes-filter" title="Runtime (minutes)" style="display: none;"></span>
</div>
<button type="button" id="settings-button"><span class="material-symbols-outlined" title="Settings">settings</span></button>
<button type="button" id="logout-button"><span class="material-symbols-outlined" title="Logout">logout</span></button>
Expand Down Expand Up @@ -51,15 +52,25 @@
</div>
</div>

<div class="lists-container"></div>
<div class="lists-container">
<div id="nav-buttons">
<div id="nav-up"></div>
<div id="nav-down"></div>
<div id="nav-left"></div>
<div id="nav-right"></div>
</div>
<div class="container"></div>
</div>

<div class="overlay" id="overlay">
<div class="settings" id="settings">
<h3>Settings</h3>
<p>Show navigation buttons <input type="checkbox" id="setting-show-nav"></p>
<p>Hide played movies <input type="checkbox" id="filter-hide-played"></p>
<p>Year: <input type="number" id="filter-year-min"> - <input type="number" id="filter-year-max"></p>
<p>Community ratings minimum: <input type="number" id="filter-community-ratings-min" min="0" max="9.9" step="0.1"></p>
<p>Critic ratings minimum: <input type="number" id="filter-critic-ratings-min" min="0" max="100" step="1"></p>
<p>Runtime maximum (minutes): <input type="number" id="filter-runtime-minutes" min="0" step="1"></p>
<p>Movies per row: <input type="number" id="setting-slider-limit" min="10" max="500" step="1"></p>
<p>Font size (%): <input type="number" id="setting-font-size" min="1" max="1000" step="1"></p>
<div class="settings-buttons">
Expand Down
48 changes: 37 additions & 11 deletions code/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@ let settings = {
filterYearMax: null,
filterCommunityRatingsMin: 0,
filterCriticRatingsMin: 0,
filterRuntimeMinutes: 0,
moviesSliderLimit: 60,
fontSize: 100,
showNav: false,
};
const genresOrder = [
'Drama',
Expand Down Expand Up @@ -42,7 +44,7 @@ const genresOrder = [
'Horror',
'Talk-Show',
];
const parentContainer = document.querySelector('.lists-container');
const parentContainer = document.querySelector('.lists-container .container');

// Retrieve settings from localStorage if available
if (localStorage.getItem('movieSettings')) {
Expand Down Expand Up @@ -141,6 +143,8 @@ function hideLoadingScreen() {
}

function refreshMovies() {
listsIdx = 0;
document.querySelectorAll('.thumbnails-group').forEach(x => x.remove());
getMovies().then(data => {
processMovies(data.items);
allMovies = data.items.reduce((obj, movie) => (obj[movie.Id] = movie, obj), {});
Expand Down Expand Up @@ -234,7 +238,8 @@ function filterList(movieIds) {
(settings.filterYearMin && movie.ProductionYear < settings.filterYearMin) ||
(settings.filterYearMax && movie.ProductionYear > settings.filterYearMax) ||
(settings.filterCommunityRatingsMin && (movie.CommunityRating || 0) < settings.filterCommunityRatingsMin) ||
(settings.filterCriticRatingsMin && (movie.CriticRating || 0) < settings.filterCriticRatingsMin)
(settings.filterCriticRatingsMin && (movie.CriticRating || 0) < settings.filterCriticRatingsMin) ||
(settings.filterRuntimeMinutes && (movie.durationSeconds || 0) / 60 > settings.filterRuntimeMinutes)
);
});
}
Expand Down Expand Up @@ -367,19 +372,23 @@ function populateMovies() {
} else if (listsIdx == Math.min(... displayedIds) || (listsIdx == lists.length - 2 && displayedIds.length == 2)) {
document.querySelector('.thumbnails-group:last-child').remove();
const currentGroup = document.querySelector('.thumbnails-group');
const visibleGroup = document.querySelectorAll('.thumbnails-group')[1] || currentGroup;
currentGroup.style.marginTop = `calc(-${visibleGroup.offsetHeight}px - ${getComputedStyle(visibleGroup).marginBottom})`;
currentGroup.style.display = '';
setTimeout(() => currentGroup.style.marginTop = '0', 20);
if (currentGroup) {
const visibleGroup = document.querySelectorAll('.thumbnails-group')[1] || currentGroup;
currentGroup.style.marginTop = `calc(-${visibleGroup.offsetHeight}px - ${getComputedStyle(visibleGroup).marginBottom})`;
currentGroup.style.display = '';
setTimeout(() => currentGroup.style.marginTop = '0', 20);
}
flag = true;
}
if (!flag || listsIdx == lists.length - 1) {
const collapseGroup = document.querySelector('.thumbnails-group');
collapseGroup.style.marginTop = `calc(-${collapseGroup.offsetHeight}px - ${getComputedStyle(collapseGroup).marginBottom})`;
document.querySelectorAll('.thumbnails-group').forEach(x => x.style.display = '');
setTimeout(() => {
collapseGroup.remove();
}, 100);
if (collapseGroup) {
collapseGroup.style.marginTop = `calc(-${collapseGroup.offsetHeight}px - ${getComputedStyle(collapseGroup).marginBottom})`;
document.querySelectorAll('.thumbnails-group').forEach(x => x.style.display = '');
setTimeout(() => {
collapseGroup.remove();
}, 100);
}
}
const swiperEl = [... document.querySelectorAll('.thumbnails-group')].find(x => x.dataset.idx == listsIdx).querySelector('.swiper');
activeSwiper = swiperEl.swiper;
Expand Down Expand Up @@ -483,6 +492,11 @@ document.addEventListener('keydown', (event) => {
}
});

document.getElementById('nav-up').addEventListener('click', handleUpAction);
document.getElementById('nav-down').addEventListener('click', handleDownAction);
document.getElementById('nav-left').addEventListener('click', handleLeftAction);
document.getElementById('nav-right').addEventListener('click', handleRightAction);

const settingsButton = document.getElementById('settings-button');
const overlay = document.getElementById('overlay');
const settingsSaveButton = document.querySelector('.settings-save');
Expand All @@ -505,11 +519,13 @@ function saveSettings() {
}

function initializeSettings() {
document.getElementById('setting-show-nav').checked = settings.showNav;
document.getElementById('filter-hide-played').checked = settings.filterHidePlayed;
document.getElementById('filter-year-min').value = settings.filterYearMin;
document.getElementById('filter-year-max').value = settings.filterYearMax;
document.getElementById('filter-community-ratings-min').value = settings.filterCommunityRatingsMin;
document.getElementById('filter-critic-ratings-min').value = settings.filterCriticRatingsMin;
document.getElementById('filter-runtime-minutes').value = settings.filterRuntimeMinutes;
document.getElementById('setting-slider-limit').value = settings.moviesSliderLimit;
document.getElementById('setting-font-size').value = settings.fontSize;
document.getElementById('indicator-unplayed-filter').style.display = settings.filterHidePlayed ? '' : 'none';
Expand All @@ -535,16 +551,26 @@ function initializeSettings() {
document.getElementById('indicator-community-rating-filter').textContent = settings.filterCommunityRatingsMin + '+';
document.getElementById('indicator-critic-rating-filter').style.display = settings.filterCriticRatingsMin ? '' : 'none';
document.getElementById('indicator-critic-rating-filter').textContent = settings.filterCriticRatingsMin + '+';
document.getElementById('indicator-runtime-minutes-filter').style.display = settings.filterRuntimeMinutes ? '' : 'none';
document.getElementById('indicator-runtime-minutes-filter').textContent = settings.filterRuntimeMinutes + 'm+';
const hasFilters = [... document.querySelectorAll('.filter-indicators > span')].find(x => x.style.display != 'none');
document.querySelector('.filter-indicators').style.display = hasFilters ? '' : 'none';
const navButtons = document.getElementById('nav-buttons');
if (settings.showNav) {
navButtons.style.display = 'block';
} else {
navButtons.style.display = 'none';
}
}

document.querySelector('.settings-save').addEventListener('click', function() {
settings.showNav = document.getElementById('setting-show-nav').checked;
settings.filterHidePlayed = document.getElementById('filter-hide-played').checked;
settings.filterYearMin = parseInt(document.getElementById('filter-year-min').value) || 1900;
settings.filterYearMax = parseInt(document.getElementById('filter-year-max').value);
settings.filterCommunityRatingsMin = parseFloat(document.getElementById('filter-community-ratings-min').value) || 0;
settings.filterCriticRatingsMin = parseInt(document.getElementById('filter-critic-ratings-min').value) || 0;
settings.filterRuntimeMinutes = parseInt(document.getElementById('filter-runtime-minutes').value) || 0;
settings.moviesSliderLimit = parseInt(document.getElementById('setting-slider-limit').value) || 60;
settings.fontSize = parseInt(document.getElementById('setting-font-size').value) || 100;
saveSettings();
Expand Down
81 changes: 79 additions & 2 deletions code/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,13 +267,16 @@ body.login-body {
}

.lists-container {
overflow-x: auto;
padding-top: 1vh;
position: absolute;
bottom: 0;
z-index: 50;
margin-bottom: -15%;
overflow-y: hidden;
overflow: visible;
}

.lists-container .container {
overflow: hidden;
}

.thumbnails-group {
Expand Down Expand Up @@ -460,6 +463,80 @@ body.login-body {
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4206057422969187) 15%, rgba(0,0,0,0) 28%);
}

#nav-buttons {
display: none;
position: absolute;
top: -60px;
right: 4vh;
width: 100px;
height: 100px;
}

#nav-buttons div {
width: 30px;
height: 30px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
cursor: pointer;
}

#nav-up {
top: 0;
left: 50%;
transform: translateX(-50%);
}

#nav-down {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

#nav-left {
left: 0;
top: 50%;
transform: translateY(-50%);
}

#nav-right {
right: 0;
top: 50%;
transform: translateY(-50%);
}

#nav-up::before,
#nav-down::before,
#nav-left::before,
#nav-right::before {
content: '';
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
}

#nav-up::before {
transform: rotate(-135deg);
}

#nav-down::before {
transform: rotate(45deg);
}

#nav-left::before {
transform: rotate(135deg);
}

#nav-right::before {
transform: rotate(-45deg);
}

@media screen and (width: 1920px) {
body .movie-info {
font-size: var(--jellix-movie-info-tv-font-size); /* Adjust the font size for tv */
Expand Down

0 comments on commit de566a5

Please sign in to comment.