@wereform/pkgm-video 1.0.3 → 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,36 +1,37 @@
-{
-  "name": "@wereform/pkgm-video",
-  "version": "1.0.3",
-  "source": "src/index.js",
-  "main": "dist/index.js",
-  "react-native": "src/index.js",
-  "files": [
-    "dist",
-    "src",
-    "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

@@ -1,5 +1,20 @@
 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" }}>

package/src/components/VideoPlayer.jsx

@@ -2,11 +2,32 @@ 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";
+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);
 
@@ -16,21 +37,12 @@ export function VideoPlayer({ videoSource }) {
     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?.();
-        }
-      };
-    }, [])
-  );
+  useEffect(() => {
+    if (!player) return;
+
+    if (isFocused) player.play();
+    else player.pause();
+  }, [isFocused, player]);
 
   useEvent(player, "playingChange");
 

package/src/layout/VideoCardHorizontalLayout.jsx

@@ -2,6 +2,25 @@ 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,

package/src/layout/VideoCardLayout.jsx

@@ -2,6 +2,25 @@ 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,
@@ -19,6 +38,7 @@ export const VideoCardLayout = ({
   customMetaDataStyles,
   navigateToVideo,
 }) => {
+  console.log("Checking for Conent Thumbnail URL: ", contentThumbUrl);
   return (
     <View
       style={[VideoCardLayoutStyles.container, containerStyles]}

package/src/layout/VideoViewLayout.jsx

@@ -8,6 +8,29 @@ import {
 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,
@@ -20,12 +43,12 @@ export function VideoViewLayout({
 }) {
   console.log(
     "SUGGESTED VIDEOS FROM VIDEO VIEWS LAYOUT: =>\n" +
-      JSON.stringify(suggestedVideos[0].videos, null, 2)
+      JSON.stringify(suggestedVideos[0].videos, null, 2),
   );
   return (
     <ScrollView>
       <View>
-        <VideoPlayer videoSource={videoSource} />
+        <VideoPlayer key={videoSource} videoSource={videoSource} />
       </View>
       <CustomizedTitle
         title={CustomizedTitleText}
@@ -52,13 +75,13 @@ export function VideoViewLayout({
         shareIcon={
           <Ionicons name="arrow-redo-outline" size={24} color="white" />
         }
-        commentIcon={
-          <Ionicons
-            name="chatbubble-ellipses-outline"
-            size={24}
-            color="white"
-          />
-        }
+        // commentIcon={
+        //   <Ionicons
+        //     name="chatbubble-ellipses-outline"
+        //     size={24}
+        //     color="white"
+        //   />
+        // }
         containerStyles={{
           marginLeft: 12,
         }}

package/src/styles/VideoCardLayoutStyles.js

@@ -1,18 +1,23 @@
 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,
@@ -20,6 +25,7 @@ export const VideoCardLayoutStyles = {
   },
 
   metaData: {
+    // Metadata row below thumbnail
     flexDirection: "row",
     marginTop: 16,
     paddingLeft: 8,
@@ -27,12 +33,14 @@ export const VideoCardLayoutStyles = {
   },
 
   userImage: {
+    // Channel avatar image
     width: 40,
     height: 40,
     borderRadius: globalStyles.borders.borderPrimary50,
   },
 
   titleNameContainer: {
+    // Video title and author container
     width: "100%",
     flexDirection: "column",
     paddingLeft: 16,
@@ -40,6 +48,7 @@ export const VideoCardLayoutStyles = {
   },
 
   titleText: {
+    // Video title text
     fontSize: 22,
     paddingBottom: 12,
     lineHeight: 30,
@@ -48,6 +57,7 @@ export const VideoCardLayoutStyles = {
   },
 
   userNameText: {
+    // Channel name text
     color: globalStyles.colors.colorPrimary400,
     fontWeight: "bold",
   },

package/src/styles/VideoPlayerStyles.js

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

package/src/styles/globalStyles.js

@@ -1,24 +1,24 @@
 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,