feat: fix/playlist icon visibility mobile#223
Merged
ibrahimcesar merged 6 commits intomainfrom Nov 20, 2025
Merged
Conversation
Fixes two visual issues:
1. **Playlist icon not visible on mobile**
- Added `.lty-playlist-icon` CSS class with layered rectangles SVG
- Icon appears in top-right corner when `playlist={true}`
- Uses dark background with white icon for contrast
- Only shows before iframe is activated
- z-index: 1 to appear above thumbnail but below play button
2. **"Watch" text visible in play button**
- Added `padding: 0`, `line-height: 0`, and `font-size: 0` to `.lty-playbtn`
- Ensures button only shows the SVG background, not the text
- Text remains in DOM for screen readers via `.lty-visually-hidden`
The playlist icon design uses overlapping rectangles to indicate
multiple videos, similar to YouTube's native playlist indicator.
This provides visual feedback on both mobile and desktop that the
embed is a playlist, not a single video.
Closes #222
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed dependency version mismatch between vitest and @vitest/coverage-v8 that was causing CI builds to fail with ERESOLVE error. Changed: - @vitest/coverage-v8: ^4.0.10 → ^3.2.4 (to match vitest@^3.2.4) The coverage package v4.x requires vitest@4.x, but we're using vitest@3.2.4. Downgrading coverage package to matching v3.2.4 resolves the peer dependency conflict. All tests passing (51/51) ✅ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…ackage Fixed warning: "The CommonJS 'exports' variable is treated as a global variable in an ECMAScript module and may not work as expected" Changes: - Renamed CommonJS output from `index.js` to `index.cjs` - Updated package.json `main` field: `dist/index.js` → `dist/index.cjs` - Updated package.json `exports.require` path to use `.cjs` - Updated vite.config.ts to output `.cjs` for CommonJS format - Updated size-limit config to reference new filename Node's package format requires that CommonJS files use the `.cjs` extension when package.json has `"type": "module"`. This resolves the build warning while maintaining full backward compatibility. Tests: ✅ 51/51 passing Size limits: ✅ All passing - ES Module: 3.15 kB (limit: 10 kB) - CommonJS: 3.16 kB (limit: 10 kB) - CSS: 1.25 kB (limit: 2 kB) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
size-limit report 📦
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixed Issues:
.lty-playlist-icon) that shows in the top-right corner whenplaylist={true}padding: 0, line-height: 0, font-size: 0) to completely hide the text while keeping it accessible to screen readersChanges Made:
src/lib/LiteYouTubeEmbed.css- Added playlist icon CSS and button text hidingsrc/lib/index.tsxplaylist={true}and iframe is not loaded.gitignore- Added *.backup pattern to ignore backup filesFixes #222