feat: initial commit

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "printWidth": 80
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+    "peacock.color": "#557c9b",
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#7295b1",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#e8d6e0",
+        "activityBarBadge.foreground": "#15202b",
+        "titleBar.activeBackground": "#557c9b",
+        "titleBar.inactiveBackground": "#557c9b99",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveForeground": "#e7e7e799",
+        "statusBar.background": "#557c9b",
+        "statusBarItem.hoverBackground": "#7295b1",
+        "statusBar.foreground": "#e7e7e7"
+    }
+}

README.md

@@ -0,0 +1,27 @@
+# IptvPlayer
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.3.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular.json

@@ -0,0 +1,131 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "iptv-player": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/iptv-player",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "aot": false,
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets",
+                            "src/app/data",
+                            "src/manifest.webmanifest",
+                            "src/manifest.json",
+                            "src/background.js"
+                        ],
+                        "styles": ["src/styles.scss"],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb",
+                                    "maximumError": "10kb"
+                                }
+                            ],
+                            "serviceWorker": true,
+                            "ngswConfigPath": "ngsw-config.json"
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "iptv-player:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "iptv-player:build:production"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "iptv-player:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets",
+                            "src/manifest.webmanifest"
+                        ],
+                        "styles": ["src/styles.scss"],
+                        "scripts": []
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "tsconfig.app.json",
+                            "tsconfig.spec.json",
+                            "e2e/tsconfig.json"
+                        ],
+                        "exclude": ["**/node_modules/**"]
+                    }
+                },
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "iptv-player:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "iptv-player:serve:production"
+                        }
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "iptv-player"
+}

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

e2e/protractor.conf.js

@@ -0,0 +1,32 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

e2e/src/app.e2e-spec.ts

@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('iptv-player app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  }
+}

e2e/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/iptv-player'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

ngsw-config.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -0,0 +1,63 @@
+{
+    "name": "iptv-player",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "~8.2.4",
+        "@angular/cdk": "^8.2.1",
+        "@angular/common": "~8.2.4",
+        "@angular/compiler": "~8.2.4",
+        "@angular/core": "~8.2.4",
+        "@angular/flex-layout": "^8.0.0-beta.27",
+        "@angular/forms": "~8.2.4",
+        "@angular/material": "^8.2.1",
+        "@angular/platform-browser": "~8.2.4",
+        "@angular/platform-browser-dynamic": "~8.2.4",
+        "@angular/router": "~8.2.4",
+        "@angular/service-worker": "~8.2.4",
+        "@datorama/akita": "^4.10.7",
+        "hls.js": "^0.12.4",
+        "m3u8-file-parser": "^0.2.1",
+        "m3u8-parser": "^4.4.0",
+        "material-icons": "^0.3.1",
+        "ngx-uploader": "^7.1.0",
+        "rxjs": "~6.4.0",
+        "tslib": "^1.10.0",
+        "zone.js": "~0.9.1"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.803.3",
+        "@angular/cli": "~8.3.3",
+        "@angular/compiler-cli": "~8.2.4",
+        "@angular/language-service": "~8.2.4",
+        "@types/hls.js": "^0.12.5",
+        "@types/jasmine": "~3.3.8",
+        "@types/jasminewd2": "~2.0.3",
+        "@types/node": "~8.9.4",
+        "codelyzer": "^5.0.0",
+        "jasmine-core": "~3.4.0",
+        "jasmine-spec-reporter": "~4.2.1",
+        "karma": "~4.1.0",
+        "karma-chrome-launcher": "~2.2.0",
+        "karma-coverage-istanbul-reporter": "~2.0.1",
+        "karma-jasmine": "~2.0.1",
+        "karma-jasmine-html-reporter": "^1.4.0",
+        "protractor": "~5.4.0",
+        "ts-node": "~7.0.0",
+        "tslint": "~5.15.0",
+        "typescript": "~3.5.3"
+    },
+    "akitaCli": {
+        "customFolderName": "true",
+        "template": "angular",
+        "basePath": "./src/app/"
+    }
+}

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);

tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/test.ts",
+    "src/**/*.spec.ts"
+  ]
+}

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"],
+    "resolveJsonModule": true
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

tslint.json

@@ -0,0 +1,92 @@
+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "array-type": false,
+    "arrow-parens": false,
+    "deprecation": {
+      "severity": "warning"
+    },
+    "component-class-suffix": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "interface-name": false,
+    "max-classes-per-file": false,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-consecutive-blank-lines": false,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-empty": false,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-use-before-declare": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
+    ],
+    "object-literal-sort-keys": false,
+    "ordered-imports": false,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "trailing-comma": false,
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true
+  },
+  "rulesDirectory": [
+    "codelyzer"
+  ]
+}