Skip to content

feat: add console banner #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+45 −0
Open

feat: add console banner #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/html/src/media/video-provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ import type { MediaStore } from '@videojs/core/store';
import { ProviderMixin } from '@open-wc/context-protocol';
import { createMediaStore } from '@videojs/core/store';

import { yieldConsoleBanner } from '@videojs/utils';
import { version } from '../../package.json';

yieldConsoleBanner(version);
Copy link

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
yieldConsoleBanner(version);
if (typeof window !== 'undefined' && !(window as any).__videojs_banner_displayed) {
yieldConsoleBanner(version);
(window as any).__videojs_banner_displayed = true;
}

Copilot uses AI. Check for mistakes.

const ProviderHTMLElement: Constructor<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);

export class VideoProviderElement extends ProviderHTMLElement {
Expand Down
5 changes: 5 additions & 0 deletions packages/react/src/store/video-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@ import type { ReactNode } from 'react';

import { createMediaStore } from '@videojs/core/store';

import { yieldConsoleBanner } from '@videojs/utils';
import { useMemo } from 'react';

import { version } from '../../package.json';
import { MediaContext } from './context';

yieldConsoleBanner(version);
Copy link

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
yieldConsoleBanner(version);
if (!(globalThis as any).__videojs_banner_displayed) {
yieldConsoleBanner(version);
(globalThis as any).__videojs_banner_displayed = true;
}

Copilot uses AI. Check for mistakes.

export function VideoProvider({ children }: { children: ReactNode }): JSX.Element {
const value = useMemo(() => createMediaStore(), []);

Expand Down
1 change: 1 addition & 0 deletions packages/utils/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './shared/console';
export * from './shared/crypto';
export * from './shared/state';
export * from './shared/time';
Expand Down
34 changes: 34 additions & 0 deletions packages/utils/src/shared/console.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
export function yieldConsoleBanner(version: string): void {
// eslint-disable-next-line no-console
console.info(
`%c Video.js %c v${version}`,
`border-radius: 9999px;
background: #393836;
font: bold 1.5em/1.5em monospace;
color: #ebe4c1;
text-shadow: 1px 1px 0 #fcb116,
2px 2px 0 #f26222,
3px 3px 0 #ea3837,
4px 4px 0 #a83b71`,
`font: 1em monospace;`,
);

const prereleaseType = version.includes('preview') ? 'preview' : version.includes('alpha') ? 'alpha' : null;
Copy link

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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.

Suggested change
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';
}

Copilot uses AI. Check for mistakes.
if (prereleaseType) {
Copy link

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
if (prereleaseType) {
if (prereleaseType) {
// eslint-disable-next-line no-console

Copilot uses AI. Check for mistakes.
console.warn(
`%c This is a ${prereleaseType} release. Please use with caution.`,
`color: #f26222;`,
);
}

// eslint-disable-next-line no-console
console.info(
'%cReport a Bug, Issue or Feature Request - https://github.com/videojs/v10/issues/new/choose',
'color: #aaa; font-size: .9em;',
);
// eslint-disable-next-line no-console
console.info(
'%cReach out on Discord - https://discord.gg/JBqHh485uF',
'color: #aaa; font-size: .9em;',
);
}