diff --git a/.angular-cli.json b/.angular-cli.json index 024a10c2..d614eecc 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -7,10 +7,7 @@ { "root": "src", "outDir": "dist", - "assets": [ - "assets", - "favicon.ico" - ], + "assets": ["assets", "favicon.ico"], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", @@ -19,6 +16,7 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ + "../node_modules/font-awesome/scss/font-awesome.scss", "css/style.scss" ], "scripts": [], diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 6e87a003..00000000 --- a/.editorconfig +++ /dev/null @@ -1,13 +0,0 @@ -# Editor configuration, see http://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -insert_final_newline = true -trim_trailing_whitespace = true - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/CHANGELOG.md b/CHANGELOG.md index 332105d5..cf3737a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## v 3.9.8 (2018/04/29) (codename: Adi) + +* [PERF] - performance optimization using pipes with function utils +* [NEW] - cards videos & playlists rounded styles +* [UPGRADE] - app menu with animation in/out +* [REFACTOR] - using now more css utils to reduce css code +* [REFACTOR] - app-search component restructure + ## v 3.9.7 (2018/03/17) * [NEW] - added "Developed With YouTube" badge diff --git a/package.json b/package.json index fad50da4..d8c0d58e 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "echoes-player", - "version": "3.9.7", + "version": "3.9.8", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", - "start:prod": "ng serve --prod", + "start:prod": "ng serve --aot --build-optimizer", "build": "ng build", - "build:prod": "ng build --prod", + "build:prod": "ng build --aot --build-optimizer", "build:env": "node config/build-env.js", "postinstall": "npm rebuild node-sass", "copy:heroku": "shx cp -r ./config/heroku/*.* ./dist", @@ -33,15 +33,17 @@ "@angular/platform-browser": "5.2.7", "@angular/platform-browser-dynamic": "5.2.7", "@angular/router": "5.2.7", - "@ngrx/router": "1.0.0-beta.2", "core-js": "^2.4.1", "http-server": "0.10.0", + "memo-decorator": "1.0.1", + "node-sass": "4.7.2", "replace": "0.3.0", "rxjs": "^5.5.2", + "sass-loader": "7.0.1", "zone.js": "^0.8.14" }, "devDependencies": { - "@angular/cli": "^1.6.6", + "@angular/cli": "1.7.4", "@angular/compiler-cli": "5.2.7", "@angular/language-service": "5.2.7", "@ngrx/effects": "5.2.0", @@ -51,17 +53,16 @@ "@types/gapi": "0.0.35", "@types/gapi.auth2": "0.0.46", "@types/gapi.youtube": "3.0.34", - "@types/jasmine": "~2.5.53", + "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/youtube": "0.0.31", "bootstrap-sass": "3.3.7", "codelyzer": "^4.0.1", "font-awesome": "4.7.0", - "jasmine-core": "~2.6.2", + "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", - "karma": "~1.7.1", - "karma-chrome-launcher": "~2.1.1", - "karma-cli": "~1.0.1", + "karma": "~2.0.0", + "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", @@ -70,14 +71,14 @@ "ngrx-store-localstorage": "0.2.4", "ngx-infinite-scroll": "^0.8.2", "ngx-tooltip": "0.0.9", - "ngx-typeahead": "0.1.0", + "ngx-typeahead": "0.2.1", "ngx-youtube-player": "0.1.0", "prettier": "1.11.1", "protractor": "~5.1.2", "rimraf": "2.6.1", "shx": "0.2.2", "ts-node": "~3.2.0", - "tslint": "~5.7.0", - "typescript": "~2.4.2" + "tslint": "~5.9.1", + "typescript": "~2.5.3" } } diff --git a/src/app/app.component.scss b/src/app/app.component.scss index d7aa82d7..b2138190 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -2,24 +2,18 @@ :host { // DEFAULT THEME - 'arctic' - + background-color: var(--app-bg-color); display: block; height: 100%; - + .container-main { height: 100vh; display: block; - transition: margin .3s ease-out; + transition: margin 0.3s ease-out; margin-left: 0; } } -@media (min-width: 320px) { - :host .container-fluid.container-main { - padding-right: 0; - padding-left: 0; - } -} @media (min-width: 768px) { :host .closed + .container-main { margin-left: $sidebar-closed-width; @@ -29,4 +23,4 @@ :host .container-main { margin-left: $drawer-width; } -} \ No newline at end of file +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b15b29d5..95e307ad 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,6 +3,7 @@ import { VersionCheckerService } from './core/services/version-checker.service'; import { Component, HostBinding, OnInit } from '@angular/core'; import { EchoesState } from '@store/reducers'; import { getSidebarCollapsed, getAppTheme } from '@store/app-layout'; +import { AppApi } from '@core/api/app.api'; @Component({ selector: 'body', @@ -15,8 +16,13 @@ export class AppComponent implements OnInit { @HostBinding('class') style = 'arctic'; - constructor(private store: Store, private versionCheckerService: VersionCheckerService) { + constructor( + private store: Store, + private versionCheckerService: VersionCheckerService, + private appApi: AppApi + ) { versionCheckerService.start(); + appApi.checkUserAuth(); } ngOnInit() { diff --git a/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.scss b/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.scss index 36103e0f..ca4c1d03 100644 --- a/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.scss +++ b/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.scss @@ -2,36 +2,6 @@ @media (min-width: 320px) { :host { - @keyframes pulse { - 0% { - transform: scale(0); - opacity: 1; - } - 50% { - transform: scale(1); - opacity: 0.5; - } - 100% { - transform: scale(1.5); - opacity: 0; - } - } - - @keyframes slideInDown { - 0% { - transform: scale(0.4); - opacity: 0; - } - - 100% { - transform: scale(1); - opacity: 1; - } - } - .pulse { - animation: pulse 2s infinite; - } - .btn-toggle { padding: 1rem 1.5rem; font-size: 2rem; @@ -46,22 +16,31 @@ .menu-dropdown { position: absolute; right: 0; - top: -35rem; min-width: 250px; z-index: $zindex-navbar-fixed; + transform-origin: top right; + + &.end-animation { + top: -35rem; + } &.slideInDown { animation: slideInDown 0.5s 1; top: 5rem; transform-origin: top right; } - .menu-backdrop { - position: fixed; - top: 0; - bottom: 0; - right: 0; - left: 0; + &.slideOutDown { + animation: slideOutDown 0.8s 1 forwards; + top: 5rem; + transform-origin: top right; } } + .menu-backdrop { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + } } } diff --git a/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.spec.ts b/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.spec.ts index ded9179a..8af977b0 100644 --- a/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.spec.ts +++ b/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.spec.ts @@ -2,18 +2,21 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { AppNavbarMenuComponent } from './app-navbar-menu.component'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('AppNavbarMenuComponent', () => { let component: AppNavbarMenuComponent; let fixture: ComponentFixture; - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [AppNavbarMenuComponent], - schemas: [NO_ERRORS_SCHEMA] + beforeEach( + async(() => { + TestBed.configureTestingModule({ + declarations: [AppNavbarMenuComponent], + schemas: [NO_ERRORS_SCHEMA], + imports: [NoopAnimationsModule] + }).compileComponents(); }) - .compileComponents(); - })); + ); beforeEach(() => { fixture = TestBed.createComponent(AppNavbarMenuComponent); diff --git a/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.ts b/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.ts index d9cad873..28490c03 100644 --- a/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.ts +++ b/src/app/containers/app-navbar/app-navbar-menu/app-navbar-menu.component.ts @@ -1,4 +1,13 @@ -import { Component, OnInit, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener } from '@angular/core'; +import { + Component, + OnInit, + ChangeDetectionStrategy, + Input, + Output, + EventEmitter, + HostListener +} from '@angular/core'; +import { expandFadeInAnimation } from '@shared/animations/fade-in.animation'; enum Key { Backspace = 8, @@ -14,16 +23,19 @@ enum Key { @Component({ selector: 'app-navbar-menu', + animations: [expandFadeInAnimation], template: ` +
-
@@ -42,7 +50,7 @@ import { FormBuilder, FormGroup } from '@angular/forms'; changeDetection: ChangeDetectionStrategy.OnPush }) // (input)="onQueryChange()" -export class PlayerSearchComponent implements OnChanges { +export class PlayerSearchComponent implements OnChanges, OnDestroy { @Input() query; @Output() queryChange = new EventEmitter(); @Output() search = new EventEmitter(); @@ -51,6 +59,7 @@ export class PlayerSearchComponent implements OnChanges { @ViewChild('mediaSearch') mediaSearch; searchForm: FormGroup; + formState: Subscription; params = { hl: 'en', @@ -63,9 +72,11 @@ export class PlayerSearchComponent implements OnChanges { this.searchForm = fb.group({ searchInput: this.query }); - this.searchForm.valueChanges - .debounceTime(400) - .filter(value => !value.hasOwnProperty('isTrusted')) + this.formState = this.searchForm.valueChanges + .pipe( + debounceTime(400), + filter(value => !value.hasOwnProperty('isTrusted')) + ) .subscribe(formState => { this.onQueryChange(formState.searchInput); }); @@ -73,11 +84,19 @@ export class PlayerSearchComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { const changedQuery = changes && changes.query; - if (changedQuery) { + if ( + changedQuery && + changedQuery.currentValue && + changedQuery.currentValue.hasOwnProperty('length') + ) { this.patchSearchInput(changedQuery.currentValue); } } + ngOnDestroy() { + this.formState.unsubscribe(); + } + patchSearchInput(searchInput: string) { this.searchForm.patchValue({ searchInput }, { emitEvent: false }); } @@ -88,7 +107,7 @@ export class PlayerSearchComponent implements OnChanges { onSearch() { const searchFormState = this.searchForm.value; - this.search.emit(searchFormState.searchInput); + this.selectSuggestion(searchFormState.searchInput); } handleSelectSuggestion(suggestion: string) { @@ -96,6 +115,6 @@ export class PlayerSearchComponent implements OnChanges { } selectSuggestion(suggestion: string) { - this.search.emit(suggestion); + if (!suggestion.hasOwnProperty('isTrusted')) this.search.emit(suggestion); } } diff --git a/src/app/containers/app-search/player-search.scss b/src/app/containers/app-search/player-search/player-search.scss similarity index 100% rename from src/app/containers/app-search/player-search.scss rename to src/app/containers/app-search/player-search/player-search.scss diff --git a/src/app/containers/app-search/youtube-playlists/index.ts b/src/app/containers/app-search/youtube-playlists/index.ts new file mode 100644 index 00000000..63eee157 --- /dev/null +++ b/src/app/containers/app-search/youtube-playlists/index.ts @@ -0,0 +1 @@ +export * from './youtube-playlists.component'; diff --git a/src/app/containers/app-search/youtube-playlists.component.ts b/src/app/containers/app-search/youtube-playlists/youtube-playlists.component.ts similarity index 86% rename from src/app/containers/app-search/youtube-playlists.component.ts rename to src/app/containers/app-search/youtube-playlists/youtube-playlists.component.ts index 1d7b1e9c..fdca3ee4 100644 --- a/src/app/containers/app-search/youtube-playlists.component.ts +++ b/src/app/containers/app-search/youtube-playlists/youtube-playlists.component.ts @@ -13,22 +13,12 @@ import { fadeInAnimation } from '@shared/animations/fade-in.animation'; @Component({ selector: 'youtube-playlists', - styles: [ - ` - :host .youtube-items-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - } - ` - ], animations: [fadeInAnimation], template: `
-
- + , private userProfileActions: UserProfileActions, private appPlayerApi: AppPlayerApi, private appApi: AppApi - ) { } + ) {} goBack() { this.appApi.navigateBack(); @@ -37,18 +37,24 @@ export class PlaylistProxy { } fetchPlaylist(route: ActivatedRoute) { - return this.toRouteData(route).map((data: PlaylistData) => data.playlist); + return this.toRouteData(route).pipe( + map((data: PlaylistData) => data.playlist) + ); } fetchPlaylistVideos(route: ActivatedRoute) { - return this.toRouteData(route).map((data: PlaylistData) => data.videos); + return this.toRouteData(route).pipe( + map((data: PlaylistData) => data.videos) + ); } fetchPlaylistHeader(route: ActivatedRoute) { - return this.fetchPlaylist(route).map((playlist: GoogleApiYouTubePlaylistResource) => { - const { snippet, contentDetails } = playlist; - return `${snippet.title} (${contentDetails.itemCount} videos)`; - }); + return this.fetchPlaylist(route).pipe( + map((playlist: GoogleApiYouTubePlaylistResource) => { + const { snippet, contentDetails } = playlist; + return `${snippet.title} (${contentDetails.itemCount} videos)`; + }) + ); } playPlaylist(playlist: GoogleApiYouTubePlaylistResource) { diff --git a/src/app/core/api/app-player.api.ts b/src/app/core/api/app-player.api.ts index 9f90fd04..1593574f 100644 --- a/src/app/core/api/app-player.api.ts +++ b/src/app/core/api/app-player.api.ts @@ -7,8 +7,7 @@ import { EchoesState } from '@store/reducers'; import * as AppPlayer from '@store/app-player'; import * as fromNowPlaylist from '@store/now-playlist'; import { NowPlaylistEffects } from '@core/effects/now-playlist.effects'; - -import 'rxjs/add/operator/take'; +import { take, map } from 'rxjs/operators'; @Injectable() export class AppPlayerApi { @@ -19,8 +18,7 @@ export class AppPlayerApi { playPlaylist(playlist: GoogleApiYouTubePlaylistResource) { this.nowPlaylistEffects.playPlaylistFirstTrack$ - .map(toPayload) - .take(1) + .pipe(map(toPayload), take(1)) .subscribe((media: GoogleApiYouTubeVideoResource) => this.playVideo(media) ); diff --git a/src/app/core/api/app.api.ts b/src/app/core/api/app.api.ts index 56bb43a5..3c180e56 100644 --- a/src/app/core/api/app.api.ts +++ b/src/app/core/api/app.api.ts @@ -13,9 +13,7 @@ export class AppApi { appVersion$ = this.store.select(AppLayout.getAppVersion); user$ = this.store.select(UserActions.getUser); - constructor( - private store: Store - ) { } + constructor(private store: Store) {} toggleSidebar() { this.store.dispatch(new AppLayout.ToggleSidebar()); @@ -53,4 +51,8 @@ export class AppApi { signoutUser() { this.store.dispatch(new UserActions.UserSignout()); } + + checkUserAuth() { + this.store.dispatch(new UserActions.CheckUserAuth()); + } } diff --git a/src/app/core/components/now-playing/now-playlist/now-playlist-track.component.ts b/src/app/core/components/now-playing/now-playlist/now-playlist-track.component.ts index ab896716..20df8f04 100644 --- a/src/app/core/components/now-playing/now-playlist/now-playlist-track.component.ts +++ b/src/app/core/components/now-playing/now-playlist/now-playlist-track.component.ts @@ -1,6 +1,13 @@ import { MediaParserService } from '@core/services/media-parser.service'; -import { AfterContentInit, ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { extractThumbUrl } from '@shared/utils/media.utils'; +import { + AfterContentInit, + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + OnInit, + Output +} from '@angular/core'; @Component({ selector: 'now-playlist-track', @@ -12,7 +19,7 @@ import { extractThumbUrl } from '@shared/utils/media.utils'; (click)="markSelected(video)"> {{ index + 1 }} {{ video.contentDetails.duration | toFriendlyDuration }} @@ -43,7 +50,7 @@ import { extractThumbUrl } from '@shared/utils/media.utils';
@@ -55,43 +62,43 @@ import { extractThumbUrl } from '@shared/utils/media.utils'; `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class NowPlaylistTrackComponent implements OnInit, AfterContentInit { +export class NowPlaylistTrackComponent implements AfterContentInit { @Input() video: GoogleApiYouTubeVideoResource; @Input() index: number; @Output() remove = new EventEmitter(); @Output() select = new EventEmitter(); - @Output() selectTrack = new EventEmitter<{ time: string, media: GoogleApiYouTubeVideoResource }>(); + @Output() + selectTrack = new EventEmitter<{ + time: string; + media: GoogleApiYouTubeVideoResource; + }>(); displayTracks = false; displayInfo = false; tracks: string[] = []; - videoThumb = ''; + hasTracks = false; + private parsedTracks = false; - constructor(public mediaParser: MediaParserService) { } - - ngOnInit() { - this.videoThumb = extractThumbUrl(this.video); - } + constructor(public mediaParser: MediaParserService) {} ngAfterContentInit() { this.extractTracks(this.video); } extractTracks(media: GoogleApiYouTubeVideoResource) { - const tracks = this.mediaParser.extractTracks(media); - const isArray = Array.isArray(tracks); - if (isArray) { - this.parseAndSaveTracks(tracks); + if (!this.parsedTracks) { + const tracks = this.mediaParser.extractTracks(media); + if (Array.isArray(tracks)) { + this.parsedTracks = true; + this.tracks = tracks; + this.hasTracks = true; + } } } isPlaylistMedia(media: GoogleApiYouTubeVideoResource) { - return this.tracks.length; - } - - parseAndSaveTracks(tracks: string[]) { - this.tracks = this.mediaParser.parseTracks(tracks); + return this.hasTracks; } toggleTracks(media: GoogleApiYouTubeVideoResource) { @@ -104,7 +111,11 @@ export class NowPlaylistTrackComponent implements OnInit, AfterContentInit { this.toggleTracks(media); } - handleSelectTrack($event: Event, track: string, media: GoogleApiYouTubeVideoResource) { + handleSelectTrack( + $event: Event, + track: string, + media: GoogleApiYouTubeVideoResource + ) { $event.stopImmediatePropagation(); const time = this.mediaParser.extractTime(track); if (time) { diff --git a/src/app/core/effects/analytics.effects.ts b/src/app/core/effects/analytics.effects.ts index dda0c93e..5cefa83b 100644 --- a/src/app/core/effects/analytics.effects.ts +++ b/src/app/core/effects/analytics.effects.ts @@ -1,6 +1,4 @@ import { Store } from '@ngrx/store'; -import 'rxjs/add/operator/switchMapTo'; -import 'rxjs/add/operator/switchMap'; import { Injectable } from '@angular/core'; import { Effect, Actions } from '@ngrx/effects'; @@ -10,6 +8,7 @@ import { ActionTypes } from '@store/app-player'; import { AnalyticsService } from '@core/services/analytics.service'; import { EchoesState } from '@store/reducers'; import { toPayload } from '@utils/data.utils'; +import { tap, map, switchMap, withLatestFrom } from 'rxjs/operators'; @Injectable() export class AnalyticsEffects { @@ -23,19 +22,22 @@ export class AnalyticsEffects { @Effect({ dispatch: false }) trackToken$ = this.actions$ .ofType(UserProfileActions.USER_PROFILE_RECIEVED) - .map(toPayload) - .do(() => this.analytics.trackSignin()); + .pipe(map(toPayload), tap(() => this.analytics.trackSignin())); @Effect({ dispatch: false }) trackSearch$ = this.actions$ - .ofType(PlayerSearch.PlayerSearchActions.SEARCH_NEW_QUERY, PlayerSearch.PlayerSearchActions.SEARCH_MORE_FOR_QUERY) - .map(toPayload) - .withLatestFrom(this.store.select(PlayerSearch.getSearchType)) - .do((states: any[]) => this.analytics.trackSearch(states[1].presets)); + .ofType( + PlayerSearch.PlayerSearchActions.SEARCH_NEW_QUERY, + PlayerSearch.PlayerSearchActions.SEARCH_MORE_FOR_QUERY + ) + .pipe( + map(toPayload), + withLatestFrom(this.store.select(PlayerSearch.getSearchType)), + tap((states: any[]) => this.analytics.trackSearch(states[1].presets)) + ); @Effect({ dispatch: false }) trackPlay$ = this.actions$ .ofType(ActionTypes.PLAY_STARTED) - .map(toPayload) - .do(() => this.analytics.trackVideoPlay()); + .pipe(map(toPayload), tap(() => this.analytics.trackVideoPlay())); } diff --git a/src/app/core/effects/app-player.effects.ts b/src/app/core/effects/app-player.effects.ts index 97d399ee..80db4478 100644 --- a/src/app/core/effects/app-player.effects.ts +++ b/src/app/core/effects/app-player.effects.ts @@ -8,7 +8,13 @@ import { toPayload } from '@utils/data.utils'; import { of } from 'rxjs/observable/of'; import { Observable } from 'rxjs/Observable'; import { defer } from 'rxjs/observable/defer'; -import 'rxjs/add/operator/catch'; +import { + map, + switchMap, + tap, + withLatestFrom, + catchError +} from 'rxjs/operators'; import * as AppPlayer from '@store/app-player'; import { YoutubePlayerService } from '@core/services/youtube-player.service'; @@ -28,46 +34,56 @@ export class AppPlayerEffects { @Effect() playVideo$ = this.actions$ .ofType(AppPlayer.ActionTypes.PLAY) - .map(toPayload) - .switchMap(media => - of(this.youtubePlayerService.playVideo(media)).map( - (video: any) => new AppPlayer.PlayStarted(video) + .pipe( + map(toPayload), + switchMap(media => + of(this.youtubePlayerService.playVideo(media)).pipe( + map((video: any) => new AppPlayer.PlayStarted(video)) + ) ) ); @Effect({ dispatch: false }) pauseVideo$ = this.actions$ .ofType(AppPlayer.ActionTypes.PAUSE) - .do(() => this.youtubePlayerService.pause()); + .pipe(tap(() => this.youtubePlayerService.pause())); @Effect() loadAndPlay$ = this.actions$ .ofType(AppPlayer.ActionTypes.LOAD_AND_PLAY) - .map(toPayload) - .switchMap((media: any) => - this.youtubeVideosInfo - .fetchVideoData(media.id || media.id.videoId) - .map((video: any) => new AppPlayer.PlayVideo(video)) - ) - .catch(() => of({ type: 'LOAD_AND_PLAY_ERROR' })); + .pipe( + map(toPayload), + switchMap((media: any) => + this.youtubeVideosInfo + .fetchVideoData(media.id || media.id.videoId) + .pipe(map((video: any) => new AppPlayer.PlayVideo(video))) + ), + catchError(() => of({ type: 'LOAD_AND_PLAY_ERROR' })) + ); @Effect({ dispatch: false }) toggleFullscreen$ = this.actions$ .ofType(AppPlayer.ActionTypes.FULLSCREEN) - .withLatestFrom(this.store.select(AppPlayer.getPlayerFullscreen)) - .do((states: [any, { on; height; width }]) => - this.youtubePlayerService.setSize(states[1].height, states[1].width) + .pipe( + withLatestFrom(this.store.select(AppPlayer.getPlayerFullscreen)), + tap((states: [any, { on; height; width }]) => + this.youtubePlayerService.setSize(states[1].height, states[1].width) + ) ); @Effect({ dispatch: false }) setupPlayer$ = this.actions$ .ofType(AppPlayer.ActionTypes.SETUP_PLAYER) - .map(toPayload) - .do(player => this.youtubePlayerService.setupPlayer(player)); + .pipe( + map(toPayload), + tap(player => this.youtubePlayerService.setupPlayer(player)) + ); @Effect() playerStateChange$ = this.actions$ .ofType(AppPlayer.ActionTypes.PLAYER_STATE_CHANGE) - .map(toPayload) - .map((data: YT.PlayerState) => new AppPlayer.UpdateState(data)); + .pipe( + map(toPayload), + map((data: YT.PlayerState) => new AppPlayer.UpdateState(data)) + ); } diff --git a/src/app/core/effects/app-settings.effects.ts b/src/app/core/effects/app-settings.effects.ts index 8e207197..593a93d2 100644 --- a/src/app/core/effects/app-settings.effects.ts +++ b/src/app/core/effects/app-settings.effects.ts @@ -5,10 +5,10 @@ import { Injectable } from '@angular/core'; import { Effect, Actions } from '@ngrx/effects'; import { toPayload } from '@utils/data.utils'; -import 'rxjs/add/observable/of'; import { Observable } from 'rxjs/Observable'; +import { map } from 'rxjs/operators'; -import * as AppLayout from '@store/app-layout'; +import * as fromAppLayout from '@store/app-layout'; import { VersionCheckerService } from '@core/services/version-checker.service'; @Injectable() @@ -21,11 +21,11 @@ export class AppSettingsEffects { @Effect({ dispatch: false }) updateAppVersion$ = this.actions$ - .ofType(AppLayout.ActionTypes.APP_UPDATE_VERSION) - .map(() => this.versionCheckerService.updateVersion()); + .ofType(fromAppLayout.ActionTypes.APP_UPDATE_VERSION) + .pipe(map(() => this.versionCheckerService.updateVersion())); @Effect({ dispatch: false }) checkForNewAppVersion$ = this.actions$ - .ofType(AppLayout.ActionTypes.APP_CHECK_VERSION) - .map(() => this.versionCheckerService.checkForVersion()); + .ofType(fromAppLayout.ActionTypes.APP_CHECK_VERSION) + .pipe(map(() => this.versionCheckerService.checkForVersion())); } diff --git a/src/app/core/effects/now-playlist.effects.ts b/src/app/core/effects/now-playlist.effects.ts index 1bb2e741..8d11308a 100644 --- a/src/app/core/effects/now-playlist.effects.ts +++ b/src/app/core/effects/now-playlist.effects.ts @@ -13,6 +13,7 @@ import { Actions, Effect } from '@ngrx/effects'; import * as fromNowPlaylist from '@store/now-playlist'; import { UserProfile } from '@core/services/user-profile.service'; import { toPayload } from '@utils/data.utils'; +import { map, switchMap, withLatestFrom, filter, tap } from 'rxjs/operators'; @Injectable() export class NowPlaylistEffects { @@ -27,18 +28,22 @@ export class NowPlaylistEffects { @Effect() queueVideo$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.SELECT) - .map(toPayload) - .map( - (media: GoogleApiYouTubeVideoResource) => - new fromNowPlaylist.QueueVideo(media) + .pipe( + map(toPayload), + map( + (media: GoogleApiYouTubeVideoResource) => + new fromNowPlaylist.QueueVideo(media) + ) ); @Effect() playerStateChange$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.PLAYER_STATE_CHANGE) - .map(toPayload) - .filter((data: YT.PlayerState) => data === YT.PlayerState.ENDED) - .map(() => new fromNowPlaylist.MediaEnded()); + .pipe( + map(toPayload), + filter((data: YT.PlayerState) => data === YT.PlayerState.ENDED), + map(() => new fromNowPlaylist.MediaEnded()) + ); /* if it's the last track * AND repeat is on @@ -47,76 +52,79 @@ export class NowPlaylistEffects { @Effect() loadNextTrack$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.MEDIA_ENDED) - .map(toPayload) - .withLatestFrom(this.store.select(fromNowPlaylist.getSelectedMedia)) - .filter( - (states: [any, GoogleApiYouTubeVideoResource]) => - states[1] && states[1].hasOwnProperty('id') - ) - .map( - (states: [any, GoogleApiYouTubeVideoResource]) => - new fromNowPlaylist.SelectVideo(states[1]) + .pipe( + map(toPayload), + withLatestFrom(this.store.select(fromNowPlaylist.getSelectedMedia)), + filter( + (states: [any, GoogleApiYouTubeVideoResource]) => + states[1] && states[1].hasOwnProperty('id') + ), + map( + (states: [any, GoogleApiYouTubeVideoResource]) => + new fromNowPlaylist.SelectVideo(states[1]) + ) ); @Effect() selectBeforeSeekToTime$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.SELECT_AND_SEEK_TO_TIME) - .map(toPayload) - .map( - trackEvent => new fromNowPlaylist.UpdateIndexByMedia(trackEvent.media.id) + .pipe( + map(toPayload), + map( + trackEvent => + new fromNowPlaylist.UpdateIndexByMedia(trackEvent.media.id) + ) ); @Effect({ dispatch: false }) seekToTime$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.SELECT_AND_SEEK_TO_TIME) - .map(toPayload) - .do(trackEvent => - this.playerService.seekTo(this.mediaParser.toNumber(trackEvent.time)) + .pipe( + map(toPayload), + tap(trackEvent => + this.playerService.seekTo(this.mediaParser.toNumber(trackEvent.time)) + ) ); - // .catch((error) => of({ type: 'ERROR_IN_SEEK', payload: error })); @Effect() loadPlaylist$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.LOAD_PLAYLIST_START) - .map(toPayload) - .switchMap((id: string) => this.userProfile.fetchAllPlaylistItems(id)) - // .mergeMap((playlistId: string) => this.loadPlaylistItems$(playlistId)) - // .switchMap((playlistId: string) => this.userProfile.fetchAllPlaylistItems(playlistId)) - // .switchMap((playlistItems: GoogleApiYouTubePlaylistItemResource[]) => this.userProfile.fetchMetadata(playlistItems)) - .map( - (playlistItems: GoogleApiYouTubeVideoResource[]) => - new fromNowPlaylist.LoadPlaylistEndAction(playlistItems) + .pipe( + map(toPayload), + switchMap((id: string) => this.userProfile.fetchAllPlaylistItems(id)), + map( + (playlistItems: GoogleApiYouTubeVideoResource[]) => + new fromNowPlaylist.LoadPlaylistEndAction(playlistItems) + ) ); @Effect() addPlaylistItems$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.LOAD_PLAYLIST_END) - .map(toPayload) - .map( - (playlistItems: GoogleApiYouTubeVideoResource[]) => - new fromNowPlaylist.QueueVideos(playlistItems) + .pipe( + map(toPayload), + map( + (playlistItems: GoogleApiYouTubeVideoResource[]) => + new fromNowPlaylist.QueueVideos(playlistItems) + ) ); @Effect() playPlaylistFirstTrack$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.LOAD_PLAYLIST_END) - .map(toPayload) - .map( - (playlistItems: GoogleApiYouTubeVideoResource[]) => - new fromNowPlaylist.SelectVideo(playlistItems[0]) + .pipe( + map(toPayload), + map( + (playlistItems: GoogleApiYouTubeVideoResource[]) => + new fromNowPlaylist.SelectVideo(playlistItems[0]) + ) ); @Effect() playPlaylist$ = this.actions$ .ofType(fromNowPlaylist.ActionTypes.PLAY_PLAYLIST) - .map(toPayload) - .map((id: string) => new fromNowPlaylist.LoadPlaylistAction(id)); - // .map(queue the playlist - // .map(play the first track from this playlist) - - // loadPlaylistItems$(playlistId: string) { - // return of(playlistId) - // .switchMap((id: string) => this.userProfile.fetchAllPlaylistItems(id)) - // .switchMap((playlistItems: GoogleApiYouTubeVideoResource[]) => this.userProfile.fetchMetadata(playlistItems)); - // } + .pipe( + map(toPayload), + map((id: string) => new fromNowPlaylist.LoadPlaylistAction(id)) + ); } diff --git a/src/app/core/effects/player-search.effects.ts b/src/app/core/effects/player-search.effects.ts index 2f2c64f3..fa605c3e 100644 --- a/src/app/core/effects/player-search.effects.ts +++ b/src/app/core/effects/player-search.effects.ts @@ -1,13 +1,18 @@ import { YoutubeVideosInfo } from '@core/services'; import { Store } from '@ngrx/store'; import { EchoesState } from '@store/reducers'; -import 'rxjs/add/operator/mergeAll'; -import 'rxjs/add/operator/switchMapTo'; -import 'rxjs/add/operator/withLatestFrom'; -import 'rxjs/add/operator/catch'; import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; +import { + map, + switchMap, + filter, + withLatestFrom, + mergeAll, + catchError, + mergeMap +} from 'rxjs/operators'; import { Injectable } from '@angular/core'; import { Effect, Actions } from '@ngrx/effects'; import * as fromPlayerSearch from '@store/player-search'; @@ -28,21 +33,25 @@ export class PlayerSearchEffects { @Effect() searchQuery$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.SEARCH_NEW_QUERY) - .map(toPayload) - .withLatestFrom(this.store) - .map((latest: any[]) => latest[1]) - .switchMap((store: EchoesState) => - this.youtubeSearch - .resetPageToken() - .searchFor( - store.search.searchType, - store.search.query, - store.search.queryParams - ) - .map(youtubeResponse => - this.playerSearchActions.searchResultsReturned(youtubeResponse) - ) - .catch(err => of(this.playerSearchActions.errorInSearch(err))) + .pipe( + map(toPayload), + withLatestFrom(this.store), + map((latest: any[]) => latest[1]), + switchMap((store: EchoesState) => + this.youtubeSearch + .resetPageToken() + .searchFor( + store.search.searchType, + store.search.query, + store.search.queryParams + ) + .pipe( + map(youtubeResponse => + this.playerSearchActions.searchResultsReturned(youtubeResponse) + ), + catchError(err => of(this.playerSearchActions.errorInSearch(err))) + ) + ) ); @Effect() @@ -51,110 +60,134 @@ export class PlayerSearchEffects { fromPlayerSearch.PlayerSearchActions.SEARCH_NEW_QUERY, fromPlayerSearch.PlayerSearchActions.PLAYLISTS_SEARCH_START.action ) - .map(() => this.playerSearchActions.resetResults()); + .pipe(map(() => this.playerSearchActions.resetResults())); @Effect() searchResultsReturned$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.SEARCH_RESULTS_RETURNED) - .map(toPayload) - .withLatestFrom(this.store.select(fromPlayerSearch.getSearchType)) - .map((states: [any[], string]) => { - if (states[1] === fromPlayerSearch.CSearchTypes.VIDEO) { - return fromPlayerSearch.PlayerSearchActions.ADD_METADATA_TO_VIDEOS.creator( + .pipe( + map(toPayload), + withLatestFrom(this.store.select(fromPlayerSearch.getSearchType)), + map((states: [any[], string]) => { + if (states[1] === fromPlayerSearch.CSearchTypes.VIDEO) { + return fromPlayerSearch.PlayerSearchActions.ADD_METADATA_TO_VIDEOS.creator( + states[0] + ); + } + return fromPlayerSearch.PlayerSearchActions.ADD_PLAYLISTS_TO_RESULTS.creator( states[0] ); - } - return fromPlayerSearch.PlayerSearchActions.ADD_PLAYLISTS_TO_RESULTS.creator( - states[0] - ); - }); + }) + ); @Effect() addPlaylistsToResults$ = this.actions$ .ofType( fromPlayerSearch.PlayerSearchActions.ADD_PLAYLISTS_TO_RESULTS.action ) - .map(toPayload) - .map(result => fromPlayerSearch.AddResultsAction.creator(result.items)); + .pipe( + map(toPayload), + map(result => fromPlayerSearch.AddResultsAction.creator(result.items)) + ); @Effect() addMetadataToVideos$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.ADD_METADATA_TO_VIDEOS.action) - .map(toPayload) - .map((medias: { items: GoogleApiYouTubeSearchResource[] }) => - medias.items.map(media => media.id.videoId).join(',') - ) - .mergeMap((mediaIds: string) => - this.youtubeVideosInfo - .fetchVideosData(mediaIds) - .map((videos: any) => fromPlayerSearch.AddResultsAction.creator(videos)) + .pipe( + map(toPayload), + map((medias: { items: GoogleApiYouTubeSearchResource[] }) => + medias.items.map(media => media.id.videoId).join(',') + ), + mergeMap((mediaIds: string) => + this.youtubeVideosInfo + .fetchVideosData(mediaIds) + .pipe( + map((videos: any) => + fromPlayerSearch.AddResultsAction.creator(videos) + ) + ) + ) ); @Effect() searchMoreForQuery$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.SEARCH_MORE_FOR_QUERY) - .map(toPayload) - .withLatestFrom(this.store) - .map((latest: any[]) => latest[1]) - .filter((store: EchoesState) => !store.search.isSearching) - .mergeMap((store: EchoesState) => { - this.youtubeSearch.searchMore(store.search.pageToken.next); - return this.youtubeSearch - .searchFor( - store.search.searchType, - store.search.query, - store.search.queryParams - ) - .map(youtubeResponse => - this.playerSearchActions.searchResultsReturned(youtubeResponse) - ); - }); + .pipe( + map(toPayload), + withLatestFrom(this.store), + map((latest: any[]) => latest[1]), + filter((store: EchoesState) => !store.search.isSearching), + mergeMap((store: EchoesState) => { + this.youtubeSearch.searchMore(store.search.pageToken.next); + return this.youtubeSearch + .searchFor( + store.search.searchType, + store.search.query, + store.search.queryParams + ) + .pipe( + map(youtubeResponse => + this.playerSearchActions.searchResultsReturned(youtubeResponse) + ) + ); + }) + ); @Effect() searchMoreSearchStarted$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.SEARCH_MORE_FOR_QUERY) - .map(toPayload) - .withLatestFrom(this.store.select(fromPlayerSearch.getIsSearching)) - .filter((states: [any, boolean]) => !states[1]) - .map(() => this.playerSearchActions.searchStarted()); + .pipe( + map(toPayload), + withLatestFrom(this.store.select(fromPlayerSearch.getIsSearching)), + filter((states: [any, boolean]) => !states[1]), + map(() => this.playerSearchActions.searchStarted()) + ); @Effect() updatePreset$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.UPDATE_QUERY_PARAM) - .map(() => new fromPlayerSearch.SearchCurrentQuery()); + .pipe(map(() => new fromPlayerSearch.SearchCurrentQuery())); @Effect() resetVideosAfterParamUpdate$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.UPDATE_QUERY_PARAM) - .map(() => this.playerSearchActions.resetResults()); + .pipe(map(() => this.playerSearchActions.resetResults())); @Effect() resetPageToken$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.RESET_PAGE_TOKEN) - .map(toPayload) - .mergeMap(() => of(this.youtubeSearch.resetPageToken())) - .map(() => ({ type: 'PAGE_RESET_DONE' })); + .pipe( + map(toPayload), + mergeMap(() => of(this.youtubeSearch.resetPageToken())), + map(() => ({ type: 'PAGE_RESET_DONE' })) + ); @Effect() searchCurrentQuery$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.SEARCH_CURRENT_QUERY) - .map(toPayload) - .withLatestFrom(this.store.select(fromPlayerSearch.getQuery)) - .map((latest: any[]) => latest[1]) - .map((query: string) => this.playerSearchActions.searchNewQuery(query)); + .pipe( + map(toPayload), + withLatestFrom(this.store.select(fromPlayerSearch.getQuery)), + map((latest: any[]) => latest[1]), + map((query: string) => this.playerSearchActions.searchNewQuery(query)) + ); // Playlists SEARCH EFFECTS @Effect() playlistsSearchStart$ = this.actions$ .ofType(fromPlayerSearch.PlayerSearchActions.PLAYLISTS_SEARCH_START.action) - .withLatestFrom(this.store) - .map((latest: any[]) => latest[1]) - .switchMap((store: EchoesState) => - this.youtubeSearch - .searchForPlaylist(store.search.query, store.search.queryParams) - .map((youtubeResponse: any) => - fromPlayerSearch.AddResultsAction.creator(youtubeResponse.items) - ) - ) - .catch(err => of(this.playerSearchActions.errorInSearch(err))); + .pipe( + withLatestFrom(this.store), + map((latest: any[]) => latest[1]), + switchMap((store: EchoesState) => + this.youtubeSearch + .searchForPlaylist(store.search.query, store.search.queryParams) + .pipe( + map((youtubeResponse: any) => + fromPlayerSearch.AddResultsAction.creator(youtubeResponse.items) + ), + catchError(err => of(this.playerSearchActions.errorInSearch(err))) + ) + ) + ); } diff --git a/src/app/core/effects/router.effects.ts b/src/app/core/effects/router.effects.ts index 4259eb88..90f0402d 100644 --- a/src/app/core/effects/router.effects.ts +++ b/src/app/core/effects/router.effects.ts @@ -1,24 +1,35 @@ -import 'rxjs/add/operator/do'; -import 'rxjs/add/operator/map'; import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { Location } from '@angular/common'; import { Effect, Actions } from '@ngrx/effects'; -import * as RouterActions from '@store/router-store'; +import * as fromRouterActions from '@store/router-store'; +import { map, tap } from 'rxjs/operators'; @Injectable() export class RouterEffects { @Effect({ dispatch: false }) navigate$ = this.actions$ - .ofType(RouterActions.GO) - .map((action: RouterActions.Go) => action.payload) - .do(({ path, query: queryParams, extras }) => this.router.navigate(path, { queryParams, ...extras })); + .ofType(fromRouterActions.GO) + .pipe( + map((action: fromRouterActions.Go) => action.payload), + tap(({ path, query: queryParams, extras }) => + this.router.navigate(path, { queryParams, ...extras }) + ) + ); @Effect({ dispatch: false }) - navigateBack$ = this.actions$.ofType(RouterActions.BACK).do(() => this.location.back()); + navigateBack$ = this.actions$ + .ofType(fromRouterActions.BACK) + .pipe(tap(() => this.location.back())); @Effect({ dispatch: false }) - navigateForward$ = this.actions$.ofType(RouterActions.FORWARD).do(() => this.location.forward()); + navigateForward$ = this.actions$ + .ofType(fromRouterActions.FORWARD) + .pipe(tap(() => this.location.forward())); - constructor(private actions$: Actions, private router: Router, private location: Location) { } + constructor( + private actions$: Actions, + private router: Router, + private location: Location + ) {} } diff --git a/src/app/core/effects/user-profile.effects.ts b/src/app/core/effects/user-profile.effects.ts index 43a7869b..7bce0160 100644 --- a/src/app/core/effects/user-profile.effects.ts +++ b/src/app/core/effects/user-profile.effects.ts @@ -1,6 +1,6 @@ import { of } from 'rxjs/observable/of'; import { defer } from 'rxjs/observable/defer'; -import { map, switchMap, tap } from 'rxjs/operators'; +import { map, switchMap, tap, catchError } from 'rxjs/operators'; import { Injectable } from '@angular/core'; import { Effect, Actions, ofType } from '@ngrx/effects'; import { UserProfileActions, GoogleBasicProfile } from '@store/user-profile'; @@ -20,8 +20,13 @@ export class UserProfileEffects { ) {} @Effect() - init$ = defer(() => this.auth.loadAuth()).pipe( - map((googleUser: gapi.auth2.GoogleUser) => new UserActions.UserSigninSuccess(googleUser)) + checkUserAuth$ = this.actions$.pipe( + ofType(UserProfileActions.CHECK_USER_AUTH), + switchMap(() => this.auth.loadAuth()), + map( + (googleUser: gapi.auth2.GoogleUser) => + new UserActions.UserSigninSuccess(googleUser) + ) ); @Effect() @@ -30,10 +35,12 @@ export class UserProfileEffects { map(toPayload), map((token: string) => (this.auth.accessToken = token)), switchMap(token => - this.userProfile.getPlaylists(true).catch((error: Error) => { - console.log(`error in fetching user's playlists ${error}`); - return of(error); - }) + this.userProfile.getPlaylists(true).pipe( + catchError((error: Error) => { + console.log(`error in fetching user's playlists ${error}`); + return of(error); + }) + ) ), map(response => this.userProfileActions.updateData(response)) ); @@ -71,7 +78,9 @@ export class UserProfileEffects { ofType(UserProfileActions.USER_PROFILE_RECIEVED), map(toPayload), map(profile => this.userProfile.toUserJson(profile)), - map((profile: GoogleBasicProfile) => this.userProfileActions.updateUserProfile(profile)) + map((profile: GoogleBasicProfile) => + this.userProfileActions.updateUserProfile(profile) + ) ); // SIGN IN/OUT EFFECTS @@ -84,7 +93,11 @@ export class UserProfileEffects { @Effect() userSigninStart$ = this.actions$.pipe( ofType(UserProfileActions.USER_SIGNIN_START), - switchMap(() => this.auth.signIn().catch(error => this.auth.handleFailedLogin(error))), + switchMap(() => + this.auth + .signIn() + .pipe(catchError(error => this.auth.handleFailedLogin(error))) + ), map((response: any) => new UserActions.UserSigninSuccess(response)) ); @@ -98,7 +111,9 @@ export class UserProfileEffects { updateTokenAfterSigninSuccess$ = this.actions$.pipe( ofType(UserProfileActions.USER_SIGNIN_SUCCESS), map(toPayload), - map((googleUser: gapi.auth2.GoogleUser) => this.userProfileActions.updateToken(this.auth.extractToken(googleUser))) + map((googleUser: gapi.auth2.GoogleUser) => + this.userProfileActions.updateToken(this.auth.extractToken(googleUser)) + ) ); @Effect() diff --git a/src/app/core/resolvers/playlist.resolver.ts b/src/app/core/resolvers/playlist.resolver.ts index 4d0ad1f6..29186c89 100644 --- a/src/app/core/resolvers/playlist.resolver.ts +++ b/src/app/core/resolvers/playlist.resolver.ts @@ -2,16 +2,18 @@ import { Observable } from 'rxjs/Observable'; import { UserProfile } from '@core/services'; import { ActivatedRouteSnapshot, Resolve } from '@angular/router'; import { Injectable } from '@angular/core'; +import { map } from 'rxjs/operators'; @Injectable() export class PlaylistResolver implements Resolve { - constructor( - private userProfile: UserProfile, - ) { } + constructor(private userProfile: UserProfile) {} - resolve(route: ActivatedRouteSnapshot): Observable { + resolve( + route: ActivatedRouteSnapshot + ): Observable { const playlistId = route.params['id']; - return this.userProfile.fetchPlaylist(playlistId) - .map(response => response.items[0]); + return this.userProfile + .fetchPlaylist(playlistId) + .pipe(map(response => response.items[0])); } } diff --git a/src/app/core/services/analytics.service.ts b/src/app/core/services/analytics.service.ts index e94e618c..a186905d 100644 --- a/src/app/core/services/analytics.service.ts +++ b/src/app/core/services/analytics.service.ts @@ -22,26 +22,39 @@ const CustomEvents = { @Injectable() export class AnalyticsService { private projectId = window['GA_PROJECT_ID']; + private gtag: any; - constructor() { } + constructor() { + this.assignGtag(); + } + + assignGtag() { + const hasGtagLoaded = 'gtag' in window; + if (!hasGtagLoaded) { + console.info('GTAG has not been loaded'); + } + this.gtag = hasGtagLoaded ? gtag : () => undefined; + } trackPage(page) { - gtag('config', this.projectId, { - 'page_title': page, - 'page_location': location.origin, - 'page_path': location.hash + this.gtag('config', this.projectId, { + page_title: page, + page_location: location.origin, + page_path: location.hash }); } trackSearch(searchType) { - gtag('event', Events.Search.NAME, { [Events.Search.LABEL]: searchType }); + this.gtag('event', Events.Search.NAME, { + [Events.Search.LABEL]: searchType + }); } trackSignin() { - gtag('event', Events.Login.NAME, { [Events.Login.LABEL]: 'Google' }); + this.gtag('event', Events.Login.NAME, { [Events.Login.LABEL]: 'Google' }); } trackVideoPlay() { - gtag('event', CustomEvents.VIDEO_PLAY); + this.gtag('event', CustomEvents.VIDEO_PLAY); } } diff --git a/src/app/core/services/authorization.service.ts b/src/app/core/services/authorization.service.ts index 902d805f..86a1c49b 100644 --- a/src/app/core/services/authorization.service.ts +++ b/src/app/core/services/authorization.service.ts @@ -1,21 +1,23 @@ +import { fromPromise } from 'rxjs/observable/fromPromise'; import { Subscription } from 'rxjs/Subscription'; import { Injectable, NgZone } from '@angular/core'; import { Observable } from 'rxjs/Observable'; -import 'rxjs/add/observable/fromPromise'; -import 'rxjs/add/operator/do'; -import 'rxjs/add/operator/map'; -import 'rxjs/add/operator/switchMap'; -import 'rxjs/add/operator/filter'; -import 'rxjs/add/operator/timeInterval'; -import 'rxjs/add/operator/retry'; -import 'rxjs/add/operator/catch'; - +import { + switchMap, + map, + filter, + tap, + timeInterval, + retry, + catchError +} from 'rxjs/operators'; import { environment } from '@env/environment'; import { GapiLoader } from './gapi-loader.service'; const extractAccessToken = (_googleAuth: gapi.auth2.GoogleAuth) => { - return _googleAuth - && _googleAuth.currentUser.get().getAuthResponse().access_token; + return ( + _googleAuth && _googleAuth.currentUser.get().getAuthResponse().access_token + ); }; @Injectable() @@ -34,28 +36,25 @@ export class Authorization { fromApp: this._accessToken, equal: true }; - window['__token__'] = token; - token.equal = token.fromGoogle === token.fromApp; - return token.equal - ? token.fromApp - : token.fromGoogle; + return token.fromGoogle; } - constructor( - private zone: NgZone, - private gapiLoader: GapiLoader, - ) { } + constructor(private zone: NgZone, private gapiLoader: GapiLoader) {} loadAuth() { // attempt to SILENT authorize - return this.gapiLoader - .load('auth2') - .switchMap(() => this.authorize()) - .do((googleAuth: gapi.auth2.GoogleAuth) => this.saveGoogleAuth(googleAuth)) - .do((googleAuth: gapi.auth2.GoogleAuth) => this.listenToGoogleAuthSignIn(googleAuth)) - .filter((googleAuth: gapi.auth2.GoogleAuth) => this.isSignIn()) - .filter((googleAuth: gapi.auth2.GoogleAuth) => this.hasAccessToken(googleAuth)) - .map((googleAuth: gapi.auth2.GoogleAuth) => googleAuth.currentUser.get()); + return this.gapiLoader.load('auth2').pipe( + switchMap(() => this.authorize()), + tap((googleAuth: gapi.auth2.GoogleAuth) => { + this.saveGoogleAuth(googleAuth); + this.listenToGoogleAuthSignIn(googleAuth); + }), + filter( + (googleAuth: gapi.auth2.GoogleAuth) => + this.isSignIn() && this.hasAccessToken(googleAuth) + ), + map((googleAuth: gapi.auth2.GoogleAuth) => googleAuth.currentUser.get()) + ); } authorize() { @@ -66,14 +65,22 @@ export class Authorization { client_id: environment.youtube.CLIENT_ID, scope: this._scope }; - return Observable.fromPromise(window['gapi'].auth2.init(authOptions)); + return window['gapi'].auth2.init(authOptions); } private hasAccessToken(googleAuth: gapi.auth2.GoogleAuth): boolean { - return googleAuth && googleAuth.currentUser.get().getAuthResponse().hasOwnProperty('access_token'); + return ( + googleAuth && + googleAuth.currentUser + .get() + .getAuthResponse() + .hasOwnProperty('access_token') + ); } - private saveGoogleAuth(googleAuth: gapi.auth2.GoogleAuth): gapi.auth2.GoogleAuth { + private saveGoogleAuth( + googleAuth: gapi.auth2.GoogleAuth + ): gapi.auth2.GoogleAuth { this._googleAuth = googleAuth; return googleAuth; } @@ -87,9 +94,9 @@ export class Authorization { signIn() { const signOptions: gapi.auth2.SigninOptions = { scope: this._scope }; if (this._googleAuth) { - return Observable.fromPromise(this._googleAuth.signIn(signOptions)); + return fromPromise(this._googleAuth.signIn(signOptions)); } - return new Observable((obs) => obs.complete()); + return new Observable(obs => obs.complete()); } extractToken(googleUser: gapi.auth2.GoogleUser) { @@ -107,15 +114,21 @@ export class Authorization { startTimerToNextAuth(timeInMs: number): Subscription { return Observable.timer(timeInMs) - .timeInterval() - .switchMap(() => this.authorize()) - .do((googleAuth: gapi.auth2.GoogleAuth) => this.saveGoogleAuth(googleAuth)) - .map((googleAuth: gapi.auth2.GoogleAuth) => googleAuth.currentUser.get()) - .retry(3) - .catch((error) => { - window.location.reload(); - return error; - }) + .pipe( + timeInterval(), + switchMap(() => this.authorize()), + tap((googleAuth: gapi.auth2.GoogleAuth) => + this.saveGoogleAuth(googleAuth) + ), + map((googleAuth: gapi.auth2.GoogleAuth) => + googleAuth.currentUser.get() + ), + retry(3), + catchError(error => { + window.location.reload(); + return error; + }) + ) .subscribe((googleUser: gapi.auth2.GoogleUser) => { this.zone.run(() => this.setAuthTimer(googleUser)); }); @@ -134,7 +147,7 @@ export class Authorization { } signOut() { - return Observable.fromPromise(this._googleAuth.signOut()); + return this._googleAuth.signOut(); } disposeAutoSignIn() { diff --git a/src/app/core/services/gapi-loader.service.ts b/src/app/core/services/gapi-loader.service.ts index 40b8a765..f96b8db6 100644 --- a/src/app/core/services/gapi-loader.service.ts +++ b/src/app/core/services/gapi-loader.service.ts @@ -7,33 +7,34 @@ export class GapiLoader { private _api: Observable; private api: Subject; - constructor() { } + constructor() {} + + loadGoogleApi(api, api$) { + const gapi = 'https://apis.google.com/js/api.js'; + const script = document.createElement('script'); + script.addEventListener('load', () => this._loadApi(api, api$)); + script.setAttribute('src', gapi); + document.body.appendChild(script); + } load(api: string) { - return this.createApi(api); + const api$ = this.createApi(api); + this.loadGoogleApi(api, api$); + return api$; } - _loadApi(api: string, observer) { + + _loadApi(api: string, api$) { const gapi = window['gapi']; const gapiAuthLoaded = gapi && gapi.auth2 && gapi.auth2.getAuthInstance(); if (gapiAuthLoaded && gapiAuthLoaded.currentUser) { - return observer.next(gapiAuthLoaded); + api$.complete(gapiAuthLoaded); + } else { + gapi.load(api, response => api$.next(response)); } - gapi.load(api, response => observer.next(response)); } createApi(api: string) { const api$ = new Subject(); - const gapi = window['gapi']; - // this._api = new Observable(observer => { - const isGapiLoaded = gapi && gapi.load; - const onApiLoaded = () => this._loadApi(api, api$); - if (isGapiLoaded) { - onApiLoaded(); - } else { - window['apiLoaded'] = onApiLoaded; - } - // }); - // return this._api; return api$; } } diff --git a/src/app/core/services/now-playlist.service.ts b/src/app/core/services/now-playlist.service.ts index 94baa290..ad41dbbd 100644 --- a/src/app/core/services/now-playlist.service.ts +++ b/src/app/core/services/now-playlist.service.ts @@ -1,9 +1,10 @@ import { Injectable } from '@angular/core'; -import { Store } from '@ngrx/store'; +import { Store, select } from '@ngrx/store'; import { Observable } from 'rxjs/Observable'; import { EchoesState } from '@store/reducers'; import * as fromNowPlaylist from '@store/now-playlist'; import { YoutubeVideosInfo } from './youtube-videos-info.service'; +import { map, take } from 'rxjs/operators'; @Injectable() export class NowPlaylistService { @@ -11,13 +12,15 @@ export class NowPlaylistService { constructor( public store: Store, - private youtubeVideosInfo: YoutubeVideosInfo, + private youtubeVideosInfo: YoutubeVideosInfo ) { - this.playlist$ = this.store.select(fromNowPlaylist.getNowPlaylist); + this.playlist$ = this.store.pipe(select(fromNowPlaylist.getNowPlaylist)); } queueVideo(mediaId: string) { - return this.youtubeVideosInfo.api.list(mediaId).map(items => items[0]); + return this.youtubeVideosInfo.api + .list(mediaId) + .pipe(map(items => items[0])); } queueVideos(medias: GoogleApiYouTubeVideoResource[]) { @@ -54,7 +57,7 @@ export class NowPlaylistService { getCurrent() { let media; - this.playlist$.take(1).subscribe(playlist => { + this.playlist$.pipe(take(1)).subscribe(playlist => { media = playlist.videos.find(video => video.id === playlist.selectedId); }); return media; @@ -66,9 +69,13 @@ export class NowPlaylistService { isInLastTrack(): boolean { let nowPlaylist: fromNowPlaylist.INowPlaylist; - this.playlist$.take(1).subscribe(_nowPlaylist => (nowPlaylist = _nowPlaylist)); + this.playlist$ + .pipe(take(1)) + .subscribe(_nowPlaylist => (nowPlaylist = _nowPlaylist)); const currentVideoId = nowPlaylist.selectedId; - const indexOfCurrentVideo = nowPlaylist.videos.findIndex(video => video.id === currentVideoId); + const indexOfCurrentVideo = nowPlaylist.videos.findIndex( + video => video.id === currentVideoId + ); const isCurrentLast = indexOfCurrentVideo + 1 === nowPlaylist.videos.length; return isCurrentLast; } diff --git a/src/app/core/services/user-profile.service.ts b/src/app/core/services/user-profile.service.ts index 1f14532c..610383df 100644 --- a/src/app/core/services/user-profile.service.ts +++ b/src/app/core/services/user-profile.service.ts @@ -3,14 +3,12 @@ import { Subscription } from 'rxjs/Subscription'; import { HttpClient } from '@angular/common/http'; import { Injectable, NgZone } from '@angular/core'; -import 'rxjs/add/operator/switchMap'; -import 'rxjs/add/operator/buffer'; - import { YoutubeApiService } from './youtube-api.service'; import { YoutubeVideosInfo } from './youtube-videos-info.service'; import { Authorization } from './authorization.service'; import { GoogleBasicProfile } from '@store/user-profile'; +import { switchMap, take } from 'rxjs/operators'; @Injectable() export class UserProfile { @@ -25,33 +23,42 @@ export class UserProfile { private youtubeVideosInfo: YoutubeVideosInfo, private authorization: Authorization ) { - this.playlistInfo = new YoutubeApiService({ - url: 'https://www.googleapis.com/youtube/v3/playlistItems', - http: this.http, - idKey: 'playlistId', - config: { - mine: 'true' - } - }, authorization); + this.playlistInfo = new YoutubeApiService( + { + url: 'https://www.googleapis.com/youtube/v3/playlistItems', + http: this.http, + idKey: 'playlistId', + config: { + mine: 'true' + } + }, + authorization + ); // TODO - extract to a Model / Reducer? // Reducer - because nextPageToken is changed // Model - new _config should be recreated easily with a new nextPageToken - this.playlists = new YoutubeApiService({ - url: 'https://www.googleapis.com/youtube/v3/playlists', - http: this.http, - config: { - mine: 'true', - part: 'snippet,id,contentDetails' + this.playlists = new YoutubeApiService( + { + url: 'https://www.googleapis.com/youtube/v3/playlists', + http: this.http, + config: { + mine: 'true', + part: 'snippet,id,contentDetails' + } }, - }, authorization); - this.playlistApi = new YoutubeApiService({ - url: 'https://www.googleapis.com/youtube/v3/playlists', - http: this.http, - idKey: 'id', - config: { - part: 'snippet,id,contentDetails' + authorization + ); + this.playlistApi = new YoutubeApiService( + { + url: 'https://www.googleapis.com/youtube/v3/playlists', + http: this.http, + idKey: 'id', + config: { + part: 'snippet,id,contentDetails' + } }, - }, authorization); + authorization + ); } getPlaylists(isNewPage: boolean) { @@ -86,12 +93,14 @@ export class UserProfile { } else { this.playlistInfo.setPageToken(pageToken); } - return this.playlistInfo - .list(playlistId) - .switchMap((response: any) => { - const videoIds = response.items.map(video => video.snippet.resourceId.videoId).join(','); + return this.playlistInfo.list(playlistId).pipe( + switchMap((response: any) => { + const videoIds = response.items + .map(video => video.snippet.resourceId.videoId) + .join(','); return this.youtubeVideosInfo.api.list(videoIds); - }); + }) + ); } fetchAllPlaylistItems(playlistId: string) { @@ -99,12 +108,14 @@ export class UserProfile { const subscriptions: Subscription[] = []; const items$ = new Subject(); let nextPageToken = ''; - const fetchMetadata = (response) => { - const videoIds = response.items.map(video => video.snippet.resourceId.videoId).join(','); + const fetchMetadata = response => { + const videoIds = response.items + .map(video => video.snippet.resourceId.videoId) + .join(','); nextPageToken = response.nextPageToken; return this.youtubeVideosInfo.api.list(videoIds); }; - const collectItems = (videos) => { + const collectItems = videos => { items = [...items, ...videos.items]; if (nextPageToken) { fetchItems(playlistId, nextPageToken); @@ -116,14 +127,15 @@ export class UserProfile { }; const fetchItems = (id, token) => { this.playlistInfo.setPageToken(token); - const sub = this.playlistInfo.list(id) - .switchMap((response) => fetchMetadata(response)) - .subscribe((response) => collectItems(response)); + const sub = this.playlistInfo + .list(id) + .pipe(switchMap(response => fetchMetadata(response))) + .subscribe(response => collectItems(response)); subscriptions.push(sub); return sub; }; fetchItems(playlistId, ''); - return items$.take(1); + return items$.pipe(take(1)); } toUserJson(profile): GoogleBasicProfile { diff --git a/src/app/core/services/version-checker.service.ts b/src/app/core/services/version-checker.service.ts index a84d1bf7..5fd4a789 100644 --- a/src/app/core/services/version-checker.service.ts +++ b/src/app/core/services/version-checker.service.ts @@ -8,6 +8,8 @@ import { AppApi } from '@api/app.api'; import 'rxjs/add/operator/retry'; import 'rxjs/add/observable/timer'; import 'rxjs/add/observable/of'; +import { of } from 'rxjs/observable/of'; +import { switchMap, retry, filter, take } from 'rxjs/operators'; interface INpmPackageJson { version: number; @@ -26,10 +28,15 @@ export class VersionCheckerService { private repo = 'orizens/echoes-player'; private repoBranch = 'gh-pages'; private pathToFile = 'assets/package.json'; - public url = `${this.protocol}://${this.prefix}/${this.repo}/${this.repoBranch}/${this.pathToFile}`; + public url = `${this.protocol}://${this.prefix}/${this.repo}/${ + this.repoBranch + }/${this.pathToFile}`; - constructor(private http: HttpClient, - private zone: NgZone, private appApi: AppApi) { } + constructor( + private http: HttpClient, + private zone: NgZone, + private appApi: AppApi + ) {} check() { return this.http.get(this.url); @@ -39,13 +46,7 @@ export class VersionCheckerService { let checkTimer: Subscription; this.zone.runOutsideAngular(() => { checkTimer = Observable.timer(0, this.interval) - .switchMap(() => this.check()) - // .catch((err) => { - // console.log(err); - // return Observable.of(err); - // }) - .retry() - .filter(verifyPackage) + .pipe(switchMap(() => this.check()), retry(), filter(verifyPackage)) .subscribe(response => this.appApi.recievedNewVersion(response)); }); return checkTimer; @@ -59,9 +60,7 @@ export class VersionCheckerService { checkForVersion() { return this.check() - .retry() - .filter(verifyPackage) - .take(1) + .pipe(retry(), filter(verifyPackage), take(1)) .subscribe(response => this.appApi.notifyNewVersion(response)); } } diff --git a/src/app/core/services/youtube-api.service.ts b/src/app/core/services/youtube-api.service.ts index fcc13f04..7d2f06d3 100644 --- a/src/app/core/services/youtube-api.service.ts +++ b/src/app/core/services/youtube-api.service.ts @@ -2,6 +2,7 @@ import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { environment } from '@env/environment'; import { Authorization } from './authorization.service'; +import { map } from 'rxjs/operators'; interface YoutubeApiServiceOptions { url?: string; @@ -13,10 +14,10 @@ interface YoutubeApiServiceOptions { } const defaultParams = { - 'part': 'snippet,contentDetails', - 'key': environment.youtube.API_KEY, - 'maxResults': '50', - 'pageToken': '' + part: 'snippet,contentDetails', + key: environment.youtube.API_KEY, + maxResults: '50', + pageToken: '' }; // @Injectable() @@ -62,7 +63,7 @@ export class YoutubeApiService { this.isSearching = true; const options = { params: this.params, - headers: this.createHeaders(), + headers: this.createHeaders() }; return this.http.get(this.url, options); } @@ -78,12 +79,13 @@ export class YoutubeApiService { params: this.params, headers: this.createHeaders() }; - return this.http.get(this.url, options) - .map((response: any) => { + return this.http.get(this.url, options).pipe( + map((response: any) => { this.nextPageToken = response.nextPageToken; this.isSearching = false; return response; - }); + }) + ); } fetchNextPage() { diff --git a/src/app/core/services/youtube-player.service.ts b/src/app/core/services/youtube-player.service.ts index f4a6345c..2c30b318 100644 --- a/src/app/core/services/youtube-player.service.ts +++ b/src/app/core/services/youtube-player.service.ts @@ -1,17 +1,12 @@ import { Injectable, NgZone } from '@angular/core'; import { Store } from '@ngrx/store'; import { EchoesState } from '@store/reducers'; -import * as AppPlayer from '@store/app-player'; @Injectable() export class YoutubePlayerService { public player: YT.Player; - constructor( - private store: Store, - private zone: NgZone, - private playerActions: AppPlayer.ActionTypes - ) { } + constructor(private store: Store, private zone: NgZone) {} setupPlayer(player) { this.player = player; @@ -29,7 +24,9 @@ export class YoutubePlayerService { const id = media.id; const isLoaded = this.player.getVideoUrl().includes(id); if (!isLoaded) { - this.zone.runOutsideAngular(() => this.player.loadVideoById(id, seconds || undefined)); + this.zone.runOutsideAngular(() => + this.player.loadVideoById(id, seconds || undefined) + ); } this.play(); } diff --git a/src/app/core/services/youtube-videos-info.service.ts b/src/app/core/services/youtube-videos-info.service.ts index 16f41ed0..783553bc 100644 --- a/src/app/core/services/youtube-videos-info.service.ts +++ b/src/app/core/services/youtube-videos-info.service.ts @@ -2,6 +2,7 @@ import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { YoutubeApiService } from './youtube-api.service'; import { Authorization } from './authorization.service'; +import { map } from 'rxjs/operators'; interface IYoutubeVideosInfo { items: GoogleApiYouTubeVideoResource[]; @@ -11,25 +12,24 @@ export class YoutubeVideosInfo { public api: YoutubeApiService; constructor(private http: HttpClient, auth: Authorization) { - this.api = new YoutubeApiService({ - url: 'https://www.googleapis.com/youtube/v3/videos', - http: this.http, - idKey: 'id', - config: { - part: 'snippet,contentDetails,statistics' - } - }, auth); + this.api = new YoutubeApiService( + { + url: 'https://www.googleapis.com/youtube/v3/videos', + http: this.http, + idKey: 'id', + config: { + part: 'snippet,contentDetails,statistics' + } + }, + auth + ); } fetchVideoData(mediaId: string) { - return this.api - .list(mediaId) - .map(response => response.items[0]); + return this.api.list(mediaId).pipe(map(response => response.items[0])); } fetchVideosData(mediaIds: string) { - return this.api - .list(mediaIds) - .map(response => response.items); + return this.api.list(mediaIds).pipe(map(response => response.items)); } } diff --git a/src/app/core/services/youtube.search.ts b/src/app/core/services/youtube.search.ts index 205f7ab5..a123fb75 100644 --- a/src/app/core/services/youtube.search.ts +++ b/src/app/core/services/youtube.search.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { YoutubeDataApi, DataApiProviders } from './youtube-data-api'; +import { switchMap } from 'rxjs/operators'; const SearchTypes = { VIDEO: 'video', @@ -25,9 +26,7 @@ export class YoutubeSearch { pageToken: '' }; - constructor( - private youtubeDataApi: YoutubeDataApi - ) { } + constructor(private youtubeDataApi: YoutubeDataApi) {} /** * search for video @@ -76,14 +75,15 @@ export class YoutubeSearch { */ searchForPlaylist(query: string, params?: any) { this._apiOptions.type = SearchParams.Types[SearchTypes.PLAYLIST]; - return this.search(query, params) - .switchMap((response: any) => { + return this.search(query, params).pipe( + switchMap((response: any) => { const options = { part: 'snippet,id,contentDetails', id: response.items.map(pl => pl.id.playlistId).join(',') }; return this.youtubeDataApi.list(DataApiProviders.PLAYLISTS, options); - }); + }) + ); } searchMore(nextPageToken: string) { diff --git a/src/app/core/store/now-playlist/now-playlist.selectors.ts b/src/app/core/store/now-playlist/now-playlist.selectors.ts index 944b9c15..29010aa0 100644 --- a/src/app/core/store/now-playlist/now-playlist.selectors.ts +++ b/src/app/core/store/now-playlist/now-playlist.selectors.ts @@ -4,9 +4,22 @@ import { INowPlaylist } from './now-playlist.reducer'; import { EchoesState } from '@store/reducers'; export const getNowPlaylist = (state: EchoesState) => state.nowPlaylist; -export const isPlayerInRepeat = createSelector(getNowPlaylist, (nowPlaylist: INowPlaylist) => nowPlaylist.repeat); -export const getPlaylistVideos = createSelector(getNowPlaylist, (nowPlaylist: INowPlaylist) => nowPlaylist.videos); -export const getSelectedMediaId = createSelector(getNowPlaylist, (nowPlaylist: INowPlaylist) => nowPlaylist.selectedId); +export const isPlayerInRepeat = createSelector( + getNowPlaylist, + (nowPlaylist: INowPlaylist) => nowPlaylist.repeat +); +export const getPlaylistVideos = createSelector( + getNowPlaylist, + (nowPlaylist: INowPlaylist) => nowPlaylist.videos +); +export const getPlaylistMediaIds = createSelector( + getPlaylistVideos, + (playlist: GoogleApiYouTubeVideoResource[]) => playlist.map(media => media.id) +); +export const getSelectedMediaId = createSelector( + getNowPlaylist, + (nowPlaylist: INowPlaylist) => nowPlaylist.selectedId +); export const getSelectedMedia = createSelector( getNowPlaylist, getSelectedMediaId, diff --git a/src/app/core/store/player-search/player-search.reducer.ts b/src/app/core/store/player-search/player-search.reducer.ts index d2292232..8d704b15 100644 --- a/src/app/core/store/player-search/player-search.reducer.ts +++ b/src/app/core/store/player-search/player-search.reducer.ts @@ -1,6 +1,10 @@ import { Action } from '@ngrx/store'; import { PlayerSearchActions, AddResultsAction } from './player-search.actions'; -import { IPlayerSearch, CSearchTypes, CPresetTypes } from './player-search.interfaces'; +import { + IPlayerSearch, + CSearchTypes, + CPresetTypes +} from './player-search.interfaces'; export * from './player-search.interfaces'; @@ -28,7 +32,10 @@ interface UnsafeAction extends Action { payload: any; } -export function search(state: IPlayerSearch = initialState, action: UnsafeAction): IPlayerSearch { +export function search( + state: IPlayerSearch = initialState, + action: UnsafeAction +): IPlayerSearch { switch (action.type) { case PlayerSearchActions.UPDATE_QUERY: { return { ...state, query: action.payload }; diff --git a/src/app/core/store/user-profile/user-profile.actions.ts b/src/app/core/store/user-profile/user-profile.actions.ts index f95c7368..96eb60d4 100644 --- a/src/app/core/store/user-profile/user-profile.actions.ts +++ b/src/app/core/store/user-profile/user-profile.actions.ts @@ -14,6 +14,7 @@ export class UserProfileActions { static USER_PROFILE_RECIEVED = '[UserProfile] USER_PROFILE_RECIEVED'; static VIEWED_PLAYLIST = '[UserProfile] VIEWED_PLAYLIST'; + static CHECK_USER_AUTH = '[UserProfile] CHECK_USER_AUTH'; static USER_SIGNIN = '[UserProfile] USER_SIGNIN'; static USER_SIGNIN_START = '[UserProfile] USER_SIGNIN_START'; static USER_SIGNIN_SUCCESS = '[UserProfile] USER_SIGNIN_SUCCESS'; @@ -64,10 +65,12 @@ export class UserProfileActions { export class UserSignin implements Action { readonly type = UserProfileActions.USER_SIGNIN; + constructor() {} } export class UserSigninStart implements Action { readonly type = UserProfileActions.USER_SIGNIN_START; + constructor() {} } export class UserSigninSuccess implements Action { @@ -81,4 +84,10 @@ export class UserSignout implements Action { export class UserSignoutSuccess implements Action { readonly type = UserProfileActions.USER_SIGNOUT_SUCCESS; + constructor() {} +} + +export class CheckUserAuth implements Action { + readonly type = UserProfileActions.CHECK_USER_AUTH; + constructor () {} } diff --git a/src/app/shared/animations/fade-in.animation.ts b/src/app/shared/animations/fade-in.animation.ts index d36af7b0..b65cf06c 100644 --- a/src/app/shared/animations/fade-in.animation.ts +++ b/src/app/shared/animations/fade-in.animation.ts @@ -61,3 +61,24 @@ export const flyInOut = trigger('flyInOut', [ animate(100, style({ transform: 'translateX(100%)' })) ]) ]); + +export const expandFadeInAnimation = trigger('expandFadeIn', [ + // state('void', style({ top: '-35rem' })), + state( + 'show', + style({ + opacity: 1, + transform: 'scale(1)' + }) + ), + state( + 'hide', + style({ + opacity: 0, + transform: 'scale(0.4)', + top: -2 + }) + ), + transition('show => hide', animate('300ms ease-in')), + transition('hide => show', animate('300ms ease-in')) +]); diff --git a/src/app/shared/components/youtube-list/youtube-list.ts b/src/app/shared/components/youtube-list/youtube-list.ts index 467e767d..ee7993d0 100644 --- a/src/app/shared/components/youtube-list/youtube-list.ts +++ b/src/app/shared/components/youtube-list/youtube-list.ts @@ -25,7 +25,7 @@ function createIdMap(list: GoogleApiYouTubeVideoResource[]) {
  • -
    +
    -
    +
    @@ -10,13 +10,13 @@
    -
    +
    - +
    -
    +
    {{ media.contentDetails?.duration | toFriendlyDuration }} @@ -35,40 +35,40 @@
    -
    -

    +
    +

    {{ media.snippet.title }}

    -
    - - -

    -
    +

    {{ media.snippet.title}}

    -
    {{ media.snippet.description }}
    +
    {{ media.snippet.description }}
    -
    -
    diff --git a/src/app/shared/components/youtube-media/youtube-media.scss b/src/app/shared/components/youtube-media/youtube-media.scss index 946da52b..e3949e25 100644 --- a/src/app/shared/components/youtube-media/youtube-media.scss +++ b/src/app/shared/components/youtube-media/youtube-media.scss @@ -1,282 +1,251 @@ -@import '~css/core/global.scss'; +@import '~css/echoes-variables'; // playlist also using it @media (min-width: 320px) { - :host { - --media-primary-color: var(--brand-primary); - --media-bg-primary: var(--brand-bg-lite-transparent); - --media-dark-transparent: var(--brand-dark-bg-color-transparent); - --text-color: var(--brand-primary-text-color); - --text-primary-color-inverse: var(--brand-inverse-text); - - $bg-description: rgba(255, 255, 255, .9); - $icon-color: $gray-light; - .youtube-item { - &.show-description { - .item-actions { - visibility: none; - } - .close-desc { - display: flex; - justify-content: flex-end; - } - } - .item-actions { - visibility: visible; - } - .close-desc { - display: none; - } - .tooltip { - white-space: normal; - } - } - - .youtube-item { - width: 100%; - max-width: 100%; - margin: 0; - position: relative; - padding: 1rem; - border-radius: 0; - background-color: rgba(0,0,0,0); - box-shadow: none; - border: none; - - .media-title { - color: gray; - text-shadow: none; - display: block; - position: relative; - text-decoration: none; - } - - .media-actions { - display: flex; - flex-direction: row; - - .first-action { - padding-left: 0; - } - } - - .front { - padding: 0px; - background: var(--media-bg-primary); - box-shadow: 0 1px 30px -5px var(--media-dark-transparent); - position: relative; - } - - .title { - height: 27px; - margin: 0; - color: var(--text-color); - } - .media-thumb { - display: block; - position: relative; - cursor: pointer; - font-weight: normal; - - .stats { - position: absolute; - bottom: 0; - background: rgba(0,0,0,.5); - width: 100%; - padding: 1rem; - color: white; - - .item-action { - &.item-likes { - margin-right: .5rem; - } - .fa { - color: $bg-description; - } - } - } - - &:hover { - img { - transform: scale(1.4) translate(0, 0); - } - - .play-media { - opacity: 1; - } - } - } - - .play-media { - opacity: 0; - position: absolute; - top: 50%; - left: 50%; - background: var(--media-primary-color); - color: var(--text-primary-color-inverse); - border: none; - } - - .item-is-playing { - display: none; - color: var(--media-primary-color); - text-shadow: 0 0px 1px var(--media-primary-color); - - i { - margin: 2px 4px 0 0; - } - - &.playing-true { - display: initial; - } - } - - .thumbnail { - overflow: hidden; - border-radius: 0; - clear: both; - height: 149px; - border: none; - background-color: var(--text-primary-color-inverse); - padding: 0; - box-shadow: none; - margin-bottom: 0; - - .thumb-image { - height: 100%; - transform: scale(1.7) translatey(0); - transition: transform .3s ease-out; - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; - border: 0; - } - } - - .badge.badge-warning { - position: absolute; - right: 7px; - top: 8px; - } - - .description { - height: 228px; - overflow: hidden; - background-color: var(--media-bg-primary); - position: absolute; - top: 0px; - left:0; - margin: 0; - padding: 8px 8px 36px 8px; - box-sizing: border-box; - word-wrap:break-word; - font-size: 16px; - color: var(--text-color); - width: 100%; - } - - &.show-description { - - .description { - overflow: auto; - } - - .main-actions.item-actions { - visibility: hidden; - } - } - - .indicators { - height: 22px; - position: absolute; - z-index: 1000; - } - - .item-actions { - padding: 1rem; - margin: 0; - box-shadow: none; - bottom: -1px; - - .badge { - background-color: $brand-primary; - border-radius: 0; - vertical-align: middle; - } - - &.close-desc { - position: absolute; - width: 100%; - } - - a:hover{ - text-decoration: none; - } - - span { - vertical-align: middle; - font-size: 1.2rem; - } - } - - .item-views { - display: inline-block; - } - - .share { - position: absolute; - right: 0px; - z-index: 10; - text-align: center; - - .dropdown-toggle { - padding: 0px 10px; - } - - .dropdown-menu { - right: 0px; - left: auto; - } - } - } - } + :host { + --media-primary-color: var(--brand-primary); + --media-bg-primary: var(--brand-bg-lite-transparent); + --media-dark-transparent: var(--brand-dark-bg-color-transparent); + --text-color: var(--brand-primary-text-color); + --text-primary-color-inverse: var(--brand-inverse-text); + + $bg-description: rgba(255, 255, 255, 0.9); + $icon-color: $gray-light; + .youtube-item { + &.show-description { + .item-actions { + visibility: none; + } + } + .item-actions { + visibility: visible; + } + + .tooltip { + white-space: normal; + } + } + + .youtube-item { + width: 100%; + max-width: 100%; + margin: 0; + position: relative; + padding: 1rem; + border-radius: 0; + background-color: rgba(0, 0, 0, 0); + box-shadow: none; + border: none; + + .media-card { + color: gray; + text-shadow: none; + display: block; + position: relative; + text-decoration: none; + } + + .media-actions { + .first-action { + padding-left: 0; + } + } + + .front { + padding: 0px; + box-shadow: 0 1px 30px -5px var(--media-dark-transparent); + position: relative; + } + + .title { + height: 27px; + margin: 0; + color: var(--text-color); + } + .media-thumb { + display: block; + position: relative; + cursor: pointer; + font-weight: normal; + overflow: hidden; + + .stats { + background: var(--brand-dark-bg-color-transparent); + width: 100%; + padding: 1rem; + color: white; + + .item-action { + &.item-likes { + margin-right: 0.5rem; + } + .fa { + color: $bg-description; + } + } + } + + &:hover { + img { + transform: scale(1.4) translate(0, 0); + } + + .play-media { + opacity: 1; + } + } + } + + .play-media { + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + background: var(--media-primary-color); + color: var(--text-primary-color-inverse); + border: none; + } + + .item-is-playing { + display: none; + color: var(--media-primary-color); + text-shadow: 0 0px 1px var(--media-primary-color); + + i { + margin: 2px 4px 0 0; + } + + &.playing-true { + display: initial; + } + } + + .thumbnail { + overflow: hidden; + border-radius: 0; + clear: both; + height: 149px; + border: none; + background-color: var(--text-primary-color-inverse); + padding: 0; + box-shadow: none; + margin-bottom: 0; + + .thumb-image { + height: 100%; + transform: scale(1.7) translatey(0); + transition: transform 0.3s ease-out; + display: block; + max-width: 100%; + margin-left: auto; + margin-right: auto; + border: 0; + } + } + + .description { + height: 219px; + overflow: hidden; + background-color: var(--media-bg-primary); + margin: 0; + padding: 8px 8px 36px 8px; + box-sizing: border-box; + word-wrap: break-word; + font-size: 16px; + color: var(--text-color); + width: 100%; + } + + &.show-description { + .description { + overflow: auto; + } + .stats { + display: none; + } + .main-actions.item-actions { + visibility: hidden; + } + } + + .indicators { + height: 22px; + position: absolute; + z-index: 1000; + } + + .item-actions { + background: var(--media-bg-primary); + padding: 1rem; + margin: 0; + box-shadow: none; + bottom: -1px; + + a:hover { + text-decoration: none; + } + + span { + vertical-align: middle; + font-size: 1.2rem; + } + } + + .item-views { + display: inline-block; + } + + .share { + position: absolute; + right: 0px; + z-index: 10; + text-align: center; + + .dropdown-toggle { + padding: 0px 10px; + } + + .dropdown-menu { + right: 0px; + left: auto; + } + } + } + } } @media (min-width: 500px) and (max-width: 767px) { - :host { - .youtube-item { - - .item-views { - display: block; - } - } - } + :host { + .youtube-item { + .item-views { + display: block; + } + } + } } @media (min-width: 767px) { - :host { - .youtube-item { - - .item-views { - width: auto; - max-width: 33%; - } - } - } + :host { + .youtube-item { + .item-views { + width: auto; + max-width: 33%; + } + } + } } @media (min-width: 768px) { - :host { - .youtube-item { - .play-media { - @include transform(translate(-50%, -50%)); - } - } - } + :host { + .youtube-item { + .play-media { + transform: translate(-50%, -50%); + } + } + } } @media (max-width: 767px) { - :host { - .youtube-item .play-media { - @include transform(translate(-50%, -50%)); - } - } + :host { + .youtube-item .play-media { + transform: translate(-50%, -50%); + } + } } diff --git a/src/app/shared/components/youtube-media/youtube-media.ts b/src/app/shared/components/youtube-media/youtube-media.ts index 315c4f10..a7229c1e 100644 --- a/src/app/shared/components/youtube-media/youtube-media.ts +++ b/src/app/shared/components/youtube-media/youtube-media.ts @@ -1,10 +1,10 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; -import { extractThumbUrl } from '@utils/media.utils'; - -interface MediaStatus { - queued: boolean; - isPlaying: boolean; -} +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + Output +} from '@angular/core'; @Component({ selector: 'youtube-media', @@ -12,12 +12,9 @@ interface MediaStatus { templateUrl: './youtube-media.html', changeDetection: ChangeDetectionStrategy.OnPush }) -export class YoutubeMediaComponent implements OnChanges { +export class YoutubeMediaComponent { @Input() media: GoogleApiYouTubeVideoResource; - @Input() status: MediaStatus = { - queued: false, - isPlaying: false - }; + @Input() queued = false; @Output() play = new EventEmitter(); @Output() queue = new EventEmitter(); @Output() add = new EventEmitter(); @@ -25,15 +22,8 @@ export class YoutubeMediaComponent implements OnChanges { showDesc = false; isPlaying = false; - thumb = ''; - constructor() { } - - ngOnChanges({ media }: SimpleChanges) { - if (media && !media.firstChange || media && media.firstChange) { - this.thumb = extractThumbUrl(this.media); - } - } + constructor() {} playVideo(media: GoogleApiYouTubeVideoResource) { this.play.emit(media); diff --git a/src/app/shared/components/youtube-playlist/youtube-playlist.html b/src/app/shared/components/youtube-playlist/youtube-playlist.html index 417d7f76..2ef3a125 100644 --- a/src/app/shared/components/youtube-playlist/youtube-playlist.html +++ b/src/app/shared/components/youtube-playlist/youtube-playlist.html @@ -1,24 +1,20 @@
    -
    - +
    +
    -
    +

    - {{ media.snippet.title }} + ({{ media.contentDetails.itemCount }}) {{ media.snippet.title }}

    - - - {{ media.contentDetails.itemCount }} videos - - +
    diff --git a/src/app/shared/components/youtube-playlist/youtube-playlist.scss b/src/app/shared/components/youtube-playlist/youtube-playlist.scss index fada20a2..c692e2f7 100644 --- a/src/app/shared/components/youtube-playlist/youtube-playlist.scss +++ b/src/app/shared/components/youtube-playlist/youtube-playlist.scss @@ -1,151 +1,135 @@ @import '~css/echoes-variables.scss'; @media (min-width: 320px) { - :host { - --playlist-primary: var(--brand-primary); - --playlist-bg-primary: var(--brand-bg-lite-transparent); - --playlist-dark-transparent: var(--brand-dark-bg-color-transparent); - --playlist-inverse-color: var(--brand-inverse-text); - --playlist-link-color: var(--link-primary-color); - - width: 100%; - - .youtube-playlist-item { - margin: 0; - padding: 1rem; - border-radius: 0; - background-color: rgba(0, 0, 0, 0); - box-shadow: none; - border: none; - - .playlist-link .title { - color: var(--playlist-link-color); - } - } - - .media-title { - text-shadow: none; - display: block; - position: relative; - font-family: 'Open Sans Condensed', sans-serif; - text-decoration: none; - } - - .front { - padding: 0px; - background: var(--playlist-bg-primary); - box-shadow: 0 1px 30px -5px var(--playlist-dark-transparent); - position: relative; - } - - .media-thumb { - display: block; - position: relative; - cursor: pointer; - font-weight: normal; - - .thumb-image { - transition: transform .3s ease-out; - height: 100%; - transform: scale(1.7) translatey(0); - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; - border: 0; - } - - &:hover { - .thumb-image { - transform: scale(1.4) translate(0, 0); - } - - .play-media { - opacity: 1; - transform: translate(-50%,-50%); - } - } - - .play-media { - opacity: 0; - position: absolute; - top: 50%; - left: 50%; - background: var(--playlist-primary); - color: var(--playlist-inverse-color); - border: none; - } - - .thumbnail { - overflow: hidden; - border-radius: 0; - clear: both; - height: 149px; - border: none; - background-color: var(--playlist-inverse-color); - padding: 0; - box-shadow: none; - margin-bottom: 0; - } - } - - .item-actions { - padding: 1rem; - margin: 0; - box-shadow: none; - position: relative; - bottom: -1px; - width: 100%; - - .title { - margin: 0; - } - - .badge { - background-color: var(--playlist-primary); - border-radius: 0; - vertical-align: middle; - } - - .playlist-link:hover{ - text-decoration: none; - } - - .item-action { - vertical-align: middle; - font-size: 1.2rem; - color: var(--playlist-dark-transparent); - } - - .loader { - position: absolute; - right: 10px; - top: 8px; - color: var(--brand-primary); - } - } - } + :host { + --playlist-primary: var(--brand-primary); + --playlist-bg-primary: var(--brand-bg-lite-transparent); + --playlist-dark-transparent: var(--brand-dark-bg-color-transparent); + --playlist-inverse-color: var(--brand-inverse-text); + --playlist-link-color: var(--link-primary-color); + + .youtube-playlist-item { + margin: 0; + padding: 1rem; + border-radius: 0; + background-color: rgba(0, 0, 0, 0); + box-shadow: none; + border: none; + + .playlist-link .title { + color: var(--playlist-link-color); + } + } + + .media-title { + text-shadow: none; + display: block; + position: relative; + font-family: 'Open Sans Condensed', sans-serif; + text-decoration: none; + } + + .front { + padding: 0px; + background: var(--playlist-bg-primary); + box-shadow: 0 1px 30px -5px var(--playlist-dark-transparent); + position: relative; + } + + .media-thumb { + display: block; + position: relative; + cursor: pointer; + font-weight: normal; + + .thumb-image { + transition: transform 0.3s ease-out; + height: 100%; + transform: scale(1.7) translatey(0); + display: block; + max-width: 100%; + margin-left: auto; + margin-right: auto; + border: 0; + } + + &:hover { + .thumb-image { + transform: scale(1.4) translate(0, 0); + } + + .play-media { + opacity: 1; + transform: translate(-50%, -50%); + } + } + + .play-media { + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + background: var(--playlist-primary); + color: var(--playlist-inverse-color); + border: none; + } + + .thumbnail { + overflow: hidden; + clear: both; + height: 190px; + border: none; + background-color: var(--playlist-inverse-color); + padding: 0; + box-shadow: none; + margin-bottom: 0; + } + } + + .item-actions { + padding: 1rem; + margin: 0; + bottom: 0px; + width: 100%; + background-color: var(--playlist-dark-transparent); + + .title { + margin: 0; + } + + .playlist-link:hover { + text-decoration: none; + } + + .loader { + position: absolute; + right: 10px; + top: 8px; + color: var(--brand-primary); + } + } + } } @media (min-width: 768px) { - :host { - width: 24.5%; - max-width: 28rem; - .item-actions .playlist-link { - display: block; - } - } + :host { + width: 24.5%; + max-width: 28rem; + .item-actions .playlist-link { + display: block; + } + } } @media (min-width: 767px) { - :host { - .youtube-list-item { - max-width: 320px; - } - } + :host { + .youtube-list-item { + max-width: 320px; + } + } } @media (min-width: 1440px) { - :host { - width: 280px; - } -} \ No newline at end of file + :host { + width: 280px; + } +} diff --git a/src/app/shared/components/youtube-playlist/youtube-playlist.ts b/src/app/shared/components/youtube-playlist/youtube-playlist.ts index aebfa101..9df95602 100644 --- a/src/app/shared/components/youtube-playlist/youtube-playlist.ts +++ b/src/app/shared/components/youtube-playlist/youtube-playlist.ts @@ -1,9 +1,11 @@ import { - ChangeDetectorRef, ChangeDetectionStrategy, Component, - EventEmitter, Input, Output, - OnChanges, SimpleChanges + ChangeDetectorRef, + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + Output } from '@angular/core'; -import { extractThumbUrl } from '@utils/media.utils'; @Component({ selector: 'youtube-playlist', @@ -11,22 +13,15 @@ import { extractThumbUrl } from '@utils/media.utils'; templateUrl: './youtube-playlist.html', changeDetection: ChangeDetectionStrategy.OnPush }) -export class YoutubePlaylistComponent implements OnChanges { +export class YoutubePlaylistComponent { @Input() media: GoogleApiYouTubePlaylistResource; @Input() link = './'; @Output() play = new EventEmitter(); @Output() queue = new EventEmitter(); isPlaying = false; - thumb = ''; loading = false; - ngOnChanges({ media }: SimpleChanges) { - if (media && !media.firstChange || media && media.firstChange) { - this.thumb = extractThumbUrl(this.media); - } - } - playPlaylist(media: GoogleApiYouTubePlaylistResource) { this.play.next(media); } diff --git a/src/app/shared/pipes/index.ts b/src/app/shared/pipes/index.ts index ba67dc20..6bd50985 100644 --- a/src/app/shared/pipes/index.ts +++ b/src/app/shared/pipes/index.ts @@ -1,7 +1,13 @@ import { SearchPipe } from './search.pipe'; import { ToFriendlyDurationPipe } from './toFriendlyDuration.pipe'; +import { VideoToThumbPipe } from './videoToThumb.pipe'; +import { ParseTracksPipe } from './parseTracks.pipe'; +import { IsInQueuePipe } from './isInQueue.pipe'; export const PIPES = [ SearchPipe, - ToFriendlyDurationPipe + ToFriendlyDurationPipe, + VideoToThumbPipe, + ParseTracksPipe, + IsInQueuePipe ]; diff --git a/src/app/shared/pipes/isInQueue.pipe.ts b/src/app/shared/pipes/isInQueue.pipe.ts new file mode 100644 index 00000000..e56497a8 --- /dev/null +++ b/src/app/shared/pipes/isInQueue.pipe.ts @@ -0,0 +1,8 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ name: 'isInQueue' }) +export class IsInQueuePipe implements PipeTransform { + transform(media: GoogleApiYouTubeVideoResource, medias: string[]): any { + return medias.includes(media.id); + } +} diff --git a/src/app/shared/pipes/parseTracks.pipe.ts b/src/app/shared/pipes/parseTracks.pipe.ts new file mode 100644 index 00000000..6fffba8e --- /dev/null +++ b/src/app/shared/pipes/parseTracks.pipe.ts @@ -0,0 +1,13 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { MediaParserService } from '@core/services/media-parser.service'; +import memo from 'memo-decorator'; + +@Pipe({ name: 'parseTracks' }) +export class ParseTracksPipe implements PipeTransform { + constructor(private mediaParser: MediaParserService) {} + + @memo() + transform(value: any): any { + return this.mediaParser.parseTracks(value); + } +} diff --git a/src/app/shared/pipes/toFriendlyDuration.pipe.ts b/src/app/shared/pipes/toFriendlyDuration.pipe.ts index aa0ebcf7..cf09a4bc 100644 --- a/src/app/shared/pipes/toFriendlyDuration.pipe.ts +++ b/src/app/shared/pipes/toFriendlyDuration.pipe.ts @@ -1,31 +1,36 @@ import { Pipe, PipeTransform } from '@angular/core'; +import memo from 'memo-decorator'; @Pipe({ name: 'toFriendlyDuration' }) - export class ToFriendlyDurationPipe implements PipeTransform { + @memo() transform(value: any, args?: any[]): any { const time = value; if (!time) { return '...'; } - return ['PT', 'H', 'M', 'S'].reduce((prev, cur, i, arr) => { - const now = prev.rest.split(cur); - if (cur !== 'PT' && cur !== 'H' && !prev.rest.match(cur)) { - prev.new.push('00'); - } - if (now.length === 1) { - return prev; - } - prev.new.push(now[0]); - return { - rest: now[1].replace(cur, ''), - new: prev.new - }; - }, { rest: time, new: [] }) - .new.filter(_time => _time !== '') - .map(_time => _time.length === 1 ? `0${_time}` : _time) - .join(':'); + return ['PT', 'H', 'M', 'S'] + .reduce( + (prev, cur, i, arr) => { + const now = prev.rest.split(cur); + if (cur !== 'PT' && cur !== 'H' && !prev.rest.match(cur)) { + prev.new.push('00'); + } + if (now.length === 1) { + return prev; + } + prev.new.push(now[0]); + return { + rest: now[1].replace(cur, ''), + new: prev.new + }; + }, + { rest: time, new: [] } + ) + .new.filter(_time => _time !== '') + .map(_time => (_time.length === 1 ? `0${_time}` : _time)) + .join(':'); } } diff --git a/src/app/shared/pipes/videoToThumb.pipe.ts b/src/app/shared/pipes/videoToThumb.pipe.ts new file mode 100644 index 00000000..68b10162 --- /dev/null +++ b/src/app/shared/pipes/videoToThumb.pipe.ts @@ -0,0 +1,12 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { extractThumbUrl } from '../utils/media.utils'; +import memo from 'memo-decorator'; + +@Pipe({ name: 'videoToThumb' }) +export class VideoToThumbPipe implements PipeTransform { + @memo() + transform(value: any): any { + const thumb = extractThumbUrl(value); + return thumb || ''; + } +} diff --git a/src/css/core/animations.scss b/src/css/core/animations.scss new file mode 100644 index 00000000..2c5ef1a1 --- /dev/null +++ b/src/css/core/animations.scss @@ -0,0 +1,42 @@ +@keyframes pulse { + 0% { + transform: scale(0); + opacity: 1; + } + 50% { + transform: scale(1); + opacity: 0.5; + } + 100% { + transform: scale(1.5); + opacity: 0; + } +} + +@keyframes slideInDown { + 0% { + transform: scale(0.4); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes slideOutDown { + 0% { + transform: scale(1); + opacity: 1; + } + + 100% { + transform: scale(0); + opacity: 0; + } +} + +.pulse { + animation: pulse 2s infinite; +} diff --git a/src/css/core/responsive.scss b/src/css/core/responsive.scss new file mode 100644 index 00000000..84478910 --- /dev/null +++ b/src/css/core/responsive.scss @@ -0,0 +1,24 @@ +// CARDS +@media (min-width: 320px) { + .is-media-responsive { + width: 100% !important; + max-width: 100%; + } +} +@media (min-width: 480px) { + .is-media-responsive { + width: 33% !important; + } +} +@media (min-width: 767px) { + .is-media-responsive { + max-width: 28rem; + width: 24.5% !important; + } +} + +@media (min-width: 1440px) { + .is-media-responsive { + width: 28rem !important; + } +} diff --git a/src/css/core/utils.scss b/src/css/core/utils.scss index ca2c7384..62df4a09 100644 --- a/src/css/core/utils.scss +++ b/src/css/core/utils.scss @@ -2,78 +2,70 @@ /* applying a nicer UX*/ .nicer-ux *, .ux-maker { - -webkit-transition: all 0.3s ease-out; - -moz-transition: all 0.3s ease-out; - -ms-transition: all 0.3s ease-out; - -o-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; + transition: all 0.3s ease-out; } .ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } // 3d flip .card .face { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - transition: all .8s ease; + backface-visibility: hidden; + transition: all 0.8s ease; } .card .front { - -webkit-transform: perspective(400px) rotateY(0deg); - transform: perspective(400px) rotateY(0deg); - -webkit-backface-visibility: visible; - backface-visibility: visible; + transform: perspective(400px) rotateY(0deg); + backface-visibility: visible; } .card .back { - -webkit-transform: perspective(400px) rotateY(-179.9deg); - transform: perspective(400px) rotateY(-179.9deg); - opacity: 0; + transform: perspective(400px) rotateY(-179.9deg); + opacity: 0; } .show-description .face.front { - -webkit-transform: perspective(400px) rotateY(179.9deg); - transform: perspective(400px) rotateY(179.9deg); + transform: perspective(400px) rotateY(179.9deg); } .show-description .face.back { - -webkit-transform: perspective(400px) rotateY(0deg); - transform: perspective(400px) rotateY(0deg); - opacity: 1; + transform: perspective(400px) rotateY(0deg); + opacity: 1; } input, a, button, select { - // removes the blue overlay in chrome android - tap-highlight-color: rgba(0,0,0,0); - // removes the orange border when on focus - outline: none; + // removes the blue overlay in chrome android + tap-highlight-color: rgba(0, 0, 0, 0); + // removes the orange border when on focus + outline: none; } .dropdown .dropdown-toggle { - cursor: pointer; + cursor: pointer; } .btn-transparent { - background-color: transparent !important; - border-color: transparent; - box-shadow: none; + background-color: transparent !important; + border-color: transparent; + box-shadow: none; } .bg-primary { - background-color: var(--brand-primary); + background-color: var(--brand-primary); } .bg-secondary { - background-color: var(--brand-secondary); + background-color: var(--brand-secondary); } .text-primary { - color: var(--brand-primary); + color: var(--brand-primary); } .text-secondary { - color: var(--brand-secondary); + color: var(--brand-secondary); +} +.text-info { + color: var(--brand-info); } - .label-danger { background-color: var(--brand-danger); } @@ -102,4 +94,84 @@ select { // FLEX .is-strechable { flex-grow: 1; -} \ No newline at end of file +} +.is-flex-row { + display: flex; + flex-direction: row; +} + +.is-flex-column { + display: flex; + flex-direction: column; +} +.is-flex-valign { + align-items: center; +} +.is-flex-wrap { + flex-wrap: wrap; +} +.is-content-aligned-h { + justify-content: center; +} + +// border-radius +.is-rounded-top { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border: 0px solid; +} + +.is-rounded-bottom { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + border: 0px solid; +} +.is-rounded { + @extend .is-rounded-top; + @extend .is-rounded-bottom; +} + +.is-aligned-vh { + transform: translate(-50%, -50%); + top: 50%; + left: 50%; +} + +// font-size +.text-md { + font-size: 2rem; +} + +// layout utils +.no-padding { + padding: 0; +} + +.no-margins { + margin: 0; +} + +.is-media-valign { + vertical-align: middle; +} + +.is-absolute { + position: absolute; +} + +.is-absolute-bottom { + @extend .is-absolute; + bottom: 0; +} +.is-absolute-top { + @extend .is-absolute; + top: 0; +} +.is-absolute-right { + @extend .is-absolute; + right: 0; +} +.is-absolute-left { + @extend .is-absolute; + left: 0; +} diff --git a/src/css/echoes-variables.scss b/src/css/echoes-variables.scss index ed0e461f..b962baa9 100644 --- a/src/css/echoes-variables.scss +++ b/src/css/echoes-variables.scss @@ -8,546 +8,536 @@ //## // Color swatches -$turquoise: #1abc9c; -$green-sea: #16a085; +$turquoise: #1abc9c; +$green-sea: #16a085; -$emerald: #2ecc71; -$nephritis: #27ae60; +$emerald: #2ecc71; +$nephritis: #27ae60; -$peter-river: #3498db; -$belize-hole: #2980b9; +$peter-river: #3498db; +$belize-hole: #2980b9; -$amethyst: #9b59b6; -$wisteria: #8e44ad; +$amethyst: #9b59b6; +$wisteria: #8e44ad; -$wet-asphalt: #34495e; -$midnight-blue: #2c3e50; +$wet-asphalt: #34495e; +$midnight-blue: #2c3e50; -$sun-flower: #f1c40f; -$alizarin: #e74c3c; +$sun-flower: #f1c40f; +$alizarin: #e74c3c; -$clouds: #ecf0f1; -$silver: #bdc3c7; +$clouds: #ecf0f1; +$silver: #bdc3c7; -$concrete: #95a5a6; -$asbestos: #7f8c8d; +$concrete: #95a5a6; +$asbestos: #7f8c8d; $blue-grey-900: #263238; $blue-grey-darker: #202a2f; -$md-lite-blue-500: #03A9F4; -$md-lite-blue-300: rgba(79, 195, 247, .9); +$md-lite-blue-500: #03a9f4; +$md-lite-blue-300: rgba(79, 195, 247, 0.9); $md-lite-blue-800: #0277bd; // Grays // $gray: $concrete; // $gray-light: $silver; -$inverse: white; +$inverse: white; $inverse-transparent: rgba(255, 255, 255, 0.7); -$white-dark-transparent: rgba(243,243,243, .9); +$white-dark-transparent: rgba(243, 243, 243, 0.9); $white-darker: rgb(201, 199, 199); -$gray-darker: lighten(#000, 13.5%); // #222 -$gray-dark: lighten(#000, 20%); // #333 -$gray: lighten(#000, 33.5%); // #555 -$gray-light: lighten(#000, 46.7%); // #777 -$gray-lighter: lighten(#000, 93.5%); // #eee -$dark: #000; -$dark-transparent: rgba(10, 10, 10, .5); +$gray-darker: lighten(#000, 13.5%); // #222 +$gray-dark: lighten(#000, 20%); // #333 +$gray: lighten(#000, 33.5%); // #555 +$gray-light: lighten(#000, 46.7%); // #777 +$gray-lighter: lighten(#000, 93.5%); // #eee +$dark: #000; +$dark-transparent: rgba(10, 10, 10, 0.7); // Brand colors -$brand-primary: $md-lite-blue-500; -$brand-secondary: $md-lite-blue-800; -$brand-success: $emerald; -$brand-warning: $sun-flower; -$brand-danger: $alizarin; +$brand-primary: $md-lite-blue-500; +$brand-secondary: $md-lite-blue-800; +$brand-success: $emerald; +$brand-warning: $sun-flower; +$brand-danger: $alizarin; // $brand-info: $peter-river; -$brand-info: $md-lite-blue-800; -$brand-sidebar: $blue-grey-900; +$brand-info: $md-lite-blue-800; +$brand-sidebar: $blue-grey-900; //== Scaffolding // //## Settings for some of the most global styles. -$body-bg: #ecf0f1; -$text-color: $gray-dark; +$body-bg: #ecf0f1; +$text-color: $gray-dark; //** Global textual link color. -$link-color: var(--link-primary-color); -$link-hover-color: var(--link-primary-hover-color); - +$link-color: var(--link-primary-color); +$link-hover-color: var(--link-primary-hover-color); //== Typography // //## Font, line-height for body text, headings, and more. -$font-family-base: 'Open Sans Condensed', 'Open Sans', Helvetica, Arial, sans-serif; -$font-family-demo: "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; -$font-family-narrow: 'Open Sans Condensed', 'Open Sans', Helvetica; -$font-size-base: 14px; - -$font-size-h1: floor(($font-size-base * 2.6)); // ~36px -$font-size-h2: floor(($font-size-base * 2.15)); // ~30px -$font-size-h3: ceil(($font-size-base * 1.7)); // ~24px -$font-size-h4: ceil(($font-size-base * 1.25)); // ~18px -$font-size-h5: $font-size-base; -$font-size-h6: ceil(($font-size-base * 0.85)); // ~12px - -$line-height-base: 1.428571429; // 20/14 -$line-height-computed: floor($font-size-base * $line-height-base); // ~31px - -$headings-font-family: $font-family-narrow; -$headings-font-weight: 200; -$headings-line-height: 1.1; -$headings-color: $gray-dark; -$headings-small-color: $gray-dark; - +$font-family-base: 'Open Sans Condensed', 'Open Sans', Helvetica, Arial, + sans-serif; +$font-family-demo: 'Helvetica Neue', Helvetica, Arial, sans-serif; +$font-family-monospace: Monaco, Menlo, Consolas, 'Courier New', monospace; +$font-family-narrow: 'Open Sans Condensed', 'Open Sans', Helvetica; +$font-size-base: 14px; + +$font-size-h1: floor(($font-size-base * 2.6)); // ~36px +$font-size-h2: floor(($font-size-base * 2.15)); // ~30px +$font-size-h3: ceil(($font-size-base * 1.7)); // ~24px +$font-size-h4: ceil(($font-size-base * 1.25)); // ~18px +$font-size-h5: $font-size-base; +$font-size-h6: ceil(($font-size-base * 0.85)); // ~12px + +$line-height-base: 1.428571429; // 20/14 +$line-height-computed: floor($font-size-base * $line-height-base); // ~31px + +$headings-font-family: $font-family-narrow; +$headings-font-weight: 200; +$headings-line-height: 1.1; +$headings-color: $gray-dark; +$headings-small-color: $gray-dark; //== Iconography // //## Specify custom locations of the include Glyphicons icon font. -$icon-font-path: "../fonts/"; -$icon-font-name: "glyphicons-halflings-regular"; -$icon-font-svg-id: "glyphicons_halflingsregular"; +// $icon-font-path: "../fonts/"; +// $icon-font-name: "glyphicons-halflings-regular"; +// $icon-font-svg-id: "glyphicons_halflingsregular"; //** Icon sizes for use in components -$icon-normal: 16px; -$icon-medium: 18px; -$icon-large: 32px; - +$icon-normal: 16px; +$icon-medium: 18px; +$icon-large: 32px; //== Components // //## Define common padding and border radius sizes and more. -$padding-base-vertical: 0px; -$padding-base-horizontal: 6px; +$padding-base-vertical: 0px; +$padding-base-horizontal: 6px; -$padding-large-vertical: 10px; -$padding-large-horizontal: 16px; +$padding-large-vertical: 10px; +$padding-large-horizontal: 16px; -$padding-small-vertical: 0.7rem; -$padding-small-horizontal: 1.5rem; +$padding-small-vertical: 0.7rem; +$padding-small-horizontal: 1.5rem; -$padding-xs-vertical: 1px; -$padding-xs-horizontal: 5px; +$padding-xs-vertical: 1px; +$padding-xs-horizontal: 5px; -$line-height-large: 1.33; -$line-height-small: 1.5; +$line-height-large: 1.33; +$line-height-small: 1.5; -$border-radius-base: 1px; -$border-radius-large: 3px; -$border-radius-small: 0px; +$border-radius-base: 1px; +$border-radius-large: 3px; +$border-radius-small: 0px; //** Default font-size in components -$component-font-size-base: ceil($font-size-base * 0.833); // ~15px +$component-font-size-base: ceil($font-size-base * 0.833); // ~15px //== Buttons // //## For each of Flat UI's buttons, define text, background, font size and height. -$btn-font-size-base: $component-font-size-base; -$btn-font-size-xs: ceil($component-font-size-base * 0.80); // ~12px -$btn-font-size-sm: floor($component-font-size-base * 0.867); // ~13px -$btn-font-size-lg: ceil($component-font-size-base * 1.133); // ~17px -$btn-font-size-hg: floor($component-font-size-base * 1.467); // ~22px +$btn-font-size-base: $component-font-size-base; +$btn-font-size-xs: ceil($component-font-size-base * 0.8); // ~12px +$btn-font-size-sm: floor($component-font-size-base * 0.867); // ~13px +$btn-font-size-lg: ceil($component-font-size-base * 1.133); // ~17px +$btn-font-size-hg: floor($component-font-size-base * 1.467); // ~22px -$btn-line-height-base: 1.4; // ~21px -$btn-line-height-hg: 1.227; // ~27px -$btn-line-height-lg: 1.471; // ~25px -$btn-line-height-sm: 1.385; // ~16px -$btn-line-height-xs: 1.083; // ~13px +$btn-line-height-base: 1.4; // ~21px +$btn-line-height-hg: 1.227; // ~27px +$btn-line-height-lg: 1.471; // ~25px +$btn-line-height-sm: 1.385; // ~16px +$btn-line-height-xs: 1.083; // ~13px -$btn-social-font-size-base: floor($component-font-size-base * 0.867); // ~13px -$btn-social-line-height-base: 1.077; // ~14px +$btn-social-font-size-base: floor($component-font-size-base * 0.867); // ~13px +$btn-social-line-height-base: 1.077; // ~14px -$btn-font-weight: normal; +$btn-font-weight: normal; -$btn-default-color: #333; -$btn-default-bg: #fff; -$btn-default-border: #ccc; +$btn-default-color: #333; +$btn-default-bg: #fff; +$btn-default-border: #ccc; -$btn-primary-color: #fff; -$btn-primary-bg: $brand-primary; -$btn-primary-border: darken($btn-primary-bg, 5%); +$btn-primary-color: #fff; +$btn-primary-bg: $brand-primary; +$btn-primary-border: darken($btn-primary-bg, 5%); -$btn-success-color: #fff; -$btn-success-bg: $brand-success; -$btn-success-border: darken($btn-success-bg, 5%); +$btn-success-color: #fff; +$btn-success-bg: $brand-success; +$btn-success-border: darken($btn-success-bg, 5%); -$btn-info-color: #fff; -$btn-info-bg: $brand-info; -$btn-info-border: darken($btn-info-bg, 5%); +$btn-info-color: #fff; +$btn-info-bg: $brand-info; +$btn-info-border: darken($btn-info-bg, 5%); -$btn-warning-color: #fff; -$btn-warning-bg: $brand-warning; -$btn-warning-border: darken($btn-warning-bg, 5%); +$btn-warning-color: #fff; +$btn-warning-bg: $brand-warning; +$btn-warning-border: darken($btn-warning-bg, 5%); -$btn-danger-color: #fff; -$btn-danger-bg: $brand-danger; -$btn-danger-border: darken($btn-danger-bg, 5%); +$btn-danger-color: #fff; +$btn-danger-bg: $brand-danger; +$btn-danger-border: darken($btn-danger-bg, 5%); -$btn-link-disabled-color: $gray-light; +$btn-link-disabled-color: $gray-light; //== Forms // //## -$input-font-size-base: $component-font-size-base; -$input-font-size-small: floor($component-font-size-base * 0.867); // ~13px -$input-font-size-large: ceil($component-font-size-base * 1.133); // ~17px -$input-font-size-huge: floor($component-font-size-base * 1.467); // ~22px +$input-font-size-base: $component-font-size-base; +$input-font-size-small: floor($component-font-size-base * 0.867); // ~13px +$input-font-size-large: ceil($component-font-size-base * 1.133); // ~17px +$input-font-size-huge: floor($component-font-size-base * 1.467); // ~22px -$input-line-height-base: 1.467; // ~22px -$input-line-height-small: 1.462; // ~19px -$input-line-height-large: 1.235; // ~21px -$input-line-height-huge: 1.318; // ~29px +$input-line-height-base: 1.467; // ~22px +$input-line-height-small: 1.462; // ~19px +$input-line-height-large: 1.235; // ~21px +$input-line-height-huge: 1.318; // ~29px -$input-icon-font-size: ceil($component-font-size-base * 1.333); // ~20px +$input-icon-font-size: ceil($component-font-size-base * 1.333); // ~20px -$input-bg: $inverse; -$input-bg-disabled: mix($gray, white, 10%); +$input-bg: $inverse; +$input-bg-disabled: mix($gray, white, 10%); -$input-height-small: 35px; -$input-height-base: 32px; -$input-height-large: 45px; -$input-height-huge: 53px; +$input-height-small: 35px; +$input-height-base: 32px; +$input-height-large: 45px; +$input-height-huge: 53px; -$input-border-radius: $border-radius-large; +$input-border-radius: $border-radius-large; -$legend-color: inherit; +$legend-color: inherit; //== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone -$screen-xs-min: 480px; +$screen-xs-min: 480px; // Small screen / tablet -$screen-sm-min: 768px; +$screen-sm-min: 768px; // Medium screen / desktop -$screen-md-min: 992px; +$screen-md-min: 992px; // Large screen / wide desktop -$screen-lg-min: 1200px; +$screen-lg-min: 1200px; // So media queries don't overlap when required, provide a maximum -$screen-xs-max: ($screen-sm-min - 1); -$screen-sm-max: ($screen-md-min - 1); -$screen-md-max: ($screen-lg-min - 1); +$screen-xs-max: ($screen-sm-min - 1); +$screen-sm-max: ($screen-md-min - 1); +$screen-md-max: ($screen-lg-min - 1); //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. -$grid-columns: 12; +$grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. -$grid-gutter-width: 2rem; +$grid-gutter-width: 2rem; // Navbar collapse //** Point at which the navbar becomes uncollapsed. -$grid-float-breakpoint: $screen-sm-min; +$grid-float-breakpoint: $screen-sm-min; //** Point at which the navbar begins collapsing. -$grid-float-breakpoint-max: ($grid-float-breakpoint - 1); +$grid-float-breakpoint-max: ($grid-float-breakpoint - 1); //== Pagination // //## -$pagination-color: mix($brand-primary, white, 20%); - +$pagination-color: mix($brand-primary, white, 20%); //== Pager // //## -$pager-padding: 9px 15px 10px; +$pager-padding: 9px 15px 10px; //== Container sizes // //## Define the maximum width of `.container` for different screen sizes. // Small screen / tablet -$container-tablet: (720 + $grid-gutter-width) !default; +$container-tablet: (720 + $grid-gutter-width) !default; //** For `$screen-sm-min` and up. -$container-sm: $container-tablet !default; +$container-sm: $container-tablet !default; // Medium screen / desktop -$container-desktop: (940 + $grid-gutter-width) !default; +$container-desktop: (940 + $grid-gutter-width) !default; //** For `$screen-md-min` and up. -$container-md: $container-desktop !default; +$container-md: $container-desktop !default; // Large screen / wide desktop -$container-large-desktop: (1140 + $grid-gutter-width) !default; +$container-large-desktop: (1140 + $grid-gutter-width) !default; //** For `$screen-lg-min` and up. -$container-lg: $container-large-desktop !default; - +$container-lg: $container-large-desktop !default; //== Navbar // //## // Basics of a navbar -$zindex-navbar: 1000; -$zindex-dropdown: 1000; -$zindex-popover: 1060; -$zindex-tooltip: 1070; -$zindex-navbar-fixed: 1030; -$zindex-modal-background: 1040; -$zindex-modal: 1050; - -$navbar-height-base: 53px; -$navbar-height-large: 76px; -$navbar-input-line-height: 1.4; // ~21px -$navbar-margin-bottom: $line-height-computed; -$navbar-border-radius: $border-radius-small; - -$navbar-height: 40px; +$zindex-navbar: 1000; +$zindex-dropdown: 1000; +$zindex-popover: 1060; +$zindex-tooltip: 1070; +$zindex-navbar-fixed: 1030; +$zindex-modal-background: 1040; +$zindex-modal: 1050; + +$navbar-height-base: 53px; +$navbar-height-large: 76px; +$navbar-input-line-height: 1.4; // ~21px +$navbar-margin-bottom: $line-height-computed; +$navbar-border-radius: $border-radius-small; + +$navbar-height: 40px; // $navbar-border-radius: $border-radius-base; -$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) - 2; -$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2); +$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) - 2; +$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2); -$navbar-default-color: #777; -$navbar-default-bg: #f8f8f8; -$navbar-default-border: darken($navbar-default-bg, 6.5%); +$navbar-default-color: #777; +$navbar-default-bg: #f8f8f8; +$navbar-default-border: darken($navbar-default-bg, 6.5%); // Navbar links -$navbar-default-link-color: #777; -$navbar-default-link-hover-color: #333; -$navbar-default-link-hover-bg: transparent; -$navbar-default-link-active-color: #555; -$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%); -$navbar-default-link-disabled-color: #ccc; -$navbar-default-link-disabled-bg: transparent; +$navbar-default-link-color: #777; +$navbar-default-link-hover-color: #333; +$navbar-default-link-hover-bg: transparent; +$navbar-default-link-active-color: #555; +$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%); +$navbar-default-link-disabled-color: #ccc; +$navbar-default-link-disabled-bg: transparent; // Navbar brand label -$navbar-default-brand-color: $navbar-default-link-color; -$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%); -$navbar-default-brand-hover-bg: transparent; +$navbar-default-brand-color: $navbar-default-link-color; +$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%); +$navbar-default-brand-hover-bg: transparent; // Navbar toggle -$navbar-default-toggle-hover-bg: #ddd; -$navbar-default-toggle-icon-bar-bg: #888; -$navbar-default-toggle-border-color: #ddd; +$navbar-default-toggle-hover-bg: #ddd; +$navbar-default-toggle-icon-bar-bg: #888; +$navbar-default-toggle-border-color: #ddd; // customed // Navbar nav carets -$navbar-default-caret-color: $navbar-default-link-color; -$navbar-default-caret-hover-color: $navbar-default-link-hover-color; -$navbar-default-caret-active-color: $navbar-default-link-active-color; +$navbar-default-caret-color: $navbar-default-link-color; +$navbar-default-caret-hover-color: $navbar-default-link-hover-color; +$navbar-default-caret-active-color: $navbar-default-link-active-color; // Navbar form // $navbar-default-form-placeholder: adjust-hue(tint($brand-primary, 60%), 2); // $navbar-default-form-icon: desaturate(tint($brand-primary, 45%), 2%); // $navbar-default-form-border: shade($navbar-default-bg, 3%); - // Inverted navbar // Reset inverted navbar basics -$navbar-inverse-divider: darken($brand-primary, 3%); +$navbar-inverse-divider: darken($brand-primary, 3%); // Reset inverted navbar basics -$navbar-inverse-color: $gray-light; -$navbar-inverse-bg: #222; -$navbar-inverse-border: darken($navbar-inverse-bg, 10%); +$navbar-inverse-color: $gray-light; +$navbar-inverse-bg: #222; +$navbar-inverse-border: darken($navbar-inverse-bg, 10%); // Inverted navbar links -$navbar-inverse-link-color: $inverse; -$navbar-inverse-link-hover-color: $brand-secondary; -$navbar-inverse-link-hover-bg: transparent; -$navbar-inverse-link-active-color: $navbar-inverse-link-color; -$navbar-inverse-link-active-bg: $brand-secondary; -$navbar-inverse-link-disabled-color: #444; -$navbar-inverse-link-disabled-bg: transparent; +$navbar-inverse-link-color: $inverse; +$navbar-inverse-link-hover-color: $brand-secondary; +$navbar-inverse-link-hover-bg: transparent; +$navbar-inverse-link-active-color: $navbar-inverse-link-color; +$navbar-inverse-link-active-bg: $brand-secondary; +$navbar-inverse-link-disabled-color: #444; +$navbar-inverse-link-disabled-bg: transparent; // Navbar nav carets -$navbar-inverse-caret-color: lighten(desaturate($brand-primary, 7%), 9%); -$navbar-inverse-caret-hover-color: $navbar-inverse-link-hover-color; -$navbar-inverse-caret-active-color: $navbar-inverse-link-active-color; +$navbar-inverse-caret-color: lighten(desaturate($brand-primary, 7%), 9%); +$navbar-inverse-caret-hover-color: $navbar-inverse-link-hover-color; +$navbar-inverse-caret-active-color: $navbar-inverse-link-active-color; // Inverted navbar brand label -$navbar-inverse-brand-color: $navbar-inverse-link-color; -$navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color; -$navbar-inverse-brand-hover-bg: transparent; +$navbar-inverse-brand-color: $navbar-inverse-link-color; +$navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color; +$navbar-inverse-brand-hover-bg: transparent; // Inverted navbar toggle -$navbar-inverse-toggle-color: $navbar-inverse-link-color; -$navbar-inverse-toggle-hover-color: $navbar-inverse-link-hover-color; +$navbar-inverse-toggle-color: $navbar-inverse-link-color; +$navbar-inverse-toggle-hover-color: $navbar-inverse-link-hover-color; // Navbar form -$navbar-inverse-form-bg: darken($brand-primary, 6%); -$navbar-inverse-form-placeholder: desaturate(lighten($brand-primary, 13%), 7%); -$navbar-inverse-form-icon: desaturate(lighten($brand-primary, 13%), 6%); -$navbar-inverse-form-border: $navbar-inverse-divider; +$navbar-inverse-form-bg: darken($brand-primary, 6%); +$navbar-inverse-form-placeholder: desaturate(lighten($brand-primary, 13%), 7%); +$navbar-inverse-form-icon: desaturate(lighten($brand-primary, 13%), 6%); +$navbar-inverse-form-border: $navbar-inverse-divider; // Dropdown menu -$navbar-inverse-dropdown-arrow: $navbar-inverse-bg; -$navbar-inverse-dropdown-bg: $navbar-inverse-bg; -$navbar-inverse-dropdown-link-color: mix($navbar-inverse-bg, $navbar-inverse-color, 15%); -$navbar-inverse-dropdown-link-hover-color: $inverse; -$navbar-inverse-dropdown-link-hover-bg: $brand-secondary; - +$navbar-inverse-dropdown-arrow: $navbar-inverse-bg; +$navbar-inverse-dropdown-bg: $navbar-inverse-bg; +$navbar-inverse-dropdown-link-color: mix( + $navbar-inverse-bg, + $navbar-inverse-color, + 15% +); +$navbar-inverse-dropdown-link-hover-color: $inverse; +$navbar-inverse-dropdown-link-hover-bg: $brand-secondary; //== Dropdown Menu // //## $bg-dark-color: #323538; -$dropdown-background: $bg-dark-color; -$dropdown-bg: $bg-dark-color; -$dropdown-link-hover-color: $inverse; +$dropdown-background: $bg-dark-color; +$dropdown-bg: $bg-dark-color; +$dropdown-link-hover-color: $inverse; $dropdown-link-hover-bg: $brand-primary; $dropdown-link-color: $inverse; // $dropdown-fallback-border; // $dropdown-border; // $border-radius-base; - //== Iconbar // //## -$iconbar-background: mix($brand-primary, black, 85%); - +$iconbar-background: mix($brand-primary, black, 85%); //== Progress bars // //## -$progress-height: 12px; - +$progress-height: 12px; //== Slider // //## -$slider-height: 12px; -$slider-value-font-size: floor($component-font-size-base * 0.867); // ~13px; - -$slider-handle-bg: mix($brand-secondary, black, 85%); -$slider-handle-hover-bg: mix($brand-secondary, white, 80%); -$slider-handle-active-bg: mix($brand-secondary, black, 85%); +$slider-height: 12px; +$slider-value-font-size: floor($component-font-size-base * 0.867); // ~13px; -$slider-range-bg: $brand-secondary; +$slider-handle-bg: mix($brand-secondary, black, 85%); +$slider-handle-hover-bg: mix($brand-secondary, white, 80%); +$slider-handle-active-bg: mix($brand-secondary, black, 85%); -$slider-segment-bg: mix(desaturate($brand-primary, 15%), white, 20%); +$slider-range-bg: $brand-secondary; +$slider-segment-bg: mix(desaturate($brand-primary, 15%), white, 20%); //== Switch // //## -$switch-border-radius: 30px; -$switch-width: 80px; - +$switch-border-radius: 30px; +$switch-width: 80px; //== Thumbnails // //## //** Padding around the thumbnail image -$thumbnail-padding: 4px; +$thumbnail-padding: 4px; //** Thumbnail background color -$thumbnail-bg: $body-bg; +$thumbnail-bg: $body-bg; //** Thumbnail border color -$thumbnail-border: $gray-light; +$thumbnail-border: $gray-light; //** Thumbnail border radius -$thumbnail-border-radius: $border-radius-large; +$thumbnail-border-radius: $border-radius-large; //** Custom text color for thumbnail captions -$thumbnail-caption-color: $text-color; +$thumbnail-caption-color: $text-color; //** Padding around the thumbnail caption -$thumbnail-caption-padding: 9px; - +$thumbnail-caption-padding: 9px; // Form states and alerts // //## Define colors for form feedback states and, by default, alerts. -$state-success-text: $brand-success; -$state-success-bg: #dff0d8; -$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%); +$state-success-text: $brand-success; +$state-success-bg: #dff0d8; +$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%); -$state-info-text: $brand-info; -$state-info-bg: $gray-dark; -$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%); +$state-info-text: $brand-info; +$state-info-bg: $gray-dark; +$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%); -$state-warning-text: $brand-warning; -$state-warning-bg: #fcf8e3; -$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%); +$state-warning-text: $brand-warning; +$state-warning-bg: #fcf8e3; +$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%); -$state-danger-text: $brand-danger; -$state-danger-bg: #f2dede; -$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%); +$state-danger-text: $brand-danger; +$state-danger-bg: #f2dede; +$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%); //== Alerts // //## Define alert colors, border radius, and padding. -$alert-padding: 15px !default; -$alert-border-radius: $border-radius-small !default; -$alert-link-font-weight: bold !default; +$alert-padding: 15px !default; +$alert-border-radius: $border-radius-small !default; +$alert-link-font-weight: bold !default; -$alert-success-bg: $state-success-bg !default; -$alert-success-text: $state-success-text !default; -$alert-success-border: $state-success-border !default; +$alert-success-bg: $state-success-bg !default; +$alert-success-text: $state-success-text !default; +$alert-success-border: $state-success-border !default; -$alert-info-bg: $state-info-bg !default; -$alert-info-text: $state-info-text !default; -$alert-info-border: $state-info-border !default; +$alert-info-bg: $state-info-bg !default; +$alert-info-text: $state-info-text !default; +$alert-info-border: $state-info-border !default; -$alert-warning-bg: $state-warning-bg !default; -$alert-warning-text: $state-warning-text !default; -$alert-warning-border: $state-warning-border !default; +$alert-warning-bg: $state-warning-bg !default; +$alert-warning-text: $state-warning-text !default; +$alert-warning-border: $state-warning-border !default; -$alert-danger-bg: $state-danger-bg !default; -$alert-danger-text: $state-danger-text !default; -$alert-danger-border: $state-danger-border !default; +$alert-danger-bg: $state-danger-bg !default; +$alert-danger-text: $state-danger-text !default; +$alert-danger-border: $state-danger-border !default; // Code // //## -$code-color: #c7254e; -$code-bg: #f9f2f4; +$code-color: #c7254e; +$code-bg: #f9f2f4; -$kbd-color: $inverse; -$kbd-bg: $brand-primary; - -$pre-bg: $inverse; -$pre-color: inherit; -$pre-border-color: mix($brand-primary, $inverse, 12%); -$pre-scrollable-max-height: 340px; -$pre-border-radius: $border-radius-large; +$kbd-color: $inverse; +$kbd-bg: $brand-primary; +$pre-bg: $inverse; +$pre-color: inherit; +$pre-border-color: mix($brand-primary, $inverse, 12%); +$pre-scrollable-max-height: 340px; +$pre-border-radius: $border-radius-large; // Type // //## //** Text muted color -$text-muted: $gray-light; +$text-muted: $gray-light; //** Abbreviations and acronyms border color -$abbr-border-color: $gray-light; +$abbr-border-color: $gray-light; //** Headings small color -$headings-small-color: inherit;//mix($brand-primary, $inverse, 12%); +$headings-small-color: inherit; //mix($brand-primary, $inverse, 12%); //** Blockquote small color -$blockquote-small-color: inherit; +$blockquote-small-color: inherit; //** Blockquote border color -$blockquote-border-color: mix($brand-primary, $inverse, 12%); +$blockquote-border-color: mix($brand-primary, $inverse, 12%); //** Page header border color -$page-header-border-color: mix($brand-primary, $inverse, 12%); - +$page-header-border-color: mix($brand-primary, $inverse, 12%); // Miscellaneous // //## //** Hr border color -$hr-border: mix($brand-primary, $inverse, 63%); +$hr-border: mix($brand-primary, $inverse, 63%); //** Horizontal forms & lists $component-offset-horizontal: 180px; $drawer-width: 29.5rem; -$sidebar-closed-width: 7rem; \ No newline at end of file +$sidebar-closed-width: 7rem; diff --git a/src/css/layout/navbar.scss b/src/css/layout/navbar.scss index 17e0a893..6c8edd0e 100644 --- a/src/css/layout/navbar.scss +++ b/src/css/layout/navbar.scss @@ -1,63 +1,62 @@ @import '../core/global.scss'; @media (min-width: 320px) { - $navbar-new-height: 1rem; - - .navbar { - background-image: none; - background-color: var(--navbar-bg-color); - transition: transform, margin-left .3s ease-out; - - &.navbar-fixed-top { - padding: 0; - z-index: 1020; - - &.fullscreen { - transform: translatey(-60px); - } - } - - .navbar-brand { - margin: 0; - position: relative; - } - .sidebar-toggle { - padding: .3rem 1.5rem; - font-size: 2rem; - line-height: 2; - } - - .navbar-header { - width: auto; - margin-right: 7px; - line-height: $navbar-new-height; - } - } - - &.navbar-transparent { - background-color: transparent; - color: $inverse; - } + $navbar-new-height: 1rem; + + .navbar { + background-image: none; + background-color: var(--navbar-bg-color); + transition: transform, margin-left 0.3s ease-out; + + &.navbar-fixed-top { + padding: 0; + z-index: 1020; + + &.fullscreen { + transform: translatey(-60px); + } + } + + .navbar-brand { + margin: 0; + position: relative; + } + .sidebar-toggle { + padding: 0.3rem 1.5rem; + font-size: 2rem; + line-height: 2; + } + + .navbar-header { + width: auto; + margin-right: 7px; + line-height: $navbar-new-height; + } + } + + &.navbar-transparent { + background-color: transparent; + color: $inverse; + } } @media (min-width: 768px) { - .navbar { - - .container { + .navbar { + .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; - padding: 0; - } - } - .navbar-fixed-top { - box-shadow: 0 1px 7px rgba(0,0,0,0.5); - border-width: 0; - } + padding: 0; + } + } + .navbar-fixed-top { + box-shadow: 0 1px 7px rgba(0, 0, 0, 0.5); + border-width: 0; + } } @media (min-width: 1280px) { - .navbar .navbar-brand { - padding-left: 5px; - } + .navbar .navbar-brand { + padding-left: 5px; + } } diff --git a/src/css/style.scss b/src/css/style.scss index 3b81e3e1..f7d929fe 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -2,19 +2,25 @@ Author: Oren Farhi, http://orizens.com ========================================================================== */ /* Application */ -// $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; @import './echoes-variables'; // @import '~bootstrap-sass/assets/stylesheets/bootstrap'; @import './bootstrap-custom'; @import './core/global'; @import './core/utils'; +@import './core/animations'; +@import './core/responsive'; -$fa-font-path: '../fonts' !default; -@import '~font-awesome/scss/font-awesome'; +// $fa-font-path: '../fonts' !default; +// @import '~font-awesome/scss/font-awesome'; // Themes @import './themes/index.themes'; +body, +html { + height: 100%; +} + .btn:focus, .btn:active:focus, .btn.active:focus, diff --git a/src/css/themes/arctic.theme.scss b/src/css/themes/arctic.theme.scss index 8f62c111..972ab3b8 100644 --- a/src/css/themes/arctic.theme.scss +++ b/src/css/themes/arctic.theme.scss @@ -24,7 +24,7 @@ body.arctic { --navbar-bg-color: $white-dark-transparent; --navbar-text-color: $text-color; --navbar-link-color: var(--link-primary-color); - + --list-group-item-text: #555; --list-group-item-text-hover: #555; --list-group-item-bg: $inverse; @@ -34,4 +34,4 @@ body.arctic { --player-controls-bar-bg: $gray-darker; --app-bg-color: $body-bg; -} \ No newline at end of file +} diff --git a/src/css/themes/bumblebee.theme.scss b/src/css/themes/bumblebee.theme.scss index d987071a..35ee0f72 100644 --- a/src/css/themes/bumblebee.theme.scss +++ b/src/css/themes/bumblebee.theme.scss @@ -4,8 +4,8 @@ body.bumblebee { --brand-success: #2ecc71; --brand-warning: #f18f0f; --brand-danger: #f13939; - --brand-info: #00BCD4; - + --brand-info: #00bcd4; + --sidebar-bg: rgba(18, 22, 24, 0.95); --sidebar-bg-secondary: #080d0f; --sidebar-text: white; @@ -15,12 +15,12 @@ body.bumblebee { --brand-primary-lite-bg-color: white; --brand-primary-text-color: #fbfbfb; --brand-dark-bg-color: #000; - --brand-dark-bg-color-transparent: rgba(10, 10, 10, 0.5); + --brand-dark-bg-color-transparent: rgba(10, 10, 10, 0.7); --brand-bg-lite-transparent: rgb(19, 40, 51); - + --link-primary-color: var(--brand-primary); --link-primary-hover-color: var(--brand-primary); - + --navbar-bg-color: rgba(18, 22, 24, 0.95); --navbar-text-color: #fbfbfb; --navbar-link-color: var(--link-primary-color); @@ -34,4 +34,4 @@ body.bumblebee { --player-controls-bar-bg: var(--navbar-bg-color); --app-bg-color: #0d0f0f; -} \ No newline at end of file +} diff --git a/src/css/themes/halloween.theme.scss b/src/css/themes/halloween.theme.scss index a1556cb8..b371d22a 100644 --- a/src/css/themes/halloween.theme.scss +++ b/src/css/themes/halloween.theme.scss @@ -1,11 +1,11 @@ body.halloween { - --brand-primary: #FF5722; + --brand-primary: #ff5722; --brand-secondary: #d77418; - --brand-success: #2196F3; + --brand-success: #2196f3; --brand-warning: #f1c40f; - --brand-danger: #F44336; - --brand-info: #4CAF50; - + --brand-danger: #f44336; + --brand-info: #4caf50; + --sidebar-bg: rgba(10, 21, 27, 0.95); --sidebar-bg-secondary: #0e191f; --sidebar-text: white; @@ -15,12 +15,12 @@ body.halloween { --brand-primary-lite-bg-color: white; --brand-primary-text-color: #fbfbfb; --brand-dark-bg-color: #000; - --brand-dark-bg-color-transparent: rgba(10, 10, 10, 0.5); + --brand-dark-bg-color-transparent: rgba(10, 10, 10, 0.7); --brand-bg-lite-transparent: rgb(19, 40, 51); - + --link-primary-color: var(--brand-primary); --link-primary-hover-color: var(--brand-primary); - + --navbar-bg-color: rgba(10, 21, 27, 0.95); --navbar-text-color: #fbfbfb; --navbar-link-color: var(--link-primary-color); @@ -34,4 +34,4 @@ body.halloween { --player-controls-bar-bg: var(--navbar-bg-color); --app-bg-color: #0b161b; -} \ No newline at end of file +} diff --git a/src/index.html b/src/index.html index 0fdaa2c4..8341c8fc 100644 --- a/src/index.html +++ b/src/index.html @@ -94,8 +94,7 @@ function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', window.GA_PROJECT_ID); - // gtag('set', {'user_id': 'USER_ID'}); - + ` @@ -108,6 +107,5 @@
    - \ No newline at end of file diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json index bbfbb0fd..61ee2e29 100644 --- a/src/tsconfig.app.json +++ b/src/tsconfig.app.json @@ -3,38 +3,18 @@ "compilerOptions": { "outDir": "../out-tsc/app", "module": "es2015", - "baseUrl": "", + "baseUrl": "./", "paths": { - "~/*": [ - "/*" - ], - "@utils/*": [ - "app/shared/utils/*" - ], - "@shared/*": [ - "app/shared/*" - ], - "@animations/*": [ - "app/shared/animations/*" - ], - "@core/*": [ - "app/core/*" - ], - "@api/*": [ - "app/core/api/*" - ], - "@resolvers/*": [ - "app/core/resolvers/*" - ], - "@store/*": [ - "app/core/store/*" - ], - "@mocks/*": [ - "../tests/mocks/*" - ], - "@env/*": [ - "environments/*" - ] + "~/*": ["/*"], + "@utils/*": ["app/shared/utils/*"], + "@shared/*": ["app/shared/*"], + "@animations/*": ["app/shared/animations/*"], + "@core/*": ["app/core/*"], + "@api/*": ["app/core/api/*"], + "@resolvers/*": ["app/core/resolvers/*"], + "@store/*": ["app/core/store/*"], + "@mocks/*": ["../tests/mocks/*"], + "@env/*": ["environments/*"] }, "types": [ "gapi", @@ -45,11 +25,6 @@ "node" ] }, - "exclude": [ - "test.ts", - "**/*.spec.ts" - ], - "angularCompilerOptions": { - "preserveWhitespaces": false - } -} \ No newline at end of file + "exclude": ["test.ts", "**/*.spec.ts"], + "angularCompilerOptions": {} +} diff --git a/tslint.json b/tslint.json index 2d9cc9ff..824461d8 100644 --- a/tslint.json +++ b/tslint.json @@ -38,7 +38,7 @@ ], "no-arg": true, "no-bitwise": true, - "no-console": [true, "debug", "info", "time", "timeEnd", "trace"], + "no-console": [true, "debug", "time", "timeEnd", "trace"], "no-construct": true, "no-debugger": true, "no-duplicate-variable": true,