diff --git a/frontend/src/components/PrintView.css b/frontend/src/components/PrintView.css index 6fc0aa4..c5848b5 100644 --- a/frontend/src/components/PrintView.css +++ b/frontend/src/components/PrintView.css @@ -112,6 +112,31 @@ border-radius: 8px; } +.print-gif-container { + position: relative; + display: inline-block; + width: 100%; +} + +.print-gif-overlay { + position: absolute; + top: 8px; + right: 8px; + pointer-events: none; +} + +.print-gif-label { + background: rgba(0,0,0,0.7); + color: white; + padding: 4px 10px; + border-radius: 4px; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); +} + .print-message-media video { max-width: 100%; height: auto; @@ -120,6 +145,33 @@ background: #000; } +.print-video-container { + position: relative; + display: inline-block; + width: 100%; + border-radius: 8px; + overflow: hidden; +} + +.print-video-overlay { + position: absolute; + top: 8px; + right: 8px; + pointer-events: none; +} + +.print-video-label { + background: rgba(0,0,0,0.7); + color: white; + padding: 4px 10px; + border-radius: 4px; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); +} + .print-media-placeholder { padding: 20px; background: #f8f9fa; diff --git a/frontend/src/components/PrintView.jsx b/frontend/src/components/PrintView.jsx index 2735a23..a5b8a60 100644 --- a/frontend/src/components/PrintView.jsx +++ b/frontend/src/components/PrintView.jsx @@ -56,13 +56,15 @@ function PrintView() { setMessages(items) console.log('Messages state set') - // Get contact name from any message in the list (they should all have the same contact_name) - const contactName = items.find(item => item.contact_name)?.contact_name || address - console.log('Contact name:', contactName) + // Get contact name and subject from any item in the list + const contactName = items.find(item => item.contact_name)?.contact_name + const subject = items.find(item => item.subject)?.subject + console.log('Contact name:', contactName, 'Subject:', subject) setConversation({ address, - contactName + contactName, + subject }) // Count total media items - need to check nested message for media_type @@ -149,6 +151,66 @@ function PrintView() { } } + const formatSinglePhoneNumber = (number) => { + if (!number) return 'Unknown' + + // Remove all non-digit characters + const cleaned = number.replace(/\D/g, '') + + // Handle 11-digit numbers (e.g., +1 country code) + if (cleaned.length === 11 && cleaned.startsWith('1')) { + const areaCode = cleaned.slice(1, 4) + const firstPart = cleaned.slice(4, 7) + const secondPart = cleaned.slice(7, 11) + return `+1 (${areaCode}) ${firstPart}-${secondPart}` + } + + // Handle 10-digit numbers + if (cleaned.length === 10) { + const areaCode = cleaned.slice(0, 3) + const firstPart = cleaned.slice(3, 6) + const secondPart = cleaned.slice(6, 10) + return `(${areaCode}) ${firstPart}-${secondPart}` + } + + // Return as-is if format doesn't match + return number + } + + const formatPhoneNumber = (number) => { + if (!number) return 'Unknown' + + // Handle comma-separated numbers (group conversations) + if (number.includes(',')) { + const numbers = number.split(',').map(n => n.trim()) + return numbers.map(n => formatSinglePhoneNumber(n)).join(', ') + } + + return formatSinglePhoneNumber(number) + } + + const shouldDisplaySubject = (subject) => { + if (!subject) return false + // Filter out subjects that are just "Message" or look auto-generated + const lowerSubject = subject.toLowerCase() + if (lowerSubject === 'message' || lowerSubject === 'no subject') return false + return true + } + + const getDisplayName = (conv) => { + // If we have a valid subject, use it when contact_name is empty, "(Unknown)", or looks like an 8-digit number + if (conv.subject && shouldDisplaySubject(conv.subject)) { + if (!conv.contactName || conv.contactName === '(Unknown)' || /^\d{8}$/.test(conv.contactName)) { + return conv.subject + } + } + // If contact_name is empty, null, or "(Unknown)", use formatted phone number + if (!conv.contactName || conv.contactName === '(Unknown)') { + return formatPhoneNumber(conv.address) + } + return conv.contactName + } + const formatDuration = (seconds) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 @@ -227,20 +289,32 @@ function PrintView() { {message.media_type && (