Hide author via thumbnail action

materialious/src/lib/components/Share.svelte

@@ -19,7 +19,7 @@
 		includePromptText = undefined,
 		iconOnly = true,
 		classes = 'surface-container-highest',
-		menuClasses = 'mobile',
+		menuClasses = 'mobile no-wrap',
 		onShare = undefined
 	}: {
 		shares: ShareLink[];
@@ -62,7 +62,7 @@
 	<div class="tooltip">
 		{$_('player.share.title')}
 	</div>
-	<menu class={menuClasses + ' no-wrap'} data-ui="#share-menu" id="share-menu">
+	<menu class={menuClasses} data-ui="#share-menu" id="share-menu">
 		{#if includePromptText}
 			<li class="row">
 				<label class="switch">

materialious/src/lib/components/layout/ItemsList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { feedLastItemId, isAndroidTvStore } from '$lib/store';
+	import { feedLastItemId, filterContentListStore, isAndroidTvStore } from '$lib/store';
 	import ContentColumn from '$lib/components/layout/ContentColumn.svelte';
 	import { onMount } from 'svelte';
 	import Thumbnail from '$lib/components/thumbnail/VideoThumbnail.svelte';
@@ -68,41 +68,43 @@
 		<NoResults />
 	{/if}
 	<div class="grid" {...spatialMenu.root}>
-		{#each items as item, index (index)}
-			{#if !isItemFiltered(item)}
-				{@const uniqueItemId = extractUniqueId(item)}
-				{@const spatialItem = spatialMenu.getItem(item, {
-					onSelect: () => {
-						if ($isAndroidTvStore) goToItem(uniqueItemId);
-					}
-				})}
-				<ContentColumn>
-					<article
-						{...mergeAttrs(spatialItem.attrs, {
-							onclick: () => {
-								if ($isAndroidTvStore) goToItem(uniqueItemId);
-							},
-							id: uniqueItemId
-						})}
-						class="no-padding item-select border"
-						class:item-select-focused={!isMobile() && spatialItem.highlighted}
-						style="height: 100%;"
-					>
-						{#if item.type === 'video' || item.type === 'shortVideo' || item.type === 'stream' || item.type === 'historyVideo'}
-							{#key item.videoId}
-								<Thumbnail video={item} {playlistId} />
-							{/key}
-						{:else if item.type === 'channel'}
-							<ChannelThumbnail channel={item} />
-						{:else if item.type === 'playlist'}
-							<PlaylistThumbnail playlist={item} />
-						{:else if item.type === 'hashtag'}
-							<HashtagThumbnail hashtag={item} />
-						{/if}
-					</article>
-				</ContentColumn>
-			{/if}
-		{/each}
+		{#key $filterContentListStore?.length}
+			{#each items as item, index (index)}
+				{#if !isItemFiltered(item)}
+					{@const uniqueItemId = extractUniqueId(item)}
+					{@const spatialItem = spatialMenu.getItem(item, {
+						onSelect: () => {
+							if ($isAndroidTvStore) goToItem(uniqueItemId);
+						}
+					})}
+					<ContentColumn>
+						<article
+							{...mergeAttrs(spatialItem.attrs, {
+								onclick: () => {
+									if ($isAndroidTvStore) goToItem(uniqueItemId);
+								},
+								id: uniqueItemId
+							})}
+							class="no-padding item-select border"
+							class:item-select-focused={!isMobile() && spatialItem.highlighted}
+							style="height: 100%;"
+						>
+							{#if item.type === 'video' || item.type === 'shortVideo' || item.type === 'stream' || item.type === 'historyVideo'}
+								{#key item.videoId}
+									<Thumbnail video={item} {playlistId} />
+								{/key}
+							{:else if item.type === 'channel'}
+								<ChannelThumbnail channel={item} />
+							{:else if item.type === 'playlist'}
+								<PlaylistThumbnail playlist={item} />
+							{:else if item.type === 'hashtag'}
+								<HashtagThumbnail hashtag={item} />
+							{/if}
+						</article>
+					</ContentColumn>
+				{/if}
+			{/each}
+		{/key}
 	</div>
 </div>
 

materialious/src/lib/components/thumbnail/VideoThumbnail.svelte

@@ -8,13 +8,18 @@
 	import { get } from 'svelte/store';
 	import { Avatar } from 'melt/builders';
 
-	import { deArrowEnabledStore, isAndroidTvStore, playerState } from '$lib/store';
+	import {
+		deArrowEnabledStore,
+		filterContentListStore,
+		filterContentUrlAutoUpdateStore,
+		isAndroidTvStore,
+		playerState
+	} from '$lib/store';
 	import { relativeTimestamp } from '$lib/time';
 	import { queueGetWatchHistory } from '$lib/api/historyPool';
 	import { getDeArrow, getThumbnailDeArrow } from '$lib/api/dearrow';
 	import AuthorAvatar from '../AuthorAvatar.svelte';
 	import Share from '../Share.svelte';
-	import { fade } from 'svelte/transition';
 	import { deleteWatchHistoryItem, saveWatchHistory } from '$lib/api';
 	import type { ThumbnailVideo } from '$lib/thumbnail';
 
@@ -240,7 +245,7 @@
 								<i>more_vert</i>
 							</button>
 							{#if thumbnailActionsVisible}
-								<menu class="max active" transition:fade>
+								<menu class="max active root-menu">
 									<li>
 										<Share
 											shares={[
@@ -291,6 +296,58 @@
 											{/if}
 										</button>
 									</li>
+									<li>
+										<button class="transparent max">
+											<i>disabled_visible</i>
+											<span>
+												{$_('layout.filter.addFilter')}
+											</span>
+											<menu data-ui="#hide-menu" id="hide-menu">
+												{#if 'authorId' in video}
+													<li
+														onclick={() => {
+															$filterContentListStore?.push({
+																type: 'video',
+																conditions: [
+																	{
+																		field: 'authorId',
+																		operator: 'equals',
+																		values: [video.authorId]
+																	}
+																]
+															});
+															filterContentListStore.set($filterContentListStore);
+															filterContentUrlAutoUpdateStore.set(false);
+															thumbnailActionsVisible = false;
+														}}
+														role="presentation"
+														data-ui="#hide-menu"
+														class="row"
+													>
+														{$_('hideAuthor')}
+													</li>
+												{/if}
+												<li
+													onclick={() => {
+														$filterContentListStore?.push({
+															type: 'video',
+															conditions: [
+																{ field: 'videoId', operator: 'equals', values: [video.videoId] }
+															]
+														});
+														filterContentListStore.set($filterContentListStore);
+														filterContentUrlAutoUpdateStore.set(false);
+														thumbnailActionsVisible = false;
+													}}
+													role="presentation"
+													data-ui="#hide-menu"
+													class="row"
+												>
+													{$_('hideVideo')}
+												</li>
+											</menu>
+										</button>
+									</li>
 								</menu>
 							{/if}
 						{/if}
@@ -397,7 +454,7 @@
 		align-items: end;
 	}
 
-	menu li:hover {
+	.root-menu > li:hover {
 		background-color: transparent;
 	}
 

materialious/src/lib/i18n/locales/en.json

@@ -77,6 +77,7 @@
 	"letterCase": "Letter case for titles",
 	"hideReplies": "Hide replies",
 	"hideVideo": "Hide video",
+	"hideAuthor": "Hide author",
 	"defaultPage": "Default page",
 	"newest": "Newest",
 	"oldest": "Oldest",