☰

Audible HQ Cover

Full-res cover images on Audible, with 'open' and 'download' actions.

// ==UserScript==
// @name         Audible HQ Cover
// @namespace    https://greasyfork.org/en/users/1370205
// @version      0.2.3
// @description  Full-res cover images on Audible, with 'open' and 'download' actions.
// @license      MIT
// @match        https://*.audible.*/pd/*
// @match        https://*.audible.*/ac/*
// ==/UserScript==

const MARKETPLACE = {
	us: { tld: 'com', flag: '🇺🇸', name: 'US' },
	uk: { tld: 'co.uk', flag: '🇬🇧', name: 'UK' },
	ca: { tld: 'ca', flag: '🇨🇦', name: 'Canada' },
	au: { tld: 'com.au', flag: '🇦🇺', name: 'Australia' },
	de: { tld: 'de', flag: '🇩🇪', name: 'Germany' },
	fr: { tld: 'fr', flag: '🇫🇷', name: 'France' },
	es: { tld: 'es', flag: '🇪🇸', name: 'Spain' },
	it: { tld: 'it', flag: '🇮🇹', name: 'Italy' },
	in: { tld: 'in', flag: '🇮🇳', name: 'India' },
	jp: { tld: 'co.jp', flag: '🇯🇵', name: 'Japan' },
	br: { tld: 'com.br', flag: '🇧🇷', name: 'Brazil' },
}

function extractRegionFromUrl(url) {
	try {
		const { hostname } = new URL(url)
		for (const [key, marketplace] of Object.entries(MARKETPLACE)) {
			if (hostname.endsWith(marketplace.tld)) {
				return key
			}
		}
		return null
	} catch (e) {
		console.error('Invalid URL:', e)
		return null
	}
}

function extractAsinFromUrl(url) {
	const asinMatch = url.pathname.match(/\/([A-Z0-9]{10})/)
	return asinMatch ? asinMatch[1] : null
}

function getTld(region) {
	return MARKETPLACE[region].tld || 'com'
}

function getAudibleApiUrl(region) {
	const tld = getTld(region)
	return new URL(`https://api.audible.${tld}/1.0`).href
}

const fetchProductData = async (region, asin, query) => {
	const baseUrl = getAudibleApiUrl(region)
	const url = new URL(`${baseUrl}/catalog/products/${asin}`)

	url.searchParams.append('num_results', '1')
	Object.entries(query).forEach(([key, value]) => {
		url.searchParams.append(key, value)
	})

	const response = await fetch(url.href, {
		method: 'GET',
		headers: {
			'Content-Type': 'application/json',
		},
	})

	if (!response.ok) {
		throw new Error(`HTTP error! status: ${response.status}`)
	}

	return await response.json()
}

async function fetchAudibleProductImages(region, asin) {
	const data = await fetchProductData(region, asin, {
		response_groups: 'media',
		image_sizes: 2400,
		num_results: '1',
	})
	return data.product.product_images
}

function extractParams() {
	const url = window.location
	const region = extractRegionFromUrl(url)
	const asin = extractAsinFromUrl(url)
	return { region, asin }
}

function downloadImage(imageUrl, fileName) {
	fetch(imageUrl)
		.then((response) => response.blob())
		.then((blob) => {
			const url = window.URL.createObjectURL(blob)
			const link = document.createElement('a')
			link.href = url
			link.download = fileName
			link.style.display = 'none'
			document.body.appendChild(link)
			link.click()
			window.URL.revokeObjectURL(url)
			document.body.removeChild(link)
		})
		.catch((error) => console.error('Error downloading image:', error))
}

function createActionButton(iconUrl, title, onClick) {
	const button = document.createElement('button')
	button.title = title
	button.setAttribute('data-hidden', 'true')

	const icon = document.createElement('img')
	icon.src = iconUrl
	icon.alt = title

	button.appendChild(icon)
	button.addEventListener('click', (e) => {
		e.stopPropagation()
		e.preventDefault()
		onClick()
	})

	return button
}

function wrapCoverWithLink(imageElement, coverUrl) {
	const linkElement = document.createElement('a')
	linkElement.href = coverUrl
	linkElement.className = 'cover-link'
	linkElement.title = 'Open cover'
	linkElement.target = '_blank'
	imageElement.parentNode.insertBefore(linkElement, imageElement)
	linkElement.appendChild(imageElement)
}

function enhanceCoverImage(coverUrl, asin) {
	const imageElement = document.querySelector(
		'img.bc-pub-block.bc-image-inset-border.js-only-element'
	)

	if (imageElement) {
		const containerElement = document.createElement('div')
		containerElement.className = 'container'

		imageElement.parentNode.insertBefore(containerElement, imageElement)
		containerElement.appendChild(imageElement)

		wrapCoverWithLink(imageElement, coverUrl)

		const coverActionsContainer = document.createElement('div')
		coverActionsContainer.className = 'cover-actions-container'

		const hqButton = createActionButton(
			'https://api.iconify.design/solar:high-quality-bold.svg',
			'Load HQ cover',
			() => {
				imageElement.src = coverUrl
				hqButton.classList.add('action-btn-disabled')
				hqButton.title = 'HQ cover loaded'
			}
		)

		const downloadButton = createActionButton(
			'https://api.iconify.design/solar:download-square-bold.svg',
			'Download cover',
			() => downloadImage(coverUrl, `${asin}.jpg`)
		)

		coverActionsContainer.appendChild(hqButton)
		coverActionsContainer.appendChild(downloadButton)

		containerElement.appendChild(coverActionsContainer)

		containerElement.addEventListener('mouseenter', () => {
			downloadButton.setAttribute('data-hidden', false)
			hqButton.setAttribute('data-hidden', false)
		})
		containerElement.addEventListener('mouseleave', () => {
			downloadButton.setAttribute('data-hidden', true)
			hqButton.setAttribute('data-hidden', true)
		})
	} else {
		console.warn('Cover image element not found.')
	}
}

const COVER_SIZE = 2400

const main = async () => {
	try {
		const { region, asin } = extractParams()

		if (!region || !asin) {
			throw new Error('Unable to extract region or ASIN from URL')
		}

		const images = await fetchAudibleProductImages(region, asin)

		if (!images || !images[COVER_SIZE]) {
			throw new Error('No images found')
		}

		const cover = images[COVER_SIZE]

		enhanceCoverImage(cover, asin)
		addStyles()
	} catch (error) {
		console.error('Error in main function:', error.message)
	}
}

main()

function addStyles() {
	const style = document.createElement('style')
	style.textContent = `
		.cover-actions-container {
			position: absolute;
			bottom: 10px;
			right: 10px;
			display: flex;
			gap: 6px;
		}
		.cover-actions-container button {
			background-color: rgba(0, 0, 0, 0.85);
			border: none;
			border-radius: 12px;
			padding: 6px;	
			cursor: pointer;
			transition: opacity 200ms ease-in-out;
		}
		.cover-actions-container button img {
			width: 20px;
			height: 20px;
			filter: invert(1);
			display: block;
		}
		.cover-actions-container .action-btn-disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
		.container {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		[data-hidden="true"] {
			opacity: 0;
			visibility: hidden;
		}
		[data-hidden="false"] {
			opacity: 1;
			visibility: visible;
		}
	`
	document.head.appendChild(style)
}