@fortawesome/free-regular-svg-icons#faStar JavaScript Examples

The following examples show how to use @fortawesome/free-regular-svg-icons#faStar. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: artworkMedia.js    From ErgoAuctionHouse with MIT License 4 votes vote down vote up 
render() {
        let box = this.props.box;
        let icon = ''
        if (box.isPicture)
            icon = 'lnr-picture'
        if (box.isAudio)
            icon = 'lnr-music-note'
        else if (box.isVideo)
            icon = 'lnr-film-play'
        let style = {}
        if (this.props.height)
            style.height = this.props.height
        if (this.props.width)
            style.width = this.props.width
        return (
            <div className="imgDiv"
                 style={style}
            >

                {!this.props.avoidDetail && <ArtworkDetails
                    box={this.props.box}
                    isOpen={this.state.artDetail}
                    close={() => this.setState({artDetail: !this.state.artDetail})}
                />}

                {!this.props.removeIcon && icon.length > 0 && <i
                    style={{zIndex: 1, cursor: "pointer"}}
                    onClick={() => {
                        if (!this.props.avoidDetail) this.setState({artDetail: true})
                    }}
                    className={icon + " text-dark font-weight-bold imgicon"}/>}
                {!this.props.avoidFav && <div
                    style={{zIndex: 1, cursor: "pointer"}}
                    onClick={() => this.favNFT()}
                    className="font-icon-wrapper font-weight-bold text-dark imgfav">
                    <FontAwesomeIcon icon={this.props.box.isFav? faStarSolid : faStar}/>
                </div>}
                {box.isPicture && <div>
                    <img
                        style={{cursor: 'pointer'}}
                        onClick={() => {
                            if (!this.props.avoidDetail) this.setState({artDetail: true})
                        }}
                        className="auctionImg"
                        src={
                            box.artworkUrl
                                ? box.artworkUrl
                                : noImg
                        }
                    />
                </div>}
                {box.isAudio && <div>
                    <img
                        style={{cursor: 'pointer'}}
                        className="auctionImg"
                        onClick={() => {
                            if (!this.props.avoidDetail) this.setState({artDetail: true})
                        }}
                        src={
                            box.artworkUrl
                                ? box.artworkUrl
                                : noImg
                        }
                    />
                    <AudioPlayer
                        customAdditionalControls={[]}
                        showSkipControls={false}
                        showJumpControls={false}
                        showFilledVolume={false}
                        defaultCurrentTime={"00:00"}
                        layout={"horizontal-reverse"}
                        preload={"none"}
                        autoPlay={false}
                        className='audioTab'
                        src={box.audioUrl}
                    />
                </div>}
                {box.isVideo && <div>
                    <ReactPlayer
                        pip={true}
                        light={!this.props.preload}
                        playing={false}
                        url={[{src: box.artworkUrl}]} // video location
                        controls  // gives the front end video controls
                        width='100%'
                        height='100%'
                        config={{
                            file: {
                                attributes: {
                                    controlsList: 'nodownload'  //<- this is the important bit
                                }
                            }
                        }}
                    />
                </div>}
                {!box.isArtwork && <div
                    style={{cursor: 'pointer'}}
                    onClick={() => {
                        if (!this.props.avoidDetail) this.setState({artDetail: true})
                    }}
                    className='notArtwork'>
                    <b className='font-size-xlg text-grey'>May not be an artwork</b>
                    <br/>
                    <text className='font-size-md text-grey'>Click to see details</text>
                </div>}
            </div>
        );
    }