Fix pinned cheers.

changelog.html

@@ -1,3 +1,27 @@
+<div class="list-header">3.5.367 <time datetime="2016-11-09">(2016-11-09)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Bug showing button to dismiss a pinned cheer twice.</li>
+	<li>Fixed: Bug where a pinned cheer would linger when switching to another room.</li>
+</ul>
+
+<div class="list-header">3.5.366 <time datetime="2016-11-09">(2016-11-09)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Option to hide Pinned Cheers.</li>
+	<li>Added: Option to control expanded view for Pinned Cheers.</li>
+	<li>Fixed: Make the moderation tools for Pinned Cheers work correctly.</li>
+</ul>
+
+<div class="list-header">3.5.365 <time datetime="2016-11-09">(2016-11-09)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Emergency fix to stop Pinned Cheers from breaking FFZ.</li>
+</ul>
+
+<div class="list-header">3.5.364 <time datetime="2016-11-08">(2016-11-08)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Player size when Theater Mode is enabled and you enter fullscreen.</li>
+	<li>Fixed: Theater Mode metadata positioned incorrectly for hosted streams.</li>
+</ul>
+
 <div class="list-header">3.5.363 <time datetime="2016-11-08">(2016-11-08)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Properly position Search popout when sidebars are swapped and in portrait mode.</li>
@@ -55,24 +79,5 @@
 	<li>Fixed: Event emoticons not appearing for some users due to a race condition.</li>
 </ul>
 
-<div class="list-header">3.5.355 <time datetime="2016-10-27">(2016-10-27)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Added: Auto-Pause Hosted Channels is back! The player doesn't break anymore if you try to pause it immediately.</li>
-</ul>
-
-<div class="list-header">3.5.354 <time datetime="2016-10-26">(2016-10-26)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Display In-Line Mod Icons was breaking for any key other than Ctrl.</li>
-	<li>Fixed: Minor CSS tweaks.</li>
-	<li>Fixed: Ensure loyalty badges display correctly in Chat Replay.</li>
-	<li>Changed: Refactor Chat Replay hover pause.</li>
-</ul>
-
-<div class="list-header">3.5.353 <time datetime="2016-10-25">(2016-10-25)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Only use ctrl to freeze when the mouse is over the chat pane.</li>
-	<li>Fixed: Group chat got broken.</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>

old_changes.html

@@ -1,3 +1,22 @@
+<div class="list-header">3.5.355 <time datetime="2016-10-27">(2016-10-27)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Auto-Pause Hosted Channels is back! The player doesn't break anymore if you try to pause it immediately.</li>
+</ul>
+
+<div class="list-header">3.5.354 <time datetime="2016-10-26">(2016-10-26)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Display In-Line Mod Icons was breaking for any key other than Ctrl.</li>
+	<li>Fixed: Minor CSS tweaks.</li>
+	<li>Fixed: Ensure loyalty badges display correctly in Chat Replay.</li>
+	<li>Changed: Refactor Chat Replay hover pause.</li>
+</ul>
+
+<div class="list-header">3.5.353 <time datetime="2016-10-25">(2016-10-25)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Only use ctrl to freeze when the mouse is over the chat pane.</li>
+	<li>Fixed: Group chat got broken.</li>
+</ul>
+
 <div class="list-header">3.5.352 <time datetime="2016-10-25">(2016-10-25)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: More modifier CSS work.</li>

src/ember/bits.js

@@ -35,6 +35,44 @@ FFZ.settings_info.bits_tags_container = {
 }
 
 
+FFZ.settings_info.bits_pinned = {
+	type: "boolean",
+	value: true,
+
+	category: "Chat Appearance",
+
+	name: "Display Pinned Cheers",
+	help: "Show pinned messages with bits at the top of chat in channels that have it enabled.",
+
+	on_update: function(val) {
+		utils.toggle_cls('ffz-hide-pinned-cheers')(!val);
+	}
+}
+
+
+FFZ.settings_info.bits_pinned_expand = {
+	type: "select",
+	options: {
+		0: "On Click (Default)",
+		1: "On Hover",
+		2: "Always"
+	},
+
+	value: 0,
+	process_value: utils.process_int(0),
+
+	category: "Chat Appearance",
+
+	name: "Expand Pinned Cheers",
+	help: "Set when to expand pinned cheers beyond a minimal height.",
+
+	on_update: function(val) {
+		utils.toggle_cls('ffz-pinned-cheer-expand-hover')(val === 1);
+		utils.toggle_cls('ffz-pinned-cheer-expand')(val === 2);
+	}
+}
+
+
 
 // --------------------
 // Initialization
@@ -43,6 +81,9 @@ FFZ.settings_info.bits_tags_container = {
 FFZ.prototype.setup_bits = function() {
 	utils.toggle_cls('ffz-animate-bits')(this.settings.bits_animated);
 	utils.toggle_cls('ffz-show-bits-tags')(this.settings.bits_tags_container);
+	utils.toggle_cls('ffz-hide-pinned-cheers')(!this.settings.bits_pinned);
+	utils.toggle_cls('ffz-pinned-cheer-expand-hover')(this.settings.bits_pinned_expand === 1);
+	utils.toggle_cls('ffz-pinned-cheer-expand')(this.settings.bits_pinned_expand === 2);
 
 	var f = this,
 		Service = utils.ember_lookup('service:bits-rendering-config');

src/ember/chat-input.js

@@ -35,8 +35,10 @@ var FFZ = window.FrankerFaceZ,
 		subscribers: {info: 'Enable Subscribers-Only Mode'},
 		subscribersoff: {info: 'Disable Subscribers-Only Mode'},
 
-		emotesonly: {info: 'Enable Emotes-Only Mode'},
+		emoteonly: {info: 'Enable Emote-Only Mode'},
-		emotesonlyoff: {info: 'Disable Emotes-Only Mode'},
+		emoteonlyoff: {info: 'Disable Emote-Only Mode'},
+
+		unpin: {info: 'Unpin the current Pinned Cheer'}
 	},
 
 	BROADCASTER_COMMANDS = {

src/ember/layout.js

@@ -360,8 +360,9 @@ FFZ.prototype.setup_layout = function() {
 								'bottom: ' + video_bottom + 'px}' +
 							'body:not(.ffz-sidebar-swap) .cn-bar-fixed { right: 0 !important }' +
 							'body.ffz-sidebar-swap .cn-bar-fixed { left: 0 !important }' +
+							'.ffz-theater-stats .app-main.theatre .cn-hosting--bottom,' +
 							'.ffz-theater-stats .app-main.theatre .cn-metabar__more {' +
-								'max-width: calc(100% - 300px);' +
+								'max-width: calc(100% - 350px);' +
 								'bottom: ' + (theatre_video_bottom + 55) + 'px !important}' +
 							'.ffz-theater-stats:not(.ffz-theatre-conversations):not(.ffz-top-conversations) .app-main.theatre .cn-metabar__more {' +
 								'bottom: ' + (theatre_video_bottom + 90) + 'px !important}';
@@ -382,12 +383,14 @@ FFZ.prototype.setup_layout = function() {
 								'left:' + width + 'px !important}' +
 							'body:not(.ffz-sidebar-swap) #main_col:not(.expandRight) .cn-bar-fixed {' +
 								'right: ' + width + 'px}' +
+							'body.ffz-sidebar-swap .theatre .cn-hosting--bottom,' +
 							'body.ffz-sidebar-swap .theatre .cn-metabar__more {' +
 								'left: ' + (width + 10) + 'px !important}' +
 							'body.ffz-sidebar-swap #main_col:not(.expandRight) .cn-bar-fixed {' +
 								'left: ' + width + 'px !important}' +
+							'.ffz-theater-stats .app-main.theatre .cn-hosting--bottom,' +
 							'.ffz-theater-stats .app-main.theatre .cn-metabar__more {' +
-								'max-width: calc(100% - ' + (width + 300) + 'px)}';
+								'max-width: calc(100% - ' + (width + 350) + 'px)}';
 					}
 				}
 

src/ember/line.js

@@ -710,6 +710,8 @@ FFZ.prototype.save_aliases = function() {
 FFZ.prototype._modify_chat_line = function(component, is_vod) {
 	var f = this,
 		Layout = utils.ember_lookup('service:layout'),
+		Chat = utils.ember_lookup('controller:chat'),
+		PinnedCheers = utils.ember_lookup('service:bits-pinned-cheers'),
 		Settings = utils.ember_settings();
 
 	component.reopen({
@@ -724,7 +726,7 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 				return f.tokenize_chat_line(this.get('msgObject'));
 			} catch(err) {
 				f.error("chat-line tokenizedMessage: " + err);
-				return this._super();
+				return this.get('tokenizedMessage');
 			}
 		}.property("msgObject.message", "isChannelLinksDisabled", "currentUserNick", "msgObject.from", "msgObject.tags.emotes"),
 
@@ -756,7 +758,11 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 
 		buildModIconsHTML: function() {
 			var user = this.get('msgObject.from'),
-				room_id = this.get('msgObject.room'),
+
+				is_tb = this.get('msgObject.twitchBotRejected'),
+				is_pinned_cheer = this.get('msgObject.payday_timestamp'),
+
+				room_id = is_pinned_cheer ? Chat.get('currentRoom.id') : this.get('msgObject.room'),
 				room = f.rooms && f.rooms[room_id],
 
 				deleted = this.get('msgObject.deleted'),
@@ -767,11 +773,10 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 				this_ul = this.get('ffzUserLevel'),
 				other_ul = room && room.room && room.room.get('ffzUserLevel') || 0,
 
-				is_tb = this.get('msgObject.twitchBotRejected'),
+				shouldnt_show =is_whisper || this_ul >= other_ul || (f.settings.mod_buttons.length === 0 && ! is_tb),
-
 				output;
 
-			if ( is_whisper || this_ul >= other_ul || (f.settings.mod_buttons.length === 0 && ! is_tb) )
+			if ( ! is_pinned_cheer && shouldnt_show )
 				return '';
 
 			output = ['<span class="mod-icons">'];
@@ -781,50 +786,57 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 				output.push('<a class="mod-icon html-tooltip tb-allow" title="Allowed' + TB_TOOLTIP + '">Allowed</a>');
 			}
 
-			for(var i=0, l = f.settings.mod_buttons.length; i < l; i++) {
+			if ( is_pinned_cheer ) {
-				var pair = f.settings.mod_buttons[i],
+				if ( PinnedCheers && PinnedCheers.canDismissPinnedCheer(this.get('parentView.userData.id'), this.get('parentView.isViewerModeratorOrHigher')) )
-					prefix = pair[0], btn = pair[1], had_label = pair[2], is_emoji = pair[3],
+					output.push('<a class="mod-icon html-tooltip pc-dismiss" title="Dismiss for Everyone">Dismiss</a>');
-
+				output.push('<a class="mod-icon html-tooltip pc-dismiss-local" title="Dismiss">Dismiss</a>');
-					cmd, tip;
-
-				if ( is_emoji ) {
-					var setting = f.settings.parse_emoji,
-						token = f.emoji_data[is_emoji],
-						url = null;
-					if ( token ) {
-						if ( setting === 1 && token.tw )
-							url = token.tw_src;
-						else if ( setting === 2 && token.noto )
-							url = token.noto_src;
-						else if ( setting === 3 && token.one )
-							url = token.one_src;
-
-						if ( url )
-							prefix = '<img class="mod-icon-emoji" src="' + utils.quote_attr(url) + '">';
-					}
-				}
-
-				if ( btn === false ) {
-					if ( deleted )
-						output.push('<a class="mod-icon html-tooltip unban" title="Unban User" href="#">Unban</a>');
-					else
-						output.push('<a class="mod-icon html-tooltip ban' + (had_label ? ' custom' : '') + '" title="Ban User" href="#">' + (had_label ? prefix : 'Ban') + '</a>');
-
-				} else if ( btn === 600 )
-					output.push('<a class="mod-icon html-tooltip timeout' + (had_label ? ' custom' : '') + '" title="Timeout User (10m)" href="#">' + ( had_label ? prefix : 'Timeout') + '</a>');
-
-				else {
-					if ( typeof btn === "string" ) {
-						cmd = utils.replace_cmd_variables(btn, {name: user}, room && room.room, this.get('msgObject')).replace(/\s*<LINE>\s*/g, '\n');
-						tip = "Custom Command" + (cmd.indexOf("\n") !== -1 ? 's' : '') + '<br>' + utils.quote_san(cmd).replace('\n','<br>');
-					} else {
-						cmd = "/timeout " + user + " " + btn;
-						tip = "Timeout User (" + utils.duration_string(btn) + ")";
-					}
-					output.push('<a class="mod-icon html-tooltip' + (cmd.substr(0,9) === '/timeout' ? ' is-timeout' : '') + ' custom" data-cmd="' + utils.quote_attr(cmd) + '" title="' + tip + '" href="#">' + prefix + '</a>');
-				}
 			}
 
+			if ( ! shouldnt_show )
+				for(var i=0, l = f.settings.mod_buttons.length; i < l; i++) {
+					var pair = f.settings.mod_buttons[i],
+						prefix = pair[0], btn = pair[1], had_label = pair[2], is_emoji = pair[3],
+
+						cmd, tip;
+
+					if ( is_emoji ) {
+						var setting = f.settings.parse_emoji,
+							token = f.emoji_data[is_emoji],
+							url = null;
+						if ( token ) {
+							if ( setting === 1 && token.tw )
+								url = token.tw_src;
+							else if ( setting === 2 && token.noto )
+								url = token.noto_src;
+							else if ( setting === 3 && token.one )
+								url = token.one_src;
+
+							if ( url )
+								prefix = '<img class="mod-icon-emoji" src="' + utils.quote_attr(url) + '">';
+						}
+					}
+
+					if ( btn === false ) {
+						if ( deleted )
+							output.push('<a class="mod-icon html-tooltip unban" title="Unban User" href="#">Unban</a>');
+						else
+							output.push('<a class="mod-icon html-tooltip ban' + (had_label ? ' custom' : '') + '" title="Ban User" href="#">' + (had_label ? prefix : 'Ban') + '</a>');
+
+					} else if ( btn === 600 )
+						output.push('<a class="mod-icon html-tooltip timeout' + (had_label ? ' custom' : '') + '" title="Timeout User (10m)" href="#">' + ( had_label ? prefix : 'Timeout') + '</a>');
+
+					else {
+						if ( typeof btn === "string" ) {
+							cmd = utils.replace_cmd_variables(btn, {name: user}, room && room.room, this.get('msgObject')).replace(/\s*<LINE>\s*/g, '\n');
+							tip = "Custom Command" + (cmd.indexOf("\n") !== -1 ? 's' : '') + '<br>' + utils.quote_san(cmd).replace('\n','<br>');
+						} else {
+							cmd = "/timeout " + user + " " + btn;
+							tip = "Timeout User (" + utils.duration_string(btn) + ")";
+						}
+						output.push('<a class="mod-icon html-tooltip' + (cmd.substr(0,9) === '/timeout' ? ' is-timeout' : '') + ' custom" data-cmd="' + utils.quote_attr(cmd) + '" title="' + tip + '" href="#">' + prefix + '</a>');
+					}
+				}
+
 			return output.join('') + '</span>';
 		},
 
@@ -854,6 +866,9 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 		},
 
 		buildBadgesHTML: function() {
+			if ( ! this.get('msgObject.room') && this.get('msgObject.payday_timestamp') )
+				this.set('msgObject.room', Chat.get('currentRoom.id'));
+
 			return '<span class="badges">' + f.render_badges(f.get_line_badges(this.get('msgObject'))) + '</span>';
 		},
 
@@ -962,7 +977,8 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 
 
 FFZ.prototype._modify_chat_subline = function(component) {
-	var f = this;
+	var f = this,
+		PinnedCheers = utils.ember_lookup('service:bits-pinned-cheers');
 
 	this._modify_chat_line(component);
 
@@ -971,17 +987,22 @@ FFZ.prototype._modify_chat_subline = function(component) {
 		attributeBindings: ["msgObject.tags.id:data-id", "msgObject.room:data-room", "msgObject.from:data-sender", "msgObject.deleted:data-deleted"],
 
 		didInsertElement: function() {
-			this.set('msgObject._line', this);
+			if ( this.get('msgObject') ) {
-			this.ffzRender();
+				this.set('msgObject._line', this);
+				this.ffzRender();
+			}
 		},
 
 		ffz_update: function() {
-			this.set('msgObject._line', this);
+			if ( this.get('msgObject') ) {
-			this.ffzRender();
+				this.set('msgObject._line', this);
+				this.ffzRender();
+			}
 		},
 
 		willClearRender: function() {
-			this.set('msgObject._line', null);
+			if ( this.get('msgObject') )
+				this.set('msgObject._line', null);
 		},
 
 		//didUpdate: function() { this.ffzRender(); },
@@ -1122,6 +1143,9 @@ FFZ.prototype._modify_chat_subline = function(component) {
 			var cl = e.target.classList,
 				from = this.get("msgObject.from");
 
+			if ( ! from )
+				return;
+
 			/*if ( cl.contains('ffz-old-messages') )
 				return f._show_deleted(this.get('msgObject.room'));*/
 
@@ -1136,7 +1160,13 @@ FFZ.prototype._modify_chat_subline = function(component) {
 				jQuery(e.target).trigger('mouseout');
 				e.preventDefault();
 
-				if ( cl.contains('tb-reject') )
+				if ( cl.contains('pc-dismiss-local') )
+					PinnedCheers.dismissLocalMessage();
+
+				else if ( cl.contains('pc-dismiss') )
+					PinnedCheers.dismissCurrentMessage(this.get('parentView.userData.id'));
+
+				else if ( cl.contains('tb-reject') )
 					this.actions.clickedTwitchBotResponse.call(this, this.get('msgObject.tags.id'), 'no');
 
 				else if ( cl.contains('tb-allow') )

src/ember/room.js

@@ -633,7 +633,9 @@ FFZ.HoverPause = {
 
 
 FFZ.prototype.modify_room_component = function(component) {
-	var f = this;
+	var f = this,
+		PinnedCheers = utils.ember_lookup('service:bits-pinned-cheers');
+
 	utils.ember_reopen_view(component, _.extend({
 		ffz_init: function() {
 			f._roomv = this;
@@ -697,7 +699,10 @@ FFZ.prototype.modify_room_component = function(component) {
 				channel = this.get('room.channel');
 			if ( ! channel )
 				return;
-			else if ( ! channel.get('isLoaded') )
+
+			PinnedCheers && PinnedCheers.dismissLocalMessage();
+
+			if ( ! channel.get('isLoaded') )
 				channel.load().then(function() { t._initializeBits(channel) })
 			else
 				this._initializeBits(channel);

src/main.js

@@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 363,
+	major: 3, minor: 5, revision: 367,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}

style.css

@@ -18,6 +18,8 @@ body > div.tipsy .tipsy-arrow { opacity: 0.8; }
 	cursor: pointer;
 }
 
+.pinned-cheers__dismiss,
+.ffz-hide-pinned-cheers .pinned-cheers,
 .cn-hosting--bottom .ffz-channel-options .balloon:after,
 .ffz-host-info .card__layout:not(.ffz),
 .ffz-following-row[data-loaded="false"] .button,
@@ -316,6 +318,7 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
 
 	z-index: 7;
 	padding: 10px !important;
+	flex-wrap: wrap;
 }
 
 .ffz-theater-stats .app-main.theatre .cn-hosting--bottom,
@@ -1521,6 +1524,9 @@ body:not(.ffz-hide-friends) .ffz-moderation-card .follow-button {
 .mod-icons .tb-allow { background-image: url("//cdn.frankerfacez.com/script/button_accept.svg") }
 .mod-icons .tb-reject { background-image: url("//cdn.frankerfacez.com/script/button_reject.svg") }
 
+.mod-icons .pc-dismiss { background-image: url("//cdn.frankerfacez.com/script/button_trash.svg") }
+.mod-icons .pc-dismiss-local { background-image: url("//cdn.frankerfacez.com/script/button_close.svg") }
+
 .mod-icons .custom {
 	text-indent: 0 !important;
 	text-align: center;
@@ -3441,7 +3447,7 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 }
 
 .sticky-message {
-	padding: 5px 10px;
+	padding: 5px 15px;
 }
 
 .chat-room .show-mod-icons .chat-lines .chat-line:not(.admin) .mod-icons {
@@ -3630,7 +3636,7 @@ body:not(.ffz-channel-bar-bottom).ffz-small-player.ffz-minimal-channel-bar .js-p
 
 .cn-hosting--bottom > *,
 .cn-metabar__more > * {
-	margin: 0 1rem 0 0 !important;
+	margin: .5rem 1rem .5rem 0 !important;
 	order: 49;
 }
 
@@ -3829,3 +3835,17 @@ body:not(.ffz-bttv) .modified-emoticon span,
 	margin-bottom: -3px;
 	vertical-align: bottom !important;
 }
+
+body:not(.ffz-sidebar-swap) .app-main.theatre #main_col:not(.expandRight) #player[data-isfullscreen=true] { right: 0 !important }
+body.ffz-sidebar-swap .app-main.theatre #main_col:not(.expandRight) #player[data-isfullscreen=true] { left: 0 !important }
+
+.pinned-cheer__hack-box,
+.pinned-cheers__message .chat-line:before,
+.pinned-cheers__message:before { display: none }
+
+.pinned-cheers__message .chat-line { padding: 5px }
+.pinned-cheers .mod-icons { display: inline !important }
+
+.ffz-pinned-cheer-expand .pinned-cheers__message .chat-line,
+.ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:hover { max-height: none }
+.ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:not(:hover) { max-height: 4rem }