+
+
+
+
\ No newline at end of file
diff --git a/src/modules/chat/actions/edit-chat.vue b/src/modules/chat/actions/edit-chat.vue
new file mode 100644
index 00000000..3fc204f6
--- /dev/null
+++ b/src/modules/chat/actions/edit-chat.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/chat/actions/edit-icon.vue b/src/modules/chat/actions/edit-icon.vue
new file mode 100644
index 00000000..a8c46db2
--- /dev/null
+++ b/src/modules/chat/actions/edit-icon.vue
@@ -0,0 +1,132 @@
+
+
+
+
+
+
+ {{ t('setting.actions.variables', 'Available Variables: %{vars}', {vars}) }}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/chat/actions/edit-image.vue b/src/modules/chat/actions/edit-image.vue
new file mode 100644
index 00000000..24b2f492
--- /dev/null
+++ b/src/modules/chat/actions/edit-image.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('setting.actions.empty-search', 'no results') }}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/chat/actions/edit-text.vue b/src/modules/chat/actions/edit-text.vue
new file mode 100644
index 00000000..cf8ecf9b
--- /dev/null
+++ b/src/modules/chat/actions/edit-text.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/chat/actions/edit-timeout.vue b/src/modules/chat/actions/edit-timeout.vue
new file mode 100644
index 00000000..1b98f09c
--- /dev/null
+++ b/src/modules/chat/actions/edit-timeout.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/chat/actions/edit-url.vue b/src/modules/chat/actions/edit-url.vue
new file mode 100644
index 00000000..e810981c
--- /dev/null
+++ b/src/modules/chat/actions/edit-url.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/chat/actions/index.jsx b/src/modules/chat/actions/index.jsx
new file mode 100644
index 00000000..34ae6576
--- /dev/null
+++ b/src/modules/chat/actions/index.jsx
@@ -0,0 +1,303 @@
+'use strict';
+
+// ============================================================================
+// Emoji Handling
+// ============================================================================
+
+import Module from 'utilities/module';
+import {has, maybe_call, deep_copy} from 'utilities/object';
+import {ClickOutside} from 'utilities/dom';
+import Tooltip from 'utilities/tooltip';
+
+import * as ACTIONS from './types';
+import * as RENDERERS from './renderers';
+
+
+export default class Actions extends Module {
+ constructor(...args) {
+ super(...args);
+
+ this.inject('settings');
+ this.inject('tooltips');
+ this.inject('i18n');
+
+ this.actions = {};
+ this.renderers = {};
+
+ this.settings.add('chat.actions.inline', {
+ // Filter out actions
+ process: (ctx, val) =>
+ val.filter(x => x.appearance &&
+ this.renderers[x.appearance.type] &&
+ (! this.renderers[x.appearance.type].load || this.renderers[x.appearance.type].load(x.appearance)) &&
+ (! x.action || this.actions[x.action])
+ ),
+
+ default: [
+ {v: {action: 'ban', appearance: {type: 'icon', icon: 'ffz-i-block'}, display: {mod: true, mod_icons: true, deleted: false}}},
+ {v: {action: 'unban', appearance: {type: 'icon', icon: 'ffz-i-ok'}, display: {mod: true, mod_icons: true, deleted: true}}},
+ {v: {action: 'timeout', appearance: {type: 'icon', icon: 'ffz-i-clock'}, display: {mod: true, mod_icons: true}}},
+ ],
+
+ type: 'array_merge',
+ ui: {
+ path: 'Chat > In-Line Actions',
+ component: 'chat-actions',
+ inline: true,
+
+ data: () => {
+ const chat = this.resolve('site.chat');
+
+ return {
+ color: val => chat && chat.colors ? chat.colors.process(val) : val,
+ actions: deep_copy(this.actions),
+ renderers: deep_copy(this.renderers)
+ }
+ }
+ }
+ });
+
+ this.handleClick = this.handleClick.bind(this);
+ this.handleContext = this.handleContext.bind(this);
+ }
+
+
+ onEnable() {
+ this.tooltips.types.action = (target, tip) => {
+ const data = this.getData(target);
+ if ( ! data )
+ return this.i18n.t('chat.actions.unknown', 'Unknown Action Type');
+
+ if ( ! data.definition.tooltip )
+ return `Error: The "${data.action}" action provider does not have tooltip support.`;
+
+ if ( data.tip && data.tip.length )
+ return data.tip;
+
+ return maybe_call(data.definition.tooltip, this, data, target, tip);
+ }
+
+
+ for(const key in ACTIONS)
+ if ( has(ACTIONS, key) )
+ this.addAction(key, ACTIONS[key]);
+
+ for(const key in RENDERERS)
+ if ( has(RENDERERS, key) )
+ this.addRenderer(key, RENDERERS[key]);
+ }
+
+
+ addAction(key, data) {
+ if ( has(this.actions, key) )
+ return this.log.warn(`Attempted to add action "${key}" which is already defined.`);
+
+ this.actions[key] = data;
+
+ for(const ctx of this.settings.__contexts)
+ ctx.update('chat.actions.inline');
+ }
+
+
+ addRenderer(key, data) {
+ if ( has(this.renderers, key) )
+ return this.log.warn(`Attempted to add renderer "${key}" which is already defined.`);
+
+ this.renderers[key] = data;
+
+ for(const ctx of this.settings.__contexts)
+ ctx.update('chat.actions.inline');
+ }
+
+
+ renderInlineContext(target, data) {
+ if ( target._ffz_destroy )
+ return target._ffz_destroy();
+
+ const destroy = target._ffz_destroy = () => {
+ if ( target._ffz_outside )
+ target._ffz_outside.destroy();
+
+ if ( target._ffz_popup ) {
+ const fp = target._ffz_popup;
+ target._ffz_popup = null;
+ fp.destroy();
+ }
+
+ target._ffz_destroy = target._ffz_outside = null;
+ }
+
+ const parent = document.body.querySelector('.twilight-root,.twilight-minimal-root') || document.body,
+ tt = target._ffz_popup = new Tooltip(parent, target, {
+ logger: this.log,
+ manual: true,
+ html: true,
+
+ tooltipClass: 'ffz-action-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
+ arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
+ arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background tw-absolute',
+ innerClass: 'tw-pd-1',
+
+ popper: {
+ placement: 'bottom',
+ modifiers: {
+ preventOverflow: {
+ boundariesElement: parent
+ },
+ flip: {
+ behavior: ['bottom', 'top', 'left', 'right']
+ }
+ }
+ },
+
+ content: (t, tip) => data.definition.context.call(this, data, t, tip),
+ onShow: (t, tip) =>
+ setTimeout(() => {
+ target._ffz_outside = new ClickOutside(tip.outer, destroy)
+ }),
+
+ onHide: destroy
+ });
+
+ tt._enter(target);
+ }
+
+
+ renderInline(msg, mod_icons, current_user, current_room, createElement) {
+ const actions = [];
+
+ if ( msg.user && current_user.login === msg.user.userLogin )
+ return;
+
+ const chat = this.resolve('site.chat');
+
+ for(const data of this.parent.context.get('chat.actions.inline')) {
+ if ( ! data.action || ! data.appearance )
+ continue;
+
+ const ap = data.appearance || {},
+ disp = data.display || {},
+
+ def = this.renderers[ap.type];
+
+ if ( ! def || disp.disabled ||
+ (disp.mod_icons != null && disp.mod_icons !== mod_icons) ||
+ (disp.mod != null && disp.mod !== current_user.moderator) ||
+ (disp.staff != null && disp.staff !== current_user.staff) ||
+ (disp.deleted != null && disp.deleted !== msg.deleted) )
+ continue;
+
+ const has_color = def.colored && ap.color,
+ color = has_color && (chat && chat.colors ? chat.colors.process(ap.color) : ap.color),
+ contents = def.render.call(this, ap, createElement, color);
+
+ actions.push();
+ }
+
+ if ( ! actions.length )
+ return null;
+
+ const room = current_room && JSON.stringify(current_room),
+ user = msg.user && JSON.stringify({
+ login: msg.user.userLogin,
+ displayName: msg.user.userDisplayName,
+ id: msg.user.userID,
+ type: msg.user.userType
+ });
+
+ return (
+
+
+
+
+ {{ t('setting.actions.variables', 'Available Variables: %{vars}', {vars}) }}
+
+
+ {actions}
+
);
+ }
+
+
+ getData(element) {
+ const ds = element.dataset,
+ parent = element.parentElement,
+ pds = parent && parent.dataset,
+ action = ds && ds.action,
+ definition = this.actions[action];
+
+ if ( ! definition )
+ return null;
+
+ const user = pds && pds.user ? JSON.parse(pds.user) : null,
+ room = pds && pds.room ? JSON.parse(pds.room) : null,
+ message_id = pds && pds.msgId,
+
+ data = {
+ action,
+ definition,
+ tip: ds.tip,
+ options: ds.options ? JSON.parse(ds.options) : null,
+ user,
+ room,
+ message_id
+ };
+
+ if ( definition.defaults )
+ data.options = Object.assign({}, maybe_call(definition.defaults, this, data, element), data.options);
+
+ return data;
+ }
+
+
+ handleClick(event) {
+ const target = event.target,
+ data = this.getData(target);
+ if ( ! data )
+ return;
+
+ if ( ! data.definition.click ) {
+ if ( data.definition.context )
+ return this.handleContext(event);
+
+ return this.log.warn(`No click handler for action provider "${data.action}"`);
+ }
+
+ if ( target._ffz_tooltip$0 )
+ target._ffz_tooltip$0.hide();
+
+ return data.definition.click.call(this, event, data);
+ }
+
+ handleContext(event) {
+ if ( event.shiftKey )
+ return;
+
+ event.preventDefault();
+
+ const target = event.target,
+ data = this.getData(event.target);
+ if ( ! data )
+ return;
+
+ if ( ! data.definition.context )
+ return;
+
+ if ( target._ffz_tooltip$0 )
+ target._ffz_tooltip$0.hide();
+
+ this.renderInlineContext(event.target, data);
+ }
+
+
+ sendMessage(room, message) {
+ return this.resolve('site.chat').sendMessage(room, message);
+ }
+}
\ No newline at end of file
diff --git a/src/modules/chat/actions/preview-icon.vue b/src/modules/chat/actions/preview-icon.vue
new file mode 100644
index 00000000..9d624e9f
--- /dev/null
+++ b/src/modules/chat/actions/preview-icon.vue
@@ -0,0 +1,14 @@
+
+ { // eslint-disable-line react/jsx-key
+ this.i18n.t('chat.actions.open_url', 'Open URL')
+ }
),
+ ({ // eslint-disable-line react/jsx-key
+ url
+ }
)
+ ]
+ },
+
+ click(event, data) {
+ const url = process(data.options.url, data, this.i18n.locale);
+
+ const win = window.open();
+ win.opener = null;
+ win.location = url;
+ }
+};
+
+
+// ============================================================================
+// Chat
+// ============================================================================
+
+export const chat = {
+ presets: [{
+ appearance: {
+ type: 'text',
+ text: 'C'
+ }
+ }],
+
+ defaults: {
+ command: '@{{user.login}} HeyGuys'
+ },
+
+ title: 'Chat Command',
+ description: '%{options.command}',
+
+ editor: () => import(/* webpackChunkName: 'main-menu' */ './edit-chat.vue'),
+
+ process(data) {
+ return transformPhrase(
+ data.options.command,
+ data,
+ this.i18n.locale,
+ VAR_REPLACE,
+ {}
+ )
+ },
+
+ tooltip(data) {
+ const msg = process(data.options.command, data, this.i18n.locale);
+
+ return [
+ ({ // eslint-disable-line react/jsx-key
+ this.i18n.t('chat.actions.chat', 'Chat Command')
+ }
),
+ ({ // eslint-disable-line react/jsx-key
+ msg
+ }
)
+ ]
+ },
+
+ click(event, data) {
+ const msg = data.definition.process.call(this, data);
+ this.sendMessage(data.room.login, msg);
+ }
+}
+
+
+// ============================================================================
+// Timeout
+// ============================================================================
+
+
+export const ban = {
+ presets: [{
+ appearance: {
+ type: 'icon',
+ icon: 'ffz-i-block'
+ },
+
+ display: {
+ mod: true,
+ mod_icons: true
+ }
+ }],
+
+ editor: () => import(/* webpackChunkName: 'main-menu' */ './edit-ban.vue'),
+
+ title: 'Ban User',
+
+ tooltip(data) {
+ return this.i18n.t('chat.actions.ban', 'Ban %{user.login}', {user: data.user});
+ },
+
+ click(event, data) {
+ this.sendMessage(data.room.login, `/ban ${data.user.login} ${data.reason||''}`);
+ }
+}
+
+
+export const timeout = {
+ presets: [{
+ appearance: {
+ type: 'icon',
+ icon: 'ffz-i-clock'
+ },
+
+ display: {
+ mod: true,
+ mod_icons: true
+ }
+ }],
+
+ defaults: {
+ duration: 600
+ },
+
+ editor: () => import(/* webpackChunkName: 'main-menu' */ './edit-timeout.vue'),
+
+ title: 'Timeout User',
+ description: '%{options.duration} second%{options.duration|en_plural}',
+
+ tooltip(data) {
+ return this.i18n.t(
+ 'chat.actions.timeout',
+ 'Timeout %{user.login} for %{duration} second%{duration|en_plural}',
+ {
+ user: data.user,
+ duration: data.options.duration
+ }
+ );
+ },
+
+ click(event, data) {
+ this.sendMessage(data.room.login, `/timeout ${data.user.login} ${data.options.duration} ${data.reason||''}`);
+ }
+}
+
+
+export const unban = {
+ presets: [{
+ appearance: {
+ type: 'icon',
+ icon: 'ffz-i-ok'
+ },
+
+ display: {
+ mod: true,
+ mod_icons: true
+ }
+ }],
+
+ title: 'Unban User',
+
+ tooltip(data) {
+ return this.i18n.t('chat.actions.unban', 'Unban %{user.login}', {user: data.user});
+ },
+
+ click(event, data) {
+ this.sendMessage(data.room.login, `/unban ${data.user.login}`);
+ }
+}
+
+
+export const untimeout = {
+ presets: [{
+ appearance: {
+ type: 'icon',
+ icon: 'ffz-i-ok'
+ },
+
+ display: {
+ mod: true,
+ mod_icons: true
+ }
+ }],
+
+ title: 'Untimeout User',
+
+ tooltip(data) {
+ return this.i18n.t('chat.actions.untimeout', 'Untimeout %{user.login}', {user: data.user});
+ },
+
+ click(event, data) {
+ this.sendMessage(data.room.login, `/untimeout ${data.user.login}`);
+ }
+}
+
+
+// ============================================================================
+// Whisper
+// ============================================================================
+
+export const whisper = {
+ presets: [{
+ appearance: {
+ type: 'text',
+ text: 'W'
+ }
+ }],
+
+ title: 'Whisper User',
+
+ tooltip(data) {
+ return this.i18n.t('chat.actions.whisper', 'Whisper %{user.login}', data);
+ },
+
+ click(event, data) {
+ const site = this.resolve('site'),
+ me = site && site.getUser(),
+ store = site && site.store;
+
+ if ( ! me || ! store || ! data.user.id || me.id == data.user.id )
+ return;
+
+ const id_1 = parseInt(me.id, 10),
+ id_2 = parseInt(data.user.id, 10),
+ thread = id_1 < id_2 ? `${id_1}_${id_2}` : `${id_2}_${id_1}`;
+
+ store.dispatch({
+ type: 'whispers.THREAD_OPENED',
+ data: {
+ threadID: thread,
+ collapsed: false
+ }
+ });
+ }
+}
+
+
+// ============================================================================
+// Gift Subscription
+// ============================================================================
+
+/*export const gift_sub = {
+ presets: [{
+ appearance: {
+ type: 'icon',
+ icon: 'ffz-i-gift'
+ }
+ }],
+
+ title: 'Gift Subscription',
+
+ tooltip(data) {
+ return this.i18n.t('chat.actions.gift_sub', 'Gift a Sub to %{user.login}', data);
+ },
+
+ context() {
+ return (
+ Woop woop.
+
);
+ }
+}*/
\ No newline at end of file
diff --git a/src/modules/chat/emoji.js b/src/modules/chat/emoji.js
index 5f7ed9d9..603a48f0 100644
--- a/src/modules/chat/emoji.js
+++ b/src/modules/chat/emoji.js
@@ -6,6 +6,7 @@
import Module from 'utilities/module';
import {SERVER} from 'utilities/constants';
+import {has} from 'utilities/object';
import splitter from 'emoji-regex/es2015/index';
@@ -140,7 +141,7 @@ export default class Emoji extends Module {
if ( ! style )
style = this.parent.context.get('chat.emoji.style');
- if ( style === 0 )
+ if ( ! has(SIZES, style) )
style = 'twitter';
return `${SERVER}/static/emoji/img-${style}-${SIZES[style][0]}/${image}`;
@@ -150,7 +151,7 @@ export default class Emoji extends Module {
if ( ! style )
style = this.parent.context.get('chat.emoji.style');
- if ( style === 0 )
+ if ( ! has(SIZES, style) )
style = 'twitter';
return SIZES[style].map(w =>
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index 912f006e..8cd3aa57 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -17,6 +17,8 @@ import User from './user';
import * as TOKENIZERS from './tokenizers';
import * as RICH_PROVIDERS from './rich_providers';
+import Actions from './actions';
+
export default class Chat extends Module {
constructor(...args) {
@@ -33,6 +35,7 @@ export default class Chat extends Module {
this.inject(Badges);
this.inject(Emotes);
this.inject(Emoji);
+ this.inject(Actions);
this._link_info = {};
diff --git a/src/modules/chat/tokenizers.jsx b/src/modules/chat/tokenizers.jsx
index 7d0a5dbf..3c4738c5 100644
--- a/src/modules/chat/tokenizers.jsx
+++ b/src/modules/chat/tokenizers.jsx
@@ -206,7 +206,7 @@ export const Mentions = {
let regex, login, display;
if ( user && user.login ) {
login = user.login.toLowerCase();
- display = user.display && user.display.toLowerCase();
+ display = user.displayName && user.displayName.toLowerCase();
if ( display === login )
display = null;
diff --git a/src/modules/main_menu/components/action-editor.vue b/src/modules/main_menu/components/action-editor.vue
new file mode 100644
index 00000000..8b9d786f
--- /dev/null
+++ b/src/modules/main_menu/components/action-editor.vue
@@ -0,0 +1,382 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/main_menu/components/action-preview.vue b/src/modules/main_menu/components/action-preview.vue
new file mode 100644
index 00000000..ae69c920
--- /dev/null
+++ b/src/modules/main_menu/components/action-preview.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/main_menu/components/badge-visibility.vue b/src/modules/main_menu/components/badge-visibility.vue
index a1f06d71..ea1f88cb 100644
--- a/src/modules/main_menu/components/badge-visibility.vue
+++ b/src/modules/main_menu/components/badge-visibility.vue
@@ -5,7 +5,7 @@
class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1"
>
- {{ t('setting.badge-inheritence', 'These values are being overridden by another profile and may not take effect.') }}
+ {{ t('setting.warn-inheritence', 'These values are being overridden by another profile and may not take effect.') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+{{ description }}
+
+ {{ t('setting.actions.visible', 'visible: %{list}', {list: visibility}) }}
+
+
+
+ {{ t('setting.actions.appearance', 'Appearance') }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('setting.actions.color.warn', 'This value will be automatically adjusted for visibility based on your chat color settings.') }}
+
+ {{ t('setting.actions.visibility', 'Visibility') }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('setting.actions.action', 'Action') }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/modules/main_menu/components/chat-actions.vue b/src/modules/main_menu/components/chat-actions.vue
new file mode 100644
index 00000000..803d27df
--- /dev/null
+++ b/src/modules/main_menu/components/chat-actions.vue
@@ -0,0 +1,428 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/main_menu/components/color-picker.vue b/src/modules/main_menu/components/color-picker.vue
new file mode 100644
index 00000000..a28937d3
--- /dev/null
+++ b/src/modules/main_menu/components/color-picker.vue
@@ -0,0 +1,106 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/modules/main_menu/components/experiments.vue b/src/modules/main_menu/components/experiments.vue
index 9f454c4c..90d1cb2f 100644
--- a/src/modules/main_menu/components/experiments.vue
+++ b/src/modules/main_menu/components/experiments.vue
@@ -1,25 +1,25 @@
diff --git a/src/modules/main_menu/components/main-menu.vue b/src/modules/main_menu/components/main-menu.vue
index 739a28fd..391014a3 100644
--- a/src/modules/main_menu/components/main-menu.vue
+++ b/src/modules/main_menu/components/main-menu.vue
@@ -38,18 +38,14 @@
/>
- {{ t('settings.experiments.about', 'This feature allows you to override experiment values. Please note that, for most experiments, you may have to refresh the page for your changes to take effect.') }}
+ {{ t('setting.experiments.about', 'This feature allows you to override experiment values. Please note that, for most experiments, you may have to refresh the page for your changes to take effect.') }}
- {{ t('settings.experiments.unique-id', 'Unique ID: %{id}', {id: unique_id}) }}
+ {{ t('setting.experiments.unique-id', 'Unique ID: %{id}', {id: unique_id}) }}
- {{ t('settings.experiments.ffz', 'FrankerFaceZ Experiments') }} + {{ t('setting.experiments.ffz', 'FrankerFaceZ Experiments') }}
@@ -48,7 +48,7 @@
:key="idx"
:selected="i.value === exp.value"
>
- {{ t('settings.experiments.entry', '%{value} (weight: %{weight})', i) }}
+ {{ t('setting.experiments.entry', '%{value} (weight: %{weight})', i) }}
@@ -67,12 +67,12 @@
- {{ t('settings.experiments.none', 'There are no current experiments.') }}
+ {{ t('setting.experiments.none', 'There are no current experiments.') }}
- {{ t('settings.experiments.twitch', 'Twitch Experiments') }} + {{ t('setting.experiments.twitch', 'Twitch Experiments') }}
@@ -115,7 +115,7 @@
v-if="exp.in_use === false"
:selected="exp.default"
>
- {{ t('settings.experiments.unset', 'unset') }}
+ {{ t('setting.experiments.unset', 'unset') }}
-
+
-
-
-
+