diff --git a/README.md b/README.md index a0bbe9d4..19f63fef 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,7 @@ Repeat for each podcast you would like to create. * Create a new post and assign it to one or more Podcasts using the panel labeled Podcasts. * Upload or embed an audio file into this post using any of the usual WordPress methods. If using the new block-based WordPress editor (sometimes referred to as Gutenberg), insert a Podcast block. Only one Podcast block can be inserted per post. * For more advanced settings, use the Podcasting meta box to mark explicit content or closed captioning available, season number, episode number, episode type and to optionally specify one media item in the post if you have more than one in your post. In the block-based editor, these are the block settings that appear in the sidebar when the podcast block is selected. + * Transcript: Add an optional transcript consisting of time codes, citations, and paragrah text that can be embedded in the post, linked to an external plain HTML file, or linked in a special `` XML element. ## Submit your podcast feed to Apple Podcasts diff --git a/assets/css/podcasting-transcript.css b/assets/css/podcasting-transcript.css new file mode 100644 index 00000000..e60f7765 --- /dev/null +++ b/assets/css/podcasting-transcript.css @@ -0,0 +1,4 @@ +.wp-block-podcasting-podcast-transcript cite, +.wp-block-podcasting-podcast-transcript time { + display: block; +} diff --git a/assets/js/edit.js b/assets/js/edit.js index 67e00662..4af4a64b 100644 --- a/assets/js/edit.js +++ b/assets/js/edit.js @@ -18,7 +18,11 @@ const { const { Fragment } = wp.element; const { apiFetch } = wp; -const ALLOWED_MEDIA_TYPES = [ 'audio' ]; +const ALLOWED_MEDIA_TYPES = ['audio']; + +import { Button } from '@wordpress/components'; +import { dispatch } from '@wordpress/data'; +import { createBlock } from '@wordpress/blocks'; /* * Import hierarchical term selector. @@ -28,8 +32,8 @@ const ALLOWED_MEDIA_TYPES = [ 'audio' ]; import HierarchicalTermSelector from './term-selector/hierarchical-term-selector'; class Edit extends Component { - constructor( { className } ) { - super( ...arguments ); + constructor({ className }) { + super(...arguments); // edit component has its own src in the state so it can be edited // without setting the actual value outside of the edit UI this.state = { @@ -42,11 +46,10 @@ class Edit extends Component { * When the component is removed, we'll remove any assigned Podcast taxonomies. */ componentWillUnmount() { - wp.data.dispatch( 'core/editor' ).editPost( { [ 'podcasting_podcasts' ]:[] } ); + wp.data.dispatch('core/editor').editPost({ podcasting_podcasts: [] }); } render() { - const { setAttributes, isSelected, attributes } = this.props; const { caption, explicit } = attributes; const duration = attributes.duration || ''; @@ -56,30 +59,36 @@ class Edit extends Component { const episodeType = attributes.episodeType || ''; const { className, src } = this.state; - const onSelectAttachment = ( attachment ) => { + const onSelectAttachment = (attachment) => { // Upload and Media Library return different attachment objects. // Therefore, we need to check the existence of some entries. let mime, filesize, duration; - if ( attachment.mime ) { + if (attachment.mime) { mime = attachment.mime; - } else if ( attachment.mime_type ) { + } else if (attachment.mime_type) { mime = attachment.mime_type; } - if ( attachment.filesizeInBytes ) { + if (attachment.filesizeInBytes) { filesize = attachment.filesizeInBytes; - } else if ( attachment.media_details && attachment.media_details.filesize ) { + } else if ( + attachment.media_details && + attachment.media_details.filesize + ) { filesize = attachment.media_details.filesize; } - if ( attachment.fileLength ) { + if (attachment.fileLength) { duration = attachment.fileLength; - } else if ( attachment.media_details && attachment.media_details.length_formatted ) { + } else if ( + attachment.media_details && + attachment.media_details.length_formatted + ) { duration = attachment.media_details.length_formatted; } - setAttributes( { + setAttributes({ id: attachment.id, src: attachment.url, url: attachment.url, @@ -87,49 +96,51 @@ class Edit extends Component { filesize, duration, caption: attachment.title, - enclosure: attachment.url + "\n" + filesize + "\n" + mime - } ); - this.setState( { src: attachment.url } ); + enclosure: attachment.url + '\n' + filesize + '\n' + mime, + }); + this.setState({ src: attachment.url }); }; - const onSelectURL = ( newSrc ) => { - if ( newSrc !== src ) { + const onSelectURL = (newSrc) => { + if (newSrc !== src) { apiFetch({ path: `simple-podcasting/v1/external-url/?url=${newSrc}`, - }).then( res => { - if ( res.success ) { - const { mime, filesize, duration } = res.data; - setAttributes({ - src: newSrc, - url: newSrc, - id: null, - mime: mime, - filesize: filesize, - duration: duration, - caption: '', - }); - } - }).catch( err => { - // eslint-disable-next-line no-console - console.error( err ); - }); - - this.setState( { src: newSrc } ); + }) + .then((res) => { + if (res.success) { + const { mime, filesize, duration } = res.data; + setAttributes({ + src: newSrc, + url: newSrc, + id: null, + mime, + filesize, + duration, + caption: '', + }); + } + }) + .catch((err) => { + // eslint-disable-next-line no-console + console.error(err); + }); + + this.setState({ src: newSrc }); } }; - const toggleCaptioned = () => setAttributes( { captioned: ! captioned } ); + const toggleCaptioned = () => setAttributes({ captioned: !captioned }); const controls = ( - { src ? ( + {src ? ( - ) : null } + ) : null} ); @@ -138,7 +149,7 @@ class Edit extends Component { {controls}
@@ -146,95 +157,159 @@ class Edit extends Component {
- setAttributes( { explicit } ) } + label={__( + 'Explicit Content', + 'simple-podcasting' + )} + value={explicit} + options={[ + { + value: 'no', + label: __('No', 'simple-podcasting'), + }, + { + value: 'yes', + label: __('Yes', 'simple-podcasting'), + }, + { + value: 'clean', + label: __('Clean', 'simple-podcasting'), + }, + ]} + onChange={(explicit) => + setAttributes({ explicit }) + } /> setAttributes( { duration } ) } + label={__( + 'Length (MM:SS)', + 'simple-podcasting' + )} + value={duration} + onChange={(duration) => + setAttributes({ duration }) + } /> setAttributes( { seasonNumber } ) } + label={__('Season Number', 'simple-podcasting')} + value={seasonNumber} + onChange={(seasonNumber) => + setAttributes({ seasonNumber }) + } /> setAttributes( { episodeNumber } ) } + label={__( + 'Episode Number', + 'simple-podcasting' + )} + value={episodeNumber} + onChange={(episodeNumber) => + setAttributes({ episodeNumber }) + } /> setAttributes( { episodeType } ) } + label={__('Episode Type', 'simple-podcasting')} + selected={episodeType} + options={[ + { + label: __('None', 'simple-podcasting'), + value: 'none', + }, + { + label: __('Full', 'simple-podcasting'), + value: 'full', + }, + { + label: __( + 'Trailer', + 'simple-podcasting' + ), + value: 'trailer', + }, + { + label: __('Bonus', 'simple-podcasting'), + value: 'bonus', + }, + ]} + onChange={(episodeType) => + setAttributes({ episodeType }) + } /> + + + -
- { src ? ( -
-