render oembed html for external task attachments

assets/styles/scss/components/task/_AttachmentThumbnail.scss

@@ -21,6 +21,10 @@
 		}
 	}
 
+	.ptc-responsive-embed {
+		@include responsive-iframe-wrapper(16, 9);
+	}
+
 	.fallback {
 		margin: 0;
 		padding: 0.3em 0.5em;

changelog.md

@@ -4,6 +4,11 @@
 
 - New shortcode attribute `layout` to specify a custom layout for the `[ptc_asana_project]` shortcode. Note this is only useful for extenders and third-party customizations. Completionist always displays projects in `list` layout by default.
 - `.pdf` video attachments on tasks are now supported.
+- External attachments (eg. Vimeo and YouTube embeds) are now displayed as their oEmbed HTML representations when available.
+
+#### Changed
+
+- Unsupported or otherwise non-displayable task attachments are now listed as error or warning notices for clarity. Previously, such attachments would simply be logged to the browser console and ignored.
 
 ### 4.0.0 - 2023-12-10
 

src/components/attachment/AttachmentThumbnail.jsx

@@ -32,6 +32,8 @@ export default function AttachmentThumbnail({ attachment }) {
 					<p className="fallback fallback-warning">Download <a href={attachment._ptc_view_url}>{attachment.name}</a> to view</p>
 				</object>
 			);
+		} else if ( '_ptc_oembed_html' in attachment && attachment._ptc_oembed_html ) {
+			content = <div dangerouslySetInnerHTML={{ __html: attachment._ptc_oembed_html }} />;
 		} else {
 			window.console.warn('Could not display AttachmentThumbnail for unsupported attachment:', attachment);
 			content = <p className="fallback fallback-warning">Failed to display unsupported attachment <em>{attachment.name}</em></p>;

src/includes/class-asana-interface.php

@@ -1057,13 +1057,27 @@ public static function localize_attachments(
 				);
 			}
 
-			// Keep attachment if not marked for removal.
+			// Skip if attachment is marked for removal.
 			if (
-				false === in_array( $attachment->_ptc_view_url, $removal_urls, true ) &&
-				false === in_array( $attachment->view_url, $removal_urls, true )
+				true === in_array( $attachment->_ptc_view_url, $removal_urls, true ) ||
+				true === in_array( $attachment->view_url, $removal_urls, true )
 			) {
-				$keep_attachments[] = $attachment;
+				continue;
 			}
+
+			if (
+				isset( $attachment->host ) &&
+				'external' === $attachment->host &&
+				! empty( $attachment->view_url )
+			) {
+				// See if we can get the oEmbed HTML to view external media.
+				$oembed_html = HTML_Builder::get_oembed_for_url( $attachment->view_url );
+				if ( ! empty( $oembed_html ) ) {
+					$attachment->_ptc_oembed_html = $oembed_html;
+				}
+			}
+
+			$keep_attachments[] = $attachment;
 		}
 
 		$attachments = $keep_attachments;

src/includes/class-html-builder.php

@@ -487,17 +487,11 @@ public static function replace_urls_with_oembeds(
 			function ( $object_tag_matches ) use ( &$replacements ) {
 				// Replace the object with oEmbed HTML.
 				if ( ! empty( $object_tag_matches[1] ) ) {
-					$oembed_url  = html_entity_decode( $object_tag_matches[1] );
-					$oembed_html = wp_oembed_get(
-						$oembed_url,
-						array(
-							'width'  => 1280,
-							'height' => 720,
-						)
-					);
-					if ( $oembed_html && is_string( $oembed_html ) ) {
+					$oembed_html = static::get_oembed_for_url( $object_tag_matches[1] );
+					if ( ! empty( $oembed_html ) ) {
+						$oembed_url     = html_entity_decode( $object_tag_matches[1] );
 						$replacements[] = $oembed_url;
-						return '<div class="ptc-responsive-embed">' . $oembed_html . '</div>';
+						return $oembed_html;
 					}
 				}
 
@@ -507,6 +501,34 @@ function ( $object_tag_matches ) use ( &$replacements ) {
 		);
 	}
 
+	/**
+	 * Gets the oEmbed HTML for the given URL.
+	 *
+	 * @since [unreleased]
+	 *
+	 * @param string $url The URL.
+	 * @return string The HTML. Empty string on failure.
+	 */
+	public static function get_oembed_for_url( string $url ) : string {
+
+		if ( ! empty( $url ) ) {
+
+			$oembed_html = wp_oembed_get(
+				html_entity_decode( $url ),
+				array(
+					'width'  => 1280,
+					'height' => 720,
+				)
+			);
+
+			if ( $oembed_html && is_string( $oembed_html ) ) {
+				return '<div class="ptc-responsive-embed">' . $oembed_html . '</div>';
+			}
+		}
+
+		return '';
+	}
+
 	/**
 	 * Gets the local API endpoint for retrieving an attachment.
 	 *