Add audio recording support for WPForms GoDAM Recorder

assets/src/css/wpforms-uppy-video.scss

@@ -2,12 +2,13 @@
 @import "@uppy/dashboard/css/style.min.css";
 @import "@uppy/webcam/css/style.min.css";
 @import "@uppy/screen-capture/css/style.min.css";
+@import "@uppy/audio/css/style.min.css";
 
 /** Style the field in the field preview **/
 .wpforms_page_wpforms-builder {
-	
+
     .wpforms-field-godam_record {
-		
+
         .uppy-video-upload-button {
             display: flex;
             align-items: center;
@@ -24,6 +25,13 @@
         .uppy-video-upload-preview {
             margin-top: 20px;
             max-width: 100%;
+
+            audio {
+                max-width: 400px;
+                width: 100%;
+                height: 40px;
+                margin: 10px 0;
+            }
         }
 
         .upp-video-upload-filename {
@@ -66,6 +74,12 @@
                 figure {
                     margin: 0;
                 }
+
+                audio {
+                    width: 100%;
+                    max-width: 400px;
+                    margin-top: 10px;
+                }
             }
 
             .godam-video-name {
@@ -87,17 +101,23 @@
         }
     }
 
-	.wpforms-edit-entry-container.wpforms-container {
-		
+    .wpforms-edit-entry-container.wpforms-container {
+
         .wpforms-field-godam_record {
             display: flex;
             flex-direction: column;
 
             .godam-video-preview {
-				
+
                 figure {
                     margin: 0;
                 }
+
+                audio {
+                    width: 100%;
+                    max-width: 400px;
+                    margin-top: 10px;
+                }
             }
 
             .godam-video-media-controls {
@@ -120,4 +140,3 @@
         }
     }
 }
-

inc/classes/wpforms/class-wpforms-field-godam-video.php

@@ -139,7 +139,7 @@ public function field_preview( $field ) {
 			// Render upload button.
 			printf( '<button type="button" class="wpforms-btn uppy-video-upload-button">' );
 			printf( '<span class="dashicons dashicons-video-alt"></span>' );
-			printf( esc_html__( 'Record Video', 'godam' ) );
+			printf( esc_html__( 'Start Recording', 'godam' ) );
 			printf( '</button>' );
 
 			// Description.
@@ -193,6 +193,7 @@ protected function file_selection_field_element( $video_field ) {
 				'file_input'     => esc_html__( 'Local Files', 'godam' ),
 				'webcam'         => esc_html__( 'Webcam', 'godam' ),
 				'screen_capture' => esc_html__( 'Screencast', 'godam' ),
+				'audio'          => esc_html__( 'Audio', 'godam' ),
 			);
 
 			$checkboxes = '';
@@ -388,8 +389,12 @@ public function save_video_file( $entry, $form_data ) {
 					continue;
 				}
 
-				// Check if the file is a video.
-				if ( ! isset( $file['type'] ) || ! str_starts_with( $file['type'], 'video/' ) ) {
+				// Check if the file is a video or audio.
+				$mime_type = ! empty( $file['type'] ) ? $file['type'] : '';
+				$is_video  = ! empty( $mime_type ) && str_starts_with( $mime_type, 'video/' );
+				$is_audio  = godam_is_audio_file( $file['name'] );
+
+				if ( ! $is_video && ! $is_audio ) {
 					continue;
 				}
 
@@ -460,10 +465,13 @@ public function format_field_value_for_html( $value, $field, $form_data, $contex
 				return $value;
 			}
 
+
+
+			// Get the full file path/URL.
 			$original_field_value = isset( $field['value'] ) ? trim( $field['value'] ) : $value;
-
+			
 			// Default formatting style.
-			$formatted_value = sprintf( '<a href="%s" target="_blank">%s</a>', esc_url( $original_field_value ), esc_html( basename( $value ) ) );
+			$formatted_value = sprintf( '<a href="%s" target="_blank">%s</a>', esc_url( $original_field_value ), esc_html( basename( $original_field_value ) ) );
 
 			// Format for entry view page.
 			if ( 'entry-single' === $context && \wpforms_is_admin_page( 'entries', 'details' ) ) {

inc/classes/wpforms/class-wpforms-integration.php

@@ -161,7 +161,19 @@ public function send_saved_files_for_transcoding( $fields, $entry, $form_data, $
 				continue;
 			}
 
-			$response = rtgodam_send_video_to_godam_for_transcoding( 'wpforms', $form_title, $field['value'], $entry_id );
+			// Detect file type to determine job_type.
+			$is_audio = godam_is_audio_file( $field['value'] );
+
+			// Set job_type based on file type.
+			$job_type = $is_audio ? 'audio' : 'stream';
+
+			$response = rtgodam_send_video_to_godam_for_transcoding( 
+				'wpforms', 
+				$form_title, 
+				$field['value'], 
+				$entry_id,
+				$job_type
+			);
 
 			if ( is_wp_error( $response ) ) {
 				return wp_send_json_error(

inc/classes/wpforms/wpforms-field-godam-record-entry-edit.php

@@ -34,9 +34,22 @@
 	wpforms_html_attributes( $godam_primary['id'], $godam_primary['class'], $godam_primary['data'], $godam_primary['attr'] ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 	$godam_primary['required'] // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 );
+
+// Detect if this is an audio file.
+$godam_is_audio = godam_is_audio_file( $godam_value );
 ?>
 <div class="godam-video-preview">
-	<?php echo do_shortcode( "[godam_video poster='{$godam_thumbnail_url}' src='{$godam_value}' transcoded_url='{$godam_transcoded_url}']" ); ?>
+	<?php if ( $godam_is_audio ) : ?>
+		<audio controls>
+			<?php if ( $godam_transcoded_url ) : ?>
+				<source src="<?php echo esc_url( $godam_transcoded_url ); ?>" type="audio/mpeg">
+			<?php endif; ?>
+			<source src="<?php echo esc_url( $godam_value ); ?>" type="<?php echo esc_attr( $mime_type ); ?>">
+			<?php esc_html_e( 'Your browser does not support the audio element.', 'godam' ); ?>
+		</audio>
+	<?php else : ?>
+		<?php echo do_shortcode( "[godam_video poster='{$godam_thumbnail_url}' src='{$godam_value}' transcoded_url='{$godam_transcoded_url}']" ); ?>
+	<?php endif; ?>
 </div>
 <a
 	href="<?php echo esc_url( $godam_value ); ?>"

inc/classes/wpforms/wpforms-field-godam-record-entry-view.php

@@ -22,6 +22,12 @@
 $godam_transcoded_url     = WPForms_Integration_Helper::get_transcoded_url( $godam_form_id, $godam_entry_id, $godam_field_id );
 $godam_hls_transcoded_url = WPForms_Integration_Helper::get_hls_transcoded_url( $godam_form_id, $godam_entry_id, $godam_field_id );
 $godam_transcoded_status  = WPForms_Integration_Helper::get_transcoded_status( $godam_form_id, $godam_entry_id, $godam_field_id );
+
+// Detect if this is an audio file.
+$godam_is_audio = godam_is_audio_file( $godam_attachment_url );
+
+// Set content type for messages.
+$godam_content_type = $godam_is_audio ? __( 'Audio', 'godam' ) : __( 'Video', 'godam' );
 ?>
 
 <div class="godam-video-preview">
@@ -37,20 +43,48 @@ class="godam-video-link <?php echo ( empty( $value ) ? 'hidden' : '' ); ?>"
 	</div>
 
 	<div class="godam-transcoded-url-info">
-		<?php if ( 'not_started' === $godam_transcoded_status ) : ?>
-			<span class='dashicons dashicons-controls-play'></span><strong><?php esc_html_e( 'Video transcoding process has not started.', 'godam' ); ?></strong>
+		<?php if ( 'not_started' === strtolower( $godam_transcoded_status ) ) : ?>
+			<span class='dashicons dashicons-controls-play'></span><strong>
+				<?php
+				/* translators: %s: Content type (Audio or Video) */
+				echo esc_html( sprintf( __( '%s transcoding process has not started.', 'godam' ), $godam_content_type ) );
+				?>
+			</strong>
 		<?php elseif ( 'transcoded' === strtolower( $godam_transcoded_status ) ) : ?>
-			<span class='dashicons dashicons-yes-alt'></span><strong><?php esc_html_e( 'Video saved and transcoded successfully on GoDAM', 'godam' ); ?></strong>
+			<span class='dashicons dashicons-yes-alt'></span><strong>
+				<?php
+				/* translators: %s: Content type (Audio or Video) */
+				echo esc_html( sprintf( __( '%s saved and transcoded successfully on GoDAM', 'godam' ), $godam_content_type ) );
+				?>
+			</strong>
 		<?php else : ?>
-			<span class='dashicons dashicons-hourglass'></span><strong><?php esc_html_e( 'Video transcoding process is in-progress.', 'godam' ); ?></strong>
+			<?php if ( $godam_is_audio ) : ?>
+				<span class='dashicons dashicons-yes-alt'></span><strong>
+					<?php echo esc_html__( 'Audio saved successfully on GoDAM', 'godam' ); ?>
+				</strong>
+			<?php else : ?>
+				<span class='dashicons dashicons-hourglass'></span><strong>
+					<?php echo esc_html__( 'Video transcoding process is in-progress.', 'godam' ); ?>
+				</strong>
+			<?php endif; ?>
 		<?php endif; ?>
 	</div>
 
-	<?php
-		$godam_thumbnail_url = ''; // Default empty thumbnail.
-		// No need to escape here, the entire template will be returned as strings,
-		// which will be later on escaped using wp_kses_post() by WPForms before rendering the field.
-		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-		echo force_balance_tags( do_shortcode( "[godam_video poster='{$godam_thumbnail_url}' src='{$godam_attachment_url}' transcoded_url='{$godam_transcoded_url}']" ) );
-	?>
+	<?php if ( $godam_is_audio ) : ?>
+		<audio controls>
+			<?php if ( $godam_transcoded_url ) : ?>
+				<source src="<?php echo esc_url( $godam_transcoded_url ); ?>" type="audio/mpeg">
+			<?php endif; ?>
+			<source src="<?php echo esc_url( $godam_attachment_url ); ?>" type="<?php echo esc_attr( $mime_type ); ?>">
+			<?php esc_html_e( 'Your browser does not support the audio element.', 'godam' ); ?>
+		</audio>
+	<?php else : ?>
+		<?php
+			$godam_thumbnail_url = ''; // Default empty thumbnail.
+			// No need to escape here, the entire template will be returned as strings,
+			// which will be later on escaped using wp_kses_post() by WPForms before rendering the field.
+			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+			echo force_balance_tags( do_shortcode( "[godam_video poster='{$godam_thumbnail_url}' src='{$godam_attachment_url}' transcoded_url='{$godam_transcoded_url}']" ) );
+		?>
+	<?php endif; ?>
 </div>

inc/classes/wpforms/wpforms-field-godam-record-frontend.php

@@ -58,7 +58,7 @@ class="uppy-video-upload <?php echo esc_attr( join( ' ', $godam_primary['class']
 		class="uppy-video-upload-button"
 	>
 		<span class="dashicons dashicons-video-alt"></span>
-		<?php esc_html_e( 'Record Video', 'godam' ); ?>
+		<?php esc_html_e( 'Start Recording', 'godam' ); ?>
 	</button>
 	<div id="<?php echo esc_attr( $godam_uppy_preview_id ); ?>" class="uppy-video-upload-preview"></div>
 	<div id="<?php echo esc_attr( $godam_uppy_file_name_id ); ?>" class="upp-video-upload-filename"></div>

inc/helpers/custom-functions.php

@@ -490,6 +490,45 @@ function godam_is_audio_file_by_name( $filename ) {
 	return stripos( $basename, 'audio' ) !== false;
 }
 
+/**
+ * Check if the given file is an audio file.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $file_path_or_url The file path or URL to check.
+ *
+ * @return bool True if the file is an audio file, false otherwise.
+ */
+function godam_is_audio_file( $file_path_or_url ) {
+	if ( empty( $file_path_or_url ) || ! is_string( $file_path_or_url ) ) {
+		return false;
+	}
+
+	$file_type = wp_check_filetype( $file_path_or_url );
+	$mime_type = ! empty( $file_type['type'] ) ? $file_type['type'] : '';
+
+	// Check if the MIME type indicates an audio file.
+	if ( ! empty( $mime_type ) && str_starts_with( $mime_type, 'audio/' ) ) {
+		return true;
+	}
+
+	// Container formats that can hold both audio and video.
+	// These require filename-based detection to distinguish audio from video.
+	$container_formats = array( 'webm', 'mp4' );
+
+	// Handle ambiguous container formats that might be audio.
+	// Browser-specific behavior:
+	// - Chromium (Chrome, Edge): Saves both video and audio as .webm
+	// - Firefox: Saves audio as .ogg, video as .webm
+	// - Safari: Saves both audio and video as .mp4
+	// We check the filename for 'audio' keyword to determine if it's an audio file.
+	if ( in_array( $file_type['ext'], $container_formats, true ) && godam_is_audio_file_by_name( $file_path_or_url ) ) {
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * Send Video file to GoDAM for transcoding.
  *