feat,fix,refactor&perf: offline navigation, full item reactivity, simplifications and bug fixes

.vscode/settings.json

@@ -34,9 +34,6 @@
       "mode": "auto"
     }
   ],
-  "emmet.includeLanguages": {
-    "vue": "html"
-  },
   "vue.autoInsert.dotValue": true,
   "vue.server.fullCompletionList": true,
   "sonarlint.output.showAnalyzerLogs": true,

frontend/.eslintrc.cjs

@@ -7,7 +7,8 @@ const commonTSAndVueConfig = {
     // TODO: Investigate why this rule reports false positives
     '@typescript-eslint/no-misused-promises': 'off',
     'no-secrets/no-secrets': 'error',
-    '@typescript-eslint/consistent-type-exports': 'error'
+    '@typescript-eslint/consistent-type-exports': 'error',
+    '@typescript-eslint/no-redundant-type-constituents': 'off'
   }
 };
 

frontend/index.html

@@ -9,55 +9,12 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <style>
-      @keyframes gradient {
-        0% {
-          background-position: 0% 50%;
-        }
-        50% {
-          background-position: 100% 50%;
-        }
-        100% {
-          background-position: 0% 50%;
-        }
-      }
-
-      /**
-        * Light color scheme for splashscreen
-        *
-      */
-
       .light {
-        background: linear-gradient(
-          280deg,
-          #4f5b62,
-          #62727b,
-          #718792,
-          #819ca9,
-          #8eacbb
-        );
+        background: #f2f2f2;
       }
 
-      /**
-        * Dark color scheme for splashscreen
-        *
-      */
-
       .dark {
-        background: linear-gradient(
-          280deg,
-          #111827,
-          #1c2741,
-          #332d41,
-          #4a2532,
-          #381e73,
-          #244415
-        );
-      }
-
-      @media (prefers-reduced-motion) {
-        .animation {
-          animation: gradient 30s linear infinite;
-        }
+        background: #111827;
       }
 
       .splashBackground {
@@ -72,7 +29,6 @@
         width: 100%;
         height: 100%;
         background-size: 400% 400%;
-        animation: gradient 2s linear infinite;
         z-index: 99999999;
       }
 

frontend/locales/en.json

@@ -66,7 +66,6 @@
   "confirmPassword": "Confirm new password",
   "connect": "Connect",
   "contentType": "Content type",
-  "continueListening": "Continue listening",
   "continueWatching": "Continue watching",
   "copyPrompt": "Copy the following text into the clipboard?",
   "copyStreamURL": "Copy Stream URL",
@@ -110,7 +109,6 @@
   "endsAt": "Ends at {time}",
   "eps": "EPs",
   "failedSettingDisplayPreferences": "Unable to update display preferences.",
-  "failedToRefreshItems": "Failed to refresh items",
   "favorite": "Favorite",
   "features": "Features",
   "filter": "Filter",
@@ -145,6 +143,7 @@
   "lastActive": "Last active",
   "lastActivityDate": "Last seen {value}",
   "latestLibrary": "Latest {libraryName}",
+  "lazyLoading": "Showing {value} items. Loading more...",
   "libraries": "Libraries",
   "librariesSettingsDescription": "Manage libraries and their metadata",
   "libraryAccess": "Library access",
@@ -239,6 +238,7 @@
   "notifications": "Notifications",
   "notificationsSettingsDescription": "Manage and configure notification sent by this server",
   "numberTracks": "{number} tracks",
+  "offlineCantDoThisWillRetryWhenOnline": "You can't perform this action because you've lost the connection to the server. It will be retried once it's recovered.",
   "operatingSystem": "Operating system",
   "originalTitle": "Original title",
   "overview": "Overview",
@@ -367,8 +367,6 @@
   "transcodingAndStreaming": "Transcoding & streaming",
   "transcodingSettingsDescription": "Manage how this server handles transcoding and streaming to clients",
   "type": "Type",
-  "unableGetRelated": "Unable to get related items",
-  "unableToTogglePlayed": "Unable to update the watch status",
   "unauthorized": "You're not authorized to access this page",
   "unblockTag": "Unblock tag",
   "undefined": "Undefined",

frontend/src/App.vue

@@ -1,9 +1,101 @@
 <template>
   <Backdrop />
   <VApp>
-    <RootView />
+    <RouterView v-slot="{ Component, route }">
+      <TransitionView>
+        <Suspense @resolve="apploaded = true">
+          <div
+            :key="route.meta.layout"
+            style="transform-origin: center"
+            class="h-100">
+            <component
+              :is="getLayoutComponent(route.meta.layout)"
+              :key="route.meta.layout">
+              <TransitionView>
+                <Suspense suspensible>
+                  <div
+                    :key="route.path"
+                    style="transform-origin: center"
+                    class="h-100">
+                    <component
+                      :is="Component"
+                      :key="route.path" />
+                  </div>
+                </Suspense>
+              </TransitionView>
+            </component>
+          </div>
+        </Suspense>
+      </TransitionView>
+    </RouterView>
     <Snackbar />
     <ConfirmDialog />
   </VApp>
   <PlayerElement />
 </template>
+
+<script setup lang="ts">
+import DefaultLayout from '@/layouts/default.vue';
+import FullPageLayout from '@/layouts/fullpage.vue';
+import ServerLayout from '@/layouts/server.vue';
+import { whenever } from '@vueuse/core';
+import { ref, type Component as VueComponent } from 'vue';
+import type { RouteMeta } from 'vue-router/auto';
+
+const apploaded = ref(false);
+
+/**
+ * - SPLASHSCREEN REMOVAL -
+ *
+ * Without window.setTimeout and window.requestAnimationFrame, the
+ * splash screen gets frozen an small (but noticeable) amount of time.
+ *
+ * Once we reach this point, all the async dependencies will be completely loaded and mounted,
+ * so we add a loadFinished class (defined in index.html) that fires the defined transition
+ * in the HTML markup to give a nice effect while hiding the splashscreen
+ */
+const stop = whenever(apploaded, () => {
+  window.setTimeout(() => {
+    window.requestAnimationFrame(() => {
+      const splashDOM = document.querySelector('.splashBackground');
+
+      if (!splashDOM) {
+        throw new Error('could not locate splash div in DOM');
+      }
+
+      splashDOM.addEventListener(
+        'transitionend',
+        () => {
+          window.setTimeout(() => {
+            window.requestAnimationFrame(() => {
+              splashDOM.remove();
+              stop();
+            });
+          });
+        },
+        { once: true }
+      );
+
+      splashDOM.classList.add('loadFinished');
+    });
+  });
+});
+
+/**
+ * Return the appropiate layout component according to the route's meta.layout property
+ */
+function getLayoutComponent(layout: RouteMeta['layout']): VueComponent {
+  switch (layout) {
+    case 'fullpage': {
+      return FullPageLayout as VueComponent;
+    }
+    case 'server': {
+      return ServerLayout as VueComponent;
+    }
+    default: {
+      return DefaultLayout;
+    }
+  }
+
+}
+</script>

frontend/src/assets/styles/global.scss

@@ -1,6 +1,7 @@
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  cursor: var(--j-client-cursor);
 }
 
 html {
@@ -27,15 +28,11 @@ html.no-forced-scrollbar {
   bottom: 0;
 }
 
-.hide-pointer {
-  cursor: none;
-}
-
 .pointer {
   cursor: pointer;
 }
 
-.cursor-none {
+.no-cursor {
   cursor: none;
 }
 

frontend/src/components/Buttons/LikeButton.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { remote } from '@/plugins/remote';
+import { useApi } from '@/composables/apis';
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import IMdiHeart from 'virtual:icons/mdi/heart';
@@ -21,32 +21,23 @@ const props = withDefaults(
     size: 'small'
   }
 );
-const loading = ref(false);
+/**
+ * We use the composables to handle when there's no connection to the server
+ *
+ * The websocket will automatically update the item in the store, so no need
+ * to do manual modification here
+ */
+const methodToExecute = ref<'markFavoriteItem' | 'unmarkFavoriteItem' | undefined>();
+const { loading } = await useApi(getUserLibraryApi, methodToExecute, { skipCache: { request: true }, globalLoading: false })(() => ({
+  itemId: props.item.Id ?? ''
+}));
 
 const isFavorite = computed({
   get() {
     return props.item.UserData?.IsFavorite ?? false;
   },
-  async set(newValue) {
-    try {
-      if (!props.item.Id) {
-        throw new Error('Item has no Id');
-      }
-
-      loading.value = true;
-
-      await (newValue
-        ? remote.sdk.newUserApi(getUserLibraryApi).markFavoriteItem({
-          userId: remote.auth.currentUserId ?? '',
-          itemId: props.item.Id
-        })
-        : remote.sdk.newUserApi(getUserLibraryApi).unmarkFavoriteItem({
-          userId: remote.auth.currentUserId ?? '',
-          itemId: props.item.Id
-        }));
-    } catch {} finally {
-      loading.value = false;
-    }
+  set(newValue) {
+    methodToExecute.value = newValue ? 'markFavoriteItem' : 'unmarkFavoriteItem';
   }
 });
 </script>

frontend/src/components/Buttons/MarkPlayedButton.vue

@@ -3,53 +3,41 @@
     v-if="canMarkWatched(item)"
     :color="isPlayed ? 'primary' : undefined"
     :icon="IMdiCheck"
+    :loading="loading"
     size="small"
-    @click.stop.prevent="togglePlayed" />
+    @click.stop.prevent="isPlayed = !isPlayed" />
 </template>
 
 <script setup lang="ts">
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
+import { useApi } from '@/composables/apis';
 import { canMarkWatched } from '@/utils/items';
 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 { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { computed, ref } from 'vue';
 
 const props = defineProps<{
   item: BaseItemDto;
 }>();
 
-const isPlayed = ref(props.item.UserData?.Played || false);
-
-const { t } = useI18n();
+const methodToExecute = ref<'markPlayedItem' | 'markUnplayedItem' | undefined>();
 
 /**
- * Toggles the played state of the given item
+ * We use the composables to handle when there's no connection to the server
+ *
+ * The websocket will automatically update the item in the store, so no need
+ * to do manual modification here
  */
-async function togglePlayed(): Promise<void> {
-  try {
-    if (!props.item.Id) {
-      throw new Error('Item has no Id');
-    }
+const { loading } = await useApi(getPlaystateApi, methodToExecute, { skipCache: { request: true }, globalLoading: false })(() => ({
+  itemId: props.item.Id ?? ''
+}));
 
-    if (isPlayed.value) {
-      isPlayed.value = false;
-      await remote.sdk.newUserApi(getPlaystateApi).markUnplayedItem({
-        userId: remote.auth.currentUserId ?? '',
-        itemId: props.item.Id
-      });
-    } else {
-      isPlayed.value = true;
-      await remote.sdk.newUserApi(getPlaystateApi).markPlayedItem({
-        userId: remote.auth.currentUserId ?? '',
-        itemId: props.item.Id
-      });
-    }
-  } catch {
-    useSnackbar(t('unableToTogglePlayed'), 'error');
-    isPlayed.value = !isPlayed.value;
+const isPlayed = computed({
+  get() {
+    return props.item.UserData?.Played;
+  },
+  set(newValue) {
+    methodToExecute.value = newValue ? 'markPlayedItem' : 'markUnplayedItem';
   }
-}
+});
 </script>

frontend/src/components/Buttons/Playback/NextTrackButton.vue

@@ -3,7 +3,7 @@
     icon
     :size="props.size"
     :disabled="!playbackManager.nextItem"
-    @click="playbackManager.setNextTrack">
+    @click="playbackManager.setNextItem">
     <VIcon :size="size">
       <IMdiSkipNext />
     </VIcon>