Merge pull request #3195 from nextcloud/enh/noid/plyr-speed-l10n

fix(plyr): add l10n to speed selections

Author: AndyScherzinger

css/init-BV7L6N6D.chunk.css css/init-D8SK1jbH.chunk.csscss/init-BV7L6N6D.chunk.css renamed to css/init-D8SK1jbH.chunk.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './init-BV7L6N6D.chunk.css';
+@import './init-D8SK1jbH.chunk.css';
 @import './previewUtils-DsspQ6dL.chunk.css';
 @import './NcIconSvgWrapper-Bui9PhAS-3xIBDiQU.chunk.css';
 @import './NcActionButton-Dc3ra1Np.chunk.css';

css/viewer-init.css

@@ -37,7 +37,7 @@ import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
 
 import logger from '../services/logger.js'
 import { preloadMedia } from '../services/mediaPreloader'
-import { plyrTranslations } from '../utils/plyrTranslations'
+import { localizeSpeedLabels, plyrTranslations } from '../utils/plyrTranslations'
 
 const VuePlyr = () => import(/* webpackChunkName: 'plyr' */'@skjnldsv/vue-plyr')
 
@@ -53,6 +53,7 @@ export default {
 	data() {
 		return {
 			fallback: false,
+			speedListenerBound: false,
 		}
 	},
 
@@ -111,6 +112,15 @@ export default {
 			control.addEventListener('mouseenter', this.disableSwipe)
 			control.addEventListener('mouseleave', this.enableSwipe)
 		})
+
+		// The Plyr menu is only in the DOM once the controls are mounted (see
+		// above), so wire up the speed-label localization here rather than in
+		// mounted(). Register the rate-change listener once.
+		if (!this.speedListenerBound && this.$refs.plyr?.player) {
+			this.$refs.plyr.player.on('ratechange', this.localizeSpeed)
+			this.speedListenerBound = true
+		}
+		this.localizeSpeed()
 	},
 
 	beforeDestroy() {
@@ -122,6 +132,11 @@ export default {
 	},
 
 	methods: {
+		localizeSpeed() {
+			// Defer so we run after Plyr's own label/badge update for this event.
+			this.$nextTick(() => localizeSpeedLabels(this.$el))
+		},
+
 		donePlaying() {
 			this.$refs.audio.autoplay = false
 			this.$refs.audio.load()

js/viewer-init.mjs

@@ -48,7 +48,7 @@ import logger from '../services/logger.js'
 import { findLivePhotoPeerFromName } from '../utils/livePhotoUtils'
 import { getPreviewIfAny } from '../utils/previewUtils'
 import { preloadMedia } from '../services/mediaPreloader.js'
-import { plyrTranslations } from '../utils/plyrTranslations'
+import { localizeSpeedLabels, plyrTranslations } from '../utils/plyrTranslations'
 
 const VuePlyr = () => import(/* webpackChunkName: 'plyr' */'@skjnldsv/vue-plyr')
 
@@ -66,6 +66,7 @@ export default {
 		return {
 			isFullscreenButtonVisible: false,
 			fallback: false,
+			speedListenerBound: false,
 		}
 	},
 
@@ -138,6 +139,15 @@ export default {
 			control.addEventListener('mouseenter', this.disableSwipe)
 			control.addEventListener('mouseleave', this.enableSwipe)
 		})
+
+		// The Plyr menu is only in the DOM once the controls are mounted (see
+		// above), so wire up the speed-label localization here rather than in
+		// mounted(). Register the rate-change listener once.
+		if (!this.speedListenerBound && this.$refs.plyr?.player) {
+			this.$refs.plyr.player.on('ratechange', this.localizeSpeed)
+			this.speedListenerBound = true
+		}
+		this.localizeSpeed()
 	},
 
 	beforeDestroy() {
@@ -149,6 +159,11 @@ export default {
 	},
 
 	methods: {
+		localizeSpeed() {
+			// Defer so we run after Plyr's own label/badge update for this event.
+			this.$nextTick(() => localizeSpeedLabels(this.$el))
+		},
+
 		hideHeaderAndFooter() {
 			// work arround to get the state of the fullscreen button, aria-selected attribute is not reliable
 			this.isFullscreenButtonVisible = !this.isFullscreenButtonVisible

js/viewer-init.mjs.map

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { translate as t } from '@nextcloud/l10n'
+import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
 
 /**
  * Plyr `i18n` option so the player controls and menus
@@ -49,3 +49,48 @@ export const plyrTranslations: Record<string, string> = {
 	enabled: t('viewer', 'Enabled'),
 	advertisement: t('viewer', 'Ad'),
 }
+
+/**
+ * Plyr renders speed values via a plain template literal (`` `${speed}×` ``),
+ * which always uses a `.` decimal separator regardless of locale — so German
+ * shows `1.5×` instead of `1,5×`. Plyr exposes no hook for this, so we
+ * re-format the rendered labels using the user's locale.
+ *
+ * The speed panel's id always ends in `-speed`. Each entry is a
+ * `button[role="menuitemradio"]` carrying the numeric speed in its `value`
+ * attribute (the source of truth). The home-pane `.plyr__menu__value` badge
+ * shows the current speed as a bare `<number>×` string, which we match by
+ * pattern so we never touch the quality/captions badges.
+ *
+ * @param root the Plyr root element to localize labels within
+ */
+export function localizeSpeedLabels(root: ParentNode): void {
+	const formatter = new Intl.NumberFormat(getCanonicalLocale())
+	const speedLabel = (value: number): string =>
+		value === 1 ? t('viewer', 'Normal') : `${formatter.format(value)}×`
+
+	// Speed submenu radio items, scoped to the speed panel so we don't touch
+	// quality (e.g. "1080") or captions entries.
+	const items = root.querySelectorAll<HTMLButtonElement>(
+		'.plyr__menu__container [id$="-speed"] [role="menuitemradio"]',
+	)
+	items.forEach((item) => {
+		const value = Number.parseFloat(item.value)
+		if (Number.isNaN(value)) {
+			return
+		}
+		const label = item.querySelector('span')
+		if (label) {
+			label.textContent = speedLabel(value)
+		}
+	})
+
+	// Home-pane badge showing the current speed (e.g. "Speed: 1,5×"). Match the
+	// bare "<number>×" form so quality/captions badges are left untouched.
+	root.querySelectorAll<HTMLElement>('.plyr__menu__value').forEach((badge) => {
+		const match = /^(\d+(?:\.\d+)?)×$/.exec((badge.textContent ?? '').trim())
+		if (match) {
+			badge.textContent = `${formatter.format(Number.parseFloat(match[1]))}×`
+		}
+	})
+}