@wereform/pkgm-wire 1.0.2 → 1.0.4

package/dist/layout/WireUploadLayout.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.WireUploadLayout=WireUploadLayout;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");var ImagePicker=_interopRequireWildcard(require("expo-image-picker"));var VideoThumbnails=_interopRequireWildcard(require("expo-video-thumbnails"));var _vectorIcons=require("@expo/vector-icons");var _WireUploadStyles=require("../styles/WireUploadStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireUploadLayout.jsx";function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}function WireUploadLayout(_ref){var _this=this;var profilePic=_ref.profilePic,userName=_ref.userName,onPressVideoUploadScreen=_ref.onPressVideoUploadScreen,onPressWireUpload=_ref.onPressWireUpload;var _useState=(0,_react.useState)(``),_useState2=(0,_slicedToArray2.default)(_useState,2),wireText=_useState2[0],setWireText=_useState2[1];var _useState3=(0,_react.useState)(null),_useState4=(0,_slicedToArray2.default)(_useState3,2),media=_useState4[0],setMedia=_useState4[1];var _useState5=(0,_react.useState)([]),_useState6=(0,_slicedToArray2.default)(_useState5,2),thumbnails=_useState6[0],setThumbnails=_useState6[1];var _useState7=(0,_react.useState)("Default Heading!"),_useState8=(0,_slicedToArray2.default)(_useState7,2),heading=_useState8[0],setHeading=_useState8[1];var pickMedia=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){var result=yield ImagePicker.launchImageLibraryAsync({mediaTypes:["images","videos"],allowsMultipleSelection:true,selectionLimit:4,quality:1});if(result.canceled)return;var assets=result.assets;setMedia(assets);var finalThumbs=yield Promise.all(assets.map(function(){var _ref3=(0,_asyncToGenerator2.default)(function*(asset){var _asset$mimeType;var isVideo=asset.type==="video"||((_asset$mimeType=asset.mimeType)==null?void 0:_asset$mimeType.startsWith("video"));if(isVideo){try{var _yield$VideoThumbnail=yield VideoThumbnails.getThumbnailAsync(asset.uri,{time:1000}),uri=_yield$VideoThumbnail.uri;return uri;}catch(err){console.log("Video thumbnail error:",err);return null;}}return asset.uri;});return function(_x){return _ref3.apply(this,arguments);};}()));console.log(finalThumbs);setThumbnails(finalThumbs);});return function pickMedia(){return _ref2.apply(this,arguments);};}();console.log(wireText);return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.profileSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:profilePic||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_WireUploadStyles.WireUploadStyles.userImage}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.userInfo,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireUploadStyles.WireUploadStyles.userName,children:userName||"Default Username"})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"900",fontSize:24,paddingBottom:12,flexGrow:1,justifyContent:"flex-start"},children:["Create ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Wire"})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressVideoUploadScreen,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"500",fontSize:14,paddingBottom:12,alignSelf:"center"},children:["Upload ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Video"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputTextContainer,children:[(0,_jsxRuntime.jsx)(_pkgmShared.InputField,{multiline:true,placeholder:"Write your Wire...",inputWrapper:_WireUploadStyles.WireUploadStyles.inputWrapper,inputStyle:_WireUploadStyles.WireUploadStyles.aboutTextArea,value:wireText,onChangeText:setWireText}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.mediaContainer,children:thumbnails.map(function(uri,index){return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:uri},style:_WireUploadStyles.WireUploadStyles.mediaThumb,resizeMode:"cover"})},index);})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.uploadButtonContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_WireUploadStyles.WireUploadStyles.AIGenerateButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"sparkles-outline",size:24,color:"#fff"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,style:_WireUploadStyles.WireUploadStyles.uploadImageButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"image",size:24,color:"#fff"})})]})]}),(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},iconStyles:{paddingRight:16},selectText:"Select Age Group",data:[{key:1,label:"Under 14 of age"},{key:2,label:"Above 14 of age"}]}),(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},selectText:"Comments",iconStyles:{paddingRight:16},data:[{key:1,label:"Turn — ON"},{key:2,label:"Turn — OFF"}]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",width:"auto",justifyContent:"space-between",marginTop:60,marginLeft:24,marginRight:24},children:(0,_jsxRuntime.jsx)(_pkgmShared.CustomizedButton,{label:"Post Wire",style:{backgroundColor:"#ff6000",marginRight:6},fontWeight:"900",textColor:"#fff",onPress:function onPress(){return onPressWireUpload(wireText,heading);}})})]})});}var styles=_reactNative.StyleSheet.create({});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.WireUploadLayout=WireUploadLayout;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");var ImagePicker=_interopRequireWildcard(require("expo-image-picker"));var VideoThumbnails=_interopRequireWildcard(require("expo-video-thumbnails"));var _vectorIcons=require("@expo/vector-icons");var _WireUploadStyles=require("../styles/WireUploadStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireUploadLayout.jsx";function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}function WireUploadLayout(_ref){var _this=this;var profilePic=_ref.profilePic,userName=_ref.userName,onPressVideoUploadScreen=_ref.onPressVideoUploadScreen,onPressWireUpload=_ref.onPressWireUpload,_ref$showUploadContai=_ref.showUploadContainers,showUploadContainers=_ref$showUploadContai===void 0?false:_ref$showUploadContai,_ref$showDropDowns=_ref.showDropDowns,showDropDowns=_ref$showDropDowns===void 0?false:_ref$showDropDowns;var _useState=(0,_react.useState)(``),_useState2=(0,_slicedToArray2.default)(_useState,2),wireText=_useState2[0],setWireText=_useState2[1];var _useState3=(0,_react.useState)(null),_useState4=(0,_slicedToArray2.default)(_useState3,2),media=_useState4[0],setMedia=_useState4[1];var _useState5=(0,_react.useState)([]),_useState6=(0,_slicedToArray2.default)(_useState5,2),thumbnails=_useState6[0],setThumbnails=_useState6[1];var _useState7=(0,_react.useState)("Default Heading!"),_useState8=(0,_slicedToArray2.default)(_useState7,2),heading=_useState8[0],setHeading=_useState8[1];var pickMedia=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){var result=yield ImagePicker.launchImageLibraryAsync({mediaTypes:["images","videos"],allowsMultipleSelection:true,selectionLimit:4,quality:1});if(result.canceled)return;var assets=result.assets;setMedia(assets);var finalThumbs=yield Promise.all(assets.map(function(){var _ref3=(0,_asyncToGenerator2.default)(function*(asset){var _asset$mimeType;var isVideo=asset.type==="video"||((_asset$mimeType=asset.mimeType)==null?void 0:_asset$mimeType.startsWith("video"));if(isVideo){try{var _yield$VideoThumbnail=yield VideoThumbnails.getThumbnailAsync(asset.uri,{time:1000}),uri=_yield$VideoThumbnail.uri;return uri;}catch(err){console.log("Video thumbnail error:",err);return null;}}return asset.uri;});return function(_x){return _ref3.apply(this,arguments);};}()));console.log(finalThumbs);setThumbnails(finalThumbs);});return function pickMedia(){return _ref2.apply(this,arguments);};}();console.log(wireText);return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.profileSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:profilePic||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_WireUploadStyles.WireUploadStyles.userImage}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.userInfo,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireUploadStyles.WireUploadStyles.userName,children:userName||"Default Username"})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"900",fontSize:24,paddingBottom:12,flexGrow:1,justifyContent:"flex-start"},children:["Create ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Wire"})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressVideoUploadScreen,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"500",fontSize:14,paddingBottom:12,alignSelf:"center"},children:["Upload ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Video"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputTextContainer,children:[(0,_jsxRuntime.jsx)(_pkgmShared.InputField,{multiline:true,placeholder:"Write your Wire...",inputWrapper:_WireUploadStyles.WireUploadStyles.inputWrapper,inputStyle:_WireUploadStyles.WireUploadStyles.aboutTextArea,value:wireText,onChangeText:setWireText}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.mediaContainer,children:thumbnails.map(function(uri,index){return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:uri},style:_WireUploadStyles.WireUploadStyles.mediaThumb,resizeMode:"cover"})},index);})}),showUploadContainers&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.uploadButtonContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_WireUploadStyles.WireUploadStyles.AIGenerateButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"sparkles-outline",size:24,color:"#fff"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,style:_WireUploadStyles.WireUploadStyles.uploadImageButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"image",size:24,color:"#fff"})})]})]}),showDropDowns&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},iconStyles:{paddingRight:16},selectText:"Select Age Group",data:[{key:1,label:"Under 14 of age"},{key:2,label:"Above 14 of age"}]}),(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},selectText:"Comments",iconStyles:{paddingRight:16},data:[{key:1,label:"Turn — ON"},{key:2,label:"Turn — OFF"}]})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",width:"auto",justifyContent:"space-between",marginTop:60,marginLeft:24,marginRight:24},children:(0,_jsxRuntime.jsx)(_pkgmShared.CustomizedButton,{label:"Post Wire",style:{backgroundColor:"#ff6000",marginRight:6},fontWeight:"900",textColor:"#fff",onPress:function onPress(){return onPressWireUpload(wireText,heading);}})})]})});}var styles=_reactNative.StyleSheet.create({});

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@wereform/pkgm-wire",
-  "version": "1.0.2",
+  "version": "1.0.4",
+  "source": "src/index.js",
   "main": "dist/index.js",
+  "react-native": "src/index.js",
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions .js,.jsx",
+    "prepublishOnly": "pnpm run build"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -27,8 +34,5 @@
     "@babel/core": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
     "metro-react-native-babel-preset": "^0.77.0"
-  },
-  "scripts": {
-    "build": "babel src --out-dir dist --extensions .js,.jsx"
   }
-}
+}

package/src/components/WireChannelMetadata.jsx

@@ -0,0 +1,58 @@
+import { Image, Pressable, Text, View } from "react-native";
+import { WireChannelMetadataStyles } from "../styles/WireChannelMetadataStyles";
+import { Ionicons } from "@expo/vector-icons";
+
+export function WireChannelMetadata({
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  containerStyles,
+}) {
+  return (
+    <View style={WireChannelMetadataStyles.channelMetaContainer}>
+      <View style={WireChannelMetadataStyles.channelMetaContainer_ColumnOne}>
+        <Image
+          source={{
+            uri:
+              channelLogo ||
+              "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+          }}
+          style={WireChannelMetadataStyles.userImage}
+        />
+        <View style={WireChannelMetadataStyles.nameSubcountContainer}>
+          <Text style={WireChannelMetadataStyles.userName}>
+            {userName || "Default Username"}
+          </Text>
+          <View style={WireChannelMetadataStyles.subCountContainer}>
+            <Text style={WireChannelMetadataStyles.subCount}>
+              {subscribersCount || "0"}
+            </Text>
+            <Text style={WireChannelMetadataStyles.subText}>Subscribers</Text>
+          </View>
+        </View>
+      </View>
+      <View
+        style={[WireChannelMetadataStyles.dateViewsContainer, containerStyles]}
+      >
+        <View style={WireChannelMetadataStyles.dateContainer}>
+          <Text style={WireChannelMetadataStyles.dateText}>
+            {timeAgo || "14 Hours Ago"}
+          </Text>
+          <View style={WireChannelMetadataStyles.dateIcon}>
+            <Ionicons name="calendar" size={16} color="white" />
+          </View>
+        </View>
+        <View style={WireChannelMetadataStyles.viewsContainer}>
+          <Text style={WireChannelMetadataStyles.viewsText}>
+            {viewsText || "0"}
+          </Text>
+          <View style={WireChannelMetadataStyles.eyeIcon}>
+            <Ionicons name="eye-outline" size={16} color="white" />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export { WireCardLayout } from "./layout/WireCardLayout.jsx";
+export { WireViewLayout } from "./layout/WireViewLayout.jsx";
+export { WireUploadLayout } from "./layout/WireUploadLayout.jsx";

package/src/layout/WireCardLayout.jsx

@@ -0,0 +1,66 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import { MenuChannelMeta, MenuInteraction } from "@wereform/pkgm-shared";
+import { Ionicons } from "@expo/vector-icons";
+import { WireChannelMetadata } from "../components/WireChannelMetadata";
+import { WireCardLayoutStyles } from "../styles/WireCardLayoutStyles";
+
+export function WireCardLayout({
+  content,
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  onPress,
+}) {
+  const limit = 8;
+
+  const contentText =
+    content ??
+    `Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quidem
+            distinctio porro qui minus totam eius. Sed laudantium nisi expedita
+            distinctio dignissimos dicta praesentium nihil iste velit cumque!
+            Assumenda illum veritatis, ipsam sint
+            
+            vero corporis distinctio rem
+            quisquam natus iste. Unde esse consequuntur maiores repellendus, cum
+            voluptatem vero incidunt temporibus.`;
+
+  // Only compute finalText if we actually have content
+  const finalText = contentText
+    ? contentText.replace(/\r\n/g, "\n").split("\n")
+    : [];
+
+  return (
+    <TouchableOpacity style={WireCardLayoutStyles.container} onPress={onPress}>
+      <View>
+        <WireChannelMetadata
+          channelLogo={
+            channelLogo ||
+            "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"
+          }
+          userName={userName}
+          subscribersCount={subscribersCount}
+          timeAgo={timeAgo}
+          viewsText={viewsText}
+        />
+
+        <View style={WireCardLayoutStyles.mainTextContainer}>
+          {finalText.length > 0 && (
+            <Text numberOfLines={limit} style={WireCardLayoutStyles.mainText}>
+              {finalText.map((text, index) => (
+                <Text key={index}>
+                  {text.trim().replace(/\s+/g, " ")}
+                  {index < finalText.length - 1 ? "\n" : ""}
+                </Text>
+              ))}
+            </Text>
+          )}
+          <Text> </Text>
+          <Text style={WireCardLayoutStyles.seeMore}>See more →</Text>
+        </View>
+      </View>
+      <MenuInteraction containerStyles={{ marginBottom: 12 }} />
+    </TouchableOpacity>
+  );
+}

package/src/layout/WireUploadLayout.jsx

@@ -0,0 +1,249 @@
+import { useState } from "react";
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import * as ImagePicker from "expo-image-picker";
+import * as VideoThumbnails from "expo-video-thumbnails";
+import { Ionicons } from "@expo/vector-icons";
+import { WireUploadStyles } from "../styles/WireUploadStyles";
+import { CustomizedButton, DropDown, InputField } from "@wereform/pkgm-shared";
+
+export function WireUploadLayout({
+  profilePic,
+  userName,
+  onPressVideoUploadScreen,
+  onPressWireUpload,
+  showUploadContainers = false,
+  showDropDowns = false,
+}) {
+  const [wireText, setWireText] = useState(``);
+  const [media, setMedia] = useState(null); // image/video URI
+  const [thumbnails, setThumbnails] = useState([]);
+  const [heading, setHeading] = useState("Default Heading!");
+
+  const pickMedia = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images", "videos"],
+      allowsMultipleSelection: true,
+      selectionLimit: 4,
+      quality: 1,
+    });
+
+    if (result.canceled) return;
+
+    const assets = result.assets;
+
+    // Save raw assets
+    setMedia(assets);
+
+    // Generate thumbnails for videos, or use image URI directly
+    const finalThumbs = await Promise.all(
+      assets.map(async asset => {
+        const isVideo =
+          asset.type === "video" || asset.mimeType?.startsWith("video");
+
+        if (isVideo) {
+          try {
+            const { uri } = await VideoThumbnails.getThumbnailAsync(asset.uri, {
+              time: 1000,
+            });
+            return uri;
+          } catch (err) {
+            console.log("Video thumbnail error:", err);
+            return null;
+          }
+        }
+
+        // Image → use directly
+        return asset.uri;
+      })
+    );
+
+    console.log(finalThumbs);
+
+    setThumbnails(finalThumbs);
+  };
+
+  console.log(wireText);
+
+  return (
+    <ScrollView>
+      <View style={WireUploadStyles.container}>
+        <View style={WireUploadStyles.profileSection}>
+          <Image
+            source={{
+              uri:
+                profilePic ||
+                "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+            }}
+            style={WireUploadStyles.userImage}
+          />
+
+          <View style={WireUploadStyles.userInfo}>
+            <Text style={WireUploadStyles.userName}>
+              {userName || "Default Username"}
+            </Text>
+
+            {/* Link to user's public-facing channel page */}
+            {/* <TouchableOpacity
+              onPress={() => Linking.openURL("https://begenone.com")}
+            >
+              <Text style={WireUploadStyles.channelSettingsText}>
+                View Channel
+              </Text>
+            </TouchableOpacity> */}
+          </View>
+        </View>
+        {/* 1 — Composer Input */}
+        <View style={WireUploadStyles.wireInputContainer}>
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Text
+              style={{
+                color: "#fff",
+                fontWeight: "900",
+                fontSize: 24,
+                paddingBottom: 12,
+                flexGrow: 1,
+                justifyContent: "flex-start",
+              }}
+            >
+              Create <Text style={{ color: "#ff6000" }}>Wire</Text>
+            </Text>
+            <TouchableOpacity onPress={onPressVideoUploadScreen}>
+              <Text
+                style={{
+                  color: "#fff",
+                  fontWeight: "500",
+                  fontSize: 14,
+                  paddingBottom: 12,
+                  // flexGrow: 1,
+
+                  alignSelf: "center",
+                }}
+              >
+                Upload <Text style={{ color: "#ff6000" }}>Video</Text>
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View style={WireUploadStyles.wireInputTextContainer}>
+            <InputField
+              multiline
+              placeholder="Write your Wire..."
+              inputWrapper={WireUploadStyles.inputWrapper}
+              inputStyle={WireUploadStyles.aboutTextArea}
+              value={wireText}
+              onChangeText={setWireText}
+            />
+
+            {/* 2 — Media Preview (always below text) */}
+            <View style={WireUploadStyles.mediaContainer}>
+              {thumbnails.map((uri, index) => (
+                <TouchableOpacity key={index} onPress={pickMedia}>
+                  <Image
+                    source={{ uri }}
+                    style={WireUploadStyles.mediaThumb}
+                    resizeMode="cover"
+                  />
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            {/* 3 — Upload Button */}
+            {showUploadContainers && (
+              <View style={WireUploadStyles.uploadButtonContainer}>
+                <TouchableOpacity style={WireUploadStyles.AIGenerateButton}>
+                  <Ionicons name="sparkles-outline" size={24} color="#fff" />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={pickMedia}
+                  style={WireUploadStyles.uploadImageButton}
+                >
+                  <Ionicons name="image" size={24} color="#fff" />
+                </TouchableOpacity>
+              </View>
+            )}
+          </View>
+
+          {showDropDowns && (
+            <>
+              <DropDown
+                styles={{
+                  marginLeft: 0,
+                  marginRight: 0,
+                  marginTop: 18,
+                  // paddingRight: 24,
+                }}
+                iconStyles={{ paddingRight: 16 }}
+                selectText={"Select Age Group"}
+                data={[
+                  { key: 1, label: "Under 14 of age" },
+                  { key: 2, label: "Above 14 of age" },
+                ]}
+              />
+
+              <DropDown
+                styles={{ marginLeft: 0, marginRight: 0, marginTop: 18 }}
+                selectText={"Comments"}
+                iconStyles={{ paddingRight: 16 }}
+                data={[
+                  { key: 1, label: "Turn — ON" },
+                  { key: 2, label: "Turn — OFF" },
+                ]}
+              />
+            </>
+          )}
+        </View>
+
+        <View
+          style={{
+            flexDirection: "row",
+            width: "auto",
+            justifyContent: "space-between",
+
+            marginTop: 60,
+            marginLeft: 24,
+            marginRight: 24,
+          }}
+        >
+          <CustomizedButton
+            label={"Post Wire"}
+            style={{
+              backgroundColor: "#ff6000",
+              marginRight: 6,
+            }}
+            fontWeight={"900"}
+            textColor={"#fff"}
+            onPress={() => onPressWireUpload(wireText, heading)}
+          />
+          {/* <CustomizedButton
+            label={"Schedule"}
+            style={{
+              backgroundColor: "#202020",
+              marginLeft: 6,
+            }}
+            fontWeight={"900"}
+            textColor={"#404040"}
+          /> */}
+        </View>
+
+        {/* 4 — Future AI Row */}
+        {/* <WireAIBar text={text} onChange={setText} /> */}
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({});

package/src/layout/WireViewLayout.jsx

@@ -0,0 +1,105 @@
+import { ScrollView, Text, View } from "react-native";
+import { WireChannelMetadata } from "../components/WireChannelMetadata";
+import { WireCardLayoutStyles } from "../styles/WireCardLayoutStyles";
+import {
+  MenuInteraction,
+  MenuChannelMeta,
+  CustomizedButton,
+} from "@wereform/pkgm-shared";
+import { WireViewLayoutStyles } from "../styles/WireViewLayoutStyles";
+import { useState } from "react";
+
+export function WireViewLayout({
+  content,
+  channelLogo,
+  userName,
+  subscribersCount,
+  timeAgo,
+  viewsText,
+  isItMe,
+  onPressDeleteButton,
+}) {
+  const [isPressed, setPressed] = useState(false);
+
+  const contentText =
+    content ??
+    `Curiosity is the real engine of progress. You don’t need certainty — you need movement. Every experiment, every failure, every weird idea you chase sharpens your understanding of reality. 
+
+Stop waiting to “figure it out” first. Dive in, break things, rebuild smarter. The mind grows through friction, not comfort. 
+
+Mastery isn’t perfection; it’s the relentless act of returning to the edge — again and again — until the unknown feels like home. The goal isn’t to win. It’s to keep becoming.
+
+#curiosity #growth #mindset #learning`;
+
+  // Only compute finalText if we actually have content
+  const finalText = contentText
+    ? contentText.replace(/\r\n/g, "\n").split("\n")
+    : [];
+
+  function togglePressed() {
+    setPressed(prev => !prev);
+  }
+
+  return (
+    <ScrollView
+      style={WireViewLayoutStyles.container}
+      contentContainerStyle={{ flexGrow: 1 }}
+    >
+      <View style={WireViewLayoutStyles.secondaryContainer}>
+        <MenuChannelMeta
+          containerStyles={{
+            marginTop: 0,
+            paddingBottom: 12,
+            marginLeft: 0,
+            marginRight: 0,
+          }}
+          channelLogo={channelLogo}
+          userName={userName}
+          subscribersCount={subscribersCount}
+          timeAgo={timeAgo}
+          viewsText={viewsText}
+        />
+        <View>
+          <Text style={WireViewLayoutStyles.mainText}>
+            {finalText.length > 0 && (
+              <Text style={WireViewLayoutStyles.mainText}>
+                {finalText.map((text, index) => (
+                  <Text key={index}>
+                    {text.trim().replace(/\s+/g, " ")}
+                    {index < finalText.length - 1 ? "\n" : ""}
+                  </Text>
+                ))}
+              </Text>
+            )}
+          </Text>
+        </View>
+      </View>
+      <View>
+        <MenuInteraction pressed={togglePressed} />
+
+        {isItMe && isPressed && (
+          <CustomizedButton
+            label={"Delete"}
+            textColor={"white"}
+            style={[
+              { backgroundColor: "red", marginTop: 12 },
+              isItMe
+                ? {
+                    position: "absolute",
+                    width: 80,
+                    height: 35,
+                    right: 24,
+                    bottom: 48,
+                  }
+                : "",
+            ]}
+            onPress={() => {
+              console.log("DELETE PRESSED");
+              onPressDeleteButton();
+            }}
+          />
+        )}
+      </View>
+    </ScrollView>
+  );
+}

package/src/styles/WireCardLayoutStyles.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireCardLayoutStyles = StyleSheet.create({
+  container: {
+    width: "auto",
+    minHeight: 200,
+    justifyContent: "space-between",
+    // aspectRatio: 1 / 1,
+    margin: 12,
+    padding: 12,
+    backgroundColor: globalStyles.colors.colorPrimary350,
+    borderRadius: globalStyles.borders.borderPrimary100,
+  },
+
+  mainTextContainer: {
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    marginTop: 10,
+    maxHeight: 360,
+  },
+
+  mainText: {
+    color: "#ddd",
+    fontSize: 15,
+    lineHeight: 22,
+    letterSpacing: 0.3,
+  },
+
+  seeMore: {
+    color: "#fff",
+    fontWeight: "600",
+    marginTop: 4,
+    fontSize: 14,
+  },
+});

package/src/styles/WireChannelMetadataStyles.js

@@ -0,0 +1,104 @@
+import { Platform, StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireChannelMetadataStyles = StyleSheet.create({
+  dateViewsContainer: {
+    flexDirection: "column",
+    width: "auto",
+    justifyContent: "center",
+    alignItems: "flex-end",
+  },
+
+  dateContainer: {
+    flexDirection: "row",
+    paddingBottom: 4,
+    // rowGap: 20,
+  },
+
+  // dateIcon: {
+  //   marginRight: 8,
+  // },
+
+  viewsContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+  },
+
+  // eyeIcon: {
+  //   marginRight: 8,
+  // },
+
+  dateText: {
+    color: globalStyles.colors.colorPrimary600,
+    marginRight: 8,
+    fontSize: Platform.OS === "ios" ? 14 : 12,
+  },
+
+  viewsText: {
+    color: globalStyles.colors.colorPrimary600,
+    marginRight: 8,
+    fontSize: Platform.OS === "ios" ? 14 : 12,
+  },
+
+  channelMetaContainer: {
+    width: "auto",
+    flexDirection: "row",
+    backgroundColor: globalStyles.colors.colorPrimary200,
+    justifyContent: "space-between",
+    // margin: 12,
+    padding: 12,
+    borderRadius: globalStyles.borders.borderPrimary100,
+  },
+
+  channelMetaContainer_ColumnOne: {
+    flexDirection: "row",
+  },
+
+  userImage: {
+    width: 40,
+    height: 40,
+    borderRadius: globalStyles.borders.borderPrimary50,
+  },
+
+  nameSubcountContainer: {
+    flexDirection: "column",
+    justifyContent: "center",
+    paddingLeft: 12,
+  },
+
+  userName: {
+    color: "#fff",
+    fontSize: 16,
+    paddingBottom: 4,
+    fontWeight: "bold",
+  },
+
+  subCountContainer: {
+    flexDirection: "row",
+  },
+
+  subCount: {
+    color: globalStyles.colors.colorPrimary600,
+    paddingRight: 6,
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+
+  subText: {
+    color: "#fff",
+    fontSize: 12,
+  },
+
+  subscribeButtonContainer: {
+    backgroundColor: globalStyles.colors.colorPrimary600,
+    width: 100,
+    borderRadius: globalStyles.borders.borderPrimary400,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  subscribeButtonText: {
+    color: "#fff",
+    fontWeight: "bold",
+  },
+});

package/src/styles/WireUploadStyles.js

@@ -0,0 +1,132 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireUploadStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#141414",
+    marginBottom: 120,
+    // paddingHorizontal: 16,
+    // paddingTop: 20,
+  },
+
+  profileSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    // paddingHorizontal: 36,
+
+    borderBottomWidth: 1,
+    paddingTop: 18,
+    paddingBottom: 18,
+    marginLeft: 36,
+    marginRight: 36,
+    borderColor: globalStyles.colors.colorPrimary450,
+  },
+  userImage: {
+    width: 60,
+    height: 60,
+    borderRadius: 12,
+    marginRight: 16,
+  },
+  userInfo: {
+    flexDirection: "column",
+    justifyContent: "center",
+  },
+  userName: {
+    color: "white",
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  channelSettingsText: {
+    color: "#ff6600",
+    marginTop: 4,
+  },
+
+  // /////////////////
+
+  wireInputContainer: {
+    marginRight: 24,
+    marginLeft: 24,
+    marginTop: 24,
+  },
+
+  wireInputTextContainer: {
+    backgroundColor: "#202020",
+    borderRadius: 12,
+  },
+
+  inputWrapper: {
+    backgroundColor: "#202020",
+    width: "auto",
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  aboutTextArea: {
+    textAlignVertical: "top",
+    // whiteSpace: "pre-line",
+    whiteSpace: "pre",
+
+    height: "auto",
+    minHeight: 200,
+    color: "white",
+    paddingTop: 16,
+    marginTop: 0,
+    lineHeight: 24,
+    fontWeight: 400,
+    fontSize: 18,
+    paddingBottom: 36,
+  },
+
+  media: {
+    width: "auto",
+    height: 200,
+    borderRadius: 14,
+    // marginBottom: 16,
+    backgroundColor: "#000",
+  },
+
+  uploadButtonContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+  },
+
+  AIGenerateButton: {
+    paddingRight: 24,
+  },
+
+  uploadImageButton: {
+    paddingRight: 24,
+    // backgroundColor: "#252525",
+    paddingVertical: 24,
+    borderRadius: 12,
+    // marginBottom: 20,
+    // marginTop: 20,
+  },
+
+  uploadButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "600",
+    marginLeft: 8,
+  },
+
+  mediaContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10,
+    width: "auto",
+    marginBottom: 16,
+    paddingLeft: 6,
+    paddingRight: 6,
+    justifyContent: "space-evenly",
+  },
+
+  mediaThumb: {
+    width: 120,
+    height: 120,
+    borderRadius: 12,
+    backgroundColor: "#000",
+  },
+});

package/src/styles/WireViewLayoutStyles.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { globalStyles } from "./globalStyles";
+
+export const WireViewLayoutStyles = StyleSheet.create({
+  container: {
+    width: "auto",
+    margin: 12,
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 18,
+    paddingRight: 18,
+    backgroundColor: globalStyles.colors.colorPrimary350,
+    borderRadius: globalStyles.borders.borderPrimary200,
+    marginBottom: 96,
+  },
+
+  secondaryContainer: {
+    flexDirection: "column",
+    paddingBottom: 24,
+  },
+
+  mainText: {
+    color: "#fff",
+    lineHeight: 28,
+    fontSize: 18,
+  },
+});

package/src/styles/globalStyles.js

@@ -0,0 +1,28 @@
+export const globalStyles = {
+  colors: {
+    colorPrimary50: "rgba(21, 21, 21, .7)",
+    colorPrimary100: "#151515",
+
+    colorPrimary200: "#252525",
+    colorPrimary250: "rgba(37, 37, 37, .9)",
+
+    colorPrimary300: "#3C3C3C",
+    colorPrimary350: "rgba(60,60,60,.2)",
+
+    colorPrimary400: "#7F7F7F",
+    colorPrimary450: "rgba(127, 127, 127, .3)",
+
+    colorPrimary500: "#D3D3D3",
+
+    colorPrimary600: "#ff6600ff",
+
+    colorPrimary700: "#FF8800",
+  },
+  borders: {
+    borderPrimary50: 8,
+    borderPrimary100: 10,
+    borderPrimary200: 12,
+    borderPrimary300: 15,
+    borderPrimary400: 30,
+  },
+};