mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import React from 'react'
|
|
import { getUriWithOrg } from '@services/config/config'
|
|
import { useParams } from 'next/navigation'
|
|
import { getUserAvatarMediaDirectory } from '@services/media/media'
|
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
|
|
|
type UserAvatarProps = {
|
|
width?: number
|
|
avatar_url?: string
|
|
use_with_session?: boolean
|
|
rounded?: 'rounded-md' | 'rounded-xl' | 'rounded-lg' | 'rounded-full' | 'rounded'
|
|
border?: 'border-2' | 'border-4' | 'border-8'
|
|
borderColor?: string
|
|
predefined_avatar?: 'ai' | 'empty'
|
|
backgroundColor?: 'bg-white' | 'bg-gray-100'
|
|
}
|
|
|
|
function UserAvatar(props: UserAvatarProps) {
|
|
const session = useLHSession() as any
|
|
const params = useParams() as any
|
|
|
|
const isExternalUrl = (url: string): boolean => {
|
|
return url.startsWith('http://') || url.startsWith('https://')
|
|
}
|
|
|
|
const extractExternalUrl = (url: string): string | null => {
|
|
// Check if the URL contains an embedded external URL
|
|
const matches = url.match(/avatars\/(https?:\/\/[^/]+.*$)/)
|
|
if (matches && matches[1]) {
|
|
return matches[1]
|
|
}
|
|
return null
|
|
}
|
|
|
|
const getAvatarUrl = (): string => {
|
|
// If predefined avatar is specified
|
|
if (props.predefined_avatar) {
|
|
const avatarType = props.predefined_avatar === 'ai' ? 'ai_avatar.png' : 'empty_avatar.png'
|
|
return getUriWithOrg(params.orgslug, `/${avatarType}`)
|
|
}
|
|
|
|
// If avatar_url prop is provided
|
|
if (props.avatar_url) {
|
|
// Check if it's a malformed URL (external URL processed through getUserAvatarMediaDirectory)
|
|
const extractedUrl = extractExternalUrl(props.avatar_url)
|
|
if (extractedUrl) {
|
|
return extractedUrl
|
|
}
|
|
// If it's a direct external URL
|
|
if (isExternalUrl(props.avatar_url)) {
|
|
return props.avatar_url
|
|
}
|
|
// Otherwise use as is
|
|
return props.avatar_url
|
|
}
|
|
|
|
// If user has an avatar in session
|
|
if (session?.data?.user?.avatar_image) {
|
|
const avatarUrl = session.data.user.avatar_image
|
|
// If it's an external URL (e.g., from Google, Facebook, etc.), use it directly
|
|
if (isExternalUrl(avatarUrl)) {
|
|
return avatarUrl
|
|
}
|
|
// Otherwise, get the local avatar URL
|
|
return getUserAvatarMediaDirectory(session.data.user.user_uuid, avatarUrl)
|
|
}
|
|
|
|
// Fallback to empty avatar
|
|
return getUriWithOrg(params.orgslug, '/empty_avatar.png')
|
|
}
|
|
|
|
return (
|
|
<img
|
|
alt="User Avatar"
|
|
width={props.width ?? 50}
|
|
height={props.width ?? 50}
|
|
src={getAvatarUrl()}
|
|
className={`
|
|
${props.avatar_url && session?.data?.user?.avatar_image ? '' : 'bg-gray-700'}
|
|
${props.border ? `border ${props.border}` : ''}
|
|
${props.borderColor ?? 'border-white'}
|
|
${props.backgroundColor ?? 'bg-gray-100'}
|
|
shadow-xl
|
|
aspect-square
|
|
w-[${props.width ?? 50}px]
|
|
h-[${props.width ?? 50}px]
|
|
${props.rounded ?? 'rounded-xl'}
|
|
`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default UserAvatar
|