diff --git a/packages/html/src/media/video-provider.ts b/packages/html/src/media/video-provider.ts index 9f13f776..902d71a4 100644 --- a/packages/html/src/media/video-provider.ts +++ b/packages/html/src/media/video-provider.ts @@ -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 { printConsoleBanner } from '@videojs/utils'; +import { version } from '../../package.json'; + +printConsoleBanner(version); + const ProviderHTMLElement: Constructor = ProviderMixin(HTMLElement); export class VideoProviderElement extends ProviderHTMLElement { diff --git a/packages/react/src/store/video-provider.tsx b/packages/react/src/store/video-provider.tsx index 2fe4fc77..f9da0f14 100644 --- a/packages/react/src/store/video-provider.tsx +++ b/packages/react/src/store/video-provider.tsx @@ -3,9 +3,14 @@ import type { ReactNode } from 'react'; import { createMediaStore } from '@videojs/core/store'; +import { printConsoleBanner } from '@videojs/utils'; import { useMemo } from 'react'; + +import { version } from '../../package.json'; import { MediaContext } from './context'; +printConsoleBanner(version); + export function VideoProvider({ children }: { children: ReactNode }): JSX.Element { const value = useMemo(() => createMediaStore(), []); diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index c7a0ea96..2401887b 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,3 +1,4 @@ +export * from './shared/console'; export * from './shared/crypto'; export * from './shared/state'; export * from './shared/time'; diff --git a/packages/utils/src/shared/console.ts b/packages/utils/src/shared/console.ts new file mode 100644 index 00000000..43ae2f63 --- /dev/null +++ b/packages/utils/src/shared/console.ts @@ -0,0 +1,34 @@ +export function printConsoleBanner(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; + if (prereleaseType) { + 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;', + ); +}