acmertz / eo1 Goto Github PK

Enable seeking by clicking any location in the Timeline ruler.

• Formats:
  • MP4 (H.264)
  • AVI (uncompressed)
  • WMV (Windows)
• Rendering should be performed in a background thread and continue even when the user switches away from Ensemble of One.
• Audio and video rendering may be performed in parallel and then muxed together as bytes become available.
• If a project load is triggered from outside the application while rendering is taking place (usually via a .eo1 file in File Explorer), prompt the user for whether or not to cancel the export.

Create an animation to smoothly transition the scrolling position of the Timeline tracks.

Split clips at the current playback time, preserving all properties except for unique ID.

Ensemble of One currently uses a myriad of styles for dialogs and other user interaction, ranging from the "film strip" flyouts of the main menu to the 3D "ticker" and settings dialogs, to the fly-in video preview window of the Editor. Some UI elements use standard WinJS animations (projects in the "Open Project" list use WinJS animation when clicking/releasing), others use custom animations outright (pretty much all dialogs callable on the Main Menu), and some do not animate at all (confirmation buttons in the "New Project" and "Open Project" dialogs, as well as the menu bar "tabs" in the Editor). There is no coherence in the UI as it currently stands.

Devise a set of standard styles (position, appearance, borders, transparency/blur, background color/image, font sizes, padding/margin) and animations (fade, translate, 3D) to use across UI elements. Establish a core set of guidelines for how dialogs and user interactions should be presented and animated.

Items to address

• Overall theme of the application
  • Flat design or skeuomorphism?
  • Musical or film/theater?
    • A musical theme would use musical glyphs such as clefs and staves to establish a target demographic and emphasize the coordination and timing features of the Editor. In such a case, we could name versions of Ensemble of One after musical terminology; for instance, release 1.0 could be Ensemble of One "Allegro," 1.1 "Accelerando, 1.2 "Vivace," and so forth.
    • A theatrical theme would emphasize Ensemble of One's purpose as a video editor and could help establish its goals for ease of use above standard desktop-style application design. It helps make clear the fact that this is a video editor for anyone but might make it harder to brand (after all, it will be only the latest in a long line of video editing software over the years).
• UI Dialogs
  • Create several categories of UI dialogs for different purposes.
  • Write up guidelines detailing when it's appropriate to use a dialog rather than let Ensemble of One make an educated guess as to the user's intention (for instance, while the user drags clips around the timeline, the clip automatically resolves collisions with other clips by "snapping" to the nearest valid location when there's an overlap).
  • Determine valid use cases for system dialogs (styled and controlled by the host OS) versus in-house dialogs (potentially more useful for interactions that require more input from the user than can be obtained in a standard OS dialog).
• Typography
  • Create header hierarchy for HTML elements H1-H6 and document the use case for each.
  • Determine an appropriate font family for use across Ensemble of One. Something sans-serif would probably be most appropriate: perhaps we could find some royalty-free fonts online.
  • Define standard font sizes and styles (bold, italic, normal) and color (black, or close to it?) for UI commands, paragraph text, and contextual dialogs (such as tooltips and flyouts).
• Sizing and spacing
  • Establish a standard grid to use when building UI elements and determine which elements would work the best at which sizes.
  • Grid should be responsively designed (adaptable to multiple screen size), so general proportions are more important than exact pixel dimensions.
  • How much margin should there be between UI elements? I've increasingly found 10px (logical PX, as laid out in the browser) to work well, but certain edge cases may apply.
  • How much padding should occur within elements? In a dialog, for instance, this would be the amount of space between the dialog's content and its exterior border. Once again, I've found 10px to work well but some edge cases may require altered dimensions.

• Synchronize microphone and camera capture sessions with project playback.
• Optionally, specify a "cue" mark to automatically start media capture when playback reaches a certain point.

Testing on Surface 3 with Windows 10 (build 10074) has demonstrated very low frame rates in the Renderer (Ensemble.Editor.Renderer). Not sure if this is due to Build 10074 running on an older version of the Edge HTML rendering engine, or just an issue of power. Either way, performance was smooth before updating the codebase from Windows 8.1 to Windows 10.

This issue may resolve itself as Windows 10 approaches RTM and the Edge engine becomes better optimized.

Compile the FFmpeg library for x86, x64, and ARM and leverage it to enable the playback of additional file formats and media types not natively supported by Windows.

Drag and drop clips from the Media Browser into the timeline. Media Browser thumbnail turns into a standard timeline "ghost" when dragged over the timeline and snaps to valid free slots.

Trim time from the start and end of clips in the timeline. This feature must be history-compliant.

• Sort JS files based on purpose and refactor any affected references to the Ensemble namespace.
• Evaluate platform-dependent namespaces (Ensemble.FileIO, Ensemble.Settings, etc.) for conversion viability. Multi-platform options include:
  • Continue using switch statements to execute the correct FileIO sequence based on the current host OS.
  • Remove platform-based switch statements and assume full native; rewrite platform-dependent namespaces in their entirety based on the needs of each platform.

Add a user setting for adjusting the default height of tracks in the timeline. Perhaps make it a 3-position toggle: small, medium, and large.

The Timeline selection callout currently only displays when the user selects a clip via the Timeline (selecting the same clip by clicking on its image in the Canvas will not display the Timeline selection callout). Update Ensemble.Editor.SelectionMGR to trigger the selection callout when any clip is selected.

Similar to #67.

Timeline selection callout:

Import clips via the host OS's built-in file picker.

Seeking back to the beginning of the project when playback was previously paused in any time segment other than the first causes the wrong clips to play and render until such a point where the user seeks the project to a non-zero time.

Upgrade development environment to Windows 10 and redeploy Ensemble of One as a Universal Windows App.

Create an animation that smoothly animates the creation of a track. Consider using WinJS's "add to list" animation to ease development: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br212653.aspx

The Timeline selection callout appears when the user selects a clip via its object in the Timeline. It can be used by touch and pen users to move and edit the clip. However, the selection callout fails to dismiss if the user clears the selected clip by clicking an empty space in the Canvas. Attempting to drag the selection callout when no clips are selected will result in an application crash.

Similar to #68.

Timeline selection callout:

Store a thumbnail of the project on every save operation. Bind the Editor menu thumbnail to the image so it always stays up-to-date in the UI.

Make the dialog windows and user interaction more consistent with each other. Let's go for a "film strip" or theater look and feel: dialogs slide in from the edge of the screen and cover most (but not all) of the app canvas.

Remove unneeded dialog styles from CSS (prevent style bloat).

Dialogs must integrate properly with the KeyboardMGR. Pressing "Escape" on the keyboard should dismiss a dialog, all keyboard shortcuts not relevant to the dialog should be disabled until the dialog is closed (it would be confusing to the user if "Ctrl + Z" still worked on a clip in the timeline, for example, even when the settings dialog was open).

• Only require a name when creating a project
• Projects are created in Ensemble of One's AppData folder, but the user can choose to "Save as" and save the project in a different location
• An AppData project that is saved in this manner will be removed from the AppData folder
• Choosing "Save as" for a project in any other location will effectively create a duplicate

• Export audio to the following formats:
  • WAV
  • MP3
  • WMA
  • AAC
  • FLAK (depending on Windows 10 support)
• Rendering should be performed in a background thread and continue even when the user switches away from Ensemble of One.
• If a project load is triggered from outside the application while rendering is taking place (usually via a .eo1 file in File Explorer), prompt the user for whether or not to cancel the export.

When the user chooses to exit the Editor by clicking the "Close project" button, the Navigation history is not cleared (but should be). Then, when the user tries to push the system "Back" button, the application may enter an inescapable state.

Project thumbnails are currently stored in a separate file from the project data, itself (for instance, "My Great Project.eo1" would have a thumbnail stored as "My Great Project.eo1.jpg"). Modify the save/load chain to store the thumbnail as Base64-encoded data within the .eo1 project file.

User can choose from a list of premade transition animations for clips.

Capture media from an attached microphone or camera and import it directly into the project. Media capture must have the following characteristics:

• Media is captured to a separate, temporary track. The Capture track is not included in the TimelineMGR's list of tracks and exists only as a placeholder destination for captured media.
• Each capture creates an additional temporary track. The temporary "Capture" tracks are promoted to "real" tracks when the entire session is completed.
• Camera preview appears in a separate container from the main canvas and includes controls for resolution, FPS, etc.

To do:

• Sleep/standby prevented during preview and capture
• Listen for recording limit exceeded event ("recordlimitationexceeded")
• Listen for "failed" event
• Enable switching cameras during preview
• Release camera resources on project unload

Update canvas interaction to be more accessible to touch users:

• Display "handles" on clip edges
• Touch targets should be double what they are for mouse (for resizing corners and edges)

Overhaul the design and layout of the main menu. The current menu design has a lot of empty space and doesn't take very good advantage of screen real estate. A new design should take into account both desktop and touch platforms and be responsively designed so it translates well to different screen sizes.

The new design should incorporate the following elements:

• "New Project" button and dialog
• "Open Project" button and dialog
• Means to call up the global settings dialog
• Ensemble of One version number badge and/or news ticker

The new Main Menu should follow the look and feel established in the Ensemble of One style guide (#28).

Create an animation that smoothly animates the removal of a track from the timeline. Consider using the WinJS "delete from list" animation to ease development: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br212656.aspx

Update Ensemble.Pages.Editor to better handle window resize operations. As it currently functions, the application lags visibly when the user resizes its window due to firing too many resize events.

Audio clips should function identically to video clips, but should be excluded from the rendering chain.

Import clips to the timeline by browsing, previewing, or dragging and dropping.

Expands the number of animatable properties and adds multiple presets. Users can use mouse, touch, or pen input to draw a movement pattern for animations or use a wizard to set up and preview animations. Animations can be shared for free within Ensemble of One and are stored on a web server authenticated by the user's Microsoft Account.

Moving a clip in the timeline causes FileIO to generate invalid XML due to a forgotten end tag.

Add basic color effects ("Lenses") to the Editor. A lens effect lives in the Timeline with all other clips and may be used to manipulate the coloration of the playback canvas.

Devise an animation that smoothly transitions a Timeline track from one position to another.
A WinJS reposition animation might suffice: https://msdn.microsoft.com/en-us/library/windows/apps/br212660.aspx
Note that the page linked above is partially incorrect at the time of this writing. It has some correct information, but the sample code is copied from the "add to list" animation.

When the user drags the playback cursor in the Timeline, a small dialog is supposed to appear and indicate the current time of the drag position. This indicator is missing or misplaced, and needs to be realigned to a visible location.

• Trim clips directly via the Timeline whenever they are selected, remove "Trim" button from the Toolbar
• "Trim" grippers respond to changes in zoom level
• "Trim" grippers respond to History events
• Delete clips via the context menu, remove "Delete" button from the Toolbar
• Right-clicking a clip triggers a context menu for mouse users.
• Disable Timeline callout on mouse selection (callout should only be displayed to pen and touch users)

• Image files function similarly to video files.
• Default to 10 seconds in length (user-configurable in settings?)
• No restrictions on duration (can be as long or short as the user wants)

When resizing a clip from the bottom left or bottom right corner, the clip being resized will not "stick" to the edges of other clips if neither corner of the clip being resized intersects with the clip to which the user is trying to stick it.

Update all clickeaters in the application to use the BEM-compliant naming convention introduced with the system back navigation:

<div class="ensemble-clickeater ensemble-clickeater--page-or-purpose-here"></div>

Optionally, include ensemble-clickeater--backnav as part of the class name to enable system back navigation upon clicking the clickeater (make sure to push a new "back" state to Ensemble.Navigation before showing such a clickeater: failing to push a new "back" state may result in unexpected behavior when the user clicks the clickeater).

• Move and resize clips in the playback canvas
• Resize/move operations can be undone/redone

• Test application functionality on a touch-only device.
• Create an Issue for any feature that works on desktop but fails on touch.
• Take note of any features that work but are unwieldy on touch-based devices. Potential danger zones: list interaction and drag-and-drop functionality.

• Sort styles into multiple CSS files based on purpose location in the app.
• Remove unused styles.
• Convert existing styles to BEM.

The Action object represents a single, undoable/redoable user interaction within the application. Undo/redo history is saved with the project and retrieved upon project load, using the Ensemble.FileIO namespace for platform independence.

Instances of Action currently only store just enough information to function (undo/redo, and otherwise perform the action). Alter the Action class to track, save, and retrieve the time it was last performed. A separate GitHub issue will request the creation of a centralized logging system at a future date.

• Move clips forward and backward in the timeline
  • Click and drag directly on clip with mouse or pen
  • Use clip selection callout to drag clip left or right with touch
• Move clips from layer to layer
  • Click and drag directly on clip with mouse or pen
  • Use clip selection callout to drag clip left or right with touch

• Clips stick to canvas edges
• Clips stick to each other
• Stickiness for all modes is controlled via a single variable and should be user-customizable via the settings menu

Update Timeline clip code so that a thumbnail is displayed for each clip, replacing the current "gray box" placeholder.

Taking advantage of new APIs available under Windows 10, update the clip importing code in Ensemble.Editor.TimelineMGR, Ensemble.Editor.Renderer, and Ensemble.Pages.Editor to enable the dropping of files dragged from outside the application.

Users should be able to drag any supported media file into Ensemble of One, as long as the Editor is active. Once the mouse cursor enters the application, the UI should enter the same state as if the user had started a drag operation from the Media Browser.