Merge branch 'develop' of github.com:fga-eps-mds/2023.2-UnB-TV-Fronte…

…nd into deploy-pwa

.gitignore

@@ -45,3 +45,6 @@ Thumbs.db
 /src/app/environment
 /src/app/secret
 /src/app/app.constant.ts
+certificate.cnf
+localhost.crt
+localhost.key

README.md

@@ -1,17 +1,37 @@
-# UnBTVFrontend
+# UnB-TV Frontend
 
-![Alt text](public/Simbolo_UnBTV.svg)
+<div align="center">
+<img src="./docs/assets/unb-removebg-preview.png" alt="logo UNBTV"> </div>
 
 ## Sobre
 
-Este repositório contém o frontend da aplicação UnBTV, um projeto que visa a criação de uma plataforma de streaming para a UnBTV.
+O projeto visa o desenvolvimento de uma aplicação Web e Mobile para a UnB-TV, com o objetivo de centralizar e disponibilizar de forma unificada todo o conteúdo oferecido pela UnB-TV, incluindo vídeos e transmissões ao vivo, sendo desenvolvida no segundo semestre de 2023 pelas disciplinas de EPS e MDS da Universidade de Brasília.
 
 ## Ambientes
 
 [Documentação](https://github.com/fga-eps-mds/2023.2-UnB-TV-DOC)
-[Backend:Users](https://github.com/fga-eps-mds/2023.2-UnB-TV-Users)
+[Users](https://github.com/fga-eps-mds/2023.2-UnB-TV-Users)
+[Admin](https://github.com/fga-eps-mds/2023.2-UnB-TV-Admin)
+[Video](https://github.com/fga-eps-mds/2023.2-UnB-TV-VideoService)
+[Gateway](https://github.com/fga-eps-mds/2023.2-UnB-TV-API-Gateway)
 [Frontend](https://github.com/fga-eps-mds/2023.2-UnB-TV-Frontend)
 
+## Acessando o repositório localmente
+
+### Requisitos
+
+- docker e docker compose
+
+Primeiro passo é instalar o docker e docker compose, para isso siga os passos de instalação do [docker](https://docs.docker.com/engine/install/) e [docker compose](https://docs.docker.com/compose/install/).
+
+Execute o servidor local:
+
+```
+docker compose up
+```
+
+Acessar o localhost em: http://localhost:4200
+
 ## Equipe
 
 |                                                              Foto                                                               |               Nome                |       Github       |             Email              | Matrícula |
@@ -30,15 +50,3 @@ Este repositório contém o frontend da aplicação UnBTV, um projeto que visa a
 |   <img width="100px" style="border-radius:10%" src="https://github.com/castroricardo1.png" alt="Ricardo de Castro Loureiro">    |    Ricardo de Castro Loureiro     |  @castroricardo1   |  [email protected]   | 200043111 |
 |      <img width="100px" style="border-radius:10%" src="https://github.com/savioc2.png" alt="Ana Carolina Rodrigues Leite">      |      Sávio Cunha de Carvalho      |      @savioc2      |     [email protected]     | 180130889 |
 |       <img width="100px" style="border-radius:10%" src="https://github.com/vitoriaaquere.png" alt="Vitória Aquere Matos">       |       Vitória Aquere Matos        |   @vitoriaaquere   |    <[email protected]>    | 190096616 |
-
-## Instruções para rodar a aplicação
-
-Instale o docker e docker compose.
-
-Para instalar o docker: https://docs.docker.com/engine/install/
-Para instalar o docker compose: https://docs.docker.com/compose/install/
-
-Para rodar o frontend execute o comando `docker compose up` e abra no navegador usando o link http://localhost:4200/.
-
-Para rodar os testes execute `docker exec -it unb-tv-web ng test` com o docker em execução e abra no navegador usando o link http://localhost:9876/#
-Para rodar o frontend execute o comando `docker compose up`

certificate.cnf

@@ -0,0 +1,21 @@
+[req]
+default_bits = 2048
+prompt = no
+default_md = sha256
+x509_extensions = v3_req
+distinguished_name = dn
+
+[dn]
+C = IN
+ST = India
+L = India
+O = My Organisation
+OU = My Organisational Unit
+emailAddress = [email protected]
+CN = localhost
+
+[v3_req]
+subjectAltName = @alt_names
+
+[alt_names]
+DNS.1 = localhost

package.json

@@ -24,9 +24,12 @@
     "@angular/platform-browser-dynamic": "^16.2.12",
     "@angular/router": "^16.2.12",
     "@angular/service-worker": "^16.2.12",
+    "@abacritt/angularx-social-login": "^2.0.0",
+    "@types/gapi.auth2": "^0.0.60",
     "angular-oauth2-oidc": "^15.0.1",
     "hls.js": "^1.4.12",
     "jwt-decode": "^3.1.2",
+    "ngx-google-analytics": "^14.0.1",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",

src/app/app-routing.module.ts

@@ -16,41 +16,76 @@ import { UpdateRoleComponent } from './pages/update-role/update-role.component';
 import { AdminGuard } from './services/admin.guard';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
 import { ParticipateComponent } from './pages/participate/participate.component';
-import { GridDaysComponent } from './pages/grid-days/grid-days.component'; 
-import { GridComponent } from './pages/grid/grid.component'; 
+import { GridDaysComponent } from './pages/grid-days/grid-days.component';
+import { GridComponent } from './pages/grid/grid.component';
+import { CatalogComponent } from './pages/catalog/catalog.component';
 
 import { WithTokenGuard } from './guard/with-token.guard';
 
 const routes: Routes = [
-  { path: 'login', component: LoginComponent },
-  { path: 'register', component: RegisterComponent },
-  { path: 'loginsocial', component: LoginSocialComponent },
   { path: 'stream', component: StreamViewComponent },
+  { path: 'catalog', component: CatalogComponent },
   { path: 'videos', component: VideoComponent },
   { path: 'video/:idVideo', component: VideoViewerComponent },
-  { path: 'activeAccount', component: ActiveAccountComponent },
-  { path: 'sendCodeResetPassword', component: CheckCodeRestPasswordComponent },
-  { path: 'changePassword', component: ResetPasswordComponent },
-  { path: '', component: VideoComponent, canActivate: [AuthGuard], }, // Default route - Showd be stream component
-  { path: 'login', component: LoginComponent, canActivate: [WithTokenGuard], },
-  { path: 'register', component: RegisterComponent, canActivate: [WithTokenGuard], },
-  { path: 'loginsocial', component: LoginSocialComponent, canActivate: [WithTokenGuard], },
-  { path: 'sendCodeResetPassword', component: CheckCodeRestPasswordComponent, canActivate: [WithTokenGuard], },
-  { path: 'changePassword', component: ResetPasswordComponent, canActivate: [WithTokenGuard], },
-  { path: 'videos', component: VideoComponent, canActivate: [AuthGuard], },
-  { path: 'video/:idVideo', component: VideoViewerComponent, canActivate: [AuthGuard], },
-  { path: 'activeAccount', component: ActiveAccountComponent, canActivate: [WithTokenGuard], },
-  { path: 'suggestAgenda', component: SuggestAgendaComponent, canActivate: [AuthGuard], },
-  { path: 'participate', component: ParticipateComponent, canActivate: [AuthGuard], },
-  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], },
-  { path: 'editUser/:id', component: EditUserComponent, canActivate: [AuthGuard], },
+  { path: '', component: CatalogComponent },
+  { path: 'login', component: LoginComponent, canActivate: [WithTokenGuard] },
+  {
+    path: 'register',
+    component: RegisterComponent,
+    canActivate: [WithTokenGuard],
+  },
+  {
+    path: 'loginsocial',
+    component: LoginSocialComponent,
+    canActivate: [WithTokenGuard],
+  },
+  {
+    path: 'sendCodeResetPassword',
+    component: CheckCodeRestPasswordComponent,
+    canActivate: [WithTokenGuard],
+  },
+  {
+    path: 'changePassword',
+    component: ResetPasswordComponent,
+    canActivate: [WithTokenGuard],
+  },
+  {
+    path: 'video/:idVideo',
+    component: VideoViewerComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'activeAccount',
+    component: ActiveAccountComponent,
+    canActivate: [WithTokenGuard],
+  },
+  {
+    path: 'suggestAgenda',
+    component: SuggestAgendaComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'participate',
+    component: ParticipateComponent,
+    canActivate: [AuthGuard],
+  },
+  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
+  {
+    path: 'editUser/:id',
+    component: EditUserComponent,
+    canActivate: [AuthGuard],
+  },
   { path: 'grid-days', component: GridDaysComponent },
   { path: 'grid-days/:day', component: GridComponent },
-  { path: 'update-role', component: UpdateRoleComponent, canActivate: [AdminGuard], }
+  {
+    path: 'update-role',
+    component: UpdateRoleComponent,
+    canActivate: [AdminGuard],
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.constant.ts

@@ -1,2 +1,5 @@
 export const EDUPLAY_API_URL = 'https://eduplay.rnp.br/services/';
-export const UNB_ID = 216;
+export const UNB_ID = 216;
+export const VIDEOS_LIMIT = 1000;
+export const VIDEOS_ORDER = 3; // ordenação pelos mais recentes (eduplay);
+export const UNB_TV_CHANNEL_ID = 190265;

src/app/app.module.ts

@@ -11,6 +11,9 @@ import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { InputTextModule } from 'primeng/inputtext';
 import { DropdownModule } from 'primeng/dropdown';
 import { ButtonModule } from 'primeng/button';
+import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
+import { GoogleLoginProvider, FacebookLoginProvider } from '@abacritt/angularx-social-login';
+
 
 // Declaration
 import { NgModule, isDevMode } from '@angular/core';
@@ -31,7 +34,7 @@ import { AuthService } from './services/auth.service';
 import { EditUserComponent } from './pages/edit-user/edit-user.component';
 import { StreamViewComponent } from './pages/stream-view/stream-view.component';
 import { UpdateRoleComponent } from './pages/update-role/update-role.component';
-import {MatPaginatorModule} from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
 import { MenuModule } from 'primeng/menu';
 import { VideoCommentComponent } from './components/video-comment/video-comment.component';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
@@ -40,6 +43,8 @@ import { GridComponent } from './pages/grid/grid.component';
 import { GridDaysComponent } from './pages/grid-days/grid-days.component';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-google-analytics';
+import { CatalogComponent } from './pages/catalog/catalog.component';
 
 @NgModule({
   imports: [
@@ -63,7 +68,10 @@ import { ServiceWorkerModule } from '@angular/service-worker';
       // Register the ServiceWorker as soon as the application is stable
       // or after 30 seconds (whichever comes first).
       registrationStrategy: 'registerWhenStable:30000'
-    })
+    }),
+    SocialLoginModule,
+    NgxGoogleAnalyticsModule.forRoot('G-XL7Z0L7VM8'),
+    NgxGoogleAnalyticsRouterModule
   ],
 
   declarations: [
@@ -85,7 +93,8 @@ import { ServiceWorkerModule } from '@angular/service-worker';
     ParticipateComponent,
     GridComponent,
     GridDaysComponent,
-    VideoCommentComponent
+    VideoCommentComponent,
+    CatalogComponent
   ],
 
   providers: [
@@ -98,8 +107,29 @@ import { ServiceWorkerModule } from '@angular/service-worker';
     },
     { provide: OAuthStorage, useValue: localStorage },
     MessageService,
-    ConfirmationService
+    ConfirmationService,
+    {
+      provide: 'SocialAuthServiceConfig',
+      useValue: {
+        autoLogin: false,
+        providers: [
+          {
+            id: GoogleLoginProvider.PROVIDER_ID,
+            provider: new GoogleLoginProvider(
+              '254484469180-1imr4ds36p8rq4fe7udkja212tu0p7jl.apps.googleusercontent.com'
+            )
+          },
+          {
+            id: FacebookLoginProvider.PROVIDER_ID,
+            provider: new FacebookLoginProvider('2640880742734858')
+          }
+        ],
+        onError: (err) => {
+          console.error(err);
+        }
+      } as SocialAuthServiceConfig,
+    }
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }