BeyondWords – AI audio for publishers / 4.0.6

BeyondWords – AI audio for publishers v4.0.6

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

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

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