feat: initial commit

src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { PlaylistUploaderComponent } from './components/playlist-uploader/playlist-uploader.component';
+import { VideoPlayerComponent } from './components/video-player/video-player.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: PlaylistUploaderComponent
+    },
+    {
+        path: 'iptv',
+        component: VideoPlayerComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/app.component.html

@@ -0,0 +1,13 @@
+<!-- <button
+    mat-raised-button
+    routerLink="/">
+    Player
+</button>
+&nbsp;
+<button
+    mat-raised-button
+    routerLink="/upload">
+    Upload playlist
+</button> -->
+
+<router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+#video {
+  width: 100%;
+}

src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'iptv-player'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('iptv-player');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('iptv-player app is running!');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,16 @@
+import { Component, NgZone } from '@angular/core';
+import { akitaDevtools } from '@datorama/akita';
+import { environment } from 'src/environments/environment';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+    constructor(private ngZone: NgZone) {
+        if (!environment.production) {
+            akitaDevtools(ngZone);
+        }
+    }
+}

src/app/app.module.ts

@@ -0,0 +1,39 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { HttpClientModule } from '@angular/common/http';
+import { ChannelListContainerComponent } from './components/channel-list-container/channel-list-container.component';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { NgxUploaderModule } from 'ngx-uploader';
+import { PlaylistUploaderComponent } from './components/playlist-uploader/playlist-uploader.component';
+import { VideoPlayerComponent } from './components/video-player/video-player.component';
+import { MaterialModule } from './material.module';
+
+@NgModule({
+    declarations: [
+        AppComponent,
+        ChannelListContainerComponent,
+        PlaylistUploaderComponent,
+        VideoPlayerComponent
+    ],
+    imports: [
+        AppRoutingModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        FlexLayoutModule,
+        HttpClientModule,
+        MaterialModule,
+        NgxUploaderModule,
+        ServiceWorkerModule.register('ngsw-worker.js', {
+            enabled: environment.production
+        })
+    ],
+    providers: [],
+    bootstrap: [AppComponent]
+})
+export class AppModule {}

src/app/components/channel-list-container/channel-list-container.component.html

@@ -0,0 +1,10 @@
+<mat-list>
+    <mat-list-item *ngFor="let channel of channelList">
+        <button
+            mat-button
+            (click)="changeChannel.emit({ url: channel.url, title: channel.inf.title})">
+            {{channel?.inf?.title || 'Unnamed Channel'}}
+        </button>
+        <mat-divider></mat-divider>
+    </mat-list-item>
+</mat-list>

src/app/components/channel-list-container/channel-list-container.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ChannelListContainerComponent } from './channel-list-container.component';
+
+describe('ChannelListContainerComponent', () => {
+  let component: ChannelListContainerComponent;
+  let fixture: ComponentFixture<ChannelListContainerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChannelListContainerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChannelListContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/channel-list-container/channel-list-container.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-channel-list-container',
+    templateUrl: './channel-list-container.component.html',
+    styleUrls: ['./channel-list-container.component.css'],
+})
+export class ChannelListContainerComponent {
+    /**
+     * Channels array
+     */
+    @Input() channelList;
+
+    /**
+     * Emits on channel change
+     */
+    @Output() changeChannel: EventEmitter<{
+        url: string;
+        title: string;
+    }> = new EventEmitter();
+}

src/app/components/playlist-uploader/playlist-uploader.component.html

@@ -0,0 +1,26 @@
+<div
+    class="drop-container"
+    ngFileDrop
+    [options]="options"
+    (uploadOutput)="onUploadOutput($event)"
+    [uploadInput]="uploadInput">
+    <p>
+        Drag files here or
+        <label class="upload-button">
+            <input
+                type="file"
+                ngFileSelect
+                [options]="options"
+                (uploadOutput)="onUploadOutput($event)"
+                [uploadInput]="uploadInput"
+                multiple>
+            browse
+        </label>
+        to upload.
+    </p>
+
+    <!-- <h3>Recent playlists:</h3>
+    TODO
+    <h3>Insert playlist by URL:</h3>
+    TODO -->
+</div>

src/app/components/playlist-uploader/playlist-uploader.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PlaylistUploaderComponent } from './playlist-uploader.component';
+
+describe('PlaylistUploaderComponent', () => {
+  let component: PlaylistUploaderComponent;
+  let fixture: ComponentFixture<PlaylistUploaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlaylistUploaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlaylistUploaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/playlist-uploader/playlist-uploader.component.ts

@@ -0,0 +1,97 @@
+import { Component, EventEmitter } from '@angular/core';
+import {
+    UploadOutput,
+    UploadInput,
+    UploadFile,
+    humanizeBytes,
+    UploaderOptions
+} from 'ngx-uploader';
+import { ChannelStore, createChannel } from 'src/app/state';
+import { M3uService } from 'src/app/services/m3u-service.service';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-playlist-uploader',
+    templateUrl: './playlist-uploader.component.html',
+    styleUrls: ['./playlist-uploader.component.css']
+})
+export class PlaylistUploaderComponent {
+    url = 'http://localhost:4900/upload';
+    formData: FormData;
+    files: UploadFile[];
+    uploadInput: EventEmitter<UploadInput>;
+    humanizeBytes: Function;
+    dragOver: boolean;
+    options: UploaderOptions;
+
+    constructor(
+        private channelStore: ChannelStore,
+        private m3uService: M3uService,
+        private router: Router
+    ) {
+        this.options = {
+            concurrency: 1,
+            maxUploads: 1
+        };
+        this.files = [];
+        this.uploadInput = new EventEmitter<UploadInput>();
+        this.humanizeBytes = humanizeBytes;
+    }
+
+    onUploadOutput(output: UploadOutput): void {
+        if (output.type === 'allAddedToQueue') {
+            if (this.files.length > 0) {
+                const fileReader = new FileReader();
+                fileReader.onload = fileLoadedEvent => {
+                    const result = (fileLoadedEvent.target as FileReader)
+                        .result;
+                    // console.log(result);
+                    const array = (result as string).split('\n');
+                    // console.log(array);
+                    const playlist = this.m3uService.convertArrayToPlaylist(
+                        array
+                    );
+                    playlist.segments.forEach(element => {
+                        this.channelStore.add(createChannel(element));
+                        this.navigateToPlayer();
+                    });
+                };
+                fileReader.readAsText(this.files[0].nativeFile);
+            }
+        } else if (
+            output.type === 'addedToQueue' &&
+            typeof output.file !== 'undefined'
+        ) {
+            this.files.push(output.file);
+        } else if (
+            output.type === 'uploading' &&
+            typeof output.file !== 'undefined'
+        ) {
+            const index = this.files.findIndex(
+                file =>
+                    typeof output.file !== 'undefined' &&
+                    file.id === output.file.id
+            );
+            this.files[index] = output.file;
+        } else if (output.type === 'cancelled' || output.type === 'removed') {
+            this.files = this.files.filter(
+                (file: UploadFile) => file !== output.file
+            );
+        } else if (output.type === 'dragOver') {
+            this.dragOver = true;
+        } else if (output.type === 'dragOut') {
+            this.dragOver = false;
+        } else if (output.type === 'drop') {
+            this.dragOver = false;
+        } else if (
+            output.type === 'rejected' &&
+            typeof output.file !== 'undefined'
+        ) {
+            console.log(output.file.name + ' rejected');
+        }
+    }
+
+    navigateToPlayer(): void {
+        this.router.navigateByUrl('/iptv', { skipLocationChange: true });
+    }
+}

src/app/components/video-player/video-player.component.css

@@ -0,0 +1,20 @@
+#video-player {
+  width: 100%;
+  height: calc(100vh - 70px);
+}
+
+.main-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.mat-sidenav-content {
+  background: #000;
+}
+
+.mat-sidenav {
+  width: 400px;
+}

src/app/components/video-player/video-player.component.html

@@ -0,0 +1,36 @@
+<mat-sidenav-container
+    class="main-container"
+    (backdropClick)="close()">
+
+    <!-- sidebar content -->
+    <mat-sidenav
+        #sidenav
+        (keydown.escape)="close()"
+        disableClose>
+        <ng-container *ngIf="channels$ | async as channels">
+            <app-channel-list-container
+                [channelList]="channels"
+                (changeChannel)="playChannel($event)"></app-channel-list-container>
+        </ng-container>
+    </mat-sidenav>
+
+    <mat-sidenav-content>
+        <!-- toolbar with drawer icon -->
+        <mat-toolbar color="primary">
+            <button
+                mat-icon-button
+                (click)="sidenav.toggle()">
+                <mat-icon>menu</mat-icon>
+            </button>
+            myIPTV
+        </mat-toolbar>
+
+        <!-- player component -->
+        <video
+            id="video-player"
+            autoplay="true"
+            controls="true"
+            muted="muted"></video>
+
+    </mat-sidenav-content>
+</mat-sidenav-container>

src/app/components/video-player/video-player.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { VideoPlayerComponent } from './video-player.component';
+
+describe('VideoPlayerComponent', () => {
+  let component: VideoPlayerComponent;
+  let fixture: ComponentFixture<VideoPlayerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoPlayerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VideoPlayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/video-player/video-player.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import * as Hls from 'hls.js';
+import { ChannelQuery, Channel } from 'src/app/state';
+import { Observable } from 'rxjs';
+import { MatSidenav } from '@angular/material/sidenav';
+
+@Component({
+    selector: 'app-video-player',
+    templateUrl: './video-player.component.html',
+    styleUrls: ['./video-player.component.css'],
+})
+export class VideoPlayerComponent implements OnInit {
+    /**
+     * Channels list
+     */
+    channels$: Observable<Channel[]>;
+
+    /**
+     * Video player DOM element
+     */
+    videoPlayer: HTMLVideoElement;
+
+    /**
+     * HLS object
+     */
+    hls = new Hls();
+
+    /**
+     * Name of the selected channel
+     */
+    channelTitle: string;
+
+    /**
+     * Sidebar object
+     */
+    @ViewChild('sidenav', { static: false }) sideNav: MatSidenav;
+
+    constructor(private channelQuery: ChannelQuery) {}
+
+    /**
+     * Sets video player and subscribes to channel list from the store
+     */
+    ngOnInit(): void {
+        this.channels$ = this.channelQuery.selectAll();
+        this.videoPlayer = document.getElementById(
+            'video-player'
+        ) as HTMLVideoElement;
+    }
+
+    /* playVideo(playlist: any): void {
+        if (Hls.isSupported()) {
+            this.hls.loadSource(channelUrl);
+            this.hls.attachMedia(this.videoPlayer);
+
+            this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                this.videoPlayer.play();
+            });
+        } else if (
+            this.videoPlayer.canPlayType('application/vnd.apple.mpegurl')
+        ) {
+            this.videoPlayer.src = channelUrl;
+            this.videoPlayer.addEventListener('loadedmetadata', () => {
+                this.videoPlayer.play();
+            });
+        }
+    } */
+
+    /**
+     * Closes sidebar
+     */
+    close() {
+        this.sideNav.close();
+    }
+
+    /**
+     * Starts to play the given channel
+     * @param channel given channel object
+     */
+    playChannel(channel: { url: string; title: string }): void {
+        if (Hls.isSupported()) {
+            console.log(
+                '... switching channel to ',
+                channel.title,
+                channel.url
+            );
+            this.hls.loadSource(channel.url);
+            this.hls.attachMedia(this.videoPlayer);
+            this.channelTitle = channel.title;
+        }
+    }
+}

src/app/material.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import {
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    MatListModule,
+    MatSidenavModule,
+    MatToolbarModule
+} from '@angular/material';
+
+@NgModule({
+    exports: [
+        MatButtonModule,
+        MatCardModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule
+    ]
+})
+export class MaterialModule {}

src/app/services/m3u-service.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { M3uServiceService } from './m3u-service.service';
+
+describe('Service: M3uService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [M3uServiceService]
+    });
+  });
+
+  it('should ...', inject([M3uServiceService], (service: M3uServiceService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/m3u-service.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import * as M3U8FileParser from 'm3u8-file-parser';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class M3uService {
+    m3u8FileParser = new M3U8FileParser();
+
+    constructor(private http: HttpClient) {}
+
+    /**
+     * Returns playlist object
+     */
+    /* getPlaylist(): Observable<any> {
+        return this.http.get('../your.json');
+    } */
+
+    convertArrayToPlaylist(m3uArray: any[]): any {
+        this.m3u8FileParser.read(m3uArray.join('\n'));
+        return this.m3u8FileParser.getResult();
+    }
+}

src/app/state/channel.model.ts

@@ -0,0 +1,15 @@
+import { ID, guid } from '@datorama/akita';
+
+export interface Channel {
+    id: ID;
+    inf: any;
+    url: string;
+}
+
+export function createChannel(params: Partial<Channel>) {
+    return {
+        id: guid(),
+        inf: params.inf,
+        url: params.url
+    } as Channel;
+}

src/app/state/channel.query.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { QueryEntity } from '@datorama/akita';
+import { ChannelStore, ChannelState } from './channel.store';
+
+@Injectable({ providedIn: 'root' })
+export class ChannelQuery extends QueryEntity<ChannelState> {
+
+  constructor(protected store: ChannelStore) {
+    super(store);
+  }
+
+}

src/app/state/channel.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { ChannelStore } from './channel.store';
+import { HttpClient } from '@angular/common/http';
+import { tap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class ChannelService {
+    constructor(private channelStore: ChannelStore, private http: HttpClient) {}
+
+    /* get() {
+        return this.http
+            .get('')
+            .pipe(tap(entities => this.channelStore.set(entities)));
+    } */
+}

src/app/state/channel.store.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';
+import { Channel } from './channel.model';
+
+export interface ChannelState extends EntityState<Channel> {}
+
+@Injectable({ providedIn: 'root' })
+@StoreConfig({ name: 'channel' })
+export class ChannelStore extends EntityStore<ChannelState> {
+
+  constructor() {
+    super();
+  }
+
+}
+

src/app/state/index.ts

@@ -0,0 +1,4 @@
+export * from './channel.query';
+export * from './channel.store';
+export * from './channel.service';
+export * from './channel.model';

src/background.js

@@ -0,0 +1,14 @@
+chrome.app.runtime.onLaunched.addListener(function() {
+    chrome.app.window.create('index.html', {
+        id: 'appWindow',
+        frame: {
+            color: '#11575c'
+        },
+        innerBounds: {
+            width: 960,
+            height: 540,
+            minWidth: 340,
+            minHeight: 540
+        }
+    });
+});

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>IptvPlayer</title>
+        <base href="/">
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+        <link rel="manifest" href="manifest.webmanifest">
+        <meta
+            name="theme-color"
+            content="#1976d2">
+    </head>
+    <body class="mat-typography">
+        <app-root></app-root>
+        <noscript>
+            Please enable JavaScript to continue using this application.
+        </noscript>
+    </body>
+</html>

src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/manifest.json

@@ -0,0 +1,24 @@
+{
+    "manifest_version": 2,
+    "name": "myIPTV",
+    "short_name": "myiptv",
+    "description": "IPTV Player for Chrome",
+    "version": "0.0.1",
+    "version_name": "0.0.1",
+    "icons": {
+        "144": "assets/icons/icon-144x144.png"
+    },
+    "app": {
+        "background": {
+            "scripts": ["background.js"]
+        }
+    },
+    "permissions": [
+        "storage",
+        "system.cpu",
+        "system.display",
+        "system.memory",
+        "system.network",
+        "system.storage"
+    ]
+}

src/manifest.webmanifest

@@ -0,0 +1,51 @@
+{
+  "name": "iptv-player",
+  "short_name": "iptv-player",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

src/polyfills.ts

@@ -0,0 +1,63 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

src/service-worker.js

@@ -0,0 +1,43 @@
+/*
+ * @license
+ * Your First PWA Codelab (https://g.co/codelabs/pwa)
+ * Copyright 2019 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+'use strict';
+
+// CODELAB: Update cache names any time any of the cached files change.
+const CACHE_NAME = 'static-cache-v1';
+
+// CODELAB: Add list of files to cache here.
+const FILES_TO_CACHE = [];
+
+self.addEventListener('install', evt => {
+    console.log('[ServiceWorker] Install');
+    // CODELAB: Precache static resources here.
+
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', evt => {
+    console.log('[ServiceWorker] Activate');
+    // CODELAB: Remove previous cached data from disk.
+
+    self.clients.claim();
+});
+
+self.addEventListener('fetch', evt => {
+    console.log('[ServiceWorker] Fetch', evt.request.url);
+    // CODELAB: Add fetch event handler here.
+});

src/styles.scss

@@ -0,0 +1,10 @@
+/* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
+$material-icons-font-path: '~material-icons/iconfont/';
+
+@import '~material-icons/iconfont/material-icons.scss';
+
+body,html {
+  background: #eee;
+}

src/test.ts

@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);