oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-02 17:18:31 +00:00
Code Wiki Activity

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.

Browse source
This commit is contained in:
SirStendec 2018-04-03 02:03:28 -04:00
parent 7ecd45fcfb
commit 136feebc39
4 changed files with 103 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
changelog.html
View file

@ -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>

2
src/main.js
View file

@ -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' : ''}`

27
src/sites/twitch-twilight/modules/menu_button.jsx
View file

@ -28,8 +28,7 @@ export default class MenuButton extends SiteModule {
set pill(val) {
this._pill_content = val;
if ( this._pill )
setChildren(this._pill, this.formatPill(), true);
this.updatePill();
}
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">
<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._pill = (<div class="ffz-menu__pill tw-absolute" />)}
{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);

80
src/sites/twitch-twilight/modules/player.jsx
View file

@ -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 = '';