Placeholder play icon hint (v3) (#106)

* Add configurable placeholder play icon hint

* Add different styles for play icons with hint text

* Add placeholderHint to the readme

README.md

@@ -33,6 +33,7 @@ Where `opts` is an optional object with properties
  * `optimumvideowidth` [`Number`] The optimum width of the video itself, used when there are multiple video renditions available to
  decide which to display (the smallest one that's at least as large as this width, if it exists)
  * `placeholder` [`Boolean`] Show just the poster image, load (and play) video on click
+ * `placeholderHint` [`String`] An optional hint to display alongside the play icon (defaults to empty)
  * `placeholderInfo` [`Array`] A list of extra information to display on the placeholder (Available: title, description, brand)
  * `playsinline` [`Boolean`] Whether to play the [video inline](https://webkit.org/blog/6784/new-video-policies-for-ios/) on iOS smallscreen (defaults to fullscreen)
  * `classes` [`Array`] Classes to add to the video (and placeholder) element

demos/src/placeholder-icon-hint.mustache

@@ -0,0 +1,9 @@
+<div class="demo-video-container demo-video-container--large">
+	<div class="o-video o-video--large"
+		data-o-component="o-video"
+		data-o-video-id="21d77b6c-1901-4d1d-9c3b-84dfe9904fd2"
+		data-o-video-advertising="true"
+		data-o-video-placeholder="true"
+		data-o-video-placeholder-hint="Related video"
+		data-o-video-placeholder-info="['title','description','brand']"></div>
+</div>

origami.json

@@ -29,6 +29,11 @@
 			"description": "Placeholder",
 			"template": "demos/src/placeholder.mustache"
 		},
+		{
+			"name": "placeholder with hint",
+			"description": "Placeholder with custom icon hint",
+			"template": "demos/src/placeholder-icon-hint.mustache"
+		},
 		{
 			"name": "playlist",
 			"description": "Wrap a player with a playlist",

src/js/video.js

@@ -127,6 +127,7 @@ const defaultOpts = {
 	optimumwidth: null,
 	placeholder: false,
 	placeholderInfo: ['title'],
+	placeholderHint: '',
 	playsinline: false,
 	showCaptions: true,
 	data: null
@@ -316,8 +317,9 @@ class Video {
 		playButtonTextEl.textContent = 'Play video';
 		playButtonEl.appendChild(playButtonTextEl);
 
-		const playButtonIconEl = document.createElement('i');
+		const playButtonIconEl = document.createElement('span');
 		playButtonIconEl.className = 'o-video__play-button-icon';
+		playButtonIconEl.textContent = this.opts.placeholderHint;
 		playButtonEl.appendChild(playButtonIconEl);
 
 		this.placeholderEl.appendChild(playButtonEl);

src/scss/_info.scss

@@ -36,7 +36,8 @@
 		display: block;
 	}
 
-	.o-video__play-button-icon {
+	// do not enlarge icons with hints!
+	.o-video__play-button-icon:empty {
 		width: 60px;
 		height: 60px;
 	}

src/scss/_placeholder.scss

@@ -48,14 +48,27 @@
 	}
 
 	.o-video__play-button-icon {
-		@include oIconsGetIcon('play', oColorsGetPaletteColor('white'), 40, $iconset-version: 1);
 		@include oIconsBaseStyles;
+		@include oIconsGetIcon('play', oColorsGetPaletteColor('white'), $apply-base-styles: false, $apply-width-height: false, $iconset-version: 1);
 		position: absolute;
-		bottom: 0;
-		left: 0;
-		margin: auto;
+		color: oColorsGetPaletteColor('white');
 		background-color: oColorsGetPaletteColor('black');
 
+		&:empty {
+			bottom: 0;
+			left: 0;
+			width: 40px;
+			height: 40px;
+		}
+
+		&:not(:empty) {
+			@include oTypographySansBold('s');
+			bottom: 10px;
+			left: 10px;
+			padding: 10px 16px 10px 36px;
+			background-position: left;
+		}
+
 		:hover > &,
 		:focus > & {
 			background-color: oColorsGetPaletteColor('claret');