diff --git a/src/components/Card/CardWithVideo.jsx b/src/components/Card/CardWithVideo.jsx
new file mode 100644
index 00000000..ec713909
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {user?.photoURL && user?.photoURL.length > 0 ? (
+ 
+ ) : (
+ user?.displayName[0]
+ )}
+
+ }
+ title={
+
+
+ {user?.displayName}
+
+ {tutorial?.owner && (
+ <>
+ {" for "}
+
+ {tutorial?.owner}
+
+
+ )}
+
+ }
+ subheader={tutorial?.createdAt ? getTime(tutorial?.createdAt) : ""}
+ />
+
+
+
+ {tutorial?.title}
+
+
+ {tutorial?.summary}
+
+
+
+
+
+
+ {"10 min"}
+
+
+
+
+
+ {count}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx
index 42db1d7b..135a22d1 100644
--- a/src/components/HomePage/index.jsx
+++ b/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 (
{tutorials?.length > 0 ? (
tutorials.map(tutorial => {
- return !tutorial?.featured_image ? (
+ return tutorial?.featured_video ? ():!tutorial?.featured_image ? (
) : (
diff --git a/src/components/Tutorials/NewTutorial/index.jsx b/src/components/Tutorials/NewTutorial/index.jsx
index cac38132..45f1e961 100644
--- a/src/components/Tutorials/NewTutorial/index.jsx
+++ b/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 (
{
-
+
+ handleVideoChange(e)} disableUnderline style={{display : "none"}}/>
diff --git a/src/store/actions/tutorialPageActions.js b/src/store/actions/tutorialPageActions.js
index d35e774d..9ed20f9c 100644
--- a/src/store/actions/tutorialPageActions.js
+++ b/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,
diff --git a/src/store/actions/tutorialsActions.js b/src/store/actions/tutorialsActions.js
index 25e45b41..3ad0e23b 100644
--- a/src/store/actions/tutorialsActions.js
+++ b/src/store/actions/tutorialsActions.js
@@ -144,7 +144,7 @@ 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();
@@ -152,6 +152,18 @@ export const createTutorial =
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: "",