UI Specification
Invoking The Editor
Descriptions
| ID | Cost | Title | Story |
|---|---|---|---|
| [1] | Invoking the metadata editor | User is able to invoke the metadata editor by:
The editor should be displayed as a modal dialog PENDING: OS-specific shortcut key combinations |
Editor Dialog
Descriptions
| ID | Cost | Title | Story |
|---|---|---|---|
| [2] | Extensible tabs for navigation | The user is able to switch between metadata editor panes using tabs. The default tabs that are shipped by default are:
Add-on developers are able to easily add new or replace panes and tabs that navigate to them. | |
| [3] | Previous/Next buttons for viewing/editing metadata for other media items in the media list | User is able to click on the [<] button to view/edit metadata for the previous media item in the media list. If the first item in the list is selected then the button should be disabled. User is able to click on the [>] button to view/edit metadata for the next media item in the media list. If the last item in the list is selected then the button should be disabled. The selection in the media list should update as the user clicks next/previous. Visual Design:Need icons for next/previous buttons. The icons need to support enabled/disabled/hover/active states. | |
| [4] | "Summary" pane that displays a read-only view of properties | There are 3 media types - audio, streaming audio, and video. Songbird should detect a different set of metadata for each type and display it using layouts that are designed for each type. If the value for a property is NULL then the label for that property should be hidden - as if it was never there. The exception for this rule is for "Last Played". If "Last Played" is NULL then "Never" should be the displayed value for it. TODO: Link to Daniel's spec for the exact metadata that should be shown for each media type. Fields that display location information such as "Origin Page", "URL", and "File Location" should be accompanied by a button that when clicked will display the content for that location. Visual Design: Need icons for the "Goto" button. The icons need enabled/hover/active states. | |
| [5] | "Info" pane for viewing/editing basic media item metadata and artwork | Pane for viewing/editing:
| |
| [6] | "Sort Values" pane for viewing/editing property values to be used for sorting | Pane for viewing/editing:
| |
| [7] | "Lyrics" pane for viewing/editing a large string of text, most likely lyrics | A single textarea that allows for freeform text to be viewed/edited. | |
| [8] | Commit values when [<], [>], or [OK] is clicked | Any changes made to the metadata for the media items should be committed when one of the following is clicked:
| |
| [9] | Read-only mode for all metadata editor panes | The editor should be set to read-only mode if the selected media item is:
Visual Design:Style for read-only fields. | |
| [10] | Batch edit mode for metadata editor panes | When multiple media items are selected when the editor is invoked then the editor enters batch edit mode. The tab for "Summary" should be disabled. When in batch edit mode then the default tab/pane selected should be "Info". The number of media items selected should be displayed to communicate the mode the editor is in to the user. If at least one of the media items require the editor to be in read-only mode then that should be communicated in the notification but the editor should still be in editable mode. If all media items selected require the editor to be in read-only mode then the editor should be in read-only mode. Every metadata input field should be updated to adhere to the specifications for batch editing. | |
| [11] | Autocomplete for all text fields | This functionality applies only for text fields - not applicable for rating, comments, artwork, lyrics, part of complication When the user types a char (or two?) in the text field then the a list of suggestions that start with that char should be displayed. The list of suggestions should be scoped to existing values for that specific property that is being edited. | |
| [12] | Length and type restrictions for all fields | All input fields should allow for a specific length and type of chars to be entered - eg: BRM should be length=3, type=int. If the user tries to enter more chars than allowed or tries to enter illegal chars then take no action. TODO: Link to Daniel's spec for the exact length and type for each property. | |
| [13] | Visual cue for when a field contains values that are different than that committed | The feather should be able to style the field or text label if it contains values that are different than that in the file/db. Visual Design:Style to communicate the "edited" state. | |
| [14] | Self-contained form widgets for developers | Add-on developers should be able to add fields to the editor easily. All logic for single/batch edit mode, length/type restrictions, autocomplete, form type, visual cues for states should be built in to the widget. We should use these widgets ourselves to build the default editor panes. |
Genre Widget
Descriptions
</td> </tr>| ID | Cost | Title | Story |
|---|---|---|---|
| [15] | Genre drop down is populated with a pre-defined list of values | Pre-defined values are always displayed, even if no media item in the user's main Library has it set as a value for the property. TODO: Link to Daniel's spec for the exact list of genres. | |
| [16] | Genre drop down contains all genres that exist in the Library | The values available for genre is defined by the combination of pre-defined values and existing values for genre found in the user's main Library. | |
| [17] | User is able to create custom genres by typing in the field | The user is able to ignore all auto suggestions and type in a new genre in the field. Once committed, the genre is added to the drop down list and is selectable by the user. Custom values should be cropped at 32 characters when displayed in the drop down with "..." appended at the end of the string. | |
| [18] | User is able to set no value for genre | User is able to commit NULL for genre by:
If the user types in "None" then that is should be treated as a genre. |
Artwork Widget
Descriptions
| ID | Cost | Title | Story |
|---|---|---|---|
| [19] | Image in the clipboard can be set as artwork | User is able to use shortcut keys or contextual menus to paste image data into the artwork widget to set as artwork for the media item. | |
| [20] | Image somewhere in the file system can be set as artwork | User is able to browse their local drive for an image that becomes the artwork associated with the media item when selected. | |
| [21] | Artwork can be removed | User is able to remove the artwork associated with the media item using key inputs or the contextual menu. |
Batch Editing Flow
Descriptions
| ID | Cost | Title | Story |
|---|---|---|---|
| [22] | UI control to enable/revert editing | The user is able to enable edit mode for a field-by-field basis by checking the checkbox associated with the field. Unchecking the field should revert the value in the field to its default. All fields should be not-editable by default. When the field is not in enabled mode then it should be disabled and styled as such. | |
| [23] | Populate field if all selected media items have the same value for that property | If all selected media items have the same value for a given property then populate the field that corresponds to that property - else make it empty. |
Sort Value Edit Flow
Descriptions
| ID | Cost | Title | Story |
|---|---|---|---|
| [24] | Populate sort value field with what Songbird uses, if different than non-sort value | For example, if "The Beatles" then sort value is "Beatles" so the sort artist text field should be populated with "Beatles" all the time - except when the user populates it with something else and length > 0. Upon focus, the field should become empty. See Metadata Sorting rules for details. |
Dialogs
Descriptions
| ID | Cost | Title | Story |
|---|---|---|---|
| [25] | Confirmation for when the editor is invoked while multiple media items are selected | What the summary says. "Ask me every time" should be a property that can be toggled in about:config. We need a "Reset warning messages" button somewhere in the preferences but that is another story. | |
| [26] | Display progress for when metadata is being committed | When the user commits a batch edit then the editor dialog should close and be replaced with the "Writing Metadata" dialog.
|
Key Value Metadata Editor (Developer Extension)
Descriptions
| ID | Cost | Title | Story |
|---|---|---|---|
| [27] | Enhance Developer Extension to add a metadata editor pane | This is a metadata editor that displays properties and values in a VB-like table. Users should be able to sort by attribute and edit the values inline. Exact requirements for this is fuzzy. When a single media item is selected then all possible keys should be displayed with values filled in where available. When multiple media items are selected then all possible keys should be displayed with values filled in only if all the selected media items share them. This should be an example of how an external developer should create their own metadata editor pane. |
Additional Engineering Notes
Questions
- No modal "Writing Metadata" dialog needed? Can we assume that the metadata writer will watch the library for property changes and write them out in the background?
- Do we have bit rate, sample rate, and media type, etc? Are we going to be able to get this?
- Are we correctly tracking last played time and playcount?
- Do we track "downloaded on" date?
- Do we know the difference between streaming audio and regular audio?
- Will our dialog be modal like ITunes, or should it work like the existing editor (in that you can change the selection and retarget it while the dialog is open).
- What happens if the user modifies the sort value, then later modifies the real value? Does the custom sort value get removed?
- Should we use XUL templating for the Summary and K:V editor? A template datasource for media items could be useful in media pages and other areas of the app.
- Should the summary page indicate write-back status / failure messages?
Tasks
Off the top of my head, yet to be reviewed by other engineers. Listed vaguely in completion order. Grey items could easily be left out.
~20 points for a minimal implementation.
~35 points for the complete specification.
Initial Setup
- [1] Modify/clean up existing "Launch Metadata Editor" code
- [2] Create extremely basic first pass key:value editor window. The idea is to have something vaguely usable in place so that the metadata writing team isn't blocked. Should only support editing the first selected item and OK/Cancel behavior.
Metadata Window
- [2] Update the metadata editor window container with Tab Deck, OK,Cancel, Forward, Back, and controller code. I imagine this would work much like the Prefs window code, minus the dynamic overlay loading.
- [2] Set up controller to monitor the current media page and selection, and show the hat when in multiple selection mode.
Summary Pane
- [2] Create generic media item XUL template datasource .
- [1] Initial pass / low hanging fruit. Set up available metadata and get it looking half decent.
- [1] Display remaining metadata once available. Hook up links and other actions.
Info Editor Pane
- [2] Property editor widget base and simple textbox implementation
- [1] Rating widget
- [1] Create M of N widget for track number, etc.
- [2] Create genre widget and datasource
- [1] Add verification capability to the editor widgets
- [1] Add auto-disable and multi-edit checkbox functionality to edit widgets
- [2] Info pane layout and styling
- [3] Create property driven autocomplete datasource, create unit tests, attach to property editor widget.
- [3] Artwork display/setup widget
- [2] Update the artwork widget to support pasting bitmaps from the clipboard?
Sort Value Pane
- [1] Create pane and layout.
- [1] Set up sort value editing boxes & pane controller logic.
Lyrics
- [1] Create lyrics pane and use multiline text property widget to display the content.
Polished the Key:Value editor
- [3] Update the key:value editor to include sorting, validation, column selection, etc.
Tasks In Phases
Phase 1/2 - the essentials [10*]
Note: this is not ten days of work.
This phase contains the bare minimum required and is a must for 0.6 release.
- [2/1] - autocomplete datasource for a generic property + special data source/chooser for genre
- [2] - rating widget in XBL
- [1] hook up keyboard shortcuts
- [1] menu shortcuts (edit/playlist command)
- [1] localize (save for last)
- [1] add new props: Album Artist, Part of Compliation and BPM
http://www.macosxhints.com/article.php?story=200609140956019 <-- details about iTunes use
- [1] timeout considered "onchange" in textbox
Phase 2: UE Polish & Album Art [11]
- [2] maintain current selection when there is no media list for copying info/art from web pages
- [1] re-highlight most recent edit widget when navigation back/forward with keyboard (i.e. refocus track number if it was focused before Ctrl-N)
- [1] <return> commits values and(?) goes to next track
- [2] drag/drop URL onto artwork
- [1] browse to new artwork
- [1] focus on click/paste artwork URL
- [1] show a no-art-available standin image
- [2?] paste/drop bitmaps
Notes
Komi 02:06, 6 March 2008 (PST) Updated wireframes and added UI-specific stories.
Komi 10:18, 7 March 2008 (PST) Matt created a fuzzy task list + cost.
Komi 17:24, 13 March 2008 (PDT) Updated doc with options for scope while communicating perception of completeness.
