react-bootstrap#ListGroup JavaScript Examples

InstructorClasses = ()=>{
    const [classes, setClasses]= useState([]);
    const [signout, setSignout]= useState(false);
    const {push}= useHistory();
    useEffect(()=>{
        axiosWithAuth()
            .get("/classes")
            .then(res=>{
                console.log("data classes: ", res.data);
                setClasses(res.data)
            })
            .catch(err=> console.log("instructorClasses.js error: ", err))
    },[])
    const signOut = ()=>{
        if (signout===false){
            return push('/InstructorLogin')
        }
        else{
            return console.log('you are still logged in')
        }
    }
    return(
        <div>
            <h1>Instructor classes: </h1>
            <Link to="/Instructor/CreateClass"> <button>Create Class</button> </Link>
            <button>Delete Class</button>\
            <button onClick={signOut}>Sign out</button>
            {classes.map((item,key)=>(
                <div key={item.id}>
               <Card style={{ width: '18rem', margin:' 0 auto', background: 'rgba(97, 136, 207, 0.534)'}}>
               <Card.Body>
                   <Card.Title>Name: {item.name }</Card.Title>
                        <ListGroup> Location: {item.location}</ListGroup>
                        <ListGroup> Type: {item.type}</ListGroup>
                        <ListGroup> Intensity Level: {item.intensityLevel}</ListGroup>
                        <ListGroup> Start Time: {item.startTime}</ListGroup>
                        <ListGroup> Duration: {item.duration}</ListGroup>
                        <ListGroup> Max Class Size: {item.maxClassSize}</ListGroup>
                        <ListGroup> Attendees: {item.attendees}</ListGroup>
                        <Button>Click for more information</Button>
               </Card.Body>
           </Card>
           </div>
            ))}
        </div>
    )
}

render() {

        const {tokens: {convertibleTokens, fromPathListWithRate, toPathListWithRate, fromPathLoading, toPathLoading}} = this.props;

        const {selectedFromIdx, selectedToIdx, searchFromToken, searchToToken, fromConvertibleTokens,
        toConvertibleTokens, fromToken, toToken} = this.state;

        const self = this;
        let fromTokenSelector = <span/>;
        let toTokenSelector = <span/>;
        if (convertibleTokens && convertibleTokens.length > 0) {
        fromTokenSelector = <div>
        
        <FormControl type="text" placeHolder="Search" value={searchFromToken} onChange={this.searchFromTokenChanged}/>
         <ListGroup className="token-selector-list">
        {fromConvertibleTokens.map(function(item, idx){
            let itemActive = "";
            if (idx === selectedFromIdx) {
                itemActive = "cell-active";
            }
            let itemName =  item.name.length > 10 ? item.name.substr(0, 10) + "..." :  item.name;
            return (<ListGroupItem key={`from-${idx}`} className={`token-display-cell ${itemActive}`} onClick={self.fromTokenChanged.bind(self, idx)}>
            <div>
            <img src={item.imageURI} className="symbol-image"/>
            <div className="item-symbol">{item.symbol}</div>
            </div>
            <div className="">
               {itemName}
            </div>
            </ListGroupItem>)
        })}
        </ListGroup>
        </div>;

         toTokenSelector = <div>
        <FormControl type="text" placeHolder="Search" value={searchToToken} onChange={this.searchToTokenChanged}/>
         <ListGroup className="token-selector-list">{toConvertibleTokens.map(function(item, idx){
            let itemActive = "";
            if (idx === selectedToIdx) {
                itemActive = "cell-active";
            }
            let itemName =  item.name.length > 10 ? item.name.substr(0, 10) + "..." :  item.name;
            return (<ListGroupItem key={`to-${idx}`} className={`token-display-cell ${itemActive}`} onClick={self.toTokenChanged.bind(self, idx)}>
            <div>
            <img src={item.imageURI} className="symbol-image"/>
            <div className="item-symbol">{item.symbol}</div>
            </div>
            <div>
               {itemName}
            </div>
            </ListGroupItem>)
        })}</ListGroup>
        </div>
        }

        return (
             <Row className="explore-token-container">
             <Col lg={2} xs={2} className="left-list-group">
               {fromTokenSelector}
             </Col>
             <Col lg={8} xs={8} className="explore-paths-container">
               <ViewPaths
               fromToken={fromToken} toToken={toToken} fromPathLoading={fromPathLoading} toPathLoading={toPathLoading}
               fromPathListWithRate={fromPathListWithRate}
               toPathListWithRate={toPathListWithRate} transferAmountChanged={this.transferAmountChanged}
               submitSwap={this.props.submitSwap} setProviderNotification={this.props.setProviderNotification}/>
             </Col>
             <Col lg={2} xs={2} style={{'paddingLeft': 0}} className="right-list-group">
                {toTokenSelector}
             </Col>
            </Row>
            )
    }

render() {
    const { pool: {currentSelectedPool, poolTransactionStatus, currentViewPoolType}, poolData} = this.props;
     let poolSelectionView = poolData;
     
     if (currentViewPoolType === 'all') {
       poolSelectionView = poolData;
     } else if (currentViewPoolType === 'v1') {
       poolSelectionView = poolData.filter((pool) => (pool.poolVersion === '1'));
     } else {
       poolSelectionView = poolData.filter((pool) => (pool.poolVersion === '2'));
     }
    const {selectedPoolIndex, isError, errorMessage} = this.state;
    const self = this;
    let poolDataList = <span/>;
    if (poolSelectionView.length === 0) {
      poolDataList =  <span/>;
    } else {
      poolDataList =
      <span>
        <ListGroupItem>
          Symbol
        </ListGroupItem>
       {
         poolSelectionView.map(function(poolRow, idx){
         let cellActive = '';
         if (idx === selectedPoolIndex) {
           cellActive = 'cell-active';
         }
        return <ListGroupItem onClick={self.setSelectedPool.bind(self, poolRow, idx)} key={'pool-select-'+idx} className={`select-pool-toolbar ${cellActive}`}>
              {poolRow.symbol}
           </ListGroupItem>
         })
       }</span>

    }
    let selectedPool =  (<div className="loading-spinner">
                          <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
                        </div>
                        )
    
    if (isNonEmptyObject(currentSelectedPool)) {
      selectedPool  =  <SelectedPool {...this.props} currentSelectedPool={currentSelectedPool} setErrorMessage={this.setErrorMessage} resetErrorMessage={this.resetErrorMessage}/>
    }

    let transactionStatusMessage = <span/>;
    if (isError) {
      transactionStatusMessage = <Alert  variant={"danger"}>
              {errorMessage}
            </Alert>
    }
    if (poolTransactionStatus.type === 'pending') {
      transactionStatusMessage = <Alert  variant={"info"}>
              <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/> {poolTransactionStatus.message}
            </Alert>
    }
    if (poolTransactionStatus.type === 'error') {
      transactionStatusMessage = <Alert  variant={"danger"}>
              <FontAwesomeIcon icon={faTimes}/> {poolTransactionStatus.message}
            </Alert>      
    }
    return (
      <div>
      {transactionStatusMessage}
      <div className="app-toolbar-container">
        <Row style={{'marginBottom': '40px'}}>
        <Col lg={2}>
        <ListGroup className="select-pool-group">
          {poolDataList}
        </ListGroup>
        </Col>
        <Col lg={10}>
          {selectedPool}
        </Col>
        </Row>
      </div>
      </div>
      )
  }

Project = (props) => {
  const { match, project, selectedProject, selectedPlaylist, showProject, showPlaylist, setPreviewActivity } = props;

  const showActivityPreview = (id) => {
    const activityId = parseInt(id, 10);
    const activity = selectedPlaylist.activities.find((act) => act.id === activityId);

    if (activity) {
      setPreviewActivity(activity);
    }
  };
  const addToLMS = (id) => {
    const activityId = parseInt(id, 10);
    const activity = selectedPlaylist.activities.find((act) => act.id === activityId);

    if (!activity) return;

    const finalUrl = `${decodeURIComponent(match.params.redirectUrl)}&title=${encodeURIComponent(activity.title)}&entity=activity&id=${activity.id}`;
    Swal.fire({
      icon: 'warning',
      html: `You have selected <strong>Activity: ${activity.title}</strong><br>Do you want to continue ?`,
      showCancelButton: true,
      confirmButtonColor: '#084892',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, add it',
    }).then((result) => {
      if (result.value) {
        window.location.href = finalUrl;
      }
    });
  };

  return (
    <>
      <div className=" mt-2 mb-2 lti-deeplink-project-container">
        <div className="col result">
          <div key={project.id} className="row project ">
            <div className="col project-about">
              <div
                className="project-img"
                style={{
                  backgroundImage: project.thumb_url.includes('pexels.com') ? `url(${project.thumb_url})` : `url(${global.config.resourceUrl}${project.thumb_url})`,
                }}
              ></div>

              <div className="row project-details-row">
                <div className="col project-detail">
                  <h5 className="project-detail-title">
                    {project.title.length > 0 && project.title}
                    {project.title.length === 0 && 'Project title not available'}
                  </h5>
                  <p className="project-detail-paragraph">
                    {project.description.length > 0 && project?.description?.slice(0, 120)}
                    {project.description.length === 0 && 'Project description not available'}
                  </p>
                  {project.user && (
                    <p className="project-detail-by-author">
                      <label>By:</label>
                      {` ${project.user.last_name}, ${project.user.first_name} (${project.user.email})`}
                      <br />
                      <label>Organization:</label>
                      {project.organization?.name && ` ${project.organization.name}`}
                      {!project.organization?.name && ' N/A'}
                    </p>
                  )}
                </div>
              </div>
            </div>

            {/* {selectedProject?.id !== project.id && ( */}
            <div className=" text-right actions">
              <button className="btn btn-primary" type="button" onClick={() => showProject(project)}>
                View Playlists
              </button>
            </div>
          </div>
        </div>
        <div className="row playlists-row">
          <div className="col">
            {selectedProject?.id === project.id && (
              <div className="row">
                <div className="col playlists-container">
                  {selectedProject.playlists.length === 0 && <Alert variant="warning">This project has no playlists</Alert>}
                  {selectedProject.playlists.length > 0 && (
                    <Card>
                      <ListGroup variant="flush">
                        {selectedProject.playlists.map((playlist) => (
                          <ListGroup.Item key={playlist.id} className="plist" onClick={() => showPlaylist(playlist)}>
                            <div className={selectedPlaylist?.id === playlist.id && playlist.activities.length > 0 ? 'row active-2' : 'row active'}>
                              <div className="col">
                                <h5>{playlist.title}</h5>
                              </div>
                              <div className="col text-right">
                                <FontAwesomeIcon
                                  className="pull-right"
                                  icon={selectedPlaylist?.id === playlist.id && playlist.activities.length > 0 ? 'chevron-down' : 'chevron-right'}
                                />
                              </div>
                            </div>
                            {selectedPlaylist?.id === playlist.id && playlist.activities.length === 0 && <Alert variant="warning">This playlist has no activities.</Alert>}

                            {selectedPlaylist?.id === playlist.id && playlist.activities.length > 0 && (
                              <div className="playlist-activities">
                                {playlist.activities.map((activity) => (
                                  <div className="  activities" key={activity.id}>
                                    <div
                                      className="project-img"
                                      style={{
                                        backgroundImage: activity.thumb_url.includes('pexels.com')
                                          ? `url(${activity.thumb_url})`
                                          : `url(${global.config.resourceUrl}${activity.thumb_url})`,
                                      }}
                                    ></div>
                                    <div className=" title">
                                      <p>{activity.title}</p>
                                    </div>
                                    <div className=" dropdown-icon ">
                                      <Dropdown>
                                        <Dropdown.Toggle className="actions-button">
                                          <FontAwesomeIcon icon="ellipsis-v" style={{ color: 'rgb(8, 72, 146)' }} />
                                        </Dropdown.Toggle>
                                        <Dropdown.Menu>
                                          <Dropdown.Item to="#" eventKey={activity.id} onSelect={showActivityPreview}>
                                            <FontAwesomeIcon icon="eye" className="action-icon" />
                                            Preview
                                          </Dropdown.Item>
                                          <Dropdown.Item to="#" eventKey={activity.id} onSelect={addToLMS}>
                                            <FontAwesomeIcon icon="plus" className="action-icon" />
                                            Add to Course
                                          </Dropdown.Item>
                                        </Dropdown.Menu>
                                      </Dropdown>
                                    </div>
                                  </div>
                                ))}
                              </div>
                            )}
                          </ListGroup.Item>
                        ))}
                      </ListGroup>
                    </Card>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

export default function Home(props) {
  const server = props.server;
  const router = useRouter();
  const { id } = router.query;
  const serverToken = props.serverToken;
  const [metadata, setMetadata] = useState({});
  const [watched, setWatched] = useState(false);
  const [inWatchList, setInWatchList] = useState(false);
  const [actors, setActors] = useState([]);
  const [recommended, setRecommended] = useState([]);

  const [viewTrailer, setViewTrailer] = useState(false);
  const [trailer, setTrailer] = useState(false);

  const [loaded, setLoaded] = useState(false)
  const [recommendedLoaded, setRecommendedLoaded] = useState(false);

  const videoRef = useRef();
  const windowSize = useWindowSize();



  // Used for manual metadata search
  const [metadataBox, setMetadataBox] = useState(false);
  const [metadataSearchResult, setMetadataSearchResult] = useState([]);
  const metadataSearch = useRef(null);



  // This has it's own useEffect because if it doesn't videojs doesn't work (????)
  useEffect(() => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/getRecommended?token=${serverToken}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
      })
      .then(r => r.json())
      .then(result => {
        if (result.success) {
          console.log(result);
          result.movies.forEach(movie => {
            for (let image of movie.images) {
                if (image.active) {
                    if (image.type === 'BACKDROP') {
                        if (image.path === 'no_image') {
                            movie.backdrop = null;
                        } else {
                            movie.backdrop = image.path;
                        }
                    } else {
                        if (image.path === 'no_image') {
                            movie.backdrop = null;
                        } else {
                            movie.poster = image.path;
                        }
                    }

                    if (movie.backdrop != null && movie.poster != null) {
                        break;
                    }
                }
            }
        });
          setRecommended(result.movies);
        }
      })
      .then(() => {
        setRecommendedLoaded(true);
      });



      fetch(`${server.server_ip}/api/movies/${id}?token=${serverToken}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
      })
      .then(r => r.json())
      .then(result => {
        let meta = result.result;
        console.log(meta)
        let finish_at = new Date(new Date().getTime() + meta.runtime * 60000);
        meta.finish_at = finish_at.getHours() + ":" + finish_at.getMinutes();
        for (let image of meta.images) {
          if (image.active && image.type === 'BACKDROP') {
            meta.backdrop = image.path;
          }
          if (image.active && image.type === 'POSTER') {
            meta.poster = image.path;
          }
        }
        
        let new_added_date = new Date(parseInt(meta.added_date));
        let added_year = new_added_date.getFullYear();
        let added_month = new_added_date.getMonth() + 1;
        if(added_month < 10) {
          added_month = "0" + added_month.toString();
        }
        let adde_date = new_added_date.getDate();
        if(adde_date < 10) {
          adde_date = "0" + adde_date.toString();
        }
        meta.added_date = `${added_year}-${added_month}-${adde_date}`
  
        let currentTime = "";
        let hours = Math.floor(meta.currentTime / 60 / 60)
        let minutes = Math.floor((meta.currentTime / 60) % 60)
        let seconds = Math.floor(meta.currentTime % 60);
        if (hours >= 1) {
          currentTime += `${hours}:`
        }
        if (minutes < 10) {
          minutes = `0${minutes}`;
        }
        if (seconds < 10) {
          seconds = `0${seconds}`
        }
        currentTime += `${minutes}:${seconds}`
        meta.currentTimeSeconds = meta.currentTime;
        meta.currentTime = currentTime;
        console.log(videoRef)
        videoRef.current.setTitle(meta.title);
  
        setInWatchList(meta.inwatchlist);
        setWatched(meta.watched);
        setMetadata(meta);
        setTrailer(meta.trailer);
        meta.actors = meta.actors.sort((a, b) => {
          return parseFloat(a.order) - parseFloat(b.order);
        });
        setActors(meta.actors);

        if (router.query.autoPlay) {
          videoRef.current.show();
        }
      }).then(() => {
        setLoaded(true)
      });
    });
  }, []);

  const markAsWatched = () => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/setWatched?watched=true&token=${serverToken}`)
      .then(r => r.json())
      .then(status => {
        if (status.success) {
          setWatched(true);
        } else {
          console.log("ERROR MARKING AS WATCHED: " + status);
        }
      }).catch(err => {
        console.log(err);
      });
    });

  }

  const markAsNotWatched = () => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/setWatched?watched=false&token=${serverToken}`)
      .then(r => r.json())
      .then(status => {
        if (status.success) {
          setWatched(false);
        } else {
          console.log("ERROR MARKING AS WATCHED: " + status);
        }
      })
      .catch(err => {
        console.log(err);
      });
    });
  }

  const addToWatchList = () => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/addToWatchList?add=true&token=${serverToken}`)
      .then(r => r.json())
      .then(status => {
        if (status.success) {
          setInWatchList(true);
        } else {
          console.log("ERROR adding to watchlist: " + status);
        }
      })      .catch(err => {
        console.log(err);
      });
    });
  }

  const removeFromWatchList = () => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/addToWatchList?add=false&token=${serverToken}`)
      .then(r => r.json())
      .then(status => {
        if (status.success) {
          setInWatchList(false);
        } else {
          console.log("ERROR removing from watchlist: " + status);
        }
      })
      .catch(err => {
        console.log(err);
      });
    });
  }

  const searchMetadata = (event) => {
    let search = metadataSearch.current.value;
    if(search != ""){
      validateServerAccess(server, (serverToken) => {
        fetch(`${server.server_ip}/api/movies/searchMetadata?search=${search}&token=${serverToken}`)
        .then(r => r.json())
        .then(result => {
          console.log(result);
          let metadataElements = [];
          for (let movie of result) {
            const img = movie.poster_path !== null ? `https://image.tmdb.org/t/p/w500/${movie.poster_path}` : 'https://via.placeholder.com/500x750' 
            metadataElements.push(
              <ListGroup.Item key={movie.id} className={Styles.metadataSearchRow} data-metadataid={movie.id}>
                <Image src={img} alt="" />
                <div>
                  <h5>{movie.title}</h5>
                  <p>{movie.overview}</p>
                </div>
                <Button onClick={() => updateMetadata(movie.id)}>Välj</Button>
              </ListGroup.Item>
            );        
          }
          setMetadataSearchResult(metadataElements);
        });
      });
    }
   
    event.preventDefault();
  }

  const updateMetadata = (metadataID) => {
    validateServerAccess(server, (serverToken) => {
      fetch(`${server.server_ip}/api/movies/${id}/updateMetadata?metadataID=${metadataID}&token=${serverToken}`)
      .then(r => r.json())
      .then(json => {
        if (json.success) {
          Router.reload(window.location.pathname);
        }
      });
    });
  }


  const getActors = () => {
    let elements = [];
    for (const actor of actors) {
      elements.push(
        <Actor key={actor.order} name={actor.name} characterName={actor.character} image={actor.image} />
      )
    }
    return elements;
  }

  const getRecommended = () => {
    let elements = [];
    for (const movie of recommended) {
      let img = movie.backdrop !== null ? `https://image.tmdb.org/t/p/w500/${movie.backdrop}` : 'https://via.placeholder.com/2000x1000' 
      elements.push(
          <MovieBackdrop markAsDoneButton id={movie.id} time={0} runtime={0} title={movie.title} overview={movie.overview} backdrop={img} onClick={(id) => selectMovie(movie.id)}></MovieBackdrop>
      );
    }
    return elements;
  }

  const selectMovie = (id) => {
    Router.push(`/server/${server.server_id}/movies/video/${id}`);
    Router.events.on("routeChangeComplete", () => {
      Router.reload(window.location.pathname);


    });
  }
  
  const scrollLeft = (id) => {
    document.getElementById(id).scrollLeft -= (window.innerWidth)*0.8;
    window.scrollTo(window.scrollX, window.scrollY - 1);
    window.scrollTo(window.scrollX, window.scrollY + 1);
  }
  const scrollRight = (id) => {
      document.getElementById(id).scrollLeft += (window.innerWidth)*0.8;
      window.scrollTo(window.scrollX, window.scrollY - 1);
      window.scrollTo(window.scrollX, window.scrollY + 1);
  }
  return (
    <>
    <HlsPlayer
      ref={videoRef}
      server={server}
      id={id}
      type={"movie"}>

    </HlsPlayer>
   
    {(!loaded || !recommendedLoaded) &&
    <>
      <Head>
        <title>Dose</title>
      </Head>
      <div className={Styles.loadingioSpinnerEclipse}>
          <div className={Styles.ldio}>
              <div></div>
          </div>
      </div>
    </>
    }
    {loaded && recommendedLoaded && 
    <>


  <Head>
      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
      <title>{metadata.title + " (" + metadata.release_date.split('-')[0] + ")"}</title>
      <meta name="title" content={metadata.title + " (" + metadata.release_date + ")"} />
      <meta name="description" content={metadata.overview} />

      <meta property="og:type" content="website" />
      <meta property="og:title" content={metadata.title + " (" + metadata.release_date.split('-')[0] + ")"} />
      <meta property="og:description" content={metadata.overview} />
      <meta property="og:image" content={"https://image.tmdb.org/t/p/original" + metadata.backdrop} />

      <meta property="twitter:card" content="summary_large_image" />
      <meta property="twitter:title" content={metadata.title + " (" + metadata.release_date.split('-')[0] + ")"} />
      <meta property="twitter:description" content={metadata.overview} />
      <meta property="twitter:image" content={"https://image.tmdb.org/t/p/original" + metadata.backdrop} />
    </Head>

    {trailer !== false && viewTrailer &&
    <VideoTrailer onClose={() => setViewTrailer(false)} videoPath={trailer} />
    }


    <div id="container">
    <div style={{backgroundImage: `url('https://image.tmdb.org/t/p/original${metadata.backdrop}')`}} className={Styles.background}></div>
    <div className="backIcon" onClick={() => {
      Router.back();
      Router.events.on("routeChangeComplete", () => {
        Router.reload(window.location.pathname);
      });
      }}></div>


    {metadataBox &&
      <div className="metadataBox">
        <Form onSubmit={searchMetadata}>
          <Form.Group controlId="formSearch">
            <Form.Label>Update metadata for {metadata.path}</Form.Label>
            <Form.Control ref={metadataSearch} type="text" placeholder="Search for new metadata..." />
          </Form.Group>
          <Button variant="primary" type="submit">
            Search
          </Button>
        </Form>
        <div style={{clear: 'both'}}></div>

        <ListGroup id="metadataSearchResult">
          {metadataSearchResult}
        </ListGroup>
      </div>
    }


    <div className={Styles.top}>
      <div className={Styles.poster} style={{backgroundImage: `url('https://image.tmdb.org/t/p/original${metadata.poster}')`}} />
      <div className={Styles.description}>
        <h1>{metadata.title}</h1>
        <div className={Styles.metadata}>
          <p className={Styles.releaseDate}>{metadata.release_date}</p>
          <p className={Styles.runtime}>{Math.floor(metadata.runtime / 60) + "h " + metadata.runtime%60+"m"}</p>
          <p className={Styles.endsat}>Ends At {metadata.finish_at}</p>
          <p className={Styles.addedDate}>Added {metadata.added_date}</p>
        </div>
        <div className={Styles.overview}>
            <p>{metadata.overview}</p>
        </div>
        <div className={Styles.actions}>
          {metadata.currentTimeSeconds > 0 &&
          <div style={{marginRight: "15px"}} className={Styles.actionButton}>
            <div className={Styles.playButton} onClick={() => videoRef.current.show(metadata.currentTimeSeconds)}></div>
            <p style={{marginTop: "5px", fontSize: '14px'}}>Resume from {metadata.currentTime}</p>
          </div>
          }
          <div style={{marginRight: "15px"}} className={Styles.actionButton}>
            <div className={Styles.playButton} onClick={() => videoRef.current.show()}></div>
            <p style={{marginTop: "5px", fontSize: '14px'}}>Play from start</p>
          </div>
          <div className={`${Styles.actionButton} ${Styles.buttonHiddenForMobile}`}>
            <div className={Styles.playButton} onClick={() => setViewTrailer(true)}></div>
            <p style={{marginTop: "5px", fontSize: '14px'}}>Show trailer</p>
          </div>
          {watched &&
              <div style={{marginLeft: "15px"}} className={Styles.actionButton}>
              <div id="markAsWatched" style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/cross.svg')`}} className={Styles.playButton} onClick={() => markAsNotWatched()}></div>
              <p id="markAsWatchedText" style={{marginTop: "5px", fontSize: '14px'}}>Mark as watched</p>
              </div>
          }
          {!watched &&
            <div style={{marginLeft: "15px"}} className={Styles.actionButton}>
              <div id="markAsWatched" style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/eye.svg')`}} className={Styles.playButton} onClick={() => markAsWatched()}></div>
              <p id="markAsWatchedText" style={{marginTop: "5px", fontSize: '14px'}}>Unmark as watched</p>
            </div>
          }
          {inWatchList &&
              <div style={{marginLeft: "15px"}} className={Styles.actionButton}>
              <div id="inWatchList" style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/cross.svg')`}} className={Styles.playButton} onClick={() => removeFromWatchList()}></div>
              <p id="inWatchListText" style={{marginTop: "5px", fontSize: '14px'}}>Remove from watchlist</p>
              </div>
          }
          {!inWatchList &&
            <div style={{marginLeft: "15px"}} className={Styles.actionButton}>
              <div id="inWatchList" style={{backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/eye.svg')`}} className={Styles.playButton} onClick={() => addToWatchList()}></div>
              <p id="inWatchListText" style={{marginTop: "5px", fontSize: '14px'}}>Add to watchlist</p>
            </div>
          }
          <div className={`${Styles.actionButton} ${Styles.buttonHiddenForMobile}`}>
            <div style={{marginLeft: "15px", backgroundImage: `url('${process.env.NEXT_PUBLIC_SERVER_URL}/images/search.svg')`}} className={Styles.playButton} onClick={() => setMetadataBox(true)}></div>
            <p style={{marginLeft: "15px", marginTop: "5px", fontSize: '14px'}}>Update metadata</p>
          </div>

          <ChangeImages  id={id} server={server} serverToken={serverToken} type="movies"></ChangeImages>
          <div style={{clear: 'both'}}></div>
        </div>
      </div>
    </div>
    <div className={Styles.bottom}>
      <h1>Actors</h1>
      <div className={Styles.actors}>
        <div id="actors" className={Styles.actorBox}>
          {getActors()}
        </div>
        {actors.length * 200 > windowSize.width &&
                                <>
                                    <div className={Styles.scrollButton} onClick={() => scrollLeft('actors')}>
                                        <img alt="" src={`${process.env.NEXT_PUBLIC_SERVER_URL}/images/left.svg`} width="70" height="70" />
                                    </div>
                                    <div className={Styles.scrollButton} style={{right: '0'}} onClick={() => scrollRight('actors')}>
                                        <img alt="" src={`${process.env.NEXT_PUBLIC_SERVER_URL}/images/right.svg`} width="70" height="70" />
                                    </div>
                                </>
                            }
      </div>

    <h1>Recommended</h1>
    {recommended.length > 0 &&
                    <div style={{position: 'relative'}}>
                        <div className={Styles.movieRow}>
                            <div id="recommended" className={Styles.scrollable}>
                                {getRecommended()}
                            </div>
                            {recommended.length * 480 > windowSize.width &&
                                <div>
                                    <div className={Styles.scrollButton} onClick={() => scrollLeft('recommended')}>
                                        <img alt="" src={`${process.env.NEXT_PUBLIC_SERVER_URL}/images/left.svg`} width="70" height="70" />
                                    </div>
                                    <div className={Styles.scrollButton} style={{right: '0'}} onClick={() => scrollRight('recommended')}>
                                        <img alt="" src={`${process.env.NEXT_PUBLIC_SERVER_URL}/images/right.svg`} width="70" height="70" />
                                    </div>
                                </div>
                            }
                        </div> 
                    <hr className={Styles.divider}></hr>
                    </div> 
                }
    </div>
    </div>
    </>
    }
    </>
  )
}

export default function PostsList(props) {
    let { posts = [], status, getPosts, no_reply_tag } = props

    /* 
        Not the best implementation, but I dont want to spend hours to check if changing it breaks anything
    */
    // eslint-disable-next-line
    useEffect(useCallback(() => {
        if ((status === 'idle' || status === 'done') && !posts.length) {
            getPosts()
            console.log('fetching on posts load, status:', status)
        }
    }, [status, posts, getPosts]), [getPosts])
    useBottomScrollListener(useCallback(() => {
        if (status === "idle" && posts.length) {
            getPosts()
            console.log('loading more posts, status:', status)
        }
    }, [status, posts, getPosts]), 700, 200, null, true)
    if (status === 'loading' && !posts.length)
        return <Spinner />
    return (
        <ListGroup variant="flush" className="border-bottom">
            {(posts.length > 0) ? posts.map(post => {
                let { retweeted_by } = post
                return (
                    <ListGroup.Item
                        className="px-3"
                        action
                        as={"div"}
                        // to={`/post/${post.id_str}`}
                        key={post.id_str + (retweeted_by && retweeted_by.id_str)}
                    >
                        <Row className="d-flex px-3 pb-1 mt-n2 text-muted">
                            <PostTag no_reply_tag={no_reply_tag} post={post} />
                        </Row>
                        <Link className="stretched-link" to={`/post/${post.id_str}`}></Link>
                        <Media className="mb-n2 w-100">
                            <UserLink
                                user={post.user}
                                className="rounded-circle"
                                to={`/user/${post.user.screen_name}`}
                            >
                                <Figure
                                    className="bg-border-color rounded-circle mr-2 overflow-hidden"
                                    style={{ height: "50px", width: "50px" }}
                                >
                                    <Figure.Image
                                        src={(post.user.default_profile_image) ? '/img/default-profile-vector.svg' : post.user.profile_image_url_https}
                                        className="w-100 h-100"
                                    />
                                </Figure>
                            </UserLink>
                            <Media.Body className="w-50">
                                <Row className="d-flex align-items-center">
                                    <UserLink
                                        user={post.user}
                                        to={`/user/${post.user.screen_name}`}
                                        className="text-dark font-weight-bold mr-1">
                                        {post.user.name}
                                    </UserLink>
                                    {/* tick */}
                                    <span className="text-muted mr-1">@{post.user.screen_name}</span>
                                    <pre className="m-0 text-muted">{" - "}</pre>
                                    <span className="text-muted"><ReactTimeAgo date={Date.parse(post.created_at)} timeStyle="twitter" /></span>
                                </Row>
                                <Row className="mb-n1 mt-1"><blockquote className="mb-1 mw-100">
                                    <PostText to={`/post/${post.id_str}`} post={post} />
                                </blockquote></Row>
                                <Row>
                                    <MultiMedia
                                        className="mt-2"
                                        post={post} />
                                    <QuotedPost className="mt-2" post={!no_reply_tag && post.quoted_status} />
                                </Row>
                                <Row className="d-flex justify-content-end align-items-center position-static">
                                    <ReactionsBar post={post} />
                                </Row>
                            </Media.Body>
                        </Media>
                    </ListGroup.Item>
                )
            }) : (status === 'idle' &&
                <div className="message">No posts for you right now</div>
            )}
            {status === 'loading' && <Spinner />}
            {status === 'error' && <TryAgain fn={getPosts} />}
        </ListGroup>
    )
}

render() {
    const { details } = this.state;
    const properties = details.map((property, i) => {
      return (
        <ListGroup.Item key={i}>
          Name: {property.name}
          <br />
          Type: {property.type} <br />
          Value: {property.value}
        </ListGroup.Item>
      );
    });

    return (
      <div className="barGraph">
        <Modal
          show={this.state.showModal}
          onHide={() => {
            this.setState({ showModal: false });
          }}
        >
          <Modal.Header closeButton>
            <Modal.Title>{this.state.element} Properties</Modal.Title>
          </Modal.Header>
          <ListGroup variant="flush">{properties}</ListGroup>
        </Modal>
        <Bar
          data={{
            labels: this.props.labels,
            datasets: [
              {
                label: 'Snapshot 1',
                data: this.props.data.snapshot0,
                backgroundColor: 'rgba(104,245,196,1)',
              },
              {
                label: 'Snapshot 2',
                data: this.props.data.snapshot1,
                backgroundColor: 'rgba(104,245,196,0.86)',
              },
              {
                label: 'Snapshot 3',
                data: this.props.data.snapshot2,
                backgroundColor: 'rgba(104,245,196,0.72)',
              },
              {
                label: 'Snapshot 4',
                data: this.props.data.snapshot3,
                backgroundColor: 'rgba(104,245,196,0.68)',
              },
              {
                label: 'Snapshot 5',
                data: this.props.data.snapshot4,
                backgroundColor: 'rgba(104,245,196,0.54)',
              },
              {
                label: 'Snapshot 6',
                data: this.props.data.snapshot5,
                backgroundColor: 'rgba(104,245,196,0.40)',
              },
              {
                label: 'Snapshot 7',
                data: this.props.data.snapshot6,
                backgroundColor: 'rgba(104,245,196,0.26)',
              },
            ],
          }}
          options={{
            onClick: this.toggleModal,
            legend: {
              display: true,
              position: 'right',
              labels: {
                borderWidth: 1,
                fontColor: 'black',
              },
            },
            scales: {
              xAxes: [
                {
                  stacked: true,
                  scaleLabel: {
                    display: true,
                    labelString: 'Possible Memory Leaks',
                  },
                },
              ],
              yAxes: [
                {
                  stacked: true,
                  scaleLabel: {
                    display: true,
                    labelString: 'References (per snapshot)',
                  },
                },
              ],
            },
          }}
        />
      </div>
    );
  }

Home = () => {
  const { state } = useContext(UserContext);
  console.log(state);

  return (
    <>
      <div class="home">

        <div
          style={{ backgroundColor: "" }}
          class="col d-flex justify-content-center"
        >
          {!state && <Card
            style={{
              
              marginTop: "6%",
              opacity: "0.8",
              backgroundImage: "url(images/intern.png)",
              width:"80%",
              height:"300px", 
              color: "#00FFFF",
            }}
          >
            <Card.Body>
              <Card.Text>
                <h3>10,000+ INTERSHIPS ARE WAITING FOR YOU!<br></br><br></br><br></br></h3>
              </Card.Text>
              <Button style={{color: 'black',backgroundColor: '#40E0D0',borderColor: '#FF00FF'}} variant="info" as={Link} to="/student-signup" >
                Get Started 
              </Button>
            </Card.Body>
          </Card>}
        </div>
        <div style={{ background: "", padding: "30px 0 80px 0" }}>
        
          <Container>
          
            <Row>
              <Col className="col-12 col-md-6" id="offer-range">
                <img src="images/industry.png" alt=""></img>
                <h4 style={{ marginTop: 15, marginBottom: 15 }}>
                  Internship By Industry
                </h4>
                <ListGroup>
                <a className="itemLink" href="/industry-internship/IT">
                <ListGroup.Item action variant="secondary">
                  IT
                </ListGroup.Item>
              </a>
                  <a className="itemLink" href="/industry-internship/Marketing">
                    <ListGroup.Item action variant="secondary">
                      Marketing
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/industry-internship/Design">
                    {" "}
                    <ListGroup.Item action variant="success">
                      Design
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/industry-internship/MBA">
                    {" "}
                    <ListGroup.Item action variant="danger">
                      MBA
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/industry-internship/Engineering">
                    {" "}
                    <ListGroup.Item action variant="warning">
                      Engineering
                    </ListGroup.Item>{" "}
                  </a>
                  <a className="itemLink" href="/industry-internship/Media">
                    {" "}
                    <ListGroup.Item action variant="info">
                      Media
                    </ListGroup.Item>{" "}
                  </a>
                  <a className="itemLink" href="/industry-internship/Teaching">
                    <ListGroup.Item action variant="success">
                      Teaching
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/industry-internship/Finance">
                    {" "}
                    <ListGroup.Item action variant="dark">
                      Finance
                    </ListGroup.Item>{" "}
                  </a>
                </ListGroup>
              </Col>
              <Col className="col-12 col-md-6" id="offer-range">
                <img src="images/location.png" alt=""></img>
                <h4 style={{ marginTop: 15, marginBottom: 15 }}>
                  {" "}
                  Internship By Location
                </h4>
                <ListGroup>
                  <a className="itemLink" href="/location-internship/Mumbai">
                  <ListGroup.Item action variant="secondary">
                  Mumbai
                </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/location-internship/Pune">
                    <ListGroup.Item action variant="secondary">
                      Pune
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/location-internship/Bangalore">
                    {" "}
                    <ListGroup.Item action variant="success">
                      Bangalore
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/location-internship/Chennai">
                    {" "}
                    <ListGroup.Item action variant="danger">
                      Chennai
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/location-internship/Kolkata">
                    {" "}
                    <ListGroup.Item action variant="warning">
                      Kolkata
                    </ListGroup.Item>{" "}
                  </a>
                  <a className="itemLink" href="/location-internship/Gugaon">
                    {" "}
                    <ListGroup.Item action variant="info">
                      Gurgaon
                    </ListGroup.Item>{" "}
                  </a>
                  <a className="itemLink" href="/location-internship/Delhi">
                    <ListGroup.Item action variant="success">
                      Delhi
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/location-internship/Noida">
                    {" "}
                    <ListGroup.Item action variant="dark">
                      Noida
                    </ListGroup.Item>{" "}
                  </a>
                </ListGroup>
              </Col>
              <Col className="col-12 col-md-6" id="offer-range">
                <img src="images/stream.png" alt=""></img>
                <h4 style={{ marginTop: 15, marginBottom: 15 }}>
                  Internship By Stream
                </h4>
                <ListGroup>
                  <a className="itemLink" href="/stream-internship/Management">
                  <ListGroup.Item action variant="secondary">
                  Management
                </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/stream-internship/Manufacturing">
                    <ListGroup.Item action variant="secondary">
                      Manufacturing
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/stream-internship/Accounts">
                    {" "}
                    <ListGroup.Item action variant="success">
                      Accounts
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/stream-internship/Architecture">
                    {" "}
                    <ListGroup.Item action variant="danger">
                      Architecture
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/stream-internship/Machine Learning">
                    {" "}
                    <ListGroup.Item action variant="warning">
                      Machine Learning
                    </ListGroup.Item>{" "}
                  </a>
                  <a className="itemLink" href="/stream-internship/Data Science">
                    {" "}
                    <ListGroup.Item action variant="info">
                      Data Science
                    </ListGroup.Item>{" "}
                  </a>
                  <a className="itemLink" href="/stream-internship/Development">
                    <ListGroup.Item action variant="success">
                      Development
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/stream-internship/Design">
                    {" "}
                    <ListGroup.Item action variant="dark">
                      Design
                    </ListGroup.Item>{" "}
                  </a>
                </ListGroup>
              </Col>
              <Col className="col-12 col-md-6" id="offer-range">
                <img src="images/ot2.png" alt=""></img>
                <h4 style={{ marginTop: 15, marginBottom: 15 }}>
                  Online Trainings by Us
                </h4>
                <ListGroup>
                  <a className="itemLink" href="/#">
                  <ListGroup.Item action variant="secondary">
                  Programming with Python
                  </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/#">
                    <ListGroup.Item action variant="secondary">
                      Digital Marketing
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/#">
                    {" "}
                    <ListGroup.Item action variant="success">
                      Web Development
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/#">
                    {" "}
                    <ListGroup.Item action variant="danger">
                      Machine Learning
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/#">
                    {" "}
                    <ListGroup.Item action variant="warning">
                      Advanced Excel
                    </ListGroup.Item>{" "}
                  </a>
                  <a className="itemLink" href="/#">
                    {" "}
                    <ListGroup.Item action variant="info">
                      Ethical Hacking
                    </ListGroup.Item>{" "}
                  </a>
                  <a className="itemLink" href="/#">
                    <ListGroup.Item action variant="success">
                      AutoCAD
                    </ListGroup.Item>
                  </a>
                  <a className="itemLink" href="/#">
                    {" "}
                    <ListGroup.Item action variant="dark">
                      Creative Writing
                    </ListGroup.Item>{" "}
                  </a>
                </ListGroup>
              </Col>
            </Row>
          </Container>
        </div>
      </div>
    </>
  );
}