BeyondWords – AI audio for publishers / 4.2.2

BeyondWords – AI audio for publishers v4.2.2

speechkit / src / Component / Post / Panel / Inspect / index.js

index.js in BeyondWords – AI audio for publishers 4.2.2, at src/Component/Post/Panel/Inspect/index.js

395 lines 11.0 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4	import { __ } from '@wordpress/i18n';
5	import {
6	Button,
7	PanelBody,
8	TextareaControl,
9	TextControl,
10	} from '@wordpress/components';
11	import { compose, useCopyToClipboard } from '@wordpress/compose';
12	import { useEntityProp } from '@wordpress/core-data';
13	import { useDispatch, withDispatch, withSelect } from '@wordpress/data';
14	import { useEffect, useMemo, useState } from '@wordpress/element';
15	import { store as noticesStore } from '@wordpress/notices';
16
17	export function PostInspectPanel( {
18	beyondwordsDisabled,
19	beyondwordsGenerateAudio,
20	beyondwordsContentId,
21	beyondwordsPlayerStyle,
22	beyondwordsLanguageId,
23	beyondwordsBodyVoiceId,
24	beyondwordsTitleVoiceId,
25	beyondwordsSummaryVoiceId,
26	beyondwordsProjectId,
27	beyondwordsErrorMessage,
28	// Deprecated
29	beyondwordsPodcastId,
30	publishPostToSpeechkit,
31	speechkitAccessKey,
32	speechkitGenerateAudio,
33	speechkitPodcastId,
34	speechkitProjectId,
35	speechkitDisabled,
36	speechkitError,
37	speechkitErrorMessage,
38	speechkitInfo,
39	speechkitResponse,
40	speechkitLink,
41	speechkitText,
42	speechkitRetries,
43	speechkitStatus,
44	wordpressPostId,
45	currentPostType,
46	createWarningNotice,
47	removeWarningNotice,
48	createErrorNotice,
49	removeErrorNotice,
50	didPostSaveRequestSucceed,
51	isSavingPost,
52	isAutosavingPost,
53	} ) {
54	useEffect( () => {
55	if ( isSavingPost && ! isAutosavingPost && didPostSaveRequestSucceed ) {
56	setRemoved( false );
57	removeWarningNotice();
58	removeErrorNotice();
59	}
60	}, [ isSavingPost, isAutosavingPost, didPostSaveRequestSucceed ] );
61
62	const memoizedMeta = useMemo(
63	() => ( {
64	beyondwords_generate_audio: beyondwordsGenerateAudio,
65	beyondwords_project_id: beyondwordsProjectId,
66	beyondwords_content_id: beyondwordsContentId,
67	beyondwords_player_style: beyondwordsPlayerStyle,
68	beyondwords_language_id: beyondwordsLanguageId,
69	beyondwords_body_voice_id: beyondwordsBodyVoiceId,
70	beyondwords_title_voice_id: beyondwordsTitleVoiceId,
71	beyondwords_summary_voice_id: beyondwordsSummaryVoiceId,
72	beyondwords_error_message: beyondwordsErrorMessage,
73	beyondwords_disabled: beyondwordsDisabled,
74	// Deprecated
75	beyondwords_podcast_id: beyondwordsPodcastId,
76	publish_post_to_speechkit: publishPostToSpeechkit,
77	speechkit_generate_audio: speechkitGenerateAudio,
78	speechkit_project_id: speechkitProjectId,
79	speechkit_podcast_id: speechkitPodcastId,
80	speechkit_error_message: speechkitErrorMessage,
81	speechkit_disabled: speechkitDisabled,
82	speechkit_access_key: speechkitAccessKey,
83	speechkit_error: speechkitError,
84	speechkit_info: speechkitInfo,
85	speechkit_response: speechkitResponse,
86	speechkit_retries: speechkitRetries,
87	speechkit_status: speechkitStatus,
88	_speechkit_link: speechkitLink,
89	_speechkit_text: speechkitText,
90	} ),
91	[]
92	);
93
94	const hasBeyondwordsData = Object.values( memoizedMeta ).some(
95	( x ) => x !== null && x.length !== ''
96	);
97
98	const [ meta, setMeta ] = useEntityProp(
99	'postType',
100	currentPostType,
101	'meta'
102	);
103
104	const [ removed, setRemoved ] = useState( false );
105
106	function ClipboardToolbarButton( { text, disabled } ) {
107	const { createNotice } = useDispatch( noticesStore );
108	const ref = useCopyToClipboard( text, () => {
109	createNotice( 'info', __( 'Copied data to clipboard.' ), {
110	isDismissible: true,
111	type: 'snackbar',
112	} );
113	} );
114
115	return (
116	<Button
117	isSecondary
118	id="beyondwords-inspect-copy"
119	ref={ ref }
120	disabled={ disabled }
121	>
122	{ __( 'Copy', 'speechkit' ) }
123	</Button>
124	);
125	}
126
127	const handleRemoveButtonClick = ( e ) => {
128	e.stopPropagation();
129
130	if ( removed ) {
131	restorePluginMeta()
132	.then( () => {
133	setRemoved( false );
134	removeWarningNotice();
135	removeErrorNotice();
136	} )
137	.catch( () => {
138	createErrorNotice();
139	} );
140	} else {
141	removePluginMeta()
142	.then( () => {
143	setRemoved( true );
144	createWarningNotice();
145	removeErrorNotice();
146	} )
147	.catch( () => createErrorNotice() );
148	}
149	};
150
151	const restorePluginMeta = async () => {
152	return setMeta( memoizedMeta );
153	};
154
155	const removePluginMeta = async () => {
156	// tinyurl.com/2p9xev6n
157	const emptiedMeta = {
158	...meta,
159	...Object.fromEntries(
160	Object.entries( memoizedMeta ).map( ( [ k ] ) => [ k, '' ] )
161	),
162	};
163
164	return setMeta( emptiedMeta );
165	};
166
167	const textToCopy =
168	[
169	'```',
170	`beyondwords_generate_audio\r\n${ beyondwordsGenerateAudio }`,
171	`beyondwords_project_id\r\n${ beyondwordsProjectId }`,
172	`beyondwords_content_id\r\n${ beyondwordsContentId }`,
173	`beyondwords_player_style\r\n${ beyondwordsPlayerStyle }`,
174	`beyondwords_language_id\r\n${ beyondwordsLanguageId }`,
175	`beyondwords_body_voice_id\r\n${ beyondwordsBodyVoiceId }`,
176	`beyondwords_title_voice_id\r\n${ beyondwordsTitleVoiceId }`,
177	`beyondwords_summary_voice_id\r\n${ beyondwordsSummaryVoiceId }`,
178	`beyondwords_error_message\r\n${ beyondwordsErrorMessage }`,
179	`beyondwords_disabled\r\n${ beyondwordsDisabled }`,
180	`=== ${ __( 'Deprecated', 'speechkit' ) } ===`,
181	`beyondwords_podcast_id\r\n${ beyondwordsPodcastId }`,
182	`publish_post_to_speechkit\r\n${ publishPostToSpeechkit }`,
183	`speechkit_generate_audio\r\n${ speechkitGenerateAudio }`,
184	`speechkit_project_id\r\n${ speechkitProjectId }`,
185	`speechkit_podcast_id\r\n${ speechkitPodcastId }`,
186	`speechkit_error_message\r\n${ speechkitErrorMessage }`,
187	`speechkit_disabled\r\n${ speechkitDisabled }`,
188	`speechkit_access_key\r\n${ speechkitAccessKey }`,
189	`speechkit_error\r\n${ speechkitError }`,
190	`speechkit_info\r\n${ speechkitInfo }`,
191	`speechkit_response\r\n${ speechkitResponse }`,
192	`speechkit_retries\r\n${ speechkitRetries }`,
193	`speechkit_status\r\n${ speechkitStatus }`,
194	`_speechkit_link\r\n${ speechkitLink }`,
195	`_speechkit_text\r\n${ speechkitText }`,
196	`=== ${ __( 'System', 'speechkit' ) } ===`,
197	`wordpress_post_id\r\n${ wordpressPostId }`,
198	`=== ${ __( 'Copied using the Block Editor', 'speechkit' ) } ===`,
199	'```',
200	].join( '\r\n\r\n' ) + '\r\n\r\n';
201
202	return (
203	<PanelBody
204	title={ __( 'Inspect', 'speechkit' ) }
205	initialOpen={ false }
206	className={ 'beyondwords beyondwords-sidebar__inspect' }
207	>
208	<TextControl
209	label="beyondwords_generate_audio"
210	readOnly
211	value={ beyondwordsGenerateAudio }
212	/>
213
214	<TextControl
215	label="beyondwords_project_id"
216	readOnly
217	value={ beyondwordsProjectId }
218	/>
219
220	<TextControl
221	label="beyondwords_content_id"
222	readOnly
223	value={ beyondwordsContentId }
224	/>
225
226	<TextControl
227	label="beyondwords_player_style"
228	readOnly
229	value={ beyondwordsPlayerStyle }
230	/>
231
232	<TextControl
233	label="beyondwords_language_id"
234	readOnly
235	value={ beyondwordsLanguageId }
236	/>
237
238	<TextControl
239	label="beyondwords_body_voice_id"
240	readOnly
241	value={ beyondwordsBodyVoiceId }
242	/>
243
244	<TextControl
245	label="beyondwords_title_voice_id"
246	readOnly
247	value={ beyondwordsTitleVoiceId }
248	/>
249
250	<TextControl
251	label="beyondwords_summary_voice_id"
252	readOnly
253	value={ beyondwordsSummaryVoiceId }
254	/>
255
256	{ /* eslint-disable-next-line prettier/prettier */ }
257	<TextareaControl
258	label="beyondwords_error_message"
259	readOnly
260	rows="3"
261	value={ beyondwordsErrorMessage }
262	/>
263
264	<TextControl
265	label="beyondwords_disabled"
266	readOnly
267	value={ beyondwordsDisabled }
268	/>
269
270	<hr />
271
272	<ClipboardToolbarButton
273	text={ textToCopy }
274	disabled={ removed }
275	/>
276
277	<Button
278	isDestructive
279	style={ { float: 'right' } }
280	id="beyondwords-inspect-remove"
281	onClick={ handleRemoveButtonClick }
282	disabled={ ! hasBeyondwordsData }
283	>
284	{ removed
285	? __( 'Restore', 'speechkit' )
286	: __( 'Remove', 'speechkit' ) }
287	</Button>
288	</PanelBody>
289	);
290	}
291
292	export default compose( [
293	withSelect( ( select ) => {
294	const {
295	didPostSaveRequestSucceed,
296	getCurrentPostId,
297	getCurrentPostType,
298	getEditedPostAttribute,
299	isSavingPost,
300	isAutosavingPost,
301	} = select( 'core/editor' );
302
303	return {
304	beyondwordsDisabled:
305	getEditedPostAttribute( 'meta' ).beyondwords_disabled,
306	beyondwordsGenerateAudio:
307	getEditedPostAttribute( 'meta' ).beyondwords_generate_audio,
308	beyondwordsContentId:
309	getEditedPostAttribute( 'meta' ).beyondwords_content_id,
310	beyondwordsPlayerStyle:
311	getEditedPostAttribute( 'meta' ).beyondwords_player_style,
312	beyondwordsLanguageId:
313	getEditedPostAttribute( 'meta' ).beyondwords_language_id,
314	beyondwordsBodyVoiceId:
315	getEditedPostAttribute( 'meta' ).beyondwords_body_voice_id,
316	beyondwordsTitleVoiceId:
317	getEditedPostAttribute( 'meta' ).beyondwords_title_voice_id,
318	beyondwordsSummaryVoiceId:
319	getEditedPostAttribute( 'meta' ).beyondwords_summary_voice_id,
320	beyondwordsProjectId:
321	getEditedPostAttribute( 'meta' ).beyondwords_project_id,
322	beyondwordsErrorMessage:
323	getEditedPostAttribute( 'meta' ).beyondwords_error_message,
324	// Deprecated
325	beyondwordsPodcastId:
326	getEditedPostAttribute( 'meta' ).beyondwords_podcast_id,
327	publishPostToSpeechkit:
328	getEditedPostAttribute( 'meta' ).publish_post_to_speechkit,
329	speechkitAccessKey:
330	getEditedPostAttribute( 'meta' ).speechkit_access_key,
331	speechkitGenerateAudio:
332	getEditedPostAttribute( 'meta' ).speechkit_generate_audio,
333	speechkitPodcastId:
334	getEditedPostAttribute( 'meta' ).speechkit_podcast_id,
335	speechkitProjectId:
336	getEditedPostAttribute( 'meta' ).speechkit_project_id,
337	speechkitDisabled:
338	getEditedPostAttribute( 'meta' ).speechkit_disabled,
339	speechkitError: getEditedPostAttribute( 'meta' ).speechkit_error,
340	speechkitErrorMessage:
341	getEditedPostAttribute( 'meta' ).speechkit_error_message,
342	speechkitInfo: getEditedPostAttribute( 'meta' ).speechkit_info,
343	speechkitResponse:
344	getEditedPostAttribute( 'meta' ).speechkit_response,
345	speechkitLink: getEditedPostAttribute( 'meta' )._speechkit_link,
346	speechkitText: getEditedPostAttribute( 'meta' )._speechkit_text,
347	speechkitRetries:
348	getEditedPostAttribute( 'meta' ).speechkit_retries,
349	speechkitStatus: getEditedPostAttribute( 'meta' ).speechkit_status,
350	wordpressPostId: getCurrentPostId(),
351	currentPostType: getCurrentPostType(),
352	didPostSaveRequestSucceed: didPostSaveRequestSucceed(),
353	isSavingPost: isSavingPost(),
354	isAutosavingPost: isAutosavingPost(),
355	};
356	} ),
357	withDispatch( ( dispatch ) => {
358	const { createNotice, removeNotice } = dispatch( 'core/notices' );
359
360	return {
361	createWarningNotice: () =>
362	createNotice(
363	'warning',
364	__(
365	// eslint-disable-next-line max-len
366	'The BeyondWords data for this post will be removed when the post is saved.',
367	'speechkit'
368	),
369	{
370	id: 'beyondwords-remove-post-data--warning',
371	isDismissible: false,
372	speak: true,
373	}
374	),
375	removeWarningNotice: () =>
376	removeNotice( 'beyondwords-remove-post-data--warning' ),
377	createErrorNotice: () =>
378	createNotice(
379	'error',
380	__(
381	'Unable to remove the BeyondWords data. Please email our support team.',
382	'speechkit'
383	),
384	{
385	id: 'beyondwords-remove-post-data--error',
386	isDismissible: true,
387	speak: true,
388	}
389	),
390	removeErrorNotice: () =>
391	removeNotice( 'beyondwords-remove-post-data--error' ),
392	};
393	} ),
394	] )( PostInspectPanel );
395