@applicaster/quick-brick-player 12.0.0-alpha.9151207838 → 12.0.0-alpha.9262886003

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.9151207838",
+  "version": "12.0.0-alpha.9262886003",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,11 +36,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-alpha.9151207838",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-alpha.9262886003",
     "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.9151207838",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.9151207838",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.9151207838",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.9262886003",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.9262886003",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.9262886003",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/CellPlayer/Assets/AssetsComponent.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Image, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { MUTED_USAGE } from "../const";
 import { LiveImageManager } from "@applicaster/zapp-react-native-ui-components/Components/VideoLive/LiveImageManager";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
 type Asset = string | undefined;
 

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -17,8 +17,6 @@ import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Comp
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
-import { addQueryParam, getLiveUrl } from "../Utils";
-import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 import {
   formatSpeed,
   hasDatePassed,
@@ -26,6 +24,8 @@ import {
   NAMESPACE,
 } from "./utils";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { getLiveUrl } from "../Utils";
+import { useTitleSummaryOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerTitleSummaryOverlay";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -145,6 +145,17 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
+  // TODO: Have generic place for live url from configuration. Currently its hardcoded for client.
+
+  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
+
+  const { title, summary } = useTitleSummaryOverlay(
+    feedUrl,
+    entry,
+    playerState?.isLive,
+    configuration?.audio_live_player_update_interval
+  );
+
   const [playbackSpeed, setPlaybackSpeed] = useState({
     asset: configuration["speed_1"],
     value: 1.0,
@@ -157,15 +168,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const [sleepTimerDate, setSleepTimerDate] = useState(0);
 
-  const feedUrl = getLiveUrl(entry?.extensions?.live?.channel_src ?? "");
-
-  const { title, summary } = useTitleSummaryOverlay(
-    feedUrl,
-    entry,
-    playerState?.isLive,
-    configuration?.audio_live_player_update_interval || 60
-  );
-
   const [dimensions, setDimensions] = React.useState<Dimensions>({
     width: 0,
     height: 0,
@@ -193,7 +195,6 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
 
     setSleepTimerDate(0);
-    player?.pause();
 
     await localStorage.removeItem("sleep", NAMESPACE);
   };
@@ -454,15 +455,17 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   if (configuration.magic_background) {
     const baseUrl = entry?.extensions?.audio_player_background_image ?? "";
 
-    const queryParamName =
-      configuration.audio_player_background_image_query || "width";
-
-    const queryParamValue = 10;
+    // TODO: To be added when background is ready
 
-    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+    // const queryParamName =
+    //   configuration.audio_player_background_image_query || "width";
+    //
+    // const queryParamValue = 15;
+    //
+    // const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
 
     return (
-      <MagicBG image={url} fallbackUrl={baseUrl} defaultColor="#000000">
+      <MagicBG image={baseUrl} fallbackUrl={baseUrl} defaultColor="#000000">
         {MainContent}
       </MagicBG>
     );

package/src/Player/AudioLayer/Layout/DefaultLayout.tsx

@@ -11,7 +11,7 @@ import {
 
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   forwardButton,
   playbackButton,
@@ -251,7 +251,7 @@ export default function DefaultLayout(props: LayoutProps) {
 
       // Setting up an interval to update the remaining time every second
       const intervalId = setInterval(() => {
-        setTimeLeft((prevTimeLeft) => {
+        setTimeLeft(() => {
           const newTimeLeft = sleepTimerDate - Date.now();
 
           // If the new remaining time is less than or equal to 0, clear the interval and trigger the cancelSleepTimer function

package/src/Player/AudioLayer/Layout/DockedLayout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import {
   StyleSheet,
   TouchableWithoutFeedback,
@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from "react-native";
 import * as R from "ramda";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
   ContentInfo,
@@ -202,9 +202,7 @@ export default function DockedLayout(props: LayoutProps) {
     summary,
   } = props;
 
-  const {
-    deviceInfo: { isTablet },
-  } = useDimensions("screen", { deviceInfo: true });
+  const isTablet = useIsTablet();
 
   const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));

package/src/Player/index.tsx

@@ -1011,10 +1011,12 @@ export default class VideoPlayer extends React.Component<
       inline,
       docked,
       isModal,
+      pip: this.state.piped,
       layoutState: {
         inline,
         docked,
         isModal,
+        pip: this.state.piped,
       },
       configuration: this.getPluginConfiguration(),
       fullscreen: fullscreen,
@@ -1091,6 +1093,7 @@ export default class VideoPlayer extends React.Component<
                       listener={this.props.listener}
                       style={getStyle(playerDimensions)}
                       pluginConfiguration={this.getPluginConfiguration()}
+                      controller={this.props.controller}
                     >
                       {this.childrenWithPlayNext()}
                     </this.props.PlayerComponent>
@@ -1127,6 +1130,7 @@ export default class VideoPlayer extends React.Component<
             listener={this.props.listener}
             style={this.takeParentStyle}
             pluginConfiguration={this.getPluginConfiguration()}
+            controller={this.props.controller}
           >
             {this.childrenWithPlayNext()}
           </this.props.PlayerComponent>