20 | To view your playlists in youtube, you need to sign in. 21 | 25 |
26 |
22 |
23 |
24 |
8 |
10 | `,
11 | changeDetection: ChangeDetectionStrategy.OnPush
12 | })
13 | export class LoadingIndicatorComponent {
14 | @Input() message = '';
15 | @Input() loading = false;
16 |
17 | @HostBinding('class.show-loader')
18 | get show() {
19 | return this.loading;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/containers/app-navbar/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { SharedModule } from '@shared/index';
3 | import { RouterModule } from '@angular/router';
4 |
5 | import { AppNavbarComponent } from './app-navbar.component';
6 | import { AppNavbarMenuComponent } from './app-navbar-menu';
7 | import { AppNavbarUserComponent } from './app-navbar-user';
8 |
9 | @NgModule({
10 | imports: [
11 | SharedModule,
12 | RouterModule
13 | ],
14 | declarations: [
15 | AppNavbarComponent,
16 | AppNavbarMenuComponent,
17 | AppNavbarUserComponent
18 | ],
19 | exports: [
20 | AppNavbarComponent
21 | ]
22 | })
23 | export class AppNavbarModule { }
24 |
--------------------------------------------------------------------------------
/src/app/core/components/now-playing/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { SharedModule } from '@shared/index';
3 |
4 | import { NowPlayingComponent } from './now-playing.component';
5 | import { NowPlaylistComponent, NowPlaylistTrackComponent } from './now-playlist';
6 | import { NowPlaylistFilterComponent } from './now-playlist-filter';
7 |
8 | @NgModule({
9 | imports: [
10 | SharedModule
11 | ],
12 | declarations: [
13 | NowPlayingComponent,
14 | NowPlaylistComponent,
15 | NowPlaylistTrackComponent,
16 | NowPlaylistFilterComponent
17 | ],
18 | exports: [
19 | NowPlayingComponent
20 | ]
21 | })
22 | export class NowPlayingModule { }
23 |
--------------------------------------------------------------------------------
/src/app/containers/playlist-view/index.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { SharedModule } from '@shared/index';
3 |
4 | import { AppNavbarModule } from '../app-navbar';
5 | import { PlaylistViewComponent } from './playlist-view.component';
6 | import { PlaylistProxy } from './playlist-view.proxy';
7 |
8 | import { routing } from './playlist-view.routing';
9 |
10 | @NgModule({
11 | imports: [
12 | SharedModule,
13 | AppNavbarModule,
14 | routing
15 | ],
16 | declarations: [
17 | PlaylistViewComponent
18 | ],
19 | exports: [
20 | PlaylistViewComponent
21 | ],
22 | providers: [
23 | PlaylistProxy
24 | ]
25 | })
26 | export class PlaylistViewModule { }
27 |
--------------------------------------------------------------------------------
/src/app/core/components/now-playing/now-playing.scss:
--------------------------------------------------------------------------------
1 | // FLEX LAYOUT START
2 | :host {
3 | $padding-bottom: 31rem;
4 |
5 | flex-grow: 16;
6 | flex-shrink: 0;
7 | flex-basis: 0rem;
8 | display: flex;
9 | flex-direction: column;
10 |
11 | .sidebar-pane {
12 | flex: 1 1 0;
13 | display: flex;
14 | flex-direction: column;
15 | // hidden for hiding top shadow while exposing bottom shadow
16 | overflow-y: hidden;
17 | }
18 |
19 | now-playlist-filter {
20 | flex-grow: 0;
21 | flex-shrink: 1;
22 | flex-basis: 0rem;
23 | }
24 |
25 | now-playlist {
26 | flex: 1 1 0;
27 | overflow-y: auto;
28 | padding-bottom: $padding-bottom;
29 | }
30 | }
31 | // FLEX LAYOUT END
--------------------------------------------------------------------------------
/src/app/shared/utils/media.utils.ts:
--------------------------------------------------------------------------------
1 | export function getSnippet(media) {
2 | return media && media.hasOwnProperty('snippet') && media.snippet;
3 | }
4 |
5 | export function extractThumbnail(snippet) {
6 | let thumbUrl = '';
7 | if (snippet) {
8 | const thumbs = snippet.thumbnails;
9 | const sizes = ['high', 'standard', 'default'];
10 | const thumb = sizes.reduce((acc, size) => {
11 | acc.result = !acc.result.length && thumbs[size] ? thumbs[size].url : acc.result;
12 | return acc;
13 | }, { result: '' });
14 | thumbUrl = thumb.result;
15 | }
16 | return thumbUrl;
17 | }
18 |
19 | export function extractThumbUrl(media) {
20 | return extractThumbnail(getSnippet(media));
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/core/store/router-store/router-store.reducer.ts:
--------------------------------------------------------------------------------
1 | import { StoreModule, ActionReducerMap } from '@ngrx/store';
2 | import { Params, RouterStateSnapshot } from '@angular/router';
3 | import {
4 | RouterReducerState,
5 | RouterStateSerializer
6 | } from '@ngrx/router-store';
7 |
8 | export interface RouterStateUrl {
9 | url: string;
10 | queryParams: Params;
11 | }
12 |
13 | export class NavigationSerializer implements RouterStateSerializer
10 |
11 |
15 |
18 |
19 | `
20 | })
21 | export class AppBrandComponent implements OnInit {
22 | constructor(private appApi: AppApi) { }
23 | ngOnInit() { }
24 |
25 | toggleSidebar() {
26 | return this.appApi.toggleSidebar();
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/core/components/app-player/player-resizer/player-resizer.scss:
--------------------------------------------------------------------------------
1 | @import '~css/core/global.scss';
2 |
3 | @media (min-width: 320px) {
4 | :host {
5 | .btn.show-player {
6 | background-color: var(--brand-primary);
7 | color: var(--brand-inverse-text);
8 | }
9 | .full-screen.show-player {
10 | transform: scale(5);
11 | background-color: transparent;
12 | color: var(--brand-primary);
13 | border: none;
14 | left: 14rem;
15 | position: absolute;
16 | font-size: 4rem;
17 | top: 12rem;
18 | padding: 1rem 2.5rem;
19 | }
20 | .icon-max {
21 | display: block;
22 | }
23 |
24 | .icon-minimize {
25 | display: none;
26 | }
27 |
28 | .show-youtube-player & {
29 | display: block;
30 |
31 | .icon-max {
32 | display: none;
33 | }
34 |
35 | .icon-minimize {
36 | display: block;
37 | }
38 | }
39 | }
40 | }
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Store } from '@ngrx/store';
2 | import { VersionCheckerService } from './core/services/version-checker.service';
3 | import { Component, HostBinding, OnInit } from '@angular/core';
4 | import { EchoesState } from '@store/reducers';
5 | import { getSidebarCollapsed, getAppTheme } from '@store/app-layout';
6 |
7 |
8 | @Component({
9 | selector: 'body',
10 | templateUrl: './app.component.html',
11 | styleUrls: ['./app.component.scss']
12 | })
13 | export class AppComponent implements OnInit {
14 | sidebarCollapsed$ = this.store.select(getSidebarCollapsed);
15 | theme$ = this.store.select(getAppTheme);
16 |
17 | @HostBinding('class')
18 | style = 'arctic';
19 |
20 | constructor(private store: StoreEch
12 | 13 |es
14 |
2 |
3 |
13 |
14 |
24 |
25 |
--------------------------------------------------------------------------------
/src/app/containers/app-search/index.ts:
--------------------------------------------------------------------------------
1 | import { ReactiveFormsModule } from '@angular/forms';
2 | import { NgModule } from '@angular/core';
3 | import { SharedModule } from '@shared/index';
4 |
5 | import { AppSearchComponent } from './app-search.component';
6 | import { AppNavbarModule } from '../app-navbar';
7 | import { YoutubeVideosComponent } from './youtube-videos.component';
8 | import { YoutubePlaylistsComponent } from './youtube-playlists.component';
9 | import { PlayerSearchComponent } from './player-search.component';
10 | import { SearchNavigatorComponent } from './search-navigator';
11 | import { routing } from './app-search.routing';
12 |
13 | @NgModule({
14 | imports: [
15 | SharedModule,
16 | AppNavbarModule,
17 | ReactiveFormsModule,
18 | routing
19 | ],
20 | declarations: [
21 | AppSearchComponent,
22 | YoutubeVideosComponent,
23 | YoutubePlaylistsComponent,
24 | PlayerSearchComponent,
25 | SearchNavigatorComponent
26 | ],
27 | exports: [
28 | AppSearchComponent
29 | ],
30 | providers: []
31 | })
32 | export class AppSearchModule { }
33 |
--------------------------------------------------------------------------------
/src/app/core/components/app-sidebar/app-sidebar.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { AppSidebarProxy } from './app-sidebar.proxy';
3 |
4 | @Component({
5 | selector: 'app-sidebar',
6 | styleUrls: ['./app-sidebar.scss'],
7 | template: `
8 |
18 | `,
19 | changeDetection: ChangeDetectionStrategy.OnPush
20 | })
21 | export class AppSidebarComponent {
22 | sidebarCollapsed$ = this.appSidebarProxy.sidebarCollapsed$;
23 | searchType$ = this.appSidebarProxy.searchType$;
24 |
25 | constructor(private appSidebarProxy: AppSidebarProxy) { }
26 |
27 | toggleSidebar() {
28 | this.appSidebarProxy.toggleSidebar();
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/core/services/youtube-videos-info.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import { YoutubeApiService } from './youtube-api.service';
4 | import { Authorization } from './authorization.service';
5 |
6 | interface IYoutubeVideosInfo {
7 | items: GoogleApiYouTubeVideoResource[];
8 | }
9 | @Injectable()
10 | export class YoutubeVideosInfo {
11 | public api: YoutubeApiService;
12 |
13 | constructor(private http: HttpClient, auth: Authorization) {
14 | this.api = new YoutubeApiService({
15 | url: 'https://www.googleapis.com/youtube/v3/videos',
16 | http: this.http,
17 | idKey: 'id',
18 | config: {
19 | part: 'snippet,contentDetails,statistics'
20 | }
21 | }, auth);
22 | }
23 |
24 | fetchVideoData(mediaId: string) {
25 | return this.api
26 | .list(mediaId)
27 | .map(response => response.items[0]);
28 | }
29 |
30 | fetchVideosData(mediaIds: string) {
31 | return this.api
32 | .list(mediaIds)
33 | .map(response => response.items);
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/assets/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Echoes Player",
3 | "short_name": "Echoes Player",
4 | "description": "Echoes is an easy youtube player",
5 | "icons": [
6 | {
7 | "src": "icon/android-icon-36.png",
8 | "sizes": "36x36",
9 | "type": "image/png"
10 | },
11 | {
12 | "src": "icon/android-icon-48.png",
13 | "sizes": "48x48",
14 | "type": "image/png"
15 | },
16 | {
17 | "src": "icon/android-icon-72.png",
18 | "sizes": "72x72",
19 | "type": "image/png"
20 | },
21 | {
22 | "src": "icon/android-icon-96.png",
23 | "sizes": "96x96",
24 | "type": "image/png"
25 | },
26 | {
27 | "src": "icon/android-icon-144.png",
28 | "sizes": "144x144",
29 | "type": "image/png"
30 | },
31 | {
32 | "src": "icon/android-icon-192.png",
33 | "sizes": "192x192",
34 | "type": "image/png"
35 | }
36 | ],
37 | "start_url": "../index.html?utm_source=web_app_manifest",
38 | "display": "fullscreen",
39 | "background_color": "#03A9F4",
40 | "theme_color": "#03A9F4",
41 | "orientation": "portrait-primary"
42 | }
--------------------------------------------------------------------------------
/src/app/containers/user/user.routing.ts:
--------------------------------------------------------------------------------
1 | import { PlaylistVideosResolver } from '@core/resolvers/playlist-videos.resolver';
2 | import { PlaylistResolver } from '@core/resolvers/playlist.resolver';
3 |
4 | import { ModuleWithProviders } from '@angular/core';
5 | import { RouterModule } from '@angular/router';
6 |
7 | import { UserComponent } from './user.component';
8 | import { PlaylistsComponent } from './playlists';
9 | import { PlaylistViewComponent } from '../playlist-view/playlist-view.component';
10 | import { AuthGuard } from './user.guard';
11 |
12 | export const routing: ModuleWithProviders = RouterModule.forChild([
13 | {
14 | path: '', component: UserComponent,
15 | children: [
16 | { path: '', redirectTo: 'playlists', pathMatch: 'full' },
17 | { path: 'playlists', component: PlaylistsComponent },
18 | {
19 | path: 'playlist/:id', component: PlaylistViewComponent,
20 | canActivate: [AuthGuard], canActivateChild: [AuthGuard],
21 | resolve: {
22 | videos: PlaylistVideosResolver,
23 | playlist: PlaylistResolver
24 | }
25 | }
26 | ]
27 | },
28 | ]);
29 |
--------------------------------------------------------------------------------
/src/app/containers/user/user.guard.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router';
3 |
4 | import { Authorization } from '@core/services';
5 |
6 | @Injectable()
7 | export class AuthGuard implements CanActivate, CanActivateChild {
8 | constructor(private authorization: Authorization, private router: Router) { }
9 |
10 | canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
11 | // console.log('AuthGuard#canActivate called', { state });
12 | const url: string = state.url;
13 | return this.checkLogin(url);
14 | }
15 |
16 | canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
17 | return this.canActivate(route, state);
18 | }
19 |
20 | checkLogin(url: string): boolean {
21 | if (this.authorization.isSignIn()) { return true; }
22 |
23 | // Store the attempted URL for redirecting
24 | // this.authService.redirectUrl = url;
25 |
26 | // Navigate to the login page with extras
27 | this.router.navigate(['/user']);
28 | return false;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Oren Farhi Orizens LLC
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/src/app/core/effects/app-settings.effects.ts:
--------------------------------------------------------------------------------
1 | import { NowPlaylistService } from '@core/services';
2 | import { Store } from '@ngrx/store';
3 | import { EchoesState } from '@store/reducers';
4 | import { Injectable } from '@angular/core';
5 | import { Effect, Actions, toPayload } from '@ngrx/effects';
6 |
7 | import 'rxjs/add/observable/of';
8 | import { Observable } from 'rxjs/Observable';
9 |
10 | import * as AppLayout from '@store/app-layout';
11 | import { VersionCheckerService } from '@core/services/version-checker.service';
12 |
13 | @Injectable()
14 | export class AppSettingsEffects {
15 | constructor(
16 | public actions$: Actions,
17 | public store: Store
4 |
11 |
12 |
5 | ![]()
6 |
7 |
10 | 15 | {{ media.snippet.title }} 16 |
17 | 18 |
11 |
17 |
18 |
19 |
19 |
25 |
26 | `,
27 | changeDetection: ChangeDetectionStrategy.OnPush
28 | })
29 | export class AppNavigatorComponent implements OnInit {
30 | @Input() closed = false;
31 | @Input() searchType = PlayerSearch.CSearchTypes.VIDEO;
32 |
33 | public searchType$ = this.store.select(PlayerSearch.getSearchType);
34 | public routes = [
35 | { link: 'search', icon: 'music', label: 'Explore' }
36 | // { link: '/user', icon: 'heart', label: 'My Profile' }
37 | ];
38 |
39 | constructor(
40 | private store: Store17 | 23 | {{ player?.media?.snippet?.title }} 24 |
25 |
16 |
17 |
31 | `,
32 | changeDetection: ChangeDetectionStrategy.OnPush
33 | })
34 | export class PlaylistCoverComponent implements OnInit {
35 | @Input() playlist: GoogleApiYouTubePlaylistResource;
36 | @Output() play = new EventEmitter
18 | ![]()
19 |
20 |
21 |
25 |
29 |
30 | -
25 |
-
26 |
33 | 34 |
35 |
15 |
22 |
23 | `
24 | })
25 | export class PlayerControlsComponent {
26 | @Input() media: GoogleApiYouTubeVideoResource;
27 | @HostBinding('class.yt-repeat-on')
28 | @Input()
29 | isRepeat = false;
30 | @HostBinding('class.yt-playing')
31 | @Input()
32 | playing = false;
33 | @Output() play = new EventEmitter
21 |
32 |
31 |
38 |
39 |
40 |