@illgrenoble/ngx-remote-desktop - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

additional-doc/installation.md

@@ -9,2 +9,9 @@ # Installation
 
+We also require two peer dependencies:
+
+```
+npm i @illgrenoble/guacamole-common-js --save
+npm i screenfull --save
+```
+
 After installing, include `NgxRemoteDesktopModule` in your application module like this:
@@ -15,3 +22,3 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgxRemoteDesktopModule } from '@ILLGrenoble/ngx-remote-desktop';
+import { NgxRemoteDesktopModule } from '@illgrenoble/ngx-remote-desktop';
 import { AppComponent } from './app.component';
@@ -18,0 +25,0 @@

additional-doc/usage.md

@@ -11,3 +11,3 @@ # Usage
 
-import { RemoteDesktopManager } from '@ILLGrenoble/ngx-remote-desktop';
+import { RemoteDesktopManager } from '@illgrenoble/ngx-remote-desktop';
 import { WebSocketTunnel } from '@illgrenoble/guacamole-common-js';
@@ -14,0 +14,0 @@

demo/app/app.component.ts

@@ -65,3 +65,3 @@ import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
         // Setup tunnel. The tunnel can be either: WebsocketTunnel, HTTPTunnel or ChainedTunnel
-        const tunnel = new WebSocketTunnel('ws://hallpclnx.ill.fr:8080');
+        const tunnel = new WebSocketTunnel('ws://localhost:8080');
         // URL parameters (image, audio and other query parameters you want to send to the tunnel.)
@@ -68,0 +68,0 @@ const parameters = {

package.json

 {
   "name": "@illgrenoble/ngx-remote-desktop",
   "description": "ngx-remote-desktop is an Angular2+ module for connecting to a remote desktop using the guacamole protocol",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "release/index.js",

README.md

@@ -26,3 +26,3 @@ # ngx-remote-desktop
 
-For a full implementation example, see the [demo source code](https://github.com/ILLGrenoble/ngx-remote-desktop/tree/master/demo).
+For a full implementation example, see the [demo source code](https://github.com/ILLGrenoble/ngx-remote-desktop/tree/master/demo)
 
@@ -37,3 +37,10 @@ ## Installation
 
+We also require two peer dependencies:
+
+```
+npm i @illgrenoble/guacamole-common-js --save
+npm i screenfull --save
+```
+
 ### Thank you
 Thank you to the guacamole team for a fantastic project.

release/components/remote-desktop.component.js

@@ -187,10 +187,10 @@ "use strict";
             selector: 'ngx-remote-desktop',
-            template: "\n        <main class=\"ngx-remote-desktop\" #container>\n            <nav class=\"ngx-remote-desktop-toolbar\" \n                [class.ngx-remote-desktop-toolbar-fullscreen]=\"manager.isFullScreen()\" \n                    [@fadeInOut]=\"toolbarVisible\" #toolbar>\n                <ul class=\"ngx-remote-desktop-toolbar-items\">\n                    <ng-content select='ngx-remote-desktop-toolbar-item[align=left]'></ng-content>\n                </ul>\n                <ul class=\"ngx-remote-desktop-toolbar-items\">\n                    <ng-content select='ngx-remote-desktop-toolbar-item[align=right]'></ng-content>\n                </ul>\n            </nav>\n            <section class=\"ngx-remote-desktop-container\">\n                <!-- Connecting message -->\n                <div *ngIf=\"isState(states.CONNECTING)\">\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"connectingMessage\" >\n                        <ng-content select=\"ngx-remote-desktop-connecting-message\"></ng-content>\n                    </div>\n        \n                    <ngx-remote-desktop-message  *ngIf=\"!connectingMessage\"\n                        title=\"Connecting to remote desktop\"\n                        message=\"Attempting to connect to the remote desktop. Waiting for response...\"\n                        type=\"success\">\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End connecting message -->\n\n                <!-- Disconnected message -->\n                <div *ngIf=\"isState(states.DISCONNECTED)\">\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"disconnectedMessage\">\n                        <ng-content select=\"ngx-remote-desktop-disconnected-message\"></ng-content>\n                    </div>\n                    <ngx-remote-desktop-message *ngIf=\"!disconnectedMessage\"\n                        title=\"Disconnected\"\n                        message=\"The connection to the remote desktop terminated successfully\"\n                        type=\"error\">\n                        <button (click)=\"handleConnect()\" class=\"ngx-remote-desktop-message-body-btn\">\n                            Reconnect\n                        </button>\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End disconnected message -->\n                \n                <!-- Error message -->\n                <div *ngIf=\"isState(states.ERROR)\">\n\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"errorMessage\">\n                        <ng-content select=\"ngx-remote-desktop-error-message\"></ng-content>\n                    </div>\n\n                    <ngx-remote-desktop-message *ngIf=\"!errorMessage\"\n                        title=\"Connection error\"\n                        message=\"The remote desktop server is currently unreachable.\"\n                        type=\"error\">\n                        <button (click)=\"handleConnect()\" class=\"ngx-remote-desktop-message-body-btn\">\n                            Connect\n                        </button>\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End error message -->\n                \n                <!-- Display -->\n                <ngx-remote-desktop-display *ngIf=\"isState(states.CONNECTED)\" \n                    [manager]=\"manager\"\n                    (onMouseMove)=\"handleDisplayMouseMove($event)\">\n                </ngx-remote-desktop-display>                \n                <!-- End display -->\n            </section>\n            <section [class.ngx-remote-desktop-status-bar-hidden]=\"manager.isFullScreen()\">\n                <ng-content select=\"ngx-remote-desktop-status-bar\"></ng-content>\n            </section>\n        </main>\n    ",
+            template: "\n        <main class=\"ngx-remote-desktop\" #container>\n            <!-- Toolbar items template -->\n            <ng-template #toolbarItems>\n                <ul class=\"ngx-remote-desktop-toolbar-items\">\n                    <ng-content select='ngx-remote-desktop-toolbar-item[align=left]'></ng-content>\n                </ul>\n                <ul class=\"ngx-remote-desktop-toolbar-items\">\n                    <ng-content select='ngx-remote-desktop-toolbar-item[align=right]'></ng-content>\n                </ul>\n            </ng-template>\n            <!-- End toolbar items template -->\n            <!-- Normal toolbar -->\n            <nav class=\"ngx-remote-desktop-toolbar\" *ngIf=\"!manager.isFullScreen()\" >\n                <template [ngTemplateOutlet]=\"toolbarItems\"></template>\n            </nav>\n            <!-- End normal toolbar -->\n            <!-- Full screen toolbar -->\n            <nav class=\"ngx-remote-desktop-toolbar ngx-remote-desktop-toolbar-fullscreen\" *ngIf=\"manager.isFullScreen()\"\n                [@toolbarAnimation]=\"toolbarVisible\" #toolbar>\n                <template [ngTemplateOutlet]=\"toolbarItems\"></template>\n            </nav>\n            <!-- End full screen toolbar -->\n            <section class=\"ngx-remote-desktop-container\">\n                <!-- Connecting message -->\n                <div *ngIf=\"isState(states.CONNECTING)\">\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"connectingMessage\" >\n                        <ng-content select=\"ngx-remote-desktop-connecting-message\"></ng-content>\n                    </div>\n        \n                    <ngx-remote-desktop-message  *ngIf=\"!connectingMessage\"\n                        title=\"Connecting to remote desktop\"\n                        message=\"Attempting to connect to the remote desktop. Waiting for response...\"\n                        type=\"success\">\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End connecting message -->\n\n                <!-- Disconnected message -->\n                <div *ngIf=\"isState(states.DISCONNECTED)\">\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"disconnectedMessage\">\n                        <ng-content select=\"ngx-remote-desktop-disconnected-message\"></ng-content>\n                    </div>\n                    <ngx-remote-desktop-message *ngIf=\"!disconnectedMessage\"\n                        title=\"Disconnected\"\n                        message=\"The connection to the remote desktop terminated successfully\"\n                        type=\"error\">\n                        <button (click)=\"handleConnect()\" class=\"ngx-remote-desktop-message-body-btn\">\n                            Reconnect\n                        </button>\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End disconnected message -->\n                \n                <!-- Error message -->\n                <div *ngIf=\"isState(states.ERROR)\">\n\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"errorMessage\">\n                        <ng-content select=\"ngx-remote-desktop-error-message\"></ng-content>\n                    </div>\n\n                    <ngx-remote-desktop-message *ngIf=\"!errorMessage\"\n                        title=\"Connection error\"\n                        message=\"The remote desktop server is currently unreachable.\"\n                        type=\"error\">\n                        <button (click)=\"handleConnect()\" class=\"ngx-remote-desktop-message-body-btn\">\n                            Connect\n                        </button>\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End error message -->\n                \n                <!-- Display -->\n                <ngx-remote-desktop-display *ngIf=\"isState(states.CONNECTED)\" \n                    [manager]=\"manager\"\n                    (onMouseMove)=\"handleDisplayMouseMove($event)\">\n                </ngx-remote-desktop-display>                \n                <!-- End display -->\n            </section>\n            <section [class.ngx-remote-desktop-status-bar-hidden]=\"manager.isFullScreen()\">\n                <ng-content select=\"ngx-remote-desktop-status-bar\"></ng-content>\n            </section>\n        </main>\n    ",
             encapsulation: core_1.ViewEncapsulation.None,
             animations: [
-                animations_1.trigger('fadeInOut', [
-                    animations_1.state('1', animations_1.style({ display: 'visible' })),
-                    animations_1.state('0', animations_1.style({ opacity: 0, visibility: 'hidden' })),
-                    animations_1.transition('1 => 0', animations_1.animate('1000ms')),
-                    animations_1.transition('0 => 1', animations_1.animate('0ms'))
+                animations_1.trigger('toolbarAnimation', [
+                    animations_1.state('1', animations_1.style({ transform: 'translateX(0%)' })),
+                    animations_1.state('0', animations_1.style({ transform: 'translateX(-100%)' })),
+                    animations_1.transition('1 => 0', animations_1.animate('200ms 200ms ease-out')),
+                    animations_1.transition('0 => 1', animations_1.animate('225ms ease-in'))
                 ])
@@ -197,0 +197,0 @@ ],

release/components/remote-desktop.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"RemoteDesktopComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-remote-desktop","template":"\n        <main class=\"ngx-remote-desktop\" #container>\n            <nav class=\"ngx-remote-desktop-toolbar\" \n                [class.ngx-remote-desktop-toolbar-fullscreen]=\"manager.isFullScreen()\" \n                    [@fadeInOut]=\"toolbarVisible\" #toolbar>\n                <ul class=\"ngx-remote-desktop-toolbar-items\">\n                    <ng-content select='ngx-remote-desktop-toolbar-item[align=left]'></ng-content>\n                </ul>\n                <ul class=\"ngx-remote-desktop-toolbar-items\">\n                    <ng-content select='ngx-remote-desktop-toolbar-item[align=right]'></ng-content>\n                </ul>\n            </nav>\n            <section class=\"ngx-remote-desktop-container\">\n                <!-- Connecting message -->\n                <div *ngIf=\"isState(states.CONNECTING)\">\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"connectingMessage\" >\n                        <ng-content select=\"ngx-remote-desktop-connecting-message\"></ng-content>\n                    </div>\n        \n                    <ngx-remote-desktop-message  *ngIf=\"!connectingMessage\"\n                        title=\"Connecting to remote desktop\"\n                        message=\"Attempting to connect to the remote desktop. Waiting for response...\"\n                        type=\"success\">\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End connecting message -->\n\n                <!-- Disconnected message -->\n                <div *ngIf=\"isState(states.DISCONNECTED)\">\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"disconnectedMessage\">\n                        <ng-content select=\"ngx-remote-desktop-disconnected-message\"></ng-content>\n                    </div>\n                    <ngx-remote-desktop-message *ngIf=\"!disconnectedMessage\"\n                        title=\"Disconnected\"\n                        message=\"The connection to the remote desktop terminated successfully\"\n                        type=\"error\">\n                        <button (click)=\"handleConnect()\" class=\"ngx-remote-desktop-message-body-btn\">\n                            Reconnect\n                        </button>\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End disconnected message -->\n                \n                <!-- Error message -->\n                <div *ngIf=\"isState(states.ERROR)\">\n\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"errorMessage\">\n                        <ng-content select=\"ngx-remote-desktop-error-message\"></ng-content>\n                    </div>\n\n                    <ngx-remote-desktop-message *ngIf=\"!errorMessage\"\n                        title=\"Connection error\"\n                        message=\"The remote desktop server is currently unreachable.\"\n                        type=\"error\">\n                        <button (click)=\"handleConnect()\" class=\"ngx-remote-desktop-message-body-btn\">\n                            Connect\n                        </button>\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End error message -->\n                \n                <!-- Display -->\n                <ngx-remote-desktop-display *ngIf=\"isState(states.CONNECTED)\" \n                    [manager]=\"manager\"\n                    (onMouseMove)=\"handleDisplayMouseMove($event)\">\n                </ngx-remote-desktop-display>                \n                <!-- End display -->\n            </section>\n            <section [class.ngx-remote-desktop-status-bar-hidden]=\"manager.isFullScreen()\">\n                <ng-content select=\"ngx-remote-desktop-status-bar\"></ng-content>\n            </section>\n        </main>\n    ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"display":"visible"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"visibility":"hidden"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["1 => 0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["1000ms"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["0 => 1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["0ms"]}]}]]}]}]}],"members":{"manager":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"connectingMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./messages/connecting-message.component","name":"ConnectingMessageComponent"}]}]}],"disconnectedMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./messages/disconnected-message.component","name":"DisconnectedMessageComponent"}]}]}],"errorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./messages/error-message.component","name":"ErrorMessageComponent"}]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["toolbar"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"handleConnect":[{"__symbolic":"method"}],"isState":[{"__symbolic":"method"}],"handleState":[{"__symbolic":"method"}],"exitFullScreen":[{"__symbolic":"method"}],"enterFullScreen":[{"__symbolic":"method"}],"handleFullScreen":[{"__symbolic":"method"}],"handleToolbar":[{"__symbolic":"method"}],"handleDisplayMouseMove":[{"__symbolic":"method"}],"showOrHideToolbar":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"RemoteDesktopComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-remote-desktop","template":"\n        <main class=\"ngx-remote-desktop\" #container>\n            <!-- Toolbar items template -->\n            <ng-template #toolbarItems>\n                <ul class=\"ngx-remote-desktop-toolbar-items\">\n                    <ng-content select='ngx-remote-desktop-toolbar-item[align=left]'></ng-content>\n                </ul>\n                <ul class=\"ngx-remote-desktop-toolbar-items\">\n                    <ng-content select='ngx-remote-desktop-toolbar-item[align=right]'></ng-content>\n                </ul>\n            </ng-template>\n            <!-- End toolbar items template -->\n            <!-- Normal toolbar -->\n            <nav class=\"ngx-remote-desktop-toolbar\" *ngIf=\"!manager.isFullScreen()\" >\n                <template [ngTemplateOutlet]=\"toolbarItems\"></template>\n            </nav>\n            <!-- End normal toolbar -->\n            <!-- Full screen toolbar -->\n            <nav class=\"ngx-remote-desktop-toolbar ngx-remote-desktop-toolbar-fullscreen\" *ngIf=\"manager.isFullScreen()\"\n                [@toolbarAnimation]=\"toolbarVisible\" #toolbar>\n                <template [ngTemplateOutlet]=\"toolbarItems\"></template>\n            </nav>\n            <!-- End full screen toolbar -->\n            <section class=\"ngx-remote-desktop-container\">\n                <!-- Connecting message -->\n                <div *ngIf=\"isState(states.CONNECTING)\">\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"connectingMessage\" >\n                        <ng-content select=\"ngx-remote-desktop-connecting-message\"></ng-content>\n                    </div>\n        \n                    <ngx-remote-desktop-message  *ngIf=\"!connectingMessage\"\n                        title=\"Connecting to remote desktop\"\n                        message=\"Attempting to connect to the remote desktop. Waiting for response...\"\n                        type=\"success\">\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End connecting message -->\n\n                <!-- Disconnected message -->\n                <div *ngIf=\"isState(states.DISCONNECTED)\">\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"disconnectedMessage\">\n                        <ng-content select=\"ngx-remote-desktop-disconnected-message\"></ng-content>\n                    </div>\n                    <ngx-remote-desktop-message *ngIf=\"!disconnectedMessage\"\n                        title=\"Disconnected\"\n                        message=\"The connection to the remote desktop terminated successfully\"\n                        type=\"error\">\n                        <button (click)=\"handleConnect()\" class=\"ngx-remote-desktop-message-body-btn\">\n                            Reconnect\n                        </button>\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End disconnected message -->\n                \n                <!-- Error message -->\n                <div *ngIf=\"isState(states.ERROR)\">\n\n                    <div class=\"ngx-remote-desktop-message\" *ngIf=\"errorMessage\">\n                        <ng-content select=\"ngx-remote-desktop-error-message\"></ng-content>\n                    </div>\n\n                    <ngx-remote-desktop-message *ngIf=\"!errorMessage\"\n                        title=\"Connection error\"\n                        message=\"The remote desktop server is currently unreachable.\"\n                        type=\"error\">\n                        <button (click)=\"handleConnect()\" class=\"ngx-remote-desktop-message-body-btn\">\n                            Connect\n                        </button>\n                    </ngx-remote-desktop-message>\n                </div>\n                <!-- End error message -->\n                \n                <!-- Display -->\n                <ngx-remote-desktop-display *ngIf=\"isState(states.CONNECTED)\" \n                    [manager]=\"manager\"\n                    (onMouseMove)=\"handleDisplayMouseMove($event)\">\n                </ngx-remote-desktop-display>                \n                <!-- End display -->\n            </section>\n            <section [class.ngx-remote-desktop-status-bar-hidden]=\"manager.isFullScreen()\">\n                <ng-content select=\"ngx-remote-desktop-status-bar\"></ng-content>\n            </section>\n        </main>\n    ","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["toolbarAnimation",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateX(0%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["1 => 0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["200ms 200ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["0 => 1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["225ms ease-in"]}]}]]}]}]}],"members":{"manager":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"connectingMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./messages/connecting-message.component","name":"ConnectingMessageComponent"}]}]}],"disconnectedMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./messages/disconnected-message.component","name":"DisconnectedMessageComponent"}]}]}],"errorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./messages/error-message.component","name":"ErrorMessageComponent"}]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["toolbar"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"handleConnect":[{"__symbolic":"method"}],"isState":[{"__symbolic":"method"}],"handleState":[{"__symbolic":"method"}],"exitFullScreen":[{"__symbolic":"method"}],"enterFullScreen":[{"__symbolic":"method"}],"handleFullScreen":[{"__symbolic":"method"}],"handleToolbar":[{"__symbolic":"method"}],"handleDisplayMouseMove":[{"__symbolic":"method"}],"showOrHideToolbar":[{"__symbolic":"method"}]}}}}]

src/components/remote-desktop.component.ts

@@ -30,5 +30,4 @@ import {
         <main class="ngx-remote-desktop" #container>
-            <nav class="ngx-remote-desktop-toolbar" 
-                [class.ngx-remote-desktop-toolbar-fullscreen]="manager.isFullScreen()" 
-                    [@fadeInOut]="toolbarVisible" #toolbar>
+            <!-- Toolbar items template -->
+            <ng-template #toolbarItems>
                 <ul class="ngx-remote-desktop-toolbar-items">
@@ -40,3 +39,15 @@ <ng-content select='ngx-remote-desktop-toolbar-item[align=left]'></ng-content>
                 </ul>
+            </ng-template>
+            <!-- End toolbar items template -->
+            <!-- Normal toolbar -->
+            <nav class="ngx-remote-desktop-toolbar" *ngIf="!manager.isFullScreen()" >
+                <template [ngTemplateOutlet]="toolbarItems"></template>
             </nav>
+            <!-- End normal toolbar -->
+            <!-- Full screen toolbar -->
+            <nav class="ngx-remote-desktop-toolbar ngx-remote-desktop-toolbar-fullscreen" *ngIf="manager.isFullScreen()"
+                [@toolbarAnimation]="toolbarVisible" #toolbar>
+                <template [ngTemplateOutlet]="toolbarItems"></template>
+            </nav>
+            <!-- End full screen toolbar -->
             <section class="ngx-remote-desktop-container">
@@ -105,7 +116,7 @@ <!-- Connecting message -->
     animations: [
-        trigger('fadeInOut', [
-            state('1', style({ display: 'visible' })),
-            state('0', style({ opacity: 0, visibility: 'hidden' })),
-            transition('1 => 0', animate('1000ms')),
-            transition('0 => 1', animate('0ms'))
+        trigger('toolbarAnimation', [
+            state('1', style({ transform: 'translateX(0%)' })),
+            state('0', style({ transform: 'translateX(-100%)' })),
+            transition('1 => 0', animate('200ms 200ms ease-out')),
+            transition('0 => 1', animate('225ms ease-in'))
         ])
@@ -112,0 +123,0 @@ ],

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

896005

increased by13.38%

Lines of code

3193

increased by0.41%

Number of lines in readme file

44

increased by18.92%

No dependency changes