Skip to content

Commit

Permalink
refactor: 🔨 Changed profile picture logic for media servers
Browse files Browse the repository at this point in the history
  • Loading branch information
JamsRepos committed May 2, 2024
1 parent a1c3571 commit f1f94e1
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 99 deletions.
9 changes: 2 additions & 7 deletions apps/wizarr-backend/wizarr_backend/helpers/users.py
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down Expand Up @@ -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!)) {
Expand All @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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,
},
Expand Down Expand Up @@ -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}`, {
Expand Down Expand Up @@ -177,8 +179,5 @@ export default defineComponent({
},
...mapActions(useUsersStore, ["deleteUser"]),
},
mounted() {
this.getProfilePicture();
},
});
</script>
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down Expand Up @@ -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,
Expand All @@ -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: {
Expand All @@ -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;
},
Expand All @@ -172,8 +159,5 @@ export default defineComponent({
this.$toast.info(this.__('Copied to clipboard'));
},
},
mounted() {
this.getProfilePicture();
},
});
</script>

0 comments on commit f1f94e1

Please sign in to comment.