@wereform/pkgm-video 1.0.0

package/README.md

@@ -0,0 +1,24 @@
+# @begenone/pkgm-video
+
+This package manages **video-related logic** in the BEGENONE app.
+
+## Overview
+
+Everything that involves videos — uploading, displaying, formatting, and retrieving metadata — is handled here.
+
+## Features
+
+- 📦 Fetch video lists (feeds, channel-specific, trending)
+- 📹 Display video player with metadata
+- ⏱ Duration, title, and preview management
+- 🧠 Handles video encoding status and thumbnail fallback
+
+## Usage
+
+Any screen that shows videos — including feeds, Shorts, and channel pages — imports logic or components from this package.
+
+## Tech Stack
+
+- Axios for API calls
+- React Native Video or Expo AV
+- Shared utilities from `@begenone/pkgm-shared`

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["module:metro-react-native-babel-preset"],
+};

package/dist/components/Thumbnail.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.Thumbnail=Thumbnail;var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-video\\src\\components\\Thumbnail.jsx";function Thumbnail(_ref){var thumbnailURL=_ref.thumbnailURL,thumbHeight=_ref.thumbHeight;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:"auto"},children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:thumbnailURL||"https://begenone-images.s3.us-east-1.amazonaws.com/let+Me+Love+you.jpg"},style:{width:"100%",height:thumbHeight,aspectRatio:16/9,borderRadius:5}})});}

package/dist/components/VideoPlayer.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.VideoPlayer=VideoPlayer;var _expo=require("expo");var _expoVideo=require("expo-video");var _reactNative=require("react-native");var _VideoPlayerStyles=require("../styles/VideoPlayerStyles");var _react=require("react");var _native=require("@react-navigation/native");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-video\\src\\components\\VideoPlayer.jsx";function VideoPlayer(_ref){var videoSource=_ref.videoSource;var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var playerRef=(0,_react.useRef)(null);var player=(0,_expoVideo.useVideoPlayer)(videoSource,function(p){p.loop=true;p.play();playerRef.current=p;});(0,_native.useFocusEffect)((0,_react.useCallback)(function(){if(playerRef.current){playerRef.current.play();}return function(){if(playerRef.current){playerRef.current.pause();}};},[]));(0,_expo.useEvent)(player,"playingChange");return(0,_jsxRuntime.jsx)(_reactNative.View,{style:_VideoPlayerStyles.VideoPlayerStyles.contentContainer,children:(0,_jsxRuntime.jsx)(_expoVideo.VideoView,{style:[_VideoPlayerStyles.VideoPlayerStyles.video,{width:width,height:width*(9/16)}],player:player,allowsPictureInPicture:true})});}

package/dist/components/VideoTestScreen.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.VideoTestScreen=void 0;var _reactNative=require("react-native");var _pkgmShared=require("@wereform/pkgm-shared");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-video\\src\\components\\VideoTestScreen.jsx";var VideoTestScreen=exports.VideoTestScreen=function VideoTestScreen(){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flex:1,justifyContent:"center",alignItems:"center"},children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{children:"Video Test Screen"}),(0,_jsxRuntime.jsx)(_pkgmShared.SampleButton,{title:"Press From Shared!",onPress:function onPress(){return alert("Works!");}})]});};

package/dist/index.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"VideoCardHorizontalLayout",{enumerable:true,get:function get(){return _VideoCardHorizontalLayout.VideoCardHorizontalLayout;}});Object.defineProperty(exports,"VideoCardLayout",{enumerable:true,get:function get(){return _VideoCardLayout.VideoCardLayout;}});Object.defineProperty(exports,"VideoPlayer",{enumerable:true,get:function get(){return _VideoPlayer.VideoPlayer;}});Object.defineProperty(exports,"VideoViewLayout",{enumerable:true,get:function get(){return _VideoViewLayout.VideoViewLayout;}});var _VideoCardLayout=require("./layout/VideoCardLayout");var _VideoPlayer=require("./components/VideoPlayer");var _VideoViewLayout=require("./layout/VideoViewLayout");var _VideoCardHorizontalLayout=require("./layout/VideoCardHorizontalLayout");

package/dist/layout/VideoCardHorizontalLayout.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.VideoCardHorizontalLayout=VideoCardHorizontalLayout;var _reactNative=require("react-native");var _Thumbnail=require("../components/Thumbnail");var _pkgmShared=require("@wereform/pkgm-shared");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-video\\src\\layout\\VideoCardHorizontalLayout.jsx";function VideoCardHorizontalLayout(_ref){var eyeIcon=_ref.eyeIcon,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,titleText=_ref.titleText,contentThumbUrl=_ref.contentThumbUrl,navigateToVideo=_ref.navigateToVideo;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{onPress:navigateToVideo,style:{flexDirection:"row",padding:8},children:[(0,_jsxRuntime.jsx)(_Thumbnail.Thumbnail,{thumbHeight:90,thumbnailURL:contentThumbUrl}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flex:1,marginLeft:12},children:[(0,_jsxRuntime.jsx)(_pkgmShared.CustomizedTitle,{title:titleText||"This is a dummy text title for the video",fontSize:18,textColor:"white",style:{width:"100%"}}),(0,_jsxRuntime.jsx)(_pkgmShared.DateViews,{eyeIcon:eyeIcon,timeAgo:timeAgo,viewsText:viewsText,containerStyles:{flexDirection:"column",justifyContent:"start",height:40},dateContainerStyles:{paddingBottom:4},dateTextStyles:{fontSize:12},viewsTextStyles:{fontSize:12}})]})]});}

package/dist/layout/VideoCardLayout.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.VideoCardLayout=void 0;var _reactNative=require("react-native");var _VideoCardLayoutStyles=require("../styles/VideoCardLayoutStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-video\\src\\layout\\VideoCardLayout.jsx";var VideoCardLayout=exports.VideoCardLayout=function VideoCardLayout(_ref){var timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,titleText=_ref.titleText,userNameText=_ref.userNameText,contentThumbUrl=_ref.contentThumbUrl,channelLogo=_ref.channelLogo,containerStyles=_ref.containerStyles,dateViewsContainerStyle=_ref.dateViewsContainerStyle,userImageStyles=_ref.userImageStyles,titleNameContainerStyles=_ref.titleNameContainerStyles,userNameTextStyles=_ref.userNameTextStyles,titleTextStyles=_ref.titleTextStyles,thumbnailImageStyles=_ref.thumbnailImageStyles,customMetaDataStyles=_ref.customMetaDataStyles,navigateToVideo=_ref.navigateToVideo;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_VideoCardLayoutStyles.VideoCardLayoutStyles.container,containerStyles],onPress:navigateToVideo,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:_VideoCardLayoutStyles.VideoCardLayoutStyles.imageWrapper,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:contentThumbUrl||"https://begenone-images.s3.us-east-1.amazonaws.com/let+Me+Love+you.jpg"},style:[_VideoCardLayoutStyles.VideoCardLayoutStyles.image,thumbnailImageStyles]})}),(0,_jsxRuntime.jsx)(_pkgmShared.DateViews,{timeAgo:timeAgo,viewsText:viewsText,containerStyles:dateViewsContainerStyle}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_VideoCardLayoutStyles.VideoCardLayoutStyles.metaData,customMetaDataStyles],children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:[_VideoCardLayoutStyles.VideoCardLayoutStyles.userImage,userImageStyles]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_VideoCardLayoutStyles.VideoCardLayoutStyles.titleNameContainer,titleNameContainerStyles],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_VideoCardLayoutStyles.VideoCardLayoutStyles.titleText,titleTextStyles],numberOfLines:2,children:titleText||"This is a Default Title Text in case of nothing being passed in."}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[_VideoCardLayoutStyles.VideoCardLayoutStyles.userNameText,userNameTextStyles],children:userNameText||"Default Username"})]})]})]});};

package/dist/layout/VideoViewLayout.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.VideoViewLayout=VideoViewLayout;var _reactNative=require("react-native");var _VideoPlayer=require("../components/VideoPlayer");var _pkgmShared=require("@wereform/pkgm-shared");var _vectorIcons=require("@expo/vector-icons");var _VideoCardLayout=require("./VideoCardLayout");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-video\\src\\layout\\VideoViewLayout.jsx";function VideoViewLayout(_ref){var _this=this;var videoSource=_ref.videoSource,CustomizedTitleText=_ref.CustomizedTitleText,MenuChannelMetaTimeAgo=_ref.MenuChannelMetaTimeAgo,MenuChannelMetaViews=_ref.MenuChannelMetaViews,MenuChannelMetaUserName=_ref.MenuChannelMetaUserName,MenuChannelMetaSubCount=_ref.MenuChannelMetaSubCount,MenuChannelMetaChannelLogo=_ref.MenuChannelMetaChannelLogo,suggestedVideos=_ref.suggestedVideos;console.log("SUGGESTED VIDEOS FROM VIDEO VIEWS LAYOUT: =>\n"+JSON.stringify(suggestedVideos[0].videos,null,2));return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{children:(0,_jsxRuntime.jsx)(_VideoPlayer.VideoPlayer,{videoSource:videoSource})}),(0,_jsxRuntime.jsx)(_pkgmShared.CustomizedTitle,{title:CustomizedTitleText,fontSize:22,fontFamily:"Inter",textColor:"white",style:{paddingTop:18,paddingLeft:22,paddingRight:22,paddingBottom:18,alignSelf:"start"},textStyle:{lineHeight:28}}),(0,_jsxRuntime.jsx)(_pkgmShared.MenuInteraction,{likeIcon:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"thumbs-up-outline",size:24,color:"white"}),dislikeIcon:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"thumbs-down-outline",size:24,color:"white"}),shareIcon:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"arrow-redo-outline",size:24,color:"white"}),commentIcon:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"chatbubble-ellipses-outline",size:24,color:"white"}),containerStyles:{marginLeft:12}}),(0,_jsxRuntime.jsx)(_pkgmShared.MenuChannelMeta,{calendarIcon:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar-clear-outline",size:18,color:"white"}),timeAgo:MenuChannelMetaTimeAgo,eyeIcon:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"eye-outline",size:18,color:"white"}),viewsText:MenuChannelMetaViews,userName:MenuChannelMetaUserName,subscribersCount:MenuChannelMetaSubCount,channelLogo:MenuChannelMetaChannelLogo,containerStyles:{marginTop:12}}),suggestedVideos[0].videos.map(function(video){var _video$channel;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginTop:24},children:(0,_jsxRuntime.jsx)(_VideoCardLayout.VideoCardLayout,{titleText:video.title,contentThumbUrl:video.thumbUrl,userNameText:((_video$channel=video.channel)==null?void 0:_video$channel.name)||"Unknown",channelLogo:video.channelLogo,timeAgo:video.videoTimeAgo,viewsText:String(video.views),calendarIcon:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar-clear-outline",size:18,color:"white"}),eyeIcon:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"eye-outline",size:18,color:"white"})},video._id)},video._id);})]});}

package/dist/styles/VideoCardLayoutStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.VideoCardLayoutStyles=void 0;var _globalStyles=require("./globalStyles");var VideoCardLayoutStyles=exports.VideoCardLayoutStyles={container:{width:"auto",flexDirection:"column",marginRight:12,marginLeft:12,marginBottom:40},imageWrapper:{width:"100%"},image:{width:"100%",resizeMode:"contain",aspectRatio:16/9,borderRadius:_globalStyles.globalStyles.borders.borderPrimary100},metaData:{flexDirection:"row",marginTop:16,paddingLeft:8,paddingRight:8},userImage:{width:40,height:40,borderRadius:_globalStyles.globalStyles.borders.borderPrimary50},titleNameContainer:{width:"100%",flexDirection:"column",paddingLeft:16,flexShrink:1},titleText:{fontSize:22,paddingBottom:12,lineHeight:30,fontWeight:"bold",color:"#fff"},userNameText:{color:_globalStyles.globalStyles.colors.colorPrimary400,fontWeight:"bold"}};

package/dist/styles/VideoPlayerStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.VideoPlayerStyles=void 0;var _reactNative=require("react-native");var VideoPlayerStyles=exports.VideoPlayerStyles=_reactNative.StyleSheet.create({contentContainer:{alignItems:"center",justifyContent:"flex-start"},video:{},controlsContainer:{padding:10}});

package/dist/styles/globalStyles.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.globalStyles=void 0;var _reactNative=require("react-native");var globalStyles=exports.globalStyles=_reactNative.StyleSheet.create({colors:{colorPrimary50:"rgba(21, 21, 21, .7)",colorPrimary100:"#151515",colorPrimary200:"#252525",colorPrimary300:"#3C3C3C",colorPrimary350:"rgba(60,60,60,.2)",colorPrimary400:"#7F7F7F",colorPrimary500:"#D3D3D3",colorPrimary600:"#ff6600ff",colorPrimary700:"#FF8800"},borders:{borderPrimary50:8,borderPrimary100:10,borderPrimary200:12,borderPrimary300:15,borderPrimary400:30}});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@wereform/pkgm-video",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions .js,.jsx"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": "*",
+    "expo": "*",
+    "expo-video": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@wereform/pkgm-api": "^1.0.0",
+    "@wereform/pkgm-shared": "^1.0.0",
+    "@expo/vector-icons": "^15.0.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "metro-react-native-babel-preset": "^0.77.0"
+  }
+}

package/packageJSON.md

@@ -0,0 +1,27 @@
+{
+"name": "@begenone/pkgm-video",
+"version": "1.0.0",
+"private": true,
+"main": "dist/index.js",
+"scripts": {
+"build": "babel src --out-dir dist --extensions .js,.jsx"
+},
+"peerDependencies": {
+"@expo/vector-icons": "_",
+"expo": "_",
+"expo-video": "_",
+"react": "_",
+"react-native": "_"
+},
+"dependencies": {
+"@begenone/pkgm-api": "workspace:_",
+"@begenone/pkgm-shared": "workspace:\*",
+"@expo/vector-icons": "^15.0.3"
+},
+"devDependencies": {
+"@babel/cli": "^7.28.3",
+"@babel/core": "^7.28.5",
+"@babel/preset-env": "^7.28.5",
+"metro-react-native-babel-preset": "^0.77.0"
+}
+}

package/src/components/Thumbnail.jsx

@@ -0,0 +1,21 @@
+import { Image, View } from "react-native";
+
+export function Thumbnail({ thumbnailURL, thumbHeight }) {
+  return (
+    <View style={{ width: "auto" }}>
+      <Image
+        source={{
+          uri:
+            thumbnailURL ||
+            "https://begenone-images.s3.us-east-1.amazonaws.com/let+Me+Love+you.jpg",
+        }}
+        style={{
+          width: "100%",
+          height: thumbHeight,
+          aspectRatio: 16 / 9,
+          borderRadius: 5,
+        }}
+      />
+    </View>
+  );
+}

package/src/components/VideoPlayer.jsx

@@ -0,0 +1,47 @@
+import { useEvent } from "expo";
+import { useVideoPlayer, VideoView } from "expo-video";
+import { View, useWindowDimensions } from "react-native";
+import { VideoPlayerStyles } from "../styles/VideoPlayerStyles";
+import { useCallback, useRef } from "react";
+import { useFocusEffect } from "@react-navigation/native";
+
+export function VideoPlayer({ videoSource }) {
+  const { width } = useWindowDimensions(); // Dynamically get device width
+
+  const playerRef = useRef(null);
+
+  const player = useVideoPlayer(videoSource, p => {
+    p.loop = true;
+    p.play();
+    playerRef.current = p; // store instance
+  });
+
+  useFocusEffect(
+    useCallback(() => {
+      if (playerRef.current) {
+        playerRef.current.play();
+      }
+
+      return () => {
+        if (playerRef.current) {
+          playerRef.current.pause();
+          // Optional: fully unload the video
+          // playerRef.current.unloadAsync?.();
+        }
+      };
+    }, [])
+  );
+
+  useEvent(player, "playingChange");
+
+  return (
+    <View style={VideoPlayerStyles.contentContainer}>
+      <VideoView
+        style={[VideoPlayerStyles.video, { width, height: width * (9 / 16) }]} // 16:9 ratio
+        player={player}
+        // allowsFullscreen
+        allowsPictureInPicture
+      />
+    </View>
+  );
+}

package/src/components/VideoTestScreen.jsx

@@ -0,0 +1,14 @@
+import { View, Text } from "react-native";
+import { SampleButton } from "@wereform/pkgm-shared";
+
+export const VideoTestScreen = () => {
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <Text>Video Test Screen</Text>
+      <SampleButton
+        title="Press From Shared!"
+        onPress={() => alert("Works!")}
+      />
+    </View>
+  );
+};

package/src/index.js

@@ -0,0 +1,4 @@
+export { VideoCardLayout } from "./layout/VideoCardLayout";
+export { VideoPlayer } from "./components/VideoPlayer";
+export { VideoViewLayout } from "./layout/VideoViewLayout";
+export { VideoCardHorizontalLayout } from "./layout/VideoCardHorizontalLayout";

package/src/layout/VideoCardHorizontalLayout.jsx

@@ -0,0 +1,52 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import { Thumbnail } from "../components/Thumbnail";
+import { CustomizedTitle, DateViews } from "@wereform/pkgm-shared";
+
+export function VideoCardHorizontalLayout({
+  eyeIcon,
+  timeAgo,
+  viewsText,
+  titleText,
+  contentThumbUrl,
+  navigateToVideo,
+}) {
+  return (
+    <TouchableOpacity
+      onPress={navigateToVideo}
+      style={{
+        flexDirection: "row",
+        padding: 8,
+      }}
+    >
+      <Thumbnail thumbHeight={90} thumbnailURL={contentThumbUrl} />
+      <View style={{ flex: 1, marginLeft: 12 }}>
+        <CustomizedTitle
+          title={titleText || "This is a dummy text title for the video"}
+          fontSize={18}
+          textColor="white"
+          style={{ width: "100%" }}
+        />
+
+        <DateViews
+          eyeIcon={eyeIcon}
+          timeAgo={timeAgo}
+          viewsText={viewsText}
+          containerStyles={{
+            flexDirection: "column",
+            justifyContent: "start",
+            height: 40,
+          }}
+          dateContainerStyles={{
+            paddingBottom: 4,
+          }}
+          dateTextStyles={{
+            fontSize: 12,
+          }}
+          viewsTextStyles={{
+            fontSize: 12,
+          }}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+}

package/src/layout/VideoCardLayout.jsx

@@ -0,0 +1,75 @@
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import { VideoCardLayoutStyles } from "../styles/VideoCardLayoutStyles";
+import { DateViews } from "@wereform/pkgm-shared";
+
+export const VideoCardLayout = ({
+  timeAgo,
+  viewsText,
+  titleText,
+  userNameText,
+  contentThumbUrl,
+  channelLogo,
+  containerStyles,
+  dateViewsContainerStyle,
+  userImageStyles,
+  titleNameContainerStyles,
+  userNameTextStyles,
+  titleTextStyles,
+  thumbnailImageStyles,
+  customMetaDataStyles,
+  navigateToVideo,
+}) => {
+  return (
+    <View
+      style={[VideoCardLayoutStyles.container, containerStyles]}
+      onPress={navigateToVideo}
+    >
+      <View style={VideoCardLayoutStyles.imageWrapper}>
+        <Image
+          source={{
+            uri:
+              contentThumbUrl ||
+              "https://begenone-images.s3.us-east-1.amazonaws.com/let+Me+Love+you.jpg",
+          }}
+          style={[VideoCardLayoutStyles.image, thumbnailImageStyles]}
+        />
+      </View>
+
+      <DateViews
+        timeAgo={timeAgo}
+        viewsText={viewsText}
+        containerStyles={dateViewsContainerStyle}
+      />
+
+      <View style={[VideoCardLayoutStyles.metaData, customMetaDataStyles]}>
+        <Image
+          source={{
+            uri:
+              channelLogo ||
+              "https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",
+          }}
+          style={[VideoCardLayoutStyles.userImage, userImageStyles]}
+        />
+        <View
+          style={[
+            VideoCardLayoutStyles.titleNameContainer,
+            titleNameContainerStyles,
+          ]}
+        >
+          <Text
+            style={[VideoCardLayoutStyles.titleText, titleTextStyles]}
+            numberOfLines={2}
+          >
+            {titleText ||
+              "This is a Default Title Text in case of nothing being passed in."}
+          </Text>
+          <Text
+            style={[VideoCardLayoutStyles.userNameText, userNameTextStyles]}
+          >
+            {userNameText || "Default Username"}
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/layout/VideoViewLayout.jsx

@@ -0,0 +1,107 @@
+import { ScrollView, View } from "react-native";
+import { VideoPlayer } from "../components/VideoPlayer";
+import {
+  CustomizedTitle,
+  MenuChannelMeta,
+  MenuInteraction,
+} from "@wereform/pkgm-shared";
+import { Ionicons } from "@expo/vector-icons";
+import { VideoCardLayout } from "./VideoCardLayout";
+
+export function VideoViewLayout({
+  videoSource,
+  CustomizedTitleText,
+  MenuChannelMetaTimeAgo,
+  MenuChannelMetaViews,
+  MenuChannelMetaUserName,
+  MenuChannelMetaSubCount,
+  MenuChannelMetaChannelLogo,
+  suggestedVideos,
+}) {
+  console.log(
+    "SUGGESTED VIDEOS FROM VIDEO VIEWS LAYOUT: =>\n" +
+      JSON.stringify(suggestedVideos[0].videos, null, 2)
+  );
+  return (
+    <ScrollView>
+      <View>
+        <VideoPlayer videoSource={videoSource} />
+      </View>
+      <CustomizedTitle
+        title={CustomizedTitleText}
+        fontSize={22}
+        fontFamily="Inter"
+        textColor="white"
+        style={{
+          paddingTop: 18,
+          paddingLeft: 22,
+          paddingRight: 22,
+          paddingBottom: 18,
+          alignSelf: "start",
+        }}
+        textStyle={{
+          lineHeight: 28,
+        }}
+      />
+
+      <MenuInteraction
+        likeIcon={<Ionicons name="thumbs-up-outline" size={24} color="white" />}
+        dislikeIcon={
+          <Ionicons name="thumbs-down-outline" size={24} color="white" />
+        }
+        shareIcon={
+          <Ionicons name="arrow-redo-outline" size={24} color="white" />
+        }
+        commentIcon={
+          <Ionicons
+            name="chatbubble-ellipses-outline"
+            size={24}
+            color="white"
+          />
+        }
+        containerStyles={{
+          marginLeft: 12,
+        }}
+      />
+
+      <MenuChannelMeta
+        calendarIcon={
+          <Ionicons name="calendar-clear-outline" size={18} color="white" />
+        }
+        timeAgo={MenuChannelMetaTimeAgo}
+        eyeIcon={<Ionicons name="eye-outline" size={18} color="white" />}
+        viewsText={MenuChannelMetaViews}
+        userName={MenuChannelMetaUserName}
+        subscribersCount={MenuChannelMetaSubCount}
+        channelLogo={MenuChannelMetaChannelLogo}
+        containerStyles={{
+          marginTop: 12,
+        }}
+      />
+
+      {suggestedVideos[0].videos.map(video => {
+        return (
+          <View style={{ marginTop: 24 }} key={video._id}>
+            <VideoCardLayout
+              key={video._id}
+              titleText={video.title}
+              contentThumbUrl={video.thumbUrl}
+              userNameText={video.channel?.name || "Unknown"}
+              channelLogo={video.channelLogo}
+              timeAgo={video.videoTimeAgo}
+              viewsText={String(video.views)}
+              calendarIcon={
+                <Ionicons
+                  name="calendar-clear-outline"
+                  size={18}
+                  color="white"
+                />
+              }
+              eyeIcon={<Ionicons name="eye-outline" size={18} color="white" />}
+            />
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}

package/src/styles/VideoCardLayoutStyles.js

@@ -0,0 +1,54 @@
+import { globalStyles } from "./globalStyles";
+
+export const VideoCardLayoutStyles = {
+  container: {
+    width: "auto",
+    flexDirection: "column",
+    marginRight: 12,
+    marginLeft: 12,
+    marginBottom: 40,
+  },
+  imageWrapper: {
+    width: "100%",
+  },
+
+  image: {
+    width: "100%",
+    resizeMode: "contain",
+    aspectRatio: 16 / 9,
+    borderRadius: globalStyles.borders.borderPrimary100,
+  },
+
+  metaData: {
+    flexDirection: "row",
+    marginTop: 16,
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+
+  userImage: {
+    width: 40,
+    height: 40,
+    borderRadius: globalStyles.borders.borderPrimary50,
+  },
+
+  titleNameContainer: {
+    width: "100%",
+    flexDirection: "column",
+    paddingLeft: 16,
+    flexShrink: 1,
+  },
+
+  titleText: {
+    fontSize: 22,
+    paddingBottom: 12,
+    lineHeight: 30,
+    fontWeight: "bold",
+    color: "#fff",
+  },
+
+  userNameText: {
+    color: globalStyles.colors.colorPrimary400,
+    fontWeight: "bold",
+  },
+};

package/src/styles/VideoPlayerStyles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+
+export const VideoPlayerStyles = StyleSheet.create({
+  contentContainer: {
+    // flex: 1,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    // backgroundColor: "#000",
+  },
+  video: {
+    // borderRadius: 10,
+  },
+  controlsContainer: {
+    padding: 10,
+  },
+});

package/src/styles/globalStyles.js

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