nextcloud-mcp-server/third_party/astrolabe/src/components/PDFViewer.vue

<template>
	<div class="pdf-viewer">
		<div v-if="loading" class="loading-indicator">
			<NcLoadingIcon :size="64" />
			<p>{{ t('astrolabe', 'Loading PDF...') }}</p>
		</div>
		<div v-else-if="error" class="error-message">
			<AlertCircle :size="48" />
			<p>{{ error }}</p>
		</div>
		<div v-else class="pdf-image-container">
			<img
				:src="`data:image/png;base64,${imageData}`"
				class="pdf-page-image"
				alt="PDF page" />
		</div>
	</div>
</template>

<script setup>
/**
 * PDFViewer - Server-side PDF rendering component.
 *
 * Displays PDF pages as server-rendered PNG images, avoiding client-side
 * PDF.js issues with CSP worker restrictions and ES private field access
 * in Chromium browsers.
 *
 * The server uses PyMuPDF to render PDF pages to PNG images, which are
 * returned as base64-encoded data.
 */
import { ref, watch, onMounted } from 'vue'
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { translate as t } from '@nextcloud/l10n'
import { NcLoadingIcon } from '@nextcloud/vue'
import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'

const props = defineProps({
	filePath: {
		type: String,
		required: true,
	},
	pageNumber: {
		type: Number,
		default: 1,
	},
	scale: {
		type: Number,
		default: 2.0,
	},
})

const emit = defineEmits(['loaded', 'error', 'page-rendered'])

// Reactive state
const loading = ref(true)
const error = ref(null)
const imageData = ref(null)
const totalPages = ref(0)

/**
 * Fetch a PDF page from the server as a PNG image.
 */
async function loadPage() {
	loading.value = true
	error.value = null

	try {
		// Build request URL
		const url = generateUrl('/apps/astrolabe/api/pdf-preview')
		const params = {
			file_path: props.filePath,
			page: props.pageNumber,
			scale: props.scale,
		}

		const response = await axios.get(url, { params })

		if (!response.data.success) {
			throw new Error(response.data.error || 'Failed to load PDF page')
		}

		const data = response.data

		// Update state
		imageData.value = data.image
		totalPages.value = data.total_pages

		// Emit loaded event - App.vue uses this for navigation controls
		emit('loaded', { totalPages: data.total_pages })
		emit('page-rendered', { pageNumber: props.pageNumber })

		loading.value = false
	} catch (err) {
		console.error('PDF load error:', err)

		// Provide user-friendly error messages based on axios error structure
		const status = err.response?.status
		const serverError = err.response?.data?.error

		if (status === 404) {
			error.value = t('astrolabe', 'PDF file not found')
		} else if (status === 401 || status === 403) {
			error.value = serverError || t('astrolabe', 'Authorization required to view PDF')
		} else if (err.code === 'ERR_NETWORK' || err.message?.includes('Network')) {
			error.value = t('astrolabe', 'Network error loading PDF')
		} else if (serverError) {
			error.value = serverError
		} else {
			error.value = t('astrolabe', 'Unable to load PDF page')
		}

		emit('error', err)
		loading.value = false
	}
}

// Re-fetch when file path or page number changes
watch(() => [props.filePath, props.pageNumber], loadPage)

// Initial load
onMounted(() => {
	loadPage()
})
</script>

<style scoped lang="scss">
.pdf-viewer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 16px;
}

.loading-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px;

	p {
		color: var(--color-text-maxcontrast);
		font-size: 14px;
	}
}

.error-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px;
	color: var(--color-error);

	p {
		font-size: 14px;
		text-align: center;
	}
}

.pdf-image-container {
	position: relative;
	border: 1px solid var(--color-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	background: var(--color-main-background);
	max-width: 100%;
	overflow: auto;
}

.pdf-page-image {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (max-width: 768px) {
	.pdf-viewer {
		padding: 8px;
	}
}
</style>