feat: mumble link (#19)

* model update
* install url-parse
* add safeMumbleUrlPipe
* display mumble url in game details page

package.json

@@ -33,6 +33,7 @@
     "rxjs": "~6.5.2",
     "socket.io-client": "^2.2.0",
     "tslib": "^1.9.0",
+    "url-parse": "^1.4.7",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
@@ -44,6 +45,7 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/jwt-decode": "^2.2.1",
     "@types/node": "~8.9.4",
+    "@types/url-parse": "^1.4.3",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/games/game-details/game-details.component.html

@@ -59,6 +59,11 @@ <h4>
         </ng-template>
       </div>
     </div>
+
+    <div class="mt-2" *ngIf="myMumbleUrl | async as _myMumbleUrl">
+      <span class="text-muted">mumble</span>
+      <a [href]="_myMumbleUrl | safeMumbleUrl" class="mx-2">join</a>
+    </div>
   </ng-container>
 
   <ng-container *ngIf="_game.state === 'ended'">

src/app/games/game-details/game-details.component.spec.ts

@@ -39,6 +39,7 @@ const theGame: Game = {
   number: 3,
   connectString: 'connect 192.168.1.101:27015; password FAKE_PASSWORD',
   error: 'ended by admin',
+  mumbleUrl: 'mumble://FAKE_MUMBLE_URL/FAKE_CHANNEL'
 };
 
 describe('GameDetailsComponent', () => {

src/app/games/game-details/game-details.component.ts

@@ -4,13 +4,14 @@ import { AppState } from '@app/app.state';
 import { Observable, zip } from 'rxjs';
 import { Game } from '../models/game';
 import { ActivatedRoute } from '@angular/router';
-import { switchMap, map, tap, filter, first } from 'rxjs/operators';
+import { switchMap, map, tap, filter, first, withLatestFrom } from 'rxjs/operators';
 import { gameById } from '../games.selectors';
 import { loadGame, forceEndGame } from '../games.actions';
 import { Player } from '@app/players/models/player';
 import { playerById } from '@app/players/players.selectors';
 import { loadPlayer } from '@app/players/players.actions';
 import { profile } from '@app/profile/profile.selectors';
+import * as urlParse from 'url-parse';
 
 interface PlayerWithGameClass extends Player {
   gameClass: string;
@@ -31,6 +32,7 @@ export class GameDetailsComponent implements OnInit {
     select(profile),
     map(theProfile => theProfile && (theProfile.role === 'super-user' || theProfile.role === 'admin')),
   );
+  myMumbleUrl: Observable<string>;
 
   @ViewChild('connectInput', { static: false })
   connectInput: ElementRef;
@@ -75,6 +77,22 @@ export class GameDetailsComponent implements OnInit {
         this.playersBlu = playersForTeam(bluTeamId);
       }),
     );
+
+    this.myMumbleUrl = this.game.pipe(
+      filter(game => !!game),
+      withLatestFrom(this.store.select(profile).pipe(filter(p => !!p))),
+      map(([game, theProfile]) => {
+        const mySlot = game.slots.find(s => s.playerId === theProfile.id);
+        if (!mySlot) {
+          return null;
+        }
+
+        const team = game.teams[mySlot.teamId];
+        const url = urlParse(game.mumbleUrl);
+        url.set('username', theProfile.name);
+        return `${url.toString()}/${team}`;
+      }),
+    );
   }
 
   copyConnectString() {

src/app/games/models/game.ts

@@ -13,5 +13,6 @@ export interface Game {
   demoUrl?: string;
   state: GameState;
   connectString: string;
+  mumbleUrl: string;
   error?: string;
 }

src/app/shared/safe-mumble-url.pipe.spec.ts

@@ -0,0 +1,32 @@
+import { SafeMumbleUrlPipe } from './safe-mumble-url.pipe';
+import { TestBed, inject } from '@angular/core/testing';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
+
+class DomSanitizerStub {
+  bypassSecurityTrustUrl(input: string) { return input; }
+}
+
+describe('SafeMumbleUrlPipe', () => {
+  let pipe: SafeMumbleUrlPipe;
+
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [ BrowserModule ],
+    providers: [
+      { provide: DomSanitizer, useClass: DomSanitizerStub },
+    ]
+  }));
+
+  beforeEach(inject([DomSanitizer], (domSanitizer: DomSanitizer) => {
+    pipe = new SafeMumbleUrlPipe(domSanitizer);
+  }));
+
+  it('should create', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should bypass security url check', () => {
+    const spy = spyOn(TestBed.get(DomSanitizer), 'bypassSecurityTrustUrl');
+    pipe.transform('FAKE_URL');
+    expect(spy).toHaveBeenCalledWith('FAKE_URL');
+  });
+});

src/app/shared/safe-mumble-url.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SafeUrl, DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeMumbleUrl'
+})
+export class SafeMumbleUrlPipe implements PipeTransform {
+
+  constructor(
+    private sanitizer: DomSanitizer,
+  ) { }
+
+  transform(value: string): SafeUrl {
+    return this.sanitizer.bypassSecurityTrustUrl(value);
+  }
+
+}

src/app/shared/shared.module.ts

@@ -4,12 +4,14 @@ import { SteamLoginButtonComponent } from './steam-login-button/steam-login-butt
 import { ConnectStringToLinkPipe } from './connect-string-to-link.pipe';
 import { RulesComponent } from './rules/rules.component';
 import { MarkdownModule } from 'ngx-markdown';
+import { SafeMumbleUrlPipe } from './safe-mumble-url.pipe';
 
 @NgModule({
   declarations: [
     SteamLoginButtonComponent,
     ConnectStringToLinkPipe,
     RulesComponent,
+    SafeMumbleUrlPipe,
   ],
   imports: [
     CommonModule,
@@ -19,6 +21,7 @@ import { MarkdownModule } from 'ngx-markdown';
     SteamLoginButtonComponent,
     ConnectStringToLinkPipe,
     RulesComponent,
+    SafeMumbleUrlPipe,
   ]
 })
 export class SharedModule { }