Merge pull request #220 from Wikia/XW-4169

XW-4169 | autoplay toggle in featured videos

app/components/article-featured-video-jwplayer.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 import VideoLoader from '../modules/video-loader';
 import extend from '../utils/extend';
+import config from '../config/environment';
 
 const {
 	Component,
@@ -12,6 +13,9 @@ const {
 export default Component.extend({
 	ads: inject.service(),
 
+	autoplayCookieName: 'featuredVideoAutoplay',
+	autoplayCookieExpireDays: 14,
+
 	// when navigating from one article to another with video, we need to destroy player and
 	// reinitialize it as component itself is not destroyed. Could be done with didUpdateAttrs
 	// hook, however it is fired twice with new attributes.
@@ -32,6 +36,14 @@ export default Component.extend({
 	 */
 	onCreate(player) {
 		this.player = player;
+
+		this.player.on('autoplayToggle', (data) => {
+			$.cookie(this.get('autoplayCookieName'), data.enabled ? '1' : '0', {
+				expires: this.get('autoplayCookieExpireDays'),
+				path: '/',
+				domain: config.cookieDomain
+			});
+		});
 	},
 
 	/**
@@ -40,7 +52,7 @@ export default Component.extend({
 	initVideoPlayer() {
 		const model = this.get('model.embed'),
 			jsParams = {
-				autoplay: true,
+				autoplay: $.cookie(this.get('autoplayCookieName')) !== '0',
 				adTrackingParams: {
 					adProduct: this.get('ads.noAds') ? 'featured-video-no-preroll' : 'featured-video-preroll',
 					slotName: 'FEATURED'

app/initializers/ember-hammer.js

@@ -10,8 +10,6 @@ export function initialize() {
 
 	window.emberHammerOptions = {
 		hammerOptions: {
-			// we are using fastclick as this is advised by ember-hammer lib
-			ignoreEvents: [],
 			swipe_velocity: 0.1,
 			pan_threshold: 1
 		}

app/modules/video-players/jwplayer.js

@@ -60,9 +60,11 @@ export default class JWPlayer extends BasePlayer {
 					setCustomDimension: M.tracker.UniversalAnalytics.setDimension,
 					comscore: config.environment === 'production'
 				},
-				autoplay: {
-					enabled: this.params.autoplay,
+				settings: {
+					showAutoplayToggle: true,
 				},
+				autoplay: this.params.autoplay,
+				mute: this.params.autoplay,
 				related: {
 					time: 3,
 					playlistId: this.params.recommendedVideoPlaylist || 'Y2RWCKuS',

app/styles/component/_article-featured-video-jwplayer.scss

@@ -0,0 +1,7 @@
+.jwplayer {
+	// resets wikia-style-guide styles
+	input[type="checkbox"] + label {
+		margin-left: 0;
+		margin-right: 0;
+	}
+}

app/styles/component/index.scss

@@ -37,6 +37,7 @@
 @import 'wikia-user-profile';
 @import 'show-error';
 @import 'article-featured-video';
+@import 'article-featured-video-jwplayer';
 @import 'recirculation';
 @import 'fandom-app-smart-banner';
 

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "mobile-wiki",
   "dependencies": {
-    "design-system": "wikia/design-system#8.11.0",
+    "design-system": "wikia/design-system#8.11.1",
     "ember-hammer": "1.0.2",
     "hammerjs": "2.0.4",
     "headroom.js": "0.7.0",

package.json

@@ -38,7 +38,7 @@
     "fastboot": "github:wikia/fastboot#582162a5e2eb39c2d94f857e53ee0efff4544447",
     "fastboot-app-server": "1.0.1",
     "html5-skin": "github:wikia/html5-skin#84574003c0cf2fa6de499bd6e7423a2a37681e44",
-    "jwplayer-fandom": "github:wikia/jwplayer-fandom#1.0.8",
+    "jwplayer-fandom": "github:wikia/jwplayer-fandom#1.0.9",
     "method-override": "2.3.10",
     "newrelic": "2.2.1",
     "on-headers": "1.0.1",
@@ -61,7 +61,6 @@
     "ember-cli-deprecation-workflow": "0.2.3",
     "ember-cli-eslint": "4.2.0",
     "ember-cli-fastboot": "1.0.5",
-    "ember-cli-fastclick": "1.4.0",
     "ember-cli-head": "0.3.1",
     "ember-cli-htmlbars": "2.0.3",
     "ember-cli-htmlbars-inline-precompile": "1.0.2",