@wereform/pkgm-video 1.0.1 → 1.0.2

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@wereform/pkgm-video",
-  "version": "1.0.1",
+  "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/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,
-  },
-});