1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-09-16 01:56:55 +00:00

Add: Auto Theatre Mode, Hide Whispers in Theatre. Fix: Player width in theatre. Cache message deleted status at chat line render to avoid a second render.

This commit is contained in:
SirStendec 2017-11-16 18:54:54 -05:00
parent 7708caebb5
commit 863eafd32f
5 changed files with 57 additions and 4 deletions

View file

@ -1,3 +1,18 @@
<div class="list-header">4.0.0-beta1.3<span>@c89ba74a13dda449dfec</span> <time datetime="2017-11-16">(2017-11-16)</time></div>
<ul class="chat-menu-content menu-side-padding">
<li>Added: Automatic Theatre Mode</li>
<li>Added: Hide Whispers in Theatre Mode</li>
<li>Fixed: The player could be the wrong width in theatre mode when used with a custom chat width.</li>
</ul>
<div class="list-header">4.0.0-beta1.3<span>@c89ba74a13dda449dfec</span> <time datetime="2017-11-16">(2017-11-16)</time></div>
<ul class="chat-menu-content menu-side-padding">
<li>Added: Old-style RGB Loop color adjustment for the users that prefer it.</li>
<li>Fixed: Clicking chat when Chat Freeze is working will no longer set the chat to not auto-scroll.</li>
<li>Fixed: The Chat Freeze warning will not be displayed over the More Messages Below warning.</li>
<li>Fixed: Make proper use of the the chat buffer maximum size variable.</li>
</ul>
<div class="list-header">4.0.0-beta1.3<span>@bdf2ec93761131252233</span> <time datetime="2017-11-16">(2017-11-16)</time></div>
<ul class="chat-menu-content menu-side-padding">
<li>Fixed: Issue with chat scrolling when the world doesn't make any sense.</li>

View file

@ -261,7 +261,7 @@ export default class ChatHook extends Module {
if ( width === 340 )
this.css_tweaks.style.delete('chat-width');
else
this.css_tweaks.style.set('chat-width', `.whispers--theatre-mode.whispers--right-column-expanded{right:${width}px!important}.channel-page__video-player--theatre-mode{width:calc(100% - ${width}px)!important}.channel-page__right-column{width:${width}px!important}`);
this.css_tweaks.style.set('chat-width', `.whispers--theatre-mode.whispers--right-column-expanded{right:${width}px!important}.persistent-player--theatre,.channel-page__video-player--theatre-mode{width:calc(100% - ${width}px)!important}.channel-page__right-column{width:${width}px!important}`);
}
updateLineBorders() {

View file

@ -4,8 +4,8 @@
// Chat Line
// ============================================================================
import {createElement as e} from 'utilities/dom';
import Module from 'utilities/module';
//import {Color} from 'utilities/color';
export default class ChatLine extends Module {
constructor(...args) {
@ -57,9 +57,12 @@ export default class ChatLine extends Module {
is_action = msg.type === 1,
user = msg.user,
color = t.parent.colors.process(user.color),
/*bg_rgb = Color.RGBA.fromHex(user.color),
bg_color = bg_rgb.luminance() < .005 ? bg_rgb : bg_rgb.toHSLA().targetLuminance(0.005).toRGBA(),
bg_css = bg_color.toCSS(),*/
room = msg.channel ? msg.channel.slice(1) : undefined,
show = this.state.alwaysShowMessage || ! this.props.message.deleted;
show = this._ffz_show = this.state.alwaysShowMessage || ! this.props.message.deleted;
if ( ! msg.message && msg.messageParts )
detokenizeMessage(msg);
@ -69,6 +72,7 @@ export default class ChatLine extends Module {
const out = e('div', {
className: 'chat-line__message',
//style: { backgroundColor: bg_css },
'data-room-id': this.props.channelID,
'data-room': room,
'data-user-id': user.userID,

View file

@ -0,0 +1,5 @@
.video-player--theatre.video-player--logged-in .player.video-player__container {
bottom: 0;
}
.whispers--theatre-mode { display: none }

View file

@ -41,6 +41,24 @@ export default class Player extends Module {
}
});
this.settings.add('player.theatre.no-whispers', {
default: false,
ui: {
path: 'Channel > Player >> Theatre Mode',
title: 'Hide whispers when Theatre Mode is enabled.',
component: 'setting-check-box'
},
changed: val => this.css_tweaks.toggle('theatre-no-whispers', val)
});
this.settings.add('player.theatre.auto-enter', {
default: false,
ui: {
path: 'Channel > Player >> Theatre Mode',
title: 'Automatically open Theatre Mode when visiting a channel.',
component: 'setting-check-box'
}
});
this.settings.add('player.ext-hide', {
default: 0,
@ -91,10 +109,13 @@ export default class Player extends Module {
onEnable() {
this.css_tweaks.toggle('player-volume', this.settings.get('player.volume-always-shown'));
this.css_tweaks.toggle('player-ext-mouse', !this.settings.get('player.ext-interaction'));
this.css_tweaks.toggle('theatre-no-whispers', this.settings.get('player.theatre.no-whispers'));
this.updateHideExtensions();
const t = this;
this.Player.on('mount', this.onMount, this);
this.Player.ready((cls, instances) => {
const old_init = cls.prototype.initializePlayer;
@ -104,8 +125,10 @@ export default class Player extends Module {
return ret;
}
for(const inst of instances)
for(const inst of instances) {
this.onMount(inst);
this.process(inst);
}
});
this.on('i18n:update', () => {
@ -115,6 +138,12 @@ export default class Player extends Module {
}
onMount(inst) {
if ( this.settings.get('player.theatre.auto-enter') && inst.onTheatreChange )
inst.onTheatreChange(true);
}
process(inst) {
this.addResetButton(inst);
this.updateVolumeScroll(inst);