Add primaryColor prop 🎨

Removing tsdx lint since it's currently broken, and adding a clean
script to clear files that prettier shouldn't be concerned with.

package.json

@@ -22,7 +22,7 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "clean": "rm -rf ./dist && rm -rf ./example/.cache && rm -rf ./example/dist",
     "prepare": "tsdx build",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -33,7 +33,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn prettier && tsdx lint"
+      "pre-commit": "yarn clean && yarn prettier"
     }
   },
   "author": "Kevin Kipp",

src/Stream.tsx

@@ -96,6 +96,7 @@ export const StreamEmbed: FC<StreamProps> = ({
   autoplay = false,
   loop = false,
   preload = "metadata",
+  primaryColor,
   defaultTextTrack,
   height,
   width,
@@ -149,6 +150,7 @@ export const StreamEmbed: FC<StreamProps> = ({
     autoplay,
     controls,
     poster,
+    primaryColor,
     adUrl,
     defaultTextTrack,
   });
@@ -160,6 +162,7 @@ export const StreamEmbed: FC<StreamProps> = ({
   useProperty("currentTime", ref, currentTime);
   useProperty("loop", ref, loop);
   useProperty("preload", ref, preload);
+  useProperty("primaryColor", ref, primaryColor);
   useProperty("volume", ref, volume);
 
   // instantiate API after properties are bound because we want undefined

src/types.ts

@@ -64,6 +64,10 @@ export interface StreamPlayerApi {
    * The <video> element does not force the browser to follow the value of this attribute; it is a mere hint. Even though the preload="none" option is a valid HTML5 attribute, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligable.
    */
   preload: Preload;
+  /**
+   * Any valid CSS color provided will be applied to certain elements of the player's UI.
+   */
+  primaryColor?: string;
   /**
    * Unsubscribe from events
    */
@@ -140,6 +144,10 @@ export interface StreamProps {
    * The <video> element does not force the browser to follow the value of this attribute; it is a mere hint. Even though the preload="none" option is a valid HTML5 attribute, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligable.
    */
   preload?: Preload;
+  /**
+   * Any valid CSS color provided will be applied to certain elements of the player's UI.
+   */
+  primaryColor?: string;
   /**
    * Automatically manages the aspect ratio of the iframe for you. Defaults to true. If you want to manually handle the styles yourself, set this to false.
    */

src/useIframeSrc.tsx

@@ -7,6 +7,7 @@ interface IframeSrcOptions {
   autoplay?: boolean;
   controls?: boolean;
   poster?: string;
+  primaryColor?: string;
   adUrl?: string;
   defaultTextTrack?: string;
   preload?: Preload;
@@ -21,6 +22,7 @@ export function useIframeSrc(
     autoplay,
     controls,
     poster,
+    primaryColor,
     adUrl,
     defaultTextTrack,
   }: IframeSrcOptions
@@ -30,6 +32,7 @@ export function useIframeSrc(
     adUrl && `ad-url=${encodeURIComponent(adUrl)}`,
     defaultTextTrack &&
       `defaultTextTrack=${encodeURIComponent(defaultTextTrack)}`,
+    primaryColor && `primaryColor=${encodeURIComponent(primaryColor)}`,
     muted && "muted=true",
     preload && `preload=${preload}`,
     loop && "loop=true",