refactor: create JHover and change vue-router component imports

* Switching some of the smallest pieces off Vuetify * Import the typed RouterView and RouterLink versions of the components Signed-off-by: Fernando Fernández <[email protected]>
jellyfin · Jan 17, 2024 · 95b339f · 95b339f
1 parent fe758e2
commit 95b339f
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 88 deletions.
diff --git a/frontend/src/components/Item/Identify/IdentifyResults.vue b/frontend/src/components/Item/Identify/IdentifyResults.vue
@@ -12,7 +12,7 @@
         <VTooltip location="top">
           {{ item.Name }}
         </VTooltip>
-        <VHover v-slot="{ isHovering, props: hoverProps }">
+        <JHover v-slot="{ isHovering, hoverProps }">
           <VImg
             :src="item.ImageUrl ?? undefined"
             v-bind="hoverProps"
@@ -41,19 +41,19 @@
               </VCardSubtitle>
             </VFadeTransition>
           </VImg>
-        </VHover>
+        </JHover>
       </VCard>
     </VCol>
   </VRow>
 </template>
 
 <script setup lang="ts">
+import { CardShapes, getShapeFromItemType } from '@/utils/items';
 import type {
-  BaseItemKind,
-  RemoteSearchResult
+BaseItemKind,
+RemoteSearchResult
 } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
-import { CardShapes, getShapeFromItemType } from '@/utils/items';
 
 const props = defineProps<{
   items: RemoteSearchResult[];

diff --git a/frontend/src/components/Item/ItemGrid.vue b/frontend/src/components/Item/ItemGrid.vue
@@ -2,18 +2,17 @@
   <div :class="large ? useResponsiveClasses('large-grid') : undefined">
     <VirtualGrid
       v-if="items.length > 0 && !noVirtual"
+      v-slot="{ item, style }"
       :items="items"
       :buffer-multiplier="1.5"
       :class="useResponsiveClasses('card-grid-container')">
-      <template #default="{ item, style }">
-        <Card
-          :style="style"
-          :item="item"
-          margin
-          text
-          overlay
-          link />
-      </template>
+      <Card
+        :style="style"
+        :item="item"
+        margin
+        text
+        overlay
+        link />
     </VirtualGrid>
     <div
       v-else-if="items.length > 0 && noVirtual"

diff --git a/frontend/src/components/Playback/DraggableQueue.vue b/frontend/src/components/Playback/DraggableQueue.vue
@@ -3,7 +3,7 @@
     <template
       v-for="(item, index) of playbackManager.queue"
       :key="item.Id">
-      <VHover v-slot="{ isHovering, props: hoverProps }">
+      <JHover v-slot="{ isHovering, hoverProps }">
         <VListItem
           v-bind="hoverProps"
           :title="item.Name ?? ''"
@@ -36,7 +36,7 @@
               queue />
           </template>
         </VListItem>
-      </VHover>
+      </JHover>
     </template>
   </span>
 </template>

diff --git a/frontend/src/components/Playback/PiPVideoPlayer.vue b/frontend/src/components/Playback/PiPVideoPlayer.vue
@@ -7,71 +7,69 @@
     scroll-strategy="none"
     content-class="minimized-overlay"
     :width="$vuetify.display.mobile ? '60vw' : '25vw'">
-    <VHover>
-      <template #default="{ isHovering, props }">
-        <div
-          v-bind="props"
-          class="minimized-video-container" />
-        <VOverlay
-          :model-value="isHovering"
-          v-bind="props"
-          contained
-          scrim
-          height="100%"
-          width="100%">
-          <div class="d-flex flex-column">
-            <div class="d-flex flex-row">
-              <VBtn
-                icon
-                @click="playerElement.toggleFullscreenVideoPlayer">
-                <VIcon>
-                  <IMdiArrowExpandAll />
-                </VIcon>
-              </VBtn>
-              <VSpacer />
-              <VBtn
-                icon
-                @click="playbackManager.stop">
-                <VIcon>
-                  <IMdiClose />
-                </VIcon>
-              </VBtn>
-            </div>
-            <div
-              class="absolute-cover pointer-events-none d-flex flex-row justify-center align-center">
-              <VBtn
-                class="pointer-events-all"
-                icon
-                size="large"
-                @click="() => playbackManager.setPreviousItem()">
-                <VIcon size="32">
-                  <IMdiSkipPrevious />
-                </VIcon>
-              </VBtn>
-              <VBtn
-                class="pointer-events-all"
-                icon
-                size="x-large"
-                @click="playbackManager.playPause">
-                <VIcon size="48">
-                  <IMdiPlay v-if="playbackManager.isPaused" />
-                  <IMdiPause v-else />
-                </VIcon>
-              </VBtn>
-              <VBtn
-                class="pointer-events-all"
-                icon
-                size="large"
-                @click="playbackManager.setNextItem">
-                <VIcon size="32">
-                  <IMdiSkipNext />
-                </VIcon>
-              </VBtn>
-            </div>
+    <JHover v-slot="{ isHovering, hoverProps }">
+      <div
+        v-bind="hoverProps"
+        class="minimized-video-container" />
+      <VOverlay
+        :model-value="isHovering"
+        v-bind="hoverProps"
+        contained
+        scrim
+        height="100%"
+        width="100%">
+        <div class="d-flex flex-column">
+          <div class="d-flex flex-row">
+            <VBtn
+              icon
+              @click="playerElement.toggleFullscreenVideoPlayer">
+              <VIcon>
+                <IMdiArrowExpandAll />
+              </VIcon>
+            </VBtn>
+            <VSpacer />
+            <VBtn
+              icon
+              @click="playbackManager.stop">
+              <VIcon>
+                <IMdiClose />
+              </VIcon>
+            </VBtn>
           </div>
-        </VOverlay>
-      </template>
-    </VHover>
+          <div
+            class="absolute-cover pointer-events-none d-flex flex-row justify-center align-center">
+            <VBtn
+              class="pointer-events-all"
+              icon
+              size="large"
+              @click="() => playbackManager.setPreviousItem()">
+              <VIcon size="32">
+                <IMdiSkipPrevious />
+              </VIcon>
+            </VBtn>
+            <VBtn
+              class="pointer-events-all"
+              icon
+              size="x-large"
+              @click="playbackManager.playPause">
+              <VIcon size="48">
+                <IMdiPlay v-if="playbackManager.isPaused" />
+                <IMdiPause v-else />
+              </VIcon>
+            </VBtn>
+            <VBtn
+              class="pointer-events-all"
+              icon
+              size="large"
+              @click="playbackManager.setNextItem">
+              <VIcon size="32">
+                <IMdiSkipNext />
+              </VIcon>
+            </VBtn>
+          </div>
+        </div>
+      </VOverlay>
+    </JHover>
   </VOverlay>
 </template>
 

diff --git a/frontend/src/components/Playback/TrackList.vue b/frontend/src/components/Playback/TrackList.vue
@@ -47,7 +47,7 @@
         <template
           v-for="track in tracksOnDisc"
           :key="track.Id">
-          <VHover v-slot="{ isHovering, props: hoverProps }">
+          <JHover v-slot="{ isHovering, hoverProps }">
             <tr
               :class="{ 'text-primary': isPlaying(track) }"
               v-bind="hoverProps"
@@ -108,7 +108,7 @@
                 {{ formatTicks(track.RunTimeTicks || 0) }}
               </td>
             </tr>
-          </VHover>
+          </JHover>
         </template>
       </template>
     </tbody>

diff --git a/frontend/src/components/Users/UserCard.vue b/frontend/src/components/Users/UserCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <VHover v-slot="{ isHovering, props: hoverProps }">
+  <JHover v-slot="{ isHovering, hoverProps }">
     <div
       class="ma-2 d-flex flex-column pointer"
       v-bind="hoverProps"
@@ -19,7 +19,7 @@
         {{ user.Name }}
       </a>
     </div>
-  </VHover>
+  </JHover>
 </template>
 
 <script setup lang="ts">

diff --git a/frontend/src/components/lib/JHover.vue b/frontend/src/components/lib/JHover.vue
@@ -0,0 +1,14 @@
+<template>
+  <slot
+    :is-hovering="isHovering"
+    :hover-props="{
+      onmouseover: () => isHovering = true,
+      onmouseout: () => isHovering = false
+    }" />
+</template>
+
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+
+const isHovering = shallowRef(false);
+</script>
diff --git a/frontend/types/global/components.d.ts b/frontend/types/global/components.d.ts
@@ -93,6 +93,7 @@ declare module 'vue' {
     ItemMenu: typeof import('./../../src/components/Item/ItemMenu.vue')['default']
     ItemsCarousel: typeof import('./../../src/components/Layout/Carousel/Item/ItemsCarousel.vue')['default']
     ItemsCarouselTitle: typeof import('./../../src/components/Layout/Carousel/Item/ItemsCarouselTitle.vue')['default']
+    JHover: typeof import('./../../src/components/lib/JHover.vue')['default']
     LikeButton: typeof import('./../../src/components/Buttons/LikeButton.vue')['default']
     LoadingIndicator: typeof import('./../../src/components/System/LoadingIndicator.vue')['default']
     LocaleSwitcher: typeof import('./../../src/components/System/LocaleSwitcher.vue')['default']
@@ -121,8 +122,8 @@ declare module 'vue' {
     RefreshMetadataDialog: typeof import('./../../src/components/Item/Metadata/RefreshMetadataDialog.vue')['default']
     RelatedItems: typeof import('./../../src/components/Item/RelatedItems.vue')['default']
     RepeatButton: typeof import('./../../src/components/Buttons/Playback/RepeatButton.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
+    RouterLink: typeof import('vue-router/auto')['RouterLink']
+    RouterView: typeof import('vue-router/auto')['RouterView']
     ScrollToTopButton: typeof import('./../../src/components/Buttons/ScrollToTopButton.vue')['default']
     SearchField: typeof import('./../../src/components/Layout/AppBar/SearchField.vue')['default']
     SeasonTabs: typeof import('./../../src/components/Item/SeasonTabs.vue')['default']
@@ -169,7 +170,6 @@ declare module 'vue' {
     VFadeTransition: typeof import('vuetify/components')['VFadeTransition']
     VFooter: typeof import('vuetify/components')['VFooter']
     VForm: typeof import('vuetify/components')['VForm']
-    VHover: typeof import('vuetify/components')['VHover']
     VIcon: typeof import('vuetify/components')['VIcon']
     VImg: typeof import('vuetify/components')['VImg']
     VirtualGrid: typeof import('./../../src/components/Layout/VirtualGrid/VirtualGrid.vue')['default']

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -42,7 +42,11 @@ export default defineConfig(({ mode }): UserConfig => {
           VueUseComponentsResolver(),
           Vuetify3Resolver(),
           VueUseDirectiveResolver()
-        ]
+        ],
+        types: [{
+          from: 'vue-router/auto',
+          names: ['RouterLink', 'RouterView']
+        }]
       }),
       /**
        * This plugin allows to use all icons from Iconify as vue components