Reading/Multimedia/Media Viewer



Here are our project hub for the Media Viewer, a new tool under development by the Wikimedia Foundation's new multimedia team. For a quick overview of this project, visit 'About Media Viewer'.

Media Viewer aims to improve the multimedia viewing experience. Please let us know what you think of this program on this discussion page.

Goals




Purpose
The purpose of this tool is to:
 * Provide a richer multimedia experience, to match user expectations
 * Display images in larger size, on the same page as the thumbnail you click on
 * Reduce confusion when users click on thumbnails (bypass duplicate file info page on Wikipedias)
 * (future versions) Offer more tools for users to take action (e.g. feedback, add a category or use this file)

It aims to serve all users of Wikipedia, Commons and other MediaWiki sites (including new users, as well as very active editors).

Note that this media viewer would initially only be for still images, as we are now using the Kaltura video player for audio and video. But over time, we would like to use the same UI across players, and eventually use a single viewer for all file formats.

Minimum Viable Product
Goals for our first minimum viable product include:
 * Show images in larger, media viewer panel when you click on them
 * Modal panel opens up as overlay (on same page where you clicked)
 * Large image appears without clutter (lightbox view)
 * Information about the image can be accessed easily (in lightbox view)
 * Image can be shown in full-screen mode (full screen view)

Features for the minimum viable product include:
 * Views
 * Lightbox view
 * Full screen view
 * Tools
 * Full screen button
 * Lightbox button
 * Close button
 * Info
 * File name
 * Author
 * Source
 * Description
 * License Info
 * Site name
 * Uploader
 * Date
 * Location
 * Categories

Workflow
The thumbnails to the right show the reader workflow we are looking to support:
 * Overview of reader workflows (shown above for reference)
 * Proposed workflow for viewing images with Media Viewer

Lightbox View


The 'lightbox view' for this tool will shows a large image in a white lightbox that extends across the browser window, as well as tools and information in three tiers, as proposed below.

Image
The image should be shown in larger size, as an overlay over the page where the user clicked on the thumbnail, against a white, slightly translucent background. The intent is to make the image stand out and remove some of the visual clutter typically found on a text-heavy page. The image should be shown at the highest possible size and resolution for the user's current screen and browser.

In the image view, the browser window will be lightened up to hide its contents, but not the entire screen (unlike the Full-screen view where the entire screen will be darkened).

Tools
For the first release, we are looking to provide these simple tools:
 * Close button (goes back to article view)
 * Full screen button (expands into full-screen view)
 * Lightbox button (returns to smaller image in browser lightbox)

In future releases, we are looking to provide more tool and features, based on feasibility and desirability (see archive page of other features discussed so far).

Primary Info
Here are the most important information fields that need to be shown prominently near the image, as requested by our community (see mockup):

1. Above image
 * File name (Zonotrichia atricapilla)
 * Author (e.g. Alejandro Erickson)
 * Source (e.g. Bird Institute)
 * License Info (e.g. CC-BY-SA-2.0) (or link to license info, if hard to parse in the first release)

2. Below image
 * Site name and link (e.g. Wikimedia Commons, with logo icon and explicit link to the file info page)
 * Description (3 lines or so, with 'more' button if needed)
 * Uploader name (e.g. Smallbones) (note current mockups incorrectly show this above the image)
 * Creation Date (e.g. 12 April, 2012)

The mockup to the right shows how this important information could be presented to the user, to minimize clutter near the image, but still keep important information as prominent as possible.

Secondary Info
Here is the next tier of additional information fields that can be shown below the primary information (with a smaller font):


 * Location (e.g. place name and/or geotag coordinates, if any)
 * Categories (e.g. Birds of British Columbia, Zonotrichia atricapilla … more> )
 * File usage (e.g. 'This file is being used by 5 other pages. ')
 * Assessment credit (e.g. 'This file was a  on Wikipedia')
 * File format / size (e.g. JPEG, 4928 x 3264 px (more), 3.8 Mb)
 * Tool used for upload (e.g. 'Via Flickr')

Full-screen View
The 'full-screen view' for this tool will shows a large image across the entire screen, with minimal information and buttons available on hover, as proposed below.

This is the view that lets you focus exclusively on the image, with no other distractions.

Full image
When you click on the full screen icon, you would see the largest version of the image that fits within the user's screen. The image would be displayed across the entire screen (not just the browser window), set against a pure white background color that only shows the image (instead of a translucent background that reveals the page below).

Information
You would see the file name and the author/source/license below the image, as well as link to Commons.

Note that we would never make that info overlap the image, even in full screen, because it could obscure important map or diagram labels; so we may want to consider a black section at the bottom of the screen for that information, as proposed in the full screen mockup below.

If desired by users, it may be possible to include more information below the image, available by scrolling down. But to reduce clutter, that info would only need to appear when they hover over the bottom of the screen.

First Release
Our goal is to release a first barebones beta version of Media Viewer by the end of October, with at least a couple features to start with, but not all of the features listed above.

It will be released as part of Beta Features, a new experimental program under development, which will enable users to opt-in to test new beta features before they are released widely.

Schedule
Here are our target dates for the first release:
 * Oct. 31 - Release to MediaWiki.org and test.wiki (+ publish blog post)
 * Nov. 1 - Pre-announce Beta Features and Media Viewer on all wikis (with community team)
 * Nov. 4 - Release to sister projects (non-Wikipedia, e.g. Commons)
 * Nov. 7 - Release to all Wikipedias

The current goal is to try to ride the platform train, if possible -- so most dates above are Thursdays. However, special deploy windows may be needed along the way.

We may adjust this schedule as needed, based on our progress with deliverables, and subject to team review.

File Formats
In the first release, the Media Viewer will only support the most widely used image file formats (e.g.: JPEG, GIF, PNG). In subsequent releases, we will gradually add support for other file formats (e.g.: PDF, TIFF, SVG). In future releases in 2014, we will add audio and video file formats.

Namespaces
For the first release, the Media Viewer will work when users click on thumbnails in the article namespace. In subsequent releases, we plan to also enable Media Viewer in galleries and category pages.

Tasks
Here are some of the development tasks we are working on for the first release of the Media Viewer. They are listed in order of priority. We expect that only the first half of these tasks will be included in the first release, though we plan to keep adding more features in subsequent releases.

First Release
We are aiming to complete these tasks for the first release by the end of October, 2013.

As a developer, I want to get the CommonsMetaData extension to work, so that I can implement key features of Media Viewer. (See Mingle ticket #37)
 * Get CommonsMetaData API to work

As a developer, I want to improve the CommonsMetaData extension, so that I can implement more key features of Media Viewer. (See Mingle ticket #48)
 * Improve CommonsMetaData Extension

As a user, I want to see the file's title, so I can know what it's about. (See Mingle ticket #31)
 * Show Title

As a user, I want to know the site where the file is hosted, so I can view its file info page and edit it as needed. (See Mingle ticket #30)
 * Show Site Name

As a user, I want to read the author and/or source for this file, so that I can know how it was created. (See Mingle ticket #40)
 * Show Author and Source

As a user, I want to see the license info about this file, so that I know its sharing status. (See Mingle ticket #34)
 * Show License Info

As a user, I want to know who uploaded this file, so that I can learn about them -- or contact them. (See Mingle ticket #32)
 * Show Uploader Name

As a user, I want to read the description for this file, so that I can learn more about it. (See Mingle ticket #33)
 * Show Description

As a user, I want to see the date of this file, so I can know when it was created (or uploaded). (See Mingle ticket #47)
 * Show Date

As a user, I can only view JPEG, GIF and PNG files, so that things don't break when I try to view other file formats that may not work yet. (See Mingle ticket #56)
 * Restrict File Format to JPEG, GIF and PNG'

As a user, I can click on thumbnails in galleries and category pages, so that I can view larger images on these pages. (See Mingle ticket #57).
 * Support Galleries and Category Pages

As a manager or community member, I can collect descriptive usage data for the Media Viewer, so that I can learn how it is being used. (See Mingle ticket #53).
 * Collect Usage Metrics

Next Releases
We are aiming to complete these other tasks in subsequent releases in November 2013.

As a user, I want to see location information for this file, if any, so that I can know where it was created. (See Mingle ticket #42)
 * Show Location

As a user, I want to see category names for this file, so that I can see more related files, as well as curate this file. (See Mingle ticket #41)
 * Show Categories

As a user, I want to know if this file was included in other articles, so that I can see how it was used. (See Mingle ticket #44)
 * Show File Usage

As a user, I want to know if this file was assessed, featured and/or rated, so that I can evaluate its quality. (See Mingle ticket #45)
 * Show Assessed Files

As a manager or community member, I can view a metrics dashboard of usage data for the Media Viewer, so that I can learn how it is being used. (See Mingle ticket #54).
 * Show Metrics Dashboard

As a user, I prefer short names for my extensions, so that they don't take up too much space. (See Mingle ticket #46)
 * Rename 'Multimedia Viewer' to 'Media Viewer'

As a user, I want to see at a glance where the site where the file is hosted, so I can view its file info page and edit it as needed. (See Mingle ticket #39)
 * Show Site Icon

More tasks may be added here, as needed -- as well as on our Multimedia team's Mingle project management site.

Wishlist for version 2.0
For the next version in winter 2013, we are considering these features:
 * Integrate more image file formats in the Media Viewer
 * Next/previous arrows (step through related files in same gallery/category)
 * Related files button (show thumbnails of files in same gallery/category)
 * Discussion button (goes to Commons talk page)
 * Edit button? (goes to Commons edit page)
 * Add Category button (for adding categories for this file on Commons)
 * Slideshow mode (very simple slideshow mode initially, no music, just images)

Wishlist for future versions
For future releases in 2014, we are considering these features:
 * Integrate audio/visual file formats in the Media Viewer
 * Thanks (send notification to uploader to show appreciation, through notifications)
 * Flag (reports this file as inappropriate on Commons)
 * Tag (tag this file with a new category, geolocation or intersecting tags)
 * Add (insert this file in an article, or into a gallery)
 * Share (share this file on FB, TW and other networks)

These tools would help users take action on the media they are viewing. For example, a user might want to add a file to their watchlist, or thank the person who uploaded the file, flag a file as inappropriate, tag it with a new category, add this file to an article or share it on social networks, etc. These tools could be offered in a toolbar above or below the image, with a few icons for tools such as Watch, Thank, Flag, Tag, Add, or Share.

Some of these tools would require modal displays of user options when you click on them, so it might also be worth it to think of the default 'Info' view as the first tab in the toolbar, which could be replaced by a different view if you click on another tool. For example, clicking on 'Tag' could display a couple text fields, one for categories, another for geo coordinates, and eventually one for intersecting tags.

Although we will not be able to implement these tools in the first release, we would like to develop some of them incrementally in the coming year. So it makes sense for us to start a design exploration of where these tools would appear in the Media Viewer, and take that in account in our first design, so we don't have to redesign everything from scratch when we are ready to start adding these tools in coming months.

Code
] Our work in progress can be viewed on this alpha site, where it is ready for preliminary testing (see also thumbnail to the right -- and Gerrit 78341). (You'll need to create a test-account to log-in and use the Beta Features preference.)

The code for Media Viewer is made possible by two separate extensions:
 * Multimedia Viewer Extension - the front-end extension that displays media files and information
 * Commons Meta Data - the back-end API that serves information to the Media Viewer

Mockups
Here are larger versions of the latest mockups from our design team, for discussion purposes.

Full-screen View


See earlier mockups on this MediaWiki see archive page of features discussed so far -- as well as first mockups on this draft page.