Video captions (#3694)

* show captions on videos * support credits on videoAdvanced, for parity with images
honestbleeps · Dec 1, 2016 · 6942e2b · 6942e2b
1 parent 2c720db
commit 6942e2b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/lib/core/host.js b/lib/core/host.js
@@ -81,6 +81,7 @@ export type VideoMedia = {|
 	type: 'VIDEO',
 	title?: string,
 	caption?: string,
+	credits?: string,
 	sources: Array<{|
 		source: string,
 		reverse?: string,

diff --git a/lib/css/modules/_showImages.scss b/lib/css/modules/_showImages.scss
@@ -483,6 +483,7 @@ body:not(.res-showImages-displayImageCaptions) {
 .res-showImages-captionsPosition {
 	@at-root {
 		.res-image,
+		.video-advanced,
 		.res-gallery {
 			display: inline-flex;
 			flex-direction: column;

diff --git a/lib/modules/showImages.js b/lib/modules/showImages.js
@@ -1848,6 +1848,7 @@ function videoAdvanced(options) {
 	element.appendChild(player);
 
 	const vid: HTMLVideoElement = (player.querySelector('video'): any);
+	const container: HTMLElement = (player.querySelector('.video-advanced-container'): any);
 
 	const msgError = element.querySelector('.video-advanced-error');
 
@@ -2029,9 +2030,9 @@ function videoAdvanced(options) {
 	setMediaMaxSize(vid);
 	makeMediaZoomable(vid);
 	setMediaControls(vid, undefined, options.sources[0].source);
-	makeMediaMovable(player);
-	keepMediaVisible(player);
-	makeMediaIndependentOnResize(element, player);
+	makeMediaMovable(container);
+	keepMediaVisible(container);
+	makeMediaIndependentOnResize(element, container);
 
 	return element;
 }

diff --git a/lib/templates/videoAdvanced.mustache b/lib/templates/videoAdvanced.mustache
@@ -1,4 +1,13 @@
 <div class="video-advanced">
+	{{#title}}
+	<h4 class="res-title">{{title}}</h4>
+	{{/title}}
+	{{#caption}}
+	<div class="res-caption">{{{caption}}}</div>
+	{{/caption}}
+	{{#credits}}
+	<div class="res-credits">{{{credits}}}</div>
+	{{/credits}}
 	<div class="video-advanced-container">
 		{{^controls}}
 		<a class="noKeyNav" href="{{href}}" {{#openInNewWindow}}target="_blank" rel="noopener noreferrer"{{/openInNewWindow}}>