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

Comparing version 1.1.0 to 1.1.1

additional-doc/summary.json

@@ -13,3 +13,7 @@ [
         "file": "styling.md"
+    },
+    {
+        "title": "Running the demo",
+        "file": "demo.md"
     }
 ]

demo/app/app.component.ts

 import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
 
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { NotificationsService } from 'angular2-notifications';
 import { ClipboardModalComponent } from './components';
@@ -9,2 +8,4 @@ import * as FileSaver from 'file-saver';
 import { WebSocketTunnel } from '@illgrenoble/guacamole-common-js';
+import { MatSnackBar } from '@angular/material';
+import { ActivatedRoute } from '@angular/router';
 
@@ -20,3 +21,5 @@ @Component({
 
-    constructor(private ngbModal: NgbModal, private notificationService: NotificationsService) {
+    constructor(private ngbModal: NgbModal,
+        private route: ActivatedRoute,
+        private snackBar: MatSnackBar) {
 
@@ -61,3 +64,8 @@ }
             this.manager.setFocused(true);
-            this.manager.sendRemoteClipboardData(text);
+            if (text) {
+                this.manager.sendRemoteClipboardData(text);
+                this.snackBar.open('Sent to remote clipboard', 'OK', {
+                    duration: 2000,
+                });
+            }
         }, () => this.manager.setFocused(true));
@@ -67,26 +75,43 @@ }
     ngOnInit() {
-        // Setup tunnel. The tunnel can be either: WebsocketTunnel, HTTPTunnel or ChainedTunnel
-        const tunnel = new WebSocketTunnel('ws://localhost:8080');
-        // URL parameters (image, audio and other query parameters you want to send to the tunnel.)
-        const parameters = {
-            ip: '192.168.13.232',
-            image: 'image/png'
-        };
-        /**
-         *  Create an instance of the remote desktop manager by 
-         *  passing in the tunnel and parameters
-         */
-        this.manager = new RemoteDesktopManager(tunnel, parameters);
-        /**
-         *  ngx-remote-desktop will always send the max screen dimensions as we always want to scale down and never up
-         *  You can override the dimensions parameters that are sent to the tunnel connection 
-         */
-        this.manager.setDimensionParameters('width', 'height');
-        /*
-         * The manager will establish a connection to: 
-         * ws://localhost:8080?width=n&height=n&ip=192.168.13.232&image=image/png
-         */
-        this.manager.connect();
+        this.route.queryParams.subscribe(params => {
+            // Optional to join an existing guacd connection
+            const connectionId = params['id'] || null;
+
+            // Setup tunnel. The tunnel can be either: WebsocketTunnel, HTTPTunnel or ChainedTunnel
+            const tunnel = new WebSocketTunnel('ws://localhost:8080/ws');
+            // URL parameters (image, audio and other query parameters you want to send to the tunnel.)
+            const parameters = {
+                hostname: 'localhost',
+                port: 3389,
+                image: 'image/png',
+                audio: 'audio/L16',
+                dpi: 96,
+                id: connectionId
+            };
+            /**
+             *  Create an instance of the remote desktop manager by 
+             *  passing in the tunnel and parameters
+             */
+            this.manager = new RemoteDesktopManager(tunnel, parameters);
+            /**
+             *  ngx-remote-desktop will always send the max screen dimensions 
+             *  as we always want to scale down and never up.
+             *  You can override the dimensions parameters that are sent to the tunnel connection 
+             */
+            this.manager.setDimensionParameters('width', 'height');
+            /*
+             * The manager will establish a connection to: 
+             * ws://localhost:8080?ws?ip={address}&image=image/png&audio=audio/L16&dpi=96&width=n&height=n
+             */
+            this.manager.connect();
+            this.manager.onRemoteClipboardData.subscribe(text => {
+                const snackbar = this.snackBar.open('Received from remote clipboard', 'OPEN CLIPBOARD', {
+                    duration: 1500,
+                });
+                snackbar.onAction().subscribe(() => this.handleClipboard());
+            });
+        });
+
     }
 
 }

demo/app/app.module.ts

@@ -10,3 +10,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { SimpleNotificationsModule } from 'angular2-notifications';
+import { MatSnackBarModule } from '@angular/material';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/markdown/markdown';
 
@@ -16,2 +19,4 @@ import {
 } from './components';
+import { OverlayContainer, FullscreenOverlayContainer } from '@angular/cdk/overlay';
+import { RouterModule } from '@angular/router';
 
@@ -27,7 +32,10 @@ @NgModule({
     HttpModule,
+    MatSnackBarModule,
+    CodemirrorModule,
     FormsModule,
-    NgbModule.forRoot(),
-    SimpleNotificationsModule.forRoot()
+    RouterModule.forRoot([]),
+    NgbModule.forRoot()
   ],
-  providers: [],
+  providers: [{provide: OverlayContainer, useClass: FullscreenOverlayContainer},
+  ],
   entryComponents: [
@@ -34,0 +42,0 @@ ClipboardModalComponent

demo/app/components/clipboard-modal.component.ts

@@ -17,7 +17,16 @@ import { Component, OnInit, Input } from '@angular/core';
             <p>
-            Text copied/cut within the remote desktop will appear here. Sending the text below will affect the remote desktop clipboard.</p>
-
+                Text copied/cut within the remote desktop will appear here. 
+                Sending the text below will affect the remote desktop clipboard.
+            </p>
             <form>
                 <div class="form-group">
-                    <textarea [(ngModel)]="text" name="text" autocomplete="off" autofocus class="form-control"></textarea>
+                    <ngx-codemirror 
+                        [(ngModel)]="text" 
+                        name="text"
+                        [options]="{
+                            lineNumbers: true,
+                            theme: 'material',
+                            mode: 'text/plain'
+                        }">
+                    </ngx-codemirror>
                 </div>
@@ -24,0 +33,0 @@ </form>

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.1.0",
+  "version": "1.1.1",
   "license": "MIT",
@@ -59,2 +59,3 @@ "main": "release/index.js",
     "@angular/animations": "5.0.0",
+    "@angular/cdk": "^5.1.1",
     "@angular/common": "5.0.0",
@@ -66,2 +67,4 @@ "@angular/compiler": "5.0.0",
     "@angular/http": "5.0.0",
+    "@angular/router": "5.0.0",
+    "@angular/material": "^5.1.1",
     "@angular/platform-browser": "5.0.0",
@@ -71,2 +74,3 @@ "@angular/platform-browser-dynamic": "5.0.0",
     "@compodoc/compodoc": "^1.0.5",
+    "@ctrl/ngx-codemirror": "^1.1.0",
     "@illgrenoble/guacamole-common-js": "0.0.1",
@@ -82,2 +86,3 @@ "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
     "clean-webpack-plugin": "^0.1.17",
+    "codemirror": "^5.34.0",
     "copy-webpack-plugin": "^4.1.1",
@@ -84,0 +89,0 @@ "core-js": "^2.5.1",

release/components/display.component.js

@@ -93,4 +93,5 @@ "use strict";
         var viewportElement = this.viewport.nativeElement;
+        var display = this.getDisplay();
         var screenElement = window.screen;
-        var scale = Math.min(viewportElement.clientWidth / screenElement.width, viewportElement.clientHeight / screenElement.height);
+        var scale = Math.min(viewportElement.clientWidth / display.getWidth(), viewportElement.clientHeight / display.getHeight());
         return scale;
@@ -97,0 +98,0 @@ };

src/components/display.component.ts

@@ -134,5 +134,6 @@ import {
         const viewportElement = this.viewport.nativeElement;
+        const display = this.getDisplay();
         const screenElement = window.screen;
-        const scale = Math.min(viewportElement.clientWidth / screenElement.width,
-            viewportElement.clientHeight / screenElement.height);
+        const scale = Math.min(viewportElement.clientWidth / display.getWidth(),
+            viewportElement.clientHeight / display.getHeight());
         return scale;
@@ -139,0 +140,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

899053

increased by0.34%

Number of package files

103

increased by0.98%

Lines of code

3240

increased by1.47%

Worsened metrics

Dev dependency count

62

increased by8.77%

No dependency changes