chore(vue3): minor fixes

2026-09-03 05:10:26 +03:00 · 2023-04-03 12:52:57 +02:00
parent a45cc9cf94
commit cfb1230a17
10 changed files with 76 additions and 58 deletions
@@ -45,7 +45,7 @@
    "screenfull": "6.0.1",
    "shaka-player": "4.1.1",
    "swiper": "8.3.2",
-    "uuid": "8.3.2",
+    "uuid": "9.0.0",
    "vue": "3.2.39",
    "vue-i18n": "9.2.2",
    "vue-router": "4.1.5",
@@ -58,7 +58,7 @@
    "@types/langs": "2.0.1",
    "@types/lodash-es": "4.17.6",
    "@types/tizen-tv-webapis": "2.0.1",
-    "@types/uuid": "8.3.4",
+    "@types/uuid": "9.0.0",
    "@typescript-eslint/eslint-plugin": "5.42.0",
    "@typescript-eslint/parser": "5.42.0",
    "@vitejs/plugin-vue": "3.2.0",
@@ -14,7 +14,7 @@
        <v-btn
          icon
          :disabled="loading || serverInfo.isDefault"
-          @click="removeServerFromStore">
+          @click="removeServer">
          <Icon>
            <i-mdi-delete />
          </Icon>
@@ -29,36 +29,41 @@
  </v-card>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+// eslint-disable-next-line no-restricted-imports
 import { ServerInfo } from '@/plugins/vue/remote/auth/types';
+import { useRemote } from '@/composables';

-export default defineComponent({
-  props: {
-    serverInfo: {
-      type: Object as () => ServerInfo,
-      required: true
-    }
-  },
-  data() {
-    return {
-      loading: false
-    };
-  },
-  methods: {
-    async setServer(): Promise<void> {
-      this.loading = true;
-
-      try {
-        await this.$remote.auth.connectServer(this.serverInfo.PublicAddress);
-        this.$router.push('/server/login');
-      } finally {
-        this.loading = false;
-      }
-    },
-    async removeServerFromStore(): Promise<void> {
-      await this.$remote.auth.deleteServer(this.serverInfo.PublicAddress);
-    }
+const props = defineProps({
+  serverInfo: {
+    type: Object as () => ServerInfo,
+    required: true
  }
 });
+
+const loading = ref(false);
+const remote = useRemote();
+const router = useRouter();
+
+/**
+ * Set the current server in the app
+ */
+async function setServer(): Promise<void> {
+  loading.value = true;
+
+  try {
+    await remote.auth.connectServer(props.serverInfo.PublicAddress);
+    router.push('/server/login');
+  } finally {
+    loading.value = false;
+  }
+}
+/**
+ * Deletes the server from the app
+ */
+async function removeServer(): Promise<void> {
+  await remote.auth.deleteServer(props.serverInfo.PublicAddress);
+}
 </script>
@@ -1,6 +1,6 @@
 <template>
-  <v-avatar>
-    <v-img :src="url" cover>
+  <v-avatar :size="size">
+    <v-img :src="url" :width="size" cover>
      <template #placeholder>
        <v-avatar color="primary" :size="size">
          <Icon :size="iconSize" dark>
@@ -67,8 +67,8 @@ import 'swiper/css/free-mode';
 import 'swiper/css/navigation';
 import 'swiper/css/virtual';
 import { ref } from 'vue';
-import { v4 as uuidv4 } from 'uuid';
 import { useDisplay, useTheme } from 'vuetify';
+import { v4 } from 'uuid';
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { CardShapes, getShapeFromItemType } from '~/utils/items';

@@ -107,7 +107,7 @@ const props = defineProps({
 const cardShape = ref<string>(
  props.shape || getShapeFromItemType(props.items?.[0]?.Type)
 );
-const uuid = uuidv4();
+const uuid = v4();

 /**
 * Swiper options
@@ -1,12 +1,22 @@
 <template>
-  <div class="ma-2 d-flex flex-column pointer" @click="$emit('connect', user)">
-    <v-btn variant="plain" :height="128" :width="128" icon>
-      <user-image :user="user" rounded />
-    </v-btn>
-    <a class="text-subtitle-1 text-center mt-2 link">
-      {{ user.Name }}
-    </a>
-  </div>
+  <v-hover v-slot="{ isHovering, props }">
+    <div
+      class="ma-2 d-flex flex-column pointer"
+      v-bind="props"
+      @click="$emit('connect', user)">
+      <v-btn
+        :active="isHovering"
+        variant="plain"
+        :height="128"
+        :width="128"
+        icon>
+        <user-image :user="user" rounded :size="128" />
+      </v-btn>
+      <a class="text-subtitle-1 text-center mt-2 link">
+        {{ user.Name }}
+      </a>
+    </div>
+  </v-hover>
 </template>

 <script setup lang="ts">
@@ -8,7 +8,7 @@
        <div>
          <server-card
            v-for="server in $remote.auth.servers.value"
-            :key="server.Id"
+            :key="server.Id || v4()"
            class="mt-2"
            :server-info="server" />
        </div>
@@ -33,6 +33,7 @@ meta:
 <script setup lang="ts">
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { v4 } from 'uuid';

 const { t } = useI18n();
 const route = useRoute();
@@ -112,8 +112,10 @@ class RemotePluginAuth {
        const oldServer = this.getServerById(serv.Id);

        if (!isNil(oldServer)) {
-          this.deleteServer(oldServer.PublicAddress);
-          state.value.servers.push(merge(oldServer, serv));
+          this.servers.value[this.servers.value.indexOf(oldServer)] = merge(
+            oldServer,
+            serv
+          );
        } else {
          state.value.servers.push(serv);
        }
@@ -1,6 +1,6 @@
 import { Api, Jellyfin } from '@jellyfin/sdk';
 import { RemovableRef, useStorage } from '@vueuse/core';
-import { v4 as uuidv4 } from 'uuid';
+import { v4 } from 'uuid';
 import { DeviceState } from './types';
 import { version } from '@/../package.json';
 import {
@@ -19,7 +19,7 @@ import { mergeExcludingUnknown } from '@/utils/data-manipulation';
 const state: RemovableRef<DeviceState> = useStorage(
  'deviceProfile',
  {
-    deviceId: uuidv4()
+    deviceId: v4()
  },
  localStorage,
  {
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { v4 as uuidv4 } from 'uuid';
+import { v4 } from 'uuid';

 /**
 *
@@ -81,7 +81,7 @@ export const taskManagerStore = defineStore('taskManager', {
      if (!this.tasks.some((task) => task.type === TaskType.ConfigSync)) {
        const payload = {
          type: TaskType.ConfigSync,
-          id: uuidv4()
+          id: v4()
        };

        this.startTask(payload);
@@ -40,7 +40,7 @@
        "screenfull": "6.0.1",
        "shaka-player": "4.1.1",
        "swiper": "8.3.2",
-        "uuid": "8.3.2",
+        "uuid": "9.0.0",
        "vue": "3.2.39",
        "vue-i18n": "9.2.2",
        "vue-router": "4.1.5",
@@ -53,7 +53,7 @@
        "@types/langs": "2.0.1",
        "@types/lodash-es": "4.17.6",
        "@types/tizen-tv-webapis": "2.0.1",
-        "@types/uuid": "8.3.4",
+        "@types/uuid": "9.0.0",
        "@typescript-eslint/eslint-plugin": "5.42.0",
        "@typescript-eslint/parser": "5.42.0",
        "@vitejs/plugin-vue": "3.2.0",
@@ -3558,9 +3558,9 @@
      "dev": true
    },
    "node_modules/@types/uuid": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==",
      "dev": true
    },
    "node_modules/@types/web-bluetooth": {
@@ -14796,9 +14796,9 @@
      "dev": true
    },
    "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
      "bin": {
        "uuid": "dist/bin/uuid"
      }