fullscreen.js

My GSoC Project includes implementing media wall in loklak search . One part of the issue is to include customization options in media wall. I looked around for most important features that can be implemented in a media wall to give the user a more appealing and personalized view. One of the feature that can be implemented is enabling Full Screen Mode.  This feature can help the user to display media wall on the projector or any big display screen without compromising with space available. In one part, I would be explaining how I implemented Full screen Mode in loklak media wall using fullscreen.js library. Secondly, it is important to include a very reactive and user-friendly setting box. The setting box should be a central container in which all the customization options will be included.In loklak media wall,  setting box is implemented as a dialog box with various classifications in form of tabs. I would also be explaining  how I designed customization menu using Angular Material. Implementation Full Screen Mode Since loklak search is an Angular 2 application and all the code is written in typescript, we can’t simply use the fullscreen.js library. We have to import the library into our application and create a directive that can be applied to the element to use it in the application. Install fullscreen.js library in the application using Node Package Manager. npm install --save screenfull Creating an attribute directive which uses Hostlistener to listen to click on the element. It uses screenfull.toggle() function to call FullScreen JS API whenever user clicks on the element. import {Directive, HostListener, Output, EventEmitter} from '@angular/core'; import * as screenfull from 'screenfull';@Directive({ selector: '[toggleFullscreen]' }) export class ToggleFullscreenDirective {constructor() {}@HostListener('click') onClick() { if (screenfull.enabled) { screenfull.toggle(); } } } Import Directive into the module and add it to declaration. This allows directive to be used anywhere in the template. import { ToggleFullscreenDirective } from '../shared//full-screen.directive'; . . . @NgModule({ . . . declarations: [ . . . ToggleFullscreenDirective, . . . ] }) export class MediaWallModule { } Now, the directive is ready to use on the template. We just have to add this attribute directive to an element. <i toggleFullscreen mdTooltip="Full Screen" mdTooltipPosition="below" class="material-icons md-36">fullscreen</i> Customization Menu Customization Menu is created using the idea of central container for customization. It is created using two components of Angular Material - Dialog Box and Tabs . We will now be looking how customization menu is implemented using these two components. Create a component with the pre-configured position, height and width of the dialog box. This can be done simply using updatePosition and updateSize property of the MdDialogRef class. export class MediaWallCustomizationComponent implements OnInit { public query: string;constructor( private dialogRef: MdDialogRef<MediaWallCustomizationComponent>, private store: Store<fromRoot.State>, private location: Location) { }ngOnInit() { this.dialogRef.updatePosition('10px'); this.dialogRef.updateSize('80%', '80%'); }public searchAction() { if (this.query) { this.store.dispatch(new mediaWallAction.WallInputValueChangeAction(this.query)); this.location.go('/wall', `query=${this.query}`); } } } Create a template for the Customization menu. We will be using md-tab and md-dialog to create a dialog box with options displayed using…