design

src/config/config.ts

@@ -47,7 +47,7 @@ export const APP_MESSAGES_MAX = 100;
 export const FILE_SCAN_DEPTH = 1; // How many directory levels to recursively search. 0 is a flat directory search. Higher is further down the rabbit hole === more processing time
 // export const RETRY_DELAY = 4000; // Milli-seconds delay of retrying failed api requests to alieviate thousands of simultaneous requests;
 export const DIRECTORY_IGNORE_PATTERN = ['private']; // A lowercase list of movie titles to ignore; ex: sample.avi
-export const FILE_IGNORE_PATTERN = ['sample', 'etrg']; // A lowercase list of movie titles to ignore; ex: sample.avi
+export const FILE_IGNORE_PATTERN = ['sample', 'etrg', 'gopro']; // A lowercase list of movie titles to ignore; ex: sample.avi
 export const DEFAULT_FILE_META: Partial<MediaType> = {};
 // Throttle delay in ms
 export const THROTTLE_DELAY = 1000; // Todo

src/renderer/components/images/Icons.tsx

@@ -33,21 +33,23 @@ const closeIcon = ({ className }: { className?: string }) => (
 	</svg>
 );
 
-const playIcon = ({ className }: { className?: string }) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		strokeWidth="2"
-		strokeLinecap="round"
-		strokeLinejoin="round"
-		className={className}
-	>
-		<circle cx="12" cy="12" r="10" />
-		<polygon points="10 8 16 12 10 16 10 8" />
-	</svg>
-);
+function PlayIcon({ className }: { className?: string }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 1200 1200"
+			enableBackground="new 0 0 1200 1200"
+			// stroke="currentColor"
+			fill="currentColor"
+		>
+			<path
+				d="M600,0C268.65,0,0,268.65,0,600c0,331.35,268.65,600,600,600
+	c331.35,0,600-268.65,600-600C1200,268.65,931.35,0,600,0z M600,139.16c254.499,0,460.84,206.341,460.84,460.84
+	S854.499,1060.84,600,1060.84S139.16,854.499,139.16,600S345.501,139.16,600,139.16z M450,300.439V899.56L900,600L450,300.439z"
+			/>
+		</svg>
+	);
+}
 
 const podcastIcon = ({ className }: { className?: string }) => (
 	<svg
@@ -87,7 +89,7 @@ const stacksIcon = ({ className }: { className?: string }) => (
 export default {
 	browseIcon,
 	closeIcon,
-	playIcon,
+	PlayIcon,
 	podcastIcon,
 	stacksIcon,
 };

src/renderer/components/ui/SectionHeader.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
 import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import React from 'react';
 
 // </div>
 export function SectionHeader({

src/renderer/styles/effects.module.scss

@@ -0,0 +1,45 @@
+.vignette {
+	position: relative;
+	margin-bottom: -1px;
+
+	&::after {
+		position: absolute;
+		top: 0;
+		left: 0;
+		content: '';
+		display: block;
+		width: 100%;
+		height: 100%;
+		background: radial-gradient(
+			circle,
+			transparent -100%,
+			hsl(var(--background)) 100%
+		);
+		background-size: cover;
+	}
+}
+
+.fade {
+	position: absolute;
+	--mask: linear-gradient(
+			to bottom,
+			hsla(0, 0%, 0%, 0) 50%,
+			hsl(0, 0%, 0%) 100%
+		),
+		100% 50% / 100% 100% repeat-x;
+
+	-webkit-mask: var(--mask);
+	mask: var(--mask);
+}
+
+.glow {
+	position: relative;
+	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+	filter: drop-shadow(0 0 0.5rem hsla(var(--foreground), 0.5));
+
+	&:hover {
+		transform: scale(1.1);
+		filter: drop-shadow(0 0 0.5rem hsl(var(--foreground)));
+	}
+}