wip

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

frontend/src/components/lib/JView.vue

@@ -21,7 +21,7 @@
       <template
         v-if="!apploaded && root"
         #fallback>
-        <JSplashscreen />
+        <Splashscreen />
       </template>
     </Suspense>
   </JTransition>

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/src/utils/i18n.ts

@@ -1,3 +1,4 @@
+import { isStr } from '@jellyfin-vue/shared/validation';
 import { upperFirst } from '#/utils/data-manipulation';
 
 /**

frontend/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@jellyfin-vue/configs/typescript",
   "compilerOptions": {
+    "baseUrl": ".",
     "lib": [
       "ESNext",
       "DOM",

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",
@@ -13,6 +18,12 @@
   },
   "devDependencies": {
     "@jellyfin-vue/configs": "*",
-    "unplugin-vue-components": "0.28.0"
+    "unplugin-vue-components": "28.0.0"
+  },
+  "dependencies": {
+    "@skirtle/vue-vnode-utils": "0.2.0",
+    "@vueuse/core": "12.3.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,5 @@
+export { default as JVirtual } from './JVirtual/index.vue';
+
+export { default as JHover } from './JHover.vue';
+export { default as JOverlay } from './JVirtual/index.vue';
+export { default as JSlot } from './JSlot.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();

packages/vite-plugins/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "extends": "@jellyfin-vue/configs/typescript",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
   "exclude": [
     "dist",
     "node_modules",