BeyondWords – AI audio for publishers / 4.6.0

BeyondWords – AI audio for publishers v4.6.0

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

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

169 lines 4.5 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	contentId,
22	previewToken,
23	projectId,
24	wrapper = Fragment,
25	} ) {
26	const Wrapper = wrapper;
27
28	const [ player, setPlayer] = useState(null);
29	const [ contentStatusChangedListener, setContentStatusChangedListener ] = useState( null );
30	const [ noContentAvailableListener, setNoContentAvailableListener ] = useState( null );
31	const [ playbackErroredListener, setPlaybackErroredListener ] = useState( null );
32	const [ mediaLoadedListener, setMediaLoadedListener ] = useState( null );
33	const [ playbackPlayingListener, setPlaybackPlayingListener ] = useState( null );
34
35	const noticeId = 'beyondwords-player-notice';
36
37	const {
38	createInfoNotice,
39	createErrorNotice,
40	removeNotice,
41	} = useDispatch( noticesStore );
42
43	useEffect(() => {
44	return () => {
45	if ( ! player ) {
46	return;
47	}
48	if ( contentStatusChangedListener ) {
49	player.removeEventListener('ContentStatusChanged', contentStatusChangedListener);
50	}
51	if ( noContentAvailableListener ) {
52	player.removeEventListener('NoContentAvailable', noContentAvailableListener);
53	}
54	if ( playbackErroredListener ) {
55	player.removeEventListener('PlaybackErrored', playbackErroredListener);
56	}
57	if ( mediaLoadedListener ) {
58	player.removeEventListener('MediaLoaded', mediaLoadedListener);
59	}
60	if ( playbackPlayingListener ) {
61	player.removeEventListener('PlaybackPlaying', playbackPlayingListener);
62	}
63	player.destroy();
64	}
65	}, [] );
66
67	function initPlayer() {
68	if ( ! window.BeyondWords ) {
69	return;
70	}
71
72	const playerInstance = new window.BeyondWords.Player( {
73	adverts: [],
74	analyticsConsent: 'none',
75	contentId,
76	introsOutros: [],
77	playerStyle: 'small',
78	previewToken,
79	projectId,
80	target: document.querySelector(
81	'div[data-beyondwords-admin-player]'
82	),
83	widgetStyle: 'none',
84	} );
85
86	setContentStatusChangedListener(playerInstance.addEventListener('ContentStatusChanged', ( payload ) => {
87	const { contentStatus } = payload;
88
89	if ( contentStatus === 'processed' ) {
90	removeNotice( noticeId );
91	initPlayer();
92	} else if ( contentStatus ) {
93	createInfoNotice( __( `🔊 Status: ${contentStatus}`, 'speechkit' ), {
94	id: noticeId,
95	isDismissible: true,
96	} );
97	}
98	} ) );
99
100	setPlaybackErroredListener(playerInstance.addEventListener('PlaybackErrored', () => {
101	createErrorNotice( __( '🔊 There was an error playing the audio. Please try again.', 'speechkit' ), {
102	id: noticeId,
103	isDismissible: true,
104	} );
105	} ) );
106
107	setMediaLoadedListener(playerInstance.addEventListener('MediaLoaded', () => {
108	removeNotice( noticeId );
109	} ) );
110
111	setPlaybackPlayingListener(playerInstance.addEventListener('PlaybackPlaying', () => {
112	removeNotice( noticeId );
113	} ) );
114
115	setPlayer( playerInstance );
116	}
117
118	const umdSrc =
119	'https://proxy.beyondwords.io/npm/@beyondwords/player@latest/dist/umd.js';
120
121	return (
122	<PlayAudioCheck>
123	<Wrapper>
124	<div>
125	<div className="beyondwords-player-box-wrapper">
126	<div data-beyondwords-admin-player={ true } />
127	<ScriptTag
128	isHydrating={ false }
129	async
130	defer
131	src={ umdSrc }
132	onLoad={ initPlayer }
133	/>
134	</div>
135	</div>
136	</Wrapper>
137	</PlayAudioCheck>
138	);
139	}
140
141	export default compose( [
142	withSelect( ( select ) => {
143	const { getEditedPostAttribute } = select( 'core/editor' );
144
145	const beyondwordsPreviewToken =
146	getEditedPostAttribute( 'meta' ).beyondwords_preview_token;
147	const beyondwordsProjectId =
148	getEditedPostAttribute( 'meta' ).beyondwords_project_id;
149	const speechkitProjectId =
150	getEditedPostAttribute( 'meta' ).speechkit_project_id;
151
152	const beyondwordsContentId =
153	getEditedPostAttribute( 'meta' ).beyondwords_content_id;
154	const beyondwordsPodcastId =
155	getEditedPostAttribute( 'meta' ).beyondwords_podcast_id;
156	const speechkitPodcastId =
157	getEditedPostAttribute( 'meta' ).speechkit_podcast_id;
158
159	return {
160	contentId:
161	beyondwordsContentId \|\|
162	beyondwordsPodcastId \|\|
163	speechkitPodcastId,
164	previewToken: beyondwordsPreviewToken,
165	projectId: beyondwordsProjectId \|\| speechkitProjectId,
166	};
167	} ),
168	] )( PlayAudio );
169