feat: add console banner #186
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds a styled console banner to display library version information and usage warnings. The banner appears when video provider components are loaded, helping developers identify the version in use and warning them about pre-release builds.
Key changes:
- Created
yieldConsoleBannerutility function to display styled console output with version, pre-release warnings, and support links - Integrated the banner into both HTML and React video provider components at module load time
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/utils/src/shared/console.ts | Implements the banner utility with styled console output and pre-release detection |
| packages/utils/src/index.ts | Exports the console banner utility for use across packages |
| packages/react/src/store/video-provider.tsx | Calls banner function at module level to display version on component load |
| packages/html/src/media/video-provider.ts | Calls banner function at module level to display version on component load |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ); | ||
|
|
||
| const prereleaseType = version.includes('preview') ? 'preview' : version.includes('alpha') ? 'alpha' : null; | ||
| if (prereleaseType) { |
There was a problem hiding this comment.
Missing eslint-disable-next-line comment for console.warn, while console.info calls have them. Apply the same pattern for consistency with the existing eslint suppressions.
| if (prereleaseType) { | |
| if (prereleaseType) { | |
| // eslint-disable-next-line no-console |
| `font: 1em monospace;`, | ||
| ); | ||
|
|
||
| const prereleaseType = version.includes('preview') ? 'preview' : version.includes('alpha') ? 'alpha' : null; |
There was a problem hiding this comment.
[nitpick] The nested ternary operator is difficult to read. Consider refactoring to an if-else statement or extracting to a separate function for better clarity.
| const prereleaseType = version.includes('preview') ? 'preview' : version.includes('alpha') ? 'alpha' : null; | |
| let prereleaseType: string | null = null; | |
| if (version.includes('preview')) { | |
| prereleaseType = 'preview'; | |
| } else if (version.includes('alpha')) { | |
| prereleaseType = 'alpha'; | |
| } |
| import { version } from '../../package.json'; | ||
| import { MediaContext } from './context'; | ||
|
|
||
| yieldConsoleBanner(version); |
There was a problem hiding this comment.
The banner is displayed at module initialization, which means it will execute every time this module is imported, potentially multiple times in an application. Consider adding a guard to ensure the banner is only displayed once per page load.
| yieldConsoleBanner(version); | |
| if (!(globalThis as any).__videojs_banner_displayed) { | |
| yieldConsoleBanner(version); | |
| (globalThis as any).__videojs_banner_displayed = true; | |
| } |
| import { yieldConsoleBanner } from '@videojs/utils'; | ||
| import { version } from '../../package.json'; | ||
|
|
||
| yieldConsoleBanner(version); |
There was a problem hiding this comment.
The banner is displayed at module initialization, which means it will execute every time this module is imported, potentially multiple times in an application. Consider adding a guard to ensure the banner is only displayed once per page load.
| yieldConsoleBanner(version); | |
| if (typeof window !== 'undefined' && !(window as any).__videojs_banner_displayed) { | |
| yieldConsoleBanner(version); | |
| (window as any).__videojs_banner_displayed = true; | |
| } |
fix #102
This pull request introduces a new utility for displaying a styled console banner with version information and usage warnings, and integrates it into both the HTML and React video provider components. The changes improve developer awareness of the library version and pre-release status when using the components.
Console Banner Integration
yieldConsoleBannerutility function inpackages/utils/src/shared/console.tsthat prints a styled banner with the current version, pre-release warnings, and helpful links to the browser console.yieldConsoleBannerfrom the main utils index inpackages/utils/src/index.tsto make it available across the codebase.Provider Component Updates
yieldConsoleBanner(version)call at the top of bothpackages/html/src/media/video-provider.tsandpackages/react/src/store/video-provider.tsx, ensuring the banner appears whenever the video provider components are loaded. [1] [2]