BeyondWords – AI audio for publishers / 4.2.2

BeyondWords – AI audio for publishers v4.2.2

speechkit / src / Component / Post / PlayAudio / index.js

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

195 lines 5.4 KB

Raw Download Zip

1	/**
2	* WordPress dependencies
3	*/
4	import { __ } from '@wordpress/i18n';
5	import { compose } from '@wordpress/compose';
6	import { useDispatch, withSelect } from '@wordpress/data';
7	import { Fragment, useEffect, useState } from '@wordpress/element';
8	import { store as noticesStore } from '@wordpress/notices';
9
10	/**
11	* External dependencies
12	*/
13	import ScriptTag from 'react-script-tag';
14
15	/**
16	* Internal dependencies
17	*/
18	import PlayAudioCheck from './check';
19
20	function PlayAudio( {
21	apiKey,
22	debug,
23	projectId,
24	contentId,
25	wrapper = Fragment,
26	} ) {
27	const Wrapper = wrapper;
28
29	const [ player, setPlayer] = useState(null);
30	const [ contentStatusChangedListener, setContentStatusChangedListener ] = useState( null );
31	const [ noContentAvailableListener, setNoContentAvailableListener ] = useState( null );
32	const [ playbackErroredListener, setPlaybackErroredListener ] = useState( null );
33	const [ mediaLoadedListener, setMediaLoadedListener ] = useState( null );
34	const [ playbackPlayingListener, setPlaybackPlayingListener ] = useState( null );
35
36	const noticeId = 'beyondwords-player-notice';
37
38	const {
39	createInfoNotice,
40	createErrorNotice,
41	removeNotice,
42	} = useDispatch( noticesStore );
43
44	useEffect(() => {
45	return () => {
46	if ( ! player ) {
47	return;
48	}
49	if ( contentStatusChangedListener ) {
50	player.removeEventListener('ContentStatusChanged', contentStatusChangedListener);
51	}
52	if ( noContentAvailableListener ) {
53	player.removeEventListener('NoContentAvailable', noContentAvailableListener);
54	}
55	if ( playbackErroredListener ) {
56	player.removeEventListener('PlaybackErrored', playbackErroredListener);
57	}
58	if ( mediaLoadedListener ) {
59	player.removeEventListener('MediaLoaded', mediaLoadedListener);
60	}
61	if ( playbackPlayingListener ) {
62	player.removeEventListener('PlaybackPlaying', playbackPlayingListener);
63	}
64	}
65	}, [] );
66
67	function initPlayer() {
68	if ( ! window.BeyondWords ) {
69	return;
70	}
71
72	new window.BeyondWords.Player( {
73	adverts: [],
74	analyticsConsent: 'none',
75	contentId,
76	introsOutros: [],
77	playerStyle: 'small',
78	projectId,
79	target: document.querySelector(
80	'div[data-beyondwords-admin-player]'
81	),
82	widgetStyle: 'none',
83	writeToken: apiKey,
84	} );
85
86	const playerInstance = window.BeyondWords.Player.instances()[0];
87
88	// playerInstance.addEventListener('<any>', console.log );
89
90	setContentStatusChangedListener(playerInstance.addEventListener('ContentStatusChanged', ( payload ) => {
91	// console.log('ContentStatusChanged', 'payload', payload);
92
93	const { contentStatus } = payload;
94
95	if ( contentStatus === 'processed' ) {
96	removeNotice( noticeId );
97	initPlayer(); // Not ideal but it works for now
98	} else if ( contentStatus ) {
99	createInfoNotice( __( `🔊 Status: ${contentStatus}`, 'speechkit' ), {
100	id: noticeId,
101	isDismissible: true,
102	} );
103	}
104	} ) );
105
106	// TODO we are unable to use this event to detect invalid/deleted content because it also fires for valid content
107	// https://linear.app/beyondwords/issue/S-3473/player-event-to-handle-invaliddeleted-content-ids
108	// setNoContentAvailableListener(playerInstance.addEventListener('NoContentAvailable', () => {
109	// console.log('NoContentAvailable');
110	// createErrorNotice( __( '🔊 Unable to locate the audio with the currernt Project ID Content ID.', 'speechkit' ), {
111	// id: noticeId,
112	// isDismissible: false,
113	// } );
114	// } ) );
115
116	setPlaybackErroredListener(playerInstance.addEventListener('PlaybackErrored', () => {
117	// console.log('PlaybackErrored');
118	createErrorNotice( __( '🔊 There was an error playing the audio. Please try again.', 'speechkit' ), {
119	id: noticeId,
120	isDismissible: true,
121	} );
122	} ) );
123
124	setMediaLoadedListener(playerInstance.addEventListener('MediaLoaded', () => {
125	// console.log('MediaLoaded');
126	removeNotice( noticeId );
127	} ) );
128
129	setPlaybackPlayingListener(playerInstance.addEventListener('PlaybackPlaying', () => {
130	// console.log('PlaybackPlaying');
131	removeNotice( noticeId );
132	} ) );
133
134	setPlayer( playerInstance );
135
136	if ( debug ) {
137	// eslint-disable-next-line no-console
138	console.log( `🔊 player`, player );
139	}
140	}
141
142	const umdSrc =
143	'https://proxy.beyondwords.io/npm/@beyondwords/player@latest/dist/umd.js';
144
145	return (
146	<PlayAudioCheck>
147	<Wrapper>
148	<div>
149	<div className="beyondwords-player-box-wrapper">
150	<div data-beyondwords-admin-player={ true } />
151	<ScriptTag
152	isHydrating={ false }
153	async
154	defer
155	src={ umdSrc }
156	onLoad={ initPlayer }
157	/>
158	</div>
159	</div>
160	</Wrapper>
161	</PlayAudioCheck>
162	);
163	}
164
165	export default compose( [
166	withSelect( ( select ) => {
167	const { getEditedPostAttribute } = select( 'core/editor' );
168	const { getSettings } = select( 'beyondwords/settings' );
169
170	const { apiKey, debug } = getSettings();
171
172	const beyondwordsProjectId =
173	getEditedPostAttribute( 'meta' ).beyondwords_project_id;
174	const speechkitProjectId =
175	getEditedPostAttribute( 'meta' ).speechkit_project_id;
176
177	const beyondwordsContentId =
178	getEditedPostAttribute( 'meta' ).beyondwords_content_id;
179	const beyondwordsPodcastId =
180	getEditedPostAttribute( 'meta' ).beyondwords_podcast_id;
181	const speechkitPodcastId =
182	getEditedPostAttribute( 'meta' ).speechkit_podcast_id;
183
184	return {
185	apiKey,
186	debug,
187	projectId: beyondwordsProjectId \|\| speechkitProjectId,
188	contentId:
189	beyondwordsContentId \|\|
190	beyondwordsPodcastId \|\|
191	speechkitPodcastId,
192	};
193	} ),
194	] )( PlayAudio );
195