1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-09-17 10:16:57 +00:00

3.5.471. Fixes for the directory. Closes #138. Closes #134. Closes #130. Closes #136. Older: Changes to ITAD popup. Top nav color. Better tool-tips for social bar

This commit is contained in:
SirStendec 2017-04-21 20:02:27 -04:00
parent 996ab7031e
commit e2803a7e1d
23 changed files with 451 additions and 126 deletions

View file

@ -89,8 +89,11 @@ FFZ.prototype.setup_channel = function() {
model.set('followers.content.meta.total', info.followers);
}
if ( is_host && f._cindex )
f._cindex.ffzFixHostTitle();
if ( f._cindex )
if ( is_host )
f._cindex.ffzFixHostTitle();
else
f._cindex.ffzFixTitle();
});
},

View file

@ -588,7 +588,7 @@ FFZ.prototype.modify_chat_input = function(component) {
this.set('ffz_updating', false);
} else if ( this.ffz_suggestions_el ) {
this.ffz_suggestions_el.parentElement.removeChild(this.ffz_suggestions_el);
jQuery(this.ffz_suggestions_el).remove();
this.ffz_suggestions_el = null;
}

View file

@ -261,6 +261,7 @@ FFZ.prototype.modify_buy_game_now = function(view) {
t = this,
data = t.get('itad_price'),
el = this.get('element'),
has_support = el && el.parentElement && (el.parentElement.querySelector('.cmrc-channel-box__support') || el.parentElement.querySelector('.cmrc-game-detail-box__support')),
cont = el && el.querySelector('.ffz-price-info');
if ( popup && popup.id === 'ffz-price-popup' || ! data || ! data[1] || ! data[1].list || ! data[1].list.length )
@ -281,7 +282,7 @@ FFZ.prototype.modify_buy_game_now = function(view) {
var entry = sales[i],
row = utils.createElement('tr');
row.innerHTML = '<td><a rel="noreferrer" target="_blank" href="' + utils.quote_san(entry.url) + '">' + utils.sanitize(entry.shop.name) + '</a></td>' +
row.innerHTML = '<td><a class="store-link" rel="noreferrer" target="_blank" href="' + utils.quote_san(entry.url) + '">' + utils.sanitize(entry.shop.name) + '</a></td>' +
'<td>' + (entry.price_cut < 0 ? '' : '-') + utils.sanitize(entry.price_cut) + '%</td>' +
'<td>' + formatter.format(entry.price_new) + '</td>' +
'<td>' + formatter.format(entry.price_old) + '</td>';
@ -289,16 +290,24 @@ FFZ.prototype.modify_buy_game_now = function(view) {
tbody.appendChild(row);
}
if ( has_support )
jQuery('.store-link', tbody).click(function(e) {
var name = has_support.querySelector('strong').textContent,
link_text = e.target.textContent;
if ( ! confirm("By following this link and purchasing from " + link_text + " you will NOT be supporting " + name + ".\n\nAre you sure you wish to contune?") )
return false;
});
// Add a by-line for IsThereAnyDeal.
var url = data[1].urls && data[1].urls.game || "https://isthereanydeal.com",
by_line = utils.createElement('span', 'ffz-attributiona',
'<hr>Source: <a rel="noreferrer" target="_blank" href="' + utils.quote_san(url) + '">IsThereAnyDeal.com</a><br><br>Any affiliate links in the provided data are the responsibility of IsThereAnyDeal.' +
'<hr>Reminder: Buying games on Twitch directly supports partnered streamers and you can earn <a target="_blank" href="https://blog.twitch.tv/twitch-crates-are-coming-soon-f50fa0cd4cdf">Twitch Crates</a> containing emotes and badges.');
'<hr>Source: <a rel="noreferrer" target="_blank" href="' + utils.quote_san(url) + '">IsThereAnyDeal.com</a><br><br>Any affiliate links in the provided data are the responsibility of IsThereAnyDeal and do not benefit FrankerFaceZ. You may consider visiting the store directly.' +
'<hr>Reminder: When you buy a game from other services, you miss out on the benefits of purchasing from Twitch directly including: supporting partnered streamers and earning <a target="_blank" href="https://blog.twitch.tv/twitch-crates-are-coming-soon-f50fa0cd4cdf">Twitch Crates</a> containing emotes and badges.');
balloon.appendChild(by_line);
// Now calculate the position and add the balloon to the DOM.
var container = document.querySelector('#main_col'),

View file

@ -255,13 +255,15 @@ FFZ.prototype.setup_directory = function() {
this.log("Hooking the Ember Directory views.");
this.update_views('component:stream-preview', function(x) { this.modify_directory_live(x, false) }, true);
this.update_views('component:creative-preview', function(x) { this.modify_directory_live(x, false) }, true);
this.update_views('component:csgo-channel-preview', function(x) { this.modify_directory_live(x, true) }, true);
this.update_views('component:twitch-carousel/stream-item', function(x) { this.modify_directory_live(x, false, true) }, true);
this.update_views('component:stream/snapshot-card', function(x) { this.modify_directory_live(x, false, true) }, true);
this.update_views('component:stream-preview', this.modify_directory_live, true);
this.update_views('component:creative-preview', this.modify_directory_live, true);
this.update_views('component:csgo-channel-preview', function(x) { this.modify_directory_live(x, 'channel.') }, true);
this.update_views('component:stream/lol-metadata', function(x) { this.modify_directory_live(x, 'content.') }, true);
this.update_views('component:twitch-carousel/stream-item', this.modify_directory_live, true);
this.update_views('component:stream/snapshot-card', this.modify_directory_live, true);
this.update_views('component:host-preview', this.modify_directory_host, true, true);
this.update_views('component:video-preview', this.modify_video_preview, true);
this.update_views('component:video/resumable-wrapper', this.modify_video_preview, true);
this.update_views("component:video/following-uploads", this.modify_following_uploads);
this.update_views('component:game-follow-button', this.modify_game_follow_button);
@ -471,21 +473,16 @@ FFZ.prototype.modify_game_follow_button = function(component) {
}
FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
FFZ.prototype.modify_directory_live = function(component, mode) {
var f = this,
pref = is_csgo ? 'channel.' : 'stream.',
meta_selector = is_card ? '.card__body' : '.meta',
thumb_selector = is_card ? '.card__img' : '.thumb',
cap_selector = is_card ? 'a:not(.card__boxpin)' : '.cap';
pref = mode || 'stream.';
utils.ember_reopen_view(component, {
ffz_init: function() {
var el = this.get('element'),
meta = el && el.querySelector(meta_selector),
thumb = el && el.querySelector(thumb_selector),
cap = thumb && thumb.querySelector(cap_selector),
meta = el && el.querySelector('.card__body'),
thumb = el && el.querySelector('.card__img'),
cap = thumb && thumb.querySelector('a:not(.card__boxpin)'),
uptime_setting = f.settings.stream_uptime,
channel_id = this.get(pref + 'channel.name'),
game = this.get(pref + 'game');
@ -515,7 +512,7 @@ FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
t = this;
logo.className = 'profile-photo';
logo.classList.toggle('is-csgo', is_csgo);
logo.classList.toggle('is-csgo', mode === 'channel.');
logo.src = this.get(pref + 'channel.logo') || constants.NO_LOGO;
logo.alt = f.format_display_name(this.get(pref + 'channel.display_name'), channel_id, true, true)[0];
@ -554,14 +551,9 @@ FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
},
ffzUpdateUptime: function() {
var up_since;
if ( is_card )
up_since = this.get(pref + 'createdAt');
else {
var raw_created = this.get(pref + 'created_at');
up_since = raw_created && utils.parse_date(raw_created);
}
var up_since = this.get(pref + 'created_at');
if ( typeof up_since === "string" )
up_since = utils.parse_date(up_since);
var now = Date.now() - (f._ws_server_offset || 0),
uptime = up_since && Math.floor((now - up_since.getTime()) / 1000) || 0;
@ -569,10 +561,7 @@ FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
if ( uptime > 0 ) {
if ( ! this._ffz_uptime ) {
var el = this.get('element'),
cont = el && el.querySelector(thumb_selector);
if ( ! is_card )
cont = cont && cont.querySelector(cap_selector);
cont = el && el.querySelector('.card__img');
if ( ! cont )
return;
@ -736,10 +725,10 @@ FFZ.prototype.modify_directory_host = function(component) {
ffz_init: function() {
var el = this.get('element'),
meta = el && el.querySelector('.meta'),
thumb = el && el.querySelector('.thumb'),
cap = thumb && thumb.querySelector('.cap'),
title = meta && meta.querySelector('.title a'),
meta = el && el.querySelector('.card__body'), //meta'),
thumb = el && el.querySelector('.card__img'), //thumb'),
cap = thumb && thumb.querySelector('a:not(.card__boxpin)'), //.cap'),
title = meta && meta.querySelector('.card__title a'),
target = this.get('stream.target.channel'),
game = this.get('stream.target.meta_game'),

View file

@ -371,7 +371,7 @@ FFZ.prototype.setup_layout = function() {
'top:' + theatre_chat_top + 'px;' +
'height:' + theatre_chat_height + 'px}' +
'.app-main.theatre #player {' +
'right: 0 !important}' +
'left: 0 !important;right: 0 !important}' +
'body.ffz-minimal-channel-bar:not(.ffz-channel-bar-bottom) .cn-bar-fixed {' +
'top: ' + (video_top - 40) + 'px}' +
'body.ffz-minimal-channel-bar:not(.ffz-channel-bar-bottom) .cn-bar-fixed:hover,' +

View file

@ -11,6 +11,18 @@
// Settings
// ---------------------
FFZ.settings_info.friend_notifications = {
type: "boolean",
value: false,
category: "Chat Filtering",
no_bttv: 6,
name: "Friend Watching Notifications",
help: "Display notifications when you receive a message that a friend has started watching the same channel."
}
FFZ.settings_info.alias_italics = {
type: "boolean",
value: true,
@ -232,6 +244,45 @@ FFZ.settings_info.banned_words = {
};
FFZ.settings_info.key_users = {
type: "button",
value: [],
category: "Chat Filtering",
name: "Highlight Users",
help: "Set a list of users that will have all their messages highlighted in chat.",
method: function(e, from_basic) {
var f = this,
old_val = this.settings.key_users.join("\n"),
input = utils.createElement('textarea');
input.style.marginBottom = "20px";
utils.prompt(
"Highlight Users",
"Please enter a list of usernames of users that you would like to be highlighted in chat.</p><p>Case insensitive. One name per line.",
old_val,
function(new_val) {
if ( new_val === null || new_val === undefined )
return;
// Split them up.
var vals = new_val.toLowerCase().trim().split(/\s*\n\s*/g),
i = vals.length;
while(i--)
if ( vals[i].length === 0 )
vals.splice(i,1);
f.settings.set("key_users", vals);
},
600, input);
}
};
FFZ.settings_info.keywords = {
type: "button",
value: [],

View file

@ -1611,9 +1611,9 @@ FFZ.prototype._build_mod_card_history = function(msg, modcard, show_from, ts_cli
jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) });
if ( modcard ) {
modcard.get('cardInfo.user.id') !== msg.from && jQuery('span.from', l_el).click(function(e) {
modcard.get('cardInfo.user.id') !== msg.from && jQuery('.from', l_el).click(function(e) {
var el = modcard.get('element');
el && f._roomv && f._roomv.get('room.id') === msg.room && f._roomv.actions.showModCard.call(f._roomv, {
el && f._roomv && f._roomv.get('room.id') === msg.room && f._roomv.actions.showModOverlay.call(f._roomv, {
sender: msg.from,
top: parseInt(el.style.top),
left: parseInt(el.style.left)

View file

@ -1330,6 +1330,18 @@ FFZ.prototype._modify_room = function(room) {
},
addFriendsWatchingMessage: function(msg) {
if ( f.settings.friend_notifications && ! document.hasFocus() )
f.show_notification(
msg.replace(/ *VoHiYo$/g, ''),
document.title,
"ffz_watching_notice",
(this.settings.notification_timeout*1000),
function() {
window.focus();
},
null,
'https://static-cdn.jtvnw.net/emoticons/v1/81274/3.0');
this.addMessage({
style: 'admin' + (f.has_bttv_6 ? '' : ' friend-watching'),
message: msg,

View file

@ -184,6 +184,71 @@ FFZ.settings_info.sidebar_disable_friends = {
};
var TWITCH_NAV_COLOR = "#4b367c",
TWITCH_NAV_RGB = FFZ.Color.RGBA.fromCSS(TWITCH_NAV_COLOR),
TWITCH_NAV_Luv = TWITCH_NAV_RGB.toLUVA();
FFZ.settings_info.top_nav_color = {
type: "button",
value: "#4b367c",
category: "Sidebar",
no_mobile: true,
name: "Top Navigation Color",
help: "Set a custom background color for the top navigation bar.",
on_update: function(val) {
var process = true;
val = val.trim();
if ( val.charAt(0) === '!' ) {
process = false;
val = val.substr(1).trimLeft();
}
var color = val && FFZ.Color.RGBA.fromCSS(val),
color_luv = color && color.toLUVA();
if ( ! val || process && ! color )
return utils.update_css(this._theme_style, 'top-nav-color');
else if ( process && color_luv.l > TWITCH_NAV_Luv.l ) {
color = color_luv._l(TWITCH_NAV_Luv.l).toRGBA();
val = color.toCSS();
}
var out = '.top-nav__menu,.top-nav__drawer-anchor,.top-nav__logo{background-color:' + val + '}';
if ( color.luminance() > 0.2 ) {
out += '.top-nav .notification-center__icon svg,.top-nav .prime-logo-crown.prime-logo-crown--white svg,.top-nav__logo svg path, .top-nav__overflow svg path{fill: #000}' +
'.top-nav__user-card:after{border-top-color:#000}' +
'.top-nav__user-status,.top-nav__nav-link{color: #111}' +
'.top-nav #user_display_name,.top-nav__nav-link:hover{color: #000}';
} else
out += '.top-nav__nav-link{color: #d7d7d7}';
utils.update_css(this._theme_style, 'top-nav-color', out);
},
method: function() {
var f = this;
utils.prompt(
"Top Navigation Color",
"Please enter a custom color for the top navigation bar. This supports any valid CSS color or color name.</p><p><b>Examples:</b> <code>red</code>, <code>orange</code>, <code>#333</code>, <code>rgb(255,127,127)</code></p><p><b>Note:</b> Colors will be darkened by default. To prevent a color being darkened, please start your input with an exclamation mark. Example: <code>!orange</code>",
this.settings.top_nav_color,
function(new_val) {
if ( new_val === null || new_val === undefined )
return;
new_val = new_val.trim();
f.settings.set("top_nav_color", new_val);
}
)
}
}
/*FFZ.settings_info.sidebar_start_open = {
type: "boolean",
value: false,
@ -213,6 +278,13 @@ FFZ.settings_info.sidebar_directly_to_followed_channels = {
// --------------------
FFZ.prototype.setup_sidebar = function() {
var s = this._theme_style = utils.createElement('style');
s.id = 'ffz-theme-style';
s.type = 'text/css';
document.head.appendChild(s);
FFZ.settings_info.top_nav_color.on_update.call(this, this.settings.top_nav_color);
// CSS to Hide Stuff
utils.toggle_cls('ffz-hide-promoted-games')(this.settings.sidebar_hide_promoted_games);
utils.toggle_cls('ffz-hide-recommended-channels')(this.settings.sidebar_hide_recommended_channels);
@ -259,8 +331,11 @@ FFZ.prototype.setup_sidebar = function() {
// Navigation Component
this.update_views('component:twitch-navigation', this.modify_navigation);
var f = this;
this.update_views('component:twitch-navigation', function(x) { return f.modify_navigation(x, false) });
this.update_views('component:top-nav', function(x) { return f.modify_navigation(x, true) });
this.update_views('component:recommended-channels', this.modify_recommended_channels);
this.update_views('component:social-column/followed-channel', this.modify_social_followed_channel)
// Navigation Service
/*var NavService = utils.ember_lookup('service:navigation');
@ -296,7 +371,66 @@ FFZ.prototype.modify_recommended_channels = function(component) {
}
FFZ.prototype.modify_navigation = function(component) {
FFZ._sc_followed_tooltip_id = 0;
FFZ.prototype.modify_social_followed_channel = function(component) {
var f = this;
utils.ember_reopen_view(component, {
ffz_init: function() {
var t = this,
el = this.get('element'),
card = jQuery('.sc-card', el),
data = card && card.data('tipsy');
if ( ! data || ! data.options )
return;
data.options.html = true;
data.options.gravity = utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'w');
data.options.title = function(el) {
var old_text = t.get('tooltipText');
if ( ! f.settings.following_count )
return utils.sanitize(old_text);
var tt_id = FFZ._sc_followed_tooltip_id++;
utils.api.get("streams/" + t.get('stream.id'), null, {version: 5}).then(function(data) {
var el = document.querySelector('#ffz-sc-tooltip-' + tt_id);
if ( ! el || ! data || ! data.stream )
return;
var channel = data.stream.channel,
is_spoilered = f.settings.spoiler_games.indexOf(channel.game && channel.game.toLowerCase()) !== -1,
up_since = f.settings.stream_uptime && data.stream.created_at && utils.parse_date(data.stream.created_at),
now = Date.now() - (f._ws_server_offset || 0),
uptime = up_since && (Math.floor((now - up_since.getTime()) / 60000) * 60) || 0;
var cl = el.parentElement.parentElement.classList;
cl.add('ffz-wide-tip');
cl.add('ffz-follow-tip');
el.innerHTML = '<img class="ffz-image-hover" src="' + utils.quote_san(is_spoilered ? 'https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg' : data.stream.preview.large) + '">' +
'<span class="ffz-tt-channel-title">' + utils.sanitize(channel.status) + '</span><hr>' +
(uptime > 0 ? '<span class="stat">' + constants.CLOCK + ' ' + utils.duration_string(uptime) + '</span>' : '') +
'<span class="stat">' + constants.LIVE + ' ' + utils.number_commas(data.stream.viewers) + '</span>' +
'<b>' + utils.sanitize(channel.display_name || channel.name) + '</b><br>' +
'<span class="playing">' +
(channel.game === 'Creative' ?
'Being Creative' :
(channel.game ?
'Playing ' + utils.sanitize(channel.game) :
'Not Playing')) +
'</span>';
});
return '<div id="ffz-sc-tooltip-' + tt_id + '">' + utils.sanitize(old_text) + '</div>';
};
}
})
}
FFZ.prototype.modify_navigation = function(component, is_top_nav) {
var f = this;
utils.ember_reopen_view(component, {
@ -304,11 +438,11 @@ FFZ.prototype.modify_navigation = function(component) {
f._nav = this;
// Fix tooltips now that we've overrode the function.
this._initTooltips();
! is_top_nav && this._initTooltips();
// Override behavior for the Following link.
var el = this.get('element'),
following_link = el && el.querySelector('a[data-href="following"]');
following_link = el && el.querySelector(is_top_nav ? 'a[data-tt_content="directory_following"]' : 'a[data-href="following"]');
if ( following_link ) {
following_link.href = '/directory/following' + (f.settings.sidebar_directly_to_followed_channels ? '/live' : '');