@wereform/pkgm-video 1.0.0 → 1.0.2

package/README.md

@@ -1,24 +1,221 @@
-# @begenone/pkgm-video
+# @wereform/pkgm-video
 
-This package manages **video-related logic** in the BEGENONE app.
+Reusable video UI components and layouts for the WeReform / BEGENONE platform.
 
-## Overview
+This package provides video-centric building blocks including thumbnails, video players, card layouts, and full video view layouts. It is designed for mobile-first experiences using React Native and Expo, and composes cleanly with shared UI primitives from the WeReform ecosystem.
 
-Everything that involves videos — uploading, displaying, formatting, and retrieving metadata — is handled here.
+---
 
-## Features
+## Install
 
-- 📦 Fetch video lists (feeds, channel-specific, trending)
-- 📹 Display video player with metadata
-- ⏱ Duration, title, and preview management
-- 🧠 Handles video encoding status and thumbnail fallback
+```bash
+npm install @wereform/pkgm-video
+# or
+yarn add @wereform/pkgm-video
+# or
+pnpm add @wereform/pkgm-video
+```
 
-## Usage
+---
 
-Any screen that shows videos — including feeds, Shorts, and channel pages — imports logic or components from this package.
+## What this package gives you
 
-## Tech Stack
+- Video UI components:
 
-- Axios for API calls
-- React Native Video or Expo AV
-- Shared utilities from `@begenone/pkgm-shared`
+  - Video thumbnail renderer
+  - Auto-playing video player
+  - Horizontal and vertical video cards
+
+- Video layouts:
+
+  - Full video view layout with metadata and interactions
+  - Scrollable suggested videos list
+
+- Built for:
+
+  - React Native / Expo
+  - Video-first feeds and detail pages
+  - Composition with channel, menu, and shared UI packages
+
+---
+
+## Exports
+
+From `@wereform/pkgm-video` you can import:
+
+```ts
+import {
+  Thumbnail,
+  VideoPlayer,
+  VideoCardLayout,
+  VideoCardHorizontalLayout,
+  VideoViewLayout,
+} from "@wereform/pkgm-video";
+```
+
+---
+
+## Core components
+
+## Thumbnail
+
+Renders a responsive 16:9 video thumbnail.
+
+### Props
+
+```ts
+Thumbnail({
+  thumbnailURL,
+  thumbHeight,
+});
+```
+
+- `thumbnailURL` Thumbnail image URL
+- `thumbHeight` Height of the thumbnail container
+
+---
+
+## VideoPlayer
+
+Auto-playing, looping video player built on `expo-video`.
+
+### Props
+
+```ts
+VideoPlayer({
+  videoSource,
+});
+```
+
+- Automatically plays when screen is focused
+- Pauses when screen loses focus
+- Supports picture-in-picture mode
+- Maintains a 16:9 aspect ratio
+
+---
+
+## VideoCardHorizontalLayout
+
+Compact horizontal video card used in lists and side feeds.
+
+### Props
+
+```ts
+VideoCardHorizontalLayout({
+  timeAgo,
+  viewsText,
+  titleText,
+  contentThumbUrl,
+  navigateToVideo,
+});
+```
+
+- Designed for dense lists
+- Clickable to navigate to video detail view
+
+---
+
+## VideoCardLayout
+
+Standard vertical video card with thumbnail, title, channel info, and metadata.
+
+### Props
+
+```ts
+VideoCardLayout({
+  timeAgo,
+  viewsText,
+  titleText,
+  userNameText,
+  contentThumbUrl,
+  channelLogo,
+  containerStyles,
+  dateViewsContainerStyle,
+  userImageStyles,
+  titleNameContainerStyles,
+  userNameTextStyles,
+  titleTextStyles,
+  thumbnailImageStyles,
+  customMetaDataStyles,
+  navigateToVideo,
+});
+```
+
+- Highly customizable via style overrides
+- Used across feeds and suggested video sections
+
+---
+
+## VideoViewLayout
+
+Full video detail layout including player, title, interactions, channel metadata, and suggested videos.
+
+### Props
+
+```ts
+VideoViewLayout({
+  videoSource,
+  CustomizedTitleText,
+  MenuChannelMetaTimeAgo,
+  MenuChannelMetaViews,
+  MenuChannelMetaUserName,
+  MenuChannelMetaSubCount,
+  MenuChannelMetaChannelLogo,
+  suggestedVideos,
+});
+```
+
+- Renders the active video at the top
+- Displays interaction controls
+- Shows channel metadata
+- Maps and renders suggested videos below
+
+---
+
+## Typical usage
+
+```ts
+<VideoViewLayout
+  videoSource={{ uri: videoUrl }}
+  CustomizedTitleText="Video title"
+  MenuChannelMetaUserName="WeReform"
+  MenuChannelMetaSubCount="542,000"
+  suggestedVideos={videos}
+/>
+```
+
+---
+
+## Design philosophy
+
+- UI-only package
+- No data fetching or API calls
+- Video lifecycle handled at the layout level
+- Composable with shared menu and channel components
+- Optimized for mobile performance and readability
+
+---
+
+## License
+
+MIT License
+
+Copyright (c) 2025 WeReform / BEGENONE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@wereform/pkgm-video",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "dist/index.js",
-  "scripts": {
-    "build": "babel src --out-dir dist --extensions .js,.jsx"
-  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -16,8 +17,8 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@wereform/pkgm-api": "^1.0.0",
-    "@wereform/pkgm-shared": "^1.0.0",
+    "@wereform/pkgm-api": "^1.0.7",
+    "@wereform/pkgm-shared": "^1.0.2",
     "@expo/vector-icons": "^15.0.3"
   },
   "devDependencies": {
@@ -25,5 +26,8 @@
     "@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/babel.config.js

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

package/dist/components/VideoTestScreen.js

@@ -1 +0,0 @@
-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/packageJSON.md

@@ -1,27 +0,0 @@
-{
-"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

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

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

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

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

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

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

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

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

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

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