feat: cover

functions/src/cover.js

@@ -32,40 +32,56 @@ const normalizeArtistName = (value) => {
   return trimmedValue || 'MusicLand'
 }
 
-const getArtistFontSize = (artistName) => {
-  if (artistName.length <= 16) return 52
-  if (artistName.length <= 24) return 44
+const normalizeSongTitle = (value) => {
+  if (typeof value !== 'string') {
+    return 'Sans titre'
+  }
+  const trimmedValue = value.trim()
+  return trimmedValue || 'Sans titre'
+}
+
+const getTitleFontSize = (songTitle) => {
+  if (songTitle.length <= 16) return 38
+  if (songTitle.length <= 24) return 32
+  return 26
+}
+
+const getUsernameFontSize = (username) => {
+  if (username.length <= 16) return 52
+  if (username.length <= 24) return 44
   return 36
 }
 
-const buildTextOverlay = (artistName) => {
-  const safeArtistName = escapeSvgText(artistName)
-  const artistFontSize = getArtistFontSize(artistName)
+const buildTextOverlay = ({ songTitle, username }) => {
+  const safeSongTitle = escapeSvgText(songTitle)
+  const safeUsername = escapeSvgText(username)
+  const titleFontSize = getTitleFontSize(songTitle)
+  const usernameFontSize = getUsernameFontSize(username)
 
   return Buffer.from(`
 <svg width="${COVER_SIZE}" height="${COVER_SIZE}" viewBox="0 0 ${COVER_SIZE} ${COVER_SIZE}" xmlns="http://www.w3.org/2000/svg">
   <text
     x="512"
-    y="824"
+    y="170"
     text-anchor="middle"
     dominant-baseline="middle"
     font-family="${FONT_FAMILY}"
-    font-size="${artistFontSize}"
+    font-size="${titleFontSize}"
     font-weight="400"
-    letter-spacing="3"
+    letter-spacing="2"
     fill="#FFFFFF"
-  >${safeArtistName}</text>
+  >${safeSongTitle}</text>
   <text
     x="512"
     y="963"
     text-anchor="middle"
     dominant-baseline="middle"
     font-family="${FONT_FAMILY}"
-    font-size="54"
+    font-size="${usernameFontSize}"
     font-weight="400"
-    letter-spacing="5"
+    letter-spacing="4"
     fill="#FFFFFF"
-  >PLAYBACKER</text>
+  >${safeUsername}</text>
 </svg>`)
 }
 
@@ -90,26 +106,28 @@ const buildCircularMask = (size) => {
 }
 
 async function loadCoverIdentity(project) {
-  const artistName = normalizeArtistName(project.userName)
+  const username = normalizeArtistName(project.userName)
+  const songTitle = normalizeSongTitle(project.title)
   const userId = typeof project.userId === 'string' ? project.userId.trim() : ''
 
   if (!userId) {
-    return { artistName, profilePictureURL: null }
+    return { songTitle, username, profilePictureURL: project.coverCenterImageURL || null }
   }
 
   try {
     const userSnapshot = await refList.users.doc(userId).get()
     const userData = userSnapshot.exists ? userSnapshot.data() : null
     return {
-      artistName: normalizeArtistName(project.userName || userData?.userName),
-      profilePictureURL: userData?.profilePictureURL || null,
+      songTitle,
+      username: normalizeArtistName(project.userName || userData?.userName),
+      profilePictureURL: project.coverCenterImageURL || userData?.profilePictureURL || null,
     }
   } catch (error) {
     logger.warn('[Cover] Unable to load profile picture', {
       projectId: project.id,
       error: error.message,
     })
-    return { artistName, profilePictureURL: null }
+    return { songTitle, username, profilePictureURL: project.coverCenterImageURL || null }
   }
 }
 
@@ -169,9 +187,9 @@ async function prepareMusiclandCover(project) {
     throw new Error('Utilisateur du projet introuvable')
   }
 
-  const { artistName, profilePictureURL } = await loadCoverIdentity(project)
+  const { songTitle, username, profilePictureURL } = await loadCoverIdentity(project)
   const profileOverlay = await buildProfileOverlay(profilePictureURL)
-  const overlays = [{ input: buildTextOverlay(artistName), left: 0, top: 0 }]
+  const overlays = [{ input: buildTextOverlay({ songTitle, username }), left: 0, top: 0 }]
 
   if (profileOverlay) {
     overlays.unshift({