Increment version. Clean up player a bit and add an option to stop recommended videos from auto-playing. Also clean up menu button for the strange, distant future when we actually use the pill for something.

changelog.html

@@ -1,3 +1,9 @@
+<div class="list-header">4.0.0-beta1.9<span>@b27c86408c133765e687</span> <time datetime="2018-04-03">(2018-04-03)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Option to stop the player from automatically playing the recommended video after a video finishes.</li>
+	<li>Changed: Refactor a bunch of code to use JSX syntax and clean up a bunch of linting issues. No noticable effect, but stuff is cleaner now.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.8<span>@c07590bbb2a94b83c0e3</span> <time datetime="2018-03-30">(2018-03-30)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Basic tab completion of FrankerFaceZ emotes, using Twitch's existing tab-completion system.</li>

src/main.js

@@ -95,7 +95,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-beta1.8',
+	major: 4, minor: 0, revision: 0, extra: '-beta1.9',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`

src/sites/twitch-twilight/modules/menu_button.jsx

@@ -28,8 +28,7 @@ export default class MenuButton extends SiteModule {
 
 	set pill(val) {
 		this._pill_content = val;
-		if ( this._pill )
+		this.updatePill();
-			setChildren(this._pill, this.formatPill(), true);
 	}
 
 	formatPill() {
@@ -40,6 +39,21 @@ export default class MenuButton extends SiteModule {
 	}
 
 
+	updatePill() {
+		if ( ! this._pill )
+			return;
+
+		const content = this.formatPill();
+		this._pill.innerHTML = '';
+		if ( content )
+			setChildren(this._pill, (<div class="tw-animation tw-animation--animate tw-animation--duration-medium tw-animation--timing-ease-in tw-animation--bounce-in">
+				<div class="tw-pill tw-pill--notification">
+					{content}
+				</div>
+			</div>));
+	}
+
+
 	async onEnable() {
 		const site = this.site,
 			container = await site.awaitElement('.top-nav__menu'),
@@ -55,18 +69,13 @@ export default class MenuButton extends SiteModule {
 					<span class="tw-button-icon__icon">
 						<figure class="ffz-i-zreknarf" />
 					</span>
-					<div class="ffz-menu__pill absolute">
+					{this._pill = (<div class="ffz-menu__pill tw-absolute" />)}
-						<div class="tw-animation tw-animation--animate tw-animation--duration-medium tw-animation--timing-ease-in tw-animation--bounce-in">
-							{this._pill = (<div class="tw-pill tw-pill--notification" />)}
-						</div>
-					</div>
 					{this._tip = (<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center" />)}
 				</div>
 			</button>)}
 		</div>);
 
-		setChildren(this._pill, this.formatPill(), true);
+		this.updatePill();
-
 		this.onTranslate();
 
 		container.insertBefore(this._el, user_menu);

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

@@ -130,12 +130,21 @@ export default class Player extends Module {
 		this.settings.add('player.home.autoplay', {
 			default: true,
 			ui: {
-				path: 'Channel > Player >> Front Page',
+				path: 'Channel > Player >> Playback',
 				title: 'Auto-play featured broadcasters on the front page.',
 				component: 'setting-check-box'
 			},
 		});
 
+		this.settings.add('player.vod.autoplay', {
+			default: true,
+			ui: {
+				path: 'Channel > Player >> Playback',
+				title: 'Auto-play the next recommended video after a video finishes.',
+				component: 'setting-check-box'
+			}
+		});
+
 		this.settings.add('player.volume-always-shown', {
 			default: false,
 			ui: {
@@ -197,6 +206,7 @@ export default class Player extends Module {
 		const t = this;
 
 		this.Player.on('mount', this.onMount, this);
+		this.Player.on('unmount', this.onUnmount, this);
 
 		this.Player.ready((cls, instances) => {
 			const old_init = cls.prototype.initializePlayer;
@@ -238,12 +248,69 @@ export default class Player extends Module {
 	}
 
 
+	onUnmount(inst) { // eslint-disable-line class-methods-use-this
+		this.cleanup(inst);
+	}
+
+
 	process(inst) {
 		this.addResetButton(inst);
+		this.addEndedListener(inst);
 		this.addControlVisibility(inst);
 		this.updateVolumeScroll(inst);
 	}
 
+
+	cleanup(inst) { // eslint-disable-line class-methods-use-this
+		const p = inst.player,
+			pr = inst.playerRef,
+			reset = pr && pr.querySelector('.ffz--player-reset');
+
+		if ( reset )
+			reset.remove();
+
+		if ( inst._ffz_on_ended ) {
+			p && p.removeEventListener('ended', inst._ffz_on_ended);
+			inst._ffz_on_ended = null;
+		}
+
+		if ( inst._ffz_visibility_handler ) {
+			if ( pr ) {
+				pr.removeEventListener('mousemove', inst._ffz_visibility_handler);
+				pr.removeEventListener('mouseout', inst._ffz_visibility_handler);
+			}
+
+			inst._ffz_visibility_handler = null;
+		}
+
+		if ( inst._ffz_scroll_handler ) {
+			pr && pr.removeEventListener('wheel', inst._ffz_scroll_handler);
+			inst._ffz_scroll_handler = null;
+		}
+
+
+	}
+
+
+	addEndedListener(inst) {
+		const p = inst.player;
+		if ( ! p )
+			return;
+
+		if ( inst._ffz_on_ended )
+			p.removeEventListener('ended', inst._ffz_on_ended);
+
+		p.addEventListener('ended', inst._ffz_on_ended = async () => {
+			if ( this.settings.get('player.vod.autoplay') )
+				return;
+
+			try {
+				(await this.parent.awaitElement('.pl-rec__cancel', inst.playerRef, 1000)).click();
+			} catch(err) { /* do nothing~ */ }
+		});
+	}
+
+
 	addControlVisibility(inst) { // eslint-disable-line class-methods-use-this
 		const p = inst.playerRef;
 		if ( ! p )
@@ -270,12 +337,19 @@ export default class Player extends Module {
 		p.addEventListener('mouseleave', f);
 	}
 
+
 	disableAutoplay(inst) {
 		if ( ! inst.player ) {
 			this.log.warn('disableAutoplay() called but Player was not ready');
 			return;
 		}
 
+		if ( ! inst.ffzVodAutoplay ) {
+			inst.player.addEventListener('ended', inst.ffzVodAutoplay = () => {
+
+			})
+		}
+
 		if ( ! inst.ffzAutoplay ) {
 			const playListener = () => {
 				this.log.info('Auto-paused player');
@@ -302,6 +376,7 @@ export default class Player extends Module {
 		}
 	}
 
+
 	updateVolumeScroll(inst, enabled) {
 		if ( enabled === undefined )
 			enabled = this.settings.get('player.volume-scroll');
@@ -333,7 +408,6 @@ export default class Player extends Module {
 	}
 
 
-
 	addResetButton(inst) {
 		if ( ! inst.playerRef )
 			return this.log.warn('no player ref');
@@ -370,6 +444,8 @@ export default class Player extends Module {
 		if ( ES )
 			ES.extensionService.unregisterPlayer();
 
+		this.cleanup(inst);
+
 		inst.player.destroy();
 		inst.playerRef.innerHTML = '';