@mundogamernetwork/shared-ui 1.6.0 → 1.7.0

package/components/MediaKit/MgMediaKitLinks.vue

@@ -93,9 +93,9 @@ const save = () => {
 </template>
 
 <style scoped lang="scss">
-.mk-links-editor { border: 1px solid rgba(140, 140, 160, .3); padding: 20px; background: rgba(255, 255, 255, .02); }
+.mk-links-editor { border: 1px solid rgba(140, 140, 160, .3); padding: 20px; background: rgba(255, 255, 255, .02); color: #f2f3f5; }
 .mk-links-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
-.mk-links-head h3 { margin: 0 0 5px; font-size: 17px; }
+.mk-links-head h3 { margin: 0 0 5px; color: #f2f3f5; font-size: 17px; }
 .mk-links-head p, .mk-links-empty { margin: 0; color: #9292a4; font-size: 13px; line-height: 1.5; }
 .mk-link-add, .mk-link-save { border: 1px solid #ffb000; background: #ffb000; color: #090909; min-height: 38px; padding: 0 16px; font-weight: 750; cursor: pointer; white-space: nowrap; }
 button:disabled { opacity: .42; cursor: not-allowed; }
@@ -103,7 +103,8 @@ button:disabled { opacity: .42; cursor: not-allowed; }
 .mk-link-row { display: grid; grid-template-columns: 30px minmax(150px, .75fr) minmax(220px, 1.4fr) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid rgba(140, 140, 160, .25); }
 .mk-link-number { align-self: center; color: #ffb000; font-weight: 800; text-align: center; }
 .mk-link-row label { display: grid; gap: 6px; color: #9292a4; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
-.mk-link-row input { min-width: 0; height: 40px; border: 1px solid rgba(140, 140, 160, .35); background: rgba(0, 0, 0, .2); color: inherit; padding: 0 11px; outline: none; }
+.mk-link-row input { min-width: 0; height: 40px; border: 1px solid rgba(140, 140, 160, .35); background: rgba(0, 0, 0, .2); color: #f2f3f5; padding: 0 11px; outline: none; }
+.mk-link-row input::placeholder { color: #6f7480; }
 .mk-link-row input:focus { border-color: #ffb000; }
 .mk-link-actions { display: flex; gap: 5px; }
 .mk-link-actions button { width: 36px; height: 40px; border: 1px solid rgba(140, 140, 160, .35); background: transparent; color: inherit; cursor: pointer; }

package/components/indie-wall/IndieWallLeaderboard.vue

@@ -26,9 +26,7 @@ const ranked = computed<RankEntry[]>(() => {
 		const key = userId ? `u:${userId}` : email ? `e:${email}` : null
 		if (!key) continue
 
-		const name = s.is_anonymous
-			? t('tv.dashboard.indie_wall.anonymous')
-			: (s.title || s.user?.name || s.guest_name || 'Guest')
+		const name = supporterDisplayName(s)
 
 		if (map.has(key)) {
 			const entry = map.get(key)!
@@ -38,7 +36,7 @@ const ranked = computed<RankEntry[]>(() => {
 			map.set(key, {
 				key,
 				name,
-				avatarUrl: s.user?.avatar_url || null,
+				avatarUrl: supporterAvatarUrl(s),
 				totalPixels: s.pixel_count || 1,
 				purchases: 1,
 				position: 0,
@@ -57,6 +55,21 @@ const visible = computed(() => showAll.value ? ranked.value : ranked.value.slice
 function initials(name: string): string {
 	return name.trim().split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase()
 }
+
+function supporterDisplayName(s: any): string {
+	if (s.is_anonymous) return t('tv.dashboard.indie_wall.anonymous')
+	return s.user?.nickname
+		|| s.user?.username
+		|| s.user?.full_name
+		|| s.user?.name
+		|| s.guest_name
+		|| 'Guest'
+}
+
+function supporterAvatarUrl(s: any): string | null {
+	if (s.is_anonymous) return null
+	return s.user?.avatar_url || s.user?.profile_image || s.user?.avatar || s.user?.image || null
+}
 </script>
 
 <template>

package/locales/de.json

@@ -240,5 +240,120 @@
   "common": {
     "video_thumbnail": "Video-Vorschaubild",
     "expanded_image": "Vergrößertes Bild"
+  },
+  "tv": {
+    "dashboard": {
+      "indie_wall": {
+        "about_section": "Über die Wall",
+        "anonymous": "Anonym",
+        "cancel": "Abbrechen",
+        "confirm_support": "Unterstützung bestätigen",
+        "cta_create_btn": "Create my account",
+        "cta_create_desc": "Create an account to track your support, receive updates, and join other walls.",
+        "cta_create_skip": "Continue without an account",
+        "cta_create_title": "Want to save your support?",
+        "drag_to_crop": "Drag to crop",
+        "error_area_occupied": "This area is already taken. Choose another space on the wall.",
+        "error_gateway": "Could not start payment. Try again.",
+        "error_save": "Could not save your support. Try again.",
+        "filled": "Gefüllt",
+        "footer_create_cta": "Create your own wall",
+        "footer_made_with": "Made with",
+        "goal_card_cta": "Dieses Ziel unterstützen",
+        "goal_card_goal": "Goal",
+        "goal_card_missing": "es fehlen {count} Pixel bis zur nächsten Lieferung",
+        "goal_card_missing_amount": "es fehlen {amount} bis zur nächsten Lieferung",
+        "goal_card_result": "Result",
+        "goal_card_select": "Select goal",
+        "goal_card_you_help": "You help",
+        "goals": "Ziele",
+        "guest_email_label": "Your email",
+        "guest_email_placeholder": "you@email.com",
+        "guest_intro": "You can support without creating an account. Use a name and email to receive confirmation.",
+        "guest_name_label": "Public name",
+        "guest_name_placeholder": "How do you want to appear on the wall?",
+        "just_supported": "Support received",
+        "leaderboard_pixels": "pixels",
+        "leaderboard_purchases": "support",
+        "leaderboard_purchases_plural": "supports",
+        "leaderboard_show_less": "Show less",
+        "leaderboard_show_more": "Show more",
+        "leaderboard_title": "Supporter",
+        "leaderboard_title_span": "leaderboard",
+        "message": "Message",
+        "message_placeholder": "Leave a message for the creator",
+        "mural_by": "by {name}",
+        "mural_click_hint": "Click a pixel to see who supported",
+        "mural_grid": "Wall",
+        "mural_legend_free": "Free",
+        "mural_legend_taken": "Taken",
+        "mural_position": "Position",
+        "mural_support_now": "Support now",
+        "mural_title_field": "Support title",
+        "mural_title_placeholder": "Ex: First pixels of the project",
+        "not_found": "Wall not found.",
+        "pay_agree": "I agree to the support and billing terms.",
+        "pay_agree_rights": "I understand the image and message may appear publicly on the wall.",
+        "pay_paypal": "PayPal",
+        "pay_paypal_meta": "Secure payment through PayPal",
+        "pay_pix": "Pix",
+        "pay_pix_soon": "Coming soon",
+        "pay_stripe": "Card",
+        "pay_stripe_meta": "Secure payment through Stripe",
+        "pixels_available": "Available pixels",
+        "processing_close": "Close",
+        "processing_desc": "We are confirming your support. This may take a few seconds.",
+        "processing_timeout_desc": "Confirmation is taking longer than usual. You can close this and check again later.",
+        "processing_timeout_title": "Still processing",
+        "processing_title": "Processing support",
+        "raised": "Gesammelt",
+        "reached": "Erreicht",
+        "recent_supporters": "Recent supporters",
+        "share_copy_link": "Copy link",
+        "share_join_cta": "Diese Wall ebenfalls unterstützen",
+        "share_pixel_cta": "Diese Unterstützung teilen",
+        "share_pixel_default_desc": "See who is supporting the {wall} wall.",
+        "share_pixel_text": "{name} supported the {wall} wall. Join in and support too.",
+        "share_pixel_title": "{name} supported {wall}",
+        "share_via_facebook": "Share on Facebook",
+        "share_via_twitter": "Share on X",
+        "share_via_whatsapp": "Share on WhatsApp",
+        "sold": "sold",
+        "spots_unit": "Pixel",
+        "step_back": "Back",
+        "step_block_auto": "Choose automatically",
+        "step_block_confirm": "Confirm position",
+        "step_block_help": "Choose where your {count} pixels will appear on the wall.",
+        "step_block_manual": "Choose manually",
+        "step_block_quantity": "Quantity",
+        "step_block_shape": "Shape",
+        "step_block_title": "Choose your space",
+        "step_block_total": "{total} pixels",
+        "step_customize_continue": "Continue",
+        "step_customize_help": "Upload your image, title, and message to appear on the wall.",
+        "step_customize_image": "Support image",
+        "step_customize_image_hint": "Use a square image or crop it before continuing.",
+        "step_customize_link": "Optional link",
+        "step_customize_link_error": "Enter a valid link.",
+        "step_customize_remove_image": "Remove image",
+        "step_customize_replace_image": "Replace image",
+        "step_customize_title": "Customize your support",
+        "step_customize_upload_image": "Upload image",
+        "step_goal_help": "Choose a goal to direct your support.",
+        "step_goal_skip_desc": "Your support goes to the general wall without linking to a specific goal.",
+        "step_goal_skip_title": "Support without a goal",
+        "step_goal_title": "Choose a goal",
+        "step_package_custom_cta": "Set quantity",
+        "step_package_custom_desc": "Choose how many pixels you want to buy.",
+        "step_package_custom_title": "Custom",
+        "step_package_help": "Choose a pixel package for the wall.",
+        "step_package_title": "Choose your package",
+        "step_pay_method": "Payment method",
+        "step_pay_title": "Payment",
+        "step_pay_total": "Total",
+        "supporters": "Unterstützer",
+        "tiers": "Packages"
+      }
+    }
   }
 }

package/locales/en.json

@@ -240,5 +240,120 @@
   "common": {
     "video_thumbnail": "Video thumbnail",
     "expanded_image": "Expanded image"
+  },
+  "tv": {
+    "dashboard": {
+      "indie_wall": {
+        "about_section": "About the wall",
+        "anonymous": "Anonymous",
+        "cancel": "Cancel",
+        "confirm_support": "Confirm support",
+        "cta_create_btn": "Create my account",
+        "cta_create_desc": "Create an account to track your support, receive updates, and join other walls.",
+        "cta_create_skip": "Continue without an account",
+        "cta_create_title": "Want to save your support?",
+        "drag_to_crop": "Drag to crop",
+        "error_area_occupied": "This area is already taken. Choose another space on the wall.",
+        "error_gateway": "Could not start payment. Try again.",
+        "error_save": "Could not save your support. Try again.",
+        "filled": "Filled",
+        "footer_create_cta": "Create your own wall",
+        "footer_made_with": "Made with",
+        "goal_card_cta": "Support this goal",
+        "goal_card_goal": "Goal",
+        "goal_card_missing": "missing {count} pixels for the next delivery",
+        "goal_card_missing_amount": "missing {amount} for the next delivery",
+        "goal_card_result": "Result",
+        "goal_card_select": "Select goal",
+        "goal_card_you_help": "You help",
+        "goals": "Goals",
+        "guest_email_label": "Your email",
+        "guest_email_placeholder": "you@email.com",
+        "guest_intro": "You can support without creating an account. Use a name and email to receive confirmation.",
+        "guest_name_label": "Public name",
+        "guest_name_placeholder": "How do you want to appear on the wall?",
+        "just_supported": "Support received",
+        "leaderboard_pixels": "pixels",
+        "leaderboard_purchases": "support",
+        "leaderboard_purchases_plural": "supports",
+        "leaderboard_show_less": "Show less",
+        "leaderboard_show_more": "Show more",
+        "leaderboard_title": "Supporter",
+        "leaderboard_title_span": "leaderboard",
+        "message": "Message",
+        "message_placeholder": "Leave a message for the creator",
+        "mural_by": "by {name}",
+        "mural_click_hint": "Click a pixel to see who supported",
+        "mural_grid": "Wall",
+        "mural_legend_free": "Free",
+        "mural_legend_taken": "Taken",
+        "mural_position": "Position",
+        "mural_support_now": "Support now",
+        "mural_title_field": "Support title",
+        "mural_title_placeholder": "Ex: First pixels of the project",
+        "not_found": "Wall not found.",
+        "pay_agree": "I agree to the support and billing terms.",
+        "pay_agree_rights": "I understand the image and message may appear publicly on the wall.",
+        "pay_paypal": "PayPal",
+        "pay_paypal_meta": "Secure payment through PayPal",
+        "pay_pix": "Pix",
+        "pay_pix_soon": "Coming soon",
+        "pay_stripe": "Card",
+        "pay_stripe_meta": "Secure payment through Stripe",
+        "pixels_available": "Available pixels",
+        "processing_close": "Close",
+        "processing_desc": "We are confirming your support. This may take a few seconds.",
+        "processing_timeout_desc": "Confirmation is taking longer than usual. You can close this and check again later.",
+        "processing_timeout_title": "Still processing",
+        "processing_title": "Processing support",
+        "raised": "Raised",
+        "reached": "Reached",
+        "recent_supporters": "Recent supporters",
+        "share_copy_link": "Copy link",
+        "share_join_cta": "Support this wall too",
+        "share_pixel_cta": "Share this support",
+        "share_pixel_default_desc": "See who is supporting the {wall} wall.",
+        "share_pixel_text": "{name} supported the {wall} wall. Join in and support too.",
+        "share_pixel_title": "{name} supported {wall}",
+        "share_via_facebook": "Share on Facebook",
+        "share_via_twitter": "Share on X",
+        "share_via_whatsapp": "Share on WhatsApp",
+        "sold": "sold",
+        "spots_unit": "pixels",
+        "step_back": "Back",
+        "step_block_auto": "Choose automatically",
+        "step_block_confirm": "Confirm position",
+        "step_block_help": "Choose where your {count} pixels will appear on the wall.",
+        "step_block_manual": "Choose manually",
+        "step_block_quantity": "Quantity",
+        "step_block_shape": "Shape",
+        "step_block_title": "Choose your space",
+        "step_block_total": "{total} pixels",
+        "step_customize_continue": "Continue",
+        "step_customize_help": "Upload your image, title, and message to appear on the wall.",
+        "step_customize_image": "Support image",
+        "step_customize_image_hint": "Use a square image or crop it before continuing.",
+        "step_customize_link": "Optional link",
+        "step_customize_link_error": "Enter a valid link.",
+        "step_customize_remove_image": "Remove image",
+        "step_customize_replace_image": "Replace image",
+        "step_customize_title": "Customize your support",
+        "step_customize_upload_image": "Upload image",
+        "step_goal_help": "Choose a goal to direct your support.",
+        "step_goal_skip_desc": "Your support goes to the general wall without linking to a specific goal.",
+        "step_goal_skip_title": "Support without a goal",
+        "step_goal_title": "Choose a goal",
+        "step_package_custom_cta": "Set quantity",
+        "step_package_custom_desc": "Choose how many pixels you want to buy.",
+        "step_package_custom_title": "Custom",
+        "step_package_help": "Choose a pixel package for the wall.",
+        "step_package_title": "Choose your package",
+        "step_pay_method": "Payment method",
+        "step_pay_title": "Payment",
+        "step_pay_total": "Total",
+        "supporters": "Supporters",
+        "tiers": "Packages"
+      }
+    }
   }
-}
+}

package/locales/pt-BR.json

@@ -240,5 +240,120 @@
   "common": {
     "video_thumbnail": "Miniatura do vídeo",
     "expanded_image": "Imagem ampliada"
+  },
+  "tv": {
+    "dashboard": {
+      "indie_wall": {
+        "about_section": "Sobre o mural",
+        "anonymous": "Anônimo",
+        "cancel": "Cancelar",
+        "confirm_support": "Confirmar apoio",
+        "cta_create_btn": "Criar minha conta",
+        "cta_create_desc": "Crie uma conta para acompanhar seu apoio, receber atualizações e participar de outros murais.",
+        "cta_create_skip": "Continuar sem criar conta",
+        "cta_create_title": "Quer salvar seu apoio?",
+        "drag_to_crop": "Arraste para recortar",
+        "error_area_occupied": "Essa área já foi ocupada. Escolha outro espaço no mural.",
+        "error_gateway": "Não foi possível iniciar o pagamento. Tente novamente.",
+        "error_save": "Não foi possível salvar seu apoio. Tente novamente.",
+        "filled": "Preenchido",
+        "footer_create_cta": "Crie seu próprio mural",
+        "footer_made_with": "Feito com",
+        "goal_card_cta": "Apoiar esta meta",
+        "goal_card_goal": "Meta",
+        "goal_card_missing": "faltam {count} pixels para a próxima entrega",
+        "goal_card_missing_amount": "faltam {amount} para a próxima entrega",
+        "goal_card_result": "Resultado",
+        "goal_card_select": "Selecionar meta",
+        "goal_card_you_help": "Você ajuda",
+        "goals": "Metas",
+        "guest_email_label": "Seu e-mail",
+        "guest_email_placeholder": "voce@email.com",
+        "guest_intro": "Você pode apoiar sem criar conta. Use um nome e e-mail para receber a confirmação.",
+        "guest_name_label": "Nome público",
+        "guest_name_placeholder": "Como você quer aparecer no mural?",
+        "just_supported": "Apoio recebido",
+        "leaderboard_pixels": "pixels",
+        "leaderboard_purchases": "apoio",
+        "leaderboard_purchases_plural": "apoios",
+        "leaderboard_show_less": "Ver menos",
+        "leaderboard_show_more": "Ver mais",
+        "leaderboard_title": "Ranking",
+        "leaderboard_title_span": "de apoiadores",
+        "message": "Mensagem",
+        "message_placeholder": "Deixe uma mensagem para o criador",
+        "mural_by": "por {name}",
+        "mural_click_hint": "Clique em um pixel para ver quem apoiou",
+        "mural_grid": "Mural",
+        "mural_legend_free": "Livre",
+        "mural_legend_taken": "Ocupado",
+        "mural_position": "Posição",
+        "mural_support_now": "Apoiar agora",
+        "mural_title_field": "Título do apoio",
+        "mural_title_placeholder": "Ex: Primeiros pixels do projeto",
+        "not_found": "Mural não encontrado.",
+        "pay_agree": "Concordo com os termos de apoio e cobrança.",
+        "pay_agree_rights": "Entendo que a imagem e mensagem podem aparecer publicamente no mural.",
+        "pay_paypal": "PayPal",
+        "pay_paypal_meta": "Pagamento seguro via PayPal",
+        "pay_pix": "Pix",
+        "pay_pix_soon": "Disponível em breve",
+        "pay_stripe": "Cartão",
+        "pay_stripe_meta": "Pagamento seguro via Stripe",
+        "pixels_available": "Pixels disponíveis",
+        "processing_close": "Fechar",
+        "processing_desc": "Estamos confirmando seu apoio. Isso pode levar alguns segundos.",
+        "processing_timeout_desc": "A confirmação está demorando mais que o normal. Você pode fechar e conferir novamente depois.",
+        "processing_timeout_title": "Ainda processando",
+        "processing_title": "Processando apoio",
+        "raised": "Arrecadado",
+        "reached": "Concluída",
+        "recent_supporters": "Apoiadores recentes",
+        "share_copy_link": "Copiar link",
+        "share_join_cta": "Apoiar este mural também",
+        "share_pixel_cta": "Compartilhe este apoio",
+        "share_pixel_default_desc": "Veja quem está apoiando o mural {wall}.",
+        "share_pixel_text": "{name} apoiou o mural {wall}. Venha apoiar também.",
+        "share_pixel_title": "{name} apoiou {wall}",
+        "share_via_facebook": "Compartilhar no Facebook",
+        "share_via_twitter": "Compartilhar no X",
+        "share_via_whatsapp": "Compartilhar no WhatsApp",
+        "sold": "vendidos",
+        "spots_unit": "pixels",
+        "step_back": "Voltar",
+        "step_block_auto": "Escolher automaticamente",
+        "step_block_confirm": "Confirmar posição",
+        "step_block_help": "Escolha onde seus {count} pixels aparecerão no mural.",
+        "step_block_manual": "Escolher manualmente",
+        "step_block_quantity": "Quantidade",
+        "step_block_shape": "Formato",
+        "step_block_title": "Escolha seu espaço",
+        "step_block_total": "{total} pixels",
+        "step_customize_continue": "Continuar",
+        "step_customize_help": "Envie sua imagem, título e mensagem para aparecer no mural.",
+        "step_customize_image": "Imagem do apoio",
+        "step_customize_image_hint": "Use uma imagem quadrada ou recorte antes de continuar.",
+        "step_customize_link": "Link opcional",
+        "step_customize_link_error": "Informe um link válido.",
+        "step_customize_remove_image": "Remover imagem",
+        "step_customize_replace_image": "Trocar imagem",
+        "step_customize_title": "Personalize seu apoio",
+        "step_customize_upload_image": "Enviar imagem",
+        "step_goal_help": "Escolha uma meta para direcionar seu apoio.",
+        "step_goal_skip_desc": "Seu apoio entra no mural geral sem vincular a uma meta específica.",
+        "step_goal_skip_title": "Apoiar sem meta",
+        "step_goal_title": "Escolha uma meta",
+        "step_package_custom_cta": "Definir quantidade",
+        "step_package_custom_desc": "Escolha quantos pixels quer comprar.",
+        "step_package_custom_title": "Personalizado",
+        "step_package_help": "Escolha um pacote de pixels para ocupar no mural.",
+        "step_package_title": "Escolha seu pacote",
+        "step_pay_method": "Forma de pagamento",
+        "step_pay_title": "Pagamento",
+        "step_pay_total": "Total",
+        "supporters": "Apoiadores",
+        "tiers": "Pacotes"
+      }
+    }
   }
 }

package/locales/ro.json

@@ -240,5 +240,120 @@
   "common": {
     "video_thumbnail": "Miniatură video",
     "expanded_image": "Imagine mărită"
+  },
+  "tv": {
+    "dashboard": {
+      "indie_wall": {
+        "about_section": "Despre mural",
+        "anonymous": "Anonim",
+        "cancel": "Anulează",
+        "confirm_support": "Confirmă susținerea",
+        "cta_create_btn": "Create my account",
+        "cta_create_desc": "Create an account to track your support, receive updates, and join other walls.",
+        "cta_create_skip": "Continue without an account",
+        "cta_create_title": "Want to save your support?",
+        "drag_to_crop": "Drag to crop",
+        "error_area_occupied": "This area is already taken. Choose another space on the wall.",
+        "error_gateway": "Could not start payment. Try again.",
+        "error_save": "Could not save your support. Try again.",
+        "filled": "Completat",
+        "footer_create_cta": "Create your own wall",
+        "footer_made_with": "Made with",
+        "goal_card_cta": "Susține acest obiectiv",
+        "goal_card_goal": "Goal",
+        "goal_card_missing": "mai lipsesc {count} pixeli pentru următoarea livrare",
+        "goal_card_missing_amount": "mai lipsesc {amount} pentru următoarea livrare",
+        "goal_card_result": "Result",
+        "goal_card_select": "Select goal",
+        "goal_card_you_help": "You help",
+        "goals": "Obiective",
+        "guest_email_label": "Your email",
+        "guest_email_placeholder": "you@email.com",
+        "guest_intro": "You can support without creating an account. Use a name and email to receive confirmation.",
+        "guest_name_label": "Public name",
+        "guest_name_placeholder": "How do you want to appear on the wall?",
+        "just_supported": "Support received",
+        "leaderboard_pixels": "pixels",
+        "leaderboard_purchases": "support",
+        "leaderboard_purchases_plural": "supports",
+        "leaderboard_show_less": "Show less",
+        "leaderboard_show_more": "Show more",
+        "leaderboard_title": "Supporter",
+        "leaderboard_title_span": "leaderboard",
+        "message": "Message",
+        "message_placeholder": "Leave a message for the creator",
+        "mural_by": "by {name}",
+        "mural_click_hint": "Click a pixel to see who supported",
+        "mural_grid": "Wall",
+        "mural_legend_free": "Free",
+        "mural_legend_taken": "Taken",
+        "mural_position": "Poziție",
+        "mural_support_now": "Support now",
+        "mural_title_field": "Support title",
+        "mural_title_placeholder": "Ex: First pixels of the project",
+        "not_found": "Wall not found.",
+        "pay_agree": "I agree to the support and billing terms.",
+        "pay_agree_rights": "I understand the image and message may appear publicly on the wall.",
+        "pay_paypal": "PayPal",
+        "pay_paypal_meta": "Secure payment through PayPal",
+        "pay_pix": "Pix",
+        "pay_pix_soon": "Coming soon",
+        "pay_stripe": "Card",
+        "pay_stripe_meta": "Secure payment through Stripe",
+        "pixels_available": "Available pixels",
+        "processing_close": "Close",
+        "processing_desc": "We are confirming your support. This may take a few seconds.",
+        "processing_timeout_desc": "Confirmation is taking longer than usual. You can close this and check again later.",
+        "processing_timeout_title": "Still processing",
+        "processing_title": "Processing support",
+        "raised": "Strâns",
+        "reached": "Atins",
+        "recent_supporters": "Recent supporters",
+        "share_copy_link": "Copy link",
+        "share_join_cta": "Susține și tu acest mural",
+        "share_pixel_cta": "Distribuie această susținere",
+        "share_pixel_default_desc": "See who is supporting the {wall} wall.",
+        "share_pixel_text": "{name} supported the {wall} wall. Join in and support too.",
+        "share_pixel_title": "{name} supported {wall}",
+        "share_via_facebook": "Share on Facebook",
+        "share_via_twitter": "Share on X",
+        "share_via_whatsapp": "Share on WhatsApp",
+        "sold": "sold",
+        "spots_unit": "pixeli",
+        "step_back": "Back",
+        "step_block_auto": "Choose automatically",
+        "step_block_confirm": "Confirm position",
+        "step_block_help": "Choose where your {count} pixels will appear on the wall.",
+        "step_block_manual": "Choose manually",
+        "step_block_quantity": "Quantity",
+        "step_block_shape": "Shape",
+        "step_block_title": "Choose your space",
+        "step_block_total": "{total} pixels",
+        "step_customize_continue": "Continue",
+        "step_customize_help": "Upload your image, title, and message to appear on the wall.",
+        "step_customize_image": "Support image",
+        "step_customize_image_hint": "Use a square image or crop it before continuing.",
+        "step_customize_link": "Optional link",
+        "step_customize_link_error": "Enter a valid link.",
+        "step_customize_remove_image": "Remove image",
+        "step_customize_replace_image": "Replace image",
+        "step_customize_title": "Customize your support",
+        "step_customize_upload_image": "Upload image",
+        "step_goal_help": "Choose a goal to direct your support.",
+        "step_goal_skip_desc": "Your support goes to the general wall without linking to a specific goal.",
+        "step_goal_skip_title": "Support without a goal",
+        "step_goal_title": "Choose a goal",
+        "step_package_custom_cta": "Set quantity",
+        "step_package_custom_desc": "Choose how many pixels you want to buy.",
+        "step_package_custom_title": "Custom",
+        "step_package_help": "Choose a pixel package for the wall.",
+        "step_package_title": "Choose your package",
+        "step_pay_method": "Payment method",
+        "step_pay_title": "Payment",
+        "step_pay_total": "Total",
+        "supporters": "Susținători",
+        "tiers": "Packages"
+      }
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/mural/[slug].vue

@@ -281,7 +281,22 @@ async function onStepperSuccess() {
 
 function supporterDisplayName(s: any): string {
     if (s.is_anonymous) return t('tv.dashboard.indie_wall.anonymous')
-    return s.title || s.user?.name || t('tv.dashboard.indie_wall.anonymous')
+    return s.user?.nickname
+        || s.user?.username
+        || s.user?.full_name
+        || s.user?.name
+        || s.guest_name
+        || t('tv.dashboard.indie_wall.anonymous')
+}
+
+function supporterAvatarUrl(s: any): string {
+    if (s.is_anonymous) return ''
+    return s.user?.avatar_url || s.user?.profile_image || s.user?.avatar || s.user?.image || ''
+}
+
+function supporterTitle(s: any): string {
+    if (!s?.title) return ''
+    return s.title !== supporterDisplayName(s) ? s.title : ''
 }
 
 const requestUrl = useRequestURL()
@@ -601,11 +616,11 @@ onUnmounted(() => {
                     </div>
                     <div class="supp-body">
                         <div class="supp-identity">
-                            <img v-if="s.user?.avatar_url || s.user?.profile_image" :src="s.user.avatar_url || s.user.profile_image" class="supp-avi" alt="" />
+                            <img v-if="supporterAvatarUrl(s)" :src="supporterAvatarUrl(s)" class="supp-avi" alt="" />
                             <div v-else class="supp-avi-init">{{ (supporterDisplayName(s)[0] || '?').toUpperCase() }}</div>
                             <div class="supp-user-info">
                                 <span class="supp-name">{{ supporterDisplayName(s) }}</span>
-                                <span v-if="!s.is_anonymous && !s.user && s.guest_email" class="supp-email">{{ s.guest_email }}</span>
+                                <span v-if="supporterTitle(s)" class="supp-title">{{ supporterTitle(s) }}</span>
                             </div>
                             <span class="supp-amount">{{ formatMoney(Number(s.amount_paid || 0), wall.currency) }}</span>
                         </div>
@@ -721,6 +736,7 @@ onUnmounted(() => {
                     </div>
                     <div class="detail-body">
                         <p class="detail-name">{{ supporterDisplayName(detailPixel) }}</p>
+                        <p v-if="supporterTitle(detailPixel)" class="detail-support-title">{{ supporterTitle(detailPixel) }}</p>
                         <p v-if="detailPixel.supporter_message" class="detail-msg">"{{ detailPixel.supporter_message }}"</p>
                         <div class="detail-amount-row">
                             <span class="detail-amount-label">{{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
@@ -1006,7 +1022,7 @@ onUnmounted(() => {
     color: var(--title-fg, #fff); font-size: 0.78rem; font-weight: 500;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.supp-email {
+.supp-title {
     color: var(--secondary-info-fg, #666); font-size: 0.65rem;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
@@ -1051,7 +1067,11 @@ onUnmounted(() => {
 }
 .detail-body { padding: 20px; }
 .detail-name {
-    font-size: 1.1rem; font-weight: 700; color: var(--title-fg, #fff); margin: 0 0 8px;
+    font-size: 1.1rem; font-weight: 700; color: var(--title-fg, #fff); margin: 0 0 4px;
+}
+.detail-support-title {
+    color: var(--secondary-info-fg, #aaa); font-size: 0.78rem;
+    line-height: 1.35; margin: 0 0 10px;
 }
 .detail-msg {
     color: var(--secondary-info-fg, #aaa); font-size: 0.875rem; font-style: italic;

package/pages/widget/wall/[id].vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="widget-root" :style="{ '--accent': alertPixel?.background_color || '#FDB215' }">
+    <!-- Canvas -->
+    <div class="widget-canvas-wrap">
+      <div ref="canvasEl" class="widget-canvas" :style="canvasStyle">
+        <div
+          v-for="pixel in visiblePixels"
+          :key="pixel.id"
+          class="widget-pixel"
+          :class="{ 'widget-pixel--new': newPixelIds.has(pixel.id) }"
+          :style="pixelStyle(pixel)"
+        >
+          <img v-if="pixel.image_url" :src="pixel.image_url" class="widget-pixel__img" alt="" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Alert overlay -->
+    <transition name="alert-slide">
+      <div v-if="alertPixel" :key="alertKey" class="widget-alert">
+        <div class="widget-alert__avatar">
+          <img v-if="alertPixel.buyer_avatar" :src="alertPixel.buyer_avatar" alt="" />
+          <span v-else>{{ (alertPixel.buyer_name || '?')[0].toUpperCase() }}</span>
+        </div>
+        <div class="widget-alert__info">
+          <strong>{{ alertPixel.buyer_name || 'Anonymous' }}</strong>
+          <span v-if="alertPixel.tier_name"> · {{ alertPixel.tier_name }}</span>
+          <span> · {{ alertPixel.pixel_count || 1 }} pixel{{ (alertPixel.pixel_count || 1) > 1 ? 's' : '' }}</span>
+          <p v-if="alertPixel.message" class="widget-alert__msg">{{ alertPixel.message }}</p>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fetchPublicWall, getWallSupporters, getWallEventsUrl } from '../../../services/indieWallService'
+
+definePageMeta({ layout: 'blank' })
+
+const route = useRoute()
+const wallId = route.params.id as string
+const token = (route.query.token as string) || ''
+
+const CELL_SIZE = 12
+
+interface Pixel {
+  id: number; x: number; y: number
+  width?: number; height?: number; pixel_count?: number
+  background_color?: string; image_url?: string
+  title?: string; message?: string
+  buyer_name?: string; buyer_avatar?: string
+  tier_name?: string; status?: boolean
+}
+
+interface Wall {
+  id: number; width: number; height: number; name?: string
+}
+
+const wall = ref<Wall | null>(null)
+const pixels = ref<Pixel[]>([])
+const newPixelIds = ref(new Set<number>())
+const alertPixel = ref<Pixel | null>(null)
+const alertKey = ref(0)
+const canvasEl = ref<HTMLDivElement | null>(null)
+
+let alertTimer: ReturnType<typeof setTimeout> | null = null
+let audioCtx: AudioContext | null = null
+let es: EventSource | null = null
+
+const visiblePixels = computed(() => pixels.value.filter(p => p.status !== false))
+
+const canvasStyle = computed(() => {
+  if (!wall.value) return {}
+  return {
+    position: 'relative' as const,
+    width: `${wall.value.width * CELL_SIZE}px`,
+    height: `${wall.value.height * CELL_SIZE}px`,
+  }
+})
+
+function pixelStyle(pixel: Pixel) {
+  const w = pixel.width ?? 1
+  const h = pixel.height ?? 1
+  return {
+    position: 'absolute' as const,
+    left: `${pixel.x * CELL_SIZE}px`,
+    top: `${pixel.y * CELL_SIZE}px`,
+    width: `${w * CELL_SIZE}px`,
+    height: `${h * CELL_SIZE}px`,
+    backgroundColor: pixel.image_url ? 'transparent' : (pixel.background_color || '#FDB215'),
+    overflow: 'hidden',
+  }
+}
+
+function unlockAudio() {
+  if (!audioCtx) audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)()
+  if (audioCtx.state === 'suspended') audioCtx.resume()
+}
+
+let audioUnlockInterval: ReturnType<typeof setInterval> | null = null
+
+function playChime() {
+  if (!audioCtx) return
+  try {
+    const osc = audioCtx.createOscillator()
+    const gain = audioCtx.createGain()
+    osc.connect(gain)
+    gain.connect(audioCtx.destination)
+    osc.type = 'sine'
+    const t = audioCtx.currentTime
+    osc.frequency.setValueAtTime(880, t)
+    osc.frequency.linearRampToValueAtTime(1320, t + 0.12)
+    gain.gain.setValueAtTime(0.4, t)
+    gain.gain.exponentialRampToValueAtTime(0.001, t + 0.8)
+    osc.start(t)
+    osc.stop(t + 0.8)
+  } catch {}
+}
+
+function showAlert(pixel: Pixel) {
+  alertPixel.value = pixel
+  alertKey.value++
+  if (alertTimer) clearTimeout(alertTimer)
+  alertTimer = setTimeout(() => { alertPixel.value = null }, 7000)
+  playChime()
+}
+
+function addNewPixel(data: any) {
+  const pixel: Pixel = {
+    id: data.pixel_id || Date.now(),
+    x: data.x, y: data.y,
+    pixel_count: data.pixel_count,
+    width: data.pixel_count, height: 1,
+    background_color: data.background_color,
+    image_url: data.image_url,
+    message: data.message,
+    buyer_name: data.buyer_name,
+    tier_name: data.tier_name,
+    status: true,
+  }
+  pixels.value.push(pixel)
+  newPixelIds.value = new Set([...newPixelIds.value, pixel.id])
+  setTimeout(() => {
+    const next = new Set(newPixelIds.value)
+    next.delete(pixel.id)
+    newPixelIds.value = next
+  }, 3000)
+  showAlert(pixel)
+}
+
+function connectSSE() {
+  if (!token) return
+  es = new EventSource(getWallEventsUrl(wallId, token))
+  es.addEventListener('purchase', (e: MessageEvent) => {
+    try { addNewPixel(JSON.parse(e.data)) } catch {}
+  })
+  es.onerror = () => {
+    es?.close()
+    setTimeout(connectSSE, 5000)
+  }
+}
+
+onMounted(async () => {
+  // OBS's embedded Chromium runs every Browser Source with autoplay unlocked
+  // by default, so resume() succeeds here with no user gesture. This widget
+  // runs unattended during a live stream — a click/keydown would never fire.
+  unlockAudio()
+  audioUnlockInterval = setInterval(() => {
+    if (!audioCtx) { unlockAudio(); return }
+    if (audioCtx.state === 'running') {
+      if (audioUnlockInterval) clearInterval(audioUnlockInterval)
+      return
+    }
+    audioCtx.resume().catch(() => {})
+  }, 3000)
+
+  try {
+    const [wallRes, pixelRes] = await Promise.all([
+      fetchPublicWall(wallId),
+      getWallSupporters(wallId, { per_page: 'all' }),
+    ])
+    wall.value = (wallRes as any)?.data ?? wallRes
+    pixels.value = ((pixelRes as any)?.data ?? []).filter((p: Pixel) => p.status !== false)
+  } catch {}
+  connectSSE()
+})
+
+onBeforeUnmount(() => {
+  es?.close()
+  if (alertTimer) clearTimeout(alertTimer)
+  if (audioUnlockInterval) clearInterval(audioUnlockInterval)
+})
+</script>
+
+<style scoped lang="scss">
+.widget-root {
+  background: transparent;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.widget-canvas-wrap {
+  overflow: auto;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+.widget-canvas {
+  background: #0d0d0d;
+  background-image:
+    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+  background-size: 12px 12px;
+}
+
+.widget-pixel {
+  box-sizing: border-box;
+
+  &__img {
+    width: 100%; height: 100%;
+    object-fit: cover; display: block;
+  }
+
+  &--new {
+    animation: pixel-pop 0.4s ease-out, pixel-glow 2.5s ease-out forwards;
+  }
+}
+
+@keyframes pixel-pop {
+  0%   { transform: scale(0.5); opacity: 0.6; }
+  60%  { transform: scale(1.15); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes pixel-glow {
+  0%   { box-shadow: 0 0 10px 3px var(--accent, #64D8FF); }
+  80%  { box-shadow: 0 0 4px 1px color-mix(in srgb, var(--accent, #64D8FF) 50%, transparent); }
+  100% { box-shadow: none; }
+}
+
+.widget-alert {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(13,13,13,0.92);
+  border: 1px solid var(--accent, #64D8FF);
+  padding: 12px 20px;
+  max-width: 400px;
+  z-index: 100;
+  box-shadow: 0 0 20px rgba(100, 216, 255, 0.2);
+
+  &__avatar {
+    width: 44px; height: 44px;
+    background: var(--accent, #64D8FF);
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; color: #000; font-size: 18px;
+    overflow: hidden;
+
+    img { width: 100%; height: 100%; object-fit: cover; }
+  }
+
+  &__info {
+    flex: 1;
+    color: #fff;
+    font-size: 14px;
+    line-height: 1.4;
+
+    strong { color: var(--accent, #64D8FF); }
+  }
+
+  &__msg {
+    margin: 4px 0 0;
+    font-size: 12px;
+    color: #aaa;
+    font-style: italic;
+  }
+}
+
+.alert-slide-enter-active,
+.alert-slide-leave-active { transition: all 0.3s ease; }
+.alert-slide-enter-from,
+.alert-slide-leave-to { opacity: 0; transform: translateX(-50%) translateY(20px); }
+</style>