Merge pull request DSpace#1967 from yingjin/DA-8586

Add captioning support for video/audio files

Author: tdonohue

src/app/core/shared/media-viewer-item.model.ts

@@ -14,6 +14,11 @@ export class MediaViewerItem {
    */
   format: string;
 
+  /**
+   * Incoming Bitsream format mime type
+   */
+  mimetype: string;
+
   /**
    * Incoming Bitsream thumbnail
    */

src/app/item-page/media-viewer/media-viewer-video/caption-info.ts

@@ -0,0 +1,11 @@
+/*
+  The class is designed to host information related to Video Captioning support
+  and used in HTML 5 video track
+  src: source vtt file
+  srclang: two letter language code
+  langLabel: language label
+ */
+export class CaptionInfo {
+  constructor(public src: string, public srclang: string, public langLabel: string ) {
+  }
+}

src/app/item-page/media-viewer/media-viewer-video/language-helper.ts

@@ -0,0 +1,190 @@
+export const languageHelper = {
+  ab: 'Abkhazian',
+  aa: 'Afar',
+  af: 'Afrikaans',
+	ak: 'Akan',
+	sq: 'Albanian',
+	am: 'Amharic',
+	ar: 'Arabic',
+	an: 'Aragonese',
+	hy: 'Armenian',
+	as: 'Assamese',
+  av: 'Avaric',
+	ae: 'Avestan',
+	ay: 'Aymara',
+	az: 'Azerbaijani',
+	bm: 'Bambara',
+	ba: 'Bashkir',
+	eu: 'Basque',
+	be: 'Belarusian',
+	bn: 'Bengali (Bangla)',
+	bh: 'Bihari',
+	bi: 'Bislama',
+	bs: 'Bosnian',
+	br: 'Breton',
+	bg: 'Bulgarian',
+	my: 'Burmese',
+	ca: 'Catalan',
+	ch: 'Chamorro',
+	ce: 'Chechen',
+	ny: 'Chichewa, Chewa, Nyanja',
+	zh: 'Chinese',
+	cv: 'Chuvash',
+	kw: 'Cornish',
+	co: 'Corsican',
+	cr: 'Cree',
+	hr: 'Croatian',
+	cs: 'Czech',
+	da: 'Danish',
+  dv: 'Divehi, Dhivehi, Maldivian',
+	nl: 'Dutch',
+	dz: 'Dzongkha',
+	en: 'English',
+	eo: 'Esperanto',
+	et: 'Estonian',
+	ee: 'Ewe',
+	fo: 'Faroese',
+	fj: 'Fijian',
+	fi: 'Finnish',
+	fr: 'French',
+	ff: 'Fula, Fulah, Pulaar, Pular',
+	gl: 'Galician',
+	gd: 'Gaelic (Scottish)',
+	gv: 'Gaelic (Manx)',
+	ka: 'Georgian',
+	de: 'German',
+	el: 'Greek',
+  gn: 'Guarani',
+	gu: 'Gujarati',
+	ht: 'Haitian Creole',
+	ha: 'Hausa',
+	he: 'Hebrew',
+	hz: 'Herero',
+	hi: 'Hindi',
+	ho: 'Hiri Motu',
+	hu: 'Hungarian',
+	is: 'Icelandic',
+	io: 'Ido',
+	ig: 'Igbo',
+  in: 'Indonesian',
+	ia: 'Interlingua',
+	ie: 'Interlingue',
+	iu: 'Inuktitut',
+	ik: 'Inupiak',
+	ga: 'Irish',
+	it: 'Italian',
+	ja: 'Japanese',
+	jv: 'Javanese',
+	kl: 'Kalaallisut, Greenlandic',
+	kn: 'Kannada',
+	kr: 'Kanuri',
+	ks: 'Kashmiri',
+	kk: 'Kazakh',
+	km: 'Khmer',
+	ki: 'Kikuyu',
+	rw: 'Kinyarwanda (Rwanda)',
+	rn: 'Kirundi',
+	ky: 'Kyrgyz',
+	kv: 'Komi',
+	kg: 'Kongo',
+	ko: 'Korean',
+	ku: 'Kurdish',
+	kj: 'Kwanyama',
+	lo: 'Lao',
+	la: 'Latin',
+	lv: 'Latvian (Lettish)',
+	li: 'Limburgish ( Limburger)',
+	ln: 'Lingala',
+	lt: 'Lithuanian',
+	lu: 'Luga-Katanga',
+	lg: 'Luganda, Ganda',
+	lb: 'Luxembourgish',
+	mk: 'Macedonian',
+	mg: 'Malagasy',
+	ms: 'Malay',
+	ml: 'Malayalam',
+	mt: 'Maltese',
+	mi: 'Maori',
+	mr: 'Marathi',
+	mh: 'Marshallese',
+	mo: 'Moldavian',
+	mn: 'Mongolian',
+	na: 'Nauru',
+	nv: 'Navajo',
+	ng: 'Ndonga',
+	nd: 'Northern Ndebele',
+	ne: 'Nepali',
+	no: 'Norwegian',
+	nb: 'Norwegian bokmål',
+	nn: 'Norwegian nynorsk',
+	oc: 'Occitan',
+	oj: 'Ojibwe',
+	cu: 'Old Church Slavonic, Old Bulgarian',
+	or: 'Oriya',
+	om: 'Oromo (Afaan Oromo)',
+	os: 'Ossetian',
+	pi: 'Pāli',
+	ps: 'Pashto, Pushto',
+	fa: 'Persian (Farsi)',
+	pl: 'Polish',
+	pt: 'Portuguese',
+	pa: 'Punjabi (Eastern)',
+	qu: 'Quechua',
+	rm: 'Romansh',
+	ro: 'Romanian',
+	ru: 'Russian',
+	se: 'Sami',
+	sm: 'Samoan',
+	sg: 'Sango',
+	sa: 'Sanskrit',
+	sr: 'Serbian',
+	sh: 'Serbo-Croatian',
+	st: 'Sesotho',
+	tn: 'Setswana',
+	sn: 'Shona',
+	ii: 'Sichuan Yi, Nuosu',
+	sd: 'Sindhi',
+	si: 'Sinhalese',
+	ss: 'Siswati (Swati)',
+	sk: 'Slovak',
+	sl: 'Slovenian',
+	so: 'Somali',
+	nr: 'Southern Ndebele',
+	es: 'Spanish',
+	su: 'Sundanese',
+	sw: 'Swahili (Kiswahili)',
+	sv: 'Swedish',
+	tl: 'Tagalog',
+	ty: 'Tahitian',
+	tg: 'Tajik',
+	ta: 'Tamil',
+	tt: 'Tatar',
+	te: 'Telugu',
+	th: 'Thai',
+	bo: 'Tibetan',
+	ti: 'Tigrinya',
+	to: 'Tonga',
+	ts: 'Tsonga',
+	tr: 'Turkish',
+	tk: 'Turkmen',
+	tw: 'Twi',
+	ug: 'Uyghur',
+	uk: 'Ukrainian',
+	ur: 'Urdu',
+	uz: 'Uzbek',
+	ve: 'Venda',
+	vi: 'Vietnamese',
+	vo: 'Volapük',
+	wa: 'Wallon',
+	cy: 'Welsh',
+	wo: 'Wolof',
+	fy: 'Western Frisian',
+	xh: 'Xhosa',
+  yi: 'Yiddish',
+	yo: 'Yoruba',
+	za: 'Zhuang, Chuang',
+	zu: 'Zulu'
+};
+
+
+

src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html

@@ -1,4 +1,5 @@
 <video
+  crossorigin="anonymous"
   #media
   [src]="filteredMedias[currentIndex].bitstream._links.content.href"
   id="singleVideo"
@@ -8,7 +9,14 @@
   "
   preload="none"
   controls
-></video>
+>
+  <ng-container *ngIf="getMediaCap(filteredMedias[currentIndex].bitstream.name) as capInfos">
+    <ng-container *ngFor="let capInfo of capInfos">
+      <track [src]="capInfo.src" [label]="capInfo.langLabel" [srclang]="capInfo.srclang" />
+    </ng-container>
+  </ng-container>
+
+</video>
 <div class="buttons" *ngIf="filteredMedias?.length > 1">
   <button
     class="btn btn-primary previous"

src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+import { languageHelper } from './language-helper';
+import { CaptionInfo} from './caption-info';
 
 /**
  * This componenet renders a video viewer and playlist for the media viewer
@@ -26,9 +28,38 @@ export class MediaViewerVideoComponent implements OnInit {
 
   ngOnInit() {
     this.isCollapsed = false;
-    this.filteredMedias = this.medias.filter(
-      (media) => media.format === 'audio' || media.format === 'video'
-    );
+    this.filteredMedias = this.medias.filter((media) => media.format === 'audio' || media.format === 'video');
+  }
+
+  /**
+   * This method check if there is caption file for the media
+   * The caption file name is the media name plus "-" following two letter
+   * language code and .vtt suffix
+   *
+   * html5 video only support WEBVTT format
+   *
+   * Two letter language code reference
+   * https://www.w3schools.com/tags/ref_language_codes.asp
+   */
+  getMediaCap(name: string): CaptionInfo[] {
+    let filteredCapMedias: MediaViewerItem[];
+    let capInfos: CaptionInfo[] = [];
+    filteredCapMedias = this.medias
+       .filter((media) => media.mimetype === 'text/vtt')
+       .filter((media) => media.bitstream.name.substring(0, (media.bitstream.name.length - 7) ).toLowerCase() === name.toLowerCase());
+
+    if (filteredCapMedias) {
+      filteredCapMedias
+        .forEach((media, index) => {
+          let srclang: string = media.bitstream.name.slice(-6, -4).toLowerCase();
+          capInfos.push(new CaptionInfo(
+            media.bitstream._links.content.href,
+            srclang,
+            languageHelper[srclang]
+          ));
+        });
+    }
+    return capInfos;
   }
 
   /**

src/app/item-page/media-viewer/media-viewer.component.ts

@@ -108,6 +108,7 @@ export class MediaViewerComponent implements OnInit {
     const mediaItem = new MediaViewerItem();
     mediaItem.bitstream = original;
     mediaItem.format = format.mimetype.split('/')[0];
+    mediaItem.mimetype = format.mimetype;
     mediaItem.thumbnail = thumbnail ? thumbnail._links.content.href : null;
     return mediaItem;
   }