feat: create JOverlay component

Also replace VOverlay with it

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>

Author: ferferga

frontend/src/assets/styles/global.css

@@ -13,16 +13,6 @@ html.no-forced-scrollbar {
 
 /* Custom utility classes */
 
-.absolute-cover {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
 .link {
   cursor: pointer;
   color: inherit !important;

frontend/src/components/Item/Card/GenericItemCard.vue

@@ -7,43 +7,35 @@
       <JHover v-slot="{ isHovering }">
         <div
           :class="shape"
-          class="elevation-2">
-          <div
-            class="d-flex align-center justify-center absolute-cover card-content">
-            <JSlot class="card-image">
-              <slot
-                name="image" />
-            </JSlot>
+          class="elevation-2 uno-bg-background">
+          <JSlot class="align-center card-content uno-h-full uno-w-full uno-flex uno-justify-center">
+            <slot name="image" />
+          </JSlot>
+          <div class="align-center card-upper-content uno-flex uno-justify-center">
+            <slot name="upper-content" />
           </div>
-          <div
-            class="absolute-cover d-flex justify-center align-center card-overlay"
-            :class="{ 'card-overlay-hover': overlay && hasFinePointer }">
-            <div class="d-flex justify-center align-center card-upper-content">
-              <slot name="upper-content" />
+          <JOverlay
+            v-if="(isHovering && overlay && hasFinePointer) || forceOverlay"
+            scrim>
+            <slot name="center-content" />
+            <div class="align-center card-lower-content uno-flex uno-justify-center">
+              <slot name="bottom-content" />
             </div>
-            <div
-              v-if="(isHovering && overlay && hasFinePointer) || forceOverlay"
-              class="card-overlay-hover-hidden">
-              <slot name="center-content" />
-              <div class="d-flex justify-center align-center card-lower-content">
-                <slot name="bottom-content" />
-              </div>
-            </div>
-            <VProgressLinear
-              v-if="
-                !isNil(progress) && progress > 0
-              "
-              :model-value="progress"
-              absolute
-              location="bottom" />
-          </div>
+          </JOverlay>
+          <VProgressLinear
+            v-if="
+              !isNil(progress) && progress > 0
+            "
+            :model-value="progress"
+            absolute
+            location="bottom" />
         </div>
       </JHover>
     </Component>
     <div
       v-if="$slots.title || ($slots.title && $slots.subtitle)"
       class="card-text">
-      <a class="font-weight-medium pa-0 mt-1 text-truncate d-block">
+      <a class="font-weight-medium pa-0 mt-1 text-truncate uno-block">
         <slot name="title" />
       </a>
       <a class="v-card-subtitle">
@@ -59,6 +51,7 @@ import { useAttrs, computed } from 'vue';
 import { isNil } from '@/utils/validation';
 import { hasFinePointer } from '@/store';
 import type { CardShapes } from '@/utils/items';
+import JOverlay from '@/components/lib/JOverlay.vue';
 
 const { shape, progress, overlay, forceOverlay, to, margin } = defineProps<{
   shape: CardShapes;
@@ -112,11 +105,6 @@ const hasClick = computed(() => !!attrs.onClick);
   border-radius: 0.3em;
 }
 
-.card-image {
-  width: 100%;
-  height: 100%;
-}
-
 .card-upper-content {
   position: absolute;
   right: 0.5em;
@@ -147,28 +135,6 @@ const hasClick = computed(() => !!attrs.onClick);
   -webkit-tap-highlight-color: transparent;
 }
 
-.card-overlay {
-  transition: all 0.2s;
-}
-
-.overlay-hover {
-  transition: opacity 0.2s;
-}
-
-.card-overlay-hover-hidden {
-  transition: inherit;
-  opacity: 0;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .card-box:hover .card-overlay-hover {
-    background: rgb(var(--j-color-background), 0.5);
-  }
-  .card-box:hover .card-overlay-hover .card-overlay-hover-hidden {
-    opacity: 1;
-  }
-}
-
 .card-text {
   text-align: center;
   padding: 0 0.25em;
@@ -181,7 +147,4 @@ const hasClick = computed(() => !!attrs.onClick);
   text-decoration: none;
   color: unset;
 }
-.absolute {
-  position: absolute;
-}
 </style>

frontend/src/components/Layout/Images/Blurhash/BlurhashImage.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <JOverlay>
     <JImg
-      class="absolute-cover"
+      class="uno-h-full uno-w-full"
       :src="imageUrl"
       :alt="item.Name ?? $t('unknown')"
       v-bind="$attrs">
@@ -12,7 +12,7 @@
           :width="width"
           :height="height"
           :punch="punch"
-          class="absolute-cover">
+          class="uno-h-full uno-w-full">
           <BlurhashImageIcon
             :item="item"
             class="uno-z--1" />
@@ -22,7 +22,7 @@
           :item="item" />
       </template>
     </JImg>
-  </div>
+  </JOverlay>
 </template>
 
 <script setup lang="ts">

frontend/src/components/Layout/Images/Blurhash/BlurhashImageIcon.vue

@@ -1,16 +1,18 @@
 <template>
-  <VAvatar
-    v-if="getItemIcon(item)"
-    :rounded="false"
-    size="100%"
-    class="absolute-cover d-flex justify-center align-center align-self-center">
-    <VIcon
-      class="text--disabled placeholder"
-      size="50%"
-      :icon="getItemIcon(item)">
-      <component :is="getItemIcon(item)" />
-    </VIcon>
-  </VAvatar>
+  <JOverlay>
+    <VAvatar
+      v-if="getItemIcon(item)"
+      :rounded="false"
+      size="100%"
+      class="d-flex justify-center align-center align-self-center uno-h-full uno-w-full">
+      <VIcon
+        class="text--disabled placeholder"
+        size="50%"
+        :icon="getItemIcon(item)">
+        <component :is="getItemIcon(item)" />
+      </VIcon>
+    </VAvatar>
+  </JOverlay>
 </template>
 
 <script setup lang="ts">

frontend/src/components/Playback/MiniVideoPlayer.vue

@@ -6,18 +6,13 @@
       no-click-animation
       :scrim="false"
       scroll-strategy="none"
-      content-class="minimized-overlay"
+      content-class="uno-absolute uno-right-8 uno-bottom-8"
       :close-on-back="false"
       :width="$vuetify.display.mobile ? '60vw' : '25vw'">
       <div
         ref="videoContainerRef"
         class="minimized-video-container" />
-      <VOverlay
-        :model-value="isHovering"
-        contained
-        :close-on-back="false"
-        height="100%"
-        width="100%">
+      <JOverlay scrim>
         <div class="d-flex flex-column">
           <div class="d-flex flex-row">
             <VBtn
@@ -66,7 +61,7 @@
             </VBtn>
           </div>
         </div>
-      </VOverlay>
+      </JOverlay>
     </VOverlay>
   </JHover>
 </template>
@@ -75,16 +70,3 @@
 import { playbackManager } from '@/store/playback-manager';
 import { playerElement, videoContainerRef } from '@/store/player-element';
 </script>
-
-<style scoped>
-:deep(.minimized-overlay) {
-  position: absolute;
-  right: 2em;
-  bottom: 2em;
-}
-
-:deep(.minimized-video-container video) {
-  max-width: 100%;
-  max-height: 100%;
-}
-</style>

frontend/src/components/Playback/PlayerElement.vue

@@ -14,10 +14,10 @@
           crossorigin
           playsinline
           :loop="playbackManager.isRepeatingOnce"
-          class="uno-h-full uno-max-h-100vh"
+          class="uno-h-full uno-w-full"
           :class="{
             'uno-object-fill': playerElement.isStretched.value,
-            'uno-w-screen': playerElement.isStretched.value
+            '!uno-w-screen': playerElement.isStretched.value
           }"
           @loadeddata="onLoadedData">
           <track

frontend/src/components/lib/JOverlay.vue

@@ -0,0 +1,39 @@
+<template>
+  <span
+    v-bind="$attrs"
+    aria-hidden
+    class="uno-fixed uno-inset-0 uno-z-100"
+    :class="[{
+      'uno-opacity-0 uno-transition-opacity': scrim,
+      'media-mouse:uno-bg-background media-mouse:uno-bg-opacity-50': !override && scrim
+    }, ...(override ? override : [])]"
+    @pointerenter="model = true"
+    @pointerleave="model = false">
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component - JOverlay
+ * This component is used to create an overlay over the parent div.
+ * By default, it will just provide a wrapper for rendering content over it.
+ * If you want to darken on hover, please use the `scrim` prop.
+ * By default, the theme's background color will be used, but if you pass
+ * custom classes, yours will override the this.
+ */
+
+// TODO: Extract transition duration to a global variable in UnoCSS preset
+
+const { scrim } = defineProps<{
+  /**
+   * Whether to darken the overlay on hover
+   */
+  scrim?: boolean;
+  /**
+   * Classes to override the scrim CSS
+   */
+  override?: string;
+}>();
+const model = defineModel<boolean>({ default: false });
+</script>

frontend/src/pages/playback/video.vue

@@ -6,13 +6,7 @@
       :class="{ 'uno-cursor-none': !overlay }"
       @mousemove="handleMouseMove"
       @touchend="handleMouseMove">
-      <VOverlay
-        v-model="overlay"
-        contained
-        scrim="transparent"
-        :close-on-back="false"
-        width="100%"
-        height="100%">
+      <JOverlay v-show="overlay">
         <div
           class="d-flex flex-column align-center justify-space-between player-overlay">
           <div class="osd-top pt-s pl-s pr-s">
@@ -112,7 +106,7 @@
             </div>
           </div>
         </div>
-      </VOverlay>
+      </JOverlay>
     </div>
   </VMain>
 </template>

frontend/types/global/components.d.ts

@@ -100,6 +100,7 @@ declare module 'vue' {
     JApp: typeof import('./../../src/components/lib/JApp.vue')['default']
     JHover: typeof import('./../../src/components/lib/JHover.vue')['default']
     JImg: typeof import('./../../src/components/lib/JImg.vue')['default']
+    JOverlay: typeof import('./../../src/components/lib/JOverlay.vue')['default']
     JSafeHtml: typeof import('./../../src/components/lib/JSafeHtml.vue')['default']
     JSlot: typeof import('./../../src/components/lib/JSlot.vue')['default']
     JSplashscreen: typeof import('./../../src/components/lib/JSplashscreen.vue')['default']