diff --git a/client/.angular-cli.json b/client/.angular-cli.json index 7b76092..b73ddb9 100644 --- a/client/.angular-cli.json +++ b/client/.angular-cli.json @@ -23,13 +23,15 @@ "styles": [ "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/simple-line-icons/css/simple-line-icons.css", + "../node_modules/jplayer/dist/skin/blue.monday/css/jplayer.blue.monday.css", "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/popper.js/dist/umd/popper.min.js", - "../node_modules/bootstrap/dist/js/bootstrap.js" + "../node_modules/bootstrap/dist/js/bootstrap.js", + "../node_modules/howler/dist/howler.js" ], "environmentSource": "environments/environment.ts", "environments": { diff --git a/client/package.json b/client/package.json index 3f9be6e..191bf83 100644 --- a/client/package.json +++ b/client/package.json @@ -1,77 +1,78 @@ { - "name": "pod-noms.web", - "version": "0.20.0", - "license": "MIT", - "scripts": { - "ng": "ng", - "start": "ng serve --aot", - "build": "ng build", - "test": "ng test", - "lint": "ng lint" - }, - "ngrxGen": { - "basePath": "./src/app", - "seperateDirectory": true - }, - "private": true, - "dependencies": { - "@angular/animations": "^5.2.7", - "@angular/common": "^5.2.7", - "@angular/compiler": "^5.2.7", - "@angular/core": "^5.2.7", - "@angular/forms": "^5.2.7", - "@angular/http": "^5.2.7", - "@angular/platform-browser": "^5.2.7", - "@angular/platform-browser-dynamic": "^5.2.7", - "@angular/router": "^5.2.7", - "@aspnet/signalr": "^1.0.0-preview3-30392", - "@ngrx/effects": "^5.1.0", - "@ngrx/store": "^5.1.0", - "@ngrx/store-devtools": "^5.1.0", - "@qontu/ngx-inline-editor": "^0.2.0-alpha.12", - "angular2-jwt": "^0.2.3", - "angular2-moment": "^1.8.0", - "angularfire2": "^5.0.0-rc.6", - "applicationinsights-js": "^1.0.15", - "auth0": "^2.9.1", - "auth0-lock": "^11.4.0", - "bootstrap": "4.0.0", - "core-js": "^2.5.3", - "dropzone": "^5.3.0", - "firebase": "^4.12.0", - "font-awesome": "^4.7.0", - "jquery": "^3.3.1", - "lodash": "^4.17.5", - "ng2-toasty": "^4.0.3", - "ngx-bootstrap": "^2.0.3", - "ngx-clipboard": "^10.0.0", - "popper.js": "^1.13.0", - "rxjs": "5.5.6", - "simple-line-icons": "^2.4.1", - "tether": "^1.4.3", - "uglify-es": "^3.3.10", - "yarn": "^1.5.1", - "zone.js": "^0.8.20" - }, - "devDependencies": { - "@angular/cli": "1.6.8", - "@angular/compiler-cli": "^5.2.6", - "@angular/language-service": "^5.2.6", - "@types/applicationinsights-js": "^1.0.5", - "@types/jasmine": "^2.8.6", - "@types/node": "~9.4.6", - "codelyzer": "^4.2.1", - "jasmine-core": "~2.99.1", - "jasmine-spec-reporter": "~4.2.1", - "karma": "~2.0.0", - "karma-chrome-launcher": "~2.2.0", - "karma-cli": "~1.0.1", - "karma-coverage-istanbul-reporter": "^1.4.1", - "karma-jasmine": "^1.1.1", - "karma-jasmine-html-reporter": "^0.2.2", - "protractor": "~5.3.0", - "ts-node": "^5.0.1", - "tslint": "~5.9.1", - "typescript": "~2.5.3" - } + "name": "pod-noms.web", + "version": "0.20.0", + "license": "MIT", + "scripts": { + "ng": "ng", + "start": "ng serve --aot", + "build": "ng build", + "test": "ng test", + "lint": "ng lint" + }, + "ngrxGen": { + "basePath": "./src/app", + "seperateDirectory": true + }, + "private": true, + "dependencies": { + "@angular/animations": "^5.2.7", + "@angular/common": "^5.2.7", + "@angular/compiler": "^5.2.7", + "@angular/core": "^5.2.7", + "@angular/forms": "^5.2.7", + "@angular/http": "^5.2.7", + "@angular/platform-browser": "^5.2.7", + "@angular/platform-browser-dynamic": "^5.2.7", + "@angular/router": "^5.2.7", + "@aspnet/signalr": "^1.0.0-preview3-30392", + "@ngrx/effects": "^5.1.0", + "@ngrx/store": "^5.1.0", + "@ngrx/store-devtools": "^5.1.0", + "@qontu/ngx-inline-editor": "^0.2.0-alpha.12", + "angular2-jwt": "^0.2.3", + "angular2-moment": "^1.8.0", + "angularfire2": "^5.0.0-rc.6", + "applicationinsights-js": "^1.0.15", + "auth0": "^2.9.1", + "auth0-lock": "^11.4.0", + "bootstrap": "4.0.0", + "core-js": "^2.5.3", + "dropzone": "^5.3.0", + "firebase": "^4.12.0", + "font-awesome": "^4.7.0", + "jquery": "^3.3.1", + "lodash": "^4.17.5", + "ng2-toasty": "^4.0.3", + "ngx-bootstrap": "^2.0.3", + "ngx-clipboard": "^10.0.0", + "ngx-moment": "^2.0.0-rc.0", + "popper.js": "^1.13.0", + "rxjs": "5.5.6", + "simple-line-icons": "^2.4.1", + "tether": "^1.4.3", + "uglify-es": "^3.3.10", + "yarn": "^1.5.1", + "zone.js": "^0.8.20" + }, + "devDependencies": { + "@angular/cli": "1.6.8", + "@angular/compiler-cli": "^5.2.6", + "@angular/language-service": "^5.2.6", + "@types/applicationinsights-js": "^1.0.5", + "@types/jasmine": "^2.8.6", + "@types/node": "~9.4.6", + "codelyzer": "^4.2.1", + "jasmine-core": "~2.99.1", + "jasmine-spec-reporter": "~4.2.1", + "karma": "~2.0.0", + "karma-chrome-launcher": "~2.2.0", + "karma-cli": "~1.0.1", + "karma-coverage-istanbul-reporter": "^1.4.1", + "karma-jasmine": "^1.1.1", + "karma-jasmine-html-reporter": "^0.2.2", + "protractor": "~5.3.0", + "ts-node": "^5.0.1", + "tslint": "~5.9.1", + "typescript": "~2.5.3" + } } diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 0d465a0..426ee21 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -41,11 +41,6 @@ export class AppComponent implements OnInit { this._signalrService .init('chatter') .then(r => { - console.log( - 'app.component', - 'Chatter Service ready to rock', - r - ); this._signalrService.connection.on( chatterChannel, result => { diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 710473a..b6be60c 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -58,6 +58,9 @@ import { AppInsightsService } from 'app/services/app-insights.service'; import { MessagingService } from './services/messaging.service'; import { environment } from 'environments/environment'; +import { FooterPlayerComponent } from 'app/components/footer-player/footer-player.component'; +import { AudioService } from 'app/services/audio.service'; +import { HumaniseTimePipe } from './pipes/humanise-time.pipe'; export function authHttpServiceFactory(http: Http, options: RequestOptions) { return new AuthHttp( @@ -93,7 +96,9 @@ export function authHttpServiceFactory(http: Http, options: RequestOptions) { ResetComponent, ProfileComponent, AboutComponent, - FooterComponent + FooterComponent, + FooterPlayerComponent, + HumaniseTimePipe ], imports: [ BrowserModule, @@ -148,6 +153,7 @@ export function authHttpServiceFactory(http: Http, options: RequestOptions) { ChatterService, AppInsightsService, JobsService, + AudioService, GlobalsService ], bootstrap: [AppComponent] diff --git a/client/src/app/components/debug/debug.component.ts b/client/src/app/components/debug/debug.component.ts index 7f9efef..20e9ec5 100644 --- a/client/src/app/components/debug/debug.component.ts +++ b/client/src/app/components/debug/debug.component.ts @@ -18,7 +18,6 @@ export class DebugComponent implements OnInit { debugInfo$: Observable; apiHost = environment.API_HOST; - signalrHost = environment.SIGNALR_HOST; pingPong = ''; constructor( diff --git a/client/src/app/components/footer/footer.component.css b/client/src/app/components/footer/footer.component.css index 7a65e34..67adcf1 100644 --- a/client/src/app/components/footer/footer.component.css +++ b/client/src/app/components/footer/footer.component.css @@ -1,11 +1,9 @@ body { - margin-bottom: 60px; /* Margin bottom by footer height */ + margin-bottom: 90px; /* Margin bottom by footer height */ } .footer { position: absolute; bottom: 0; width: 100%; - height: 60px; /* Set the fixed height of the footer here */ - line-height: 60px; /* Vertically center the text there */ background-color: #f5f5f5; } diff --git a/client/src/app/components/footer/footer.component.html b/client/src/app/components/footer/footer.component.html index c655586..189c600 100644 --- a/client/src/app/components/footer/footer.component.html +++ b/client/src/app/components/footer/footer.component.html @@ -1,14 +1,5 @@ diff --git a/client/src/app/components/footer/footer.component.ts b/client/src/app/components/footer/footer.component.ts index 67f1378..f65ab49 100644 --- a/client/src/app/components/footer/footer.component.ts +++ b/client/src/app/components/footer/footer.component.ts @@ -1,15 +1,19 @@ import { Component, OnInit } from '@angular/core'; +import { AudioService } from 'app/services/audio.service'; @Component({ - selector: 'app-footer', - templateUrl: './footer.component.html', - styleUrls: ['./footer.component.css'] + selector: 'app-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.css'] }) export class FooterComponent implements OnInit { + showPlayer: boolean = false; + constructor(private _audioService: AudioService) {} - constructor() { } - - ngOnInit() { - } - + ngOnInit() { + console.log('footer.component', 'ngOnInit'); + this._audioService.playStateChanged.subscribe((s) => { + this.showPlayer = s != 0; + }); + } } diff --git a/client/src/app/components/podcast/entry-list-item/entry-list-item.component.html b/client/src/app/components/podcast/entry-list-item/entry-list-item.component.html index 4487802..783bb37 100644 --- a/client/src/app/components/podcast/entry-list-item/entry-list-item.component.html +++ b/client/src/app/components/podcast/entry-list-item/entry-list-item.component.html @@ -1,99 +1,72 @@ - +
-
- +
+

- +

-

+

{{entry.processingStatus}}| {{entry.createDate | amTimeAgo}}

- - - - - - - -
-
- {{percentageProcessed}}% -
-
- {{entry.processingStatus}}: {{currentSpeed}} -
-
-
-
-
- - - - - + + + + + + + +
+
+ {{percentageProcessed}}% +
+
+ {{entry.processingStatus}}: {{currentSpeed}} +
+
+
+
+
+ + + + + - + + + + + + -