From 18298fdae0f94033d5cadb56721fd9b339640579 Mon Sep 17 00:00:00 2001 From: eric-kingu Date: Fri, 27 Oct 2023 19:45:47 -0300 Subject: [PATCH 1/9] Cria pagina para assistir conteudo ao vivo Co-authored-by: DaviMarinho --- src/app/app-routing.module.ts | 2 ++ src/app/app.module.ts | 2 ++ .../stream-view/stream-view.component.css | 0 .../stream-view/stream-view.component.html | 4 ++++ .../stream-view/stream-view.component.spec.ts | 23 +++++++++++++++++++ .../stream-view/stream-view.component.ts | 10 ++++++++ 6 files changed, 41 insertions(+) create mode 100644 src/app/pages/stream-view/stream-view.component.css create mode 100644 src/app/pages/stream-view/stream-view.component.html create mode 100644 src/app/pages/stream-view/stream-view.component.spec.ts create mode 100644 src/app/pages/stream-view/stream-view.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 31eca30f..8479d1e7 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -5,6 +5,7 @@ import { LoginComponent } from './pages/login/login.component'; import { RegisterComponent } from './pages/register/register.component'; import { LoginSocialComponent } from './pages/login-social/login-social.component'; import { VideoComponent } from './pages/video/video.component'; +import { StreamViewComponent } from './pages/stream-view/stream-view.component'; import { VideoViewerComponent } from './pages/video-viewer/video-viewer.component'; import { ActiveAccountComponent } from './pages/active-account/active-account.component'; import { ProfileComponent } from './pages/profile/profile.component'; @@ -17,6 +18,7 @@ const routes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, { path: 'loginsocial', component: LoginSocialComponent }, + { path: 'stream', component: StreamViewComponent }, { path: 'videos', component: VideoComponent }, { path: 'video/:idVideo', component: VideoViewerComponent }, { path: 'activeAccount', component: ActiveAccountComponent }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3d7a5c4e..f08da85e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,7 @@ import { CheckCodeRestPasswordComponent } from './pages/check-code-rest-password import { AuthGuard } from './services/auth.guard'; import { AuthService } from './services/auth.service'; import { EditUserComponent } from './pages/edit-user/edit-user.component'; +import { StreamViewComponent } from './pages/stream-view/stream-view.component'; @NgModule({ declarations: [ @@ -40,6 +41,7 @@ import { EditUserComponent } from './pages/edit-user/edit-user.component'; ResetPasswordComponent, CheckCodeRestPasswordComponent, EditUserComponent, + StreamViewComponent, ], imports: [ BrowserModule, diff --git a/src/app/pages/stream-view/stream-view.component.css b/src/app/pages/stream-view/stream-view.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/stream-view/stream-view.component.html b/src/app/pages/stream-view/stream-view.component.html new file mode 100644 index 00000000..17d7a97e --- /dev/null +++ b/src/app/pages/stream-view/stream-view.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/pages/stream-view/stream-view.component.spec.ts b/src/app/pages/stream-view/stream-view.component.spec.ts new file mode 100644 index 00000000..f5147163 --- /dev/null +++ b/src/app/pages/stream-view/stream-view.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StreamViewComponent } from './stream-view.component'; + +describe('StreamViewComponent', () => { + let component: StreamViewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ StreamViewComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(StreamViewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/stream-view/stream-view.component.ts b/src/app/pages/stream-view/stream-view.component.ts new file mode 100644 index 00000000..9305bb44 --- /dev/null +++ b/src/app/pages/stream-view/stream-view.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-stream-view', + templateUrl: './stream-view.component.html', + styleUrls: ['./stream-view.component.css'] +}) +export class StreamViewComponent { + liveStreamURL: string = "https://cdn.eduplay.rnp.br/route/CFwapWeR7WSI/index.m3u8?s=aHR0cHM6Ly9tZWRpYS5lZHVwbGF5.LnJucC5ici9tZWRpYS9DRndhcFdlUjdXU0kvaW5kZXgubTN1OD94PTEmbT01UUNXazRITHo3aDNlWUlGdlNKTlRn&x=1&p=0&m=8EQ5xOzxul_mqRVecMP-xw"; +} From 40f8301680cb37cf76636a9664b8ed13a84691d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Victor?= Date: Sat, 18 Nov 2023 19:01:54 -0300 Subject: [PATCH 2/9] Adiciona packge para exibir stream de video --- package-lock.json | 6 ++++ package.json | 1 + .../stream-view/stream-view.component.html | 5 +-- .../stream-view/stream-view.component.ts | 31 +++++++++++++++++-- src/index.html | 23 +++++++------- 5 files changed, 49 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index e5894f48..257ecd2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@angular/platform-browser-dynamic": "^15.2.0", "@angular/router": "^15.2.0", "angular-oauth2-oidc": "^15.0.1", + "hls.js": "^1.4.12", "jwt-decode": "^3.1.2", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", @@ -7389,6 +7390,11 @@ "integrity": "sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==", "dev": true }, + "node_modules/hls.js": { + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.4.12.tgz", + "integrity": "sha512-1RBpx2VihibzE3WE9kGoVCtrhhDWTzydzElk/kyRbEOLnb1WIE+3ZabM/L8BqKFTCL3pUy4QzhXgD1Q6Igr1JA==" + }, "node_modules/hosted-git-info": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz", diff --git a/package.json b/package.json index 6db2f4d3..98177ace 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@angular/platform-browser-dynamic": "^15.2.0", "@angular/router": "^15.2.0", "angular-oauth2-oidc": "^15.0.1", + "hls.js": "^1.4.12", "jwt-decode": "^3.1.2", "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", diff --git a/src/app/pages/stream-view/stream-view.component.html b/src/app/pages/stream-view/stream-view.component.html index 17d7a97e..036eb831 100644 --- a/src/app/pages/stream-view/stream-view.component.html +++ b/src/app/pages/stream-view/stream-view.component.html @@ -1,4 +1 @@ - + diff --git a/src/app/pages/stream-view/stream-view.component.ts b/src/app/pages/stream-view/stream-view.component.ts index 9305bb44..3f6538db 100644 --- a/src/app/pages/stream-view/stream-view.component.ts +++ b/src/app/pages/stream-view/stream-view.component.ts @@ -1,10 +1,37 @@ -import { Component } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; + +declare var Hls: any; @Component({ selector: 'app-stream-view', templateUrl: './stream-view.component.html', styleUrls: ['./stream-view.component.css'] }) -export class StreamViewComponent { +export class StreamViewComponent implements OnInit { + @ViewChild('video', { static: true }) videoplayer!: ElementRef; liveStreamURL: string = "https://cdn.eduplay.rnp.br/route/CFwapWeR7WSI/index.m3u8?s=aHR0cHM6Ly9tZWRpYS5lZHVwbGF5.LnJucC5ici9tZWRpYS9DRndhcFdlUjdXU0kvaW5kZXgubTN1OD94PTEmbT01UUNXazRITHo3aDNlWUlGdlNKTlRn&x=1&p=0&m=8EQ5xOzxul_mqRVecMP-xw"; + + constructor() { } + + ngOnInit(): void { + this.setupVideoPlayer(); + } + + setupVideoPlayer(): void { + const video = this.videoplayer.nativeElement; + const hls = new Hls(); + if (Hls.isSupported()) { + hls.loadSource(this.liveStreamURL); + hls.attachMedia(video); + hls.on(Hls.Events.MANIFEST_PARSED, function () { + video.play(); + }); + } else if (video.canPlayType('application/vnd.apple.mpegurl')) { + video.src = this.liveStreamURL; + video.addEventListener("canplay", function () { + video.play(); + }); + } + } + } diff --git a/src/index.html b/src/index.html index 29761c0e..0aa4b9f1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,14 @@ - + - - - UnBTVFrontend - - - - - - - + + + UnBTVFrontend + + + + + + + + From 126d6c1481c638eec9a4dbee5a7e36fdf52f1720 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Victor?= Date: Sat, 18 Nov 2023 19:54:31 -0300 Subject: [PATCH 3/9] Adiciona stream da Tv Ao vivo --- .../stream-view/stream-view.component.html | 14 +++++++- .../stream-view/stream-view.component.ts | 32 ++----------------- 2 files changed, 15 insertions(+), 31 deletions(-) diff --git a/src/app/pages/stream-view/stream-view.component.html b/src/app/pages/stream-view/stream-view.component.html index 036eb831..a74626ca 100644 --- a/src/app/pages/stream-view/stream-view.component.html +++ b/src/app/pages/stream-view/stream-view.component.html @@ -1 +1,13 @@ - +
+
+ +
+
diff --git a/src/app/pages/stream-view/stream-view.component.ts b/src/app/pages/stream-view/stream-view.component.ts index 3f6538db..99ca20ad 100644 --- a/src/app/pages/stream-view/stream-view.component.ts +++ b/src/app/pages/stream-view/stream-view.component.ts @@ -1,37 +1,9 @@ -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; - -declare var Hls: any; +import { Component } from '@angular/core'; @Component({ selector: 'app-stream-view', templateUrl: './stream-view.component.html', styleUrls: ['./stream-view.component.css'] }) -export class StreamViewComponent implements OnInit { - @ViewChild('video', { static: true }) videoplayer!: ElementRef; - liveStreamURL: string = "https://cdn.eduplay.rnp.br/route/CFwapWeR7WSI/index.m3u8?s=aHR0cHM6Ly9tZWRpYS5lZHVwbGF5.LnJucC5ici9tZWRpYS9DRndhcFdlUjdXU0kvaW5kZXgubTN1OD94PTEmbT01UUNXazRITHo3aDNlWUlGdlNKTlRn&x=1&p=0&m=8EQ5xOzxul_mqRVecMP-xw"; - - constructor() { } - - ngOnInit(): void { - this.setupVideoPlayer(); - } - - setupVideoPlayer(): void { - const video = this.videoplayer.nativeElement; - const hls = new Hls(); - if (Hls.isSupported()) { - hls.loadSource(this.liveStreamURL); - hls.attachMedia(video); - hls.on(Hls.Events.MANIFEST_PARSED, function () { - video.play(); - }); - } else if (video.canPlayType('application/vnd.apple.mpegurl')) { - video.src = this.liveStreamURL; - video.addEventListener("canplay", function () { - video.play(); - }); - } - } - +export class StreamViewComponent { } From 6a46ba0fe01c5660b47ec5ad1fc3e8d64f7c4dd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Victor?= Date: Sun, 19 Nov 2023 11:11:23 -0300 Subject: [PATCH 4/9] Remove tag script sem uso --- src/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.html b/src/index.html index 0aa4b9f1..a7f71a73 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,6 @@ UnBTVFrontend - From cc77af0659553318b467a584e9faa534b65a3a08 Mon Sep 17 00:00:00 2001 From: Marcos Castilhos <221008300@aluno.unb.br> Date: Sun, 19 Nov 2023 17:38:38 -0300 Subject: [PATCH 5/9] adiciona css no player de stream --- src/app/pages/stream-view/stream-view.component.css | 5 +++++ src/app/pages/stream-view/stream-view.component.html | 8 +++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/app/pages/stream-view/stream-view.component.css b/src/app/pages/stream-view/stream-view.component.css index e69de29b..2ea310c5 100644 --- a/src/app/pages/stream-view/stream-view.component.css +++ b/src/app/pages/stream-view/stream-view.component.css @@ -0,0 +1,5 @@ +html, body, .max-w-full, .max-h-full, #streamIframe { + width: 67.55%; + height: 100%; + margin: auto; + } \ No newline at end of file diff --git a/src/app/pages/stream-view/stream-view.component.html b/src/app/pages/stream-view/stream-view.component.html index a74626ca..2bf67136 100644 --- a/src/app/pages/stream-view/stream-view.component.html +++ b/src/app/pages/stream-view/stream-view.component.html @@ -1,13 +1,11 @@
-
+
-
+
\ No newline at end of file From 978e3cdd54acf344f3cc90fea8426244e43abaa0 Mon Sep 17 00:00:00 2001 From: Marcos Castilhos <221008300@aluno.unb.br> Date: Sun, 19 Nov 2023 18:17:42 -0300 Subject: [PATCH 6/9] ajusta responsividade stream Co-authored-by: Diego-Carlito --- .../pages/stream-view/stream-view.component.css | 16 +++++++++++++--- .../pages/stream-view/stream-view.component.html | 4 ++-- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/app/pages/stream-view/stream-view.component.css b/src/app/pages/stream-view/stream-view.component.css index 2ea310c5..7c755d0e 100644 --- a/src/app/pages/stream-view/stream-view.component.css +++ b/src/app/pages/stream-view/stream-view.component.css @@ -1,5 +1,15 @@ -html, body, .max-w-full, .max-h-full, #streamIframe { - width: 67.55%; +.stream-iframe { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; height: 100%; - margin: auto; + } + + .stream-iframe-container { + position: relative; + width: 100%; + padding-top: 56.25%; } \ No newline at end of file diff --git a/src/app/pages/stream-view/stream-view.component.html b/src/app/pages/stream-view/stream-view.component.html index 2bf67136..4cf9c520 100644 --- a/src/app/pages/stream-view/stream-view.component.html +++ b/src/app/pages/stream-view/stream-view.component.html @@ -1,7 +1,7 @@
-
+
From e88474d0e1bd0a3eef5f09021bbd77501a0cd388 Mon Sep 17 00:00:00 2001 From: Marcos Castilhos <221008300@aluno.unb.br> Date: Tue, 21 Nov 2023 21:27:50 -0300 Subject: [PATCH 8/9] ajusta html video stream --- src/app/pages/stream-view/stream-view.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/stream-view/stream-view.component.html b/src/app/pages/stream-view/stream-view.component.html index 25e9454a..aaf03126 100644 --- a/src/app/pages/stream-view/stream-view.component.html +++ b/src/app/pages/stream-view/stream-view.component.html @@ -1,5 +1,5 @@
-
+