import React , { useEffect , useState } from 'react' ; import { remote } from 'electron' ; import { Text , Card , Spinner } from '@blueprintjs/core' ; import { Row , Col } from 'react-flexbox-grid' ; import DesktopCapturerSources from '../../features/DesktopCapturerSourcesService' ; const desktopCapturerSourcesService = remote . getGlobal ( 'desktopCapturerSourcesService' ) as DesktopCapturerSources ; class SharingSourcePreviewCardProps { sharingSourceID : string | undefined = '' ; onClickCard ? = ( ) => { } ; isChangeApperanceOnHover ? = false ; } export default function SharingSourcePreviewCard ( props ) { const { sharingSourceID , isChangeApperanceOnHover , onClickCard } = props ; const [ sourceImage , setSourceImage ] = useState ( '' ) ; const [ sourceName , setSourceName ] = useState ( '' ) ; const [ appIconSourceImage , setAppIconSourceImage ] = useState ( '' ) ; const [ isHovered , setIsHovered ] = useState ( false ) ; useEffect ( ( ) => { setTimeout ( async ( ) => { const sources = desktopCapturerSourcesService . getSourcesMap ( ) ; if ( sources && sharingSourceID && sources . get ( sharingSourceID ) ) { setSourceImage ( sources . get ( sharingSourceID ) ?. source . thumbnail . toDataURL ( ) || '' ) ; if ( sources . get ( sharingSourceID ) ?. source . appIcon != null ) { setAppIconSourceImage ( sources . get ( sharingSourceID ) ?. source . appIcon . toDataURL ( ) || '' ) ; } setSourceName ( sources . get ( sharingSourceID ) ?. source . name || 'Failed to get source name...' ) ; } } , 1000 ) ; } , [ sharingSourceID ] ) ; return ( < Card className = "preview-share-thumb-container" onClick = { onClickCard ? ( ) => onClickCard ( ) : ( ) => { } } style = { { height : '200px' , minWidth : '250px' , backgroundColor : isHovered && isChangeApperanceOnHover ? '#2B95D6' : 'rgba(0,0,0,0.0)' , } } onMouseEnter = { ( ) => setIsHovered ( true ) } onMouseOver = { ( ) => setIsHovered ( true ) } onMouseLeave = { ( ) => setIsHovered ( false ) } > < Row center = "xs" middle = "xs" style = { { height : '95%' , minWidth : '200px' } } > < Col xs = { 12 } > { sourceImage !== '' ? ( < > < img src = { sourceImage } alt = "" style = { { height : '143px' , maxWidth : '100%' } } /> { appIconSourceImage !== '' ? ( < Card style = { { position : 'absolute' , width : '40px' , height : '40px' , transform : 'translate(0px, -45px)' , borderRadius : '500px' , padding : '0px' , margin : '0px' , } } elevation = { 4 } > < Row center = "xs" middle = "xs" style = { { height : '100%' } } > < img src = { appIconSourceImage } alt = "" style = { { width : '25px' , height : '25px' , } } /> < /Row> < /Card>) : (<> </ > ) } < />) : (<Spinner size={60}/ > ) } < /Col> < /Row> < Row center = "xs" > < Col xs = { 12 } style = { { backgroundColor : isHovered && isChangeApperanceOnHover ? 'rgba(0,0,0,0.8)' : 'rgba(0,0,0,0.45)' , color : 'white' , textAlign : 'center' , } } > < Text ellipsize > { sourceName } < /Text> < /Col> < /Row> < /Card>); }