feat: add console banner (#186)

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<CustomElement & HTMLElement> = ProviderMixin(HTMLElement);
 
 export class VideoProviderElement extends ProviderHTMLElement {

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(), []);
 

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';

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;',
+  );
+}