Show (tm) symbol if applicable

ImageData will now parse for restrictions (this part has not been
implemented in CommonsMetadata yet), and an orange trademark label
will be displayed next to the license label if there is a 'trademarked'
restriction.

Bug: T77717
Change-Id: Ib03f9708d1e4ff0b5befddc2688b274e2c7ce1f7

MultimediaViewer.php

@@ -599,6 +599,8 @@ $wgResourceModules += array(
 			'multimediaviewer-permission-link',
 			'multimediaviewer-permission-link-hide',
 
+			'multimediaviewer-restriction-trademarked',
+
 			'multimediaviewer-geoloc-north',
 			'multimediaviewer-geoloc-east',
 			'multimediaviewer-geoloc-south',

i18n/en.json

@@ -43,6 +43,7 @@
 	"multimediaviewer-permission-link": "view terms",
 	"multimediaviewer-permission-link-hide": "hide terms",
 	"multimediaviewer-permission-viewmore": "View more",
+	"multimediaviewer-restriction-trademarked": "This image contains content which may be subject to trademark laws.",
 	"multimediaviewer-about-mmv": "About Media Viewer",
 	"multimediaviewer-discuss-mmv": "Discuss this feature",
 	"multimediaviewer-help-mmv": "Help",

i18n/qqq.json

@@ -50,6 +50,7 @@
 	"multimediaviewer-permission-link": "Text of the link (on top of the metadata box) which shows additional permission (by the copyright owner via OTRS) terms\n\nSee also:\n* {{msg-mw|multimediaviewer-permission-link-hide}}",
 	"multimediaviewer-permission-link-hide": "Text of the link (on top of the metadata box) which hides additional permission terms\n\nSee also:\n* {{msg-mw|multimediaviewer-permission-link}}",
 	"multimediaviewer-permission-viewmore": "Text of the link (at the cutoff of the permission term preview) which shows additional permission (by the copyright owner via OTRS) terms.\n{{Identical|View more}}",
+	"multimediaviewer-restriction-trademarked": "Text of the tooltip for the trademarked label, that is displayed when hovered over.",
 	"multimediaviewer-about-mmv": "Text for a link to a page with more information about Media Viewer software.",
 	"multimediaviewer-discuss-mmv": "Text for a link to a page where the user can discuss the Media Viewer software.",
 	"multimediaviewer-help-mmv": "Text for a link to a page with help about Media Viewer software.\n{{Identical|Help}}",

resources/mmv/model/mmv.model.Image.js

@@ -44,6 +44,7 @@
 	 * @param {string} attribution Custom attribution string that replaces credit line when set
 	 * @param {number} latitude
 	 * @param {number} longitude
+	 * @param {string[]} restrictions
 	 */
 	function Image(
 			title,
@@ -67,7 +68,8 @@
 			permission,
 			attribution,
 			latitude,
-			longitude
+			longitude,
+			restrictions
 	) {
 		/** @property {mw.Title} title The title of the image file */
 		this.title = title;
@@ -136,6 +138,9 @@
 		/** @property {number} longitude The longitude of the place where the image was created */
 		this.longitude = longitude;
 
+		/** @property {string[]} restrictions Any re-use restrictions for the image, eg trademarked */
+		this.restrictions = restrictions;
+
 		/**
 		 * @property {Object} thumbUrls
 		 * An object indexed by image widths
@@ -156,7 +161,7 @@
 	Image.newFromImageInfo = function ( title, imageInfo ) {
 		var name, uploadDateTime, anonymizedUploadDateTime, creationDateTime, imageData,
 			description, source, author, authorCount, license, permission, attribution,
-			latitude, longitude,
+			latitude, longitude, restrictions,
 			innerInfo = imageInfo.imageinfo[0],
 			extmeta = innerInfo.extmetadata;
 
@@ -182,6 +187,7 @@
 			license = this.newLicenseFromImageInfo( extmeta );
 			permission = this.parseExtmeta( extmeta.Permission, 'string' );
 			attribution = this.parseExtmeta( extmeta.Attribution, 'string' );
+			restrictions = this.parseExtmeta( extmeta.Restrictions, 'list' );
 
 			latitude = this.parseExtmeta( extmeta.GPSLatitude, 'float' );
 			longitude = this.parseExtmeta( extmeta.GPSLongitude, 'float' );
@@ -214,7 +220,8 @@
 			permission,
 			attribution,
 			latitude,
-			longitude
+			longitude,
+			restrictions
 		);
 
 		if ( innerInfo.thumburl ) {

resources/mmv/provider/mmv.provider.ImageInfo.js

@@ -73,7 +73,8 @@
 		'Permission',
 		'Attribution',
 		'AttributionRequired',
-		'NonFree'
+		'NonFree',
+		'Restrictions'
 	].join('|');
 
 	/**

resources/mmv/ui/mmv.ui.metadataPanel.js

@@ -152,6 +152,7 @@
 		this.$license.empty().prop( 'href', '#' );
 		this.$licenseLi.addClass( 'empty' );
 		this.$permissionLink.hide();
+		this.$restrictions.children().hide();
 
 		this.$filename.empty();
 		this.$filenamePrefix.empty();
@@ -326,6 +327,20 @@
 				panel.trackLinkClick.call( this, 'license-page', e );
 			} );
 
+		this.$restrictions = $( '<span>' )
+			.appendTo( this.$licenseLi );
+
+		this.$restrictionTrademarked = $( '<span>' )
+			.addClass( 'mw-mmv-label mw-mmv-restriction-label' )
+			.html( '&#8482;' ) // trademark sign
+			.prop( 'title', mw.message( 'multimediaviewer-restriction-trademarked' ).text() )
+			.tipsy( {
+				delay: mw.config.get( 'wgMultimediaViewer' ).tooltipDelay,
+				gravity: this.correctEW( 'se' )
+			} )
+			.appendTo( this.$restrictions )
+			.hide();
+
 		this.$permissionLink = $( '<span>' )
 			.addClass( 'mw-mmv-permission-link mw-mmv-label' )
 			.text( mw.message( 'multimediaviewer-permission-link' ).text() )
@@ -644,6 +659,16 @@
 		this.permission.set( permission );
 	};
 
+	/**
+	 * Sets any special restrictions that should be displayed.
+	 * @param {string[]} restrictions Array of restrictions
+	 */
+	MPP.setRestrictions = function ( restrictions ) {
+		if ( restrictions.indexOf( 'trademarked' ) !== -1 ) {
+			this.$restrictionTrademarked.show();
+		}
+	};
+
 	/**
 	 * Sets location data in the interface.
 	 * @param {mw.mmv.model.Image} imageData
@@ -760,6 +785,10 @@
 			this.setPermission( imageData.permission );
 		}
 
+		if ( imageData.restrictions ) {
+			this.setRestrictions( imageData.restrictions );
+		}
+
 		this.setLocationData( imageData );
 
 		if ( user ) {

resources/mmv/ui/mmv.ui.metadataPanel.less

@@ -285,6 +285,13 @@
 
 }
 
+.mw-mmv-restriction-label {
+	&, &:hover {
+		background-color: #ffcc66;
+	}
+	cursor: default;
+}
+
 .mw-mmv-permission-link {
 	cursor: pointer;
 

tests/qunit/mmv/model/mmv.model.Image.test.js

@@ -18,7 +18,7 @@
 ( function( mw ) {
 	QUnit.module( 'mmv.model.Image', QUnit.newMwEnvironment() );
 
-	QUnit.test( 'Image model constructor sanity check', 23, function ( assert ) {
+	QUnit.test( 'Image model constructor sanity check', 24, function ( assert ) {
 		var
 			title = mw.Title.newFromText( 'File:Foobar.jpg' ),
 			name = 'Foo bar',
@@ -42,11 +42,12 @@
 			attribution = 'Created by my cats on a winter morning',
 			latitude = 39.12381283,
 			longitude = 100.983829,
+			restrictions = ['trademarked'],
 			imageData = new mw.mmv.model.Image(
 				title, name, size, width, height, mime, url,
 				descurl, repo, user, datetime, anondatetime, origdatetime,
 				description, source, author, authorCount, license, permission, attribution,
-				latitude, longitude );
+				latitude, longitude, restrictions );
 
 		assert.strictEqual( imageData.title, title, 'Title is set correctly' );
 		assert.strictEqual( imageData.name, name, 'Name is set correctly' );
@@ -70,6 +71,7 @@
 		assert.strictEqual( imageData.attribution, attribution, 'Attribution is set correctly' );
 		assert.strictEqual( imageData.latitude, latitude, 'Latitude is set correctly' );
 		assert.strictEqual( imageData.longitude, longitude, 'Longitude is set correctly' );
+		assert.deepEqual( imageData.restrictions, restrictions, 'Restrictions is set correctly' );
 		assert.ok( imageData.thumbUrls, 'Thumb URL cache is set up properly' );
 	} );
 

tests/qunit/mmv/provider/mmv.provider.ImageInfo.test.js

@@ -25,7 +25,7 @@
 		assert.ok( imageInfoProvider );
 	} );
 
-	QUnit.asyncTest( 'ImageInfo get test', 27, function ( assert ) {
+	QUnit.asyncTest( 'ImageInfo get test', 28, function ( assert ) {
 		var apiCallCount = 0,
 			api = { get: function() {
 				apiCallCount++;
@@ -116,6 +116,10 @@
 											NonFree: {
 												value: 'yes',
 												source: 'commons-desc-page'
+											},
+											Restrictions: {
+												value: 'trademarked|insignia',
+												source: 'commons-desc-page'
 											}
 										},
 										mime: 'image/jpeg',
@@ -157,6 +161,7 @@
 			assert.strictEqual( image.permission, 'Do not use. Ever.', 'permission is set correctly' );
 			assert.strictEqual( image.latitude, 90, 'latitude is set correctly' );
 			assert.strictEqual( image.longitude, 180, 'longitude is set correctly' );
+			assert.deepEqual( image.restrictions, ['trademarked', 'insignia'], 'restrictions is set correctly' );
 		} ).then( function() {
 			// call the data provider a second time to check caching
 			return imageInfoProvider.get( file );