fix: plenty of issues with channels

showtime-xyz · Sep 27, 2023 · 7883d45 · 7883d45
1 parent 6cf8ad1
commit 7883d45
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 109 deletions.
diff --git a/packages/app/components/audio-player/audio-player.tsx b/packages/app/components/audio-player/audio-player.tsx
@@ -7,11 +7,10 @@ import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
 import { PauseOutline, Play } from "@showtime-xyz/universal.icon";
 import { Pressable } from "@showtime-xyz/universal.pressable";
 import Spinner from "@showtime-xyz/universal.spinner";
-import { Text } from "@showtime-xyz/universal.text";
-import { View } from "@showtime-xyz/universal.view";
 
 import TrackPlayer, { State } from "design-system/track-player";
 
+import { LeanText, LeanView } from "../creator-channels/components/lean-text";
 import { useTrackProgress } from "./hooks/use-track-progress";
 import { setupPlayer } from "./service";
 import {
@@ -122,10 +121,10 @@ export const AudioPlayer = memo(
     }, [id, prepare, url]);
 
     return (
-      <View tw="web:max-w-sm web:p-2 overflow-hidden rounded-full bg-black p-4 dark:bg-white">
-        <View tw="flex-row items-center">
-          <View tw="mr-4 items-center justify-center">
-            <View tw="h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-black">
+      <LeanView tw="web:max-w-sm web:p-2 overflow-hidden rounded-full bg-black p-4 dark:bg-white">
+        <LeanView tw="flex-row items-center">
+          <LeanView tw="mr-4 items-center justify-center">
+            <LeanView tw="h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-black">
               <Pressable
                 onPress={togglePlay}
                 tw="w-full flex-1 items-center justify-center text-black dark:text-white"
@@ -144,28 +143,28 @@ export const AudioPlayer = memo(
                     width={30}
                   />
                 ) : (
-                  <View tw="ml-0.5">
+                  <LeanView tw="ml-0.5">
                     <Play
                       color={isDark ? "white" : "black"}
                       stroke={isDark ? "white" : "black"}
                       strokeWidth={3}
                       width={40}
                     />
-                  </View>
+                  </LeanView>
                 )}
               </Pressable>
-            </View>
-          </View>
-          <View tw="mr-2 w-8 items-center justify-center text-center">
-            <Text tw="text-[#959595] dark:text-[#707070]">
+            </LeanView>
+          </LeanView>
+          <LeanView tw="mr-2 w-8 items-center justify-center text-center">
+            <LeanText tw="text-[#959595] dark:text-[#707070]">
               {formatTime(
                 tempScrubPosition !== null
                   ? tempScrubPosition
                   : localScrubPosition || trackInfo.position || 0
               )}
-            </Text>
-          </View>
-          <View tw="flex-1">
+            </LeanText>
+          </LeanView>
+          <LeanView tw="flex-1">
             <Slider
               minimumValue={0}
               maximumValue={trackInfo.duration || duration || 60} // 60 is fallback
@@ -228,16 +227,16 @@ export const AudioPlayer = memo(
                 );
               }}
             />
-          </View>
-          <View tw="ml-2 w-8 items-center justify-center text-center">
-            <Text tw="text-[#959595] dark:text-[#707070]">
+          </LeanView>
+          <LeanView tw="ml-2 w-8 items-center justify-center text-center">
+            <LeanText tw="text-[#959595] dark:text-[#707070]">
               {duration || trackInfo.duration
                 ? formatTime(duration || trackInfo.duration || 0)
                 : "-:--"}
-            </Text>
-          </View>
-        </View>
-      </View>
+            </LeanText>
+          </LeanView>
+        </LeanView>
+      </LeanView>
     );
   }
 );

diff --git a/packages/app/components/creator-channels/channels.web.tsx b/packages/app/components/creator-channels/channels.web.tsx
@@ -229,12 +229,14 @@ const CreatorChannelsListItem = memo(
 
 CreatorChannelsListItem.displayName = "CreatorChannelsListItem";
 
+const timeFormatter = new Intl.NumberFormat();
+
 const CreatorChannelsListCreator = memo(
   ({ item }: { item: CreatorChannelsListItemProps }) => {
     const joinChannel = useJoinChannel();
     const router = useRouter();
 
-    const memberCount = new Intl.NumberFormat().format(item.member_count);
+    const memberCount = timeFormatter.format(item.member_count);
     return (
       <View tw="flex-1 px-4 py-3">
         <View tw="flex-row items-start">

diff --git a/packages/app/components/creator-channels/components/creator-badge.tsx b/packages/app/components/creator-channels/components/creator-badge.tsx
@@ -1,18 +1,16 @@
-import { View } from "@showtime-xyz/universal.view";
-
-import { LeanText } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 
 export const CreatorBadge = () => {
   return (
-    <View tw="rounded-md bg-[#CE8903] px-2 py-1.5">
-      <View tw="flex-row items-center justify-center">
+    <LeanView tw="rounded-md bg-[#CE8903] px-2 py-1.5">
+      <LeanView tw="flex-row items-center justify-center">
         <LeanText
           tw="text-xs font-medium text-white"
           style={{ lineHeight: 14 }}
         >
           Creator
         </LeanText>
-      </View>
-    </View>
+      </LeanView>
+    </LeanView>
   );
 };
diff --git a/packages/app/components/creator-channels/components/lean-text.tsx b/packages/app/components/creator-channels/components/lean-text.tsx
@@ -17,7 +17,7 @@ const ComponentView = forwardRef((props, ref) => {
 
 ComponentView.displayName = "RCTView";
 
-export const LeanView = styled(Component);
+export const LeanView = styled(ComponentView);
 
 /*
 export const LeanText = ({ tw, ...rest }) => {

diff --git a/packages/app/components/creator-channels/components/lean-text.web.tsx b/packages/app/components/creator-channels/components/lean-text.web.tsx
@@ -1,11 +1,5 @@
 import { Text } from "@showtime-xyz/universal.text";
+import { View } from "@showtime-xyz/universal.view";
 
 export const LeanText = Text;
-
-/*
-export const LeanText = ({ tw, ...rest }) => {
-  const style = useMemo(() => (Array.isArray(tw) ? tw.join(" ") : tw), [tw]);
-
-  return <BasicText tw={style} {...rest} />;
-};
-*/
+export const LeanView = View;
diff --git a/packages/app/components/creator-channels/components/message-input-toolbar.tsx b/packages/app/components/creator-channels/components/message-input-toolbar.tsx
@@ -6,15 +6,13 @@ import * as ImagePicker from "expo-image-picker";
 
 import { Gallery, MusicBadge, Photo } from "@showtime-xyz/universal.icon";
 import { Pressable } from "@showtime-xyz/universal.pressable";
-import { Text } from "@showtime-xyz/universal.text";
-import { View } from "@showtime-xyz/universal.view";
 
 import { Logger } from "app/lib/logger";
 
 import { toast } from "design-system/toast";
 
 import { useSendChannelMessage } from "../hooks/use-send-channel-message";
-import { LeanText } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 
 export const MessageInputToolbar = memo(
   ({
@@ -143,7 +141,7 @@ export const MessageInputToolbar = memo(
     }, [uploadFile]);
 
     return (
-      <View tw="web:justify-start web:gap-4 flex-row items-center justify-around px-8 pt-2">
+      <LeanView tw="web:justify-start web:gap-4 flex-row items-center justify-around px-8 pt-2">
         <Pressable
           tw="web:py-1 flex-row items-center justify-center rounded-full bg-gray-100 px-4 py-2"
           onPress={pickAudio}
@@ -165,7 +163,7 @@ export const MessageInputToolbar = memo(
           <Photo height={20} width={20} color={"black"} />
           <LeanText tw="pl-1">Camera</LeanText>
         </Pressable>
-      </View>
+      </LeanView>
     );
   }
 );

diff --git a/packages/app/components/creator-channels/components/message-input.tsx b/packages/app/components/creator-channels/components/message-input.tsx
@@ -36,7 +36,7 @@ import { useEditChannelMessage } from "../hooks/use-edit-channel-message";
 import { useSendChannelMessage } from "../hooks/use-send-channel-message";
 import { MissingStarDropModal } from "../missing-star-drop-modal";
 import { ChannelById } from "../types";
-import { LeanText } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 import { MessageInputToolbar } from "./message-input-toolbar";
 
 export const ScrollToBottomButton = ({ onPress }: { onPress: any }) => {
@@ -207,20 +207,20 @@ export const MessageInput = memo(
 
     if (!isUserAdmin && edition && !hasUnlockedMessages) {
       return (
-        <View
+        <LeanView
           tw="justify-center px-3"
           style={{
             paddingBottom: bottom,
           }}
         >
           <ClaimPaidNFTButton edition={edition} type="messageInput" />
-          <View tw="mt-3 pb-4">
+          <LeanView tw="mt-3 pb-4">
             <LeanText tw="text-center text-xs text-gray-500 dark:text-gray-300">
               Collecting a Star Drop unlocks privileges with this artist like
               exclusive channel content, a Star Badge, and more
             </LeanText>
-          </View>
-        </View>
+          </LeanView>
+        </LeanView>
       );
     }
 
@@ -229,10 +229,13 @@ export const MessageInput = memo(
         <Animated.View style={style}>
           {permissions?.can_send_messages ? (
             <>
-              <MessageInputToolbar
-                channelId={channelId}
-                isUserAdmin={isUserAdmin}
-              />
+              {permissions?.can_upload_media ? (
+                <MessageInputToolbar
+                  channelId={channelId}
+                  isUserAdmin={isUserAdmin}
+                />
+              ) : null}
+
               <MessageBox
                 ref={inputRef}
                 placeholder="Send an update..."
@@ -253,7 +256,7 @@ export const MessageInput = memo(
                 submitButton={
                   editMessage ? (
                     <Animated.View entering={FadeIn} exiting={FadeOut}>
-                      <View tw="flex-row" style={{ gap: 8 }}>
+                      <LeanView tw="flex-row" style={{ gap: 8 }}>
                         <Button
                           variant="secondary"
                           style={{ backgroundColor: colors.red[500] }}
@@ -272,7 +275,7 @@ export const MessageInput = memo(
                         >
                           <Check width={20} height={20} />
                         </Button>
-                      </View>
+                      </LeanView>
                     </Animated.View>
                   ) : null
                 }