Commit Graph

846 Commits

Author SHA1 Message Date
Gigi
6a84646b0b chore(tailwind): setup Tailwind CSS with preflight on
- Install tailwindcss, postcss, autoprefixer
- Add tailwind.config.js and postcss.config.js
- Create src/styles/tailwind.css with base/components/utilities
- Import Tailwind before index.css in main.tsx
2025-10-13 21:17:11 +02:00
Gigi
e921967082 fix: move progress indicator outside reader and fix position tracking
- Move ReadingProgressIndicator outside reader div for true fixed positioning
- Replace position-indicator library with custom scroll tracking
- Track document scroll position instead of content scroll
- Remove unused position-indicator dependency
- Ensure progress indicator is always visible and shows correct percentage
2025-10-13 21:04:39 +02:00
Gigi
ec34bc3d04 fix: position reading progress indicator at bottom of screen
- Move progress indicator from top to bottom of viewport
- Add box shadow for better visual separation
- Update hide animation to slide up from bottom
- Add padding to reader content to prevent overlap
- Ensure indicator is always visible while scrolling
2025-10-13 21:02:52 +02:00
Gigi
96ce12b952 feat: add reading position tracking with visual progress indicator
- Install position-indicator library for scroll position tracking
- Create useReadingPosition hook for position management
- Add ReadingProgressIndicator component with animated progress bar
- Integrate reading progress in ContentPanel for text content only
- Add CSS styles for fixed progress indicator with shimmer animation
- Track reading completion at 90% threshold
- Exclude video content from position tracking
2025-10-13 21:01:44 +02:00
Gigi
1066c43d6c docs(changelog): add v0.5.7 entry with video features and improvements 2025-10-13 20:57:33 +02:00
Gigi
914557a61d chore: bump version to 0.5.7 v0.5.7 2025-10-13 20:56:41 +02:00
Gigi
3df2f248ff fix: use negative margins to make video edge-to-edge within reader
- Add negative left/right margins (-0.75rem) to counteract reader padding
- Video now extends to the true edges of the reader container
- Maintains responsive sizing with 80vw width and aspect ratio
- Achieves true edge-to-edge video display
2025-10-13 20:53:39 +02:00
Gigi
d2770d58e2 fix: remove left/right margins from video player for edge-to-edge display
- Change margin from '0 auto 1rem auto' to '0 0 1rem 0'
- Remove auto left/right margins that were centering the video
- Keep bottom margin for spacing from content below
- Video player now aligns to left edge of card container
2025-10-13 20:27:08 +02:00
Gigi
933182567d fix: use viewport width for video container to break parent constraints
- Change width from 100% to 80vw (80% of viewport width)
- Increase min-width to 400px for better minimum size
- Increase max-width to 1000px for larger screens
- This makes video container independent of parent width constraints
- Ensures video is always properly sized regardless of title length
2025-10-13 20:23:12 +02:00
Gigi
f9fa2f05f0 feat: implement responsive video player with aspect ratio
- Update ReactPlayer to use width='100%', height='auto' with aspectRatio: '16/9'
- Replace padding-top approach with modern aspect-ratio CSS property
- Add minimum width (300px) and maximum width (800px) constraints
- Center video container with margin: 0 auto
- Ensure video player is no longer constrained by title length
- Improve video viewing experience across different screen sizes
2025-10-13 20:19:08 +02:00
Gigi
919bb8151f fix: resolve linting and type checking issues
- Replace 'any' type with proper UserSettings type in CompactView
- Fix import path for UserSettings from services/settingsService
- Resolve @typescript-eslint/no-explicit-any warning
- Ensure all TypeScript type checks pass
- Maintain strict linting rules without removing any rules
2025-10-13 20:14:54 +02:00
Gigi
6f82674c9b feat: add thumbnail images to compact view
- Add compact-thumbnail styling for small square images (24x24px)
- Update CompactView component to include thumbnail images on the left
- Use useImageCache hook to get cached article images
- Add settings prop to CompactView interface
- Position thumbnails before bookmark type icon in compact row
- Match design from screenshot with small square thumbnails on left side
- Improve visual hierarchy and content recognition in compact view
2025-10-13 20:12:54 +02:00
Gigi
8caf9988fc feat: enhance borders for reading list cards
- Add specific border styling for .bookmarks-list .individual-bookmark
- Use darker border color (#444) for better visibility
- Add background color (#1a1a1a) to make cards more distinct
- Enhance hover states with brighter border (#555) and background (#252525)
- Use !important to ensure styles override existing CSS
- Improves visual separation and card definition in reading list
2025-10-13 20:11:08 +02:00
Gigi
036ee20d98 feat: add URL routing for /me page tabs
- Add routes for /me/highlights, /me/reading-list, /me/archive
- Redirect /me to /me/highlights by default
- Update Bookmarks component to extract tab from URL path
- Pass activeTab prop to Me component based on current route
- Update Me component to use URL-based tab state instead of local state
- Update tab click handlers to navigate to appropriate URLs
- Enable deep-linking to specific tabs (e.g., /me/reading-list)
2025-10-13 20:09:46 +02:00
Gigi
b86545dcc8 fix: left-align text in reading list elements
- Add text-align: left to .bookmarks-list to override center alignment from .app
- Apply left alignment to all individual bookmark elements and their children
- Ensures reading list content is properly left-aligned for better readability
- Maintains consistent text alignment for bookmark titles, content, and metadata
2025-10-13 20:07:05 +02:00
Gigi
8bdccd9c9e feat: enable bookmark navigation in reading list
- Add useNavigate hook to Me component
- Implement handleSelectUrl function for bookmark navigation
- Pass onSelectUrl prop to BookmarkItem components in reading list
- Support both regular URLs (/r/*) and nostr articles (/a/*) navigation
- Enables clicking bookmarks in reading list to open content in main pane
2025-10-13 20:06:42 +02:00
Gigi
9a14185fa5 feat: color reading list tab blue to match bookmarks icon
- Apply #646cff color to reading-list tab when active
- Matches the blue color used throughout the app for bookmarks
- Provides visual consistency between bookmarks icon and reading list tab
- Uses same color as bookmark-type and other bookmark-related elements
2025-10-13 20:03:51 +02:00
Gigi
53a6053464 fix: prevent profile element from bleeding off screen on mobile
- Add horizontal margin (0 1rem) to author-card-container on mobile
- Set max-width to calc(100vw - 2rem) to ensure it fits within screen bounds
- Add box-sizing: border-box to both container and card for proper sizing
- Ensures profile element has equal left/right margins and doesn't exceed screen width
2025-10-13 20:03:00 +02:00
Gigi
e27d7ee26c feat: increase spacing between mobile buttons and profile element
- Increase margin-top from 2.25rem to 3.5rem for explore-header on mobile
- Provides more breathing room between floating action buttons and profile
- Improves mobile UX by preventing visual crowding
2025-10-13 20:01:22 +02:00
Gigi
98203e6b6f feat: hide tab counts on mobile for /me page
- Wrap tab labels and counts in separate spans for better control
- Hide counts on mobile devices (max-width: 768px) to save space
- Maintain counts on desktop for better UX
- Follows mobile-first design principles
2025-10-13 19:59:16 +02:00
Gigi
8469740141 fix: resolve TypeScript errors in youtube-meta.ts
- Remove non-existent getVideoDetails import and usage
- Fix getSubtitles API call to match actual package interface
- Add proper Subtitle type to replace any usage
- Convert subtitle data types to match Caption interface
- Install missing @vercel/node dependency
2025-10-13 19:57:38 +02:00
Gigi
8fff2bce52 feat(api): add Vimeo video metadata extraction support
- Create unified video-meta.ts API handler for both YouTube and Vimeo
- Add Vimeo oEmbed API integration for server-side metadata extraction
- Implement URL pattern matching for YouTube and Vimeo video detection
- Support both URL and videoId parameters for backward compatibility
- Add proper TypeScript types for Vimeo oEmbed response
- Include caching mechanism for Vimeo metadata (7-day cache)
- Remove unused @vimeo/player package dependency

The new API endpoint supports:
- YouTube: /api/video-meta?url=https://youtube.com/watch?v=ID or ?videoId=ID
- Vimeo: /api/video-meta?url=https://vimeo.com/ID
- Returns consistent response format for both platforms
2025-10-13 19:52:01 +02:00
Gigi
30b98fc744 refactor(api): improve type safety in youtube-meta handler
- Replace 'any' type with proper type annotations
- Add explicit type checking for video details response
- Improve description field extraction with better type safety
- Add comments for better code documentation
2025-10-13 19:49:04 +02:00
Gigi
7a190b7d35 fix(api): be more lenient extracting YouTube description from details fields 2025-10-13 19:43:04 +02:00
Gigi
e3149c40c7 fix(types): correct setTimeout ref type in Settings to ReturnType<typeof setTimeout> 2025-10-13 19:37:37 +02:00
Gigi
91743518bd feat(reader): use YouTube title as header title, description as body; show transcript section 2025-10-13 19:33:42 +02:00
Gigi
fd2e4079ab feat(reader): fetch YouTube title/description/captions with 7d client cache; transcript toggle 2025-10-13 19:28:46 +02:00
Gigi
ec423cad80 feat(services): youtubeMetaService with 7d localStorage cache and ID extraction 2025-10-13 19:27:34 +02:00
Gigi
8f8441b0e0 feat(api): youtube-meta endpoint with 7d in-memory cache and captions/details via extractor 2025-10-13 19:26:53 +02:00
Gigi
3c20d45dba chore(deps): add @treeee/youtube-caption-extractor 2025-10-13 19:25:59 +02:00
Gigi
75c4e20dc9 fix(video): implement proper react-player responsive pattern from docs 2025-10-13 19:12:59 +02:00
Gigi
9d27595d31 fix(video): simplify video container - remove negative margins and complex layout hacks 2025-10-13 19:10:56 +02:00
Gigi
b7d90a790b style(layout): remove max-width on main pane, constrain reader instead; full width for videos 2025-10-13 19:08:57 +02:00
Gigi
c49d850f74 refactor(video): extract buildNativeVideoUrl to reusable utility (DRY) 2025-10-13 18:31:29 +02:00
Gigi
4c11c5fc54 fix(reader): use responsive aspect-ratio container for videos to fill full width 2025-10-13 18:30:09 +02:00
Gigi
44befab6d3 style(reader): make video container break out of reader padding for full width 2025-10-13 18:28:28 +02:00
Gigi
02a2f4b85e chore(deps): update package-lock.json for version 0.5.6 and react-player 2025-10-13 18:27:43 +02:00
Gigi
43d54b5734 refactor(bookmarks): clean up unused getIconForUrlType in CompactView and fix prop passing 2025-10-13 18:27:22 +02:00
Gigi
b7896be507 fix(types): replace ShareData with inline type to fix lint errors 2025-10-13 18:26:36 +02:00
Gigi
eeb40306da style(layout): make main pane full width when displaying videos 2025-10-13 18:25:08 +02:00
Gigi
749b47ac5c feat(reader): show 'Mark as Watched' for video URLs (icon unchanged) 2025-10-13 18:24:18 +02:00
Gigi
42f59f2b19 feat(reader): add three-dot menu under videos with open/native/copy/share actions 2025-10-13 18:23:12 +02:00
Gigi
2bf6e742f1 feat(reader): show video duration for /r/ video URLs using react-player onDuration 2025-10-13 17:30:36 +02:00
Gigi
2a2049e678 style(reader): widen main pane when showing videos; add reader-video styles 2025-10-13 17:29:21 +02:00
Gigi
146aa85e76 feat(bookmarks): make entire bookmark cards clickable; stop propagation on internal controls 2025-10-13 17:27:25 +02:00
Gigi
a26c7497b5 feat(reader): embed external videos in /r/ using react-player; add vimeo/dailymotion detection 2025-10-13 17:25:34 +02:00
Gigi
da67135f5e chore(deps): add react-player for embedding videos in reader 2025-10-13 17:24:10 +02:00
Gigi
aebb6d1762 refactor(bookmarks): remove READ/VIEW/WATCH CTA buttons and texts; simplify classifyUrl 2025-10-13 17:21:59 +02:00
Gigi
8f5cf6a0b4 refactor(utils): remove CTA buttonText from classifyUrl and UrlClassification 2025-10-13 17:20:02 +02:00
Gigi
875017db96 docs(changelog): add v0.5.6 entry (Keep a Changelog format) 2025-10-13 17:15:34 +02:00