Add support for video captions

src/components/Videos.vue

@@ -42,6 +42,13 @@
 				@canplay="doneLoading"
 				@loadedmetadata="onLoadedMetadata">
 
+				<track v-for="track in tracks"
+					:key="track"
+					:src="track.src"
+					:label="track.label"
+					kind="captions"
+					:srclang="track.srclang">
+
 				<!-- Omitting `type` on purpose because most of the
 					browsers auto detect the appropriate codec.
 					Having it set force the browser to comply to
@@ -58,6 +65,8 @@
 import Vue from 'vue'
 import VuePlyr from '@skjnldsv/vue-plyr'
 import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
+import { extractFilePaths } from '../utils/fileUtils'
+import getFileList from '../services/FileList'
 
 const liveExt = ['jpg', 'jpeg', 'png']
 const liveExtRegex = new RegExp(`\\.(${liveExt.join('|')})$`, 'i')
@@ -67,6 +76,12 @@ Vue.use(VuePlyr)
 export default {
 	name: 'Videos',
 
+	data() {
+		// This is required so that tracks is declared and reactive
+		// Otherwise updates may fail to make it to plyr
+		return { tracks: [], }
+	},
+
 	computed: {
 		livePhoto() {
 			return this.fileList.find(file => {
@@ -85,6 +100,7 @@ export default {
 		options() {
 			return {
 				autoplay: this.active === true,
+				captions: { active: false, language: 'auto', update: true },
 				controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'],
 				loadSprite: false,
 			}
@@ -119,8 +135,231 @@ export default {
 		},
 
 		onLoadedMetadata() {
+
+			this.fetchTracks()
 			this.updateVideoSize()
 		},
+
+		fetchTracks() {
+			const dirPath = extractFilePaths(this.filename)[0]
+			getFileList(dirPath).then(folder => {
+				// ISO code for languages
+				// See https://www.loc.gov/standards/iso639-2/php/code_list.php
+				const languages = {
+					aa: 'Afar',
+					ab: 'Abkhazian',
+					ae: 'Avestan',
+					af: 'Afrikaans',
+					ak: 'Akan',
+					am: 'Amharic',
+					an: 'Aragonese',
+					ar: 'Arabic',
+					as: 'Assamese',
+					av: 'Avaric',
+					ay: 'Aymara',
+					az: 'Azerbaijani',
+					ba: 'Bashkir',
+					be: 'Belarusian',
+					bg: 'Bulgarian',
+					bh: 'Bihari languages',
+					bi: 'Bislama',
+					bm: 'Bambara',
+					bn: 'Bengali',
+					bo: 'Tibetan',
+					br: 'Breton',
+					bs: 'Bosnian',
+					ca: 'Catalan',
+					ce: 'Chechen',
+					ch: 'Chamorro',
+					co: 'Corsican',
+					cr: 'Cree',
+					cs: 'Czech',
+					cu: 'Church Slavic',
+					cv: 'Chuvash',
+					cy: 'Welsh',
+					da: 'Danish',
+					de: 'German',
+					dv: 'Divehi',
+					dz: 'Dzongkha',
+					ee: 'Ewe',
+					el: 'Greek',
+					en: 'English',
+					eo: 'Esperanto',
+					es: 'Spanish',
+					et: 'Estonian',
+					eu: 'Basque',
+					fa: 'Persian',
+					ff: 'Fulah',
+					fi: 'Finnish',
+					fj: 'Fijian',
+					fo: 'Faroese',
+					fr: 'French',
+					fy: 'Western Frisian',
+					ga: 'Irish',
+					gd: 'Gaelic',
+					gl: 'Galician',
+					gn: 'Guarani',
+					gu: 'Gujarati',
+					gv: 'Manx',
+					ha: 'Hausa',
+					he: 'Hebrew',
+					hi: 'Hindi',
+					ho: 'Hiri Motu',
+					hr: 'Croatian',
+					ht: 'Haitian',
+					hu: 'Hungarian',
+					hy: 'Armenian',
+					hz: 'Herero',
+					ia: 'Interlingua',
+					id: 'Indonesian',
+					ie: 'Interlingue',
+					ig: 'Igbo',
+					ii: 'Sichuan Yi',
+					ik: 'Inupiaq',
+					io: 'Ido',
+					is: 'Icelandic',
+					it: 'Italian',
+					iu: 'Inuktitut',
+					ja: 'Japanese',
+					jv: 'Javanese',
+					ka: 'Georgian',
+					kg: 'Kongo',
+					ki: 'Kikuyu',
+					kj: 'Kuanyama',
+					kk: 'Kazakh',
+					kl: 'Kalaallisut',
+					km: 'Central Khmer',
+					kn: 'Kannada',
+					ko: 'Korean',
+					kr: 'Kanuri',
+					ks: 'Kashmiri',
+					ku: 'Kurdish',
+					kv: 'Komi',
+					kw: 'Cornish',
+					ky: 'Kirghiz',
+					la: 'Latin',
+					lb: 'Luxembourgish',
+					lg: 'Ganda',
+					li: 'Limburgan',
+					ln: 'Lingala',
+					lo: 'Lao',
+					lt: 'Lithuanian',
+					lu: 'Luba-Katanga',
+					lv: 'Latvian',
+					mg: 'Malagasy',
+					mh: 'Marshallese',
+					mi: 'Maori',
+					mk: 'Macedonian',
+					ml: 'Malayalam',
+					mn: 'Mongolian',
+					mr: 'Marathi',
+					ms: 'Malay',
+					mt: 'Maltese',
+					my: 'Burmese',
+					na: 'Nauru',
+					nb: 'Norwegian Bokmål',
+					nd: 'Ndebele, North',
+					ne: 'Nepali',
+					ng: 'Ndonga',
+					nl: 'Dutch',
+					nn: 'Norwegian Nynorsk',
+					no: 'Norwegian',
+					nr: 'Ndebele, South',
+					nv: 'Navajo',
+					ny: 'Nyanja',
+					oc: 'Occitan',
+					oj: 'Ojibwa',
+					om: 'Oromo',
+					or: 'Oriya',
+					os: 'Ossetian',
+					pa: 'Panjabi',
+					pi: 'Pali',
+					pl: 'Polish',
+					ps: 'Pushto',
+					pt: 'Portuguese',
+					qu: 'Quechua',
+					rm: 'Romansh',
+					rn: 'Rundi',
+					ro: 'Romanian',
+					ru: 'Russian',
+					rw: 'Kinyarwanda',
+					sa: 'Sanskrit',
+					sc: 'Sardinian',
+					sd: 'Sindhi',
+					se: 'Northern Sami',
+					sg: 'Sango',
+					si: 'Sinhala',
+					sk: 'Slovak',
+					sl: 'Slovenian',
+					sm: 'Samoan',
+					sn: 'Shona',
+					so: 'Somali',
+					sq: 'Albanian',
+					sr: 'Serbian',
+					ss: 'Swati',
+					st: 'Sotho',
+					su: 'Sundanese',
+					sv: 'Swedish',
+					sw: 'Swahili',
+					ta: 'Tamil',
+					te: 'Telugu',
+					tg: 'Tajik',
+					th: 'Thai',
+					ti: 'Tigrinya',
+					tk: 'Turkmen',
+					tl: 'Tagalog',
+					tn: 'Tswana',
+					to: 'Tonga',
+					tr: 'Turkish',
+					ts: 'Tsonga',
+					tt: 'Tatar',
+					tw: 'Twi',
+					ty: 'Tahitian',
+					ug: 'Uighur',
+					uk: 'Ukrainian',
+					ur: 'Urdu',
+					uz: 'Uzbek',
+					ve: 'Venda',
+					vi: 'Vietnamese',
+					vo: 'Volapük',
+					wa: 'Walloon',
+					wo: 'Wolof',
+					xh: 'Xhosa',
+					yi: 'Yiddish',
+					yo: 'Yoruba',
+					za: 'Zhuang',
+					zh: 'Chinese',
+					zu: 'Zulu',
+				}
+				const davDir = this.davPath.replace(/[^/]*$/, '')
+				const videoRoot = this.basename.replace(/[.][^.]+$/, '')
+				// Create caption tracks for the HTML5 player
+				// E.g.: <file>.mkv: look for <file>.xx.vtt or .<file>.xx.vtt
+				const capTracks = []
+				for (const file of folder) {
+					const basename = file.basename
+					const index = basename.indexOf(videoRoot)
+					// Consider only file... or .file...
+					if (!(index === 0 || (index === 1 && basename[0] === '.'))) {
+						continue
+					}
+					const suffix = basename.slice(videoRoot.length + index)
+					// Consider only ...xx.vtt
+					if (suffix.search(/^[.]..[.]vtt$/) !== 0) {
+						continue
+					}
+					const lang = suffix.slice(1, 3)
+					const language = languages[lang] || lang
+					// an array of objects with src, label and lang keys
+					capTracks.push({
+						src: davDir + basename,
+						label: language,
+						srclang: lang,
+					})
+				}
+				this.tracks = capTracks
+			})
+		},
 	},
 }
 </script>