Web3 Netflix Helping Each Other

Moralis General
#42

Hey guys, I can’t the modal for my thumbnail to pop up. Anyone else had this issue?

Here is my code, I realise there’s no content for the modal yet but the blank modal will not pop up. Any ideas?

Thank you.

import React from 'react';
import { Link } from "react-router-dom";
import "./Home.css";
import { Logo } from '../images/Netflix';
import { ConnectButton, Icon, TabList, Tab, Button, Modal } from "web3uikit";
import { movies } from "../helpers/library";
import { useState } from "react";

const Home = () => {

  const [visible, setVisible] = useState(false);
  const [selectedFilm, setSelectedFilm] = useState();

  return (
    <>
      <div className="logo">
        <Logo />
      </div>
      <div className="connect">
        <Icon fill="#ffffff" size={24} svg="bell" />
        <ConnectButton />
      </div>
      <div className="topBanner">
        <TabList defaultActiveKey={1} tabStyle="bar">
          <Tab tabKey={1} tabName={"Movies"}>
            <div className="scene">
              <img src={movies[0].Scene} className="sceneImg"></img>
              <img src={movies[0].Logo} className="sceneLogo"></img>
              <p className="sceneDesc"> {movies[0].Description}</p>
              <div className="playButton">
                <Button
                  icon="chevronRightX2"
                  text="Play"
                  theme="secondary"
                  type="button"
                />
                <Button
                  icon="plus"
                  text="Add to My List"
                  theme="translucent"
                  type="button"
                />
              </div>
            </div>

            <div className='title'>
              Movies
            </div>
            <div className='thumbs'>
              {movies &&
                movies.map((e) => {
                  return (
                    <img
                      src={e.Thumnbnail}
                      className="thumbnail"
                      onclick={() => {
                        setSelectedFilm(e);
                        setVisible(true);
                      }}
                    >
                    </img>
                  )
                })}
            </div>

          </Tab>
          <Tab tabKey={2} tabName={"Series"} isDisabled={true}></Tab>
          <Tab tabKey={3} tabName={"MyList"}></Tab>
        </TabList>
        {selectedFilm && (
          <div className="modal">
            <Modal
              onCloseButtonPressed={() => setVisible(false)}
              isVisible={visible}
              hasFooter={false}
              width="1000px"
            >

            </Modal>

          </div>
        )}
      </div>
    </>
  )
}

export default Home;
1 Like
#43

hello moralis! i am stock a little, somebody could help pls? someone?

#44

where are you stuck?

#45

@cryptokid on my chair :grin:
no, for real, is it normal i cant play the movie before implementing moralis??)

#46

I would think that you could play the movie somehow, did you set it the right url for the movie source?

maybe it should play also if you paste the url to the movie directly in the browser

#47 
import { useLocation } from 'react-router-dom';

``` the player page is not appearing
#48

i cant find the url man

#49

then what movie you want to play?

you could start with the final project

#50

oh i am with the starter, not good?

#51

starter if fine if you manage to make it work

#52

i will look for that URL, but i still cant play the moralis video, i know i still in the academy but i need some tips to make the video playing, i dont find nothing obvious on the code, someone available to help??

#53

Hey guys, i am having trouble putting the movies in the clone. Whenever the put the link to the movie in the movie array, and then run my code and go to the clone, the player is just a black screen. Does anyone know how to fix this.

#54

After adding the TabList div, it appears behind the black banner. I’ve did not edit the setting in css files. What am i missing.

#55

hey @shivanprasad, @smugglerbear, hope you guys are ok.

Please share your code in the following way so we can help you review it :nerd_face:

READ BEFORE POSTING - How to post code in the forum

Carlos Z

1 Like
#57 
      ```
import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import "./Home.css";
import { Logo } from '../images/Netflix';
import { ConnectButton, Icon, TabList, Tab, 
  Button, Modal, useNotification } from "web3uikit";
import { movies } from '../helpers/library';
import { useState } from 'react';
import { useMoralis } from 'react-moralis';

const Home = () => {
  const [visible, setVisible] = useState(false);
  const [selectedMovie, setSelectedMovie] = useState();
  const [myMovies, setMyMovies] = useState();
  const { isAuthenticated, Moralis, account } = useMoralis();

  useEffect(() =>{
     
    async function fetchMyList() {
      await Moralis.start({ serverUrl:"https://pouejifruwph.usemoralis.com:2053/server", appId:"lAOfLgm314Xc7r9Tzag9LkvPNYczCA4fVUk7w1aX",}
      );
       //if getting errors add this.//

    try {
      const theList = await Moralis.Cloud.run("getMyList", {address: account});

      const filterdA = movies.filter(function (e) {
        return theList.indexOf(e.Name) > -1;
      });

      setMyMovies(filterdA);

     } 
     catch (error) {
       console.error(error)
     }
    }

    fetchMyList();

  }, [account])


  const dispatch = useNotification();

  const handleNewNotification = () => {
    dispatch({
      type:"error",
      message:"Connect Wallet Kindly",
      title:"Not Authenticated",
      position: "topL",     
    });
  };

  const handleAddNotification = () => {
    dispatch({
      type:"succes",
      message:"Movie Added to List",
      title:"Succes",
      position: "topL"     
    });
  };

  return (
    <>
     <div className="logo">
      <Logo />
     </div>
     <div className="connect">
       <Icon fill="#ffffff" size={24} svg="bell" />
       <ConnectButton />
     </div>
     <div className="topBanner">
       <TabList defaultActiveKey={1} tabStyle="bar">
         <Tab tabKey={1} tabName={"Movies"}>
           
           <div className="scene">
             <img src={movies[0].Scene} className="sceneImg"></img>
             <img className="sceneLogo" src={movies[0].Logo}></img>
             <p className="sceneDesc">{movies[0].Description}</p>
             <div className="playButton">
             <Button
                      icon="chevronRightX2" 
                      text="Play"
                      theme="secondary"
                       type="button"
             />
             <Button 
             icon="plus" 
             text="Add to My List"
             theme="translucent"
              type="button"
              onClick= {() => {
                console.log(myMovies)
              }}
              />
             </div>
           </div>

           <div className="title"> Movies </div>
           <div className="thumbs">
            {movies && 
             movies.map((e) => {
              return(
               <img
               src={e.Thumbnail}
               className="thumbnail"
               onClick={() =>{
                 setSelectedMovie(e);
                 setVisible(true);

               }}
               >
               </img>
              )
           })
           }  
           </div>
            
            </Tab>
        <Tab tabKey={2} tabName={'Series'} isDisabled={true}></Tab>
         <Tab tabKey={3} tabName={'MyList'}>
         <div className="ownListContent">
              <div className="title">Your Library</div>
              {myMovies && isAuthenticated ? (
                <>
                  <div className="ownThumbs">
                    {
                      myMovies.map((e) => {
                        return (
                          <img
                            src={e.Thumbnail}
                            className="thumbnail"
                            onClick={() => {
                              setSelectedMovie(e);
                              setVisible(true);
                            }}
                          ></img>
                        );
                      })}
                  </div>
                </>
              ) : (
                <div className="ownThumbs">
                  You need to Authenicate TO View Your Own list
                </div>
              )}
            </div>
          </Tab>
       </TabList>
       {selectedMovie && (
         <div className='modal'>
           <Modal
             onCloseButtonPressed={() => setVisible(false)}
             isVisible={visible}
             hasFooter={false}
             width='1000px'
             >
              <div className="modalContent">
               <img src={selectedMovie.Scene} className="modalImg"></img>
               <img src={selectedMovie.Logo} className="modalLogo"></img>
               <div className="modalPlayButton">
                {isAuthenticated ? (
              <>    
                <Link to="/Player" state={selectedMovie.movie}>
              <Button
                 icon="chevronRightX2"
                 text= "Play"
                 theme= "secondary"
                 type= "button"
                 />
                </Link>
                 <Button
                 icon="plus"
                 text= "Add to My List"
                 theme= "translucent"
                 type= "button"
                 onClick={async () => { 
                   await Moralis.Cloud.run("updateMyList", {
                     adrss: account,
                     newFav: selectedMovie.Name,
                   });
                   handleAddNotification();

                  }}
                
                 />
              </>


            ) : (
            <> 
              
              <Button
                 icon="chevronRightX2"
                 text= "Play"
                 theme= "secondary"
                 type= "button"
                 onClick={handleNewNotification}
                 />
               
                 <Button
                 icon="plus"
                 text= "Add to My List"
                 theme= "translucent"
                 type= "button"
                 onClick={handleNewNotification}
                 
               />
            </>
          )}   
                 </div>
                 <div className='movieInfo'>
                 <div className='movieDesc'>
                 <div className='movieDetails'>
                   <span>{selectedMovie.Year}</span>
                   <span>{selectedMovie.Duration}</span>
                 </div>
                 {selectedMovie.Description}
               </div>
               <div className="detailedMovieInfo">
                 Genre:
                 <span className='deets'>{selectedMovie.Genre}</span>
                 <br />
                 Actors:
                 <span className='deets'>{selectedMovie.Actors}</span>

               </div>
            </div>
          </div>  
         </Modal>
        </div> 
           
       ) }
     
      </div>
   </>
  )
 }

export default Home;**`strong text`**
#58

Hola Carlos, could you check why i cant make the videos play? thanks

#59

We all are here to help each other and make this project successful!

1 Like
#60

What console error are you receiving? i copy/paste your home.js code and the list of movies is not showed to me. From my console error, there is an error because you are starting moralis again inside the fetchMyList function, where it shuould be started at the main index.js at the MoralisProvider.

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider appId="APPID_KEY" serverUrl="SERVER_URL">
      <NotificationProvider>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </NotificationProvider>
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

I might also need to see the structure of the entire project to understand why.

Maybe you can share the github repo of your project so i can download it directly?

image
image1898×1022 578 KB

Carlos Z

1 Like
#61

You da real MVP!

I was trying to fix issues with after adding the useEffect code for so long… You helped out a lot dude, thanks :slight_smile:

2 Likes
#62

man thank you, your answer just made me realise i am missing other parts, i will take my time though, back to the bench, later!)

1 Like