2018-02-22 10:35:46 +11:00
import React from 'react' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2019-08-14 12:07:32 +10:00
import PropTypes from 'prop-types' ;
2018-02-22 10:35:46 +11:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import { connect } from 'react-redux' ;
import classNames from 'classnames' ;
2020-07-07 20:14:19 +10:00
import { changeUploadCompose , uploadThumbnail } from '../../../actions/compose' ;
2018-02-22 10:35:46 +11:00
import { getPointerPosition } from '../../video' ;
2019-08-14 12:07:32 +10:00
import { FormattedMessage , defineMessages , injectIntl } from 'react-intl' ;
import IconButton from 'mastodon/components/icon_button' ;
import Button from 'mastodon/components/button' ;
import Video from 'mastodon/features/video' ;
2019-08-24 06:38:02 +10:00
import Audio from 'mastodon/features/audio' ;
2019-08-15 23:13:26 +10:00
import Textarea from 'react-textarea-autosize' ;
import UploadProgress from 'mastodon/features/compose/components/upload_progress' ;
import CharacterCounter from 'mastodon/features/compose/components/character_counter' ;
import { length } from 'stringz' ;
2019-08-16 01:24:45 +10:00
import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components' ;
2019-10-10 14:21:38 +11:00
import GIFV from 'mastodon/components/gifv' ;
2020-07-03 00:27:35 +10:00
import { me } from 'mastodon/initial_state' ;
2020-11-24 03:35:14 +11:00
// eslint-disable-next-line import/no-extraneous-dependencies
2020-09-01 08:26:10 +10:00
import tesseractCorePath from 'tesseract.js-core/tesseract-core.wasm.js' ;
2020-11-24 03:35:14 +11:00
// eslint-disable-next-line import/extensions
2020-09-01 08:26:10 +10:00
import tesseractWorkerPath from 'tesseract.js/dist/worker.min.js' ;
2020-10-13 10:19:35 +11:00
import { assetHost } from 'mastodon/utils/config' ;
2019-08-14 12:07:32 +10:00
const messages = defineMessages ( {
close : { id : 'lightbox.close' , defaultMessage : 'Close' } ,
apply : { id : 'upload_modal.apply' , defaultMessage : 'Apply' } ,
placeholder : { id : 'upload_modal.description_placeholder' , defaultMessage : 'A quick brown fox jumps over the lazy dog' } ,
2020-07-07 20:14:19 +10:00
chooseImage : { id : 'upload_modal.choose_image' , defaultMessage : 'Choose image' } ,
2019-08-14 12:07:32 +10:00
} ) ;
2018-02-22 10:35:46 +11:00
const mapStateToProps = ( state , { id } ) => ( {
media : state . getIn ( [ 'compose' , 'media_attachments' ] ) . find ( item => item . get ( 'id' ) === id ) ,
2020-07-03 00:27:35 +10:00
account : state . getIn ( [ 'accounts' , me ] ) ,
2020-07-07 20:14:19 +10:00
isUploadingThumbnail : state . getIn ( [ 'compose' , 'isUploadingThumbnail' ] ) ,
2018-02-22 10:35:46 +11:00
} ) ;
const mapDispatchToProps = ( dispatch , { id } ) => ( {
2019-08-14 12:07:32 +10:00
onSave : ( description , x , y ) => {
dispatch ( changeUploadCompose ( id , { description , focus : ` ${ x . toFixed ( 2 ) } , ${ y . toFixed ( 2 ) } ` } ) ) ;
2018-02-22 10:35:46 +11:00
} ,
2020-07-07 20:14:19 +10:00
onSelectThumbnail : files => {
dispatch ( uploadThumbnail ( id , files [ 0 ] ) ) ;
} ,
2018-02-22 10:35:46 +11:00
} ) ;
2019-08-15 23:13:26 +10:00
const removeExtraLineBreaks = str => str . replace ( /\n\n/g , '******' )
. replace ( /\n/g , ' ' )
. replace ( /\*\*\*\*\*\*/g , '\n\n' ) ;
2019-10-10 14:21:38 +11:00
class ImageLoader extends React . PureComponent {
static propTypes = {
src : PropTypes . string . isRequired ,
width : PropTypes . number ,
height : PropTypes . number ,
} ;
state = {
loading : true ,
} ;
componentDidMount ( ) {
const image = new Image ( ) ;
image . addEventListener ( 'load' , ( ) => this . setState ( { loading : false } ) ) ;
image . src = this . props . src ;
}
render ( ) {
const { loading } = this . state ;
if ( loading ) {
return < canvas width = { this . props . width } height = { this . props . height } / > ;
} else {
return < img { ... this . props } alt = '' / > ;
}
}
}
2018-09-15 01:59:48 +10:00
export default @ connect ( mapStateToProps , mapDispatchToProps )
2019-08-14 12:07:32 +10:00
@ injectIntl
2018-09-15 01:59:48 +10:00
class FocalPointModal extends ImmutablePureComponent {
2018-02-22 10:35:46 +11:00
static propTypes = {
media : ImmutablePropTypes . map . isRequired ,
2020-07-03 00:27:35 +10:00
account : ImmutablePropTypes . map . isRequired ,
2020-07-07 20:14:19 +10:00
isUploadingThumbnail : PropTypes . bool ,
onSave : PropTypes . func . isRequired ,
onSelectThumbnail : PropTypes . func . isRequired ,
2019-08-14 12:07:32 +10:00
onClose : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
2018-02-22 10:35:46 +11:00
} ;
state = {
x : 0 ,
y : 0 ,
focusX : 0 ,
focusY : 0 ,
dragging : false ,
2019-08-14 12:07:32 +10:00
description : '' ,
dirty : false ,
2019-08-15 23:13:26 +10:00
progress : 0 ,
2019-10-10 14:21:38 +11:00
loading : true ,
2020-09-01 08:26:10 +10:00
ocrStatus : '' ,
2018-02-22 10:35:46 +11:00
} ;
componentWillMount ( ) {
this . updatePositionFromMedia ( this . props . media ) ;
}
componentWillReceiveProps ( nextProps ) {
if ( this . props . media . get ( 'id' ) !== nextProps . media . get ( 'id' ) ) {
this . updatePositionFromMedia ( nextProps . media ) ;
}
}
componentWillUnmount ( ) {
document . removeEventListener ( 'mousemove' , this . handleMouseMove ) ;
document . removeEventListener ( 'mouseup' , this . handleMouseUp ) ;
}
handleMouseDown = e => {
document . addEventListener ( 'mousemove' , this . handleMouseMove ) ;
document . addEventListener ( 'mouseup' , this . handleMouseUp ) ;
this . updatePosition ( e ) ;
this . setState ( { dragging : true } ) ;
}
2019-08-16 04:28:56 +10:00
handleTouchStart = e => {
document . addEventListener ( 'touchmove' , this . handleMouseMove ) ;
document . addEventListener ( 'touchend' , this . handleTouchEnd ) ;
this . updatePosition ( e ) ;
this . setState ( { dragging : true } ) ;
}
2018-02-22 10:35:46 +11:00
handleMouseMove = e => {
this . updatePosition ( e ) ;
}
handleMouseUp = ( ) => {
document . removeEventListener ( 'mousemove' , this . handleMouseMove ) ;
document . removeEventListener ( 'mouseup' , this . handleMouseUp ) ;
this . setState ( { dragging : false } ) ;
}
2019-08-16 04:28:56 +10:00
handleTouchEnd = ( ) => {
document . removeEventListener ( 'touchmove' , this . handleMouseMove ) ;
document . removeEventListener ( 'touchend' , this . handleTouchEnd ) ;
this . setState ( { dragging : false } ) ;
}
2018-02-22 10:35:46 +11:00
updatePosition = e => {
const { x , y } = getPointerPosition ( this . node , e ) ;
const focusX = ( x - . 5 ) * 2 ;
const focusY = ( y - . 5 ) * - 2 ;
2019-08-14 12:07:32 +10:00
this . setState ( { x , y , focusX , focusY , dirty : true } ) ;
2018-02-22 10:35:46 +11:00
}
updatePositionFromMedia = media => {
2019-08-14 12:07:32 +10:00
const focusX = media . getIn ( [ 'meta' , 'focus' , 'x' ] ) ;
const focusY = media . getIn ( [ 'meta' , 'focus' , 'y' ] ) ;
const description = media . get ( 'description' ) || '' ;
2018-02-22 10:35:46 +11:00
if ( focusX && focusY ) {
const x = ( focusX / 2 ) + . 5 ;
const y = ( focusY / - 2 ) + . 5 ;
2019-08-14 12:07:32 +10:00
this . setState ( {
x ,
y ,
focusX ,
focusY ,
description ,
dirty : false ,
} ) ;
2018-02-22 10:35:46 +11:00
} else {
2019-08-14 12:07:32 +10:00
this . setState ( {
x : 0.5 ,
y : 0.5 ,
focusX : 0 ,
focusY : 0 ,
description ,
dirty : false ,
} ) ;
2018-02-22 10:35:46 +11:00
}
}
2019-08-14 12:07:32 +10:00
handleChange = e => {
this . setState ( { description : e . target . value , dirty : true } ) ;
}
2019-11-04 22:59:17 +11:00
handleKeyDown = ( e ) => {
if ( e . keyCode === 13 && ( e . ctrlKey || e . metaKey ) ) {
e . preventDefault ( ) ;
e . stopPropagation ( ) ;
this . setState ( { description : e . target . value , dirty : true } ) ;
this . handleSubmit ( ) ;
}
}
2019-08-14 12:07:32 +10:00
handleSubmit = ( ) => {
this . props . onSave ( this . state . description , this . state . focusX , this . state . focusY ) ;
this . props . onClose ( ) ;
}
2018-02-22 10:35:46 +11:00
setRef = c => {
this . node = c ;
}
2019-08-15 23:13:26 +10:00
handleTextDetection = ( ) => {
const { media } = this . props ;
this . setState ( { detecting : true } ) ;
2020-09-01 08:26:10 +10:00
fetchTesseract ( ) . then ( ( { createWorker } ) => {
const worker = createWorker ( {
workerPath : tesseractWorkerPath ,
corePath : tesseractCorePath ,
2021-01-09 13:48:50 +11:00
langPath : ` ${ assetHost } /ocr/lang-data/ ` ,
2020-09-01 08:26:10 +10:00
logger : ( { status , progress } ) => {
if ( status === 'recognizing text' ) {
this . setState ( { ocrStatus : 'detecting' , progress } ) ;
} else {
this . setState ( { ocrStatus : 'preparing' , progress } ) ;
}
} ,
2019-08-16 01:24:45 +10:00
} ) ;
2019-11-25 11:42:51 +11:00
let media _url = media . get ( 'url' ) ;
2019-09-27 10:16:11 +10:00
if ( window . URL && URL . createObjectURL ) {
try {
media _url = URL . createObjectURL ( media . get ( 'file' ) ) ;
} catch ( error ) {
console . error ( error ) ;
}
}
2020-09-01 08:26:10 +10:00
( async ( ) => {
await worker . load ( ) ;
await worker . loadLanguage ( 'eng' ) ;
await worker . initialize ( 'eng' ) ;
const { data : { text } } = await worker . recognize ( media _url ) ;
this . setState ( { description : removeExtraLineBreaks ( text ) , dirty : true , detecting : false } ) ;
await worker . terminate ( ) ;
} ) ( ) ;
} ) . catch ( ( e ) => {
console . error ( e ) ;
this . setState ( { detecting : false } ) ;
} ) ;
2019-08-15 23:13:26 +10:00
}
2020-07-07 20:14:19 +10:00
handleThumbnailChange = e => {
if ( e . target . files . length > 0 ) {
this . setState ( { dirty : true } ) ;
this . props . onSelectThumbnail ( e . target . files ) ;
}
}
setFileInputRef = c => {
this . fileInput = c ;
}
handleFileInputClick = ( ) => {
this . fileInput . click ( ) ;
}
2018-02-22 10:35:46 +11:00
render ( ) {
2020-07-07 20:14:19 +10:00
const { media , intl , account , onClose , isUploadingThumbnail } = this . props ;
2020-09-01 08:26:10 +10:00
const { x , y , dragging , description , dirty , detecting , progress , ocrStatus } = this . state ;
2018-02-22 10:35:46 +11:00
const width = media . getIn ( [ 'meta' , 'original' , 'width' ] ) || null ;
const height = media . getIn ( [ 'meta' , 'original' , 'height' ] ) || null ;
2019-08-14 12:07:32 +10:00
const focals = [ 'image' , 'gifv' ] . includes ( media . get ( 'type' ) ) ;
2020-07-07 20:14:19 +10:00
const thumbnailable = [ 'audio' , 'video' ] . includes ( media . get ( 'type' ) ) ;
2019-08-14 12:07:32 +10:00
const previewRatio = 16 / 9 ;
const previewWidth = 200 ;
const previewHeight = previewWidth / previewRatio ;
2018-02-22 10:35:46 +11:00
2019-11-21 21:39:07 +11:00
let descriptionLabel = null ;
if ( media . get ( 'type' ) === 'audio' ) {
descriptionLabel = < FormattedMessage id = 'upload_form.audio_description' defaultMessage = 'Describe for people with hearing loss' / > ;
} else if ( media . get ( 'type' ) === 'video' ) {
descriptionLabel = < FormattedMessage id = 'upload_form.video_description' defaultMessage = 'Describe for people with hearing loss or visual impairment' / > ;
} else {
descriptionLabel = < FormattedMessage id = 'upload_form.description' defaultMessage = 'Describe for the visually impaired' / > ;
}
2020-09-01 08:26:10 +10:00
let ocrMessage = '' ;
if ( ocrStatus === 'detecting' ) {
ocrMessage = < FormattedMessage id = 'upload_modal.analyzing_picture' defaultMessage = 'Analyzing picture…' / > ;
} else {
ocrMessage = < FormattedMessage id = 'upload_modal.preparing_ocr' defaultMessage = 'Preparing OCR…' / > ;
}
2018-02-22 10:35:46 +11:00
return (
2019-08-14 12:07:32 +10:00
< div className = 'modal-root__modal report-modal' style = { { maxWidth : 960 } } >
< div className = 'report-modal__target' >
2021-05-12 05:15:57 +10:00
< IconButton className = 'report-modal__close' title = { intl . formatMessage ( messages . close ) } icon = 'times' onClick = { onClose } size = { 20 } / >
2019-08-14 12:07:32 +10:00
< FormattedMessage id = 'upload_modal.edit_media' defaultMessage = 'Edit media' / >
< / d i v >
< div className = 'report-modal__container' >
< div className = 'report-modal__comment' >
{ focals && < p > < FormattedMessage id = 'upload_modal.hint' defaultMessage = 'Click or drag the circle on the preview to choose the focal point which will always be in view on all thumbnails.' / > < / p > }
2020-07-07 20:14:19 +10:00
{ thumbnailable && (
< React . Fragment >
< label className = 'setting-text-label' htmlFor = 'upload-modal__thumbnail' > < FormattedMessage id = 'upload_form.thumbnail' defaultMessage = 'Change thumbnail' / > < / l a b e l >
< Button disabled = { isUploadingThumbnail } text = { intl . formatMessage ( messages . chooseImage ) } onClick = { this . handleFileInputClick } / >
< label >
< span style = { { display : 'none' } } > { intl . formatMessage ( messages . chooseImage ) } < / s p a n >
< input
id = 'upload-modal__thumbnail'
ref = { this . setFileInputRef }
type = 'file'
accept = 'image/png,image/jpeg'
onChange = { this . handleThumbnailChange }
style = { { display : 'none' } }
disabled = { isUploadingThumbnail }
/ >
< / l a b e l >
< hr className = 'setting-divider' / >
< / R e a c t . F r a g m e n t >
) }
2019-11-21 21:39:07 +11:00
< label className = 'setting-text-label' htmlFor = 'upload-modal__description' >
{ descriptionLabel }
< / l a b e l >
2019-08-14 12:07:32 +10:00
2019-08-15 23:13:26 +10:00
< div className = 'setting-text__wrapper' >
< Textarea
id = 'upload-modal__description'
className = 'setting-text light'
value = { detecting ? '…' : description }
onChange = { this . handleChange }
2019-11-04 22:59:17 +11:00
onKeyDown = { this . handleKeyDown }
2019-08-15 23:13:26 +10:00
disabled = { detecting }
autoFocus
/ >
< div className = 'setting-text__modifiers' >
2020-09-01 08:26:10 +10:00
< UploadProgress progress = { progress * 1 00 } active = { detecting } icon = 'file-text-o' message = { ocrMessage } / >
2019-08-15 23:13:26 +10:00
< / d i v >
< / d i v >
< div className = 'setting-text__toolbar' >
< button disabled = { detecting || media . get ( 'type' ) !== 'image' } className = 'link-button' onClick = { this . handleTextDetection } > < FormattedMessage id = 'upload_modal.detect_text' defaultMessage = 'Detect text from picture' / > < / b u t t o n >
2019-09-14 00:00:34 +10:00
< CharacterCounter max = { 1500 } text = { detecting ? '' : description } / >
2019-08-15 23:13:26 +10:00
< / d i v >
2020-07-07 20:14:19 +10:00
< Button disabled = { ! dirty || detecting || isUploadingThumbnail || length ( description ) > 1500 } text = { intl . formatMessage ( messages . apply ) } onClick = { this . handleSubmit } / >
2019-08-14 12:07:32 +10:00
< / d i v >
2019-08-16 06:49:00 +10:00
< div className = 'focal-point-modal__content' >
2019-08-14 12:07:32 +10:00
{ focals && (
2019-08-16 06:47:51 +10:00
< div className = { classNames ( 'focal-point' , { dragging } ) } ref = { this . setRef } onMouseDown = { this . handleMouseDown } onTouchStart = { this . handleTouchStart } >
2019-10-10 14:21:38 +11:00
{ media . get ( 'type' ) === 'image' && < ImageLoader src = { media . get ( 'url' ) } width = { width } height = { height } alt = '' / > }
{ media . get ( 'type' ) === 'gifv' && < GIFV src = { media . get ( 'url' ) } width = { width } height = { height } / > }
2019-08-14 12:07:32 +10:00
< div className = 'focal-point__preview' >
< strong > < FormattedMessage id = 'upload_modal.preview_label' defaultMessage = 'Preview ({ratio})' values = { { ratio : '16:9' } } / > < / s t r o n g >
< div style = { { width : previewWidth , height : previewHeight , backgroundImage : ` url( ${ media . get ( 'preview_url' ) } ) ` , backgroundSize : 'cover' , backgroundPosition : ` ${ x * 100 } % ${ y * 100 } % ` } } / >
< / d i v >
< div className = 'focal-point__reticle' style = { { top : ` ${ y * 100 } % ` , left : ` ${ x * 100 } % ` } } / >
2019-08-16 06:47:51 +10:00
< div className = 'focal-point__overlay' / >
2019-08-14 12:07:32 +10:00
< / d i v >
) }
2019-08-24 06:38:02 +10:00
{ media . get ( 'type' ) === 'video' && (
2019-08-14 12:07:32 +10:00
< Video
preview = { media . get ( 'preview_url' ) }
2020-11-22 09:19:04 +11:00
frameRate = { media . getIn ( [ 'meta' , 'original' , 'frame_rate' ] ) }
2019-08-14 12:07:32 +10:00
blurhash = { media . get ( 'blurhash' ) }
src = { media . get ( 'url' ) }
detailed
2019-08-24 06:38:02 +10:00
inline
editable
/ >
) }
{ media . get ( 'type' ) === 'audio' && (
< Audio
src = { media . get ( 'url' ) }
duration = { media . getIn ( [ 'meta' , 'original' , 'duration' ] , 0 ) }
height = { 150 }
2020-07-03 00:27:35 +10:00
poster = { media . get ( 'preview_url' ) || account . get ( 'avatar_static' ) }
2020-07-06 02:28:25 +10:00
backgroundColor = { media . getIn ( [ 'meta' , 'colors' , 'background' ] ) }
foregroundColor = { media . getIn ( [ 'meta' , 'colors' , 'foreground' ] ) }
accentColor = { media . getIn ( [ 'meta' , 'colors' , 'accent' ] ) }
2019-08-14 12:07:32 +10:00
editable
/ >
) }
< / d i v >
2018-02-22 10:35:46 +11:00
< / d i v >
< / d i v >
) ;
}
}