From 25122704d7d5ab653562b407cc992d967e79d02f Mon Sep 17 00:00:00 2001 From: Nate Conley Date: Fri, 10 Feb 2023 12:15:05 -1000 Subject: [PATCH 01/31] Adds transcript block and meta --- assets/css/podcasting-transcript.css | 4 + assets/js/edit.js | 273 +++++++++++------- includes/blocks.php | 57 ++++ includes/blocks/podcast-transcript/edit.js | 102 +++++++ includes/blocks/podcast-transcript/formats.js | 83 ++++++ includes/blocks/podcast-transcript/index.js | 11 + includes/blocks/podcast-transcript/markup.php | 41 +++ includes/blocks/podcast-transcript/styles.css | 4 + includes/datatypes.php | 10 + includes/transcripts.php | 33 +++ simple-podcasting.php | 1 + webpack.config.js | 5 + 12 files changed, 525 insertions(+), 99 deletions(-) create mode 100644 assets/css/podcasting-transcript.css create mode 100644 includes/blocks/podcast-transcript/edit.js create mode 100644 includes/blocks/podcast-transcript/formats.js create mode 100644 includes/blocks/podcast-transcript/index.js create mode 100644 includes/blocks/podcast-transcript/markup.php create mode 100644 includes/blocks/podcast-transcript/styles.css create mode 100644 includes/transcripts.php 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 ? ( -
-