diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx index 0f013b62..d0884f84 100644 --- a/src/components/BookmarkItem.tsx +++ b/src/components/BookmarkItem.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faBookmark, faUserLock } from '@fortawesome/free-solid-svg-icons' -import { faChevronDown, faChevronUp, faBookOpen } from '@fortawesome/free-solid-svg-icons' +import { faChevronDown, faChevronUp, faBookOpen, faPlay, faEye } from '@fortawesome/free-solid-svg-icons' import IconButton from './IconButton' import { useEventModel } from 'applesauce-react/hooks' import { Models } from 'applesauce-core' @@ -11,6 +11,7 @@ import { formatDate, renderParsedContent } from '../utils/bookmarkUtils' import { getKindIcon } from './kindIcon' import ContentWithResolvedProfiles from './ContentWithResolvedProfiles' import { extractUrlsFromContent } from '../services/bookmarkHelpers' +import { classifyUrl } from '../utils/helpers' interface BookmarkItemProps { bookmark: IndividualBookmark @@ -47,6 +48,19 @@ export const BookmarkItem: React.FC = ({ bookmark, index, onS // use helper from kindIcon.ts + const getIconForUrlType = (url: string) => { + const classification = classifyUrl(url) + switch (classification.type) { + case 'youtube': + case 'video': + return faPlay + case 'image': + return faEye + default: + return faBookOpen + } + } + const handleReadNow = (event: React.MouseEvent) => { if (!hasUrls) return const firstUrl = extractedUrls[0] @@ -58,6 +72,9 @@ export const BookmarkItem: React.FC = ({ bookmark, index, onS } } + // Get classification for the first URL (for the main button) + const firstUrlClassification = hasUrls ? classifyUrl(extractedUrls[0]) : null + return (
@@ -78,26 +95,29 @@ export const BookmarkItem: React.FC = ({ bookmark, index, onS {extractedUrls.length > 0 && (

URLs:

- {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 3)).map((url, urlIndex) => ( -
- - {url} - - { e.preventDefault(); onSelectUrl?.(url) }} - /> -
- ))} + {(urlsExpanded ? extractedUrls : extractedUrls.slice(0, 3)).map((url, urlIndex) => { + const classification = classifyUrl(url) + return ( +
+ + {url} + + { e.preventDefault(); onSelectUrl?.(url) }} + /> +
+ ) + })} {extractedUrls.length > 3 && (
- {hasUrls && ( + {hasUrls && firstUrlClassification && (
)} diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 101e2c54..f6231862 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -10,4 +10,34 @@ export const extractNprofilePubkeys = (content: string): string[] => { return Array.from(unique) } +export type UrlType = 'video' | 'image' | 'youtube' | 'article' + +export interface UrlClassification { + type: UrlType + buttonText: string +} + +export const classifyUrl = (url: string): UrlClassification => { + const urlLower = url.toLowerCase() + + // Check for YouTube + if (urlLower.includes('youtube.com') || urlLower.includes('youtu.be')) { + return { type: 'youtube', buttonText: 'WATCH NOW' } + } + + // Check for video extensions + const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v'] + if (videoExtensions.some(ext => urlLower.includes(ext))) { + return { type: 'video', buttonText: 'WATCH NOW' } + } + + // Check for image extensions + const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico'] + if (imageExtensions.some(ext => urlLower.includes(ext))) { + return { type: 'image', buttonText: 'VIEW NOW' } + } + + // Default to article + return { type: 'article', buttonText: 'READ NOW' } +}