Add missing sdk apis (#59)

* Add missing player SDK apis

* Add letterboxColor API support

README.md

@@ -71,6 +71,11 @@ export type StreamProps = {
    * A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced.
    */
   muted?: boolean;
+  /**
+   * Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  letterboxColor?: string;
   /**
    * A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
    */

src/Stream.tsx

@@ -98,6 +98,7 @@ export const StreamEmbed: FC<StreamProps> = ({
   loop = false,
   preload = "metadata",
   primaryColor,
+  letterboxColor,
   defaultTextTrack,
   height,
   width,
@@ -153,6 +154,7 @@ export const StreamEmbed: FC<StreamProps> = ({
     controls,
     poster,
     primaryColor,
+    letterboxColor,
     adUrl,
     defaultTextTrack,
     startTime,
@@ -171,6 +173,7 @@ export const StreamEmbed: FC<StreamProps> = ({
   useProperty("loop", ref, loop);
   useProperty("preload", ref, preload);
   useProperty("primaryColor", ref, primaryColor);
+  useProperty("letterboxColor", ref, letterboxColor);
   useProperty("volume", ref, volume);
 
   // instantiate API after properties are bound because we want undefined

src/types.ts

@@ -30,6 +30,10 @@ export interface StreamPlayerApi {
    * In addition, some browsers now prevent videos with audio from playing automatically. You may add the mute attribute to allow your videos to autoplay. For more information, [go here](https://webkit.org/blog/6784/new-video-policies-for-ios/).
    */
   autoplay: boolean;
+  /**
+   * An object conforming to the TimeRanges interface. This object is normalized, which means that ranges are ordered, don’t overlap, aren’t empty, and don’t touch (adjacent ranges are folded into one bigger range).
+   */
+  buffered: TimeRanges;
   /**
    * Shows the default video controls such as buttons for play/pause, volume controls. You may choose to build buttons and controls that work with the player. If you hide controls, you may choose to build custom buttons and controls that work with the player.
    */
@@ -38,6 +42,19 @@ export interface StreamPlayerApi {
    * Returns the current playback time in seconds. Setting this value seeks the video to a new time.
    */
   currentTime: number;
+  /**
+   * The read-only HTMLMediaElement property duration indicates the length of the element's media in seconds.
+   */
+  duration: number;
+  /**
+   * Indicates whether the media element has ended playback..
+   */
+  ended: boolean;
+  /**
+   * Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  letterboxColor?: string;
   /**
    * A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
    */
@@ -50,10 +67,18 @@ export interface StreamPlayerApi {
    * Pause the video
    */
   pause: () => void;
+  /**
+   * Returns whether the video is paused
+   */
+  paused: boolean;
   /**
    * Attempts to play the video. Returns a promise that will resolve if playback begins successfully, and rejects if it fails. The most common reason for this to fail is browser policies which prevent unmuted playback that is not initiated by the user.
    */
   play: () => Promise<void>;
+  /**
+   * An object conforming to the TimeRanges interface. This object is normalized, which means that ranges are ordered, don’t overlap, aren’t empty, and don’t touch (adjacent ranges are folded into one bigger range).
+   */
+  played: TimeRanges;
   /**
    * A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn’t specified, a thumbnail image of the video is shown.
    */
@@ -127,6 +152,11 @@ export interface StreamProps {
    * The height of the video’s display area, in CSS pixels.
    */
   height?: string;
+  /**
+   * Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  letterboxColor?: string;
   /**
    * A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
    */

src/useIframeSrc.tsx

@@ -8,6 +8,7 @@ interface IframeSrcOptions {
   controls?: boolean;
   poster?: string;
   primaryColor?: string;
+  letterboxColor?: string;
   startTime?: string | number;
   adUrl?: string;
   defaultTextTrack?: string;
@@ -24,6 +25,7 @@ export function useIframeSrc(
     controls,
     poster,
     primaryColor,
+    letterboxColor,
     adUrl,
     startTime,
     defaultTextTrack,
@@ -35,6 +37,7 @@ export function useIframeSrc(
     defaultTextTrack &&
       `defaultTextTrack=${encodeURIComponent(defaultTextTrack)}`,
     primaryColor && `primaryColor=${encodeURIComponent(primaryColor)}`,
+    letterboxColor && `letterboxColor=${encodeURIComponent(letterboxColor)}`,
     startTime && `startTime=${startTime}`,
     muted && "muted=true",
     preload && `preload=${preload}`,