From fbb12d726ae108610c4bd8d5d17c63d56aaada27 Mon Sep 17 00:00:00 2001 From: SirStendec Date: Thu, 12 May 2016 16:06:26 -0400 Subject: [PATCH] 3.5.174. A bit of code cleanup. New UI to block games in the directory, or hide their thumbnails. Added boxart to videos cause Twitch removed it. --- src/ember/channel.js | 9 -- src/ember/chatview.js | 2 - src/ember/conversations.js | 6 -- src/ember/directory.js | 178 +++++++++++++++++++++++++++---------- src/ember/sidebar.js | 2 +- src/main.js | 21 +++-- src/utils.js | 5 +- style.css | 33 ++++++- 8 files changed, 179 insertions(+), 77 deletions(-) diff --git a/src/ember/channel.js b/src/ember/channel.js index 1b4e2d95..4fd5be73 100644 --- a/src/ember/channel.js +++ b/src/ember/channel.js @@ -216,15 +216,6 @@ FFZ.prototype._modify_cindex = function(view) { el.setAttribute('data-channel', id); el.classList.add('ffz-channel'); - // Try changing the theater mode tooltip. - /* Deprecated: Theatre button is now in the player. - var tb = this.$('.theatre-button > a'), - opts = tb.data('tipsy'); - - tb.attr('title', 'Theater Mode (Alt+T)'); - if ( opts && opts.options && typeof opts.options.gravity !== "function" ) - opts.options.gravity = utils.tooltip_placement(constants.TOOLTIP_DISTANCE, opts.options.gravity || 'n');//*/ - this.ffzFixTitle(); this.ffzUpdateUptime(); this.ffzUpdateChatters(); diff --git a/src/ember/chatview.js b/src/ember/chatview.js index aab5feec..21ef860e 100644 --- a/src/ember/chatview.js +++ b/src/ember/chatview.js @@ -530,8 +530,6 @@ FFZ.prototype._modify_cview = function(view) { el && el.setAttribute('data-room', room_id || ""); this.$('.textarea-contain').append(f.build_ui_link(this)); - //this.$('.chat-messages').find('.html-tooltip').tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); - //this.$('.chat-messages').find('.ffz-tooltip').tipsy({live: true, html: true, title: f.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); if ( ! f.has_bttv ) { if ( f.settings.group_tabs ) diff --git a/src/ember/conversations.js b/src/ember/conversations.js index 9b8a9e98..a0f8839b 100644 --- a/src/ember/conversations.js +++ b/src/ember/conversations.js @@ -99,10 +99,6 @@ FFZ.prototype.setup_conversations = function() { catch(err) { } } else this.log("Unable to resolve: component:conversation-line"); - - // TODO: Make this better later. - //jQuery('.conversations-list').find('.html-tooltip').tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); - //jQuery('.conversations-list').find('.ffz-tooltip').tipsy({live: true, html: true, title: this.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); } @@ -175,8 +171,6 @@ FFZ.prototype._modify_conversation_window = function(component) { } jQuery('.badge', el).tipsy({gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 'n')}); - //jQuery(el).find('.html-tooltip').tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); - //jQuery(el).find('.ffz-tooltip').tipsy({live: true, html: true, title: f.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')}); } }); } diff --git a/src/ember/directory.js b/src/ember/directory.js index dd0f3d78..e05bcffb 100644 --- a/src/ember/directory.js +++ b/src/ember/directory.js @@ -121,8 +121,8 @@ FFZ.settings_info.spoiler_games = { category: "Directory", no_mobile: true, - name: "Spoiler Games", - help: "Stream thumbnails will be hidden for games that you add to this list.", + name: "No-Thumbnail Games", + help: "Stream and video thumbnails will be hidden for games that you add to this list.", on_update: function() { var spoiled = this.settings.spoiler_games, @@ -141,7 +141,7 @@ FFZ.settings_info.spoiler_games = { old_val = f.settings.spoiler_games.join(", "); utils.prompt( - "Spoiler Games", + "No-Thumbnail Games", "Please enter a comma-separated list of games that you would like to have the thumbnails hidden for in the Directory.

This is case insensitive, however you must type the full name.

Example: Undertale", old_val, function(new_val) { @@ -209,7 +209,8 @@ FFZ.prototype.setup_directory = function() { try { ChannelView.create().destroy(); } catch(err) { } - } + } else + this.log("Unable to locate the Ember component:stream-preview"); var CreativeChannel = utils.ember_resolve('component:creative-preview'); if ( CreativeChannel ) { @@ -217,11 +218,17 @@ FFZ.prototype.setup_directory = function() { try { CreativeChannel.create().destroy(); } catch(err) { } - } + } else + this.log("Unable to locate the Ember component:creative-preview"); var CSGOChannel = utils.ember_resolve('view:cs-go-channel'); - if ( CSGOChannel ) + if ( CSGOChannel ) { this._modify_directory_live(CSGOChannel, true); + try { + CSGOChannel.create().destroy(); + } catch(err) { } + } else + this.log("Unable to locate the Ember view:cs-go-channel"); var HostView = utils.ember_resolve('component:host-preview'); HostView = this._modify_directory_host(HostView); @@ -232,10 +239,20 @@ FFZ.prototype.setup_directory = function() { var VideoPreview = utils.ember_resolve('component:video-preview'); if ( VideoPreview ) { - VideoPreview = this._modify_video_preview(VideoPreview); + this._modify_video_preview(VideoPreview); try { VideoPreview.create().destroy(); } catch(err) { } - } + } else + this.log("Unable to locate the Ember component:video-preview"); + + + var GameFollow = utils.ember_resolve('component:game-follow-button'); + if ( GameFollow ) { + this._modify_game_follow(GameFollow); + try { GameFollow.create().destroy() } + catch(err) { } + } else + this.log("Unable to locate the Ember component:game-follow-button"); // Initialize existing views. @@ -254,6 +271,9 @@ FFZ.prototype.setup_directory = function() { } else if ( VideoPreview && view instanceof VideoPreview ) { if ( ! view.ffzInit ) this._modify_video_preview(view); + } else if ( GameFollow && view instanceof GameFollow ) { + if ( ! view.ffzInit ) + this._modify_game_follow(view); } else continue; @@ -390,6 +410,74 @@ FFZ.prototype._modify_following = function() { } +FFZ.prototype._modify_game_follow = function(component) { + var f = this; + component.reopen({ + didInsertElement: function() { + this._super(); + this.ffzInit(); + }, + + ffzInit: function() { + var el = this.get('element'), + game = this.get('game.id').toLowerCase(), + + click_button = function(setting, update_func) { + return function(e) { + e.preventDefault(); + var games = f.settings.get(setting), + ind = games.indexOf(game); + + if ( ind === -1 ) + games.push(game); + else + games.splice(ind, 1); + + f.settings.set(setting, games); + update_func(); + } + }; + + // Block Button + var block = utils.createElement('div', 'follow-button ffz-block-button'), + block_link = utils.createElement('a', 'tooltip follow block'); + + update_block = function() { + var is_blocked = f.settings.banned_games.indexOf(game) !== -1; + block_link.classList.toggle('active', is_blocked); + + block_link.innerHTML = '' + (is_blocked ? 'Unblock' : 'Block') + ''; + block_link.title = 'Click to ' + (is_blocked ? 'unblock' : 'block') + " this game.\n\nBlocking a game hides all the streams and videos of the game when you're not viewing it directly."; + }; + + update_block(); + block_link.addEventListener('click', click_button('banned_games', update_block)); + block.appendChild(block_link); + el.appendChild(block); + + // Spoiler Button + var spoiler = utils.createElement('div', 'follow-button ffz-spoiler-button'), + spoiler_link = utils.createElement('a', 'tooltip follow spoiler'), + + update_spoiler = function() { + var is_spoiled = f.settings.spoiler_games.indexOf(game) !== -1; + spoiler_link.classList.toggle('active', is_spoiled); + + spoiler_link.innerHTML = '' + (is_spoiled ? 'Show Thumbnails' : 'Hide Thumbnails') + ''; + spoiler_link.title = 'Click to ' + (is_spoiled ? 'show' : 'hide') + " thumbnails for this game.\n\nHiding thumbnails for a game will help you avoid spoilers for a game that you haven't played yet."; + } + + update_spoiler(); + spoiler_link.addEventListener('click', click_button('spoiler_games', update_spoiler)); + spoiler.appendChild(spoiler_link); + el.appendChild(spoiler); + + jQuery('.tooltip', el).tipsy(); + } + }) +} + + FFZ.prototype._modify_directory_live = function(dir, is_csgo) { var f = this, pref = is_csgo ? 'context.model.' : 'stream.'; @@ -521,14 +609,46 @@ FFZ.prototype._modify_video_preview = function(vp) { ffzInit: function() { var el = this.get('element'), - game = this.get('video.game'); + game = this.get('video.game'), + + thumb = el && el.querySelector('.thumb'), + boxart = thumb && thumb.querySelector('.boxart'); el.classList.add('ffz-directory-preview'); - el.setAttribute('data-channel', this.get('video.channel.id')); + el.setAttribute('data-channel', this.get('video.channel.name')); el.setAttribute('data-game', game); el.classList.toggle('ffz-game-banned', f.settings.banned_games.indexOf(game && game.toLowerCase()) !== -1); el.classList.toggle('ffz-game-spoilered', f.settings.spoiler_games.indexOf(game && game.toLowerCase()) !== -1); + + if ( ! boxart && thumb && game ) { + var img = utils.createElement('img'), + c = utils.ember_lookup('router:main'); + + boxart = utils.createElement('a', 'boxart'); + boxart.href = this.get('video.gameUrl'); + boxart.setAttribute('original-title', game); + boxart.addEventListener('click', function(e) { + if ( e.button !== 0 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) + return; + + e.preventDefault(); + jQuery('.tipsy').remove(); + + if ( game === "Counter-Strike: Global Offensive" ) + c.transitionTo('csgo.channels.index') + else if ( game === "Creative" ) + c.transitionTo('creative.index'); + else + c.transitionTo('game-directory.index', encodeURIComponent(game)); + + return false; + }); + + img.src = this.get('video.gameBoxart'); + boxart.appendChild(img); + thumb.appendChild(boxart); + } } }); } @@ -666,9 +786,7 @@ FFZ.prototype._modify_directory_host = function(dir) { target = this.get('stream.target.channel'), game = this.get('stream.target.meta_game'), - hosts = this.get('stream.ffz_hosts'); //, - - //boxart = thumb && thumb.querySelector('.boxart'); + hosts = this.get('stream.ffz_hosts'); el.classList.add('ffz-directory-preview'); el.setAttribute('data-channel', target.name); @@ -680,40 +798,6 @@ FFZ.prototype._modify_directory_host = function(dir) { this._ffz_image_timer = setInterval(this.ffzRotateImage.bind(this), 30000); this.ffzRotateImage(); - // Fix the game not showing - /*if ( ! boxart && thumb && this.get('context.model.game') ) { - var img = document.createElement('img'), - game = this.get("context.model.game"), - c = utils.ember_lookup('router:main'); - - boxart = document.createElement('a'); - boxart.className = 'boxart'; - boxart.href = this.get("context.model.gameUrl"); - boxart.setAttribute('original-title', game); - - boxart.addEventListener('click', function(e) { - if ( e.button !== 0 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) - return; - - e.preventDefault(); - jQuery('.tipsy').remove(); - - if ( game === "Counter-Strike: Global Offensive" ) - c.transitionTo('csgo.channels.index') - else if ( game === "Creative" ) - c.transitionTo('creative.channels.index'); - else - c.transitionTo('game-directory.index', encodeURIComponent(game)); - - return false; - }); - - img.src = this.get("context.model.gameBoxart"); - boxart.appendChild(img); - thumb.appendChild(boxart); - }*/ - - if ( f.settings.directory_logos ) { el.classList.add('ffz-directory-logo'); var logo = document.createElement('img'), diff --git a/src/ember/sidebar.js b/src/ember/sidebar.js index f32da134..f2b01f7e 100644 --- a/src/ember/sidebar.js +++ b/src/ember/sidebar.js @@ -70,7 +70,7 @@ FFZ.settings_info.sidebar_hide_recommended_friends = { FFZ.settings_info.sidebar_hide_friends_collapsed = { type: "boolean", - value: true, + value: false, category: "Sidebar", no_mobile: false, diff --git a/src/main.js b/src/main.js index ba4ad188..aee1d8e1 100644 --- a/src/main.js +++ b/src/main.js @@ -5,9 +5,7 @@ // The Constructor // ---------------- -var DOG = '░░░░░░░░░░░░▒▒▒▒\n░░░░░░░░░░░░▒▒░░░░▒▒\n░░░░░░░░░░▒▒░░████▄░▒\n░░░▄▄▄░░░▒▒░░░▀▀▀▀░░▒░░░░▄▄▄ \n░▄█████░▒▒▒▒░░░░░░░▒▒▒░░█████▄ \n ▄██████░▒▒▒▒▒░░░░▒▒▒▄▄▒▄░██████ \n ████████▒░██░▒░░░▒▒▒▀▀▒████████ \n ▀███████▒▒▒▒▒░░░░▒▒▒▒▒███████▀ \n ░░░▀▀████▒▒▒▒░░░░▒▒▒▄████▀▀\n ░░░░░░░▀░░▀▀▀▄▄▄█▄▀▀▀░░▀', - - FFZ = window.FrankerFaceZ = function() { +var FFZ = window.FrankerFaceZ = function() { FFZ.instance = this; // Logging @@ -39,7 +37,7 @@ FFZ.msg_commands = {}; // Version var VER = FFZ.version_info = { - major: 3, minor: 5, revision: 172, + major: 3, minor: 5, revision: 174, toString: function() { return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || ""); } @@ -263,7 +261,7 @@ FFZ.prototype.init_settings_transfer = function() { FFZ.prototype.init_player = function(delay) { var start = (window.performance && performance.now) ? performance.now() : Date.now(); this.log("Found Twitch Player after " + (delay||0) + " ms at: " + location); - this.log("Initializing FrankerFaceZ version " + FFZ.version_info, DOG); + this.log("Initializing FrankerFaceZ version " + FFZ.version_info); this.users = {}; this.is_dashboard = false; @@ -287,7 +285,7 @@ FFZ.prototype.init_player = function(delay) { FFZ.prototype.init_normal = function(delay, no_socket) { var start = (window.performance && performance.now) ? performance.now() : Date.now(); this.log("Found non-Ember Twitch after " + (delay||0) + " ms at: " + location); - this.log("Initializing FrankerFaceZ version " + FFZ.version_info, DOG); + this.log("Initializing FrankerFaceZ version " + FFZ.version_info); this.users = {}; this.is_dashboard = false; @@ -333,7 +331,7 @@ FFZ.prototype.is_dashboard = false; FFZ.prototype.init_dashboard = function(delay) { var start = (window.performance && performance.now) ? performance.now() : Date.now(); this.log("Found Twitch Dashboard after " + (delay||0) + " ms at: " + location); - this.log("Initializing FrankerFaceZ version " + FFZ.version_info, DOG); + this.log("Initializing FrankerFaceZ version " + FFZ.version_info); var match = location.pathname.match(/\/([^\/]+)/); this.dashboard_channel = match && match[1] || undefined; @@ -382,7 +380,7 @@ FFZ.prototype.init_dashboard = function(delay) { FFZ.prototype.init_ember = function(delay) { var start = (window.performance && performance.now) ? performance.now() : Date.now(); this.log("Found Twitch application after " + (delay||0) + " ms at: " + location); - this.log("Initializing FrankerFaceZ version " + FFZ.version_info, DOG); + this.log("Initializing FrankerFaceZ version " + FFZ.version_info); this.users = {}; this.is_dashboard = false; @@ -474,7 +472,12 @@ FFZ.prototype.setup_message_event = function() { FFZ.prototype._on_window_message = function(e) { var msg = e.data; if ( typeof msg === "string" ) - msg = JSON.parse(msg); + try { + msg = JSON.parse(msg); + } catch(err) { + // Not JSON? We don't care. + return; + } if ( ! msg || ! msg.from_ffz ) return; diff --git a/src/utils.js b/src/utils.js index 0ad37808..e0ae601c 100644 --- a/src/utils.js +++ b/src/utils.js @@ -492,7 +492,8 @@ module.exports = FFZ.utils = { }, toggle_cls: function(cls) { - var cl = document.body.classList; - return cl.toggle.bind(cl, cls); + return function(val) { + document.body.classList.toggle(cls, val); + } } } \ No newline at end of file diff --git a/style.css b/style.css index 00083a14..d34a9956 100644 --- a/style.css +++ b/style.css @@ -2729,13 +2729,44 @@ body:not(.ffz-tags-on-channel) .tw-title--tall { height: 60px } /* Banned and Spoiler Games */ .ffz-game-spoilered .thumb .cap img, -.ffz-game-banned { display: none } +body:not([data-current-path^="directory.csgo"]):not([data-current-path^="directory.game-directory"]):not([data-current-path^="directory.creative"]) .ffz-game-banned { display: none } + .ffz-game-spoilered .thumb .cap { position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; background: url("https://static-cdn.jtvnw.net/ttv-static/404_preview-320x180.jpg") no-repeat !important; background-size: cover !important; } +.follow-button.ffz-block-button { + margin-left: 2px; +} + +body[data-current-path^="directory.creative"] .follow-button.ffz-block-button { + margin: 0 1rem; +} + +.follow-button.ffz-spoiler-button .spoiler, +.follow-button.ffz-block-button .block { + background: #555; + padding: 0 10px; +} + +.follow-button.ffz-spoiler-button .spoiler.active { + background: #006700; +} + +.follow-button.ffz-spoiler-button .spoiler:not(.disabled):hover { + background: #247324; +} + +.follow-button.ffz-block-button .block.active { + background: #973333; +} + +.follow-button.ffz-block-button .block:not(.disabled):hover { + background: #a94444; +} + /* Dashboard Channel Feed */