From 3c592fd667e0a086cae9d66813d7aea815d2f489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Sun, 8 Sep 2024 21:22:56 +0200
Subject: [PATCH] feat(a11y): add no transparency setting detection (#2455)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also refactored styles to use UnoCSS and fixed some type issues

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
---
 frontend/src/assets/styles/splashscreen.css   |  2 +-
 .../components/Item/Card/GenericItemCard.vue  |  2 +-
 .../src/components/Layout/AppBar/AppBar.vue   |  4 +-
 frontend/src/components/Layout/Backdrop.vue   | 33 +++-------
 .../Layout/Navigation/NavigationDrawer.vue    |  3 +-
 frontend/src/components/lib/JApp.vue          |  2 +-
 frontend/src/components/lib/JTransition.vue   |  9 ++-
 frontend/src/composables/backdrop.ts          |  2 +-
 frontend/src/pages/playback/video.vue         | 66 +++++++++----------
 frontend/src/splashscreen.ts                  |  2 +-
 frontend/src/store/index.ts                   |  6 +-
 frontend/types/global/util.d.ts               |  8 +--
 frontend/uno.config.ts                        |  7 +-
 13 files changed, 70 insertions(+), 76 deletions(-)

diff --git a/frontend/src/assets/styles/splashscreen.css b/frontend/src/assets/styles/splashscreen.css
index 00fb12ef4ca..12cff94a945 100644
--- a/frontend/src/assets/styles/splashscreen.css
+++ b/frontend/src/assets/styles/splashscreen.css
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background-color: var(--j-background-color);
+  background-color: var(--j-color-background);
 }
 
 .j-splash > img {
diff --git a/frontend/src/components/Item/Card/GenericItemCard.vue b/frontend/src/components/Item/Card/GenericItemCard.vue
index a25e4830ad9..156df44ce08 100644
--- a/frontend/src/components/Item/Card/GenericItemCard.vue
+++ b/frontend/src/components/Item/Card/GenericItemCard.vue
@@ -162,7 +162,7 @@ const hasClick = computed(() => !!attrs.onClick);
 
 @media (hover: hover) and (pointer: fine) {
   .card-box:hover .card-overlay-hover {
-    background: rgba(var(--v-theme-background), 0.5);
+    background: rgba(var(--j-color-background), 0.5);
   }
   .card-box:hover .card-overlay-hover .card-overlay-hover-hidden {
     opacity: 1;
diff --git a/frontend/src/components/Layout/AppBar/AppBar.vue b/frontend/src/components/Layout/AppBar/AppBar.vue
index dd77d974dbe..1017f8102dc 100644
--- a/frontend/src/components/Layout/AppBar/AppBar.vue
+++ b/frontend/src/components/Layout/AppBar/AppBar.vue
@@ -61,13 +61,13 @@
 <script setup lang="ts">
 import { computed, inject, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { windowScroll, isConnectedToServer } from '@/store';
+import { windowScroll, isConnectedToServer, prefersNoTransparency } from '@/store';
 import { clientSettings } from '@/store/client-settings';
 import { remote } from '@/plugins/remote';
 
 const route = useRoute();
 const { y } = windowScroll;
-const transparentAppBar = computed(() => route.meta.layout.transparent && y.value < 10);
+const transparentAppBar = computed(() => !prefersNoTransparency.value && route.meta.layout.transparent && y.value < 10);
 
 /**
  * Cycle between the different color schemas
diff --git a/frontend/src/components/Layout/Backdrop.vue b/frontend/src/components/Layout/Backdrop.vue
index bad51961962..1bd05ad2b49 100644
--- a/frontend/src/components/Layout/Backdrop.vue
+++ b/frontend/src/components/Layout/Backdrop.vue
@@ -2,8 +2,8 @@
   <JTransition>
     <div
       v-if="blurhash"
-      :key="`backdrop-${blurhash}`"
-      class="backdrop sizing"
+      :key="blurhash"
+      class="uno-fixed uno-left-0 uno-top-0 uno-h-screen uno-w-screen uno-bg-cover uno-color-background"
       :style="{
         opacity,
       }">
@@ -11,19 +11,21 @@
         :hash="blurhash"
         :width="32"
         :height="32"
-        class="sizing" />
+        class="uno-fixed uno-left-0 uno-top-0 uno-h-screen uno-w-screen uno-bg-cover" />
     </div>
   </JTransition>
 </template>
 
 <script lang="ts">
-import { toRef, type MaybeRefOrGetter, shallowRef, onMounted, onBeforeUnmount } from 'vue';
+import { toRef, type MaybeRefOrGetter, shallowRef, onMounted, onBeforeUnmount, computed } from 'vue';
 import { watchImmediate } from '@vueuse/core';
 import { isNil } from '@/utils/validation';
+import { prefersNoTransparency } from '@/store';
 
 const DEFAULT_OPACITY = 0.25;
+const requested_opacity = shallowRef(DEFAULT_OPACITY);
 const _blurhash = shallowRef<string>();
-const _opacity = shallowRef(DEFAULT_OPACITY);
+const _opacity = computed(() => prefersNoTransparency.value ? 0 : requested_opacity.value);
 
 /**
  * Reactively sets the backdrop properties. Can be used in 2 ways:
@@ -40,14 +42,12 @@ export function useBackdrop(hash?: MaybeRefOrGetter<string | undefined>, opacity
     }
 
     if (!isNil(opacity)) {
-      watchImmediate(toRef(opacity), val => _opacity.value = val ?? DEFAULT_OPACITY);
+      watchImmediate(toRef(opacity), val => requested_opacity.value = val ?? DEFAULT_OPACITY);
     }
   });
 
   onBeforeUnmount(() => _blurhash.value = undefined);
-  onBeforeUnmount(() => _opacity.value = DEFAULT_OPACITY);
-
-  return { backdrop: _blurhash, opacity: _opacity.value };
+  onBeforeUnmount(() => requested_opacity.value = DEFAULT_OPACITY);
 }
 </script>
 
@@ -55,18 +55,3 @@ export function useBackdrop(hash?: MaybeRefOrGetter<string | undefined>, opacity
 const blurhash = _blurhash;
 const opacity = _opacity;
 </script>
-
-<style scoped>
-.backdrop {
-  background-color: rgb(var(--v-theme-background));
-}
-
-.sizing {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-size: cover;
-}
-</style>
diff --git a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
index d031c44910d..02353eddae8 100644
--- a/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
+++ b/frontend/src/components/Layout/Navigation/NavigationDrawer.vue
@@ -43,6 +43,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import type { RouteNamedMap } from 'vue-router/auto-routes';
 import type { getLibraryIcon } from '@/utils/items';
+import { prefersNoTransparency } from '@/store';
 
 export interface DrawerItem {
   icon: ReturnType<typeof getLibraryIcon>;
@@ -59,7 +60,7 @@ const route = useRoute();
 const { t } = useI18n();
 
 const drawer = inject<Ref<boolean>>('NavigationDrawer');
-const transparentLayout = computed(() => route.meta.layout.transparent);
+const transparentLayout = computed(() => !prefersNoTransparency.value && route.meta.layout.transparent);
 
 const items = [
   {
diff --git a/frontend/src/components/lib/JApp.vue b/frontend/src/components/lib/JApp.vue
index 05c7eafdd46..8ac2d96e376 100644
--- a/frontend/src/components/lib/JApp.vue
+++ b/frontend/src/components/lib/JApp.vue
@@ -10,7 +10,7 @@
       <template v-if="isLoading">
         cursor: wait;
       </template>
-      --j-background-color: rgb(var(--v-theme-background));
+      --j-color-background: rgb(var(--v-theme-background));
       }
     </component>
     <!-- eslint-enable @intlify/vue-i18n/no-raw-text vue/require-component-is -->
diff --git a/frontend/src/components/lib/JTransition.vue b/frontend/src/components/lib/JTransition.vue
index 59bb3aacb1d..7852a619c61 100644
--- a/frontend/src/components/lib/JTransition.vue
+++ b/frontend/src/components/lib/JTransition.vue
@@ -3,7 +3,7 @@
     :is="group ? TransitionGroup : Transition"
     class="j-transition"
     v-bind="$attrs"
-    :name="prefersNoMotion || disabled || isSlow ? undefined : `j-transition-${name}`"
+    :name="forcedDisable || disabled ? undefined : `j-transition-${name}`"
     @before-leave="leaving = true"
     @after-leave="onNoLeave"
     @leave-cancelled="onNoLeave">
@@ -11,8 +11,8 @@
   </component>
 </template>
 
-<script setup lang="ts">
-import { Transition, TransitionGroup, type TransitionProps, shallowRef } from 'vue';
+<script lang="ts">
+import { Transition, TransitionGroup, type TransitionProps, shallowRef, computed } from 'vue';
 import { prefersNoMotion, isSlow } from '@/store';
 import { usePausableEffect } from '@/composables/use-pausable-effect';
 
@@ -29,7 +29,10 @@ interface Props {
 }
 
 export type JTransitionProps = TransitionProps & Props;
+const forcedDisable = computed(() => prefersNoMotion.value || isSlow.value);
+</script>
 
+<script setup lang="ts">
 const { name = 'fade', group, disabled } = defineProps<Props>();
 const leaving = shallowRef(false);
 const onNoLeave = () => leaving.value = false;
diff --git a/frontend/src/composables/backdrop.ts b/frontend/src/composables/backdrop.ts
index 8217460484f..023e7510c46 100644
--- a/frontend/src/composables/backdrop.ts
+++ b/frontend/src/composables/backdrop.ts
@@ -6,7 +6,7 @@ import { getBlurhash } from '@/utils/images';
 /**
  * Same as useBackdrop, but is a shorthand for items only.
  */
-export function useItemBackdrop(item: MaybeRefOrGetter<Nullish<BaseItemDto>>, ...args: ExcludeFromTuple<Parameters<typeof useBackdrop>, 0>) {
+export function useItemBackdrop(item: MaybeRefOrGetter<Nullish<BaseItemDto>>, ...args: Tail<Parameters<typeof useBackdrop>>) {
   useBackdrop(() => getBlurhash(toValue(item) ?? {}, ImageType.Primary), ...args);
 }
 
diff --git a/frontend/src/pages/playback/video.vue b/frontend/src/pages/playback/video.vue
index 0489c6b9467..1b106465d31 100644
--- a/frontend/src/pages/playback/video.vue
+++ b/frontend/src/pages/playback/video.vue
@@ -13,7 +13,7 @@
         width="100%"
         height="100%">
         <div
-          class="d-flex flex-column justify-space-between align-center player-overlay">
+          class="d-flex flex-column align-center justify-space-between player-overlay">
           <div class="osd-top pt-s pl-s pr-s">
             <div class="d-flex align-center py-2 px-4">
               <div class="d-flex">
@@ -214,22 +214,22 @@ watch(staticOverlay, (val) => {
   padding-bottom: 5em;
   background: linear-gradient(
     to bottom,
-    rgb(var(--v-theme-background), 0.75) 0%,
-    rgb(var(--v-theme-background), 0.74) 8.1%,
-    rgb(var(--v-theme-background), 0.714) 15.5%,
-    rgb(var(--v-theme-background), 0.672) 22.5%,
-    rgb(var(--v-theme-background), 0.618) 29%,
-    rgb(var(--v-theme-background), 0.556) 35.3%,
-    rgb(var(--v-theme-background), 0.486) 41.2%,
-    rgb(var(--v-theme-background), 0.412) 47.1%,
-    rgb(var(--v-theme-background), 0.338) 52.9%,
-    rgb(var(--v-theme-background), 0.264) 58.8%,
-    rgb(var(--v-theme-background), 0.194) 64.7%,
-    rgb(var(--v-theme-background), 0.132) 71%,
-    rgb(var(--v-theme-background), 0.078) 77.5%,
-    rgb(var(--v-theme-background), 0.036) 84.5%,
-    rgb(var(--v-theme-background), 0.01) 91.9%,
-    rgb(var(--v-theme-background), 0) 100%
+    rgb(var(--j-color-background), 0.75) 0%,
+    rgb(var(--j-color-background), 0.74) 8.1%,
+    rgb(var(--j-color-background), 0.714) 15.5%,
+    rgb(var(--j-color-background), 0.672) 22.5%,
+    rgb(var(--j-color-background), 0.618) 29%,
+    rgb(var(--j-color-background), 0.556) 35.3%,
+    rgb(var(--j-color-background), 0.486) 41.2%,
+    rgb(var(--j-color-background), 0.412) 47.1%,
+    rgb(var(--j-color-background), 0.338) 52.9%,
+    rgb(var(--j-color-background), 0.264) 58.8%,
+    rgb(var(--j-color-background), 0.194) 64.7%,
+    rgb(var(--j-color-background), 0.132) 71%,
+    rgb(var(--j-color-background), 0.078) 77.5%,
+    rgb(var(--j-color-background), 0.036) 84.5%,
+    rgb(var(--j-color-background), 0.01) 91.9%,
+    rgb(var(--j-color-background), 0) 100%
   );
 }
 
@@ -237,22 +237,22 @@ watch(staticOverlay, (val) => {
   padding-top: 6em;
   background: linear-gradient(
     to top,
-    rgb(var(--v-theme-background), 0.75) 0%,
-    rgb(var(--v-theme-background), 0.74) 8.1%,
-    rgb(var(--v-theme-background), 0.714) 15.5%,
-    rgb(var(--v-theme-background), 0.672) 22.5%,
-    rgb(var(--v-theme-background), 0.618) 29%,
-    rgb(var(--v-theme-background), 0.556) 35.3%,
-    rgb(var(--v-theme-background), 0.486) 41.2%,
-    rgb(var(--v-theme-background), 0.412) 47.1%,
-    rgb(var(--v-theme-background), 0.338) 52.9%,
-    rgb(var(--v-theme-background), 0.264) 58.8%,
-    rgb(var(--v-theme-background), 0.194) 64.7%,
-    rgb(var(--v-theme-background), 0.132) 71%,
-    rgb(var(--v-theme-background), 0.078) 77.5%,
-    rgb(var(--v-theme-background), 0.036) 84.5%,
-    rgb(var(--v-theme-background), 0.01) 91.9%,
-    rgb(var(--v-theme-background), 0) 100%
+    rgb(var(--j-color-background), 0.75) 0%,
+    rgb(var(--j-color-background), 0.74) 8.1%,
+    rgb(var(--j-color-background), 0.714) 15.5%,
+    rgb(var(--j-color-background), 0.672) 22.5%,
+    rgb(var(--j-color-background), 0.618) 29%,
+    rgb(var(--j-color-background), 0.556) 35.3%,
+    rgb(var(--j-color-background), 0.486) 41.2%,
+    rgb(var(--j-color-background), 0.412) 47.1%,
+    rgb(var(--j-color-background), 0.338) 52.9%,
+    rgb(var(--j-color-background), 0.264) 58.8%,
+    rgb(var(--j-color-background), 0.194) 64.7%,
+    rgb(var(--j-color-background), 0.132) 71%,
+    rgb(var(--j-color-background), 0.078) 77.5%,
+    rgb(var(--j-color-background), 0.036) 84.5%,
+    rgb(var(--j-color-background), 0.01) 91.9%,
+    rgb(var(--j-color-background), 0) 100%
   );
 }
 
diff --git a/frontend/src/splashscreen.ts b/frontend/src/splashscreen.ts
index 704ed355b4f..60b45e82125 100644
--- a/frontend/src/splashscreen.ts
+++ b/frontend/src/splashscreen.ts
@@ -27,4 +27,4 @@ if ('darkMode' in parsedStore) {
   }
 }
 
-document.body.style.setProperty('--j-background-color', colorToApply);
+document.body.style.setProperty('--j-color-background', colorToApply);
diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
index 823bf9a8b16..a371fd46965 100644
--- a/frontend/src/store/index.ts
+++ b/frontend/src/store/index.ts
@@ -49,8 +49,12 @@ export const mediaWebAudio = {
 /**
  * Reactively tracks if the user wants animations (false) or not (true).
  */
-export const prefersNoMotion = useMediaQuery('(prefers-reduced-motion)');
+export const prefersNoMotion = useMediaQuery('(prefers-reduced-motion:reduce)');
 
+/**
+ * Reactively tracks if the user wants transparency effects (true) or not (false).
+ */
+export const prefersNoTransparency = useMediaQuery('(prefers-reduced-transparency:reduce)');
 /**
  * IWhether the user is using a pointer with high precision (like a mouse)
  */
diff --git a/frontend/types/global/util.d.ts b/frontend/types/global/util.d.ts
index 35ed0a0b7be..a6e7aaa0b8c 100644
--- a/frontend/types/global/util.d.ts
+++ b/frontend/types/global/util.d.ts
@@ -16,13 +16,9 @@ type Mutable<T> = {
 };
 
 /**
- * Omits an specific element from a tuple.
+ * Gets the last item of a tuple
  */
-type ExcludeFromTuple<T, K extends number, I extends unknown[] = []> = T extends [infer F, ...infer R]
-  ? I['length'] extends K
-    ? [...ExcludeFromTuple<R, K, [F, ...I]>]
-    : [F, ...ExcludeFromTuple<R, K, [F, ...I]>]
-  : [];
+type Tail<L> = L extends readonly [] ? L : L extends readonly [unknown?, ...infer LTail] ? LTail : L;
 
 /**
  * Sets a type as nullish
diff --git a/frontend/uno.config.ts b/frontend/uno.config.ts
index 53759f7fa2c..b4c4111bec4 100644
--- a/frontend/uno.config.ts
+++ b/frontend/uno.config.ts
@@ -6,5 +6,10 @@ export default defineConfig({
       prefix: 'uno-',
       preflight: false
     })
-  ]
+  ],
+  theme: {
+    colors: {
+      background: 'rgb(var(--j-color-background))'
+    }
+  }
 });