@wereform/pkgm-video 1.0.2 → 1.0.3

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@wereform/pkgm-video",
-  "version": "1.0.2",
+  "version": "1.0.3",
+  "source": "src/index.js",
   "main": "dist/index.js",
+  "react-native": "src/index.js",
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "publishConfig": {

package/src/components/Thumbnail.jsx

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

package/src/components/VideoPlayer.jsx

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

package/src/index.js

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

package/src/layout/VideoCardHorizontalLayout.jsx

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

package/src/layout/VideoCardLayout.jsx

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

package/src/layout/VideoViewLayout.jsx

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

package/src/styles/VideoCardLayoutStyles.js

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

package/src/styles/VideoPlayerStyles.js

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

package/src/styles/globalStyles.js

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