Feature/add transcoded url meta

.eslintignore

@@ -2,6 +2,7 @@
 **/*.build.js
 **/node_modules/**
 **/vendor/**
+assets/**
 build
 node_modules
 Gruntfile.js

.github/workflows/phpcs_on_pull_request.yml

@@ -11,7 +11,7 @@ jobs:
     - name: Run PHPCS inspection
       uses: rtCamp/action-phpcs-code-review@master
       env:
-        SKIP_FOLDERS: "tests,.github"
+        SKIP_FOLDERS: "tests,.github,assets/build"
         GH_BOT_TOKEN: ${{ secrets.RTBOT_TOKEN }}
       with:
         args: WordPress,WordPress-Core,WordPress-Docs

.gitignore

@@ -34,3 +34,4 @@ sftp-config.json
 *.sublime-workspace
 .editorconfig
 .cache/
+package-lock.json

admin/css/rt-progress-bar.css

@@ -0,0 +1,13 @@
+.transcoder-progress-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -10px;
+  height: 10px;
+  background: rgba(0, 0, 0, 0.1);
+}
+.transcoder-progress-bar .progress {
+  height: 100%;
+  background: #21759b;
+  transition: width 0.3s ease;
+}

admin/css/rt-transcoder-admin.css

@@ -135,8 +135,14 @@
 .transcoder-setting-form .form-table td {
 	font-size: 13px;
 	padding: 0 0 5px;
-	vertical-align: top;
-}
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: wrap;
+
+	& > p {
+	  margin: 0;
+	}
+  }
 
 .rtm-button-container {
 	margin-left: -20px;
@@ -167,7 +173,7 @@
 .transcoder-setting-form .dashicons-info {
 	color: #aaa;
 	font-size: 14px;
-	height: 26px;
+	height: 100%;
 	line-height: 14px;
 	position: relative;
 }

admin/js/rt-transcoder-uploader.js

@@ -0,0 +1,73 @@
+(function($) {
+    $(document).ready(function() {
+        if (typeof wp === 'undefined' || typeof wp.Uploader === 'undefined') {
+            console.error('wp.Uploader is not available.');
+            return;
+        }
+
+        const progressBars = new Map();
+
+        // Listen for new files added to the queue.
+        wp.Uploader.queue.on('add', function(file) {
+            wp.Uploader.queue.on('reset', function() {
+                // Only show progress bar for video files.
+                if (file.attributes.type !== 'video') return;
+
+                attachmentId = file.id;
+                initializeProgressBar(attachmentId);
+            });
+        });
+
+        /**
+         * Initialize progress bar for the given attachment.
+         * 
+         * @param {number} attachmentId
+         */
+        function initializeProgressBar(attachmentId) {
+            const progressBar = $(
+                `<div class="transcoder-progress-bar">
+                    <div class="progress" style="width: 0%;"></div>
+                </div>`
+            );
+
+            const mediaItemPreview = $(`.attachments .attachment[data-id="${attachmentId}"] .attachment-preview`);
+            if (!mediaItemPreview.length) return;
+
+            mediaItemPreview.append(progressBar);
+            progressBars.set(attachmentId, progressBar);
+            monitorProgress(attachmentId);
+        }
+
+        /**
+         * Monitor the transcoding progress of the given attachment.
+         * 
+         * @param {number} attachmentId
+         */
+        function monitorProgress(attachmentId) {
+            const progressBar = progressBars.get(attachmentId);
+            if (!progressBar) return;
+
+            $.ajax({
+                url: `${transcoderSettings.restUrl}/${attachmentId}`,
+                method: 'GET',
+                beforeSend: xhr => xhr.setRequestHeader('X-WP-Nonce', transcoderSettings.nonce),
+                success: function(data) {
+                    const progress = parseFloat(data.progress) || 0;
+                    progressBar.find('.progress').css('width', `${progress}%`);
+
+                    if (progress < 100) {
+                        setTimeout(() => monitorProgress(attachmentId), 5000);
+                    } else {
+                        progressBar.fadeOut(400, function() {
+                            progressBar.remove();
+                            progressBars.delete(attachmentId);
+                        });
+                    }
+                },
+                error: function() {
+                    setTimeout(() => monitorProgress(attachmentId), 5000);
+                }
+            });
+        }
+    });
+})(jQuery);

admin/partials/rt-transcoder-admin-display.php

@@ -276,6 +276,33 @@
 								</span>
 							</td>
 						</tr>
+						<tr valign="top">
+							<td scope="row">
+								<?php esc_html_e( 'Enable Adaptive Bitrate Streaming', 'transcoder' ); ?>
+							</td>
+							<td>
+								<?php
+								$rtt_enable_adaptive_bitrate = get_option( 'rtt_adaptive_bitrate_streaming', false );
+
+								// Check if the user has an active paid subscription.
+								$usage_details = get_site_option( 'rt-transcoding-usage' );
+								$has_access    = isset( $usage_details[ $this->api_key ]->sub_status ) && $usage_details[ $this->api_key ]->sub_status;
+								?>
+								<input type="checkbox" name="rtt_adaptive_bitrate_streaming" value="1" <?php checked( $rtt_enable_adaptive_bitrate, 1 ); ?> <?php disabled( ! $has_access ); ?> />
+								<span class="rtm-tooltip">
+									<i class="dashicons dashicons-info" style="padding-top:3px"></i>
+									<span class="rtm-tip">
+										<?php
+										esc_html_e( 'If enabled, Transcoder will generate multiple video files with different bitrates for adaptive streaming. This will improve video streaming performance on slow internet connections.', 'transcoder' );
+										?>
+									</span>
+								</span>
+								<?php if ( ! $has_access ) : ?>
+									<br/>
+									<p class="description"><?php esc_html_e( 'This feature is available for paid members only.', 'transcoder' ); ?></p>
+								<?php endif; ?>
+							</td>
+						</tr>
 					</table>
 					<p>
 						<?php

admin/rt-transcoder-actions.php

@@ -231,3 +231,63 @@ function rtt_update_wp_media_thumbnail( $thumb_url, $attachment_id ) {
 }
 
 add_action( 'transcoded_thumb_added', 'rtt_update_wp_media_thumbnail', 10, 2 );
+
+/**
+ * Add a field for the transcoded URL to the media attachment edit screen.
+ *
+ * @param array  $form_fields An array of attachment form fields.
+ * @param object $post The attachment post object.
+ * @return array The modified array of attachment form fields.
+ */
+function add_transcoded_url_field( $form_fields, $post ) {
+	$transcoded_url = get_post_meta( $post->ID, '_rt_transcoded_url', true );
+
+	// Check if adaptive bitrate streaming is enabled.
+	$adaptive_bitrate_enabled = get_option( 'rtt_adaptive_bitrate_streaming', false );
+
+	// Add the transcoded URL field.
+	$form_fields['transcoded_url'] = array(
+		'label' => __( 'Transcoded MPD URL', 'transcoder' ),
+		'input' => 'html',
+		'html'  => '<input type="text" name="attachments[' . $post->ID . '][transcoded_url]" id="attachments-' . $post->ID . '-transcoded_url" value="' . esc_url( $transcoded_url ) . '" ' . disabled( ! $adaptive_bitrate_enabled, true, false ) . ' />',
+		'value' => esc_url( $transcoded_url ),
+		'helps' => __( 'Enter or edit the URL of the transcoded .mpd file stored on Amazon S3.', 'transcoder' ),
+	);
+
+	// Add a note if adaptive bitrate streaming is disabled.
+	if ( ! $adaptive_bitrate_enabled ) {
+		$form_fields['transcoded_url']['helps'] = __( 'This feature is available only when adaptive bitrate streaming is enabled.', 'transcoder' );
+	}
+
+	return $form_fields;
+}
+
+add_filter( 'attachment_fields_to_edit', 'add_transcoded_url_field', 10, 2 );
+
+/**
+ * Save the transcoded URL field when the attachment is saved.
+ *
+ * @param array $post The post data for the attachment.
+ * @param array $attachment The attachment data.
+ * @return array The post data for the attachment.
+ */
+function save_transcoded_url_field( $post, $attachment ) {
+	// Check if adaptive bitrate streaming is enabled.
+	$adaptive_bitrate_enabled = get_option( 'rtt_adaptive_bitrate_streaming', false );
+	if ( ! $adaptive_bitrate_enabled ) {
+		return $post;
+	}
+
+	if ( isset( $attachment['transcoded_url'] ) ) {
+		// Check the user's permissions.
+		if ( ! current_user_can( 'edit_post', $post['ID'] ) ) {
+			return $post;
+		}
+		// Update the post meta with the new value.
+		update_post_meta( $post['ID'], '_rt_transcoded_url', esc_url_raw( $attachment['transcoded_url'] ) );
+	}
+
+	return $post;
+}
+
+add_filter( 'attachment_fields_to_save', 'save_transcoded_url_field', 10, 2 );

admin/rt-transcoder-admin.php

@@ -137,6 +137,42 @@ public function register_transcoder_settings() {
 		register_setting( 'rt-transcoder-settings-group', 'number_of_thumbs' );
 		register_setting( 'rt-transcoder-settings-group', 'rtt_override_thumbnail' );
 		register_setting( 'rt-transcoder-settings-group', 'rtt_client_check_status_button' );
+
+		// Check if the user has an active paid subscription.
+		$usage_details = get_site_option( 'rt-transcoding-usage' );
+		$has_access    = isset( $usage_details[ $this->api_key ]->sub_status ) && $usage_details[ $this->api_key ]->sub_status;
+
+		// Register adaptive bitrate streaming setting with conditional default.
+		register_setting(
+			'rt-transcoder-settings-group',
+			'rtt_adaptive_bitrate_streaming',
+			array(
+				'type'              => 'boolean',
+				'description'       => __( 'Enable adaptive bitrate streaming for videos.', 'transcoder' ),
+				'sanitize_callback' => array( $this, 'sanitize_adaptive_bitrate' ),
+				'default'           => $has_access,
+			)
+		);
+	}
+
+	/**
+	 * Sanitize adaptive bitrate streaming setting.
+	 *
+	 * @since    1.0.0
+	 *
+	 * @param bool $value The value to sanitize.
+	 * @return bool
+	 */
+	public function sanitize_adaptive_bitrate( $value ) {
+		$usage_details = get_site_option( 'rt-transcoding-usage' );
+		$has_access    = isset( $usage_details[ $this->api_key ]->sub_status ) && $usage_details[ $this->api_key ]->sub_status;
+
+		if ( ! $has_access ) {
+			add_settings_error( 'rt-transcoder-settings-group', 'rtt_adaptive_bitrate_streaming', __( 'You need to have an active subscription to enable adaptive bitrate streaming.', 'transcoder' ), 'error' );
+			return false;
+		}
+
+		return isset( $value ) && ( '1' === $value || 1 === $value || true === $value );
 	}
 
 	/**
@@ -209,6 +245,34 @@ public function enqueue_scripts_styles() {
 		wp_localize_script( 'rt-transcoder-main', 'rt_transcoder_script', $localize_script_data );
 
 		wp_enqueue_script( 'rt-transcoder-main' );
+
+		wp_register_script(
+			'rt-transcoder-uploader',
+			RT_TRANSCODER_URL . 'admin/js/rt-transcoder-uploader.js',
+			array( 'jquery' ),
+			RT_TRANSCODER_VERSION,
+			true
+		);
+
+		wp_localize_script(
+			'rt-transcoder-uploader',
+			'transcoderSettings',
+			array(
+				'restUrl' => esc_url_raw( rest_url( 'transcoder/v1/transcoding-status' ) ),
+				'nonce'   => wp_create_nonce( 'wp_rest' ),
+			)
+		);
+
+		wp_enqueue_script( 'rt-transcoder-uploader' );
+
+		wp_register_style(
+			'rt-progress-bar',
+			RT_TRANSCODER_URL . 'admin/css/rt-progress-bar.css',
+			array(),
+			RT_TRANSCODER_VERSION
+		);
+
+		wp_enqueue_style( 'rt-progress-bar' );
 	}
 
 	/**