Merge pull request #450 from kgarner7/more-metadata

[feature]: Show album comment, Last.fm/MusicBrainz links

src/renderer/components/index.ts

@@ -27,6 +27,7 @@ export * from './select';
 export * from './skeleton';
 export * from './slider';
 export * from './spinner';
+export * from './spoiler';
 export * from './switch';
 export * from './tabs';
 export * from './text';

src/renderer/components/spoiler/index.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { HTMLAttributes, ReactNode, useRef, useState } from 'react';
+import styles from './spoiler.module.scss';
+import { useIsOverflow } from '/@/renderer/hooks';
+
+interface SpoilerProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    defaultOpened?: boolean;
+    maxHeight?: number;
+}
+
+export const Spoiler = ({ maxHeight, defaultOpened, children, ...props }: SpoilerProps) => {
+    const ref = useRef(null);
+    const isOverflow = useIsOverflow(ref);
+    const [isExpanded, setIsExpanded] = useState(!!defaultOpened);
+
+    const spoilerClassNames = clsx(styles.spoiler, {
+        [styles.canExpand]: isOverflow,
+        [styles.isExpanded]: isExpanded,
+    });
+
+    const handleToggleExpand = () => {
+        setIsExpanded((val) => !val);
+    };
+
+    return (
+        <div
+            ref={ref}
+            className={spoilerClassNames}
+            role="button"
+            style={{ maxHeight: maxHeight ?? '100px' }}
+            tabIndex={-1}
+            onClick={handleToggleExpand}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};

src/renderer/components/spoiler/spoiler.module.scss

@@ -0,0 +1,31 @@
+.control:hover {
+    color: var(--btn-subtle-fg-hover);
+    text-decoration: none;
+}
+
+.spoiler {
+    position: relative;
+    text-align: justify;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.spoiler:not(.is-expanded).can-expand:after {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: linear-gradient(to top, var(--main-bg) 10%, transparent 60%);
+    pointer-events: none;
+}
+
+.spoiler.can-expand {
+    cursor: pointer;
+}
+
+.spoiler.is-expanded {
+    max-height: 2500px !important;
+}

src/renderer/components/virtual-table/cells/note-cell.tsx

@@ -3,17 +3,7 @@ import { Skeleton } from '/@/renderer/components/skeleton';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { useMemo } from 'react';
 import { Text } from '/@/renderer/components/text';
-
-const URL_REGEX =
-    /((?:https?:\/\/)?(?:[\w-]{1,32}(?:\.[\w-]{1,32})+)(?:\/[\w\-./?%&=][^.|^\s]*)?)/g;
-
-const replaceURLWithHTMLLinks = (text: string) => {
-    const urlRegex = new RegExp(URL_REGEX, 'g');
-    return text.replaceAll(
-        urlRegex,
-        (url) => `<a href="${url}" target="_blank" rel="noreferrer">${url}</a>`,
-    );
-};
+import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
 
 export const NoteCell = ({ value }: ICellRendererParams) => {
     const formattedValue = useMemo(() => {
@@ -39,9 +29,10 @@ export const NoteCell = ({ value }: ICellRendererParams) => {
         <CellContainer $position="left">
             <Text
                 $secondary
-                dangerouslySetInnerHTML={{ __html: formattedValue }}
                 overflow="hidden"
-            />
+            >
+                {formattedValue}
+            </Text>
         </CellContainer>
     );
 };