Background color By musicland ai

functions/src/cover.js

@@ -16,6 +16,7 @@ const { sendNotification } = require('./notifications')
 const bucket = admin.storage().bucket()
 const BRAND_TEXT = 'By Musicland.ai'
 const BRAND_FONT_FAMILY = 'Poppins, Montserrat, Arial, sans-serif'
+const BRAND_BG_COLOR = 'rgba(0,0,0,0.65)'
 
 const escapeSvgText = (value = '') =>
   String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -29,7 +30,20 @@ const buildBrandSvg = ({ width = 1024, height = 1024, text = BRAND_TEXT } = {})
   const strokeWidth = Math.max(2, Math.round(fontSize * 0.08))
   const shadowDy = Math.max(2, Math.round(fontSize * 0.08))
   const shadowBlur = Math.max(4, Math.round(fontSize * 0.18))
+  const paddingX = Math.max(10, Math.round(fontSize * 0.7))
+  const paddingY = Math.max(6, Math.round(fontSize * 0.4))
+  const approxCharWidth = fontSize * 0.62
   const safeText = escapeSvgText(text)
+  const textLength = safeText.length
+  const textWidth =
+    approxCharWidth * textLength + letterSpacing * Math.max(0, textLength - 1)
+  const rectWidth = Math.max(0, Math.round(textWidth + paddingX * 2))
+  const rectHeight = Math.round(fontSize + paddingY * 2)
+  const rectX = Math.max(0, Math.round(safeWidth - margin - rectWidth))
+  const rectY = Math.max(0, Math.round(safeHeight - margin - rectHeight))
+  const textX = rectX + rectWidth / 2
+  const textY = rectY + rectHeight / 2
+  const rectRadius = Math.max(6, Math.round(rectHeight * 0.35))
 
   return Buffer.from(`
 <svg width="${safeWidth}" height="${safeHeight}" viewBox="0 0 ${safeWidth} ${safeHeight}" xmlns="http://www.w3.org/2000/svg">
@@ -38,11 +52,20 @@ const buildBrandSvg = ({ width = 1024, height = 1024, text = BRAND_TEXT } = {})
       <feDropShadow dx="0" dy="${shadowDy}" stdDeviation="${shadowBlur}" flood-color="rgba(0,0,0,0.55)" />
     </filter>
   </defs>
+  <rect
+    x="${rectX}"
+    y="${rectY}"
+    width="${rectWidth}"
+    height="${rectHeight}"
+    rx="${rectRadius}"
+    ry="${rectRadius}"
+    fill="${BRAND_BG_COLOR}"
+  />
   <text
-    x="${safeWidth - margin}"
-    y="${safeHeight - margin}"
-    text-anchor="end"
-    dominant-baseline="alphabetic"
+    x="${textX}"
+    y="${textY}"
+    text-anchor="middle"
+    dominant-baseline="middle"
     font-family="${BRAND_FONT_FAMILY}"
     font-size="${fontSize}"
     font-style="italic"