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..46880f80 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,8 @@ function HomePage({ background = "white", textColor = "black" }) { const closeModal = () => { setVisibleModal(prev => !prev); }; + + console.log(tutorials) 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/components/Tutorials/subComps/ImageDrawer.jsx b/src/components/Tutorials/subComps/ImageDrawer.jsx index 6de8e472..07e793e5 100644 --- a/src/components/Tutorials/subComps/ImageDrawer.jsx +++ b/src/components/Tutorials/subComps/ImageDrawer.jsx @@ -105,18 +105,12 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => { }; }, [dispatch]); - const props = { - name: "file", - multiple: true, - beforeUpload(file, files) { - uploadTutorialImages(owner, tutorial_id, files)( - firebase, - firestore, - dispatch - ); - return false; - } - }; + const beforeUpload = async files => { + console.log("Image Upload Started") + await uploadTutorialImages(owner, tutorial_id, files)(firebase, firestore, dispatch); + console.log("Uploaded the images") + return false; + } const deleteFile = (name, url) => remoteTutorialImages( @@ -148,7 +142,9 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => { fullWidth accept="image/*" type="file" - {...props} + name="file" + multiple + onChange={e => beforeUpload(e.target.files)} /> {uploading ? ( <> @@ -161,7 +157,7 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {

- Click or drag images to here to upload + Click or drag images here to upload

)} diff --git a/src/store/actions/authActions.js b/src/store/actions/authActions.js index 04b2f6a0..9bc064c6 100644 --- a/src/store/actions/authActions.js +++ b/src/store/actions/authActions.js @@ -195,22 +195,26 @@ export const resendVerifyEmail = email => async dispatch => { export const checkUserHandleExists = userHandle => async firebase => { try { const handle = await firebase - .ref(`/cl_user_handle/${userHandle}`) - .once("value"); - return handle.exists(); + .firestore() + .collection("cl_user") + .doc(userHandle) + .get(); + console.log("User Handle",handle) + return handle.exists; } catch (e) { throw e.message; } }; -export const checkOrgHandleExists = orgHandle => async firestore => { +export const checkOrgHandleExists = orgHandle => async firebase => { try { - const organizationHandle = await firestore + const organizationHandle = await firebase + .firestore() .collection("cl_org_general") .doc(orgHandle) .get(); - console.log(organizationHandle); + console.log("Organization Handle",organizationHandle); return organizationHandle.exists; } catch (e) { throw e.message; 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..5e1a95a5 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: "", @@ -232,7 +245,7 @@ export const getTutorialsByTopTags = (limit = 10) => async (firebase, firestore) export const checkUserOrOrgHandle = handle => async (firebase, firestore) => { const userHandleExists = await checkUserHandleExists(handle)(firebase); - const orgHandleExists = await checkOrgHandleExists(handle)(firestore); + const orgHandleExists = await checkOrgHandleExists(handle)(firebase); if (userHandleExists && !orgHandleExists) { return "user";