2018-08-18 05:01:53 -04:00
import React from 'react' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2019-08-13 22:07:32 -04:00
import PropTypes from 'prop-types' ;
2018-08-18 05:01:53 -04:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import { connect } from 'react-redux' ;
import classNames from 'classnames' ;
import { changeUploadCompose } from 'flavours/glitch/actions/compose' ;
import { getPointerPosition } from 'flavours/glitch/features/video' ;
2019-08-13 22:07:32 -04:00
import { FormattedMessage , defineMessages , injectIntl } from 'react-intl' ;
import IconButton from 'flavours/glitch/components/icon_button' ;
import Button from 'flavours/glitch/components/button' ;
import Video from 'flavours/glitch/features/video' ;
2019-08-23 16:38:02 -04:00
import Audio from 'flavours/glitch/features/audio' ;
2019-08-15 09:13:26 -04:00
import Textarea from 'react-textarea-autosize' ;
import UploadProgress from 'flavours/glitch/features/compose/components/upload_progress' ;
import CharacterCounter from 'flavours/glitch/features/compose/components/character_counter' ;
import { length } from 'stringz' ;
2019-08-15 11:24:45 -04:00
import { Tesseract as fetchTesseract } from 'flavours/glitch/util/async-components' ;
2019-08-13 22:07:32 -04: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' } ,
} ) ;
2018-08-18 05:01:53 -04:00
const mapStateToProps = ( state , { id } ) => ( {
media : state . getIn ( [ 'compose' , 'media_attachments' ] ) . find ( item => item . get ( 'id' ) === id ) ,
} ) ;
const mapDispatchToProps = ( dispatch , { id } ) => ( {
2019-08-13 22:07:32 -04:00
onSave : ( description , x , y ) => {
dispatch ( changeUploadCompose ( id , { description , focus : ` ${ x . toFixed ( 2 ) } , ${ y . toFixed ( 2 ) } ` } ) ) ;
2018-08-18 05:01:53 -04:00
} ,
} ) ;
2019-08-15 09:13:26 -04:00
const removeExtraLineBreaks = str => str . replace ( /\n\n/g , '******' )
. replace ( /\n/g , ' ' )
. replace ( /\*\*\*\*\*\*/g , '\n\n' ) ;
const assetHost = process . env . CDN _HOST || '' ;
2019-08-13 22:07:32 -04:00
export default @ connect ( mapStateToProps , mapDispatchToProps )
@ injectIntl
class FocalPointModal extends ImmutablePureComponent {
2018-08-18 05:01:53 -04:00
static propTypes = {
media : ImmutablePropTypes . map . isRequired ,
2019-08-13 22:07:32 -04:00
onClose : PropTypes . func . isRequired ,
intl : PropTypes . object . isRequired ,
2018-08-18 05:01:53 -04:00
} ;
state = {
x : 0 ,
y : 0 ,
focusX : 0 ,
focusY : 0 ,
dragging : false ,
2019-08-13 22:07:32 -04:00
description : '' ,
dirty : false ,
2019-08-15 09:13:26 -04:00
progress : 0 ,
2018-08-18 05:01:53 -04: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-15 14:28:56 -04:00
handleTouchStart = e => {
document . addEventListener ( 'touchmove' , this . handleMouseMove ) ;
document . addEventListener ( 'touchend' , this . handleTouchEnd ) ;
this . updatePosition ( e ) ;
this . setState ( { dragging : true } ) ;
}
2018-08-18 05:01:53 -04:00
handleMouseMove = e => {
this . updatePosition ( e ) ;
}
handleMouseUp = ( ) => {
document . removeEventListener ( 'mousemove' , this . handleMouseMove ) ;
document . removeEventListener ( 'mouseup' , this . handleMouseUp ) ;
this . setState ( { dragging : false } ) ;
}
2019-08-15 14:28:56 -04:00
handleTouchEnd = ( ) => {
document . removeEventListener ( 'touchmove' , this . handleMouseMove ) ;
document . removeEventListener ( 'touchend' , this . handleTouchEnd ) ;
this . setState ( { dragging : false } ) ;
}
2018-08-18 05:01:53 -04:00
updatePosition = e => {
const { x , y } = getPointerPosition ( this . node , e ) ;
const focusX = ( x - . 5 ) * 2 ;
const focusY = ( y - . 5 ) * - 2 ;
2019-08-13 22:07:32 -04:00
this . setState ( { x , y , focusX , focusY , dirty : true } ) ;
2018-08-18 05:01:53 -04:00
}
updatePositionFromMedia = media => {
2019-08-13 22:07:32 -04:00
const focusX = media . getIn ( [ 'meta' , 'focus' , 'x' ] ) ;
const focusY = media . getIn ( [ 'meta' , 'focus' , 'y' ] ) ;
const description = media . get ( 'description' ) || '' ;
2018-08-18 05:01:53 -04:00
if ( focusX && focusY ) {
const x = ( focusX / 2 ) + . 5 ;
const y = ( focusY / - 2 ) + . 5 ;
2019-08-13 22:07:32 -04:00
this . setState ( {
x ,
y ,
focusX ,
focusY ,
description ,
dirty : false ,
} ) ;
2018-08-18 05:01:53 -04:00
} else {
2019-08-13 22:07:32 -04:00
this . setState ( {
x : 0.5 ,
y : 0.5 ,
focusX : 0 ,
focusY : 0 ,
description ,
dirty : false ,
} ) ;
2018-08-18 05:01:53 -04:00
}
}
2019-08-13 22:07:32 -04:00
handleChange = e => {
this . setState ( { description : e . target . value , dirty : true } ) ;
}
handleSubmit = ( ) => {
this . props . onSave ( this . state . description , this . state . focusX , this . state . focusY ) ;
this . props . onClose ( ) ;
}
2018-08-18 05:01:53 -04:00
setRef = c => {
this . node = c ;
}
2019-08-15 09:13:26 -04:00
handleTextDetection = ( ) => {
const { media } = this . props ;
this . setState ( { detecting : true } ) ;
2019-08-15 11:24:45 -04:00
fetchTesseract ( ) . then ( ( { TesseractWorker } ) => {
const worker = new TesseractWorker ( {
workerPath : ` ${ assetHost } /packs/ocr/worker.min.js ` ,
corePath : ` ${ assetHost } /packs/ocr/tesseract-core.wasm.js ` ,
langPath : ` ${ assetHost } /ocr/lang-data ` ,
} ) ;
worker . recognize ( media . get ( 'url' ) )
. progress ( ( { progress } ) => this . setState ( { progress } ) )
. finally ( ( ) => worker . terminate ( ) )
. then ( ( { text } ) => this . setState ( { description : removeExtraLineBreaks ( text ) , dirty : true , detecting : false } ) )
. catch ( ( ) => this . setState ( { detecting : false } ) ) ;
} ) . catch ( ( ) => this . setState ( { detecting : false } ) ) ;
2019-08-15 09:13:26 -04:00
}
2018-08-18 05:01:53 -04:00
render ( ) {
2019-08-13 22:07:32 -04:00
const { media , intl , onClose } = this . props ;
2019-08-15 09:13:26 -04:00
const { x , y , dragging , description , dirty , detecting , progress } = this . state ;
2018-08-18 05:01:53 -04:00
const width = media . getIn ( [ 'meta' , 'original' , 'width' ] ) || null ;
const height = media . getIn ( [ 'meta' , 'original' , 'height' ] ) || null ;
2019-08-13 22:07:32 -04:00
const focals = [ 'image' , 'gifv' ] . includes ( media . get ( 'type' ) ) ;
const previewRatio = 16 / 9 ;
const previewWidth = 200 ;
const previewHeight = previewWidth / previewRatio ;
2018-08-18 05:01:53 -04:00
return (
2019-08-13 22:07:32 -04:00
< div className = 'modal-root__modal report-modal' style = { { maxWidth : 960 } } >
< div className = 'report-modal__target' >
< IconButton className = 'media-modal__close' title = { intl . formatMessage ( messages . close ) } icon = 'times' onClick = { onClose } size = { 16 } / >
< 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 > }
< label className = 'setting-text-label' htmlFor = 'upload-modal__description' > < FormattedMessage id = 'upload_form.description' defaultMessage = 'Describe for the visually impaired' / > < / l a b e l >
2019-08-15 09:13:26 -04:00
< div className = 'setting-text__wrapper' >
< Textarea
id = 'upload-modal__description'
className = 'setting-text light'
value = { detecting ? '…' : description }
onChange = { this . handleChange }
disabled = { detecting }
autoFocus
/ >
< div className = 'setting-text__modifiers' >
< UploadProgress progress = { progress * 100 } active = { detecting } icon = 'file-text-o' message = { < FormattedMessage id = 'upload_modal.analyzing_picture' defaultMessage = 'Analyzing picture…' / > } / >
< / 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-13 10:00:34 -04:00
< CharacterCounter max = { 1500 } text = { detecting ? '' : description } / >
2019-08-15 09:13:26 -04:00
< / d i v >
2019-09-13 18:52:56 -04:00
< Button disabled = { ! dirty || detecting || length ( description ) > 1500 } text = { intl . formatMessage ( messages . apply ) } onClick = { this . handleSubmit } / >
2019-08-13 22:07:32 -04:00
< / d i v >
2019-08-15 16:49:00 -04:00
< div className = 'focal-point-modal__content' >
2019-08-13 22:07:32 -04:00
{ focals && (
2019-08-15 16:47:51 -04:00
< div className = { classNames ( 'focal-point' , { dragging } ) } ref = { this . setRef } onMouseDown = { this . handleMouseDown } onTouchStart = { this . handleTouchStart } >
2019-08-13 22:07:32 -04:00
{ media . get ( 'type' ) === 'image' && < img src = { media . get ( 'url' ) } width = { width } height = { height } alt = '' / > }
{ media . get ( 'type' ) === 'gifv' && < video src = { media . get ( 'url' ) } width = { width } height = { height } loop muted autoPlay / > }
< 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-15 16:47:51 -04:00
< div className = 'focal-point__overlay' / >
2019-08-13 22:07:32 -04:00
< / d i v >
) }
2019-08-23 16:38:02 -04:00
{ media . get ( 'type' ) === 'video' && (
2019-08-13 22:07:32 -04:00
< Video
preview = { media . get ( 'preview_url' ) }
blurhash = { media . get ( 'blurhash' ) }
src = { media . get ( 'url' ) }
detailed
2019-08-23 16:38:02 -04:00
inline
editable
/ >
) }
{ media . get ( 'type' ) === 'audio' && (
< Audio
src = { media . get ( 'url' ) }
duration = { media . getIn ( [ 'meta' , 'original' , 'duration' ] , 0 ) }
height = { 150 }
preload
2019-08-13 22:07:32 -04:00
editable
/ >
) }
< / d i v >
2018-08-18 05:01:53 -04:00
< / d i v >
< / d i v >
) ;
}
}