From 7c6c27a7c79e3b7b1eb8f6c95efb1dd1a6088b53 Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Wed, 5 Feb 2020 16:13:25 +0100 Subject: [PATCH 01/12] Manually apply global video transforms to url onload --- .../php/media/class-video.php | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index 212d2366d..1baa70c91 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -338,11 +338,28 @@ public function print_video_scripts() { } $config = wp_parse_args( $video['args'], $default ); - // Sizing. - if ( empty( $config['size'] ) ) { + + if ( empty( $config['size'] ) && ! isset( $this->config['video_freeform'] ) ) { $config['fluid'] = true; } - $code[] = 'cld.videoPlayer(\'cloudinary-video-' . $instance . '\', ' . wp_json_encode( $config ) . ');'; + + $code[] = sprintf( + 'var video_%1$s = cld.videoPlayer("cloudinary-video-%1$s", %2$s);', + $instance, + wp_json_encode( $config ) + ); + + if ( isset( $this->config['video_freeform'] ) ) { + $code[] = sprintf( + 'window.onload = function () { + var videoContainer = document.getElementById(video_%s.videojs.id_); + var videoElement = videoContainer.getElementsByTagName("video")[0]; + videoElement.src = videoElement.src.replace("upload/", "upload/%s/"); + };', + $instance, + $this->config['video_freeform'] + ); + } } // If code was populated, output. if ( ! empty( $code ) ) { From 0f7e5b9140daabe5bf32d7480e049a1238e525eb Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Wed, 5 Feb 2020 16:15:45 +0100 Subject: [PATCH 02/12] Add overflow: hidden to prevent controls going out of bound --- .../php/media/class-video.php | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index 1baa70c91..d729569ed 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -344,7 +344,7 @@ public function print_video_scripts() { } $code[] = sprintf( - 'var video_%1$s = cld.videoPlayer("cloudinary-video-%1$s", %2$s);', + 'var video_%1$s = cld.videoPlayer( "cloudinary-video-%1$s", %2$s );', $instance, wp_json_encode( $config ) ); @@ -352,9 +352,10 @@ public function print_video_scripts() { if ( isset( $this->config['video_freeform'] ) ) { $code[] = sprintf( 'window.onload = function () { - var videoContainer = document.getElementById(video_%s.videojs.id_); - var videoElement = videoContainer.getElementsByTagName("video")[0]; - videoElement.src = videoElement.src.replace("upload/", "upload/%s/"); + var videoContainer = document.getElementById( video_%s.videojs.id_ ); + videoContainer.style.overflow = "hidden"; + var videoElement = videoContainer.getElementsByTagName( "video" )[0]; + videoElement.src = videoElement.src.replace( "upload/", "upload/%s/" ); };', $instance, $this->config['video_freeform'] From 6d7965447bcff23bbfdf769f8adaa5cfe0363538 Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Wed, 5 Feb 2020 16:26:06 +0100 Subject: [PATCH 03/12] Prevent variable collision in js --- .../php/media/class-video.php | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index d729569ed..bcaac5f34 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -344,7 +344,7 @@ public function print_video_scripts() { } $code[] = sprintf( - 'var video_%1$s = cld.videoPlayer( "cloudinary-video-%1$s", %2$s );', + 'var video%1$s = cld.videoPlayer( "cloudinary-video-%1$s", %2$s );', $instance, wp_json_encode( $config ) ); @@ -352,10 +352,13 @@ public function print_video_scripts() { if ( isset( $this->config['video_freeform'] ) ) { $code[] = sprintf( 'window.onload = function () { - var videoContainer = document.getElementById( video_%s.videojs.id_ ); - videoContainer.style.overflow = "hidden"; - var videoElement = videoContainer.getElementsByTagName( "video" )[0]; - videoElement.src = videoElement.src.replace( "upload/", "upload/%s/" ); + var videoContainer%1$s = document.getElementById( video%s.videojs.id_ ); + var videoElement%1$s = videoContainer%1$s.getElementsByTagName( "video" )[0]; + videoElement%1$s.src = videoElement%1$s.src.replace( "upload/", "upload/%2$s/" ); + + if ( videoElement%1$s.width < 320 ) { + video%1$s.controls(false); + } };', $instance, $this->config['video_freeform'] From cba0823b8b7a7d45116500a2d9fc422561e461b5 Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Thu, 6 Feb 2020 12:00:00 +0100 Subject: [PATCH 04/12] Adjust code to avoid multiple window.onload calls --- .../php/media/class-video.php | 37 +++++++++++++------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index bcaac5f34..022202fd8 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -320,7 +320,7 @@ public function print_video_scripts() { if ( $this->player_enabled() && ! empty( $this->attachments ) ) { - $code = array(); + $code = $onload_code = array(); foreach ( $this->attachments as $instance => $video ) { // @todo - ping the URL to ensure it has transformation available, else update an eager. $cloudinary_id = $this->media->get_public_id( $video['id'] ); @@ -350,28 +350,41 @@ public function print_video_scripts() { ); if ( isset( $this->config['video_freeform'] ) ) { - $code[] = sprintf( - 'window.onload = function () { - var videoContainer%1$s = document.getElementById( video%s.videojs.id_ ); - var videoElement%1$s = videoContainer%1$s.getElementsByTagName( "video" )[0]; - videoElement%1$s.src = videoElement%1$s.src.replace( "upload/", "upload/%2$s/" ); - - if ( videoElement%1$s.width < 320 ) { - video%1$s.controls(false); - } - };', + $onload_code[] = sprintf( + 'var videoContainer%1$s = document.getElementById( video%s.videojs.id_ ); + var videoElement%1$s = videoContainer%1$s.getElementsByTagName( "video" )[0]; + videoElement%1$s.src = videoElement%1$s.src.replace( "upload/", "upload/%2$s/" ); + + if ( videoElement%1$s.width < 320 ) { + video%1$s.controls(false); + }', $instance, $this->config['video_freeform'] ); } } + // If code was populated, output. if ( ! empty( $code ) ) { - wp_add_inline_script( 'cld-player', implode( $code ) ); + wp_add_inline_script( + 'cld-player', + implode( $code ) . $this->window_onload_wrapper( implode( $onload_code ) ) + ); } } } + /** + * Wraps a JS string in a window.onload callback. + * + * @param string $code + * + * @return string + */ + protected function window_onload_wrapper( $code ) { + return $code ? 'window.onload = function () { ' . $code . ' }' : ''; + } + /** * Enqueue BLock Assets */ From 33a765f64348f9570ed8666ae85af83027dbf357 Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Thu, 6 Feb 2020 20:56:57 +0100 Subject: [PATCH 05/12] Reformat generated JS --- .../php/media/class-video.php | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index 022202fd8..d4b5cc98a 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -344,20 +344,29 @@ public function print_video_scripts() { } $code[] = sprintf( - 'var video%1$s = cld.videoPlayer( "cloudinary-video-%1$s", %2$s );', + "var video%1\$s = cld.videoPlayer( \"cloudinary-video-%1\$s\", %2\$s );\n", $instance, wp_json_encode( $config ) ); + // Apply transformations via URL + // The "320" is hardcoded here as that the rough + // estimate of pixels that occupy the player controls. if ( isset( $this->config['video_freeform'] ) ) { $onload_code[] = sprintf( - 'var videoContainer%1$s = document.getElementById( video%s.videojs.id_ ); - var videoElement%1$s = videoContainer%1$s.getElementsByTagName( "video" )[0]; - videoElement%1$s.src = videoElement%1$s.src.replace( "upload/", "upload/%2$s/" ); + ' + var videoContainer%1$s = document.getElementById( video%s.videojs.id_ ); + var videoElement%1$s = videoContainer%1$s.getElementsByTagName( "video" ); - if ( videoElement%1$s.width < 320 ) { - video%1$s.controls(false); - }', + if ( videoElement%1$s.length === 1 ) { + videoElement%1$s = videoElement%1$s[0]; + videoElement%1$s.src = videoElement%1$s.src.replace( "upload/", "upload/%2$s/" ); + + if ( videoElement%1$s.width < 320 ) { + video%1$s.controls(false); + } + } +', $instance, $this->config['video_freeform'] ); @@ -382,7 +391,7 @@ public function print_video_scripts() { * @return string */ protected function window_onload_wrapper( $code ) { - return $code ? 'window.onload = function () { ' . $code . ' }' : ''; + return $code ? "\nwindow.onload = function () { {$code} }" : ''; } /** From 032c945dab3986bfa073b8a76e24e8a6046956f3 Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Fri, 7 Feb 2020 15:03:23 +0100 Subject: [PATCH 06/12] Escape javascript output appropriately and make code more readable --- .../php/media/class-video.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index d4b5cc98a..ad33814cc 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -344,7 +344,7 @@ public function print_video_scripts() { } $code[] = sprintf( - "var video%1\$s = cld.videoPlayer( \"cloudinary-video-%1\$s\", %2\$s );\n", + 'var video%1$s = cld.videoPlayer( "cloudinary-video-%1$s", %2$s );' . "\n", $instance, wp_json_encode( $config ) ); @@ -355,7 +355,7 @@ public function print_video_scripts() { if ( isset( $this->config['video_freeform'] ) ) { $onload_code[] = sprintf( ' - var videoContainer%1$s = document.getElementById( video%s.videojs.id_ ); + var videoContainer%1$s = document.getElementById( video%1$s.videojs.id_ ); var videoElement%1$s = videoContainer%1$s.getElementsByTagName( "video" ); if ( videoElement%1$s.length === 1 ) { @@ -367,8 +367,8 @@ public function print_video_scripts() { } } ', - $instance, - $this->config['video_freeform'] + esc_attr( $instance ), + esc_attr( $this->config['video_freeform'] ) ); } } @@ -391,7 +391,7 @@ public function print_video_scripts() { * @return string */ protected function window_onload_wrapper( $code ) { - return $code ? "\nwindow.onload = function () { {$code} }" : ''; + return $code ? "\nwindow.addEventListener( 'load', function () { {$code} });" : ''; } /** From 5cb9a954e539239903c271e7acae32f55b7f9092 Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Fri, 7 Feb 2020 21:37:43 +0100 Subject: [PATCH 07/12] Prevent code duplication and utilize loops instead --- .../php/media/class-video.php | 76 ++++++++++--------- 1 file changed, 41 insertions(+), 35 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index ad33814cc..81adf361b 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -320,7 +320,7 @@ public function print_video_scripts() { if ( $this->player_enabled() && ! empty( $this->attachments ) ) { - $code = $onload_code = array(); + $cld_videos = array(); foreach ( $this->attachments as $instance => $video ) { // @todo - ping the URL to ensure it has transformation available, else update an eager. $cloudinary_id = $this->media->get_public_id( $video['id'] ); @@ -343,43 +343,49 @@ public function print_video_scripts() { $config['fluid'] = true; } - $code[] = sprintf( - 'var video%1$s = cld.videoPlayer( "cloudinary-video-%1$s", %2$s );' . "\n", - $instance, - wp_json_encode( $config ) - ); + $cld_videos[ $instance ] = $config; - // Apply transformations via URL - // The "320" is hardcoded here as that the rough - // estimate of pixels that occupy the player controls. - if ( isset( $this->config['video_freeform'] ) ) { - $onload_code[] = sprintf( - ' - var videoContainer%1$s = document.getElementById( video%1$s.videojs.id_ ); - var videoElement%1$s = videoContainer%1$s.getElementsByTagName( "video" ); - - if ( videoElement%1$s.length === 1 ) { - videoElement%1$s = videoElement%1$s[0]; - videoElement%1$s.src = videoElement%1$s.src.replace( "upload/", "upload/%2$s/" ); - - if ( videoElement%1$s.width < 320 ) { - video%1$s.controls(false); - } - } -', - esc_attr( $instance ), - esc_attr( $this->config['video_freeform'] ) - ); - } } - - // If code was populated, output. - if ( ! empty( $code ) ) { - wp_add_inline_script( - 'cld-player', - implode( $code ) . $this->window_onload_wrapper( implode( $onload_code ) ) - ); + + if ( empty( $cld_videos ) ) { + return; } + + ob_start(); + ?> +var cldVideos = ; + +for ( var videoInstance in cldVideos ) { + var config = cldVideos[ videoInstance ]; + var id = 'cloudinary-video-' + videoInstance; + cld.videoPlayer( id, config ); +} + +config['video_freeform'] ): ?> +window.addEventListener( 'load', function() { + for ( const instance in cldVideos ) { + var config = cldVideos[ instance ]; + var id = 'cloudinary-video-' + instance; + var videoContainer = document.getElementById( id ); + var videoElement = videoContainer.getElementsByTagName( 'video' ); + + if ( videoElement.length === 1 ) { + videoElement = videoElement[0]; + videoElement.src = videoElement.src.replace( + 'upload/', + 'upload/config['video_freeform'] ) ?>' + ); + } + } +} ); + + Date: Fri, 7 Feb 2020 21:47:13 +0100 Subject: [PATCH 08/12] Remove redundant PHP tags --- .../php/media/class-video.php | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index 81adf361b..61ae02a31 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -378,8 +378,9 @@ public function print_video_scripts() { } } } ); - - Date: Fri, 7 Feb 2020 21:48:39 +0100 Subject: [PATCH 09/12] Indent the first line to the level of the php code --- .../php/media/class-video.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index 61ae02a31..01f665eec 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -353,7 +353,7 @@ public function print_video_scripts() { ob_start(); ?> -var cldVideos = ; + var cldVideos = ; for ( var videoInstance in cldVideos ) { var config = cldVideos[ videoInstance ]; From 369556f3ae1ce45e601d1406347af884312867b0 Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Fri, 7 Feb 2020 21:52:55 +0100 Subject: [PATCH 10/12] Remove unused method that wraps JS in an onload handler --- .../php/media/class-video.php | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index 01f665eec..1f66fbdbb 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -390,17 +390,6 @@ public function print_video_scripts() { } } - /** - * Wraps a JS string in a window.onload callback. - * - * @param string $code - * - * @return string - */ - protected function window_onload_wrapper( $code ) { - return $code ? "\nwindow.addEventListener( 'load', function () { {$code} });" : ''; - } - /** * Enqueue BLock Assets */ From 42831d29150912a38b77d8f6afde783628117b08 Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Fri, 7 Feb 2020 21:58:23 +0100 Subject: [PATCH 11/12] Rename vars to prevent global variable name collisions --- .../php/media/class-video.php | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index 1f66fbdbb..9a8c7c047 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -356,24 +356,23 @@ public function print_video_scripts() { var cldVideos = ; for ( var videoInstance in cldVideos ) { - var config = cldVideos[ videoInstance ]; - var id = 'cloudinary-video-' + videoInstance; - cld.videoPlayer( id, config ); + var cldConfig = cldVideos[ videoInstance ]; + var cldId = 'cloudinary-video-' + videoInstance; + cld.videoPlayer( cldId, cldConfig ); } config['video_freeform'] ): ?> window.addEventListener( 'load', function() { - for ( const instance in cldVideos ) { - var config = cldVideos[ instance ]; - var id = 'cloudinary-video-' + instance; - var videoContainer = document.getElementById( id ); + for ( var videoInstance in cldVideos ) { + var cldId = 'cloudinary-video-' + videoInstance; + var videoContainer = document.getElementById( cldId ); var videoElement = videoContainer.getElementsByTagName( 'video' ); if ( videoElement.length === 1 ) { videoElement = videoElement[0]; videoElement.src = videoElement.src.replace( 'upload/', - 'upload/config['video_freeform'] ) ?>' + 'upload/config['video_freeform'] ) ?>/' ); } } From 716bcd5450b883336e6b4da9085b78506df6b97a Mon Sep 17 00:00:00 2001 From: Dukagjin Surdulli Date: Fri, 7 Feb 2020 22:00:22 +0100 Subject: [PATCH 12/12] Indents JS back to the PHP level --- .../php/media/class-video.php | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php index 9a8c7c047..101f0b348 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-video.php @@ -355,28 +355,28 @@ public function print_video_scripts() { ?> var cldVideos = ; -for ( var videoInstance in cldVideos ) { - var cldConfig = cldVideos[ videoInstance ]; - var cldId = 'cloudinary-video-' + videoInstance; - cld.videoPlayer( cldId, cldConfig ); -} + for ( var videoInstance in cldVideos ) { + var cldConfig = cldVideos[ videoInstance ]; + var cldId = 'cloudinary-video-' + videoInstance; + cld.videoPlayer( cldId, cldConfig ); + } -config['video_freeform'] ): ?> -window.addEventListener( 'load', function() { - for ( var videoInstance in cldVideos ) { - var cldId = 'cloudinary-video-' + videoInstance; - var videoContainer = document.getElementById( cldId ); - var videoElement = videoContainer.getElementsByTagName( 'video' ); - - if ( videoElement.length === 1 ) { - videoElement = videoElement[0]; - videoElement.src = videoElement.src.replace( - 'upload/', - 'upload/config['video_freeform'] ) ?>/' - ); - } - } -} ); + config['video_freeform'] ): ?> + window.addEventListener( 'load', function() { + for ( var videoInstance in cldVideos ) { + var cldId = 'cloudinary-video-' + videoInstance; + var videoContainer = document.getElementById( cldId ); + var videoElement = videoContainer.getElementsByTagName( 'video' ); + + if ( videoElement.length === 1 ) { + videoElement = videoElement[0]; + videoElement.src = videoElement.src.replace( + 'upload/', + 'upload/config['video_freeform'] ) ?>/' + ); + } + } + } );