jellyfin · ferferga · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024 · Dec 29, 2024
diff --git a/.github/renovate.json b/.github/renovate.json
@@ -6,6 +6,14 @@
       "matchUpdateTypes": ["major"],
       "enabled": false
     },
+    {
+      "matchFileNames": [
+        "packaging/tauri/**",
+        "packages/tauri-runtime/**"
+      ],
+      "separateMajorMinor": false,
+      "groupName": "tauri"
+    },
     {
       "matchManagers": [
         "npm"
@@ -31,13 +39,6 @@
       "separateMajorMinor": false,
       "groupName": "ci"
     },
-    {
-      "matchFileNames": [
-        "packaging/tauri/**"
-      ],
-      "separateMajorMinor": false,
-      "groupName": "tauri"
-    },
     {
       "matchUpdateTypes": [
         "lockFileMaintenance"

diff --git a/frontend/eslint.config.ts b/frontend/eslint.config.ts
@@ -1,9 +1,10 @@
 import type { Linter } from 'eslint';
 import { getBaseConfig, getTSVueConfig, getNodeFiles, unocss, getWorkerFiles } from '@jellyfin-vue/configs/lint';
+import pkg from './package.json' with { type: 'json' };
 
 // TODO: Add missing rules for i18n and json
 export default [
-  ...getBaseConfig('@jellyfin-vue/frontend'),
+  ...getBaseConfig(pkg.name),
   ...getTSVueConfig(true, import.meta.dirname),
   ...unocss,
   ...getNodeFiles(),

diff --git a/frontend/index.html b/frontend/index.html
@@ -10,8 +10,6 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <title>Jellyfin Vue</title>
-    <script type="module" src="src/splashscreen.ts" fetchpriority="high"></script>
-    <script type="module" src="src/main.ts"></script>
   </head>
   <body class="j-splash">
     <img src="./icon.svg" alt="Jellyfin Logo" loading="eager" decoding="sync">

diff --git a/frontend/package.json b/frontend/package.json
@@ -5,6 +5,13 @@
   "browserslist": [
     "defaults and supports es6-module"
   ],
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "exports": {
+    ".": "./src/main.ts",
+    "./vite-config": "./vite.config.ts"
+  },
   "scripts": {
     "analyze:bundle": "vite build --mode analyze:bundle",
     "analyze:cycles": "vite build --mode analyze:cycles",
@@ -21,6 +28,8 @@
   },
   "dependencies": {
     "@fontsource-variable/figtree": "5.1.2",
+    "@jellyfin-vue/shared": "*",
+    "@jellyfin-vue/ui-toolkit": "*",
     "@jellyfin/sdk": "0.11.0",
     "@skirtle/vue-vnode-utils": "0.2.0",
     "@vueuse/core": "12.3.0",
@@ -32,11 +41,9 @@
     "date-fns": "4.1.0",
     "defu": "6.1.4",
     "destr": "2.0.3",
-    "dompurify": "3.2.3",
     "fast-equals": "5.2.2",
     "hls.js": "1.5.18",
     "libpgs": "0.8.1",
-    "marked": "15.0.6",
     "sortablejs": "1.15.6",
     "swiper": "11.2.0",
     "uuid": "11.0.4",

diff --git a/frontend/scripts/paths.ts b/frontend/scripts/paths.ts
@@ -1,9 +1,3 @@
 import { resolve } from 'node:path';
 
-export const localeFilesFolder = resolve('locales/**');
-export const srcRoot = `${resolve('src')}/`;
-export const entrypoints = {
-  index: resolve('index.html'),
-  main: `${srcRoot}/main.ts`,
-  splashscreen: `${srcRoot}/splashscreen.ts`
-};
+export const localeFilesFolder = resolve(import.meta.dirname, '../locales/**');
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -15,16 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
-
 /**
  * When app is mounted, the classes and styles we initialized in the pre-Vue splashscreen in body
  * are now useless and can break the page if not removed.
  *
  * We set all the styles and vars in JApp, so we want a body with 0 styling attributes.
  */
-onMounted(() => {
-  document.body.removeAttribute('class');
-  document.body.removeAttribute('style');
-});
+document.body.removeAttribute('class');
+document.body.removeAttribute('style');
 </script>
diff --git a/frontend/src/assets/styles/global.css b/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;

diff --git a/frontend/src/assets/styles/splashscreen.css b/frontend/src/assets/styles/splashscreen.css
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  background-color: var(--j-color-background);
+  background-color: var(--j-theme-color-background);
 }
 
 .j-splash > img {

diff --git a/frontend/src/components/Buttons/FilterButton.vue b/frontend/src/components/Buttons/FilterButton.vue
@@ -172,8 +172,8 @@ import { type BaseItemDto, ItemFilter } from '@jellyfin/sdk/lib/generated-client
 import { getFilterApi } from '@jellyfin/sdk/lib/utils/api/filter-api';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { remote } from '@/plugins/remote';
-import { useSnackbar } from '@/composables/use-snackbar';
+import { remote } from '#/plugins/remote';
+import { useSnackbar } from '#/composables/use-snackbar';
 
 export type FeatureFilters =
   | 'HasSubtitles'

diff --git a/frontend/src/components/Buttons/LikeButton.vue b/frontend/src/components/Buttons/LikeButton.vue
@@ -13,7 +13,7 @@ import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api'
 import IMdiHeart from 'virtual:icons/mdi/heart';
 import IMdiHeartOutline from 'virtual:icons/mdi/heart-outline';
 import { computed, ref } from 'vue';
-import { useApi } from '@/composables/apis';
+import { useApi } from '#/composables/apis';
 
 const { size = 'small', item } = defineProps<{ item: BaseItemDto; size?: string }>();
 /**

diff --git a/frontend/src/components/Buttons/MarkPlayedButton.vue b/frontend/src/components/Buttons/MarkPlayedButton.vue
@@ -13,8 +13,8 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
 import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed, ref } from 'vue';
-import { canMarkWatched } from '@/utils/items';
-import { useApi } from '@/composables/apis';
+import { canMarkWatched } from '#/utils/items';
+import { useApi } from '#/composables/apis';
 
 const { item } = defineProps<{
   item: BaseItemDto;

diff --git a/frontend/src/components/Buttons/Playback/NextTrackButton.vue b/frontend/src/components/Buttons/Playback/NextTrackButton.vue
@@ -11,5 +11,5 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playback-manager';
+import { playbackManager } from '#/store/playback-manager';
 </script>
diff --git a/frontend/src/components/Buttons/Playback/PlayButton.vue b/frontend/src/components/Buttons/Playback/PlayButton.vue
@@ -42,9 +42,9 @@
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { ref } from 'vue';
-import { playbackManager } from '@/store/playback-manager';
-import { canPlay, canResume } from '@/utils/items';
-import { ticksToMs } from '@/utils/time';
+import { playbackManager } from '#/store/playback-manager';
+import { canPlay, canResume } from '#/utils/items';
+import { ticksToMs } from '#/utils/time';
 
 const {
   item,

diff --git a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
@@ -15,7 +15,7 @@ import IMdiExclamation from 'virtual:icons/mdi/exclamation';
 import IMdiPauseCircleOutline from 'virtual:icons/mdi/pause-circle-outline';
 import IMdiPlayCircleOutline from 'virtual:icons/mdi/play-circle-outline';
 import { computed } from 'vue';
-import { PlaybackStatus, playbackManager } from '@/store/playback-manager';
+import { PlaybackStatus, playbackManager } from '#/store/playback-manager';
 
 const playPauseIcon = computed(() => {
   if (playbackManager.isPaused.value) {

diff --git a/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue b/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue
@@ -22,8 +22,9 @@
             <VCol :cols="8">
               <VSelect
                 density="comfortable"
-                hide-details
-                disabled />
+
+                disabled
+                hide-details />
             </VCol>
           </VRow>
           <VRow align="center">
@@ -94,9 +95,9 @@
 <script setup lang="ts">
 import { computed, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { playbackManager } from '@/store/playback-manager';
-import { playerElement } from '@/store/player-element';
-import { isObj, isStr, isUndef } from '@/utils/validation';
+import { isObj, isStr, isUndef } from '@jellyfin-vue/shared/validation';
+import { playbackManager } from '#/store/playback-manager';
+import { playerElement } from '#/store/player-element';
 
 const menuModel = defineModel<boolean>();
 const { t } = useI18n();
@@ -110,7 +111,7 @@

 const _playbackSpeed = shallowRef<PlaybackSpeedValue>();
 const playbackSpeed = computed({
  get: () => {
    const playbackSpeedIndex = defaultPlaybackSpeeds.indexOf(playbackManager.playbackSpeed.value);

    if (isUndef(_playbackSpeed.value)) {

diff --git a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
@@ -12,5 +12,5 @@
 
 <script setup lang="ts">
 import IMdiSkipPrevious from 'virtual:icons/mdi/skip-previous';
-import { playbackManager } from '@/store/playback-manager';
+import { playbackManager } from '#/store/playback-manager';
 </script>
diff --git a/frontend/src/components/Buttons/Playback/RepeatButton.vue b/frontend/src/components/Buttons/Playback/RepeatButton.vue
@@ -14,7 +14,7 @@
 import IMdiRepeat from 'virtual:icons/mdi/repeat';
 import IMdiRepeatOnce from 'virtual:icons/mdi/repeat-once';
 import { computed } from 'vue';
-import { RepeatMode, playbackManager } from '@/store/playback-manager';
+import { RepeatMode, playbackManager } from '#/store/playback-manager';
 
 const repeatIcon = computed(() =>
   playbackManager.repeatMode.value === RepeatMode.RepeatOne

diff --git a/frontend/src/components/Buttons/Playback/ShuffleButton.vue b/frontend/src/components/Buttons/Playback/ShuffleButton.vue
@@ -11,5 +11,5 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playback-manager';
+import { playbackManager } from '#/store/playback-manager';
 </script>
diff --git a/frontend/src/components/Buttons/QueueButton.vue b/frontend/src/components/Buttons/QueueButton.vue
@@ -75,8 +75,8 @@
 import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { getTotalEndsAtTime } from '@/utils/time';
-import { InitMode, playbackManager } from '@/store/playback-manager';
+import { getTotalEndsAtTime } from '#/utils/time';
+import { InitMode, playbackManager } from '#/store/playback-manager';
 
 const { size = 40, closeOnClick = false } = defineProps<{
   size?: number;
@@ -91,7 +91,7 @@

 const sourceText = computed(() => {
  /**
   * TODO: Properly refactor this once search and other missing features are implemented, as discussed in
   * https://github.com/jellyfin/jellyfin-vue/pull/609
   */
  const unknownSource = t('unknown');

diff --git a/frontend/src/components/Buttons/ScrollToTopButton.vue b/frontend/src/components/Buttons/ScrollToTopButton.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { windowScroll } from '@/store';
+import { windowScroll } from '#/store';
 
 const { y } = windowScroll;
 

diff --git a/frontend/src/components/Buttons/SubtitleSelectionButton.vue b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
@@ -41,8 +41,8 @@ import { SubtitleDeliveryMethod } from '@jellyfin/sdk/lib/generated-client';
 import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { playbackManager } from '@/store/playback-manager';
-import { playerElement } from '@/store/player-element';
+import { playbackManager } from '#/store/playback-manager';
+import { playerElement } from '#/store/player-element';
 
 const menuModel = defineModel<boolean>();
 

diff --git a/frontend/src/components/Forms/AddServerForm.vue b/frontend/src/components/Forms/AddServerForm.vue
@@ -47,8 +47,8 @@
 import { shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { remote } from '@/plugins/remote';
-import { jsonConfig } from '@/utils/external-config';
+import { remote } from '#/plugins/remote';
+import { jsonConfig } from '#/utils/external-config';
 
 const router = useRouter();
 const i18n = useI18n();

diff --git a/frontend/src/components/Forms/LoginForm.vue b/frontend/src/components/Forms/LoginForm.vue
@@ -8,7 +8,6 @@
         v-if="!user"
         v-model="login.username"
         variant="outlined"
-
         hide-details
         autofocus
         :label="$t('username')"
@@ -73,9 +72,9 @@ import IconEye from 'virtual:icons/mdi/eye';
 import IconEyeOff from 'virtual:icons/mdi/eye-off';
 import { ref, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { fetchIndexPage } from '@/utils/items';
-import { remote } from '@/plugins/remote';
-import { jsonConfig } from '@/utils/external-config';
+import { fetchIndexPage } from '#/utils/items';
+import { remote } from '#/plugins/remote';
+import { jsonConfig } from '#/utils/external-config';
 
 const { user, disabled } = defineProps<{ user?: UserDto; disabled?: boolean }>();