Syncing 2 videos playback

This little experiment explores how to sync playback of 2 online videos using the following logic:

• Primary video used for audio (secondary video is muted)
• Combined play / pause / progress / seek events
• Offset threshold for synching by slowing down or speeding up the secondary video (default = 0.2 sec)
• Offset threshold for synching by seeking the secondary video to the primary video time (default = 2 sec)

Demo 1 - Click link to view

Happy - Pharrell Williams

Demo 2 - Click link to view

More and More - Captain Hollywood Project

Code is available on Github.

Angular Scroll-to-top component

I've recently created a small component providing a scroll-to-top functionality for any Angular 4 app. You can add it to your project and style it according to your needs.

The component provides 2 API attributes:

scrollOffset:

The amount of page scroll offset (from the top) in pixels after witch the component is shown. Default value is 0.

scrollDuration:

The scroll animation duration (ms). Default value is 500.

---

Code is available on Github.

Demo:

PrimeNG Datatable Sticky Header

A directive providing sticky mode for PrimeNG data table.

I've recently got a request to have a PrimeNG datatable scrolled with the page but have the data table header stick to the top of the page while scrolling. As this feature is not available out of the box with the PrimeNG data table component, I've written a dedicated directive for it.

The directive sets the PrimeNG data table header to sticky mode when scrolling the page. This prevents the header from scrolling with the table thus keeping the user in context and allows data sorting even when scrolled.

Code is available on Github.

Demo:

Angular 2 Component Loader

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: 

1. The "loading" flag that should be set to true while data is loafing and false once data is loaded. This attribute is mandatory.
2. 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.

Angular 2 Checkbox Tree with Partial Selection

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.

Converting key / value text files to JSON

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:

https://amirch1.github.io/blog/text2json/

Auto play HTML5 video on iPhone and iPAD

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.

• Demo: Open this link on your iPhone or iPAD to see the demo.
• Code: View the full source code on Github. 

Code sample:

    var vid = document.getElementById("vid"); // get reference to the video object
    var intervalID = null;
    var time = 0;
    var speed = 15; // frames per seconds (fps). Change this value to balance quality against performances

    // wait for the onloadedmetadata event to get the video duration
    vid.onloadedmetadata = function() {
        var duration = vid.duration;
        intervalID = setInterval(function(){
            time++;
            if (time / speed <=  duration){
                vid.currentTime = time / speed;
            }else{
                clearInterval(intervalID);
                intervalID = null;
            }
        },1000 / speed);
    };

    // clicking the video stops inline playback and triggers native playback including audio. No need to seek.
    vid.addEventListener('click', function(){
        clearInterval(intervalID);
        intervalID = null;
        this.play();
    });

Explanation:

1. Define the playback speed in FPS (frames per seconds)
2. Wait for the onloadedmetadata event after which video currentTime property can be set
3. Open a timer interval according to the defined speed and advance the video currentTime property on each interval
4. Stop the interval when the video reaches its duration or clicked upon
5. Upon video click execute the play() command on the video element

That's it!