From fc18ccb9b1c9782d6bc2d7a2a40281814036f7c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= Date: Thu, 19 Dec 2024 21:36:55 +0100 Subject: [PATCH] wip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fernando Fernández --- .../JSplashscreen.vue => Layout/Splashscreen.vue} | 0 frontend/src/components/lib/JView.vue | 2 +- frontend/src/store/index.ts | 6 ------ frontend/src/utils/i18n.ts | 1 + frontend/tsconfig.json | 1 + frontend/types/global/components.d.ts | 6 +++--- package-lock.json | 8 +++++++- packages/ui-toolkit/package.json | 15 +++++++++++++-- .../ui-toolkit/src/components}/JHover.vue | 0 .../ui-toolkit/src/components}/JOverlay.vue | 0 .../ui-toolkit/src/components}/JSlot.vue | 0 .../ui-toolkit/src/components/JVirtual/index.vue | 8 ++++---- .../src/components}/JVirtual/j-virtual.worker.ts | 0 .../src/components}/JVirtual/pipeline.ts | 0 packages/ui-toolkit/src/components/index.ts | 5 +++++ packages/ui-toolkit/src/store.ts | 9 +++++++++ packages/vite-plugins/tsconfig.json | 3 +++ 17 files changed, 47 insertions(+), 17 deletions(-) rename frontend/src/components/{lib/JSplashscreen.vue => Layout/Splashscreen.vue} (100%) rename {frontend/src/components/lib => packages/ui-toolkit/src/components}/JHover.vue (100%) rename {frontend/src/components/lib => packages/ui-toolkit/src/components}/JOverlay.vue (100%) rename {frontend/src/components/lib => packages/ui-toolkit/src/components}/JSlot.vue (100%) rename frontend/src/components/lib/JVirtual/JVirtual.vue => packages/ui-toolkit/src/components/JVirtual/index.vue (98%) rename {frontend/src/components/lib => packages/ui-toolkit/src/components}/JVirtual/j-virtual.worker.ts (100%) rename {frontend/src/components/lib => packages/ui-toolkit/src/components}/JVirtual/pipeline.ts (100%) create mode 100644 packages/ui-toolkit/src/components/index.ts create mode 100644 packages/ui-toolkit/src/store.ts diff --git a/frontend/src/components/lib/JSplashscreen.vue b/frontend/src/components/Layout/Splashscreen.vue similarity index 100% rename from frontend/src/components/lib/JSplashscreen.vue rename to frontend/src/components/Layout/Splashscreen.vue diff --git a/frontend/src/components/lib/JView.vue b/frontend/src/components/lib/JView.vue index 6b8fa06d42ae..43115e316aa9 100644 --- a/frontend/src/components/lib/JView.vue +++ b/frontend/src/components/lib/JView.vue @@ -21,7 +21,7 @@ diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts index 26dab7f14cd2..3a866ba26ffe 100644 --- a/frontend/src/store/index.ts +++ b/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 diff --git a/frontend/src/utils/i18n.ts b/frontend/src/utils/i18n.ts index facc93369903..9d48749d189c 100644 --- a/frontend/src/utils/i18n.ts +++ b/frontend/src/utils/i18n.ts @@ -1,3 +1,4 @@ +import { isStr } from '@jellyfin-vue/shared/validation'; import { upperFirst } from '#/utils/data-manipulation'; /** diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 0dbe5dc3b62a..6d3e6cb0abd9 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "@jellyfin-vue/configs/typescript", "compilerOptions": { + "baseUrl": ".", "lib": [ "ESNext", "DOM", diff --git a/frontend/types/global/components.d.ts b/frontend/types/global/components.d.ts index 3f80ea68cf65..50d9a227ff84 100644 --- a/frontend/types/global/components.d.ts +++ b/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'] diff --git a/package-lock.json b/package-lock.json index 4d25254b6e65..96f85231c721 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13107,9 +13107,15 @@ }, "packages/ui-toolkit": { "name": "@jellyfin-vue/ui-toolkit", + "dependencies": { + "@skirtle/vue-vnode-utils": "0.2.0", + "@vueuse/core": "12.3.0", + "comlink": "4.4.2", + "vue": "3.5.13" + }, "devDependencies": { "@jellyfin-vue/configs": "*", - "unplugin-vue-components": "0.28.0" + "unplugin-vue-components": "28.0.0" } }, "packages/vite-plugins": { diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json index 860b7cfc56d9..71e351301f45 100644 --- a/packages/ui-toolkit/package.json +++ b/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" } } diff --git a/frontend/src/components/lib/JHover.vue b/packages/ui-toolkit/src/components/JHover.vue similarity index 100% rename from frontend/src/components/lib/JHover.vue rename to packages/ui-toolkit/src/components/JHover.vue diff --git a/frontend/src/components/lib/JOverlay.vue b/packages/ui-toolkit/src/components/JOverlay.vue similarity index 100% rename from frontend/src/components/lib/JOverlay.vue rename to packages/ui-toolkit/src/components/JOverlay.vue diff --git a/frontend/src/components/lib/JSlot.vue b/packages/ui-toolkit/src/components/JSlot.vue similarity index 100% rename from frontend/src/components/lib/JSlot.vue rename to packages/ui-toolkit/src/components/JSlot.vue diff --git a/frontend/src/components/lib/JVirtual/JVirtual.vue b/packages/ui-toolkit/src/components/JVirtual/index.vue similarity index 98% rename from frontend/src/components/lib/JVirtual/JVirtual.vue rename to packages/ui-toolkit/src/components/JVirtual/index.vue index aec1405c32d3..6fc1811ec193 100644 --- a/frontend/src/components/lib/JVirtual/JVirtual.vue +++ b/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);