edit.tsx
94 lines
| 1 | /** |
| 2 | * External dependencies |
| 3 | */ |
| 4 | import { |
| 5 | AudioDurationDisplay, |
| 6 | micIcon, |
| 7 | playerPauseIcon, |
| 8 | useMediaRecording, |
| 9 | } from '@automattic/jetpack-ai-client'; |
| 10 | import { useBlockProps } from '@wordpress/block-editor'; |
| 11 | import { Placeholder, Button } from '@wordpress/components'; |
| 12 | import { useCallback } from '@wordpress/element'; |
| 13 | import { __ } from '@wordpress/i18n'; |
| 14 | |
| 15 | function AudioPlayer( { src, state } ) { |
| 16 | if ( ! src ) { |
| 17 | return null; |
| 18 | } |
| 19 | |
| 20 | if ( state !== 'inactive' ) { |
| 21 | return null; |
| 22 | } |
| 23 | |
| 24 | return <audio controls src={ src } />; // eslint-disable-line jsx-a11y/media-has-caption |
| 25 | } |
| 26 | |
| 27 | export default function CreateWithVoiceEdit() { |
| 28 | const { state, start, pause, stop, resume, url } = useMediaRecording( { |
| 29 | onDone: blob => { |
| 30 | console.log( 'Blob created: ', blob ); // eslint-disable-line no-console |
| 31 | }, |
| 32 | } ); |
| 33 | |
| 34 | const recordingHandler = useCallback( () => { |
| 35 | if ( state === 'inactive' ) { |
| 36 | start( 1000 ); // stream audio every second |
| 37 | } else if ( state === 'recording' ) { |
| 38 | pause(); |
| 39 | } else if ( state === 'paused' ) { |
| 40 | resume(); |
| 41 | } |
| 42 | }, [ state, start, pause, resume ] ); |
| 43 | |
| 44 | let buttonLabel = __( 'Begin recording', 'jetpack' ); |
| 45 | if ( state === 'recording' ) { |
| 46 | buttonLabel = __( 'Pause recording', 'jetpack' ); |
| 47 | } else if ( state === 'paused' ) { |
| 48 | buttonLabel = __( 'Resume recording', 'jetpack' ); |
| 49 | } |
| 50 | |
| 51 | const blockProps = useBlockProps(); |
| 52 | |
| 53 | return ( |
| 54 | <div { ...blockProps }> |
| 55 | <Placeholder |
| 56 | icon="microphone" |
| 57 | label="AI: Create with voice" |
| 58 | instructions={ __( |
| 59 | 'Transform your spoken words into publish-ready blocks with AI', |
| 60 | 'jetpack' |
| 61 | ) } |
| 62 | className="jetpack-ai-create-with-voice" |
| 63 | > |
| 64 | <div className="jetpack-ai-create-with-voice__player"> |
| 65 | <strong> |
| 66 | <AudioDurationDisplay url={ url } /> |
| 67 | </strong> |
| 68 | <AudioPlayer state={ state } src={ url } /> |
| 69 | </div> |
| 70 | |
| 71 | <div className="jetpack-ai-create-with-voice__recorder"> |
| 72 | <Button |
| 73 | className="jetpack-ai-create-with-voice__record-button" |
| 74 | icon={ state === 'recording' ? playerPauseIcon : micIcon } |
| 75 | iconPosition="right" |
| 76 | variant="primary" |
| 77 | onClick={ recordingHandler } |
| 78 | > |
| 79 | { buttonLabel } |
| 80 | </Button> |
| 81 | <Button |
| 82 | className="jetpack-ai-create-with-voice__done-button" |
| 83 | variant="primary" |
| 84 | onClick={ stop } |
| 85 | disabled={ state === 'inactive' } |
| 86 | > |
| 87 | { __( 'Done', 'jetpack' ) } |
| 88 | </Button> |
| 89 | </div> |
| 90 | </Placeholder> |
| 91 | </div> |
| 92 | ); |
| 93 | } |
| 94 |