4.20.78

* Changed: Allow sorting by add-on created date in the [Add-Ons](~add_ons) list.
* Changed: Allow filtering by only enabled add-ons in the [Add-Ons](~add_ons) list.
* Changed: Display created dates in the [Add-Ons](~add_ons) list.
* Fixed: Properly parse dates from the add-ons manifest file.

package.json

@@ -1,8 +1,9 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.20.77",
+  "version": "4.20.78",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
+  "private": true,
   "license": "Apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --config webpack.web.dev.js",

src/addons.js

@@ -173,6 +173,12 @@ export default class AddonManager extends Module {
 		addon.requires = addon.requires || [];
 		addon.required_by = Array.isArray(old) ? old : old && old.required_by || [];
 
+		if ( addon.updated )
+			addon.updated = new Date(addon.updated);
+
+		if ( addon.created )
+			addon.created = new Date(addon.created);
+
 		addon._search = addon.search_terms;
 
 		for(const id of addon.requires) {

src/modules/main_menu/components/addon-list.vue

@@ -18,8 +18,20 @@
 			</button>
 		</div>
 
-		<div class="tw-mg-b-1 tw-flex tw-align-items-center">
+		<div v-if="ready" class="tw-mg-b-1 tw-flex tw-align-items-center">
-			<div class="tw-flex-grow-1" />
+			<div class="ffz-checkbox tw-relative tw-flex-grow-1">
+				<input
+					id="filter_enabled"
+					v-model="filter_enabled"
+					type="checkbox"
+					class="ffz-checkbox__input"
+				>
+				<label for="filter_enabled" class="ffz-checkbox__label">
+					<span class="tw-mg-l-1">
+						{{ t('addon.filter-enabled', 'Only display enabled add-ons.') }}
+					</span>
+				</label>
+			</div>
 			<select
 				v-model="sort_by"
 				class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
@@ -30,6 +42,9 @@
 				<option :value="1">
 					{{ t('addon.sort-update', 'Sort By: Updated') }}
 				</option>
+				<option :value="2">
+					{{ t('addon.sort-create', 'Sort By: Created') }}
+				</option>
 			</select>
 		</div>
 
@@ -106,6 +121,7 @@ export default {
 			ready: this.item.isReady(),
 			reload: this.item.isReloadRequired(),
 			unlisted: [],
+			filter_enabled: false,
 			sort_by: 0,
 			unlisted_open: false
 		}
@@ -123,6 +139,10 @@ export default {
 				if ( this.sort_by === 1 ) {
 					if ( a.updated > b.updated ) return -1;
 					if ( b.updated > a.updated ) return 1;
+
+				} else if ( this.sort_by === 2 ) {
+					if ( a.created > b.created ) return -1;
+					if ( b.created > a.created ) return 1;
 				}
 
 				if ( a.sort < b.sort ) return -1;
@@ -179,7 +199,11 @@ export default {
 
 		shouldShow(addon) {
 			// If an add-on is unlisted, don't list it.
-			if ( addon.unlisted && ! this.item.isAddonEnabled(addon.id) && ! this.unlisted.includes(addon.id) )
+			const enabled = this.item.isAddonEnabled(addon.id);
+			if ( addon.unlisted && ! enabled && ! this.unlisted.includes(addon.id) )
+				return false;
+
+			if ( this.filter_enabled && ! enabled )
 				return false;
 
 			if ( ! this.filter || ! this.filter.length )

src/modules/main_menu/components/addon.vue

@@ -42,12 +42,19 @@
 					{{ t('addon.version', 'Version {version}', {version}) }}
 				</span>
 				<span
-					v-if="addon.updated"
+					v-if="addon.updated && addon.updated != addon.created"
 					:data-title="tDateTime(addon.updated)"
 					class="tw-c-text-alt ffz-tooltip tw-mg-r-1"
 				>
 					{{ t('addon.updated', 'Updated: {when,humantime}', {when: addon.updated}) }}
 				</span>
+				<span
+					v-if="addon.created"
+					:data-title="tDateTime(addon.created)"
+					class="tw-c-text-alt ffz-tooltip tw-mg-r-1"
+				>
+					{{ t('addon.created', 'Created: {when,date}', {when: addon.created}) }}
+				</span>
 			</div>
 			<markdown :source="show_description" />
 			<a

src/sites/twitch-twilight/index.js

@@ -62,7 +62,6 @@ export default class Twilight extends BaseSite {
 		this.router.route(Twilight.DASH_ROUTES, 'dashboard.twitch.tv');
 		this.router.route(Twilight.PLAYER_ROUTES, 'player.twitch.tv');
 		this.router.route(Twilight.CLIP_ROUTES, 'clips.twitch.tv');
-
 	}
 
 	onEnable() {