Accept IETF language tags, plus accessible play/pause button -- "iet-ou/cr1262/a11y"

Gruntfile.js

@@ -22,8 +22,9 @@ module.exports = function(grunt) {
                     'src/js/me-mediaelements.js',
                     'src/js/me-shim.js',
                     'src/js/me-i18n.js',
-                    'src/js/me-i18n-locale-de.js',
-                    'src/js/me-i18n-locale-zh.js'
+                    // Bug #1263
+                    //'src/js/me-i18n-locale-de.js',
+                    //'src/js/me-i18n-locale-zh.js'
                 ],
                 dest: 'local-build/mediaelement.js'
             },

src/js/me-i18n-locale-fr.js

@@ -18,7 +18,9 @@
     if (typeof exports.fr === 'undefined') {
         exports.fr = {
             "Download File" : "Télécharger le fichier",
-            "Play/Pause" : "Lecture/Pause",
+            //"Play/Pause" : "Lecture/Pause",
+            "Play" : "Lecture",
+            "Pause" : "Pause",
             "Mute Toggle" : "Activer/désactiver le son",
             "Fullscreen" : "Plein écran",
             "Captions/Subtitles" : "Sous-titres",

src/js/me-i18n-locale-zh-cn.js

@@ -22,7 +22,9 @@
         "Turn off Fullscreen" : "关闭全屏",
         "Close" : "关闭",
         "Download File" : "下载文件",
-        "Play/Pause" : "播放/暂停",
+        //"Play/Pause" : "播放/暂停",
+        "Play" : "播放",
+        "Pause" : "暂停",
         "Mute Toggle" : "静音切换",
         "Captions/Subtitles" : "字幕/标题",
         "Download Video" : "下载视频",

src/js/me-i18n.js

@@ -1,8 +1,8 @@
 /*
  * Adds Internationalization and localization to mediaelement.
  *
- * This file does not contain translations, you have to add the manually.
- * The schema is always the same: me-i18n-locale-[ISO_639-1 Code].js
+ * This file does not contain translations, you have to add them manually.
+ * The schema is always the same: me-i18n-locale-[IETF-language-tag].js
  *
  * Examples are provided both for german and chinese translation.
  *
@@ -11,7 +11,8 @@
  *   http://en.wikipedia.org/wiki/Internationalization_and_localization
  *
  * What langcode should i use?
- *   http://en.wikipedia.org/wiki/ISO_639-1
+ *   http://en.wikipedia.org/wiki/IETF_language_tag
+ *   https://tools.ietf.org/html/rfc5646
  *
  *
  * License?
@@ -37,23 +38,31 @@
  */
 ;(function(context, exports, undefined) {
     "use strict";
+
     var i18n = {
         "locale": {
-            "language" : '',
-            "strings" : {}
+            // Ensure previous values aren't overwritten.
+            "language" : (exports.i18n && exports.i18n.locale.language) || '',
+            "strings" : (exports.i18n && exports.i18n.locale.strings) || {}
         },
+        "ietf_lang_regex" : /^(x\-)?[a-z]{2,}(\-\w{2,})?(\-\w{2,})?$/,
         "methods" : {}
     };
 // start i18n
 
 
     /**
      * Get language, fallback to browser's language if empty
+     *
+     * IETF: RFC 5646, https://tools.ietf.org/html/rfc5646
+     * Examples: en, zh-CN, cmn-Hans-CN, sr-Latn-RS, es-419, x-private
      */
     i18n.getLanguage = function () {
         var language = i18n.locale.language || window.navigator.userLanguage || window.navigator.language;
-        // convert to iso 639-1 (2-letters, lower case)
-        return language.substr(0, 2).toLowerCase();
+        return i18n.ietf_lang_regex.exec(language) ? language : null;
+
+        //(WAS: convert to iso 639-1 (2-letters, lower case))
+        //return language.substr(0, 2).toLowerCase();
     };
 
     // i18n fixes for compatibility with WordPress

src/js/mep-feature-playpause.js

@@ -1,17 +1,19 @@
 (function($) {
 
 	$.extend(mejs.MepDefaults, {
-		playpauseText: mejs.i18n.t('Play/Pause')
+		playText: mejs.i18n.t('Play'),
+		pauseText: mejs.i18n.t('Pause')
 	});
 
 	// PLAY/pause BUTTON
 	$.extend(MediaElementPlayer.prototype, {
 		buildplaypause: function(player, controls, layers, media) {
 			var 
 				t = this,
+				op = t.options,
 				play = 
 				$('<div class="mejs-button mejs-playpause-button mejs-play" >' +
-					'<button type="button" aria-controls="' + t.id + '" title="' + t.options.playpauseText + '" aria-label="' + t.options.playpauseText + '"></button>' +
+					'<button type="button" aria-controls="' + t.id + '" title="' + op.playText + '" aria-label="' + op.playText + '"></button>' +
 				'</div>')
 				.appendTo(controls)
 				.click(function(e) {
@@ -24,21 +26,41 @@
 					}
 
 					return false;
-				});
+				}),
+				play_btn = play.find('button');
+
+
+			function togglePlayPause(which) {
+				if ('play' === which) {
+					play.removeClass('mejs-play').addClass('mejs-pause');
+					play_btn.attr({
+						'title': op.pauseText,
+						'aria-label': op.pauseText
+					});
+				} else {
+					play.removeClass('mejs-pause').addClass('mejs-play');
+					play_btn.attr({
+						'title': op.playText,
+						'aria-label': op.playText
+					});
+				}
+			};
+			togglePlayPause('pse');
+
 
 			media.addEventListener('play',function() {
-				play.removeClass('mejs-play').addClass('mejs-pause');
+				togglePlayPause('play');
 			}, false);
 			media.addEventListener('playing',function() {
-				play.removeClass('mejs-play').addClass('mejs-pause');
+				togglePlayPause('play');
 			}, false);
 
 
 			media.addEventListener('pause',function() {
-				play.removeClass('mejs-pause').addClass('mejs-play');
+				togglePlayPause('pse');
 			}, false);
 			media.addEventListener('paused',function() {
-				play.removeClass('mejs-pause').addClass('mejs-play');
+				togglePlayPause('pse');
 			}, false);
 		}
 	});