On Flex, JavaScript and other animals

Saturday, November 19, 2016

While developing complex Angular 2 applications, many times we encounter multiple page components, each loading its own data. Instead of blocking the entire screen with a loading message until all the data is loaded, its better to implement this behavior in the component level. This way, each component blocks itself until its own data is loaded, allowing the user to interact with other components during that time.To achieve this behavior, I've created an attribute directive that can be attached to any component. It has 2 attributes:

The "loading" flag that should be set to true while data is loafing and false once data is loaded. This attribute is mandatory.

An optional loading message that replaces the default "Loading..." message.

Note: Since the "loading" directive needs to cover the entire component, its css layout is set to "absolute". That means that the DIV element the directive is attached to must have its layout set to "relative".See the demo below. The code can be viewed on Github.

Saturday, October 22, 2016

While working on a new Angular 2 project, we needed a checkbox tree that supports partial selection when only some children nodes are selected.As we've been using the open source PrimeNG UI components library, it was simple enough to add check-boxes to the PrimeNG tree component using its build-in template support.The more complicated task was to add the recursive logic required for setting parent selection on each node selection change.Feel free to explore the demo, fork the source code on Github and use it for your own projects.

Saturday, October 8, 2016

I'm currently working on the conversion of a huge Flex application to Angular 2. Flex uses text files containing key/value pairs for localization (i18n). In order to convert those to JSON, I've created a simple automating tool which allows dropping multiple text files and automatically converts the data to JSON.I've made this tool available online with some useful properties to control the JSON output structure. Feel free to give it a try:http://text2json.com

Tuesday, May 31, 2016

One of the holy grails of the online advertising industry, is the ability to automatically play video ads on mobile devices. Both Apple and Google prevent auto playback of video files on mobile devices running iOS and Android.There are few solutions for this issue, most of them rely on rendering an image sequences to a Canvas element.I've made some simple changes to my inline playback demo to enable auto playback of HTML5 videos on iOS. Sadly, this solution doesn't work on Android.The solution is very simple. The video starts muted, as required by the online advertisement industry. Clicking the video enables audio as well.On the iPhone, auto playback starts muted and inline. Clicking the video jumps to fullscreen playback with audio.

Tuesday, February 23, 2016

I've been playing with HTML5 audio API for a bit and came up with this video spectrum analyzer. It uses the Color Thief library to grab the frame colors at runtime and uses these colors to create the spectrum bar gradients.The spectrum itself is drawn onto an HTML5 Canvas and updated using the requestAnimationFrame API.See the demo below and feel free to explore the code on Github and the official demo page.This demo works best on Chrome and FireFox.

Sunday, January 31, 2016

CSS3 filters can be used on native HTML5 video objects as well as on images. I've recently created a little widget that opens an image adjustments menu on top of the playing video (thank you Muli Dayan for your help with this one!).

Monday, January 11, 2016

As iPhone users know, when viewing an online video on the iPhone, the video plays in full screen using the device native player.This presents a major limitation for advertisers since video ads are not clickable and overlay ads cannot be displayed. Any custom user interaction during video playback is not supported which prevents interactive videos and games.There are few approaches for a solution, and here is mine, which I hope you find helpful.Demo (open on an iPhone): http://amirch1.github.io/VideoInline/Github code under MIT license: https://github.com/amirch1/VideoInlineThe solution:

Create an Audio tag and give it the source of the Video tag. Audio tags support any video format (mp4, m3u8 HLS streams, live) and play inline.

Clicking the Play button triggers the Audio tag play() method. It also invokes the Video tag load() method which enables video seek operation.

A timed interval is set to sync the Video tag currentTime property to the Audio tag currentTime property. The time interval actually defines the playback frame rate enabling balance between quality and performances. It also updates the progress bar.

Seeking using the progress bar sets the Audio tag currentTime value. The Video tag updates accordingly by the timer refresh.

Thats it!

Rather simple, provides real audio sync and supports all video formats including mp4, HLS and live streams.

Can be easily enhanced to support fullscreen playback without loosing interactivity and additional video controls.

Feel free to play with the code, submit pull requests and star the Github repository :)

About Me

I've been developing Internet and rich-media application for 15 years.
In my work I emphasis usability and best user experience as well as sleek design.
My main expertise are JavaScript, Flex and Flash.