Add setting to disable autoplay on the home page (#339)

* Disable autoplay on the home page (default allow)

* Also check contentShowing event

This fixes the behavior on Chrome's simulated slow networks - the video
plays for a small amount of time then pauses. The player never fires the
'play' event if the network is slow enough to require significant
buffering.

src/sites/twitch-twilight/modules/player.js

@@ -18,6 +18,7 @@ export default class Player extends Module {
 		this.inject('site.fine');
 		this.inject('site.web_munch');
 		this.inject('site.css_tweaks');
+		this.inject('site.router');
 		this.inject('i18n');
 
 		this.Player = this.fine.define(
@@ -93,6 +94,14 @@ export default class Player extends Module {
 			changed: val => this.css_tweaks.toggle('player-ext-mouse', !val)
 		})
 
+		this.settings.add('player.home.autoplay', {
+			default: true,
+			ui: {
+				path: 'Channel > Player >> Homepage',
+				title: 'Autoplay featured broadcasters on the homepage.',
+				component: 'setting-check-box'
+			},
+		});
 
 		this.settings.add('player.volume-always-shown', {
 			default: false,
@@ -149,6 +158,18 @@ export default class Player extends Module {
 	onMount(inst) {
 		if ( this.settings.get('player.theatre.auto-enter') && inst.onTheatreChange )
 			inst.onTheatreChange(true);
+
+		if ( (!this.settings.get('player.home.autoplay')) && this.router.current.name === 'front-page' ) {
+			if ( inst.player ) {
+				this.disableAutoplay(inst);
+			} else {
+				const wrapped = inst.onPlayerReady;
+				inst.onPlayerReady = () => {
+					wrapped.call(inst);
+					this.disableAutoplay(inst);
+				};
+			}
+		}
 	}
 
 
@@ -157,6 +178,36 @@ export default class Player extends Module {
 		this.updateVolumeScroll(inst);
 	}
 
+	disableAutoplay(inst) {
+		if ( ! inst.player ) {
+			this.log.warn("disableAutoplay() called but Player was not ready");
+			return;
+		}
+
+		if ( ! inst.ffzAutoplay ) {
+			var playListener = () => {
+				this.log.info('Auto-paused player');
+				inst.ffzAutoplay = null;
+				inst.player.pause();
+
+				// timing issues are a pain
+				setTimeout(() => {
+					inst.player.removeEventListener('play', playListener);
+					inst.player.removeEventListener('playing', playListener);
+					inst.player.removeEventListener('contentShowing', playListener);
+				}, 1000);
+			}
+			inst.ffzAutoplay = playListener;
+			inst.player.addEventListener('play', inst.ffzAutoplay);
+			inst.player.addEventListener('playing', inst.ffzAutoplay);
+			inst.player.addEventListener('contentShowing', inst.ffzAutoplay);
+			this.log.info('readystate', inst.player.readyState);
+			if (inst.player.readyState > 0) {
+				// already playing the video (if FFZ script was slow)
+				inst.player.pause();
+			}
+		}
+	}
 
 	updateVolumeScroll(inst, enabled) {
 		if ( enabled === undefined )