@applicaster/zapp-react-native-ui-components 16.0.0-rc.34 → 16.0.0-rc.36

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -12,7 +12,14 @@
  */
 
 import React from "react";
-import { Image, Platform, StyleSheet, Text, View } from "react-native";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 
 const styles = StyleSheet.create({
   row: {
@@ -133,6 +140,7 @@ export interface SecondaryAction {
 }
 
 export interface MenuItem {
+  trailingButton?: ItemButtonAction;
   title: string;
   summary?: string;
   icon?: string;
@@ -191,14 +199,18 @@ export type ItemData = {
   leadingButton?: ItemButtonAction;
   /** Button 1 (right most) — hardcoded action decides icon. */
   trailingButton?: ItemButtonAction;
+  isSelected?: boolean;
 };
 
-export type ItemProps = {
+export type AudioPlayerTrackItemProps = {
   configuration: ItemConfiguration;
   data: ItemData;
   focused?: boolean;
   focusedLeadingButton?: boolean;
   focusedTrailingButton?: boolean;
+  onPress?: () => void;
+  onLeadingButtonPress?: () => void;
+  onTrailingButtonPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -234,9 +246,9 @@ const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
 
 const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
   paddingTop: 8,
-  paddingRight: 10,
+  paddingRight: 20,
   paddingBottom: 8,
-  paddingLeft: 10,
+  paddingLeft: 20,
   horizontalGutter: 12,
   verticalGutter: 2,
 };
@@ -297,16 +309,6 @@ const DEFAULT_THUMB_ASSET =
 const DEFAULT_EQUALIZER_ASSET =
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAI0lEQVR42mNgGNTgPxTQzwB0DVQ3gKCBowbQwYAhkBIHBAAA9TvPMeOFaLMAAAAASUVORK5CYII=";
 
-const BUTTON_ASSETS: Record<ItemButtonAction, string> = {
-  playPause:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAdklEQVR42u3ZwRUAERAEUfkn3TaF5TFTrSuCf3CgjZGg6ast7G8YaAlcB8JAj8F1MRR2G63CUNglNAqsRvmB1TAfsBoXcMABV4MFKEci4IADNrkAed2H80R66SHqvUvglh/ktoZcL5H7MHKBx/5xYH+RsP90t5t2UpF6+22a+AAAAABJRU5ErkJggg==",
-  drag: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAIklEQVR42mNgGAWjYGiC/2SCwWPBaByMxsFoHIyCUTDYAAAqhk7AVXdZJwAAAABJRU5ErkJggg==",
-  multiSelect:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAWklEQVR42t2VUQ4AIAhCvf+lrQsULJJZbH7GM1cS0Uk5dd0Qqcz4GJSCSs0pSCkAHNoWBfkTgIxpgGK+ujyEKABqRGyn9FO1A+yfrf+qsGxTSx5YEs2WyU9oAKBJKg8Kfq4dAAAAAElFTkSuQmCC",
-  remove:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAUklEQVR42mNgGPbgPx5AVYOJlSPJcGqrJU8DKXooCVui9FIacXj1UyNl4DWDLhYgc8nA+INpeFgwtCOZ5vmALjmZ5mURXUpTutQHdKnRRgEMAACwjWWprU1B+AAAAABJRU5ErkJggg==",
-};
-
 function getTextTransformStyle(
   textTransform: TextTransform
 ): "none" | "lowercase" | "uppercase" | "capitalize" {
@@ -324,32 +326,35 @@ function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
     : CONTAINER_SPEC_DEFAULT;
 }
 
-function mapMenuItemToNowPlayingData(item: MenuItem): ItemData {
+export function mapMenuItemToNowPlayingData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     nowPlayingLabel: "Now Playing",
     trailingButton: "playPause",
+    isSelected: item.isSelected,
   };
 }
 
-function mapMenuItemToQueuedData(item: MenuItem): ItemData {
+export function mapMenuItemToQueuedData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     leadingButton: "remove",
     trailingButton: "drag",
+    isSelected: item.isSelected,
   };
 }
 
-function mapMenuItemToPlaylistData(item: MenuItem): ItemData {
+export function mapMenuItemToPlaylistData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
-    trailingButton: "multiSelect",
+    trailingButton: item.trailingButton || ("multiSelect" as ItemButtonAction),
+    isSelected: item.isSelected,
   };
 }
 
@@ -362,6 +367,7 @@ type ItemContainerProps = {
   background: BackgroundConfiguration;
   focused: boolean;
   children: React.ReactNode;
+  onPress?: () => void;
 };
 
 function ItemContainer({
@@ -369,23 +375,25 @@ function ItemContainer({
   background,
   focused,
   children,
+  onPress,
 }: ItemContainerProps) {
   const container = resolveContainerSpec(image);
   const bg = focused ? background.focusedColor : background.defaultColor;
 
   return (
-    <View
-      style={{
-        backgroundColor: bg,
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor: pressed ? background.focusedColor : bg,
         borderRadius: background.cornerRadius,
         paddingTop: container.paddingTop,
         paddingRight: container.paddingRight,
         paddingBottom: container.paddingBottom,
         paddingLeft: container.paddingLeft,
-      }}
+      })}
     >
       {children}
-    </View>
+    </Pressable>
   );
 }
 
@@ -486,27 +494,205 @@ function NowPlayingRow({
 type ItemButtonProps = {
   action: ItemButtonAction;
   focused?: boolean;
+  onPress?: () => void;
+  isSelected?: boolean;
 };
 
-function ItemButton({ action, focused = false }: ItemButtonProps) {
+function ItemButton({
+  action,
+  focused = false,
+  onPress,
+  isSelected = false,
+}: ItemButtonProps) {
   const layout = BUTTON_LAYOUT_SPEC[action];
 
+  const renderIcon = () => {
+    switch (action) {
+      case "playPause": {
+        const iconSize = layout.assetWidth;
+        const iconRadius = iconSize / 2;
+
+        return (
+          <View
+            style={{
+              width: iconSize,
+              height: iconSize,
+              borderRadius: iconRadius,
+              backgroundColor: "#FFFFFF",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            {isSelected ? (
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  width: 10,
+                  height: 16,
+                }}
+              >
+                <View
+                  style={{
+                    width: 3.5,
+                    height: 16,
+                    backgroundColor: "#1e1e1e",
+                    borderRadius: 1,
+                  }}
+                />
+                <View
+                  style={{
+                    width: 3.5,
+                    height: 16,
+                    backgroundColor: "#1e1e1e",
+                    borderRadius: 1,
+                  }}
+                />
+              </View>
+            ) : (
+              <View
+                style={{
+                  width: 0,
+                  height: 0,
+                  backgroundColor: "transparent",
+                  borderStyle: "solid",
+                  borderLeftWidth: 14,
+                  borderRightWidth: 0,
+                  borderTopWidth: 8,
+                  borderBottomWidth: 8,
+                  borderLeftColor: "#1e1e1e",
+                  borderRightColor: "transparent",
+                  borderTopColor: "transparent",
+                  borderBottomColor: "transparent",
+                  marginLeft: 3,
+                }}
+              />
+            )}
+          </View>
+        );
+      }
+
+      case "drag": {
+        return (
+          <View
+            style={{
+              width: 20,
+              height: 12,
+              justifyContent: "space-between",
+            }}
+          >
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+          </View>
+        );
+      }
+
+      case "remove": {
+        return (
+          <View
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              borderWidth: 1.5,
+              borderColor: "rgba(255, 255, 255, 0.7)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <View
+              style={{
+                width: 10,
+                height: 1.5,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+          </View>
+        );
+      }
+
+      case "multiSelect": {
+        if (!isSelected) {
+          return (
+            <View
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+                borderRadius: layout.assetWidth / 2,
+                borderWidth: 1.5,
+                borderColor: "rgba(255, 255, 255, 0.7)",
+                backgroundColor: "transparent",
+              }}
+            />
+          );
+        }
+
+        return (
+          <View
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              backgroundColor: "#FFFFFF",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <View
+              style={{
+                width: 6,
+                height: 10,
+                borderBottomWidth: 2,
+                borderRightWidth: 2,
+                borderColor: "#1e1e1e",
+                transform: [{ rotate: "45deg" }],
+                marginTop: -2,
+              }}
+            />
+          </View>
+        );
+      }
+
+      default:
+        return null;
+    }
+  };
+
   return (
-    <View
-      style={{
-        paddingTop: layout.paddingTop,
-        paddingRight: layout.paddingRight,
-        paddingBottom: layout.paddingBottom,
-        paddingLeft: layout.paddingLeft,
-        opacity: focused ? 0.7 : 1,
-      }}
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        {
+          paddingTop: layout.paddingTop,
+          paddingRight: layout.paddingRight,
+          paddingBottom: layout.paddingBottom,
+          paddingLeft: layout.paddingLeft,
+          opacity: pressed || focused ? 0.7 : 1,
+        },
+      ]}
     >
-      <Image
-        source={{ uri: BUTTON_ASSETS[action] }}
-        style={{ width: layout.assetWidth, height: layout.assetHeight }}
-        resizeMode="contain"
-      />
-    </View>
+      {renderIcon()}
+    </Pressable>
   );
 }
 
@@ -515,6 +701,9 @@ type ItemButtonsProps = {
   trailingButton?: ItemButtonAction;
   focusedLeadingButton?: boolean;
   focusedTrailingButton?: boolean;
+  onLeadingButtonPress?: () => void;
+  onTrailingButtonPress?: () => void;
+  isSelected?: boolean;
 };
 
 function ItemButtons({
@@ -522,6 +711,9 @@ function ItemButtons({
   trailingButton,
   focusedLeadingButton = false,
   focusedTrailingButton = false,
+  onLeadingButtonPress,
+  onTrailingButtonPress,
+  isSelected = false,
 }: ItemButtonsProps) {
   if (!leadingButton && !trailingButton) {
     return null;
@@ -531,28 +723,41 @@ function ItemButtons({
     <View style={styles.buttonsRow}>
       {leadingButton ? (
         <>
-          <ItemButton action={leadingButton} focused={focusedLeadingButton} />
+          <ItemButton
+            action={leadingButton}
+            focused={focusedLeadingButton}
+            onPress={onLeadingButtonPress}
+            isSelected={isSelected}
+          />
           <View style={{ width: BUTTONS_CONTAINER_HORIZONTAL_GUTTER }} />
         </>
       ) : null}
       {trailingButton ? (
-        <ItemButton action={trailingButton} focused={focusedTrailingButton} />
+        <ItemButton
+          action={trailingButton}
+          focused={focusedTrailingButton}
+          onPress={onTrailingButtonPress}
+          isSelected={isSelected}
+        />
       ) : null}
     </View>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Item
+// AudioPlayerTrackItem
 // ---------------------------------------------------------------------------
 
-export function Item({
+export function AudioPlayerTrackItem({
   configuration,
   data,
   focused = false,
   focusedLeadingButton = false,
   focusedTrailingButton = false,
-}: ItemProps) {
+  onPress,
+  onLeadingButtonPress,
+  onTrailingButtonPress,
+}: AudioPlayerTrackItemProps) {
   const {
     background,
     image,
@@ -566,7 +771,12 @@ export function Item({
   const showNowPlaying = !!data.nowPlayingLabel;
 
   return (
-    <ItemContainer image={image} background={background} focused={focused}>
+    <ItemContainer
+      image={image}
+      background={background}
+      focused={focused}
+      onPress={onPress}
+    >
       <View style={styles.row}>
         <ItemThumbnail configuration={image} imageUri={data.imageUri} />
         <View style={{ width: container.horizontalGutter }} />
@@ -594,6 +804,9 @@ export function Item({
           trailingButton={data.trailingButton}
           focusedLeadingButton={focusedLeadingButton}
           focusedTrailingButton={focusedTrailingButton}
+          onLeadingButtonPress={onLeadingButtonPress}
+          onTrailingButtonPress={onTrailingButtonPress}
+          isSelected={data.isSelected}
         />
       </View>
     </ItemContainer>
@@ -663,47 +876,3 @@ export const VARIANT_PLAYLIST_ITEM: ItemConfiguration = {
   textLabel1: DEFAULT_TEXT_LABEL_1_CONFIGURATION,
   textLabel2: DEFAULT_TEXT_LABEL_2_CONFIGURATION,
 };
-
-export default function App() {
-  // Hardcoded core mock data objects matching user types framework
-  const sharedMockItem: MenuItem = {
-    title: "Content Title",
-    summary: "Artist",
-    icon: "https://picsum.photos/200",
-    action: { type: "PLAY_AUDIO" },
-    secondaryAction: { action: { type: "OPEN_CONTEXT_MENU" } },
-  };
-
-  const playlistMockItem: MenuItem = {
-    title: "Playlist Name",
-    summary: "12 Songs",
-    icon: "https://picsum.photos/201",
-    isSelected: true,
-    action: { type: "NAVIGATE_PLAYLIST" },
-  };
-
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Item Building Block</Text>
-
-      <Text style={styles.demoLabel}>Now Playing</Text>
-      <Item
-        configuration={VARIANT_NOW_PLAYING}
-        data={mapMenuItemToNowPlayingData(sharedMockItem)}
-      />
-
-      <Text style={styles.demoLabel}>Queued Item</Text>
-      <Item
-        configuration={VARIANT_QUEUED_ITEM}
-        data={mapMenuItemToQueuedData(sharedMockItem)}
-        focused
-      />
-
-      <Text style={styles.demoLabel}>Playlist Item</Text>
-      <Item
-        configuration={VARIANT_PLAYLIST_ITEM}
-        data={mapMenuItemToPlaylistData(playlistMockItem)}
-      />
-    </View>
-  );
-}

package/Components/ModalComponent/AudioPlayer/Components/index.ts

@@ -1,7 +1,9 @@
-export { Item as AudioPlayerItem } from "./Item";
+export { AudioPlayerAction } from "./Action";
 
-export { Item as AudioPlayerHeader } from "./Header";
+export { AudioPlayerButton } from "./Button";
 
-export { Item as AudioPlayerButton } from "./Button";
+export { AudioPlayerHeader } from "./Header";
 
-export { Item as AudioPlayerAction } from "./Action";
+export { AudioPlayerTrackItem } from "./Item";
+
+export { AudioPlayerInput } from "./Input";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.34",
+  "version": "16.0.0-rc.36",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.34",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.34",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.34",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.34",
+    "@applicaster/applicaster-types": "16.0.0-rc.36",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.36",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.36",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.36",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",