3.5.420. The big meme commit. Now I can actually work on stuff again. This adds handling for Top Cheers. Also, finally commit the schedule code I keep forgetting.

changelog.html

@@ -1,3 +1,18 @@
+<div class="list-header">3.5.<span id="u420">420</span> <time datetime="2017-01-20">(2017-01-20)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Tab-completion for the <code>/reset</code> command which clears the current Top Cheer.</li>
+	<li>Fixed: Show "Dismiss for Everyone" button on Top Cheers when user is a moderator.</li>
+	<li>Fixed: Color and positioning of chat header.</li>
+	<li>&nbsp;</li>
+	<li>This is also the 420th commit to FrankerFaceZ's GitHub repository.</li>
+</ul>
+
+<div class="list-header">3.5.419 <time datetime="2017-01-20">(2017-01-20)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Dismiss button for Top Cheers.</li>
+	<li>Updated: The Display Pinned Cheers setting now also removes Top Cheers.</li>
+</ul>
+
 <div class="list-header">3.5.418 <time datetime="2017-01-18">(2017-01-18)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Setting to allow controlling player volume by scrolling the mouse wheel.</li>

src/ember/bits.js

@@ -60,8 +60,16 @@ FFZ.settings_info.bits_tags_container = {
 
 
 FFZ.settings_info.bits_pinned = {
-	type: "boolean",
+	type: "select",
-	value: true,
+	options: {
+		0: "Disabled",
+		1: "Show Recent",
+		2: "Show Top",
+		3: "Show All (Default)"
+	},
+
+	value: 3,
+	process_value: utils.process_int(3, 0, 3),
 
 	category: "Chat Appearance",
 
@@ -69,30 +77,15 @@ FFZ.settings_info.bits_pinned = {
 	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);
+		var PinnedCheers = utils.ember_lookup('service:bits-pinned-cheers');
-	}
+		if ( val === 3 || ! PinnedCheers )
-}
+			return;
 
+		if ( val !== 1 )
+			PinnedCheers.set('recentPinnedCheer', null);
 
-FFZ.settings_info.bits_pinned_expand = {
+		if ( val !== 2 )
-	type: "select",
+			PinnedCheers.set('topPinnedCheer', null);
-	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);
 	}
 }
 
@@ -114,12 +107,12 @@ FFZ.settings_info.bits_disable_charity = {
 
 FFZ.prototype.setup_bits = function() {
 	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);
+	this.update_views('component:bits/chat-token', this._modify_bits_token);
-	utils.toggle_cls('ffz-pinned-cheer-expand')(this.settings.bits_pinned_expand === 2);
 
 	var f = this,
 		Service = utils.ember_lookup('service:bits-emotes'),
+		PinnedCheers = utils.ember_lookup('service:bits-pinned-cheers'),
 
 		image_css = function(images) {
 			return 'background-image: url("' + images[1] + '");' +
@@ -144,6 +137,27 @@ FFZ.prototype.setup_bits = function() {
 			'}';
 		};
 
+	if ( PinnedCheers ) {
+		PinnedCheers.reopen({
+			_updatePinnedCheerData: function(data) {
+				var setting = f.settings.bits_pinned;
+				if ( setting < 2 )
+					data.top = null;
+				else if ( data.top )
+					data.top.is_pinned_cheer = 2;
+
+				if ( setting !== 3 && setting !== 1 )
+					data.recent = null;
+				else if ( data.recent )
+					data.recent.is_pinned_cheer = true;
+
+				return this._super(data);
+			}
+		});
+
+		FFZ.settings_info.bits_pinned.on_update.call(this, this.settings.bits_pinned);
+	}
+
 	if ( Service ) {
 		Service.reopen({
 			ffz_has_css: false,
@@ -275,3 +289,26 @@ FFZ.prototype.setup_bits = function() {
 	if ( Service.get('isLoaded') )
 		Service.loadRenderConfig();
 }
+
+
+FFZ.prototype._modify_bits_token = function(component) {
+	var f = this;
+	utils.ember_reopen_view(component, {
+		ffz_init: function() {
+			this.ffzRender();
+		},
+
+		ffzRender: function() {
+			var el = this.get('element'),
+				prefix = this.get('prefix'),
+				amount = this.get('amount');
+
+			el.innerHTML = f.render_token(false, false, true, {
+				type: 'bits',
+				amount: amount,
+				prefix: prefix
+			});
+
+		}.observes('prefix', 'amount')
+	})
+}

src/ember/channel.js

@@ -422,10 +422,6 @@ FFZ.prototype.modify_channel_redesign = function(view) {
 				f._credesign = null;
 		},
 
-		handleScroll: function(top) {
-			this._super();
-		},
-
 		ffzUpdateCoverHeight: function() {
 			var old_height = this.channelCoverHeight,
 				setting = f.settings.hide_channel_banner,

src/ember/chat-input.js

@@ -44,7 +44,8 @@ var FFZ = window.FrankerFaceZ,
 		emoteonly: {info: 'Enable Emote-Only Mode'},
 		emoteonlyoff: {info: 'Disable Emote-Only Mode'},
 
-		unpin: {info: 'Unpin the current Pinned Cheer'}
+		unpin: {info: 'Unpin the current Pinned Cheer'},
+		reset: {info: 'Clear the current Top Cheer'}
 	},
 
 	BROADCASTER_COMMANDS = {

src/ember/line.js

@@ -679,7 +679,8 @@ FFZ.prototype.setup_line = function() {
 	this.update_views('component:video/rechat/chat-message', this._modify_vod_line);
 	this.update_views('component:chat/message-line', this._modify_chat_subline);
 	this.update_views('component:chat/whisper-line', function(x) { return f._modify_chat_subline(x, true) });
-
+	this.update_views('component:bits/pinned-cheers/top-cheer-line', this._modify_top_cheer_line);
+	this.update_views('component:bits/pinned-cheers/top-cheer', this._modify_top_cheer);
 
 	// Store the capitalization of our own name.
 	var user = this.get_user();
@@ -694,6 +695,42 @@ FFZ.prototype.save_aliases = function() {
 }
 
 
+FFZ.prototype._modify_top_cheer = function(component) {
+	var f = this;
+	utils.ember_reopen_view(component, {
+		ffz_init: function() {
+			var PinnedCheers = utils.ember_lookup('service:bits-pinned-cheers'),
+				el = this.get('element'),
+				container = el && el.querySelector('.pinned-cheer__top-bar');
+
+			if ( ! PinnedCheers || ! container )
+				return;
+
+			var btn_dismiss = utils.createElement('a', 'mod-icon html-tooltip pc-dismiss-local', 'Dismiss'),
+				mod_icons = utils.createElement('div', 'mod-icons', btn_dismiss);
+
+			btn_dismiss.title = 'Dismiss';
+			container.insertBefore(mod_icons, container.firstElementChild);
+
+			btn_dismiss.addEventListener('click', function() {
+				PinnedCheers.dismissLocalMessage();
+			});
+		}
+	});
+}
+
+
+FFZ.prototype._modify_top_cheer_line = function(component) {
+	var f = this;
+	component.reopen({
+		ffzRender: function() {
+			var el = this.get('element');
+			el.innerHTML = this.buildFromHTML() + '<span class="colon">:</span> ';
+		}
+	})
+}
+
+
 FFZ.prototype._modify_chat_line = function(component, is_vod) {
 	var f = this,
 		Layout = utils.ember_lookup('service:layout'),
@@ -729,6 +766,11 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 			this.$(".badges").html(f.render_badges(f.get_line_badges(this.get('msgObject'))));
 		},
 
+		ffzPinnedParent: function() {
+			var is_pinned_cheer = this.get('msgObject.is_pinned_cheer');
+			return is_pinned_cheer === 2 ? this.get('parentView.parentView.parentView.parentView.parentView') : this.get('parentView');
+		}.property('msgObject.is_pinned_cheer'),
+
 		ffzUserLevel: function() {
 			if ( this.get('isStaff') )
 				return 5;
@@ -747,9 +789,9 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 			var user = this.get('msgObject.from'),
 
 				is_tb = this.get('msgObject.twitchBotRejected'),
-				is_pinned_cheer = this.get('msgObject.payday_timestamp'),
+				is_pinned_cheer = this.get('msgObject.is_pinned_cheer'),
 
-				room_id = is_pinned_cheer ? Chat.get('currentRoom.id') : this.get('msgObject.room'),
+				room_id = this.get('msgObject.room'),
 				room = f.rooms && f.rooms[room_id],
 
 				deleted = this.get('msgObject.deleted'),
@@ -774,8 +816,10 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 			}
 
 			if ( is_pinned_cheer ) {
-				if ( PinnedCheers && PinnedCheers.canDismissPinnedCheer(this.get('parentView.userData.id'), this.get('parentView.isViewerModeratorOrHigher')) )
+				var parent = this.get('ffzPinnedParent');
+				if ( parent && PinnedCheers && PinnedCheers.canDismissPinnedCheer(parent.get('userData.id'), parent.get('isViewerModeratorOrHigher')) )
 					output.push('<a class="mod-icon html-tooltip pc-dismiss" title="Dismiss for Everyone">Dismiss</a>');
+				if ( is_pinned_cheer !== 2 )
 					output.push('<a class="mod-icon html-tooltip pc-dismiss-local" title="Dismiss">Dismiss</a>');
 			}
 
@@ -1157,7 +1201,10 @@ FFZ.prototype._modify_chat_subline = function(component, is_whisper) {
 					PinnedCheers.dismissLocalMessage();
 
 				else if ( cl.contains('pc-dismiss') )
-					PinnedCheers.dismissCurrentMessage(this.get('parentView.userData.id'));
+					PinnedCheers.dismissMessage(
+						this.get('ffzPinnedParent.userData.id'),
+						this.get('msgObject.is_pinned_cheer') === '2' ? 'top' : 'recent'
+					);
 
 				else if ( cl.contains('tb-reject') )
 					this.actions.clickedTwitchBotResponse.call(this, this.get('msgObject.tags.id'), 'no');

src/ember/player.js

@@ -115,7 +115,6 @@ FFZ.prototype.modify_persistent_player = function(player) {
 		ffz_init: function() {
 			var t = this;
 			this.$().off('mousewheel').on('mousewheel', function(event) {
-				f.log("Player-Scroll", event);
 				if ( ! f.settings.player_volume_scroll )
 					return;
 

src/main.js

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

src/ui/schedule.js

@@ -0,0 +1,218 @@
+var FFZ = window.FrankerFaceZ,
+	constants = require('../constants'),
+	utils = require('../utils'),
+
+	TimeFormat = Intl.DateTimeFormat(undefined, {hour: 'numeric', minute: 'numeric'}),
+
+	parse_schedule_dates = function(data) {
+		for(var event_id in data) {
+			var event = data[event_id];
+			if ( ! event || ! data.hasOwnProperty(event_id) )
+				continue;
+
+			event.starttime = utils.parse_date(event.starttime);
+			event.endtime = utils.parse_date(event.endtime);
+		}
+
+		return data
+	};
+
+
+// ---------------
+// Settings
+// ---------------
+
+FFZ.settings_info.metadata_schedule = {
+	type: "boolean",
+	value: true,
+	no_mobile: true,
+
+	category: "Channel Metadata",
+	name: "Event Schedule <small>(Beta)</small>",
+	help: 'Display schedule information under the stream for channels that support it.',
+	on_update: function(val) {
+		if ( this._cindex )
+			this._cindex.ffzUpdateMetadata('schedule');
+	}
+};
+
+
+// ----------------
+// Data Handler
+// ----------------
+
+FFZ.ws_on_close.push(function() {
+	this._schedule_data = {};
+	if ( this._cindex )
+		this._cindex.ffzUpdateMetadata('schedule');
+});
+
+
+FFZ.ws_commands.event_schedule = function(data) {
+	var schedules = this._schedule_data = this._schedule_data || {},
+		has_schedule = data[1],
+		important_events = data[2];
+
+	if ( important_events )
+		parse_schedule_dates(important_events);
+
+	for(var i=0; i < data[0].length; i++)
+		schedules[data[0][i]] = [has_schedule, important_events];
+
+	if ( this._cindex )
+		this._cindex.ffzUpdateMetadata('schedule');
+}
+
+
+// ----------------
+// Event Schedules
+// ----------------
+
+FFZ.channel_metadata.schedule = {
+	refresh: false,
+
+	setup: function(view, channel) {
+		var data = this._schedule_data,
+			channel_id = channel.get('id'),
+			cdata = data && data[channel_id] || [false, [null, null]];
+
+		return [channel_id, cdata[0], cdata[1]];
+	},
+
+	order: 96,
+	host_order: 5,
+
+	button: true,
+
+	static_label: constants.CLOCK,
+	label: function(channel_id, has_schedule, important_events) {
+		if ( ! this.settings.metadata_schedule || ! has_schedule )
+			return null;
+
+		return 'Schedule';
+	},
+
+	tooltip: function(channel_id, has_schedule, important_events) {
+		var current = important_events[0],
+			next = important_events[1],
+			out = [],
+
+			format = function(run) {
+				return utils.sanitize(
+					run.name + ' (' + run.category + ') by ' +
+					utils.human_join(_.map(run.runners, function(x) {
+						if ( typeof x === 'string' )
+							return x;
+						return x[1];
+					}))
+				);
+			};
+
+		if ( current )
+			out.push('Now: ' + format(current));
+
+		if ( next )
+			out.push(
+				utils.full_human_time((Date.now() - next.starttime) / 1000).capitalize() + ': ' +
+				format(next));
+
+		return out.join('<hr>');
+	},
+
+	popup: function(container, channel_id, has_schedule, important_events) {
+		container.classList.add('balloon--xl');
+		container.innerHTML = '<div class="ffz-loading-spinner"></div>';
+		var t = this,
+			loaded = false,
+			fail = function() {
+				if ( loaded || ! document.body.contains(container) || container.dataset.key !== 'schedule' )
+					return;
+				container.innerHTML = '<p>There was an error fetching schedule data from the server.</p>';
+			};
+
+		this.ws_send("get_schedule", channel_id, function(success, data) {
+			if ( ! success )
+				return fail();
+			else if ( ! document.body.contains(container) || container.dataset.key !== 'schedule' )
+				return;
+
+			loaded = true;
+			parse_schedule_dates(data);
+
+			var scroller = utils.createElement('ol', 'scroller');
+			container.innerHTML = '';
+			container.appendChild(scroller);
+
+			var runs = [];
+			for(var run_id in data)
+				runs.push([run_id, data[run_id]]);
+
+			runs.sort(function(a,b) {
+				var ao = a[1].order,
+					bo = b[1].order;
+
+				if ( ao < bo ) return -1;
+				if ( ao > bo ) return 1;
+				return 0;
+			});
+
+			var last_date;
+			for(var i=0; i < runs.length; i++)
+				last_date = FFZ.channel_metadata.schedule.draw_row.call(t, scroller, runs[i][0], runs[i][1], last_date);
+
+			setTimeout(function() {
+				var current = scroller.querySelector('.ffz-current-item');
+				current && current.scrollIntoViewIfNeeded();
+			});
+		});
+
+		setTimeout(fail, 5000);
+	},
+
+	draw_row: function(container, run_id, run, last_date) {
+		var el = utils.createElement('li', 'ffz-schedule-row'),
+			now = Date.now(),
+			is_current = run.starttime <= now && run.endtime >= now,
+			is_old = run.starttime < now,
+			current_date = run.starttime.toLocaleDateString();
+
+		if ( current_date !== last_date )
+			container.appendChild(utils.createElement('div', 'ffz-schedule-row ffz-schedule-date', current_date));
+
+		el.classList.toggle('ffz-current-item', is_current);
+		el.classList.toggle('ffz-old-item', ! is_current && is_old);
+		el.dataset.id = run_id;
+
+		var meta = [
+			'Length: ' + utils.sanitize(run.run_time)
+		];
+
+		if ( run.setup_time )
+			meta.push('Setup: ' + utils.sanitize(run.setup_time));
+
+		if ( run.coop )
+			meta.push('Co-Op');
+
+		if ( run.console )
+			meta.push('Console: ' + utils.sanitize(run.console));
+
+		el.innerHTML = '<div class="heading">' +
+			'<h2>' + utils.sanitize(run.name) + ' <span>(' + utils.sanitize(run.category).replace(/ +/g, '&nbsp;') + ')</span></h2>' +
+			'</div>' +
+			'<time class="time-start html-tooltip" title="Start' + (is_old ? 'ed ' : 's ') + utils.quote_san(utils.full_human_time((now - run.starttime) / 1000)) + '." datetime="' + utils.quote_san(run.starttime) + '">' + utils.sanitize(TimeFormat.format(run.starttime)) + '</time>' +
+			'<div class="meta">' + meta.join(' &mdash; ') + '</div>' +
+			'<div class="runners">Runner' + utils.pluralize(run.runners) + ': ' +
+				utils.human_join(_.map(run.runners, function(x) {
+					if ( typeof x === 'string' )
+						x = [x,x];
+
+					if ( x[0] )
+						return '<span><a target="_blank" href="https://twitch.tv/' + utils.quote_san(x[0]) + '">' + utils.sanitize(x[1]) + '</a></span>';
+					return '<span>' + utils.sanitize(x[1]) + '</span>';
+				})) +
+			'</div>';
+
+		container.appendChild(el);
+		return current_date;
+	}
+}

style.css

@@ -66,6 +66,8 @@ body:not(.ffz-show-bits-tags) .bits-tag--container,
 	display: none !important;
 }
 
+.ffz-hide-pinned-cheers .chat-messages { top: 0 !important }
+
 .ffz-channel-bar-bottom #channel {
 	margin-bottom: 60px;
 }
@@ -1784,6 +1786,7 @@ th.ffz-row-switch {
 
 /* Chat Tabs */
 
+.ember-chat .chat-header,
 .ember-chat .chat-room { z-index: 5; }
 
 #ffz-group-tabs {
@@ -2367,6 +2370,10 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
 .ffz-no-blue .app-main.theatre .bits-card--standard,
 .ffz-no-blue .dark .bits-card--standard,
 
+.ffz-no-blue .chat-container.dark .chat-header,
+.ffz-no-blue .ember-chat-container.dark .chat-header,
+.ffz-no-blue .theatre .chat-header,
+
 .ffz-no-blue .warp,
 .ffz-no-blue #large_nav .content,
 .ffz-no-blue #small_nav .content,
@@ -3627,7 +3634,9 @@ body:not(.ffz-minimal-channel-bar):not(.ffz-channel-bar-bottom) #channel {
 
 .ban-tip { border-bottom: 1px dotted rgba(102,102,102,0.5); }
 
+.ffz-clickable-mentions .pinned-cheers .chat-line .user-token,
 .ffz-clickable-mentions .chat-display .chat-line .user-token { font-weight: bold }
+.ffz-clickable-mentions .pinned-cheers .chat-line .user-token:hover,
 .ffz-clickable-mentions .chat-display .chat-line .user-token:hover {
 	text-decoration: underline;
 	cursor: pointer;
@@ -3838,26 +3847,17 @@ body:not(.ffz-bttv) .modified-emoticon span,
 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-wrapper .chat-line:before,
-.pinned-cheers__message .chat-line:before,
+.pinned-cheers__message-wrapper:before { display: none }
-.ffz-pinned-cheer-expand .pinned-cheer__expando-arrow,
-.pinned-cheers__message:before { display: none }
 
-.pinned-cheers__message .chat-line { background-color: transparent !important }
+.pinned-cheers .chat-line { background-color: transparent !important }
 
-.pinned-cheers__message .chat-line { padding: 5px }
+.pinned-cheers__message-wrapper .chat-line { margin: 10px 0; padding: 0 }
 .pinned-cheers .mod-icons { display: inline !important }
 
-.ffz-pinned-cheer-expand .pinned-cheers__message .chat-line,
+.pinned-cheer__top-bar,
-.ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:hover { max-height: none !important }
-.ffz-pinned-cheer-expand-hover .pinned-cheers__message .chat-line:not(:hover) { max-height: 4rem !important }
 .pinned-cheers--padding { padding: 0 !important }
 
-.ffz-pinned-cheer-expand-hover .pinned-cheers__message:hover .pinned-cheer__expando-arrow { transform: none }
-.ffz-pinned-cheer-expand-hover .pinned-cheers__message .pinned-cheer__expando-arrow {
-	transform: rotateX(180deg);
-}
-
 /* Player Mini Positioning Stuff */
 
 .ffz-sidebar-swap .expandRight .player-mini {