[ Feat : Adding Video Upload Option While Creating A Tutorial ]

src/components/Card/CardWithVideo.jsx

@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@mui/styles";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardMedia from "@mui/material/CardMedia";
+import CardContent from "@mui/material/CardContent";
+import CardActions from "@mui/material/CardActions";
+import Avatar from "@mui/material/Avatar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import { red } from "@mui/material/colors";
+import cardImage from "./card.png";
+import Chip from "@mui/material/Chip";
+import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
+import ChatOutlinedIcon from "@mui/icons-material/ChatOutlined";
+import TurnedInNotOutlinedIcon from "@mui/icons-material/TurnedInNotOutlined";
+import MoreVertOutlinedIcon from "@mui/icons-material/MoreVertOutlined";
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Link } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { useFirebase, useFirestore } from "react-redux-firebase";
+import { getUserProfileData } from "../../store/actions";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    margin: "0.5rem",
+    borderRadius: "10px",
+    boxSizing: "border-box",
+    [theme.breakpoints.down("md")]: {
+      width: "auto"
+    },
+    [theme.breakpoints.down("xs")]: {
+      width: "auto"
+    }
+  },
+  grow: {
+    flexGrow: 1
+  },
+  media: {
+    height: 0,
+    paddingTop: "56.25%" // 16:9
+  },
+  margin: {
+    marginRight: "5px"
+  },
+  expandOpen: {
+    transform: "rotate(180deg)"
+  },
+  avatar: {
+    backgroundColor: red[500]
+  },
+  inline: {
+    fontWeight: 600
+  },
+  contentPadding: {
+    padding: "0 16px"
+  },
+  icon: {
+    padding: "5px"
+  },
+  time: {
+    lineHeight: "1"
+  },
+  small: {
+    padding: "4px"
+  },
+  settings: {
+    flexWrap: "wrap"
+  }
+}));
+
+export default function CardWithVideo({ tutorial }) {
+  const classes = useStyles();
+  const [alignment, setAlignment] = React.useState("left");
+  const [count, setCount] = useState(1);
+  const dispatch = useDispatch();
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  console.log("Tutorial Card with video",tutorial)
+  const handleIncrement = () => {
+    setCount(count + 1);
+  };
+
+  const handleDecrement = () => {
+    setCount(count - 1);
+  };
+
+  const handleAlignment = (event, newAlignment) => {
+    setAlignment(newAlignment);
+  };
+
+  useEffect(() => {
+    getUserProfileData(tutorial?.created_by)(firebase, firestore, dispatch);
+  }, [tutorial]);
+
+  const user = useSelector(
+    ({
+      profile: {
+        user: { data }
+      }
+    }) => data
+  );
+
+  const getTime = timestamp => {
+    return timestamp.toDate().toDateString();
+  };
+
+  return (
+    <Card className={classes.root}>
+      <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
+        <CardMedia
+          component="video"
+          controls
+          src={tutorial?.featured_video}
+          title="code"
+          data-testId="Video"
+        />
+      </Link>
+      <CardHeader
+        avatar={
+          <Avatar className={classes.avatar}>
+            {user?.photoURL && user?.photoURL.length > 0 ? (
+              <img src={user?.photoURL} />
+            ) : (
+              user?.displayName[0]
+            )}
+          </Avatar>
+        }
+        title={
+          <React.Fragment>
+            <Typography
+              component="span"
+              variant="h7"
+              className={classes.inline}
+              color="textPrimary"
+              data-testId="UserName"
+            >
+              {user?.displayName}
+            </Typography>
+            {tutorial?.owner && (
+              <>
+                {" for "}
+                <Typography
+                  component="span"
+                  variant="h7"
+                  className={classes.inline}
+                  color="textPrimary"
+                  data-testId="UserOrgName"
+                >
+                  {tutorial?.owner}
+                </Typography>
+              </>
+            )}
+          </React.Fragment>
+        }
+        subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : ""}
+      />
+      <Link to={`/tutorial/${tutorial?.tutorial_id}`}>
+        <CardContent className={classes.contentPadding}>
+          <Typography variant="h5" color="text.primary" data-testId="Title">
+            {tutorial?.title}
+          </Typography>
+          <Typography
+            variant="body2"
+            color="textSecondary"
+            component="p"
+            paragraph
+            data-testId="Description"
+          >
+            {tutorial?.summary}
+          </Typography>
+        </CardContent>
+      </Link>
+      <CardActions className={classes.settings} disableSpacing>
+        <Chip
+          label="HTML"
+          component="a"
+          href="#chip"
+          clickable
+          variant="outlined"
+          className={classes.margin}
+        />
+        <Typography
+          variant="overline"
+          display="block"
+          className={classes.time}
+          data-testId="Time"
+        >
+          {"10 min"}
+        </Typography>
+        <div className={classes.grow} />
+        <ToggleButtonGroup
+          size="small"
+          className={classes.small}
+          value={alignment}
+          exclusive
+          onChange={handleAlignment}
+          aria-label="text alignment"
+        >
+          <ToggleButton
+            className={classes.small}
+            onClick={handleIncrement}
+            value="left"
+            aria-label="left aligned"
+          >
+            <KeyboardArrowUpIcon />
+            <span>{count}</span>
+          </ToggleButton>
+          <ToggleButton
+            className={classes.small}
+            onClick={handleDecrement}
+            value="center"
+            aria-label="centered"
+          >
+            <KeyboardArrowDownIcon />
+          </ToggleButton>
+        </ToggleButtonGroup>
+        <IconButton aria-label="share" data-testId="CommentIcon">
+          <ChatOutlinedIcon />
+        </IconButton>
+        <IconButton aria-label="add to favorites" data-testId="ShareIcon">
+          <ShareOutlinedIcon />
+        </IconButton>
+        <IconButton aria-label="share" data-testId="NotifIcon">
+          <TurnedInNotOutlinedIcon />
+        </IconButton>
+        <IconButton aria-label="share" data-testId="MoreIcon">
+          <MoreVertOutlinedIcon />
+        </IconButton>
+      </CardActions>
+    </Card>
+  );
+}

src/components/HomePage/index.jsx

@@ -37,9 +37,9 @@ import {
   getTutorialFeedData,
   getTutorialFeedIdArray
 } from "../../store/actions/tutorialPageActions";
+import CardWithVideo from "../Card/CardWithVideo";
 import { getTutorialsByTopTags,getAllTags,getFilteredTutorials } from "../../store/actions";
 
-
 function HomePage({ background = "white", textColor = "black" }) {
   const classes = useStyles();
   const dispatch = useDispatch();
@@ -203,6 +203,7 @@ function HomePage({ background = "white", textColor = "black" }) {
   const closeModal = () => {
     setVisibleModal(prev => !prev);
   };
+
   return (
     <Card
       className={classes.wrapper}
@@ -257,7 +258,7 @@ function HomePage({ background = "white", textColor = "black" }) {
           </Box>
                     {tutorials?.length > 0 ? (
             tutorials.map(tutorial => {
-              return !tutorial?.featured_image ? (
+              return tutorial?.featured_video ? (<CardWithVideo tutorial={tutorial}/>):!tutorial?.featured_image ? (
                 <CardWithoutPicture key={tutorial.id} tutorial={tutorial} />
               ) : (
                 <CardWithPicture key={tutorial.id} tutorial={tutorial} />

src/components/Tutorials/NewTutorial/index.jsx

@@ -63,7 +63,8 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
     title: "",
     summary: "",
     owner: "",
-    tags: []
+    tags: [],
+    featured_video : null,
   });
 
   const loadingProp = useSelector(
@@ -192,6 +193,14 @@ useEffect(() => {
     }
   };
 
+  const handleVideoChange = e => {
+    const videoFile = e.target.files[0]
+    setformValue(prev => ({
+      ...prev,
+      featured_video : videoFile
+    }))
+  }
+
   const classes = useStyles();
   return (
     <Modal
@@ -305,7 +314,11 @@ useEffect(() => {
           <IconButton>
             <ImageIcon />
           </IconButton>
-          <IconButton>
+          <IconButton
+            component="label"
+            htmlFor="fileInput"
+          >
+            <input id="fileInput" type="file" accept="video/*" onChange={e=>handleVideoChange(e)} disableUnderline style={{display : "none"}}/>
             <MovieIcon />
           </IconButton>
           <IconButton>

src/store/actions/tutorialPageActions.js

@@ -101,6 +101,7 @@ export const getTutorialFeedData =
             created_by: tutorial?.created_by,
             createdAt: tutorial?.createdAt,
             featured_image: tutorial?.featured_image,
+            featured_video: tutorial?.featured_video,
             tut_tags: tutorial?.tut_tags,
             upVotes: tutorial?.upVotes || 0,
             downVotes: tutorial?.downVotes || 0,

src/store/actions/tutorialsActions.js

@@ -144,14 +144,26 @@ export const createTutorial =
   tutorialData => async (firebase, firestore, dispatch, history) => {
     try {
       dispatch({ type: actions.CREATE_TUTORIAL_START });
-      const { title, summary, owner, created_by, is_org, tags } = tutorialData;
+      const { title, summary, owner, created_by, is_org, tags, featured_video } = tutorialData;
 
       const setData = async () => {
         const document = firestore.collection("tutorials").doc();
 
         const documentID = document.id;
         const step_id = `${documentID}_${new Date().getTime()}`;
 
+        let videoUrl = "";
+        if(featured_video){
+          try {
+            const storageRef = firebase.storage().ref();
+            const videoRef = storageRef.child(`tutorial_videos/${documentID}_${featured_video.name}`);
+            await videoRef.put(featured_video);
+            videoUrl = await videoRef.getDownloadURL();
+          } catch (e) {
+            console.error("Error uploading video to firebase storage", e);
+          } 
+        }
+
         await document.set({
           created_by,
           editors: [created_by],
@@ -161,6 +173,7 @@ export const createTutorial =
           title,
           tutorial_id: documentID,
           featured_image: "",
+          featured_video: videoUrl,
           icon: "",
           tut_tags: tags,
           url: "",