@applicaster/zapp-react-native-ui-components 14.0.0-alpha.8387612031 → 14.0.0-alpha.9119252693

package/Components/AudioPlayer/tv/__tests__/__snapshots__/Runtime.test.js.snap

@@ -4,13 +4,13 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
 <View
   style={
     {
-      "height": 40,
       "justifyContent": "flex-start",
       "width": 600,
     }
   }
 >
   <Text
+    numberOfLines={1}
     style={
       {
         "alignItems": "flex-end",
@@ -33,13 +33,13 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
 <View
   style={
     {
-      "height": 40,
       "justifyContent": "flex-end",
       "width": 600,
     }
   }
 >
   <Text
+    numberOfLines={1}
     style={
       {
         "alignItems": "flex-start",

package/Components/AudioPlayer/tv/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -30,10 +30,15 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
   />
   <View
     style={
-      {
-        "backgroundColor": "transparent",
-        "overflow": "hidden",
-      }
+      [
+        {
+          "backgroundColor": "transparent",
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+        },
+      ]
     }
   >
     <View
@@ -48,7 +53,7 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
         resizeMode="cover"
         source={
           {
-            "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABwgAAAP0CAYAAAC+jGj3AAAxj0lEQVR4AezdIWyd59nH4af9piKXbKAOGXJQpShGJTYacXisSUOxIo1FQZNmBWyaFCXSVBCltHLQpMpGIzYasVFJjUpiVJKgEhuN9Nv9tk7bKI59nnOOfY7/1yW9Ou2aej7PW/bTfT8f3Lp164cGAAAAAAAARPiwAQAAAAAAADEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAAAAAAAAQRCAEAAAAAACAIAIhAAAAAAAABBEIAQAAAAAAIIhACAAAAAAAAEEEQgAAAAAAAAgiEAIAAAAAAEAQgRAAAAAAAACCCIQAADQAAAAAcgiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAA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Odi7UrXWiT59+nTkVaqn72ReVrACAADMAoEQAADggmqt6DjTao8ePeoOWbW6c9bV/YA96kxrZWiv07WkAAAAXIxACAAAcAE1/TfOmtBScXB7e7v16I1vl6l3enDc8FoODg66JzQBAADSCIQAAAAX0Bv23lb35vVMEdb6zll38+bNNqoKg+OG11MVGgEAADifQAgAAHCOCno1oTapn1X37Y2qJ75dtp6I+fLlyzYpR0dH7iIEAAC4AIEQAADgHBWervrnLSwstFnXEwgnuRa04uC4q0oBAAASCIQAAADnOD4+bpPUM+U2D4Gwx6Qn/iY5kQgAAHBdCYQAAADnsLYSAACA60QgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAACc48aNG22SFhYWGtMx6XcFAABwHQmEAABAlJOTkzaqpaWlNkmLi4ttVK9fv26zrud3nPTZ9vy8nv8mAAAA5plACAAAROmJWDXxd/v27TYpq6urbVTzEAh7QlvPWZyl4mDPdOY8nC0AAMAkCYQAAECU3hg0qUBYP6dngvD4+LjNupcvX7ZR1VlM6mzX19dbj6OjowYAAJBEIAQAAKIcHh62HhWfesLe2x48eNB69P7el6k3tG1sbLRx1btZW1trPQRCAAAgjUAIAABEqTWYvWtGHz9+3MZRIaz3zr15CIS9v2NNEI4bCXvfTcVBdxACAABpBEIAACDO/v5+61Fxb3Nzs/W4c+dOu3fvXutRQXMeptzGiW11Nnfv3m096p30htdvvvmmAQAApBEIAQCAOAcHB61XrbH88ssvL7xutCYPa63oX//619arN2hehe3t7darzmmUScJ6B/UueleLlr29vQYAAJDmg1u3bv3QAAAAwjx79mxYbTmOiksVxN413VdhsO4trHg17t2Ff/zjH7vWol6F+q5fffVVG0d9162trWFl6bu+d7231dXV4WzrnHvVe7t//34DAABIIxACAACRKjJVJJyEWqtZsaliVgWrWnc5bhQ8tbu7254+fdrmySTi66nTtaV1tnWmdbbjRMFfevLkiQlCAAAgkkAIAADEmmTImpZ5mh48VRGvVn/OsjrTOlsAAIBE7iAEAABi1RrLWVbrS+ctDpaa+hvnLsLL8OjRowYAAJBKIAQAAGLVHXezGrIqDL548aLNq/rdZzVunnVvJAAAQAqBEAAAiDarIasm3OruvXlVv3vd8Tdr5j28AgAATIJACAAARKuQ9fDhw5mKhM+fP78WE241oVnfZVbUO653Pc/hFQAAYBL+75NPPvl7AwAACFbBqGLWH/7wh/bRRx+1q1T3Iv7rX/9q18W33347fC4vL7erVO/4L3/5S/vuu+8aAABAOoEQAADgf77//vv29ddft88++6wtLCy0q1Bx8Dquv6z4Wq4qEtbkYMVB9w4CAAD8SCAEAAD4SUXCg4ODtrq6eqmRsKbbPv/887azs9Ouq4qE9T0//fTTS53SPF0ranIQAADgZx/cunXrhwYAAMAbFQfv3bvX1tfX27TVVNujR49m6g7EaVpcXGzPnj0bPqdte3t7mMh05yAAAMCvCYQAAABnWFpaao8fP55KzKpoVStFr/PU4PvcvXt3CLDTONuaVqyzPV1tCgAAwK8JhAAAAOdYW1sbYlYFw3FVGKzJtgqD6ZNtFQfrbO/cuTORUCgMAgAAXIxACAAAcEEVCCtoLS8vjxQLKwTW3Ya7u7vi1RlWVlaGZ9T7H2s16/7+/nC+zhYAAOBiBEIAAIAOFbEqEtZT028ff/zxr/75q1evhnhV0SrlfsFJOT3T+rxx48av/tnx8fFwnqdn635BAACA0QmEAAAAAAAAEOTDBgAAAAAAAMQQCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAAAAAAAAggiEAAAAAAAAEEQgBAAAAAAAgCACIQAAAAAAAAQRCAEAAAAAACCIQAgAAAAAAABBBEIAAAAAAAAIIhACAAAAAABAEIEQAADg/9uzAwEAAAAAQf7Wg1waAQAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADAiCAEAAAAAACAEUEIAAAAAAAAI4IQAAAAAAAARgQhAAAAAAAAjAhCAAAAAAAAGBGEAAAAAAAAMCIIAQAAAAAAYEQQAgAAAAAAwIggBAAAAAAAgBFBCAAAAAAAACOCEAAAAAAAAEYEIQAAAAAAAIwIQgAAAAAAABgRhAAAAAAAADAiCAEAAAAAAGBEEAIAAAAAAMCIIAQAAAAAAIARQQgAAAAAAAAjghAAAAAAAABGBCEAAAAAAACMCEIAAAAAAAAYEYQAAAAAAAAwIggBAAAAAABgRBACAAAAAADASOotf98aH400AAAAAElFTkSuQmCC",
+            "uri": "artwork_url",
           }
         }
         style={
@@ -65,7 +70,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       />
     </View>
     <View>
-      <View
+      <Image
+        fadeDuration={0}
+        source={
+          {
+            "uri": "https://example.com",
+          }
+        }
         style={
           {
             "height": 72,
@@ -73,33 +84,17 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
             "width": 128,
           }
         }
-      >
-        <Image
-          fadeDuration={0}
-          source={
-            {
-              "uri": "https://example.com",
-            }
-          }
-          style={
-            {
-              "height": 72,
-              "width": 128,
-            }
-          }
-        />
-      </View>
+      />
       <View
         style={
           {
-            "height": 100,
             "marginBottom": 12,
             "width": 600,
           }
         }
       >
         <Text
-          numberOfLines={2}
+          numberOfLines={3}
           style={
             {
               "color": "white",
@@ -116,14 +111,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       <View
         style={
           {
-            "height": 80,
             "marginBottom": 30,
             "width": 600,
           }
         }
       >
         <Text
-          numberOfLines={2}
+          numberOfLines={3}
           style={
             {
               "color": "white",
@@ -141,13 +135,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       <View
         style={
           {
-            "height": 40,
             "justifyContent": "flex-end",
             "width": 600,
           }
         }
       >
         <Text
+          numberOfLines={1}
           style={
             {
               "alignItems": "flex-start",

package/Components/AudioPlayer/tv/__tests__/__snapshots__/channel.test.js.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Channel /> renders correctly 1`] = `
-<View
+<Image
+  fadeDuration={0}
+  source={
+    {
+      "uri": "https://example.com",
+    }
+  }
   style={
     {
       "height": 72,
@@ -9,20 +15,5 @@ exports[`<Channel /> renders correctly 1`] = `
       "width": 128,
     }
   }
->
-  <Image
-    fadeDuration={0}
-    source={
-      {
-        "uri": "https://example.com",
-      }
-    }
-    style={
-      {
-        "height": 72,
-        "width": 128,
-      }
-    }
-  />
-</View>
+/>
 `;

package/Components/AudioPlayer/tv/__tests__/__snapshots__/summary.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Summary /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 80,
       "marginBottom": 30,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/tv/__tests__/__snapshots__/title.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Title /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 100,
       "marginBottom": 12,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/tv/__tests__/audioPlayer.test.js

@@ -3,6 +3,10 @@ import { render } from "@testing-library/react-native";
 
 import { AudioPlayerTV } from "..";
 
+jest.mock("@applicaster/zapp-react-native-utils/audioPlayerUtils", () => ({
+  useArtworkImage: jest.fn(() => "artwork_url"),
+}));
+
 const audioPlayerProps = {
   audio_item: {
     title: "tittle",

package/Components/AudioPlayer/tv/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { getArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
+import { useArtworkImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
 
 import { AudioPlayerTVLayout } from "./Layout";
 
@@ -17,6 +17,8 @@ export function AudioPlayerTV(props: Props) {
   const { audio_item, plugin_configuration, style = {} } = props;
   const { extensions, title, summary } = audio_item;
 
+  const artwork = useArtworkImage(audio_item);
+
   const getProp = useCallback(
     getPropertyFromEntryOrConfig({
       entry: audio_item,
@@ -33,6 +35,11 @@ export function AudioPlayerTV(props: Props) {
     const backgroundImage = getProp("audio_player_background_image");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
+
+    const backgroundImageOverlay = getProp(
+      "audio_player_background_image_overlay"
+    );
+
     const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
@@ -111,19 +118,10 @@ export function AudioPlayerTV(props: Props) {
       runTimeFontSize,
       channelIcon,
       artworkBorderRadius,
+      backgroundImageOverlay,
     };
   }, [getProp]);
 
-  const artwork = React.useMemo(
-    () =>
-      getArtworkImage({
-        key: "audio_player_artwork_image_key",
-        entry: audio_item,
-        plugin_configuration,
-      }),
-    [audio_item, plugin_configuration]
-  );
-
   return (
     <AudioPlayerTVLayout artwork={artwork} config={config} style={style}>
       <Channel srcImage={config?.channelIcon} config={config} />

package/Components/Cell/index.js

@@ -3,11 +3,15 @@ import * as R from "ramda";
 import { connectToStore } from "@applicaster/zapp-react-native-redux";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { HorizontalScrollContext, RiverOffsetContext } from "../../Contexts";
+import {
+  HorizontalScrollContext,
+  RiverOffsetContext,
+  ScreenScrollingContext,
+} from "../../Contexts";
+
 import { CellComponent } from "./Cell";
 import { TvOSCellComponent } from "./TvOSCellComponent";
 import { withConsumer } from "../../Contexts/HeaderOffsetContext";
-import { ScreenScrollingContext } from "../../Contexts/ScreenScrollingContext";
 
 import { ScreenLayoutContextConsumer } from "../../Contexts/ScreenLayoutContext";
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";

package/Components/Focusable/__tests__/index.android.test.tsx

@@ -38,6 +38,9 @@ describe("Focusable", () => {
   });
 
   it("updates disableFocus state when disableFocus prop changes", () => {
+    const unregister = jest.fn();
+    mockFocusManager.registerFocusable.mockReturnValue(unregister);
+
     const { rerender } = render(
       <Focusable id="test-id" disableFocus={false}>
         <Touchable testID="touchable" />

package/Components/Focusable/index.android.tsx

@@ -43,11 +43,13 @@ export const FocusableContext = React.createContext<
     // eslint-disable-next-line
     setIsFocusable: (enableFocus: boolean) => void;
     ref: FocusManager.FocusableRef;
+    parentFocusableId: Option<string>;
   } & ParentFocus
 >({
   focused: false,
   setIsFocusable: () => {},
   ref: { current: null },
+  parentFocusableId: undefined,
 });
 
 export const useFocusable = () => React.useContext(FocusableContext);
@@ -74,7 +76,7 @@ function FocusableComponent(props: Props, forwardedRef) {
 
   const isRTL = useIsRTL();
   const focusManager = useFocusManager();
-  const { ref: parentFocusable } = useFocusable();
+  const { ref: parentFocusableRef, parentFocusableId } = useFocusable();
   const touchableRef = React.useRef(null);
 
   const [focused, setFocused] = React.useState(() =>
@@ -98,13 +100,14 @@ function FocusableComponent(props: Props, forwardedRef) {
     }
   }, [disableFocus]);
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (id) {
-      const unregister = focusManager.registerFocusable(
+      const unregister = focusManager.registerFocusable({
         touchableRef,
-        parentFocusable,
-        isFocusableCell
-      );
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId,
+      });
 
       onRegister();
 
@@ -112,7 +115,7 @@ function FocusableComponent(props: Props, forwardedRef) {
         unregister();
       };
     }
-  }, [id, onRegister, isFocusableCell]);
+  }, [id, onRegister, isFocusableCell, parentFocusableId]);
 
   if (R.isNil(id)) {
     // eslint-disable-next-line no-console
@@ -164,8 +167,9 @@ function FocusableComponent(props: Props, forwardedRef) {
       ...parentFocus,
       ref: touchableRef,
       setIsFocusable,
+      parentFocusableId: id,
     };
-  }, [parentFocus, focused]);
+  }, [parentFocus, focused, id]);
 
   return (
     <Touchable

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -7,12 +7,14 @@ import {
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useDimensions,
+  useIsTablet as isTablet,
   useNavigation,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   item: ZappEntry;
@@ -83,6 +85,13 @@ type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
 
+const dimensionsContext: "window" | "screen" = platformSelect({
+  android_tv: "window",
+  amazon: "window",
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  default: isTablet() ? "window" : "screen", // on tablet, window represents correct values, on phone it's not as the screen could be rotated
+});
+
 export function HandlePlayable({
   item,
   isModal,
@@ -135,7 +144,8 @@ export function HandlePlayable({
     });
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } = useDimensions("window");
+  const { width: screenWidth, height: screenHeight } =
+    useDimensions(dimensionsContext);
 
   const modalSize = useModalSize();
 

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import { ImageStyle } from "react-native";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
@@ -67,32 +66,10 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
   const handleFocus = (focusable) => {
     const focusedButtonId = getFocusedButtonId(focusable);
 
-    wrapperRef?.current?.measure((x, y, width, height, pageX, pageY) => {
-      const top = pageY;
-      const bottom = top + height;
-      const left = pageX;
-      const right = left + width;
-
-      const boundingRect = {
-        x,
-        y,
-        pageX,
-        pageY,
-        width,
-        height,
-        top,
-        bottom,
-        left,
-        right,
-      };
-
-      otherProps?.onToggleFocus?.({
-        focusable: {
-          getRect: R.always(boundingRect),
-        },
-        focusedButtonId,
-        mouse: focusable.mouse,
-      });
+    otherProps?.onToggleFocus?.({
+      focusable: wrapperRef.current,
+      focusedButtonId,
+      mouse: focusable.mouse,
     });
 
     if (ttsLabel) {

package/Components/MasterCell/index.tsx

@@ -86,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
+      [state, item, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -88,7 +88,7 @@ export const VideoModalMode = {
   MAXIMIZED: "MAXIMIZED",
   MINIMIZED: "MINIMIZED",
   FULLSCREEN: "FULLSCREEN",
-};
+} as const;
 
 export type PlayNextData = {
   state: PlayNextState;
@@ -127,7 +127,7 @@ const webStyles = {
   playerScreen: {
     flex: 1,
     height: "100vh",
-    background: "black",
+    backgroundColor: "black",
   },
   playerWrapper: {
     height: "100%",
@@ -145,7 +145,6 @@ const nativeStyles = {
   },
   playerScreen: {
     flex: 1,
-    backgroundColor: "black",
     overflow: "hidden",
   },
   playerWrapper: {
@@ -565,8 +564,9 @@ const PlayerContainerComponent = (props: Props) => {
   const isInlineTV = isInlineTVUtil(screenData);
 
   const inline =
-    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(mode) ||
-    isInlineTV;
+    [VideoModalMode.MAXIMIZED, VideoModalMode.MINIMIZED].includes(
+      mode as any
+    ) || isInlineTV;
 
   const value = React.useMemo(
     () => ({ playerId: state.playerId }),
@@ -587,7 +587,11 @@ const PlayerContainerComponent = (props: Props) => {
       );
     }
 
-    if (screen_background_color && mode !== VideoModalMode.FULLSCREEN) {
+    if (
+      screen_background_color &&
+      mode !== VideoModalMode.FULLSCREEN &&
+      isTV()
+    ) {
       updatedStyles.playerScreen.backgroundColor = screen_background_color;
     }
 
@@ -617,6 +621,8 @@ const PlayerContainerComponent = (props: Props) => {
     playNextData,
   };
 
+  const pointerEventsProp = mode === "MINIMIZED" ? "box-none" : "auto";
+
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider
@@ -637,14 +643,17 @@ const PlayerContainerComponent = (props: Props) => {
                 preferredFocus
                 shouldUsePreferredFocus
                 groupId={groupId}
+                pointerEvents={pointerEventsProp}
               >
                 {/* Video player and components */}
                 <View
                   style={styles.playerScreen}
                   testID={"player-screen-container"}
+                  pointerEvents={pointerEventsProp}
                 >
                   {/* Player container */}
                   <View
+                    pointerEvents={pointerEventsProp}
                     style={[
                       styles.playerWrapper,
                       // eslint-disable-next-line react-native/no-inline-styles, react-native/no-color-literals

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Animated } from "react-native";
+import { Animated, Dimensions } from "react-native";
 
 import {
   useSafeAreaInsets,
@@ -23,6 +23,7 @@ export enum PlayerAnimationStateEnum {
 export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
 
 export type ModalAnimationContextT = {
+  yTranslate: React.MutableRefObject<Animated.Value | null>;
   isActiveGesture: boolean;
   playerAnimationState: PlayerAnimationStateT;
   setPlayerAnimationState: (value: PlayerAnimationStateT) => void;
@@ -48,6 +49,7 @@ export type ModalAnimationContextT = {
 };
 
 export const ReactContext = React.createContext<ModalAnimationContextT>({
+  yTranslate: React.createRef<Animated.Value | null>(),
   isActiveGesture: false,
   playerAnimationState: null,
   setPlayerAnimationState: () => null,
@@ -73,6 +75,10 @@ export const ReactContext = React.createContext<ModalAnimationContextT>({
 });
 
 const Provider = ({ children }: { children: React.ReactNode }) => {
+  const yTranslate = React.useRef(
+    new Animated.Value(Dimensions.get("window").height)
+  );
+
   const [playerAnimationState, setPlayerAnimationState] =
     React.useState<PlayerAnimationStateT>(null);
 
@@ -100,6 +106,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     // Reset player animation state when video modal is closed
     if (!visible) {
       resetPlayerAnimationState();
+      yTranslate.current?.setValue(Dimensions.get("window").height);
     }
   }, [visible, resetPlayerAnimationState]);
 
@@ -141,6 +148,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ReactContext.Provider
       value={{
+        yTranslate,
         startComponentsAnimation,
         setStartComponentsAnimation,
         isActiveGesture: playerAnimationState !== null,

package/Components/VideoModal/PlayerDetails.tsx

@@ -11,6 +11,8 @@ import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactH
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useDelayedPlayerDetails } from "./hooks";
 
 const { width: SCREEN_WIDTH } = Dimensions.get("screen");
 
@@ -26,6 +28,10 @@ type Props = {
   isTabletLandscape?: boolean;
   isAudioPlayer?: boolean;
   isTablet?: boolean;
+  inline?: any;
+  docked?: boolean;
+  isModal?: boolean;
+  pip?: boolean;
 };
 
 const containerStyle = ({
@@ -42,8 +48,24 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape = false,
   isAudioPlayer,
-  isTablet = false,
+  inline,
+  docked,
+  isModal,
+  pip,
 }: Props) => {
+  const isInlineModal = inline && isModal;
+
+  // Mounting the PlayerDetails component is a resource-intensive process.
+  // Therefore, for performance reasons, we mount it with a delay to make the rotation process as smooth as possible.
+  // The flow is as follows: the rotation occurs first, and then, after a short delay, we mount the PlayerDetails component.
+  // This helps to avoid blocking the rotation and any animations related to the rotation.
+  const isShowPlayerDetails = useDelayedPlayerDetails({
+    isInline: isInlineModal,
+    isDocked: docked,
+    isPip: pip,
+  });
+
+  const isTablet = useIsTablet();
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
 
@@ -79,7 +101,7 @@ export const PlayerDetails = ({
     }
   }, [isAudioPlayer]);
 
-  if (isNilOrEmpty(screenData?.ui_components)) {
+  if (isNilOrEmpty(screenData?.ui_components) || !isShowPlayerDetails) {
     return null;
   }