wip

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

frontend/src/store/index.ts

@@ -15,12 +15,6 @@ import { remote } from '#/plugins/remote';
 import { router } from '#/plugins/router';
 import type { SubtitleTypographyChoices } from '#/store/client-settings/subtitle-settings';
 
-/**
- * This file contains global variables (specially VueUse refs) that are used multiple times across the client.
- * VueUse composables will set new event handlers, so it's more
- * efficient to reuse those, both in components and TS files.
- */
-
 export const DEFAULT_TYPOGRAPHY = 'Figtree Variable';
 /**
  * Type for the different typography choices across the application

frontend/types/global/components.d.ts

@@ -98,15 +98,15 @@ declare module 'vue' {
     ItemsCarousel: typeof import('./../../src/components/Layout/Carousel/Item/ItemsCarousel.vue')['default']
     ItemsCarouselTitle: typeof import('./../../src/components/Layout/Carousel/Item/ItemsCarouselTitle.vue')['default']
     JApp: typeof import('./../../src/components/lib/JApp.vue')['default']
-    JHover: typeof import('./../../src/components/lib/JHover.vue')['default']
+    JHover: typeof import('@jellyfin-vue/ui-toolkit/components')['JHover']
     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']
+    JSlot: typeof import('@jellyfin-vue/ui-toolkit/components')['JSlot']
     JSplashscreen: typeof import('./../../src/components/lib/JSplashscreen.vue')['default']
     JTransition: typeof import('./../../src/components/lib/JTransition.vue')['default']
     JView: typeof import('./../../src/components/lib/JView.vue')['default']
-    JVirtual: typeof import('./../../src/components/lib/JVirtual/JVirtual.vue')['default']
+    JVirtual: typeof import('@jellyfin-vue/ui-toolkit/components')['JVirtual']
     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']

packages/ui-toolkit/package.json

@@ -2,8 +2,13 @@
   "name": "@jellyfin-vue/ui-toolkit",
   "type": "module",
   "description": "Base components and UI toolkit for Jellyfin Vue",
+  "imports": {
+    "#/*": "./src/*"
+  },
   "exports": {
-    "./components": "./src/components"
+    "./components": "./src/components/index.ts",
+    "./store": "./src/store.ts",
+    "./resolver": "./src/resolver.ts"
   },
   "scripts": {
     "lint": "eslint . --flag unstable_ts_config",
@@ -14,5 +19,11 @@
   "devDependencies": {
     "@jellyfin-vue/configs": "*",
     "unplugin-vue-components": "0.28.0"
+  },
+  "dependencies": {
+    "@skirtle/vue-vnode-utils": "0.2.0",
+    "@vueuse/core": "12.2.0",
+    "comlink": "4.4.2",
+    "vue": "3.5.13"
   }
 }

frontend/src/components/lib/JVirtual/JVirtual.vue → packages/ui-toolkit/src/components/JVirtual/index.vue

@@ -53,14 +53,14 @@ import {
 } from './pipeline';
 import type { IJVirtualWorker } from './j-virtual.worker';
 import JVirtualWorker from './j-virtual.worker?worker';
-import { vuetify } from '#/plugins/vuetify';
+import { windowSize } from '#/store.ts';
 
 /**
  * SHARED STATE ACROSS ALL THE COMPONENT INSTANCES
  */
-const display = vuetify.display;
-const displayWidth = refDebounced(display.width, 250);
-const displayHeight = refDebounced(display.height, 250);
+
+const displayWidth = refDebounced(windowSize.width, 250);
+const displayHeight = refDebounced(windowSize.height, 250);
 </script>
 
 <script setup lang="ts" generic="T">

packages/ui-toolkit/src/components/index.ts

@@ -0,0 +1,3 @@
+export { default as JSlot } from './JSlot.vue';
+export { default as JHover } from './JHover.vue';
+export { default as JVirtual } from './JVirtual/index.vue';

packages/ui-toolkit/src/store.ts

@@ -0,0 +1,9 @@
+/**
+ * This module contains application-level state (specially VueUse refs)
+ * that are used multiple times across the client. VueUse composables will set
+ * new event handlers/effects, so it's more efficient to reuse those,
+ * both in components and TS files.
+ */
+import { useWindowSize } from '@vueuse/core';
+
+export const windowSize = useWindowSize();