fix: channel image and audio preview when locked

packages/app/components/audio-player/audio-player.tsx

@@ -26,10 +26,12 @@ export const AudioPlayer = memo(
     id,
     url,
     duration,
+    isViewable = true,
   }: {
     id: number;
     url: string;
     duration?: number | null;
+    isViewable?: boolean;
   }) => {
     const isDark = useIsDarkMode();
     const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -236,6 +238,13 @@ export const AudioPlayer = memo(
             </LeanText>
           </LeanView>
         </LeanView>
+        {!isViewable ? (
+          <LeanView tw="absolute bottom-0 left-0 right-0 top-0 items-center justify-center bg-gray-800 bg-opacity-90">
+            <LeanText tw="select-none text-center text-lg text-white dark:text-gray-300">
+              Unlock to listen
+            </LeanText>
+          </LeanView>
+        ) : null}
       </LeanView>
     );
   }

packages/app/components/creator-channels/components/image-preview.tsx

@@ -5,7 +5,7 @@ import { Image } from "@showtime-xyz/universal.image";
 import { LightBox } from "@showtime-xyz/universal.light-box";
 
 import { ChannelMessageAttachment } from "../types";
-import { LeanView } from "./lean-text";
+import { LeanText, LeanView } from "./lean-text";
 
 const width = Dimensions.get("window").width;
 const height = Dimensions.get("window").height;
@@ -37,7 +37,13 @@ const getImageAttachmentHeight = (attachment: ChannelMessageAttachment) => {
 };
 
 export const ImagePreview = memo(
-  ({ attachment }: { attachment: ChannelMessageAttachment }) => {
+  ({
+    attachment,
+    isViewable,
+  }: {
+    attachment: ChannelMessageAttachment;
+    isViewable?: boolean;
+  }) => {
     const imageAttachmentWidth = useMemo(
       () => getImageAttachmentWidth(attachment),
       [attachment]
@@ -68,11 +74,12 @@ export const ImagePreview = memo(
 
     return (
       <LeanView
-        tw="web:cursor-pointer overflow-hidden rounded-xl bg-gray-600"
+        tw="overflow-hidden rounded-xl bg-gray-600"
         style={{
           width: imageAttachmentWidth,
           height: imageAttachmentHeight,
         }}
+        pointerEvents={isViewable ? "auto" : "none"}
       >
         <LightBox
           width={imageAttachmentWidth}
@@ -99,6 +106,7 @@ export const ImagePreview = memo(
           }
         >
           <Image
+            tw="web:cursor-pointer"
             transition={100}
             recyclingKey={attachment?.media_upload}
             source={
@@ -113,6 +121,13 @@ export const ImagePreview = memo(
             }}
           />
         </LightBox>
+        {!isViewable ? (
+          <LeanView tw="absolute bottom-0 left-0 right-0 top-0 items-center justify-center bg-gray-800 bg-opacity-90">
+            <LeanText tw="text-center text-lg text-white dark:text-gray-300">
+              Unlock to view
+            </LeanText>
+          </LeanView>
+        ) : null}
       </LeanView>
     );
   }

packages/app/components/creator-channels/components/message-input.tsx

@@ -238,7 +238,9 @@ export const MessageInput = memo(
 
               <MessageBox
                 ref={inputRef}
-                placeholder="Send an update..."
+                placeholder={
+                  isUserAdmin ? "Send an update..." : "Write a message..."
+                }
                 textInputProps={{
                   maxLength: 2000,
                 }}

packages/app/components/creator-channels/components/message-item.tsx

@@ -55,7 +55,7 @@
 import { ImagePreview } from "./image-preview";
 import { LeanText, LeanView } from "./lean-text";
 
 const PlatformAnimateHeight = Platform.OS === "web" ? AnimateHeight : View;
 const AnimatedView = Animated.createAnimatedComponent(View);
 
 export const MessageItem = memo(
@@ -373,7 +373,7 @@
                   </LeanView>
                 ) : (
                   <>
-                    <LeanText tw="text-sm text-gray-900  dark:text-gray-100">
+                    <LeanText tw="py-1.5 text-sm  text-gray-900 dark:text-gray-100">
                       {loremText}
                     </LeanText>
                     <BlurView
@@ -392,7 +392,6 @@
               <>
                 {item.channel_message.body_text_length > 0 ? (
                   <LeanText
-                    selectable
                     tw={"text-sm text-gray-900 dark:text-gray-100"}
                     style={
                       Platform.OS === "web"
@@ -405,10 +404,7 @@
                   >
                     {linkifiedMessage}
                     {messageWasEdited && (
-                      <LeanText
-                        tw="text-xs text-gray-500 dark:text-gray-200"
-                        selectable
-                      >
+                      <LeanText tw="text-xs text-gray-500 dark:text-gray-200">
                         {` • edited`}
                       </LeanText>
                     )}
@@ -432,7 +428,10 @@
 
             {item.channel_message?.attachments?.length > 0 &&
             item.channel_message?.attachments[0].mime.includes("image") ? (
-              <ImagePreview attachment={item.channel_message?.attachments[0]} />
+              <ImagePreview
+                attachment={item.channel_message?.attachments[0]}
+                isViewable={permissions?.can_view_creator_messages}
+              />
             ) : null}
 
             {item.channel_message?.attachments?.length > 0 &&
@@ -441,6 +440,7 @@
                 id={item.channel_message.id}
                 url={item.channel_message.attachments[0]?.url}
                 duration={item.channel_message.attachments[0]?.duration}
+                isViewable={permissions?.can_view_creator_messages}
               />
             ) : null}
             {item.reaction_group.length > 0 ? (

packages/app/hooks/use-network-connection.tsx

@@ -9,23 +9,47 @@ import { useIsOnline } from "./use-is-online";
 
 export const useNetWorkConnection = () => {
   const connectionWasLost = useRef(false);
+  const ignoreNextNetworkChange = useRef(false);
+  const wasBackgrounded = useRef(false);
 
   // Check if app is in foreground
   const isForeground = useIsForeground();
   // Check if device is online
   const { isOnline } = useIsOnline();
 
+  useEffect(() => {
+    if (!isForeground) {
+      wasBackgrounded.current = true;
+      ignoreNextNetworkChange.current = true;
+      setTimeout(() => {
+        ignoreNextNetworkChange.current = false;
+      }, 1000); // Ignore for 1 second after coming to foreground
+    } else {
+      wasBackgrounded.current = false;
+    }
+  }, [isForeground]);
+
   useEffect(() => {
     const getNetwork = async () => {
+      // If we're set to ignore this network change, just return
+      if (ignoreNextNetworkChange.current) {
+        return;
+      }
+
       // Show error message if app is in foreground and device is offline
       if (isForeground && !isOnline && !connectionWasLost.current) {
         toast.error("No network connection");
         connectionWasLost.current = true;
-        return;
       }
 
       // Show success message if app is in foreground and device is back online
-      if (isForeground && isOnline && connectionWasLost.current) {
+      // But only if the app wasn't backgrounded
+      if (
+        isForeground &&
+        isOnline &&
+        connectionWasLost.current &&
+        !wasBackgrounded.current
+      ) {
         toast.success("Network connected");
         connectionWasLost.current = false;
       }