Organizing My Reaction GIFs Using Node.js, Sharp, And Angular 11.0.2

// Import core node modules.
var fs = require( "fs" );
var sharp = require( "sharp" );

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

var inputsDirectory = ( __dirname + "/../src/assets/gifs/" );
var outputsDirectory = ( __dirname + "/../src/assets/thumbnails/" );

generateThumbnailsForGIFs().then(
	( thumbnailCount ) => {

		console.log( `Generated ${ thumbnailCount } thumbnails.` );

	},
	( error ) => {

		console.warn( "An error occurred while generating thumbnails." );
		console.error( error );

	}
);

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

// I generate thumbnails if and only if they don't yet exist. Returns the number of
// thumbnails that were generated.
async function generateThumbnailsForGIFs() {

	var thumbnailCount = 0;

	for ( var inputFileName of fs.readdirSync( inputsDirectory ) ) {

		var thumbnailFileName = inputFileName.replace( /\.gif$/i, ".jpg" );
		var inputFilePath = ( inputsDirectory + inputFileName );
		var outputFilePath = ( outputsDirectory + thumbnailFileName );

		if ( fileExists( outputFilePath ) ) {

			console.warn( `Skipping "${ thumbnailFileName }", it already exists.` );

		} else {

			console.log( `Generating thumbnail for "${ thumbnailFileName }".` );

			await sharp( inputFilePath )
				.flatten()
				.jpeg({
					quality: 70
				})
				.toFile( outputFilePath )
			;

			thumbnailCount++;

		}

	}

	return( thumbnailCount );

}


// I check to see if the given file exists.
function fileExists( filePath ) {

	try {

		return( fs.accessSync( filePath ) === undefined );

	} catch ( error ) {

		return( false );

	}

}

export interface Entry {
	fileName: string;
	altText: string;
	tags: string[];
}

export var manifest: Entry[] = [
	{
		"fileName": "i-feel-like-that-needs-to-be-celebrated.gif",
		"altText": "I feel like that needs to be celebrated",
		"tags": [ "Schitt's Creek", "Celebration", "Team Work" ]
	},
	{
		"fileName": "nomo-fomo.gif",
		"altText": "Nomo Fomo",
		"tags": [ "Broad City", "Celebration", "Happy" ]
	},
	{
		"fileName": "stay-strong-babe.gif",
		"altText": "Stay strong, babe",
		"tags": [ "Schitt's Creek", "Good Luck", "Sympathy", "Encouragement" ]
	},
	{
		"fileName": "what-is-this.gif",
		"altText": "What is this?",
		"tags": [ "Homeland", "Shock", "Surprise", "Wat", "Anger", "Tricked" ]
	},
	// .... truncated ....
];

// Import the core angular services.
import { Component } from "@angular/core";

// Import the application components and services.
import { ClipboardService } from "./clipboard.service";
import { Entry } from "./manifest";
import { manifest } from "./manifest";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

interface SearchItem {
	isVisible: boolean;
	searchTarget: string;
	imageUrl: string;
	thumbnailUrl: string;
	sortTarget: number;
	entry: Entry;
}

@Component({
	selector: "app-root",
	styleUrls: [ "./app.component.less" ],
	templateUrl: "./app.component.html"
})
export class AppComponent {

	public isShowingNoResults: boolean;
	public isShowingToaster: boolean;
	public searchItems: SearchItem[];

	private clipboardService: ClipboardService;

	// I initialize the app component.
	constructor( clipboardService: ClipboardService ) {

		this.clipboardService = clipboardService;

		this.isShowingNoResults = false;
		this.isShowingToaster = false;
		this.searchItems = this.compileSearchItems();

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I apply the given filter to the search results.
	public applyFilter( inputFilter: string ) : void {

		var normalizedFilter = this.normalizeFilterValue( inputFilter );

		for ( var item of this.searchItems ) {

			item.isVisible = ( normalizedFilter )
				? item.searchTarget.includes( normalizedFilter )
				: true
			;

		}

		// If the filtering results in no visible items, show the "no results" message.
		this.isShowingNoResults = ! this.searchItems.some(
			( item ) => {

				return( item.isVisible );

			}
		);

		// Whenever the user changes the filter, scroll them back to the top of the
		// window so that they can see the most relevant results.
		window.scrollTo( 0, 0 );

	}


	// I copy the image URL associated with the given search item to the clipboard.
	public copyImageUrl( item: SearchItem ) : void {

		var remoteImageUrl = ( window.location.href + item.imageUrl );

		console.group( "Copying GIF Url" );
		console.log( remoteImageUrl );
		console.log( item.entry.altText );
		console.groupEnd();

		this.clipboardService
			.copy( remoteImageUrl )
			.then(
				() => {

					this.showToaster();

				},
				( error ) => {

					console.warn( "Could not copy GIF Url" );
					console.error( error );

				}
			)
		;

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I compile the manifest down into a search items collection.
	private compileSearchItems() : SearchItem[] {

		var items: SearchItem[] = manifest.map(
			( entry ) => {

				var imageUrl = `assets/gifs/${ entry.fileName }`;
				var thumbnailUrl = ( "assets/thumbnails/" + entry.fileName.replace( /\.gif$/i, ".jpg" ) );

				// Add all text-based elements to the search target.
				var searchTarget = [ entry.fileName, entry.altText, ...entry.tags ]
					.map( this.normalizeFilterValue )
					.join( "\n" )
					.toLowerCase()
				;

				// In order to bring different GIFs to your mental fore-brain, let's
				// randomly sort the search items every time the page renders. This way,
				// you'll see different GIFs at the top every time.
				var sortTarget = Math.random();

				return({
					isVisible: true,
					searchTarget: searchTarget,
					imageUrl: imageUrl,
					thumbnailUrl: thumbnailUrl,
					sortTarget: sortTarget,
					entry: entry
				});

			}
		);

		items.sort(
			( a, b ) => {

				return( b.sortTarget - a.sortTarget );

			}
		);

		return( items );

	}


	// I normalize the given search filter so that we can get better matches.
	private normalizeFilterValue( value: string ) : string {

		var normalizedValue = value
			.trim()
			.toLowerCase()
			.replace( /['",.:-]/g, "" )
		;

		return( normalizedValue );

	}


	// I show the "copied to clipboard" toaster.
	private showToaster() : void {

		this.isShowingToaster = true;

		setTimeout(
			() => {

				this.isShowingToaster = false;

			},
			3000
		);

	}

}

<header class="header">

	<h1 class="header__title">
		Ben's Reaction GIFs
	</h1>

	<div class="header__form">
		<input
			#filterRef
			type="text"
			autofocus
			placeholder="Search GIFs..."
			(input)="applyFilter( filterRef.value )"
			(window:keydown.Meta.F)="$event.preventDefault(); filterRef.focus(); filterRef.select();"
			class="header__input"
		/>
	</div>

</header>

<div *ngIf="isShowingToaster" class="toaster">
	GIF image Url has been copied to your clipboard
</div>

<div *ngIf="isShowingNoResults" class="no-results">
	Sorry, no GIFs match your search.
</div>

<ul class="items">
	<li
		*ngFor="let item of searchItems"
		class="items__item"
		[hidden]="( ! item.isVisible )">

		<bn-gif
			[imageUrl]="item.imageUrl"
			[thumbnailUrl]="item.thumbnailUrl"
			[altText]="item.entry.altText"
			[tags]="item.entry.tags"
			(click)="copyImageUrl( item )"
			class="items__gif">
		</bn-gif>

	</li>
</ul>

// Import the core angular services.
import { Component } from "@angular/core";
import { ChangeDetectionStrategy } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "bn-gif",
	inputs: [
		"imageUrl",
		"thumbnailUrl",
		"altText",
		"tags"
	],
	host: {
		"(mouseenter)": "activateGif()",
		"(mouseleave)": "deactivateGif()"
	},
	changeDetection: ChangeDetectionStrategy.OnPush,
	styleUrls: [ "./gif.component.less" ],
	templateUrl: "./gif.component.html"
})
export class GifComponent {

	public altText!: string;
	public imageUrl!: string;
	public imageSrc: string;
	public tags!: string[];
	public thumbnailUrl!: string;

	// I initialize the gif component.
	constructor() {

		this.imageSrc = "";

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I enable the GIF animation.
	public activateGif() : void {

		this.imageSrc = this.imageUrl;

	}


	// I disable the GIF animation, showing the static thumbnail.
	public deactivateGif() : void {

		this.imageSrc = this.thumbnailUrl;

	}


	// I get called once after the component has been instantiated.
	public ngOnInit() : void {

		this.imageSrc = this.thumbnailUrl;

	}

}

<div class="viewport">
	<img
		[src]="imageSrc"
		[alt]="altText"
		class="viewport__image"
	/>
</div>

<div *ngIf="altText" class="text">
	"{{ altText }}"
</div>

<ul class="tags">
	<li *ngFor="let tag of tags" class="tags__tag">
		{{ tag }}
	</li>
</ul>