@wereform/pkgm-video 1.0.2 → 1.0.4

package/dist/components/Thumbnail.js

@@ -1 +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}})});}
+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

@@ -1 +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})});}
+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 isFocused=(0,_native.useIsFocused)();var playerRef=(0,_react.useRef)(null);var player=(0,_expoVideo.useVideoPlayer)(videoSource,function(p){p.loop=true;p.play();playerRef.current=p;});(0,_react.useEffect)(function(){if(!player)return;if(isFocused)player.play();else player.pause();},[isFocused,player]);(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/layout/VideoCardHorizontalLayout.js

@@ -1 +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}})]})]});}
+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

@@ -1 +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"})]})]})]});};
+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;console.log("Checking for Conent Thumbnail URL: ",contentThumbUrl);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

@@ -1 +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);})]});}
+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},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"}),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/package.json

@@ -1,33 +1,37 @@
-{
-  "name": "@wereform/pkgm-video",
-  "version": "1.0.2",
-  "main": "dist/index.js",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "@expo/vector-icons": "*",
-    "expo": "*",
-    "expo-video": "*",
-    "react": "*",
-    "react-native": "*"
-  },
-  "dependencies": {
-    "@wereform/pkgm-api": "^1.0.7",
-    "@wereform/pkgm-shared": "^1.0.2",
-    "@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"
-  },
-  "scripts": {
-    "build": "babel src --out-dir dist --extensions .js,.jsx"
-  }
-}
+{
+  "name": "@wereform/pkgm-video",
+  "version": "1.0.4",
+  "source": "dist/index.js",
+  "main": "dist/index.js",
+  "react-native": "dist/index.js",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions .js,.jsx",
+    "prepublishOnly": "pnpm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": "*",
+    "expo": "*",
+    "expo-video": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@wereform/pkgm-api": "^1.0.10",
+    "@wereform/pkgm-shared": "^1.0.4",
+    "@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,36 @@
+import { Image, View } from "react-native";
+
+/**
+ * Thumbnail
+ *
+ * Lightweight thumbnail renderer for video and content previews.
+ *
+ * Props:
+ * - thumbnailURL: string URL of the thumbnail image
+ * - thumbHeight: numeric height for the thumbnail container
+ *
+ * Behavior:
+ * - Falls back to a default image when no URL is provided
+ * - Maintains a fixed 16:9 aspect ratio
+ * - Intended for list cards and compact layouts
+ */
+
+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,59 @@
+import { useEvent } from "expo";
+import { useVideoPlayer, VideoView } from "expo-video";
+import { View, useWindowDimensions } from "react-native";
+import { VideoPlayerStyles } from "../styles/VideoPlayerStyles";
+import { useCallback, useEffect, useRef } from "react";
+import { useIsFocused, useFocusEffect } from "@react-navigation/native";
+
+/**
+ * VideoPlayer
+ *
+ * Mobile-optimized video playback component using expo-video.
+ *
+ * Props:
+ * - videoSource: video URI or source object compatible with useVideoPlayer
+ *
+ * Behavior:
+ * - Auto-plays and loops video on mount
+ * - Resumes playback when screen gains focus
+ * - Pauses playback when screen loses focus
+ * - Maintains responsive 16:9 aspect ratio based on device width
+ *
+ * Notes:
+ * - Player instance is stored via ref for lifecycle control
+ * - Picture-in-picture is enabled
+ * - Designed for full video view screens
+ */
+
+export function VideoPlayer({ videoSource }) {
+  const { width } = useWindowDimensions(); // Dynamically get device width
+  const isFocused = useIsFocused();
+
+  const playerRef = useRef(null);
+
+  const player = useVideoPlayer(videoSource, p => {
+    p.loop = true;
+    p.play();
+    playerRef.current = p; // store instance
+  });
+
+  useEffect(() => {
+    if (!player) return;
+
+    if (isFocused) player.play();
+    else player.pause();
+  }, [isFocused, player]);
+
+  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/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,71 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import { Thumbnail } from "../components/Thumbnail";
+import { CustomizedTitle, DateViews } from "@wereform/pkgm-shared";
+
+/**
+ * VideoCardHorizontalLayout
+ *
+ * Compact horizontal video card used in lists or history views.
+ * Displays thumbnail, title, and basic metadata (date + views).
+ *
+ * Props:
+ * - eyeIcon: ReactNode for views icon
+ * - timeAgo: string representing publish time
+ * - viewsText: string/number of views
+ * - titleText: video title
+ * - contentThumbUrl: thumbnail image URL
+ * - navigateToVideo: navigation handler on press
+ *
+ * Notes:
+ * - Entire card is pressable
+ * - Uses shared UI components for consistency
+ */
+
+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,95 @@
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import { VideoCardLayoutStyles } from "../styles/VideoCardLayoutStyles";
+import { DateViews } from "@wereform/pkgm-shared";
+
+/**
+ * VideoCardHorizontalLayout
+ *
+ * Compact horizontal video card used in lists or history views.
+ * Displays thumbnail, title, and basic metadata (date + views).
+ *
+ * Props:
+ * - eyeIcon: ReactNode for views icon
+ * - timeAgo: string representing publish time
+ * - viewsText: string/number of views
+ * - titleText: video title
+ * - contentThumbUrl: thumbnail image URL
+ * - navigateToVideo: navigation handler on press
+ *
+ * Notes:
+ * - Entire card is pressable
+ * - Uses shared UI components for consistency
+ */
+
+export const VideoCardLayout = ({
+  timeAgo,
+  viewsText,
+  titleText,
+  userNameText,
+  contentThumbUrl,
+  channelLogo,
+  containerStyles,
+  dateViewsContainerStyle,
+  userImageStyles,
+  titleNameContainerStyles,
+  userNameTextStyles,
+  titleTextStyles,
+  thumbnailImageStyles,
+  customMetaDataStyles,
+  navigateToVideo,
+}) => {
+  console.log("Checking for Conent Thumbnail URL: ", contentThumbUrl);
+  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,130 @@
+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";
+
+/**
+ * VideoViewLayout
+ *
+ * Full video viewing screen layout.
+ * Renders video player, title, interactions, channel metadata,
+ * and a list of suggested videos.
+ *
+ * Props:
+ * - videoSource: video stream/source
+ * - CustomizedTitleText: main video title
+ * - MenuChannelMetaTimeAgo: publish time
+ * - MenuChannelMetaViews: view count
+ * - MenuChannelMetaUserName: channel name
+ * - MenuChannelMetaSubCount: subscriber count
+ * - MenuChannelMetaChannelLogo: channel avatar
+ * - suggestedVideos: array of related video objects
+ *
+ * Notes:
+ * - Suggested videos are rendered using VideoCardLayout
+ * - Layout is scrollable and mobile-optimized
+ * - Interaction icons are visual; behavior is wired elsewhere
+ */
+
+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 key={videoSource} 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,64 @@
+import { globalStyles } from "./globalStyles";
+
+/* Video card layout styles for feed and listings */
+export const VideoCardLayoutStyles = {
+  container: {
+    // Video card outer container
+    width: "auto",
+    flexDirection: "column",
+    marginRight: 12,
+    marginLeft: 12,
+    marginBottom: 40,
+  },
+
+  imageWrapper: {
+    // Video thumbnail wrapper
+    width: "100%",
+  },
+
+  image: {
+    // Video thumbnail image
+    width: "100%",
+    resizeMode: "contain",
+    aspectRatio: 16 / 9,
+    borderRadius: globalStyles.borders.borderPrimary100,
+  },
+
+  metaData: {
+    // Metadata row below thumbnail
+    flexDirection: "row",
+    marginTop: 16,
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+
+  userImage: {
+    // Channel avatar image
+    width: 40,
+    height: 40,
+    borderRadius: globalStyles.borders.borderPrimary50,
+  },
+
+  titleNameContainer: {
+    // Video title and author container
+    width: "100%",
+    flexDirection: "column",
+    paddingLeft: 16,
+    flexShrink: 1,
+  },
+
+  titleText: {
+    // Video title text
+    fontSize: 22,
+    paddingBottom: 12,
+    lineHeight: 30,
+    fontWeight: "bold",
+    color: "#fff",
+  },
+
+  userNameText: {
+    // Channel name text
+    color: globalStyles.colors.colorPrimary400,
+    fontWeight: "bold",
+  },
+};

package/src/styles/VideoPlayerStyles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+
+/* Video player layout and control styles */
+export const VideoPlayerStyles = StyleSheet.create({
+  contentContainer: {
+    // Player content wrapper
+    alignItems: "center",
+    justifyContent: "flex-start",
+  },
+
+  video: {
+    // Video element styling
+  },
+
+  controlsContainer: {
+    // Playback controls container
+    padding: 10,
+  },
+});

package/src/styles/globalStyles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from "react-native";
+
+/* Global design tokens for colors and border radii */
+export const globalStyles = StyleSheet.create({
+  colors: {
+    // Primary background shades
+    colorPrimary50: "rgba(21, 21, 21, .7)",
+    colorPrimary100: "#151515",
+    colorPrimary200: "#252525",
+    colorPrimary300: "#3C3C3C",
+    colorPrimary350: "rgba(60,60,60,.2)",
+    colorPrimary400: "#7F7F7F",
+    colorPrimary500: "#D3D3D3",
+
+    // Accent and action colors
+    colorPrimary600: "#ff6600ff",
+    colorPrimary700: "#FF8800",
+  },
+
+  borders: {
+    // Standard border radius scale
+    borderPrimary50: 8,
+    borderPrimary100: 10,
+    borderPrimary200: 12,
+    borderPrimary300: 15,
+    borderPrimary400: 30,
+  },
+});