fix: Use the user configured UI language for PDFjs instead of browser language

PDFjs uses the browser language by default, but users should have consistently the Nextcloud defined language.
So now we set the PDFjs language to:
1. The Nextcloud configured language if supported
2. The unflavored version if supported (e.g. `de` instead of `de-DE`)
3. Fall back to browser UI language

We need 3 because if we set an unsupported lanuage PDFjs will default to English,
which is worse than the browser UI language.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

.eslintrc.js

@@ -7,8 +7,9 @@ module.exports = {
 		PDFViewerApplicationOptions: true,
 		PDFViewerApplication: true,
 		pdfjsLib: true,
+		SUPPORTED_LANGUAGES: true,
 	},
 	extends: [
 		'@nextcloud',
-	]
+	],
 }

package-lock.json

@@ -12,6 +12,7 @@
         "@nextcloud/auth": "^2.4.0",
         "@nextcloud/axios": "^2.5.0",
         "@nextcloud/dialogs": "^6.0.0",
+        "@nextcloud/l10n": "^3.1.0",
         "@nextcloud/logger": "^3.0.2",
         "@nextcloud/router": "^3.0.1",
         "pdfjs-dist": "^3.11.174"

package.json

@@ -30,6 +30,7 @@
     "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.0",
     "@nextcloud/dialogs": "^6.0.0",
+    "@nextcloud/l10n": "^3.1.0",
     "@nextcloud/logger": "^3.0.2",
     "@nextcloud/router": "^3.0.1",
     "pdfjs-dist": "^3.11.174"

src/views/PDFView.vue

@@ -4,11 +4,13 @@
   -->
 <template>
 	<iframe ref="iframe"
-		:src="iframeSrc" />
+		:src="iframeSrc"
+		@load="onIFrameLoaded" />
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
+import { getLanguage } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import logger from '../services/logger.js'
 import uploadPdfFile from '../services/uploadPdfFile.js'
@@ -59,14 +61,6 @@ export default {
 		this.$nextTick(function() {
 			this.$el.focus()
 		})
-
-		if (this.isEditable) {
-			this.$refs.iframe.addEventListener('load', () => {
-				this.getDownloadElement().removeAttribute('hidden')
-
-				this.getEditorModeButtonsElement().removeAttribute('hidden')
-			})
-		}
 	},
 
 	beforeDestroy() {
@@ -74,6 +68,15 @@ export default {
 	},
 
 	methods: {
+		onIFrameLoaded() {
+			if (this.isEditable) {
+				this.$nextTick(() => {
+					this.getDownloadElement().removeAttribute('hidden')
+					this.getEditorModeButtonsElement().removeAttribute('hidden')
+				})
+			}
+		},
+
 		getIframeDocument() {
 			// $refs are not reactive, so a method is used instead of a computed
 			// property for clarity.
@@ -91,6 +94,23 @@ export default {
 		handleWebviewerloaded() {
 			const PDFViewerApplicationOptions = this.$refs.iframe.contentWindow.PDFViewerApplicationOptions
 
+			const language = getLanguage()
+			const supportedLanguages = SUPPORTED_LANGUAGES
+			// If the user language is supported we use that language,
+			// if the unflavored language is supported we use that,
+			// and if nothing is supported we do not set it as that would fallback to English but we let PDFjs use the browser language.
+			if (supportedLanguages.includes(language)) {
+				// Set the language (they misused "locale") to the user configured value
+				// instead of defaulting to the browser language
+				PDFViewerApplicationOptions.set('locale', language)
+			} else {
+				// Sometimes a flavored language is not named correctly (PDFjs uses iso639-2 and Nextcloud iso639-1)
+				const unflavoredLanguage = language.split('-')[0]
+				if (supportedLanguages.includes(unflavoredLanguage) || supportedLanguages.find((language) => language.startsWith(`${unflavoredLanguage}-`))) {
+					PDFViewerApplicationOptions.set('locale', unflavoredLanguage)
+				}
+			}
+
 			if (!this.isEditable) {
 				// Preferences override options, so they must be disabled for
 				// "annotationMode" to take effect.

webpack.config.js

@@ -2,11 +2,15 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+const webpack = require('webpack')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 // eslint-disable-next-line n/no-extraneous-require
 const TerserPlugin = require('terser-webpack-plugin')
 const WebpackSPDXPlugin = require('./build-js/WebpackSPDXPlugin.js')
 const path = require('path')
+const { readdirSync } = require('fs')
+
+const l10nContent = readdirSync(path.resolve(__dirname, 'js', 'pdfjs', 'web', 'locale'))
 
 webpackConfig.entry.workersrc = path.resolve(path.join('src', 'workersrc.js'))
 webpackConfig.entry.public = path.resolve(path.join('src', 'public.js'))
@@ -14,6 +18,13 @@ webpackConfig.entry.public = path.resolve(path.join('src', 'public.js'))
 // keep pdfjs vendor in the js folder
 webpackConfig.output.clean = false
 
+// Add list of PDFjs supported languages
+webpackConfig.plugins.push(
+	new webpack.DefinePlugin({
+		SUPPORTED_LANGUAGES: JSON.stringify(l10nContent),
+	}),
+)
+
 webpackConfig.optimization.minimizer = [new TerserPlugin({
 	extractComments: false,
 	terserOptions: {