Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue with dark mode flickering when changing pages #287

Merged
merged 1 commit into from
Feb 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 83 additions & 65 deletions public/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,89 @@ if ('serviceWorker' in navigator) {

let ratingEditMode = false

document.addEventListener('DOMContentLoaded', function () {
const theme = document.cookie.split('; ').find((row) => row.startsWith('theme='))?.split('=')[1] ?? 'light';
document.getElementById('darkModeInput').checked = theme !== 'light'

const logPlayModalSearchInput = document.getElementById('logPlayModalSearchInput');
if (logPlayModalSearchInput != null) {
logPlayModalSearchInput.addEventListener('change', updateLogPlayModalButtonState);
document.getElementById('logPlayModalSearchInput').addEventListener('input', updateLogPlayModalButtonState);
document.getElementById('logPlayModalSearchInput').addEventListener('keypress', loadLogModalSearchResultsOnEnterPress);

new Datepicker(document.getElementById('logPlayModalWatchDateInput'), {
format: document.getElementById('dateFormatJavascript').value,
title: 'Watch date',
})

document.getElementById('logPlayModal').addEventListener('show.bs.modal', function () {
document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate()
})

document.getElementById('logPlayModal').addEventListener('hidden.bs.modal', function () {
document.getElementById('logPlayModalSearchInput').value = ''
resetLogModalLogInputs()
resetLogModalSearchResults()
backToLogModalSearchResults()
})
}
});

function setTheme(theme, force = false) {
const htmlTag = document.getElementById('html');

if (force === false && htmlTag.dataset.bsTheme === theme) {
return
}

let cookieDate = new Date;
cookieDate.setFullYear(cookieDate.getFullYear() + 1);
document.cookie = 'theme=' + theme + ';path=/;expires=' + cookieDate.toUTCString() + ';'

htmlTag.dataset.bsTheme = theme

if (theme === 'light') {
updateHtmlThemeColors('light', 'dark')

return;
}

updateHtmlThemeColors('dark', 'light')
}

function updateHtmlThemeColors(mainColor, secondaryColor) {
const logSpecificMovieButton = document.getElementById('logSpecificMovieButton');
const moreSpecificMovieButton = document.getElementById('moreSpecificMovieButton');
const toggleWatchDatesButton = document.getElementById('toggleWatchDatesButton');
if (logSpecificMovieButton != null && moreSpecificMovieButton != null && toggleWatchDatesButton != null) {
toggleWatchDatesButton.classList.add('btn-' + secondaryColor)
toggleWatchDatesButton.classList.remove('btn-' + mainColor)
logSpecificMovieButton.classList.add('btn-outline-' + secondaryColor)
logSpecificMovieButton.classList.remove('btn-outline-' + mainColor)
moreSpecificMovieButton.classList.add('btn-outline-' + secondaryColor)
moreSpecificMovieButton.classList.remove('btn-outline-' + mainColor)
}

const playStatsDiv1 = document.getElementById('playStatsDiv1');
const playStatsDiv2 = document.getElementById('playStatsDiv2');
if (playStatsDiv1 != null && playStatsDiv2 != null) {
playStatsDiv1.classList.add('text-' + secondaryColor)
playStatsDiv1.classList.remove('text-' + mainColor)
playStatsDiv2.classList.add('text-' + secondaryColor)
playStatsDiv2.classList.remove('text-' + mainColor)

document.querySelectorAll('.activeItemButton').forEach((element) => {
if (mainColor === 'dark') {
element.classList.add('text-white');
element.classList.remove('activeItemButtonActiveLight');
} else {
element.classList.remove('text-white');
element.classList.add('activeItemButtonActiveLight');
}
});
}
}

async function searchTmdbWithLogModalSearchInput() {
resetLogModalSearchResults()
document.getElementById('logPlayModalSearchSpinner').classList.remove('d-none')
Expand Down Expand Up @@ -147,17 +230,6 @@ function loadLogModalSearchResultsOnEnterPress(event) {
}
}

document.getElementById('logPlayModal').addEventListener('show.bs.modal', function () {
document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate()
})

document.getElementById('logPlayModal').addEventListener('hidden.bs.modal', function () {
document.getElementById('logPlayModalSearchInput').value = ''
resetLogModalLogInputs()
resetLogModalSearchResults()
backToLogModalSearchResults()
})

function resetLogModalLogInputs() {
document.getElementById('logPlayModalTmdbIdInput').value = ''
document.getElementById('logPlayModalWatchDateInput').value = getCurrentDate()
Expand Down Expand Up @@ -358,57 +430,3 @@ function toggleThemeSwitch() {

setTheme('light')
}

setTheme(window.localStorage.getItem('theme') ?? 'light', true)

function setTheme(theme, force = false) {
if (force === false && document.getElementById('html').dataset.bsTheme === theme) {
return
}

window.localStorage.setItem('theme', theme);
document.getElementById('html').dataset.bsTheme = theme

if (theme === 'light') {
updateHtmlThemeColors('light', 'dark')

return;
}

updateHtmlThemeColors('dark', 'light')
}

function updateHtmlThemeColors(mainColor, secondaryColor) {
document.getElementById('darkModeInput').checked = mainColor === "dark"

const logSpecificMovieButton = document.getElementById('logSpecificMovieButton');
const moreSpecificMovieButton = document.getElementById('moreSpecificMovieButton');
const toggleWatchDatesButton = document.getElementById('toggleWatchDatesButton');
if (logSpecificMovieButton != null && moreSpecificMovieButton != null && toggleWatchDatesButton != null) {
toggleWatchDatesButton.classList.add('btn-' + secondaryColor)
toggleWatchDatesButton.classList.remove('btn-' + mainColor)
logSpecificMovieButton.classList.add('btn-outline-' + secondaryColor)
logSpecificMovieButton.classList.remove('btn-outline-' + mainColor)
moreSpecificMovieButton.classList.add('btn-outline-' + secondaryColor)
moreSpecificMovieButton.classList.remove('btn-outline-' + mainColor)
}

const playStatsDiv1 = document.getElementById('playStatsDiv1');
const playStatsDiv2 = document.getElementById('playStatsDiv2');
if (playStatsDiv1 != null && playStatsDiv2 != null) {
playStatsDiv1.classList.add('text-' + secondaryColor)
playStatsDiv1.classList.remove('text-' + mainColor)
playStatsDiv2.classList.add('text-' + secondaryColor)
playStatsDiv2.classList.remove('text-' + mainColor)

document.querySelectorAll('.activeItemButton').forEach((element) => {
if (mainColor === 'dark') {
element.classList.add('text-white');
element.classList.remove('activeItemButtonActiveLight');
} else {
element.classList.remove('text-white');
element.classList.add('activeItemButtonActiveLight');
}
});
}
}
1 change: 1 addition & 0 deletions src/Factory.php
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,7 @@ public static function createTwigEnvironment(ContainerInterface $container) : Tw
$twig->addGlobal('dateFormatPhp', $dateFormatPhp);
$twig->addGlobal('dateFormatJavascript', $dataFormatJavascript);
$twig->addGlobal('requestUrlPath', self::createCurrentHttpRequest()->getPath());
$twig->addGlobal('theme', $_COOKIE['theme'] ?? 'light');

return $twig;
}
Expand Down
2 changes: 1 addition & 1 deletion templates/base.html.twig
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html id="html" data-bs-theme="light">
<html id="html" data-bs-theme="{{ theme }}">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
Expand Down
7 changes: 4 additions & 3 deletions templates/page/dashboard.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
{{ include('component/user-select.html.twig') }}

<h2 style="padding-bottom: 0.5rem">Overview</h2>
<div class="row justify-content-md-center" id="playStatsDiv1">
<div class="row justify-content-md-center {{ theme == 'dark' ? 'text-light' : 'text-dark' }}" id="playStatsDiv1">
<div class="col ">
<span class="stat-value">{{ totalPlayCount }}</span><br><span class="stat-description">TOTAL PLAYS</span>
</div>
Expand All @@ -32,7 +32,7 @@
</div>
</div>
<br>
<div class="row justify-content-md-center" id="playStatsDiv2">
<div class="row justify-content-md-center {{ theme == 'dark' ? 'text-light' : 'text-dark' }}" id="playStatsDiv2">
<div class="col ">
<span class="stat-value">{{ averagePlaysPerDay }}</span><br><span class="stat-description">PLAYS PER DAY</span>
</div>
Expand All @@ -47,7 +47,8 @@
<hr>

<div class="list-group">
<li class="list-group-item list-group-item-action user-select-none activeItemButton" onclick="toggleButton(this)">
<li class="list-group-item list-group-item-action user-select-none activeItemButton {{ theme == 'dark' ? 'text-white' : 'activeItemButtonActiveLight' }}"
onclick="toggleButton(this)">
Last Plays
<i class="bi bi-chevron-up float-end"></i>
</li>
Expand Down
8 changes: 5 additions & 3 deletions templates/page/movie.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,9 @@

<div class="container text-center" id="toggleWatchDatesButtonDiv" style="margin-bottom: 0.5rem">
<div class="row">
<button type="button" class="col-lg-5 col-xl-4 col-xxl-3 btn btn-dark" onclick="toggleWatchDates()" id="toggleWatchDatesButton"
<button type="button" class="col-lg-5 col-xl-4 col-xxl-3 btn {{ theme == 'dark' ? 'btn-light' : 'btn-dark' }}"
onclick="toggleWatchDates()"
id="toggleWatchDatesButton"
{% if totalPlays == 0 %}disabled{% endif %}>
{{ totalPlays }}x Play{% if totalPlays == 0 or totalPlays > 1 %}s{% endif %} <span style="font-size: 0.8rem">- View all</span>
</button>
Expand Down Expand Up @@ -141,7 +143,7 @@
<div class="container" style="margin-bottom: 0.5rem">
<div class="row">
<button type="button"
class="col-lg-5 col-xl-4 col-xxl-3 btn btn-outline-dark"
class="col-lg-5 col-xl-4 col-xxl-3 btn {{ theme == 'dark' ? 'btn-outline-light' : 'btn-outline-dark' }}"
id="logSpecificMovieButton"
onclick="showLogPlayModalWithSpecificMovie({{ movie.tmdbId }}, '{{ movie.title }}')">Log play
</button>
Expand All @@ -151,7 +153,7 @@
<div class="row">
<button type="button"
id="moreSpecificMovieButton"
class="col-lg-5 col-xl-4 col-xxl-3 btn btn-sm btn-outline-dark"
class="col-lg-5 col-xl-4 col-xxl-3 btn btn-sm {{ theme == 'dark' ? 'btn-outline-light' : 'btn-outline-dark' }}"
data-bs-toggle="modal"
data-bs-target="#moreModal">
More
Expand Down