Merge "Download sizes: 480p, 720p, 1080p, 2160p"

This commit is contained in:
jenkins-bot 2019-05-31 16:54:00 +00:00 committed by Gerrit Code Review
commit c7e33d0f5e
8 changed files with 50 additions and 20 deletions

View file

@ -260,6 +260,7 @@
"multimediaviewer-download-small-button-name",
"multimediaviewer-download-medium-button-name",
"multimediaviewer-download-large-button-name",
"multimediaviewer-download-xl-button-name",
"multimediaviewer-embed-dimensions",
"multimediaviewer-embed-dimensions-with-file-format",
"multimediaviewer-download-attribution-cta-header",
@ -306,6 +307,7 @@
"multimediaviewer-embed-via",
"multimediaviewer-default-embed-dimensions",
"multimediaviewer-original-embed-dimensions",
"multimediaviewer-xl-embed-dimensions",
"multimediaviewer-large-embed-dimensions",
"multimediaviewer-medium-embed-dimensions",
"multimediaviewer-small-embed-dimensions",

View file

@ -84,6 +84,7 @@
"multimediaviewer-download-small-button-name": "Download small size",
"multimediaviewer-download-medium-button-name": "Download medium size",
"multimediaviewer-download-large-button-name": "Download large size",
"multimediaviewer-download-xl-button-name": "Download extra large size",
"multimediaviewer-link-to-page": "Link to file description page",
"multimediaviewer-link-to-file": "Link to original file",
"multimediaviewer-share-explanation": "Copy and freely share the link",
@ -103,6 +104,7 @@
"multimediaviewer-embed-via": "Via $1.",
"multimediaviewer-default-embed-dimensions": "Default thumbnail size",
"multimediaviewer-original-embed-dimensions": "Original file $1",
"multimediaviewer-xl-embed-dimensions": "Extra large $1",
"multimediaviewer-large-embed-dimensions": "Large $1",
"multimediaviewer-medium-embed-dimensions": "Medium $1",
"multimediaviewer-small-embed-dimensions": "Small $1",

View file

@ -95,6 +95,7 @@
"multimediaviewer-download-small-button-name": "Text inside the button that lets the user download a small version of the original image - used for file download functionality.",
"multimediaviewer-download-medium-button-name": "Text inside the button that lets the user download a medium version of the original image - used for file download functionality.",
"multimediaviewer-download-large-button-name": "Text inside the button that lets the user download a large version of the original image - used for file download functionality.",
"multimediaviewer-download-xl-button-name": "Text inside the button that lets the user download an extra large version of the original image - used for file download functionality.",
"multimediaviewer-link-to-page": "Used as alt-text to describe a URL that goes to a File: page for an image.",
"multimediaviewer-link-to-file": "Used as alt-text to describe a URL that goes to an image file.",
"multimediaviewer-share-explanation": "Used below the URL share input to explain what we expect the user to do.",
@ -114,6 +115,7 @@
"multimediaviewer-embed-via": "Source information (e.g. \"via Flickr\"), used when generating wikitext/HTML to reuse the image.\n\nParameters:\n* $1 - source (probably a website or institution name)",
"multimediaviewer-default-embed-dimensions": "Text of size selector option which will generate wikitext for a thumbnail without explicit size.",
"multimediaviewer-original-embed-dimensions": "Text of size selector option which will generate wikitext for a thumbnail with the original (full) size.\n* $1 - thumbnail dimensions, defined by the following message:\n** {{msg-mw|Multimediaviewer-embed-dimensions}}",
"multimediaviewer-xl-embed-dimensions": "Text of size selector option which will generate wikitext for a thumbnail with extra large size.\n* $1 - thumbnail dimensions, defined by the following message:\n** {{msg-mw|Multimediaviewer-embed-dimensions}}\n{{Identical|Extra large}}",
"multimediaviewer-large-embed-dimensions": "Text of size selector option which will generate wikitext for a thumbnail with large size.\n* $1 - thumbnail dimensions, defined by the following message:\n** {{msg-mw|Multimediaviewer-embed-dimensions}}\n\n{{Identical|Large}}",
"multimediaviewer-medium-embed-dimensions": "Text of size selector option which will generate wikitext for a thumbnail with medium size.\n* $1 - thumbnail dimensions, defined by the following message:\n** {{msg-mw|Multimediaviewer-embed-dimensions}}\n{{Identical|Medium}}",
"multimediaviewer-small-embed-dimensions": "Text of size selector option which will generate wikitext for a thumbnail with small size.\n* $1 - thumbnail dimensions, defined by the following message:\n** {{msg-mw|Multimediaviewer-embed-dimensions}}\n{{Identical|Small}}",

View file

@ -115,7 +115,7 @@
*/
DP.createSizePulldownMenu = function ( $container ) {
this.downloadSizeMenu = this.utils.createPulldownMenu(
[ 'original', 'small', 'medium', 'large' ],
[ 'original', 'small', 'medium', 'large', 'xl' ],
[ 'mw-mmv-download-size' ],
'original'
);

View file

@ -128,6 +128,7 @@
* @return {Object} return.small
* @return {Object} return.medium
* @return {Object} return.large
* @return {Object} return.xl
* @return {Object} return.original
*/
RUP.getPossibleImageSizesForHtml = function ( width, height ) {
@ -135,9 +136,10 @@
currentGuess, dimensions,
bucketWidth, bucketHeight,
buckets = {
small: { width: 220, height: 145 },
medium: { width: 640, height: 480 },
large: { width: 1200, height: 900 }
small: { width: 640, height: 480 },
medium: { width: 1280, height: 720 }, // HD ready = 720p
large: { width: 1920, height: 1080 }, // Full HD = 1080p
xl: { width: 3840, height: 2160 } // 4K = 2160p
},
sizes = {},
bucketNames = Object.keys( buckets ),

View file

@ -39,21 +39,29 @@ Feature: Download menu
And the download size options appear
And I click the small download size
And the download size options disappears
Then the download image size label should be "193 × 145 px jpg"
And the download links should be the 193 thumbnail
Then the download image size label should be "640 × 480 px jpg"
And the download links should be the 640 thumbnail
Scenario: The medium download option has the correct information
When I open the download dropdown
And the download size options appear
And I click the medium download size
And the download size options disappears
Then the download image size label should be "640 × 480 px jpg"
And the download links should be the 640 thumbnail
Then the download image size label should be "960 × 720 px jpg"
And the download links should be the 960 thumbnail
Scenario: The large download option has the correct information
When I open the download dropdown
And the download size options appear
And I click the large download size
And the download size options disappears
Then the download image size label should be "1200 × 900 px jpg"
And the download links should be the 1200 thumbnail
Then the download image size label should be "1440 × 1080 px jpg"
And the download links should be the 1440 thumbnail
Scenario: The extra large download option has the correct information
When I open the download dropdown
And the download size options appear
And I click the extra large download size
And the download size options disappears
Then the download image size label should be "2880 × 2160 px jpg"
And the download links should be the 2880 thumbnail

View file

@ -31,6 +31,8 @@ When /^I click the (.*) download size$/ do |size_option|
@index = 2
when 'large'
@index = 3
when 'extra large'
@index = 4
else
@index = 0
end

View file

@ -76,30 +76,42 @@
QUnit.test( 'getPossibleImageSizesForHtml()', function ( assert ) {
var utils = new mw.mmv.ui.Utils(),
exampleSizes = [
// Big wide image
{
test: 'Extra large wide image',
width: 6000, height: 4000,
expected: {
small: { width: 640, height: 427 },
medium: { width: 1080, height: 720 },
large: { width: 1620, height: 1080 },
xl: { width: 3240, height: 2160 },
original: { width: 6000, height: 4000 }
}
},
{
test: 'Big wide image',
width: 2048, height: 1536,
expected: {
small: { width: 193, height: 145 },
medium: { width: 640, height: 480 },
large: { width: 1200, height: 900 },
small: { width: 640, height: 480 },
medium: { width: 960, height: 720 },
large: { width: 1440, height: 1080 },
original: { width: 2048, height: 1536 }
}
},
// Big tall image
{
test: 'Big tall image',
width: 201, height: 1536,
expected: {
small: { width: 19, height: 145 },
medium: { width: 63, height: 480 },
large: { width: 118, height: 900 },
small: { width: 63, height: 480 },
medium: { width: 94, height: 720 },
large: { width: 141, height: 1080 },
original: { width: 201, height: 1536 }
}
},
// Very small image
{
test: 'Very small image',
width: 15, height: 20,
expected: {
original: { width: 15, height: 20 }
@ -110,7 +122,7 @@
for ( i = 0; i < exampleSizes.length; i++ ) {
cursize = exampleSizes[ i ];
opts = utils.getPossibleImageSizesForHtml( cursize.width, cursize.height );
assert.deepEqual( opts, cursize.expected, 'We got the expected results out of the size calculation function.' );
assert.deepEqual( opts, cursize.expected, 'Size calculation for "' + cursize.test + '" gives expected results' );
}
} );