Deck 2.7.0

* Added: Support for the new FFZ settings to block content based on content flags and titles.
* Added: Support for the new FFZ settings to hide thumbnails based on content flags, tags, and titles.
* Added: Support for the new FFZ setting to display content flags.

src/deck/column-base.jsx

@@ -471,10 +471,22 @@ export class LiveColumnBase extends ColumnBase {
 		const hide_reruns = this.global_settings.hide_reruns,
 			blocked_games = this.global_settings.blocked_games;
 
-		return items.filter(item => LiveColumnBase.filterStream(item, hide_reruns, blocked_games, this.required_tags, this.blocked_tags, this.filter_games, this.filter_blocked_games, this.languages, this.allowHideUnlisted() ? this.settings.hide_unlisted : false));
-	}
-
-	static filterStream(item, hide_reruns, blocked_games, required_tags, blocked_tags, filter_games, filter_blocked_games, languages, hide_unlisted) {
+		return items.filter(item => LiveColumnBase.filterStream(
+			item,
+			hide_reruns,
+			blocked_games,
+			this.required_tags,
+			this.blocked_tags,
+			this.filter_games,
+			this.filter_blocked_games,
+			this.languages,
+			this.allowHideUnlisted() ? this.settings.hide_unlisted : false,
+			this.global_settings.blocked_titles,
+			this.global_settings.blocked_flags
+		));
+	}
+
+	static filterStream(item, hide_reruns, blocked_games, required_tags, blocked_tags, filter_games, filter_blocked_games, languages, hide_unlisted, blocked_titles, blocked_flags) {
 		if ( ! item.stream )
 			return false;
 
@@ -515,6 +527,20 @@ export class LiveColumnBase extends ColumnBase {
 						return false;
 		}
 
+		if ( item.broadcastSettings?.title && blocked_titles &&
+			(( blocked_titles[0] && blocked_titles[0].test(item.broadcastSettings.title) ) ||
+			( blocked_titles[1] && blocked_titles[1].test(item.broadcastSettings.title) ))
+		)
+			return false;
+
+		if ( blocked_flags ) {
+			const flags = get('stream.contentClassificationLabels.@each.id', item) ?? [];
+			for(const flag of flags) {
+				if ( blocked_flags.has(flag) )
+					return false;
+			}
+		}
+
 		return true;
 	}
 }
@@ -612,10 +638,17 @@ export class ClipColumnBase extends ColumnBase {
 
 		const blocked_games = this.global_settings.blocked_games;
 
-		return items.filter(item => ClipColumnBase.filterClip(item, blocked_games, this.filter_games, this.filter_blocked_games));
+		return items.filter(item => ClipColumnBase.filterClip(
+			item,
+			blocked_games,
+			this.filter_games,
+			this.filter_blocked_games,
+			this.global_settings.blocked_titles,
+			this.global_settings.blocked_flags
+		));
 	}
 
-	static filterClip(item, blocked_games, filter_games, filter_blocked_games) {
+	static filterClip(item, blocked_games, filter_games, filter_blocked_games, blocked_titles, blocked_flags) {
 		if ( blocked_games && item.game && blocked_games.includes(item.game.name) )
 			return false;
 
@@ -625,6 +658,20 @@ export class ClipColumnBase extends ColumnBase {
 		if ( filter_blocked_games && item.game && filter_blocked_games.includes(item.game.id) )
 			return false;
 
+		if ( item.title && blocked_titles &&
+			(( blocked_titles[0] && blocked_titles[0].test(item.title) ) ||
+			( blocked_titles[1] && blocked_titles[1].test(item.title) ))
+		)
+			return false;
+
+		if ( blocked_flags ) {
+			const flags = get('contentClassificationLabels.@each.id', item) ?? [];
+			for(const flag of flags) {
+				if ( blocked_flags.has(flag) )
+					return false;
+			}
+		}
+
 		return true;
 	}
 }
@@ -736,10 +783,21 @@ export class VideoColumnBase extends ColumnBase {
 			types = this.types,
 			blocked_games = this.global_settings.blocked_games;
 
-		return items.filter(item => VideoColumnBase.filterVideo(item, no_recordings, types, blocked_games, this.required_tags, this.blocked_tags, this.filter_games, this.filter_blocked_games));
-	}
-
-	static filterVideo(item, no_recordings, types, blocked_games, required_tags, blocked_tags, filter_games, filter_blocked_games) {
+		return items.filter(item => VideoColumnBase.filterVideo(
+			item,
+			no_recordings,
+			types,
+			blocked_games,
+			this.required_tags,
+			this.blocked_tags,
+			this.filter_games,
+			this.filter_blocked_games,
+			this.global_settings.blocked_titles,
+			this.global_settings.blocked_flags
+		));
+	}
+
+	static filterVideo(item, no_recordings, types, blocked_games, required_tags, blocked_tags, filter_games, filter_blocked_games, blocked_titles, blocked_flags) {
 		if ( no_recordings && item.status === 'RECORDING' )
 			return false;
 
@@ -769,6 +827,20 @@ export class VideoColumnBase extends ColumnBase {
 						return false;
 		}
 
+		if ( item.title && blocked_titles &&
+			(( blocked_titles[0] && blocked_titles[0].test(item.title) ) ||
+			( blocked_titles[1] && blocked_titles[1].test(item.title) ))
+		)
+			return false;
+
+		if ( blocked_flags ) {
+			const flags = get('contentClassificationLabels.@each.id', item) ?? [];
+			for(const flag of flags) {
+				if ( blocked_flags.has(flag) )
+					return false;
+			}
+		}
+
 		return true;
 	}
 }

src/deck/columns/clip/channel.js

@@ -69,13 +69,32 @@ export default class Channel extends ClipColumnBase {
 			let is_stream;
 
 			if ( item.stream ) {
-				if ( no_live || ! LiveColumnBase.filterStream(item, hide_reruns, blocked_games, this.required_tags) )
+				if ( no_live || ! LiveColumnBase.filterStream(
+						item,
+						hide_reruns,
+						blocked_games,
+						this.required_tags,
+						this.blocked_tags,
+						this.filter_games,
+						this.filter_blocked_games,
+						this.languages,
+						this.allowHideUnlisted() ? this.settings.hide_unlisted : false,
+						this.global_settings.blocked_titles,
+						this.global_settings.blocked_flags
+					) )
 					continue;
 
 				is_stream = true;
 
 			} else {
-				if ( ! ClipColumnBase.filterClip(item, blocked_games) )
+				if ( ! ClipColumnBase.filterClip(
+					item,
+					blocked_games,
+					this.filter_games,
+					this.filter_blocked_games,
+					this.global_settings.blocked_titles,
+					this.global_settings.blocked_flags
+				) )
 					continue;
 
 				is_stream = false;

src/deck/columns/fragments/clip-info.gql

@@ -9,6 +9,10 @@ fragment ClipInfo on Clip {
 	thumbnailURL
 	slug
 	viewCount
+	contentClassificationLabels {
+		id
+		localizedName
+	}
 	curator {
 		...UserInfo
 	}

src/deck/columns/fragments/stream-info.gql

@@ -4,6 +4,10 @@ fragment StreamInfo on Stream {
 	viewersCount
 	createdAt
 	previewImageURL(width: $previewWidth, height: $previewHeight)
+	contentClassificationLabels {
+		id
+		localizedName
+	}
 	freeformTags {
 		id
 		name

src/deck/columns/fragments/video-info.gql

@@ -9,6 +9,10 @@ fragment VideoInfo on Video {
 	animatedPreviewURL
 	previewThumbnailURL(width: $previewWidth, height: $previewHeight)
 	status
+	contentClassificationLabels {
+		id
+		localizedName
+	}
 	contentTags {
 		id
 		isAutomated

src/deck/columns/video/channel.js

@@ -79,13 +79,36 @@ export default class Channel extends VideoColumnBase {
 			let is_stream;
 
 			if ( item.stream ) {
-				if ( no_live || ! LiveColumnBase.filterStream(item, hide_reruns, blocked_games, this.required_tags) )
+				if ( no_live || ! LiveColumnBase.filterStream(
+					item,
+					hide_reruns,
+					blocked_games,
+					this.required_tags,
+					this.blocked_tags,
+					this.filter_games,
+					this.filter_blocked_games,
+					this.languages,
+					this.allowHideUnlisted() ? this.settings.hide_unlisted : false,
+					this.global_settings.blocked_titles,
+					this.global_settings.blocked_flags
+				) )
 					continue;
 
 				is_stream = true;
 
 			} else {
-				if ( ! VideoColumnBase.filterVideo(item, no_recordings, this.types, blocked_games, this.required_tags) )
+				if ( ! VideoColumnBase.filterVideo(
+					item,
+					no_recordings,
+					this.types,
+					blocked_games,
+					this.required_tags,
+					this.blocked_tags,
+					this.filter_games,
+					this.filter_blocked_games,
+					this.global_settings.blocked_titles,
+					this.global_settings.blocked_flags
+				) )
 					continue;
 
 				is_stream = false;

src/deck/components/bd-card.vue

@@ -37,7 +37,7 @@
 							<p>{{ props.topLeft }}</p>
 						</div>
 					</div>
-					<div data-test-selector="top-right-selector" class="tw-absolute tw-mg-1 tw-right-0 tw-top-0">
+					<div data-test-selector="top-right-selector" class="tw-absolute tw-mg-1 tw-right-0 tw-top-0 tw-flex tw-flex-column tw-align-items-end">
 						<slot name="top-right" />
 						<div v-if="props.topRight" class="preview-card-stat tw-align-items-center tw-border-radius-small tw-c-background-overlay tw-c-text-overlay tw-flex tw-font-size-6 tw-justify-content-center tw-pd-x-05">
 							<figure v-if="props.topRightIcon" :class="props.topRightIcon" />

src/deck/components/bd-clip-card.vue

@@ -54,6 +54,7 @@
 
 import ColumnBase from '../column-base';
 
+const {get} = FrankerFaceZ.utilities.object;
 const {duration_to_string} = FrankerFaceZ.utilities.time;
 
 export default {
@@ -112,7 +113,26 @@ export default {
 		},
 
 		hideThumbnails() {
-			return this.game && this.settings.hidden_thumbnails.includes(this.game.name)
+			if ( this.game && this.settings.hidden_thumbnails.includes(this.game.name) )
+				return true;
+
+			const regexes = this.inst.global_settings?.blur_titles;
+			if ( regexes &&
+				(( regexes[0] && regexes[0].test(this.title) ) ||
+				( regexes[1] && regexes[1].test(this.title) ))
+			)
+				return true;
+
+			const flags = this.inst.global_settings?.blur_flags;
+			if ( flags ) {
+				const item_flags = get('contentClassificationLabels.@each.id', this.item) ?? [];
+				for(const flag of item_flags) {
+					if ( flags.has(flag) )
+						return true;
+				}
+			}
+
+			return false;
 		},
 
 		image() {

src/deck/components/bd-live-card.vue

@@ -64,6 +64,21 @@
 					</div>
 				</div>
 			</div>
+
+			<div
+				v-if="contentFlags"
+				class="ffz-il-tooltip__container tw-mg-t-05"
+			>
+				<div class="preview-card-stat tw-align-items-center tw-border-radius-small tw-c-background-overlay tw-c-text-overlay tw-flex tw-font-size-6 tw-justify-content-center tw-pd-x-05">
+					<figure class="ffz-i-flag" />
+				</div>
+				<div class="ffz-il-tooltip ffz-il-tooltip--20 ffz-il-tooltip--prewrap ffz-il-tooltip--down ffz-il-tooltip--align-right">{{
+					t(
+						'addon.deck.content-flags',
+						'Intended for certain audiences. May contain:'
+					) + '\n\n' + contentFlags.join('\n')
+				}}</div>
+			</div>
 		</template>
 
 		<template #subtitles>
@@ -128,12 +143,45 @@ export default {
 		},
 
 		klass() {
-			if ( this.game && this.settings.hidden_thumbnails.includes(this.game.name) )
+			if ( this.shouldHideThumbnail )
 				return 'ffz-hide-thumbnail';
 
 			return '';
 		},
 
+		contentFlags() {
+			if ( ! this.inst.global_settings?.show_flags )
+				return null;
+
+			const flags = get('stream.contentClassificationLabels.@each.localizedName', this.item);
+			if ( flags?.length > 0 )
+				return flags;
+			return null;
+		},
+
+		shouldHideThumbnail() {
+			if ( this.game && this.settings.hidden_thumbnails.includes(this.game.name) )
+				return true;
+
+			const regexes = this.inst.global_settings?.blur_titles;
+			if ( regexes &&
+				(( regexes[0] && regexes[0].test(this.title) ) ||
+				( regexes[1] && regexes[1].test(this.title) ))
+			)
+				return true;
+
+			const flags = this.inst.global_settings?.blur_flags;
+			if ( flags ) {
+				const item_flags = get('stream.contentClassificationLabels.@each.id', this.item) ?? [];
+				for(const flag of item_flags) {
+					if ( flags.has(flag) )
+						return true;
+				}
+			}
+
+			return false;
+		},
+
 		embed() {
 			if ( this.hover && this.settings.video_preview )
 				return getVideoPreviewURL(this.item.login);

src/deck/components/bd-video-card.vue

@@ -54,6 +54,7 @@
 import ColumnBase from '../column-base';
 import { reduceTags } from '../data';
 
+const {get} = FrankerFaceZ.utilities.object;
 const {duration_to_string} = FrankerFaceZ.utilities.time;
 
 export default {
@@ -113,7 +114,26 @@ export default {
 		},
 
 		hideThumbnails() {
-			return this.game && this.settings.hidden_thumbnails.includes(this.game.name);
+			if ( this.game && this.settings.hidden_thumbnails.includes(this.game.name) )
+				return true;
+
+			const regexes = this.inst.global_settings?.blur_titles;
+			if ( regexes &&
+				(( regexes[0] && regexes[0].test(this.title) ) ||
+				( regexes[1] && regexes[1].test(this.title) ))
+			)
+				return true;
+
+			const flags = this.inst.global_settings?.blur_flags;
+			if ( flags ) {
+				const item_flags = get('contentClassificationLabels.@each.id', this.item) ?? [];
+				for(const flag of item_flags) {
+					if ( flags.has(flag) )
+						return true;
+				}
+			}
+
+			return false;
 		},
 
 		hasAnimation() {