@applicaster/zapp-react-native-utils 12.0.0-alpha.9453522405 → 12.0.0-alpha.9563554781

package/appUtils/keyCodes/__tests__/keyCodes.test.js

@@ -1,3 +1,7 @@
+const { Platform } = require("react-native");
+
+Platform.OS = "web";
+
 import { directionHelper } from "../../directionHelper";
 
 const globalTizen = {
@@ -6,105 +10,96 @@ const globalTizen = {
   },
 };
 
-jest.mock("react-native", () => {
-  return { Platform: { OS: "web" } };
-});
-
-describe("keyCode", () => {
-  const { keyCode } = require("../index");
-  const { KEYS } = require("../keys.web");
-
-  it("returns an object for a given key event", () => {
-    expect(keyCode(KEYS.Enter)).toMatchSnapshot();
-  });
-
-  it("has a matcher method for a single key", () => {
-    expect(keyCode(KEYS.Enter).matches("Enter")).toBeTruthy();
-    expect(keyCode(KEYS.Enter).matches(KEYS.Enter)).toBeTruthy();
-    expect(keyCode(KEYS.Back).matches("Enter")).toBeFalsy();
-  });
-
-  it("has matcher for multiple keys", () => {
-    expect(
-      keyCode(KEYS.Enter).matchesAny("Enter", "Back", "ArrowUp")
-    ).toBeTruthy();
+describe("keyCodes", () => {
+  describe("keyCode", () => {
+    const { keyCode } = require("..");
+    const { KEYS } = require("../keys.web");
 
-    expect(
-      keyCode(KEYS.Enter).matchesAny("Back", "ArrowUp", "ArrowDown")
-    ).toBeFalsy();
-  });
+    it("returns an object for a given key event", () => {
+      expect(keyCode(KEYS.Enter)).toMatchSnapshot();
+    });
 
-  it("returns the direction if it matches an arrow key", () => {
-    expect(keyCode(KEYS.Enter).direction()).toBe(null);
+    it("has a matcher method for a single key", () => {
+      expect(keyCode(KEYS.Enter).matches("Enter")).toBeTruthy();
+      expect(keyCode(KEYS.Enter).matches(KEYS.Enter)).toBeTruthy();
+      expect(keyCode(KEYS.Back).matches("Enter")).toBeFalsy();
+    });
 
-    expect(keyCode(KEYS.ArrowDown).direction()).toEqual(
-      directionHelper(KEYS.ArrowDown)
-    );
-  });
+    it("has matcher for multiple keys", () => {
+      expect(
+        keyCode(KEYS.Enter).matchesAny("Enter", "Back", "ArrowUp")
+      ).toBeTruthy();
 
-  describe("in web env", () => {
-    it("uses the proper keyCode for the environment", () => {
-      expect(keyCode({ keyCode: 13 }).matches(KEYS.Enter)).toBeTruthy();
+      expect(
+        keyCode(KEYS.Enter).matchesAny("Back", "ArrowUp", "ArrowDown")
+      ).toBeFalsy();
     });
-  });
-});
 
-describe("in Tizen Env", () => {
-  jest.mock("react-native", () => {
-    return { Platform: { OS: "samsung_tv" } };
-  });
+    it("returns the direction if it matches an arrow key", () => {
+      expect(keyCode(KEYS.Enter).direction()).toBe(null);
 
-  beforeEach(() => {
-    global.tizen = globalTizen;
-    jest.resetModules();
-  });
+      expect(keyCode(KEYS.ArrowDown).direction()).toEqual(
+        directionHelper(KEYS.ArrowDown)
+      );
+    });
 
-  afterEach(() => {
-    global.tizen = undefined;
+    describe("in web env", () => {
+      it("uses the proper keyCode for the environment", () => {
+        expect(keyCode({ keyCode: 13 }).matches(KEYS.Enter)).toBeTruthy();
+      });
+    });
   });
 
-  it("uses the proper keyCode for the environment", () => {
-    const { keyCode } = require("../index");
-    const { KEYS } = require("../keys.web");
+  describe("in Tizen Env", () => {
+    beforeEach(() => {
+      jest.resetModules();
+      global.tizen = globalTizen;
+    });
 
-    expect(globalTizen.tvinputdevice.registerKeyBatch).toHaveBeenCalledWith([
-      "Back",
-      "MediaPlay",
-      "MediaPlayPause",
-      "MediaPause",
-      "MediaFastForward",
-      "MediaRewind",
-      "MediaStop",
-      "Exit",
-      "0",
-      "1",
-      "2",
-      "3",
-      "4",
-      "5",
-      "6",
-      "7",
-      "8",
-      "9",
-    ]);
-
-    expect(keyCode({ keyCode: 10009 }).matches(KEYS.Back)).toBeTruthy();
-  });
-});
+    afterEach(() => {
+      global.tizen = undefined;
+    });
 
-describe("in WebOS Env", () => {
-  jest.mock("react-native", () => {
-    return { Platform: { OS: "lg_tv" } };
+    it("uses the proper keyCode for the environment", () => {
+      Platform.OS = "samsung_tv";
+      const { keyCode } = require("../");
+      const { KEYS } = require("../keys.web");
+
+      expect(globalTizen.tvinputdevice.registerKeyBatch).toHaveBeenCalledWith([
+        "MediaPlay",
+        "MediaPlayPause",
+        "MediaPause",
+        "MediaFastForward",
+        "MediaRewind",
+        "MediaStop",
+        "Exit",
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+      ]);
+
+      expect(keyCode({ keyCode: 10009 }).matches(KEYS.Back)).toBeTruthy();
+    });
   });
 
-  beforeEach(() => {
-    jest.resetModules();
-  });
+  describe("in WebOS Env", () => {
+    beforeEach(() => {
+      jest.resetModules();
+    });
 
-  it("uses the proper keyCode for the environment", () => {
-    const { keyCode } = require("../index");
-    const { KEYS } = require("../keys.web");
-    // Back is reserved on LG
-    expect(keyCode({ keyCode: 417 }).matches(KEYS.Forward)).toBeTruthy();
+    it("uses the proper keyCode for the environment", () => {
+      Platform.OS = "lg_tv";
+      const { keyCode } = require("..");
+      const { KEYS } = require("../keys.web");
+      // Back is reserved on LG
+      expect(keyCode({ keyCode: 417 }).matches(KEYS.Forward)).toBeTruthy();
+    });
   });
 });

package/appUtils/keyCodes/keys.web.js

@@ -1,5 +1,7 @@
 /* global tizen */
 const isTizen = typeof tizen !== "undefined";
+
+import { isVizioPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import * as platformKeys from "./keysByPlatform";
 import { Platform } from "react-native";
 
@@ -20,6 +22,13 @@ export const ARROW_KEYS = [
   KEYS.ArrowRight,
 ];
 
+/**
+ * Platform.OS currently identifies Vizio as LG_TV, therefore we are using isVizioPlatform to identify platform and add keys.
+ */
+if (isVizioPlatform()) {
+  Object.assign(KEYS, platformKeys.vizio);
+}
+
 /**
  * In TizenOS we need to register all of the keys that we are going to use.
  * You need to register using the name Tizen has for the key.

package/appUtils/keyCodes/keysByPlatform.js

@@ -102,4 +102,14 @@ const tvos = {
   Menu: { code: "Menu", eventType: "menu" },
 };
 
-export { lg_tv, samsung_tv, web, tvos, android_tv };
+const vizio = {
+  ...samsung_tv,
+  Exit: { code: "Exit", keyCode: 27 },
+  PageUp: { code: "PageUp", keyCode: 33 },
+  PageDown: { code: "PageDown", keyCode: 34 },
+  MediaTrackNext: { code: "MediaTrackNext", keyCode: 418 },
+  MediaTrackPrevious: { code: "MediaTrackPrevious", keyCode: 419 },
+  PrevCh: { code: "PrevCh", keyCode: 500 },
+};
+
+export { lg_tv, samsung_tv, web, tvos, android_tv, vizio };

package/appUtils/orientationHelper.ts

@@ -2,6 +2,7 @@
 import * as ReactNative from "react-native";
 import { isTV, platformSelect } from "../reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
   QUICK_BRICK_EVENTS,
@@ -9,7 +10,6 @@ import {
   sendQuickBrickEvent,
 } from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { utilsLogger } from "../logger";
-import { useIsTablet } from "../reactHooks/device/useIsTablet";
 
 const { DeviceEventEmitter, NativeModules, NativeEventEmitter } = ReactNative;
 

package/appUtils/platform/const.ts

@@ -0,0 +1,18 @@
+/**
+ * Platforms found in userAgent string, please note that simulators
+ * might not have the same agents that the devices have
+ */
+export const PLATFORMS = {
+  webos: "Web0S",
+  tizen: "Tizen",
+  samsung: "SMART-TV",
+  mac: "Mac",
+  win: "Win",
+  linux: "Linux",
+  iphone: "iPhone",
+  android: "Android",
+  mobile: "Mobile",
+  vizio: "VIZIO",
+  smartcast: "SmartCast",
+  conjure: "Conjure",
+};

package/appUtils/platform/index.ts

@@ -0,0 +1 @@
+export * from "./platformUtils";

package/appUtils/platform/platformUtils.ts

@@ -0,0 +1 @@
+export {};

package/appUtils/platform/platformUtils.web.ts

@@ -0,0 +1,49 @@
+import { PLATFORMS } from "./const";
+
+declare global {
+  interface Window {
+    applicaster: {
+      vizioLibraryDidLoad: boolean;
+      useOnScreenKeyboard: boolean;
+    };
+    VIZIO?: {
+      exitApplication: () => void;
+      setClosedCaptionHandler: (
+        callback: (isCCEnabled: boolean) => void
+      ) => void;
+    };
+  }
+}
+
+export const getUserAgent = () =>
+  window?.navigator?.userAgent || global?.navigator?.userAgent;
+
+/**
+ * Checks if we are on the Vizio platform by using the userAgent string
+ *
+ * Use this method when you need to identify the platform on runtime
+ * before the VIZIO Companion Library has loaded
+ */
+export const isVizioPlatform = () => {
+  const userAgent = getUserAgent();
+
+  const isVizioAgent =
+    userAgent.includes(PLATFORMS.vizio) ||
+    userAgent.includes(PLATFORMS.smartcast) ||
+    userAgent.includes(PLATFORMS.conjure);
+
+  return isVizioAgent;
+};
+
+/**
+ * Checks if we are on the Vizio platform by checking for the global VIZIO object
+ * and the VIZIO Companion Library. This method does not use the userAgent string,
+ * because it mainly checks whether we have access to apis, which may not be available yet
+ */
+export const hasVizioAPIs = () => {
+  const hasAPIs =
+    typeof window.VIZIO !== "undefined" &&
+    window?.applicaster?.vizioLibraryDidLoad;
+
+  return hasAPIs;
+};

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -41,6 +41,11 @@ export type ChapterMarkerEvent = {
   actions: ActionChapter[];
 };
 
+export type TitleSummaryEvent = {
+  title: string | number;
+  summary: string | number;
+};
+
 type ChapterMarkersObserverProps = {
   player: Player;
 };
@@ -60,6 +65,11 @@ export type PlayNextState = PlayNextConfig & {
 export class OverlaysObserver {
   readonly chapterSubject: BehaviorSubject<ChapterMarkerEvent>;
   private playNextSubject: BehaviorSubject<PlayNextState>;
+  private titleSummarySubject: BehaviorSubject<TitleSummaryEvent>;
+  private feedUrl: string;
+  private reloadData: () => void;
+  private updateTitleAndDescription: (data: any) => void;
+  private feedDataInterval: any;
   private releasePlayerObserver?: () => void;
   readonly entry: ZappEntry;
   private chapterMarkerEvents: ChapterMarkerEvent[];
@@ -70,14 +80,55 @@ export class OverlaysObserver {
   constructor({ player }: ChapterMarkersObserverProps) {
     this.chapterSubject = new BehaviorSubject(null);
     this.playNextSubject = new BehaviorSubject(null);
+
+    this.titleSummarySubject = new BehaviorSubject<TitleSummaryEvent>({
+      title: player.getEntry()?.title || "",
+      summary: player.getEntry()?.summary || "",
+    });
+
     this.entry = player.getEntry();
     this.player = player;
 
     this.chapterMarkerEvents = this.prepareChapterMarkers();
     this.releasePlayerObserver = this.subscribeToPlayerEvents();
+    this.feedUrl = "";
+    this.reloadData = () => {};
+    this.updateTitleAndDescription = () => {};
+    this.feedDataInterval = null;
     void this.preparePlayNext();
   }
 
+  private setupFeedDataInterval(interval: number) {
+    if (this.feedUrl && this.reloadData && this.updateTitleAndDescription) {
+      this.feedDataInterval = setInterval(() => {
+        this.reloadData();
+      }, interval * 1000);
+    }
+  }
+
+  public clearFeedDataInterval() {
+    if (this.feedDataInterval) {
+      clearInterval(this.feedDataInterval);
+      this.feedDataInterval = null;
+    }
+  }
+
+  public setFeedDataHandlers(
+    feedUrl: string,
+    reloadData: () => void,
+    interval: number,
+    updateTitleAndDescription: (data: any) => void
+  ) {
+    this.feedUrl = feedUrl;
+    this.reloadData = reloadData;
+    this.updateTitleAndDescription = updateTitleAndDescription;
+    this.setupFeedDataInterval(interval);
+  }
+
+  public getTitleSummaryObservable(): Observable<TitleSummaryEvent> {
+    return this.titleSummarySubject.asObservable().pipe(distinctUntilChanged());
+  }
+
   handleUserCancelPlayNext = () => {
     this.isCanceledByUser = true;
     this.playNextSubject.next(null);
@@ -281,7 +332,9 @@ export class OverlaysObserver {
   onPlayerClose = () => {
     this.chapterSubject.complete();
     this.playNextSubject.complete();
+    this.titleSummarySubject.complete();
     this.releasePlayerObserver?.();
+    this.clearFeedDataInterval();
     this.releasePlayerObserver = null;
   };
 

package/appUtils/playerManager/conts.ts

@@ -20,6 +20,11 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerMute = "onPlayerMute",
   OnPlayerUnmute = "onPlayerUnmute",
 
+  onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
+  onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
+  onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
+  onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
+
   OnAdBegin = "onAdBegin",
   OnAdBreakBegin = "onAdBreakBegin",
   OnAdBreakEnd = "onAdBreakEnd",

package/appUtils/playerManager/index.ts

@@ -11,6 +11,7 @@ import {
 } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
 import { setUserLanguagePreference } from "./userLanguagePreference";
 import { PlayerRole } from "./conts";
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const { log_error, log_debug, log_warning } = createLogger({
   category: "General",
@@ -164,6 +165,10 @@ export class PlayerManager {
     this.addPlayer(id, playerController);
 
     if (playerController.playerRole === PlayerRole.Primary) {
+      if (playerController.playerPluginId !== "QuickBrickPlayerPlugin") {
+        RNPlayerManager?.["QuickBrickPlayerPlugin"]?.stopBackgroundPlayback?.();
+      }
+
       playerController.addListener({
         id: this.getPlayerListenerId(id),
         listener: {
@@ -461,6 +466,7 @@ export class PlayerManager {
     if (this.castingReceiver) {
       this.castingReceiver.closeNativePlayer();
     } else {
+      this.getActivePlayer().closeNativePlayer();
       this.invokeHandler("close");
     }
   }

package/appUtils/playerManager/nativePlayerManager.ts

@@ -0,0 +1,12 @@
+import { NativeModules } from "react-native";
+import { isApplePlatform } from "../../reactUtils";
+
+export const RNPlayerManager = {
+  QuickBrickPlayerPlugin: isApplePlatform()
+    ? NativeModules.PlayerModule
+    : NativeModules.QuickBrickDefaultPlayerModule,
+  KalturaPlayerPlugin: isApplePlatform()
+    ? NativeModules.KalturaPlayerModule
+    : NativeModules.QBKalturaPlayerModule,
+  "quick-brick-player-brightcove": NativeModules.BrightcovePlayerModule,
+};

package/appUtils/playerManager/player.ts

@@ -42,7 +42,7 @@ export class Player {
 
   protected startPosition?: number | null;
   readonly playerRole: PlayerRole = PlayerRole.Unspecified;
-  private chaptersObserver?: OverlaysObserver | null;
+  private overlaysObserver?: OverlaysObserver | null;
   private entryObservable?: BehaviorSubject<ZappEntry> | null;
 
   protected listeners: {
@@ -95,11 +95,11 @@ export class Player {
   }
 
   getOverlayObservable = () => {
-    if (!this.chaptersObserver) {
-      this.chaptersObserver = new OverlaysObserver({ player: this });
+    if (!this.overlaysObserver) {
+      this.overlaysObserver = new OverlaysObserver({ player: this });
     }
 
-    return this.chaptersObserver;
+    return this.overlaysObserver;
   };
 
   getEntryObservable = (): BehaviorSubject<ZappEntry | null> => {
@@ -278,6 +278,10 @@ export class Player {
     return this.playerState.isBuffering;
   };
 
+  isReadyToPlay = (): boolean => {
+    return this.playerState.isReadyToPlay;
+  };
+
   // Methods to call actions on the player
   seekTo = (_position: number) => {};
 
@@ -410,6 +414,32 @@ export class Player {
     });
   };
 
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillPresent,
+    });
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidPresent,
+    });
+  };
+
   public invokeListenersUpdate = ({
     callbackName,
     event = {},
@@ -630,6 +660,12 @@ export class Player {
     onBufferStart: this.onBufferStart,
     onBufferComplete: this.onBufferComplete,
 
+    onPlayerClose: this.onPlayerClose,
+    onVideoFullscreenPlayerWillPresent: this.onVideoFullscreenPlayerWillPresent,
+    onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+    onVideoFullscreenPlayerWillDismiss: this.onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+
     // Ads Callbacks:
     onAdBegin: this.onAdBegin,
     onAdBreakBegin: this.onAdBreakBegin,
@@ -652,6 +688,10 @@ export class Player {
     _selected?: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {};
 
+  setPlaybackRate = (_rate) => {};
+  startSleepTimer = (_timestamp) => {};
+  cancelSleepTimer = () => {};
+
   getPluginConfiguration = () => null;
   appStateChange = (_appState, _previousAppState) => {};
 
@@ -685,4 +725,7 @@ export class Player {
   isFullScreenSupported(): boolean {
     return true;
   }
+
+  public supportsNativeControls = (): boolean => false;
+  public supportNativeCast = (): boolean => false;
 }

package/appUtils/playerManager/playerFactory.ts

@@ -1,17 +1,31 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { Player } from "./player";
+import { PlayerRole } from "./conts";
 
 type PlayerFactoryItem = {
   Component: any;
   controller: Player;
 };
 
+type PlayerFactoryProps = {
+  player: any;
+  playerId: string;
+  autoplay: boolean;
+  entry: ZappEntry;
+  muted: boolean;
+  playerPluginId: string;
+  screenConfig: Record<string, any>;
+  playerRole: PlayerRole;
+};
+
 interface PlayerConstructor {
   new (params: any): Player;
 }
 
-export const playerFactory = (config: any): PlayerFactoryItem | null => {
+export const playerFactory = (
+  config: PlayerFactoryProps
+): PlayerFactoryItem | null => {
   const IDENTIFIER = config?.playerPluginId;
 
   if (!IDENTIFIER) {

package/appUtils/playerManager/playerNative.ts

@@ -2,18 +2,10 @@ import * as R from "ramda";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { Player } from "./player";
-import { findNodeHandle, NativeModules } from "react-native";
-import { isApplePlatform } from "../../reactUtils";
+import { findNodeHandle } from "react-native";
 import { PlayerRole } from "./conts";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import { toBooleanWithDefaultFalse } from "../../booleanUtils";
+import { RNPlayerManager } from "./nativePlayerManager";
 
 const logger = createLogger({
   category: "PlayerNativeController",
@@ -41,6 +33,9 @@ const PlayerModuleFuncNames = {
   rewind: "rewind",
   play: "play",
   pause: "pause",
+  startSleepTimer: "startSleepTimer",
+  cancelSleepTimer: "cancelSleepTimer",
+  getSleepTimerEnd: "getSleepTimerEnd",
 };
 
 export class PlayerNative extends Player {
@@ -107,7 +102,7 @@ export class PlayerNative extends Player {
       return;
     }
 
-    const newPosition = R.clamp(0, position, this.playerState.seekableDuration);
+    const newPosition = R.clamp(0, this.playerState.seekableDuration, position);
 
     if (
       !this.invokeNativeFunction(
@@ -172,6 +167,25 @@ export class PlayerNative extends Player {
     }
   };
 
+  startSleepTimer = (sleepTimestamp: number) => {
+    if (
+      !this.invokeNativeFunction(
+        PlayerModuleFuncNames.startSleepTimer,
+        sleepTimestamp
+      )
+    ) {
+      this.currentPlayerComponent()?.["startSleepTimer"](sleepTimestamp);
+    }
+  };
+
+  cancelSleepTimer = () => {
+    if (!this.invokeNativeFunction(PlayerModuleFuncNames.cancelSleepTimer)) {
+      this.currentPlayerComponent()?.[
+        PlayerModuleFuncNames.cancelSleepTimer
+      ]?.();
+    }
+  };
+
   disableBufferAnimation = (): boolean => false;
 
   setLanguage = (
@@ -180,6 +194,10 @@ export class PlayerNative extends Player {
     this.currentPlayerComponent()?.["setLanguage"]?.(selected);
   };
 
+  setPlaybackRate = (rate: number) => {
+    this.currentPlayerComponent()?.["setPlaybackRate"]?.(rate);
+  };
+
   getPluginConfiguration = () => {
     return (this.currentPlayerComponent() as any)?.props?.pluginConfiguration;
   };
@@ -265,4 +283,12 @@ export class PlayerNative extends Player {
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
+
+  supportsNativeControls = (): boolean =>
+    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+
+  supportNativeCast = (): boolean =>
+    toBooleanWithDefaultFalse(
+      this.playerPluginId === "quick-brick-player-brightcove"
+    );
 }