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

.nvmrc

@@ -1 +1 @@
-v13.1.0
+v18.20.3

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

@@ -134,9 +134,15 @@
 
 .transcoder-setting-form .form-table td {
 	font-size: 13px;
-	padding: 0 0 5px;
-	vertical-align: top;
-}
+	padding: 5px;
+	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;
 }
@@ -238,3 +244,9 @@
 #adminmenu li.menu-top.current .wp-menu-image img {
 	opacity: 1;
 }
+
+.rtt-premium-feature {
+	opacity: 0.9;
+	background-color: rgba(250, 235, 215, 0.63);
+	border-radius: 0.5rem;
+}

admin/js/build/rt-transcoder-block-editor-support.build.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-api-fetch'), 'version' => 'af1c6d65e659f17b25f0');

admin/js/rt-transcoder-admin.js

@@ -114,6 +114,18 @@
 					}
 				}
 			);
+
+			$( document ).on(
+				'click',
+				'#watermark-checkbox',
+				function( e ) {
+					if ( $( this ).is( ':checked' ) ) {
+						$( '#watermark-text' ).closest('tr').show();
+					} else {
+						$( '#watermark-text' ).closest('tr').hide();
+					}
+				}
+			);
 		}
 	);
 

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);