feat(core): add fullscreen button component - #459
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
mihar-22
changed the title
| @@ -0,0 +1,6 @@ | |||
| export const FullscreenButtonDataAttributes = { | |||
| /** Present when fullscreen mode is active. */ | |||
| fullscreenActive: 'data-fullscreen', | |||
There was a problem hiding this comment.
suggest: In MC we went with a boolean isfullscreen, with "is" because it reads a more clearly when you're in the fullscreen button context. Any reason not to do that here? Could also be fullscreen-active to match the prop.
There was a problem hiding this comment.
Good callout! I think data-is-fullscreen would be inconsistent with what we have. None of our existing data attrs use an is- prefix. Play button uses data-paused, Mute button uses data-muted. Base UI follows the same convention – Toggle uses data-pressed, Checkbox uses data-checked. Short state words, no prefix.
By that convention, data-fullscreen feels right. It names the specific state the same way the others do. The -active suffix would also be redundant; presence of the attribute already implies active, same as data-paused or data-pressed.
I've also updated the state to align: fullscreenActive → fullscreen on FullscreenState, and the button state simplifies to just fullscreen and availability in the fullscreen button context, data attributes naturally reflect this way.
29183f7 to
acbbdad
Compare
acbbdad to
bd2a26f
Compare
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Add FullscreenButton component across core, html, and react packages: - FullscreenButtonCore: shared business logic and state management - FullscreenButtonElement: web component for html package - FullscreenButton: React component with proper types Data attributes: data-fullscreen (boolean), data-availability Follows same patterns as MuteButton and PlayButton.
- Wrap toggle() in try-catch (fullscreen can fail) - Add JSDoc to props interface - Add JSDoc to state interface - Add JSDoc to data attributes
- PresentationState -> FullscreenState - fullscreenActive -> fullscreen - selectPresentation -> selectFullscreen - Data attr key: fullscreenActive -> fullscreen - Update tests, html element, and react component
e7f20d2 to
160e729
Compare
- fullscreenAvailability -> availability on FullscreenButtonState - Pick types from FullscreenState instead of re-declaring - Remove FullscreenButtonDataAttributes (state keys map directly)
160e729 to
84c9650
Compare
2 participants
closes #273
Summary
Adds FullscreenButton component across core, html, and react packages, building on the fullscreen feature from #458.
Implementation
FullscreenStateandselectFullscreenfrom feat(core): add presentation feature #458FullscreenState:fullscreen(boolean),availability(FeatureAvailability)data-fullscreen,data-availability— no explicit mapping neededtoggle()wrapped in try-catch (fullscreen requests can fail)Files
packages/core/src/core/ui/fullscreen-button/— Core logic and tests (15 tests)packages/html/src/ui/fullscreen-button/— Web Componentpackages/html/src/define/ui/fullscreen-button.ts— Custom element registrationpackages/react/src/ui/fullscreen-button/— React componentTesting
Depends On