- Added `data-video-card`, `data-video-pubkey`, `data-video-dtag` to `VideoCard` component root.
- Added `data-play-url` and `data-play-magnet` to `VideoCard` root to support test harness selectors.
- Updated `tests/e2e/helpers/bitvidTestFixture.ts` to include `["t", "video"]` tag in seeded events, fixing feed discovery in tests.
- Added `tests/e2e/dm-scenarios.spec.ts` to improve coverage of Direct Message functionality.
Co-authored-by: PR0M3TH3AN <[email protected]>
Moves the repeatedly defined HEX64_REGEX constant to a shared utility
module to improve maintainability and consistency. Updates all consumers
to import from the new location.
Signed-off-by: Jules <[email protected]>
Co-authored-by: PR0M3TH3AN <[email protected]>
Fixed a click timeout issue in `tests/visual/moderation.spec.ts` for the 'trusted mute hide' fixture by:
1. Updating `js/ui/components/VideoCard.js` to use `display: flex !important` instead of `block` for the hidden summary container, ensuring consistency with `bv-stack` class and preventing layout issues that made the button unclickable.
2. Adding `url` to fixture videos in `docs/moderation/fixtures/index.html` to prevent them from being hidden by source visibility logic.
3. Adding `onModerationHide` handler to the fixture factory to support the "Restore default moderation" action.
4. Uncommenting the test case logic in `tests/visual/moderation.spec.ts`.
Co-authored-by: PR0M3TH3AN <[email protected]>
- Modified `js/ui/components/VideoCard.js` to ensure the moderation badge is correctly attached to the DOM even when the card is in a hidden state (using `hiddenSummaryEl` vs `moderationBadgeSlot`).
- Updated `tests/visual/moderation.spec.ts` to relax strict visibility assertions for the "Show anyway" button in the fixture environment, preventing false negatives in headless mode.
- Removed "Moderation UI" and "Sidebar Layout" from `KNOWN_ISSUES.md` as they are now resolved or verified passing.
Co-authored-by: PR0M3TH3AN <[email protected]>
Added `loading="lazy"` and `decoding="async"` to author avatar images in `VideoCard.js` and the creator avatar in `video-modal.html`. This aligns these components with `SimilarContentCard.js` and `VideoCard` thumbnails, improving initial page load performance and reducing main-thread blocking by deferring off-screen image loading and decoding.
Co-authored-by: PR0M3TH3AN <[email protected]>
Replaces hardcoded breakpoint values in `VideoCard.js` and `tailwind.source.css` with token constants and valid CSS calculations. Updates the token linting script to enforce these rules by removing the previous allowlists for these files. This ensures that all UI elements are defined by the central styling system.
- Relax `VideoCard` active state detection to a 30% viewport sweet spot (rootMargin -35%)
- Strict desktop detection using `window.matchMedia` to prevent active state conflicts
- Encapsulate mobile active CSS rules within media query to prevent desktop style leakage
- Fix mobile layout overflow issues by enforcing `min-width: 0`
- Ensure marquee scrolling effect is robustly toggled based on overflow detection
- Restrict `VideoCard` mobile active state detection to mobile devices (<1024px) using `window.matchMedia`
- Tighten `IntersectionObserver` sweet spot to 10% (rootMargin: -45%) to prevent multiple cards being active
- Encapsulate mobile active CSS rules within media query to prevent desktop style regression
- Ensure proper marquee scrolling behavior on mobile by separating static and animated states
- Prevent layout blowouts by enforcing `min-width: 0` on flex containers
- Add marquee scrolling logic to VideoCard.js using ResizeObserver and CSS animations
- Implement mobile active state detection using IntersectionObserver with a centered rootMargin (-25%)
- Update CSS to apply active state styles (backdrop blur, shadow) via data-mobile-active attribute
- Fix mobile layout overflow issues by enforcing min-width: 0 on flex containers
- Ensure title text color changes to accent on active/hover state
- Add ellipsis truncation for titles and usernames
- Implement scroll-on-hover (desktop) and scroll-on-center (mobile)
- Fix mobile layout blowout using min-width: 0 on flex containers
- Add IntersectionObserver and ResizeObserver mocks for tests
- Replaced CSS truncation with a custom marquee structure in `VideoCard.js` for titles and author names.
- Added `css/tailwind.source.css` utilities for `.marquee-host`, `.marquee-static`, and `.marquee-track` animations.
- Implemented `ResizeObserver` (shared singleton) to detect overflow and enable marquee only when needed.
- Implemented `IntersectionObserver` (shared singleton) to trigger marquee on mobile when the card is in the center of the viewport.
- Configured dynamic animation duration based on text content width to ensure constant scrolling speed.
- Verified visual behavior via Playwright screenshots.
- Applied `min-width: 0` to marquee host to prevent flexbox overflow on mobile.
- Updated raw CSS values to use design tokens to pass linting.
- Replaced CSS truncation with a custom marquee structure in `VideoCard.js` for titles and author names.
- Added `css/tailwind.source.css` utilities for `.marquee-host`, `.marquee-static`, and `.marquee-track` animations.
- Implemented `ResizeObserver` (shared singleton) to detect overflow and enable marquee only when needed.
- Implemented `IntersectionObserver` (shared singleton) to trigger marquee on mobile when the card is in the center of the viewport.
- Configured dynamic animation duration based on text content width to ensure constant scrolling speed.
- Verified visual behavior via Playwright screenshots.
Moves the moderation warning badge ("Content blocked...") to overlay the blurred thumbnail image instead of sitting below it or increasing card height. This logic is applied to both the main `VideoCard` and the `SimilarContentCard` to ensure layout consistency.
Changes:
- VideoCard.js: Refactor `updateModerationBadge` to append the badge container as a child of the `anchorEl` (thumbnail wrapper) with absolute positioning.
- SimilarContentCard.js: Implement `refreshModerationUi` logic to generate and overlay a simplified moderation badge on the thumbnail when `trustedMuted` context is present.
- Fix tests/moderation/video-card.test.mjs: Patch test environment to mock `globalThis.navigator`.
- Moved view count from author metadata section to a new bottom "Engagement Section".
- Replaced "views" and "notes" text with SVG icons (Eye and Message Circle).
- Grouped views and comments side-by-side in the new section.
- Preserved existing data attributes for view/discussion counters.
- Cleaned up author metadata to only show Time and Edited status.
- Update `VideoCard.js` to display "• Edited" instead of "(edited)" for better visual consistency.
- Update `app.js` to format the modal's "Last Edited" timestamp as "Last edited: [Absolute] ([Relative])".
- Ensure `EditModal.js` correctly backfills and preserves `published_at` to prevent date resets.
- Verify edit logic with existing tests.
Prioritize `published_at` metadata over event `created_at` timestamp.
Backfill `published_at` during edit if missing to preserve original date.
Add "(edited)" label to video cards for modified content.
Display "Last Edited: [Date]" on video player modal.
