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,20 @@
+.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;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.transcoder-progress-bar .progress .progress-text {
+  color: #fff;
+}

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,99 @@
+(function($) {
+    $(document).ready(function() {
+        if (typeof wp === 'undefined' || typeof wp.Uploader === 'undefined') {
+            console.error('wp.Uploader is not available.');
+            return;
+        }
+
+        const progressBars = new Map();
+
+        // Check for existing video files in the media library.
+        setTimeout(checkExistingVideoProgress, 500);
+
+        // 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" style="display: none;">
+                    <div class="progress" style="width: 0%;">
+                        <span class="progress-text">0%</span>
+                    </div>
+                </div>`
+            );
+
+            const mediaItemPreview = $(`.attachments .attachment[data-id="${attachmentId}"] .attachment-preview`);
+            if (!mediaItemPreview.length) return;
+
+            mediaItemPreview.append(progressBar);
+            progressBars.set(attachmentId, progressBar);
+            monitorProgress(attachmentId);
+        }
+
+
+        /**
+         * Check for existing video files in the media.
+         * 
+         */
+        function checkExistingVideoProgress() {
+            const videoQuery = wp.media.query({
+                type: 'video',
+                posts_per_page: -1,
+            });
+
+            videoQuery.more().done(function() {
+                const videoAttachments = videoQuery.models;
+                videoAttachments.forEach(function(attachment) {
+                    const attachmentId = attachment.id;
+                    initializeProgressBar(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.show();
+                    progressBar.find('.progress').css('width', `${progress}%`);
+                    progressBar.find('.progress-text').text(`${progress}%`);
+
+                    if (progress < 100) {
+                        setTimeout(() => monitorProgress(attachmentId), 5000);
+                    } else {
+                        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,82 @@ 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( 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 );
+
+/**
+ * Register the transcoded URL meta field.
+ */
+function register_rt_transcoded_url_meta() {
+	register_post_meta(
+		'attachment',
+		'_rt_transcoded_url',
+		array(
+			'type'          => 'string',
+			'single'        => true,
+			'show_in_rest'  => true,
+			'auth_callback' => function () {
+				return current_user_can( 'edit_posts' );
+			},
+		) 
+	);
+}
+add_action( 'init', 'register_rt_transcoded_url_meta' );