Add mechanism to view translations in demos

Requires a switch from array to object data for langs, to provide language names.
ableplayer · joedolson · Jan 11, 2026 · Sep 24, 2025 · Sep 26, 2025 · Sep 26, 2025
commit a917047c53c0d426f6c2c8cc61e8673daa3a2a81
diff --git a/demos/index.html b/demos/index.html
@@ -124,6 +124,7 @@ <h2>Other Demos</h2>
 	<li><a href="other-native.html">Native HTML5 Player</a> (not <em>Able Player</em>), for comparison</li>
 	<li><a href="other-noa11y.html">Able Player with no HTML tracks</a> (don't do this)</li>
 	<li><a href="other-vts.html">Able Player with Video Transcript Sorter (VTS)</a></li>
+	<li><a href="translations.html">Able Player Translations - view player in translation</a></li>
 	<li><a href="other-width.html">Able Player Width Tests</a></li>
 	<li><a href="other-fallback.html">Able Player Fallback Test Page</a></li>
 </ul>

diff --git a/demos/translations.html b/demos/translations.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>View translations | Able Player Demos</title>
+<link rel="stylesheet" href="demos.css" type="text/css">
+
+<!-- Dependencies -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
+<!-- Able Player CSS -->
+<link rel="stylesheet" href="../build/ableplayer.min.css" type="text/css"/>
+
+<!-- Able Player JavaScript -->
+<script src="../build/ableplayer.js"></script>
+
+<!-- CSS for this example -->
+<style>
+	#video-wrapper {
+		width: 500px;
+	}
+	.flex {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: end;
+		margin-bottom: 1.5rem;
+		gap: 4px;
+	}
+	.flex p {
+		margin: 0;
+		padding: 0;
+	}
+	.flex select, .flex button {
+		padding: .33rem;
+	}
+	.notification p {
+		background: #ffc;
+		padding: .5rem;
+	}
+</style>
+<script>
+	$(document).ready(function() {
+		let player = new AblePlayer('#video1');
+		let media  = document.querySelector( '#video1' );
+		let header = document.querySelector( 'header' );
+		let nav    = document.querySelector( 'nav' );
+		let content = document.querySelector( '.content' );
+		let button = document.querySelector( '#select_lang' );
+		let translations = player.getSupportedLangs();
+		let select = document.querySelector( '#lang_selector' );
+		let html = document.querySelector( 'html' );
+		let notification = document.querySelector( '.notification' );
+		for(  const [key,value] of Object.entries(translations) ) {
+			let option = document.createElement( 'option' );
+				option.setAttribute( 'value', key );
+				option.innerText = value;
+			select.insertAdjacentElement( 'beforeend', option );
+		};
+		button.addEventListener( 'click', function() {
+			let value = select.value;
+			let langName = select.options[select.selectedIndex].text;
+			if ( value === '' ) {
+				html.setAttribute( 'lang', 'en' );
+				header.removeAttribute( 'lang' );
+				nav.removeAttribute( 'lang' );
+				content.removeAttribute( 'lang' );
+				let wrapper = media.closest( '.able-wrapper' );
+				wrapper.replaceWith( player.media );
+				player = new AblePlayer( '#video1' );
+			} else {
+				html.setAttribute( 'lang', value );
+				header.setAttribute( 'lang', 'en' );
+				nav.setAttribute( 'lang', 'en' );
+				content.setAttribute( 'lang', 'en' );
+				let wrapper = media.closest( '.able-wrapper' );
+				wrapper.replaceWith( player.media );
+				player = new AblePlayer( '#video1' );
+			}
+			notification.innerHTML = '<p>Player refreshed in your selected language: <strong>' + langName + '</strong>.</p>';
+		})
+	});
+</script>
+</head>
+
+<body>
+	<header>
+		<div class="title">Able Player Demos</div>
+	</header>
+	<nav>
+		<ul>
+			<li><a href="index.html">More demos</a></li>
+			<li><a href="https://ableplayer.github.io/ableplayer">Able Player Home</a></li>
+		</ul>
+	</nav>
+	<main>
+		<div class="content">
+			<h1>View translations</h1>
+
+			<p>Use this view to check translations of Able Player.</p>
+			<div class="flex">
+				<p>
+					<label for="lang_selector">Select language</label><br />
+					<select id="lang_selector">
+						<option value="">Default Language</option>
+					</select>
+				</p>
+				<button type="button" id="select_lang">Switch Language</button>
+			</div>
+			<div class="notification" role="alert">
+
+			</div>
+		</div>
+		<div id="video-wrapper">
+			<video id="video1" preload="auto" poster="../media/wwa.jpg" playsinline>
+				<source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4" data-youtube-sign-src="https://youtu.be/bf6214F7srY"/>
+				<track kind="captions" src="../media/wwa_captions_de.vtt" srclang="de" label="Deutsche"/>
+				<track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English" default/>
+				<track kind="captions" src="../media/wwa_captions_es.vtt" srclang="es" label="Español"/>
+				<track kind="subtitles" src="../media/wwa_captions_fr.vtt" srclang="fr" label="Français"/>
+				<track kind="subtitles" src="../media/wwa_captions_ja.vtt" srclang="ja" lang="ja" label="日本語"/>
+				<track kind="descriptions" src="../media/wwa_description_de.vtt" srclang="de"/>
+				<track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"/>
+				<track kind="descriptions" src="../media/wwa_description_es.vtt" srclang="es"/>
+				<track kind="descriptions" src="../media/wwa_description_fr.vtt" srclang="fr"/>
+				<track kind="descriptions" src="../media/wwa_description_ja.vtt" srclang="ja"/>
+				<track kind="chapters" src="../media/wwa_chapters_de.vtt" srclang="de"/>
+				<track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"/>
+				<track kind="chapters" src="../media/wwa_chapters_es.vtt" srclang="es"/>
+				<track kind="chapters" src="../media/wwa_chapters_fr.vtt" srclang="fr"/>
+			</video>
+		</div>
+
+	</main>
+</body>
+</html>
diff --git a/scripts/translation.js b/scripts/translation.js
@@ -1,7 +1,29 @@
 (function ($) {
 	AblePlayer.prototype.getSupportedLangs = function() {
 		// returns an array of languages for which AblePlayer has translation tables
-		var langs = ['ca','cs','da','de','en','es','fr','he','id','it','ja','ms','nb','nl','pl','pt','pt-br','sv','tr','zh-tw'];
+		var langs = {
+			'ca'    : 'Catalan',
+			'cs'    : 'Czech',
+			'da'    : 'Danish',
+			'de'    : 'German',
+			'en'    : 'English',
+			'es'    : 'Spanish',
+			'fr'    : 'French',
+			'he'    : 'Hebrew',
+			'id'    : 'Indonesian',
+			'it'    : 'Italian',
+			'ja'    : 'Japanese',
+			'ms'    : 'Malay',
+			'nb'    : 'Norwegian Bokmål',
+			'nl'    : 'Dutch',
+			'pl'    : 'Polish',
+			'pt'    : 'Portuguese',
+			'pt-br' : 'Brazilian Portuguese',
+			'sv'    : 'Swedish',
+			'tr'    : 'Turkish',
+			'zh-tw' : 'Chinese (Taiwan)'
+		};
+
 		return langs;
 	};
 
@@ -23,27 +45,25 @@
 		supportedLangs = this.getSupportedLangs(); // returns an array
 
 		if (this.lang) { // a data-lang attribute is included on the media element
-			if ($.inArray(this.lang,supportedLangs) === -1) {
+			if ( Object.hasOwn( supportedLangs,this.lang ) ) {
 				// the specified language is not supported
-				if (this.lang.indexOf('-') == 2) {
+				if ( this.lang.indexOf('-') == 2 ) {
 					// this is a localized lang attribute (e.g., fr-CA)
 					// try the parent language, given the first two characters
 					// if parent lang is supported. Use that, else null.
-					this.lang = ($.inArray(this.lang.substring(0,2),supportedLangs) !== -1) ? this.lang.substring(0,2) : null;
+					this.lang = ( Object.hasOwn(supportedLangs,this.lang.substring(0,2)) !== -1 ) ? this.lang.substring(0,2) : null;
 				} else {
 					// this is not a localized language.
 					// but maybe there's a similar localized language supported
 					// that has the same parent?
 					similarLangFound = false;
-					i = 0;
-					while (i < supportedLangs.length) {
-						if (supportedLangs[i].substring(0,2) == this.lang) {
+					for ( const [key,value] of Object.entries(supportedLangs) ) {
+						if ( key.substring(0,2) == this.lang ) {
 							this.lang = supportedLangs[i];
 							similarLangFound = true;
 						}
-						i++;
 					}
-					if (!similarLangFound) {
+					if ( !similarLangFound ) {
 						// language requested via data-lang is not supported
 						this.lang = null;
 					}
@@ -61,15 +81,15 @@
 				docLang = null;
 			}
 			if (docLang) {
-				if ($.inArray(docLang,supportedLangs) !== -1) {
+				if ( Object.hasOwn( supportedLangs,docLang ) ) {
 					// the document language is supported
 					this.lang = docLang;
 				} else {
 					// the document language is not supported
 					if (docLang.indexOf('-') == 2) {
 						// this is a localized lang attribute (e.g., fr-CA)
 						// try the parent language, given the first two characters
-						if ($.inArray(docLang.substring(0,2),supportedLangs) !== -1) {
+						if ( Object.hasOwn(supportedLangs,docLang.substring(0,2)) ) {
 							// the parent language is supported. use that.
 							this.lang = docLang.substring(0,2);
 						}
@@ -125,19 +145,18 @@
 			var thisObj, supportedLangs, i, thisLang, translationFile, thisText, translation;
 
 			supportedLangs = this.getSupportedLangs();
-
 			thisObj = this;
 
 			this.sampleText = [];
-			for (i=0; i < supportedLangs.length; i++) {
-				translationFile = this.rootPath + 'translations/' + supportedLangs[i] + '.json';
+			for ( const [key,value] of Object.entries(supportedLangs) ) {
+				translationFile = this.rootPath + 'translations/' + key + '.json';
 				$.getJSON(translationFile, thisLang, (function(thisLang) {
 						return function(data) {
 							thisText = data.sampleDescriptionText;
 							translation = {'lang':thisLang, 'text': thisText};
 							thisObj.sampleText.push(translation);
 						};
-					}(supportedLangs[i])) // pass lang to callback function
+					}(key)) // pass lang to callback function
 				);
 			}
 		}