BeyondWords – AI audio for publishers / 4.0.3

BeyondWords – AI audio for publishers v4.0.3

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

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

193 lines 5.3 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	contentId,
75	introsOutros: [],
76	playerStyle: 'small',
77	projectId,
78	target: document.querySelector(
79	'div[data-beyondwords-admin-player]'
80	),
81	writeToken: apiKey,
82	} );
83
84	const playerInstance = window.BeyondWords.Player.instances()[0];
85
86	// playerInstance.addEventListener('<any>', console.log );
87
88	setContentStatusChangedListener(playerInstance.addEventListener('ContentStatusChanged', ( payload ) => {
89	// console.log('ContentStatusChanged', 'payload', payload);
90
91	const { contentStatus } = payload;
92
93	if ( contentStatus === 'processed' ) {
94	removeNotice( noticeId );
95	initPlayer(); // Not ideal but it works for now
96	} else if ( contentStatus ) {
97	createInfoNotice( __( `🔊 Status: ${contentStatus}`, 'speechkit' ), {
98	id: noticeId,
99	isDismissible: true,
100	} );
101	}
102	} ) );
103
104	// TODO we are unable to use this event to detect invalid/deleted content because it also fires for valid content
105	// https://linear.app/beyondwords/issue/S-3473/player-event-to-handle-invaliddeleted-content-ids
106	// setNoContentAvailableListener(playerInstance.addEventListener('NoContentAvailable', () => {
107	// console.log('NoContentAvailable');
108	// createErrorNotice( __( '🔊 Unable to locate the audio with the currernt Project ID Content ID.', 'speechkit' ), {
109	// id: noticeId,
110	// isDismissible: false,
111	// } );
112	// } ) );
113
114	setPlaybackErroredListener(playerInstance.addEventListener('PlaybackErrored', () => {
115	// console.log('PlaybackErrored');
116	createErrorNotice( __( '🔊 There was an error playing the audio. Please try again.', 'speechkit' ), {
117	id: noticeId,
118	isDismissible: true,
119	} );
120	} ) );
121
122	setMediaLoadedListener(playerInstance.addEventListener('MediaLoaded', () => {
123	// console.log('MediaLoaded');
124	removeNotice( noticeId );
125	} ) );
126
127	setPlaybackPlayingListener(playerInstance.addEventListener('PlaybackPlaying', () => {
128	// console.log('PlaybackPlaying');
129	removeNotice( noticeId );
130	} ) );
131
132	setPlayer( playerInstance );
133
134	if ( debug ) {
135	// eslint-disable-next-line no-console
136	console.log( `🔊 player`, player );
137	}
138	}
139
140	const umdSrc =
141	'https://proxy.beyondwords.io/npm/@beyondwords/player@latest/dist/umd.js';
142
143	return (
144	<PlayAudioCheck>
145	<Wrapper>
146	<div>
147	<div className="beyondwords-player-box-wrapper">
148	<div data-beyondwords-admin-player={ true } />
149	<ScriptTag
150	isHydrating={ false }
151	async
152	defer
153	src={ umdSrc }
154	onLoad={ initPlayer }
155	/>
156	</div>
157	</div>
158	</Wrapper>
159	</PlayAudioCheck>
160	);
161	}
162
163	export default compose( [
164	withSelect( ( select ) => {
165	const { getEditedPostAttribute } = select( 'core/editor' );
166	const { getSettings } = select( 'beyondwords/settings' );
167
168	const { apiKey, debug } = getSettings();
169
170	const beyondwordsProjectId =
171	getEditedPostAttribute( 'meta' ).beyondwords_project_id;
172	const speechkitProjectId =
173	getEditedPostAttribute( 'meta' ).speechkit_project_id;
174
175	const beyondwordsContentId =
176	getEditedPostAttribute( 'meta' ).beyondwords_content_id;
177	const beyondwordsPodcastId =
178	getEditedPostAttribute( 'meta' ).beyondwords_podcast_id;
179	const speechkitPodcastId =
180	getEditedPostAttribute( 'meta' ).speechkit_podcast_id;
181
182	return {
183	apiKey,
184	debug,
185	projectId: beyondwordsProjectId \|\| speechkitProjectId,
186	contentId:
187	beyondwordsContentId \|\|
188	beyondwordsPodcastId \|\|
189	speechkitPodcastId,
190	};
191	} ),
192	] )( PlayAudio );
193