brandon/NotPlexApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update design and color theming, still WIP

Browse Source
This commit is contained in:
Brandon Brunson
2025-05-30 15:38:13 -07:00
parent f8f04c19cf
commit 429a575d98
2 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@@ -3,50 +3,50 @@
<head>
<meta charset="UTF-8">
<title>NotPlexApp</title>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script>
<!-- <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script> -->
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
background-color: rgb(46, 46, 46); /* Dark grey background */
color: #eee; /* Light text for contrast */
}
/* Tabs style */
#tabs {
display: flex;
background: #333;
background: #444; /* Darker grey for tab background */
}
#tabs button {
flex: 1;
padding: 10px;
color: #fff;
background: #444;
background: #555; /* Dark grey button color */
border: none;
cursor: pointer;
font-size: 16px;
}
#tabs button.active {
background: #222;
background: #333; /* Even darker for active state */
}
/* Content lists (item grids inside each section) */
.content-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
overflow-x: visible; /* ensure no horizontal scrolling */
/* Optional: force items to wrap into multiple rows */
gap: 0px;
overflow-x: visible;
grid-auto-rows: auto;
}
/* Section‐container: stack each <section> as a row */
.section-list {
display: flex;
flex-direction: column;
gap: 40px; /* space between sections */
gap: 40px;
padding: 20px;
box-sizing: border-box;
height: calc(100% - 48px); /* adjust for tab height */
height: calc(100% - 48px);
overflow-y: auto;
background-color: #f1f1f1;
}
.movie-item {
cursor: pointer;
@@ -54,14 +54,15 @@
flex-direction: column;
align-items: center;
text-align: center;
background: #fff;
padding: 10px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
background: transparent; /* removed white background */
padding: 0; /* removed padding */
box-shadow: none; /* removed box-shadow */
}
.movie-item img {
width: 200px;
width: 180px; /* reduced width */
height: auto;
margin-bottom: 10px;
border-radius: 5px; /* added rounded corners */
}
/* Overlay for details/stream */
#overlay {

28
renderer.js
View File

@@ -383,6 +383,8 @@ window.addEventListener('DOMContentLoaded', () => {
});
sectionAlpha.appendChild(gridAlpha);
moviesListEl.appendChild(sectionAlpha);
// Update background gradient based on the movies list
updateAppBackground();
});
}
@@ -550,6 +552,8 @@ window.addEventListener('DOMContentLoaded', () => {
});
sectionAlpha.appendChild(gridAlpha);
showsListEl.appendChild(sectionAlpha);
// Update background gradient based on TV shows count
updateAppBackground();
}
// Updated function to stream the episode without calling getEpisodeDetails
@@ -846,4 +850,28 @@ window.addEventListener('DOMContentLoaded', () => {
const mediaId = videoElement.dataset.mediaId; // Retrieve mediaId from the video element
connectToSyncSession(sessionId, mediaId, "movie", videoElement);
});
// Updated: Use multiple radial gradients so that three corners are fixed grey and the top right is variable red.
function updateAppBackground() {
// Count movie and TV show items.
const movieCount = document.querySelectorAll('#movies-list .movie-item').length;
const showCount = document.querySelectorAll('#shows-list .movie-item').length;
const totalItems = movieCount + showCount;
// Calculate red and purple saturation values (spread out scale)
const redSaturation = Math.min(10 + totalItems / 80, 100);
// const purpleSaturation = Math.min(10 + totalItems / 1000, 100);
// console.log(redSaturation);
// i want it to have different stages. like 1-1000 items red gradient top right. 1000-2500 blue gradient bottom
// left. 2500+ green gradient bottom right.
const gradient =
'radial-gradient(circle farthest-side at 0% 100%, rgb(28, 28, 28) 0%, rgba(28, 28, 28, 0) 100%),' +
'radial-gradient(circle farthest-side at 100% 100%, rgb(38, 38, 38) 0%, rgba(38, 38, 38, 0) 100%),' +
`radial-gradient(circle farthest-side at 100% 0%, hsl(0, ${redSaturation}%, 30%) 0%, rgba(255, 0, 0, 0) 100%),` +
'radial-gradient(circle farthest-side at 0% 0%, rgb(51, 51, 51) 0%, rgba(51, 51, 51, 0) 100%)';
document.body.style.background = gradient;
}
});