Source: IsThereAnyDeal.com
Any affiliate links in the provided data are the responsibility of IsThereAnyDeal.' + - '
Reminder: Buying games on Twitch directly supports partnered streamers and you can earn Twitch Crates containing emotes and badges.'); + '
Source: IsThereAnyDeal.com
Any affiliate links in the provided data are the responsibility of IsThereAnyDeal and do not benefit FrankerFaceZ. You may consider visiting the store directly.' + + '
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 Twitch Crates 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'), diff --git a/src/ember/directory.js b/src/ember/directory.js index bf296531..3ad8a9b1 100644 --- a/src/ember/directory.js +++ b/src/ember/directory.js @@ -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'), diff --git a/src/ember/layout.js b/src/ember/layout.js index 55796926..0a955804 100644 --- a/src/ember/layout.js +++ b/src/ember/layout.js @@ -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,' + diff --git a/src/ember/line.js b/src/ember/line.js index 2040fa54..dba478f3 100644 --- a/src/ember/line.js +++ b/src/ember/line.js @@ -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.
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: [], diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js index e14ceca2..e2c2d6dc 100644 --- a/src/ember/moderation-card.js +++ b/src/ember/moderation-card.js @@ -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) diff --git a/src/ember/room.js b/src/ember/room.js index 945018c6..5ae8df59 100644 --- a/src/ember/room.js +++ b/src/ember/room.js @@ -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, diff --git a/src/ember/sidebar.js b/src/ember/sidebar.js index 3d6a80e0..1d5c99fb 100644 --- a/src/ember/sidebar.js +++ b/src/ember/sidebar.js @@ -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.
Examples: red, orange, #333, rgb(255,127,127)
Note: Colors will be darkened by default. To prevent a color being darkened, please start your input with an exclamation mark. Example: !orange",
+ 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 = ' + ')
' +
+ '' + utils.sanitize(channel.status) + '
' + + (uptime > 0 ? '' + constants.CLOCK + ' ' + utils.duration_string(uptime) + '' : '') + + '' + constants.LIVE + ' ' + utils.number_commas(data.stream.viewers) + '' + + '' + utils.sanitize(channel.display_name || channel.name) + '
' + + ''; + }); + + return '