Changeset 10932

Timestamp:

04/29/2021 05:26:25 AM (5 years ago)

Author:

dd32

Message:

WordPress.TV: Add a progress bar to the upload process.

Fixes #1117.

Location:

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2

Files:

• anon-upload-template.php (modified) (6 diffs)
• inc/wpcom.php (modified) (1 diff)
• plugins/wordpresstv-anon-upload/anon-upload.php (modified) (1 diff)

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/anon-upload-template.php

@@ -164 +164 @@
                         display: inline;
                         width: auto;
+                }
+
+                #upload-progress .status,
+                #upload-progress .percent {
+                        font-family: monospace;
+                }
+                #upload-progress a.abort:hover {
+                        color: red;
                 }
         </style>
@@ -276 +284 @@
                                 <?php } ?>
 
-                                <form method="post" action="<?php echo admin_url('admin-post.php'); ?>" id="video-upload-form" enctype="multipart/form-data">
+                                <form method="post" action="<?php echo admin_url('admin-post.php'); ?>" data-xhr-action="<?php echo admin_url('admin-post.php?xhr=1'); ?>" id="video-upload-form" enctype="multipart/form-data">
                                         <?php wp_nonce_field('wptv-upload-video', 'wptvvideon'); ?>
                                         <input type="hidden" name="action" value="wptv_video_upload" />
@@ -384 +392 @@
                                                 <input type="submit" id="wptv_video_upload" style="display:none;" value="<?php esc_attr_e( 'Submit' ); ?>" />
                                         </p>
+                                        <p id="upload-progress" style="display:none;">
+                                                <progress value="0" max="100" style="width:90%;"></progress><span class="percent"></span><br>
+                                                <span class="status"></span> <a href="#" class="abort">Cancel</a>
+                                        </p>
                                 </form>
                         </div>
@@ -435 +447 @@
 
                                 // .. and the Year
-                                title += $( '#wptv_date' ).value.substring( 0, 4 );
+                                title += $( '#wptv_date' ).val().substring( 0, 4 );
 
                                 // If a location or year has been selected, build the Event Name.
@@ -487 +499 @@
                                 if ( ! file.val() || !/\.(avi|mov|qt|mpeg|mpg|mpe|mp4|m4v|asf|asx|wax|wmv|wmx|ogv|3gp|3g2)$/.test( file.val() ) ) {
                                         invalid(file, e);
+                                        scroll = true;
                                 }
 
@@ -495 +508 @@
                                 }
 
-                                if ( scroll && uploaded_by.length ) {
-                                        uploaded_by.get( 0 ).scrollIntoView();
+                                if ( scroll ) {
+                                        jQuery( '.invalid' ).get(0).scrollIntoView();
+                                        return;
+                                }
+
+                                // Start the upload!
+                                if ( 
+                                        'undefined' != typeof XMLHttpRequest &&
+                                        'undefined' != typeof FormData
+                                ) {
+                                        e.preventDefault();
+                                        processXHRUpload();
                                 }
                         } );
                 } );
+
+                function processXHRUpload() {
+                        var $form        = jQuery( '#video-upload-form' ),
+                                $file        = $form.find('input[type="file"]'),
+                                $submit      = $form.find( 'p.last' ),
+                                $progressBar = $form.find( '#upload-progress' ),
+                                $progress    = $progressBar.find( 'progress' ),
+                                $status      = $progressBar.find( '.status' ),
+                                $percent     = $progressBar.find( '.percent' ),
+                                $abort       = $progressBar.find( '.abort' ),
+                                formdata     = new FormData( $form.get(0) ),
+                                xhr          = new XMLHttpRequest(),
+                                startTime    = (new Date()).getTime(),
+                                round_to, disable_form;
+
+                        round_to = function(x, precision ) {
+                                return x.toLocaleString(
+                                        undefined,
+                                        {
+                                                minimumFractionDigits: precision,
+                                                maximumFractionDigits: precision
+                                        }
+                                );
+                        };
+
+                        disable_form = function( disable ) {
+                                $form.find( 'input,select,option,textarea' ).prop( 'disabled', !! disable );
+                        };
+
+                        disable_form( true );
+                        $submit.hide();
+                        $progress.val( 0 );
+                        $percent.text( '0%' );
+                        $progressBar.show();
+                        $abort.show();
+
+                        $status.text( 'Preparing upload..' );
+
+                        xhr.upload.addEventListener( 'progress', function(e) {
+                                var percent     = Math.round( e.loaded / e.total * 100 ),
+                                        size        = round_to( e.total / 1024 / 1024, 1 ),
+                                        uploaded    = round_to( e.loaded / 1024 / 1024, 1 ),
+                                        elapsed     = ( (new Date()).getTime() - startTime ) / 1000,
+                                        // This isn't a perfect speed measurement, but is close enough for our needs.
+                                        speed_kbps  = e.loaded / elapsed / 1024,
+                                        eta_seconds = Math.round( ( e.total - e.loaded ) / 1024 / speed_kbps ),
+                                        eta_minutes = Math.floor( eta_seconds / 60 ),
+                                        eta         = '',
+                                        speed;
+
+                                // Give some time for the upload speed to settle.
+                                if ( elapsed > 10 || percent > 5 ) {
+                                        if ( eta_minutes ) {
+                                                eta += eta_minutes + ( eta_minutes > 1 ? ' mins ' : ' min ' );
+                                        }
+                                        if ( eta_seconds % 60 ) {
+                                                eta += ( eta_seconds - eta_minutes * 60 ) + 's';
+                                        }
+                                } else {
+                                        eta = 'Calculating..';
+                                }
+
+                                if ( speed_kbps > 1024 ) {
+                                        speed = round_to( speed_kbps / 1024, 2 ) + 'mb/s';
+                                } else {
+                                        speed = round_to( Math.round( speed_kbps ), 0 ) + 'kb/s';
+                                }
+
+                                $progress.val( percent );
+
+                                $percent.text( `${percent}%` );
+
+                                $status.text(
+                                        `Uploaded ${uploaded}MB of ${size}MB. ${speed} Remaining: ${eta}`
+                                );
+                                if ( percent >= 100 ) {
+                                        $status.text( 'Processing upload.. please wait..' );
+                                        $abort.hide();
+                                }
+
+                        }, false);
+
+                        xhr.addEventListener( 'load', function( e ) {
+                                $status.text( 'Done.. please wait..' );
+                                $abort.hide();
+                                // Redirect. Upload done.
+                                document.location = e.target.responseText;
+                        }, false);
+
+                        xhr.addEventListener( 'error', function( e ) {
+                                $status.text( 'Upload failed. Network or Browser issue encountered.' );
+                                console.log( e );
+
+                                disable_form( false );
+                                $submit.show();
+                                $abort.hide();
+                        }, false );
+
+                        xhr.addEventListener( 'abort', function( e ) {
+                                $status.text( 'Aborted.' );
+
+                                disable_form( false );
+                                $submit.show();
+                                $progressBar.hide();
+                        }, false );
+
+                        // Note: form.action will return the `<input name="action">` element, which is why a data attribute is ued.
+                        xhr.withCredentials = true;
+                        xhr.open( $form.prop( 'method' ), $form.data( 'xhr-action' ) );
+                        xhr.send( formdata );
+
+                        $abort.click( function( e ) {
+                                xhr.abort();
+                                e.preventDefault();
+                        } );
+                }
         </script>
 

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/inc/wpcom.php

@@ -1 +1 @@
 <?php
 
-require_once WP_CONTENT_DIR . '/themes/vip/plugins/vip-init.php';
+if ( ! function_exists( 'wpcom_vip_load_plugin' ) ) {
+        require_once WP_CONTENT_DIR . '/themes/vip/plugins/vip-init.php';
+}
 wpcom_vip_load_plugin( 'taxonomy-list-widget' );

sites/trunk/wordpress.tv/public_html/wp-content/themes/wptv2/plugins/wordpresstv-anon-upload/anon-upload.php

@@ -74 +74 @@
                                 $redir
                         );
+                }
+
+                // For an XHR request, just send the redirect location, don't redirect to it.
+                if ( isset( $_GET['xhr'] ) ) {
+                        die( $redir );
                 }