diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6b8bed5fb..aa36e46ca 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -13,13 +13,15 @@ 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';
+import { RecentPlaylistsComponent } from './components/recent-playlists/recent-playlists.component';
@NgModule({
declarations: [
AppComponent,
ChannelListContainerComponent,
PlaylistUploaderComponent,
- VideoPlayerComponent
+ VideoPlayerComponent,
+ RecentPlaylistsComponent,
],
imports: [
AppRoutingModule,
@@ -30,10 +32,10 @@ import { MaterialModule } from './material.module';
MaterialModule,
NgxUploaderModule,
ServiceWorkerModule.register('ngsw-worker.js', {
- enabled: environment.production
- })
+ enabled: environment.production,
+ }),
],
providers: [],
- bootstrap: [AppComponent]
+ bootstrap: [AppComponent],
})
export class AppModule {}
diff --git a/src/app/components/playlist-uploader/playlist-uploader.component.css b/src/app/components/playlist-uploader/playlist-uploader.component.css
index e69de29bb..16211734f 100644
--- a/src/app/components/playlist-uploader/playlist-uploader.component.css
+++ b/src/app/components/playlist-uploader/playlist-uploader.component.css
@@ -0,0 +1,16 @@
+.drop-container {
+ /*width: 400px;*/
+ height: 100px;
+ border: 1px dashed #ccc;
+ border-radius: 10px;
+ margin: 0 auto;
+ padding: 10px;
+ text-align: center;
+ color: #666;
+}
+
+input {
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ padding: 5px;
+}
diff --git a/src/app/components/playlist-uploader/playlist-uploader.component.html b/src/app/components/playlist-uploader/playlist-uploader.component.html
index 123128e24..3bc83126b 100644
--- a/src/app/components/playlist-uploader/playlist-uploader.component.html
+++ b/src/app/components/playlist-uploader/playlist-uploader.component.html
@@ -1,26 +1,25 @@
-
-
- Drag files here or
-
- to upload.
-
-
-
-
+
+ Add playlist
+
+
+ Drag files here or
+
+ to upload.
+
+
+
+
+ 0">
+
+ Recent playlists
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/playlist-uploader/playlist-uploader.component.ts b/src/app/components/playlist-uploader/playlist-uploader.component.ts
index 6ad432a10..a51a77e8d 100644
--- a/src/app/components/playlist-uploader/playlist-uploader.component.ts
+++ b/src/app/components/playlist-uploader/playlist-uploader.component.ts
@@ -22,6 +22,7 @@ export class PlaylistUploaderComponent {
humanizeBytes: Function;
dragOver: boolean;
options: UploaderOptions;
+ playlists: any;
/**
* Creates an instanceof PlaylistUploaderComponent
@@ -34,6 +35,8 @@ export class PlaylistUploaderComponent {
private m3uService: M3uService,
private router: Router
) {
+ this.getPlaylists();
+
this.options = {
concurrency: 1,
maxUploads: 1,
@@ -59,11 +62,12 @@ export class PlaylistUploaderComponent {
const playlist = this.m3uService.convertArrayToPlaylist(
array
);
+ this.savePlaylist(
+ this.files[0].name,
+ JSON.stringify(playlist)
+ );
- playlist.segments.forEach(element => {
- this.channelStore.add(createChannel(element));
- this.navigateToPlayer();
- });
+ this.setPlaylist(playlist);
};
fileReader.readAsText(this.files[0].nativeFile);
}
@@ -106,4 +110,38 @@ export class PlaylistUploaderComponent {
navigateToPlayer(): void {
this.router.navigateByUrl('/iptv', { skipLocationChange: true });
}
+
+ /**
+ * Saves playlist to the localStorage
+ * @param name name of the playlist
+ * @param playlist playlist to save
+ */
+ savePlaylist(name: string, playlist: any): void {
+ localStorage.setItem(name, playlist);
+ }
+
+ /**
+ * Reads all saved playlists from the localStorage
+ */
+ getPlaylists(): void {
+ this.playlists = { ...localStorage };
+
+ this.playlists = Object.keys(this.playlists)
+ .filter(key => key.includes('.m3u'))
+ .reduce((obj, key) => {
+ obj[key] = JSON.parse(this.playlists[key]);
+ return obj;
+ }, {});
+ }
+
+ /**
+ * Sets the given playlist as active for the current session
+ * @param playlist m3u playlist
+ */
+ setPlaylist(playlist: any): void {
+ playlist.segments.forEach(element => {
+ this.channelStore.add(createChannel(element));
+ this.navigateToPlayer();
+ });
+ }
}
diff --git a/src/app/components/recent-playlists/recent-playlists.component.html b/src/app/components/recent-playlists/recent-playlists.component.html
new file mode 100644
index 000000000..396a34e29
--- /dev/null
+++ b/src/app/components/recent-playlists/recent-playlists.component.html
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/src/app/components/recent-playlists/recent-playlists.component.scss b/src/app/components/recent-playlists/recent-playlists.component.scss
new file mode 100644
index 000000000..88254dbbc
--- /dev/null
+++ b/src/app/components/recent-playlists/recent-playlists.component.scss
@@ -0,0 +1,3 @@
+button {
+ margin: 5px;
+}
diff --git a/src/app/components/recent-playlists/recent-playlists.component.ts b/src/app/components/recent-playlists/recent-playlists.component.ts
new file mode 100644
index 000000000..fdee9f98a
--- /dev/null
+++ b/src/app/components/recent-playlists/recent-playlists.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+ selector: 'app-recent-playlists',
+ templateUrl: './recent-playlists.component.html',
+ styleUrls: ['./recent-playlists.component.scss'],
+})
+export class RecentPlaylistsComponent {
+ /**
+ * Playlist object
+ */
+ @Input() playlists: any;
+
+ /**
+ * Emits on playlist click
+ */
+ @Output() playlistClicked: EventEmitter = new EventEmitter();
+}
diff --git a/src/app/services/m3u-service.service.ts b/src/app/services/m3u-service.service.ts
index 6b03d7928..59f3a4537 100644
--- a/src/app/services/m3u-service.service.ts
+++ b/src/app/services/m3u-service.service.ts
@@ -18,4 +18,13 @@ export class M3uService {
this.m3u8FileParser.read(m3uArray.join('\n'));
return this.m3u8FileParser.getResult();
}
+
+ /**
+ * Converts string to playlist structure
+ * @param m3uString playlist as string
+ */
+ convertStringToPlaylist(m3uString: string): any {
+ this.m3u8FileParser.read(m3uString);
+ return this.m3u8FileParser.getResult();
+ }
}