feat: style feed and livepeer videos

frontend-v2/src/App.jsx

@@ -9,7 +9,6 @@ import Index from "./components/Index";
 import CommunityFeed from "./components/CommunityFeed";
 import { ThemeProvider, createTheme, useTheme } from "@mui/material/styles";
 import Theme from "./components/Theme";
-import { useLivepeerProvider } from "@livepeer/react";
 
 function App() {
 {/* const provider = useLivepeerProvider(); */}

frontend-v2/src/components/CommunityFeed.jsx

@@ -1,71 +1,127 @@
 import { Toolbar } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Button from "@mui/material/Button";
-import Container from "@mui/material/Container";
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import FormDialog from "./FormDialog";
 import Posts from "./Posts";
-import { Player } from '@livepeer/react';
-//import HomeIcon from "./components/HomeIcon.js";
+import { Player } from "@livepeer/react";
 
 function CommunityFeed(props) {
   const name = "Guitar";
-  const playBackId = "bafybeig45torihkqmjgh7zkud2fisfoz2uusesxwm4zeyluomjm63rt4fq";
-  // let streak = 0;
 
-  let posts = [
+  const [newPost, setNewPost] = useState(null);
 
+  let posts = [
     {
-      author: "Henry",
-      avatar: "H",
-      text: "Check this video out ",
+      author: "Tatsuya",
+      avatar: "T",
+      text: "Check out my tunes!",
       photos: [],
-      videos: "",
+      videos: "bafybeidunvwb2dlojud5acs726cfho4r6y6d3vvxhcvi22cnbsoc7m64m4",
       timestamp: "Sat 21/1/2023",
     },
 
     {
-      author: "Henry",
-      avatar: "H",
-      text: "Today is a nice day",
+      author: "Leon",
+      avatar: "L",
+      text: "I wish I knew you wanted me~",
       photos: [],
-      videos: "",
+      videos: "bafybeicfnan2sps6pwgzy352oif6zsdgubeg2pjxvluhtikfh3hds7ctfu",
       timestamp: "Sat 21/1/2023",
     },
 
     {
-      author: "Tom",
+      author: "Stacey",
+      avatar: "S",
+      text: "#AdamLevigne",
+      photos: [],
+      videos: "bafybeib7vspt2zpqdh2tibxlxduo6bxdp5k25x36kz2b3la4fpyh4bx7cq",
+      timestamp: "Sat 21/1/2023",
+    },
+    {
+      author: "Maria",
+      avatar: "M",
+      text: "Fav ColdPlay song!",
+      photos: [],
+      videos: "bafybeibqhgjhqiyyuauolntc655xkl3bsmp232nkbpgr546rengrxpodhi",
+      timestamp: "Sat 21/1/2023",
+    },
+    {
+      author: "Tristan",
       avatar: "T",
-      text: "Today is not a nice day",
+      text: "Counting money not stars!",
+      photos: [],
+      videos: "bafybeidiobvq4gtjeep2tu5ajylgxlxbqy5z7bssxajddwuszqajka4l2i",
+      timestamp: "Sat 21/1/2023",
+    },
+    {
+      author: "Ranjeet",
+      avatar: "R",
+      text: "Get groovy with me!",
+      photos: [],
+      videos: "bafybeiaczq5mzag7shzlj5z6s6yk2eh4tnpheup7racqkb55wxn4ij5p2q",
+      timestamp: "Sat 21/1/2023",
+    },
+    {
+      author: "Kim",
+      avatar: "K",
+      text: "Check out my pop riff!",
+      photos: [],
+      videos: "bafybeigua6ffegzte5d4vhkvoi57l5zjeytyhc252dg6jssianwtzdmpie",
+      timestamp: "Sat 21/1/2023",
+    },
+    {
+      author: "John",
+      avatar: "J",
+      text: "Can't go wrong with the classics!",
       photos: [],
-      videos: "",
+      videos: "bafybeibeis3cm7ligy5czesew5hs2kms6c72x5lln2wtm465w2quchpq54",
       timestamp: "Sat 21/1/2023",
     },
 
   ];
   console.log("Reach the community feed");
 
+  if (newPost) {
+    posts = [newPost, ...posts];
+  }
+
   return (
-    <Container>
-      <AppBar position="static">
-        <Toolbar>
-          <Link to="/">
+    <div>
+      <AppBar
+        position="static"
+        sx={{
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingY: "4px",
+        }}
+      >
+        <Toolbar
+          sx={{
+            height: "50px",
+            alignItems: "center",
+            justifyContent: "center",
+            flexGrow: "1",
+            padding: "0 20px",
+          }}
+        >
+          <Link to="/index">
             <Button
               color="secondary"
               variant="contained"
               style={{ textDecoration: "none" }}
+              size="small"
             >
               {" "}
-              Community{" "}
+              Communities{" "}
             </Button>
           </Link>
-          <h1>{name}</h1>
-          <FormDialog posts={posts} />
+          <h1 style={{ margin: "0 15px", fontSize: "32px" }}>{name}</h1>
+          <FormDialog posts={posts} setNewPost={setNewPost} />
         </Toolbar>
       </AppBar>
       <Posts posts={posts} />
-    </Container>
   );
 }
 

frontend-v2/src/components/FormDialog.jsx

@@ -11,94 +11,122 @@ import React, { useState } from "react";
 import { useCreateAsset, useLivepeerProvider } from "@livepeer/react";
 
 function FormDialog(props) {
-    const provider = useLivepeerProvider();
+  const provider = useLivepeerProvider();
+
+  const { setNewPost } = props;
+
+  const [open, setOpen] = useState(false);
+  const [postText, setPostText] = useState("");
+  const [video, setVideo] = useState(undefined);
+
+  const {
+    mutate: createAsset,
+    data: assets,
+    status,
+    progress,
+    error,
+  } = useCreateAsset(
+    // we use a `const` assertion here to provide better Typescript types
+    // for the returned data
+    video
+      ? {
+          sources: [{ name: video.name, file: video }],
+        }
+      : null
+  );
 
   const handleClickOpen = () => {
     setOpen(true);
   };
 
-    const {
-        mutate: createAsset,
-        data: assets,
-        status,
-        progress,
-        error,
-      } = useCreateAsset(
-        // we use a `const` assertion here to provide better Typescript types
-        // for the returned data
-        video
-          ? {
-              sources: [{ name: video.name, file: video }]
-            }
-          : null,
-      );
-
-    const handleClose = () => {
-        setOpen(false);
-    }
+  const handleClose = () => {
+    setOpen(false);
+  };
 
   const postCheckin = () => {
-    console.log(postText);
     let post = {
-      // author_id: ,
-      // text: { postText },
-      // photos: [],
-      // videos: video,
-      // timestamp: "Sat 21/1/2023"
-      title: "Title",
-      content: postText,
+      author: "current user",
+      text: { postText },
+      photos: [],
+      videos: video,
+      timestamp: "Sat 21/1/2023",
     };
 
-    let author_id = 1;
-    let group_id = 1;
-    axios
-      .post(`http://localhost:4000/posts/${author_id}/${group_id}`, post)
-      .then((response) => {
-        console.log(response);
-      });
+    props.posts.push(post);
 
-    //props.posts.push(post);
     handleClose();
   };
 
-    const uploadVideo = () => {
-        handleClose();
-    }
+  const uploadVideo = () => {
+    handleClose();
+    createAsset();
+    setNewPost({ author: "Loading..." });
+  };
 
-    return (
-        <React.Fragment>
-            <Button color="secondary" variant="contained" onClick={handleClickOpen}>Daily Checkin</Button>
-            <Dialog open={open} onClose={handleClose}>
-                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                    <DialogTitle>Daily Checkin!</DialogTitle>
-                    <DialogContent>
-                        <DialogContentText>What do you want to update today?</DialogContentText>
-                        <TextField autoFocus multiline varian="standard" fullWidth onChange={(e) => setPostText(e.target.value)}></TextField>
-                        <input 
-                        type={"file"}
-                        onChange={(e) => {
-                            setVideo(e.target.files[0]);
-                        }}
-                        />
-                    </DialogContent>
-                    <DialogActions>
-                        <Button disabled = {!video} onClick={uploadVideo}> Upload Video </Button>
-                        {assets?.map((asset) => (
-                            <div key={asset.id}>
-                                <div>
-                                    <div>Asset Name: {asset?.name}</div>
-                                    <div>Playback URL: {asset?.playbackUrl}</div>
-                                    <div>IPFS CID: {asset?.storage?.ipfs?.cid ?? 'None'}</div>
-                                </div>
-                            </div>
-                         ))}
-                        {error && <div>{error.message}</div>}
-                        <Button variant="contained" onClick={postCheckin}
-                            style={{ width: '100px', marginBottom:'5px' }}>Post</Button>
-                    </DialogActions> </div>
-            </Dialog>
-         </React.Fragment>
-    )
+  return (
+    <React.Fragment>
+      <Button
+        color="secondary"
+        variant="contained"
+        onClick={handleClickOpen}
+        size="small"
+      >
+        Daily Check-in
+      </Button>
+      <Dialog open={open} onClose={handleClose}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <DialogTitle>Daily Checkin!</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              What do you want to update today?
+            </DialogContentText>
+            <TextField
+              autoFocus
+              multiline
+              varian="standard"
+              fullWidth
+              onChange={(e) => setPostText(e.target.value)}
+            ></TextField>
+            <input
+              type={"file"}
+              onChange={(e) => {
+                setVideo(e.target.files[0]);
+              }}
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button disabled={!video} onClick={uploadVideo}>
+              {" "}
+              Upload Video{" "}
+            </Button>
+            {assets?.map((asset) => (
+              <div key={asset.id}>
+                <div>
+                  <div>Asset Name: {asset?.name}</div>
+                  <div>Playback URL: {asset?.playbackUrl}</div>
+                  <div>IPFS CID: {asset?.storage?.ipfs?.cid ?? "None"}</div>
+                </div>
+              </div>
+            ))}
+            {error && <div>{error.message}</div>}
+            <Button
+              variant="contained"
+              onClick={postCheckin}
+              style={{ width: "100px", marginBottom: "5px" }}
+            >
+              Post
+            </Button>
+          </DialogActions>{" "}
+        </div>
+      </Dialog>
+    </React.Fragment>
+  );
 }
 
 export default FormDialog;

frontend-v2/src/components/LandingPage.jsx

@@ -5,7 +5,6 @@ import Button from "@mui/material/Button";
 
 
 function LandingPage() {
-  const provider = useLivepeerProvider();
   return (
     <>
       <div>