Brion VIBBER has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/313977

Change subject: Select default resolution in videojs playback
......................................................................

Select default resolution in videojs playback

The videojs resolution switcher was overriding our default res
selection with the lowest resolution. Overriding it back by picking
the first resolution that matches or surpasses the available picture
area.

This'll show 240p video for most small thumbnails, which plays
adequately at small size even in ogv.js (except on iPhone 4S or
equivalent where it's a bit flaky)

Larger players as on File: pages should show larger sizes.
Note it does *NOT* yet switch on fullscreen/exit.

Also de-cluttered the resolution switcher by showing just the res
and letting the backing format be picked automatically (ogg/webm/etc)
for transcodes.

Bug: T135026
Change-Id: I17d77d98e3655ed7549e49c1c2e1375b1dc1bcbf
---
M TimedMediaHandler.hooks.php
M TimedMediaTransformOutput.php
M WebVideoTranscode/WebVideoTranscode.php
M i18n/en.json
M i18n/qqq.json
M resources/ext.tmh.player.js
6 files changed, 87 insertions(+), 6 deletions(-)


  git pull 
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/TimedMediaHandler 
refs/changes/77/313977/1

diff --git a/TimedMediaHandler.hooks.php b/TimedMediaHandler.hooks.php
index ff28845..beeffa7 100644
--- a/TimedMediaHandler.hooks.php
+++ b/TimedMediaHandler.hooks.php
@@ -173,6 +173,16 @@
                                                        
'ext.tmh.videojs-replay',
                                                        
'ext.tmh.mw-info-button',
                                                ],
+                                               'messages' => [
+                                                       
'timedmedia-resolution-160',
+                                                       
'timedmedia-resolution-240',
+                                                       
'timedmedia-resolution-360',
+                                                       
'timedmedia-resolution-480',
+                                                       
'timedmedia-resolution-720',
+                                                       
'timedmedia-resolution-1080',
+                                                       
'timedmedia-resolution-1440',
+                                                       
'timedmedia-resolution-2160',
+                                               ],
                                        ],
                                'ext.tmh.player.styles' => 
$baseExtensionResource + [
                                                'styles' => 
'resources/ext.tmh.player.styles.less',
diff --git a/TimedMediaTransformOutput.php b/TimedMediaTransformOutput.php
index f1ae1fc..5290098 100644
--- a/TimedMediaTransformOutput.php
+++ b/TimedMediaTransformOutput.php
@@ -323,6 +323,8 @@
                        'framerate',
                        'disablecontrols',
                        'transcodekey',
+                       'label',
+                       'res',
                ];
                foreach ( $mediaSources as &$source ) {
                        foreach ( $source as $attr => $val ) {
diff --git a/WebVideoTranscode/WebVideoTranscode.php 
b/WebVideoTranscode/WebVideoTranscode.php
index 2e041b9..fdaaa97 100644
--- a/WebVideoTranscode/WebVideoTranscode.php
+++ b/WebVideoTranscode/WebVideoTranscode.php
@@ -1011,11 +1011,14 @@
                $src = self::getTranscodedUrlForFile( $file, $transcodeKey );
 
                if ( $file->getHandler()->isAudio( $file ) ) {
-                       $width = $height = 0;
+                       $width = $height = $res = 0;
+                       $resLabel = wfMessage( 'timedmedia-resolution-audio' 
)->text();
                } else {
+                       $res = 
self::$derivativeSettings[$transcodeKey]['maxSize'];
+                       $resLabel = wfMessage( 'timedmedia-resolution-' . $res 
)->text();
                        list( $width, $height ) = 
WebVideoTranscode::getMaxSizeTransform(
                                $file,
-                               
self::$derivativeSettings[$transcodeKey]['maxSize']
+                               $res
                        );
                }
 
@@ -1035,6 +1038,10 @@
                                // eventually we will define a manifest xml 
entry point.
                                "width" => intval( $width ),
                                "height" => intval( $height ),
+
+                               // For videojs-resolution-switcher
+                               'res' => intval( $res ),
+                               'label' => $resLabel,
                        ];
 
                // a "ready" transcode should have a bitrate:
diff --git a/i18n/en.json b/i18n/en.json
index 652416b..cf05b2c 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -134,6 +134,14 @@
        "timedmedia-derivative-desc-mp3": "MP3",
        "timedmedia-derivative-m4a": "AAC",
        "timedmedia-derivative-desc-m4a": "AAC",
+       "timedmedia-resolution-160": "Low 160p",
+       "timedmedia-resolution-240": "Low 240p",
+       "timedmedia-resolution-360": "SD 360p",
+       "timedmedia-resolution-480": "SD 480p",
+       "timedmedia-resolution-720": "HD 720p",
+       "timedmedia-resolution-1080": "HD 1080p",
+       "timedmedia-resolution-1440": "UHD 1440p",
+       "timedmedia-resolution-2160": "UHD 2160p",
        "timedmedia-subtitle-new": "Create new translation or edit existing",
        "timedmedia-subtitle-new-desc": "Select language and press the 
'''{{int:Timedmedia-subtitle-new-go}}''' button",
        "timedmedia-subtitle-new-go": "Go",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 4692670..904c1df 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -152,6 +152,14 @@
        "timedmedia-derivative-desc-mp3": "{{optional}} Media format.",
        "timedmedia-derivative-m4a": "{{optional}} Short form of a media 
format.",
        "timedmedia-derivative-desc-m4a": "{{optional}} Media format.",
+       "timedmedia-resolution-160": "Label for video player resolution 
switcher for 160p low resolution.",
+       "timedmedia-resolution-240": "Label for video player resolution 
switcher for 240p low resolution.",
+       "timedmedia-resolution-360": "Label for video player resolution 
switcher for 360p standard definition.",
+       "timedmedia-resolution-480": "Label for video player resolution 
switcher for 480p standard definition.",
+       "timedmedia-resolution-720": "Label for video player resolution 
switcher for 720p high definition.",
+       "timedmedia-resolution-1080": "Label for video player resolution 
switcher for 1080p high definition.",
+       "timedmedia-resolution-1440": "Label for video player resolution 
switcher for 1440p ultra-high definition.",
+       "timedmedia-resolution-2160": "Label for video player resolution 
switcher for 2160p ultra-high definition.",
        "timedmedia-subtitle-new": "Used as page title.",
        "timedmedia-subtitle-new-desc": "Refers to 
{{msg-mw|Timedmedia-subtitle-new-go}}.",
        "timedmedia-subtitle-new-go": "Used as label for the Submit 
button.\n\nPreceded by (and used in) the description 
{{msg-mw|Timedmedia-subtitle-new-desc}}.\n{{Identical|Go}}",
diff --git a/resources/ext.tmh.player.js b/resources/ext.tmh.player.js
index 765f8ca..55c6d15 100755
--- a/resources/ext.tmh.player.js
+++ b/resources/ext.tmh.player.js
@@ -14,7 +14,15 @@
                techOrder: [ 'html5', 'ogvjs' ],
                plugins: {
                        videoJsResolutionSwitcher: {
-                               sourceOrder: true
+                               sourceOrder: true,
+                               customSourcePicker: function( player, sources, 
label ) {
+                                       // Resolution switcher gets confused by 
preload=none on ogv.js
+                                       if ( player.preload() === 'none' ) {
+                                               player.preload( 'metadata' );
+                                       }
+                                       player.src( sources );
+                                       return player;
+                               }
                        },
                        responsiveLayout: {
                                layoutMap: [
@@ -64,14 +72,52 @@
                                // On pages with many videos, like Category 
pages, don't preload em all
                                preload = 'none';
                        }
+
+                       var sources = [];
+
                        $( videoplayer ).attr( {
                                preload: preload
                        } ).find( 'source' ).each( function () {
                                // FIXME would be better if we can configure 
the plugin to make use of our preferred attributes
-                               $source = $( this );
-                               $source.attr( 'res', $source.data( 'height' ) );
-                               $source.attr( 'label', $source.data( 
'shorttitle' ) );
+                               var $source = $( this ),
+                                       transcodeKey = $source.data( 
'transcodekey' );
+
+                               if ( transcodeKey ) {
+                                       var matches = 
transcodeKey.match(/^(\d+)p\./);
+                                       if (matches) {
+                                               var res = matches[1];
+                                               $source.attr( 'res', res );
+                                               $source.attr( 'label', 
mw.message( 'timedmedia-resolution-' + res ).text() );
+                                       } else {
+                                               $source.attr( 'res', 
$source.data( 'height' ) );
+                                               $source.attr( 'label', 
$source.data( 'shorttitle' ) );
+                                       }
+                               } else {
+                                       $source.attr( 'res', '99999' ); // 
sorting hack
+                                       $source.attr( 'label', $source.data( 
'shorttitle' ) );
+                               }
+                               sources.push( {
+                                       source: this,
+                                       res: res
+                               } );
                        } );
+
+                       // Pick the first resolution at least the size of the 
player,
+                       // unless they're all too small.
+                       sources.sort( function( a, b ) {
+                               return a.res - b.res;
+                       });
+                       var defaultRes;
+                       for ( var i = 0; i < sources.length; i++ ) {
+                               defaultRes = sources[ i ].res;
+                               if ( defaultRes >= $( videoplayer ).height() ) {
+                                       break;
+                               }
+                       }
+                       if ( defaultRes ) {
+                               
playerConfig.plugins.videoJsResolutionSwitcher.default = defaultRes;
+                       }
+
                        $videoplayer.parent( '.thumbinner' ).addClass( 
'mw-overflow' );
 
                        // Launch the player

-- 
To view, visit https://gerrit.wikimedia.org/r/313977
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I17d77d98e3655ed7549e49c1c2e1375b1dc1bcbf
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/TimedMediaHandler
Gerrit-Branch: master
Gerrit-Owner: Brion VIBBER <br...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to