refactor: 🔨 Changed profile picture logic for media servers

apps/wizarr-backend/wizarr_backend/helpers/users.py

@@ -155,14 +155,9 @@ def create_user(**kwargs) -> Users:
  form = UsersModel(**kwargs)
  user_model = form.model_dump()
 
- #
- # Lookup by token to fix Issue #322 and #352
- # https://github.com/wizarrrr/wizarr/issues/322
- # https://github.com/wizarrrr/wizarr/issues/352
- #
  # If user already exists raise error (maybe change this to update user)
- if get_user_by_token(form.token, verify=False) is not None:
- user: Users = Users.update(**user_model).where(Users.token == form.token).execute()
+ if get_user_by_username(form.username, verify=False) is not None:
+ user: Users = Users.update(**user_model).where(Users.username == form.username)
  else:
  user: Users = Users.create(**user_model)
 

apps/wizarr-frontend/src/modules/admin/components/Invitations/SimpleUserList/SimpleUserItem.vue

@@ -12,8 +12,7 @@
  class="flex-shrink-0 h-[60px] w-[60px] rounded bg-gray-50 overflow-hidden"
  >
  <img
- :src="profilePicture"
- :onerror="`this.src='${backupPicture}'`"
+ :src="'https://ui-avatars.com/api/?uppercase=true&background=' + server_color + '&color=fff&name=' + user.username + '&length=1'"
  class="w-full h-full object-cover object-center"
  alt="Profile Picture"
  />
@@ -75,18 +74,6 @@ export default defineComponent({
  required: true,
  },
  },
- data() {
- return {
- profilePicture:
- 'https://ui-avatars.com/api/?uppercase=true&name=' +
- this.user.username +
- '&length=1',
- backupPicture:
- 'https://ui-avatars.com/api/?uppercase=true&name=' +
- this.user.username +
- '&length=1',
- };
- },
  computed: {
  expired(): string {
  if (this.$filter('isPast', this.user.expires!)) {
@@ -113,29 +100,20 @@ export default defineComponent({
 
  return 'text-gray-500 dark:text-gray-400';
  },
- ...mapState(useServerStore, ["settings"]),
- },
- methods: {
- async getProfilePicture() {
- if (!this.user.username) {
- return;
+ server_color() {
+ // change the color of the profile picture border based on the server type
+ switch (this.settings.server_type) {
+ case "jellyfin":
+ return "b06ac8";
+ case "emby":
+ return "74c46e";
+ case "plex":
+ return "ffc933";
+ default:
+ return "999999";
  }
-
- // if the server type is plex then use the username as the token to cater for Plex Home Users
- const token = this.settings.server_type === "plex" ? this.user.username : this.user.token;
-
- const response = this.$axios.get(
- `/api/users/${token}/profile-picture`,
- {
- responseType: 'blob',
- },
- );
-
- this.profilePicture = URL.createObjectURL((await response).data);
  },
- },
- mounted() {
- this.getProfilePicture();
+ ...mapState(useServerStore, ["settings"]),
  },
 });
 </script>

apps/wizarr-frontend/src/modules/admin/components/Users/UserList/UserItem.vue

@@ -2,7 +2,11 @@
  <ListItem>
  <template #icon>
  <div class="flex-shrink-0 h-[60px] w-[60px] rounded overflow-hidden">
- <img :src="profilePicture" :onerror="`this.src='${backupPicture}'`" class="w-full h-full object-cover object-center" alt="Profile Picture" />
+ <img
+ :src="'https://ui-avatars.com/api/?uppercase=true&background=' + server_color() + '&color=fff&name=' + user.username + '&length=1'"
+ class="w-full h-full object-cover object-center"
+ alt="Profile Picture"
+ />
  </div>
  </template>
  <template #title>
@@ -63,17 +67,13 @@ export default defineComponent({
  type: Object as () => User,
  required: true,
  },
+ count: {
+ type: Number,
+ required: true,
+ },
  },
  data() {
  return {
- profilePicture:
- 'https://ui-avatars.com/api/?uppercase=true&name=' +
- this.user.username +
- '&length=1',
- backupPicture:
- 'https://ui-avatars.com/api/?uppercase=true&name=' +
- this.user.username +
- '&length=1',
  disabled: {
  delete: false,
  },
@@ -105,22 +105,24 @@ export default defineComponent({
 
  return "text-gray-500 dark:text-gray-400";
  },
+ server_color() {
+ // change the color of the profile picture border based on the server type
+ return () => {
+ switch (this.settings.server_type) {
+ case "jellyfin":
+ return this.count % 2 === 0 ? "b06ac8" : "cea2dd";
+ case "emby":
+ return this.count % 2 === 0 ? "74c46e" : "a8daa4";
+ case "plex":
+ return this.count % 2 === 0 ? "ffc933" : "ffdd80";
+ default:
+ return this.count % 2 === 0 ? "999999" : "bfbfbf";
+ }
+ };
+ },
  ...mapState(useServerStore, ["settings"]),
  },
  methods: {
- async getProfilePicture() {
- if (!this.user.username) {
- return;
- }
- // if the server type is plex then use the username as the token to cater for Plex Home Users
- const token = this.settings.server_type === "plex" ? this.user.username : this.user.token;
-
- const response = this.$axios.get(`/api/users/${token}/profile-picture`, {
- responseType: "blob",
- });
-
- this.profilePicture = URL.createObjectURL((await response).data);
- },
  async manageUser() {
  const modal_options: CustomModalOptions = {
  title: this.__(`Managing %{user}`, {
@@ -177,8 +179,5 @@ export default defineComponent({
  },
  ...mapActions(useUsersStore, ["deleteUser"]),
  },
- mounted() {
- this.getProfilePicture();
- },
 });
 </script>

apps/wizarr-frontend/src/modules/admin/components/Users/UserList/UserList.vue

@@ -1,8 +1,8 @@
 <template>
  <Draggable :disabled="isDisabled" v-if="users && users.length > 0" v-model="users" tag="ul" group="users" ghost-class="moving-card" :animation="200" item-key="id">
- <template #item="{ element }">
+ <template #item="{ element, index }">
  <li class="mb-2">
- <UserItem :user="element" />
+ <UserItem :user="element" :count="index" />
  </li>
  </template>
  </Draggable>

apps/wizarr-frontend/src/modules/admin/components/Users/UserManager/User.vue

@@ -6,8 +6,7 @@
  class="flex-shrink-0 h-[45px] w-[45px] rounded bg-gray-50 overflow-hidden"
  >
  <img
- :src="profilePicture"
- :onerror="`this.src='${backupPicture}'`"
+ :src="'https://ui-avatars.com/api/?uppercase=true&background=' + server_color + '&color=fff&name=' + user.username + '&length=1'"
  class="w-full h-full object-cover object-center"
  alt="Profile Picture"
  />
@@ -106,14 +105,6 @@ export default defineComponent({
  active: false,
  },
  ],
- profilePicture:
- 'https://ui-avatars.com/api/?uppercase=true&name=' +
- this.user.username +
- '&length=1',
- backupPicture:
- 'https://ui-avatars.com/api/?uppercase=true&name=' +
- this.user.username +
- '&length=1',
  userExpired: true,
  clipboard: useClipboard({
  legacy: true,
@@ -138,6 +129,19 @@ export default defineComponent({
  userExpiredDateReadable() {
  return new Date(this.user.expires!).toLocaleString();
  },
+ server_color() {
+ // change the color of the profile picture border based on the server type
+ switch (this.settings.server_type) {
+ case "jellyfin":
+ return "b06ac8";
+ case "emby":
+ return "74c46e";
+ case "plex":
+ return "ffc933";
+ default:
+ return "999999";
+ }
+ },
  ...mapState(useServerStore, ["settings"]),
  },
  methods: {
@@ -147,23 +151,6 @@ export default defineComponent({
  return item;
  });
  },
- async getProfilePicture() {
- if (!this.user.username) {
- return;
- }
-
- // if the server type is plex then use the username as the token to cater for Plex Home Users
- const token = this.settings.server_type === "plex" ? this.user.username : this.user.token;
-
- const response = this.$axios.get(
- `/api/users/${this.user.token}/profile-picture`,
- {
- responseType: 'blob',
- },
- );
-
- this.profilePicture = URL.createObjectURL((await response).data);
- },
  userExpiredToggle() {
  this.userExpired = !this.userExpired;
  },
@@ -172,8 +159,5 @@ export default defineComponent({
  this.$toast.info(this.__('Copied to clipboard'));
  },
  },
- mounted() {
- this.getProfilePicture();
- },
 });
 </script>