feat: seen episodes history page

PhantomPainX · Aug 12, 2023 · dbf9bb9 · dbf9bb9
1 parent 4678c7f
commit dbf9bb9
Show file tree

Hide file tree

Showing 24 changed files with 713 additions and 55 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -91,6 +91,10 @@ const routes: Routes = [
     path: 'web-video-player',
     loadChildren: () => import('./modals/web-video-player/web-video-player.module').then( m => m.WebVideoPlayerPageModule)
   },
+  {
+    path: 'seen-episodes-history',
+    loadChildren: () => import('./pages/seen-episodes-history/seen-episodes-history.module').then( m => m.SeenEpisodesHistoryPageModule)
+  },
 ];
 
 @NgModule({

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -78,6 +78,10 @@ <h3 *ngIf="!logged">Invitado</h3>
           <ion-icon slot="start" name="heart-outline"></ion-icon>
           <ion-label>Favoritos</ion-label>
         </ion-item>
+        <ion-item lines="full" detail="true" routerLink="seen-episodes-history" (click)="closeMenu()" *ngIf="logged">
+          <ion-icon slot="start" name="time-outline"></ion-icon>
+          <ion-label>Historial</ion-label>
+        </ion-item>
         <ion-item lines="full" *ngIf="logged && (user.is_staff || user.groups.moderator)" detail="true" routerLink="/admin" (click)="closeMenu()">
           <ion-icon slot="start" name="construct-outline"></ion-icon>
           <ion-label>Administración</ion-label>

diff --git a/src/app/components/embeds-popover/embeds-popover.component.html b/src/app/components/embeds-popover/embeds-popover.component.html
@@ -20,22 +20,26 @@ <h2>{{ animeName }}</h2>
     </ion-buttons>
   </ion-toolbar>
 
-  <ion-segment [ngModel]="optionValue" (ionChange)="segmentChanged($event)">
+  <ion-segment [ngModel]="optionValue" (ionChange)="segmentChanged($event)" [disabled]="!buttonsClickable">
     <ion-segment-button value="local" *ngIf="localCompatible.length > 0">Local</ion-segment-button>
     <ion-segment-button value="web" *ngIf="webCompatible.length > 0">Web</ion-segment-button>
   </ion-segment>
 </ion-header>
 
 <ion-content>
   <ion-list *ngIf="optionValue == 'local' && localCompatible" style="padding: 0;">
-    <ion-item detail="true" class="animate__animated animate__fadeIn animate__faster" lines="full" button *ngFor="let embed of localCompatible" (click)="getVideos($event, embed)">
-      {{embed.embed}}
+    <ion-item [disabled]="!buttonsClickable" detail="true" class="animate__animated animate__fadeIn animate__faster" lines="full" button *ngFor="let embed of localCompatible" (click)="getVideos($event, embed)">
+      <ion-label>
+        <h2>{{embed.embed}}</h2>
+      </ion-label>
     </ion-item>
   </ion-list>
 
   <ion-list *ngIf="optionValue == 'web' && webCompatible" style="padding: 0;">
-    <ion-item detail="true" class="animate__animated animate__fadeIn animate__faster" lines="full" button *ngFor="let embed of webCompatible" (click)="getVideos($event, embed)">
-      {{embed.embed}}
+    <ion-item [disabled]="!buttonsClickable" detail="true" class="animate__animated animate__fadeIn animate__faster" lines="full" button *ngFor="let embed of webCompatible" (click)="getVideos($event, embed)">
+      <ion-label>
+        <h2>{{embed.embed}}</h2>
+      </ion-label>
     </ion-item>
   </ion-list>
 </ion-content>
diff --git a/src/app/components/embeds-popover/embeds-popover.component.ts b/src/app/components/embeds-popover/embeds-popover.component.ts
@@ -11,6 +11,7 @@ import { VideosPopoverComponent } from '../videos-popover/videos-popover.compone
 import { DownloadService } from 'src/app/services/download/download.service';
 import { UtilsService } from 'src/app/services/utils.service';
 import { Domains } from './domains';
+import { MysqlDatabaseService } from 'src/app/services/mysql-database.service';
 
 @Component({
   selector: 'app-embeds-popover',
@@ -40,6 +41,8 @@ export class EmbedsPopoverComponent implements OnInit {
 
   private videoDomains = new Domains;
 
+  public buttonsClickable: boolean = false;
+
   constructor(
     public resolvers: ResolversService,
     public popoverCtrl: PopoverController,
@@ -49,21 +52,13 @@ export class EmbedsPopoverComponent implements OnInit {
     public localStorage: PreferencesService,
     public platform: Platform,
     public downloadService: DownloadService,
-    public utils: UtilsService
+    public utils: UtilsService,
+    private database: MysqlDatabaseService
   ) {
 
   }
 
-  ngOnInit() {
-
-    // se obtiene el episodio siguiente
-    for (let ep of this.episode.anime.episodios) {
-      if (ep.numero == this.episode.numero + 1) {
-        this.episode['nextEpisode'] = ep;
-      }
-    }
-
-    console.log("Episodio actualizado en embeds popover: ", this.episode);
+  async ngOnInit() {
 
     if (!this.embedRequested) {
       this.localCompatible = this.embeds.filter(embed => 
@@ -123,9 +118,27 @@ export class EmbedsPopoverComponent implements OnInit {
           this.user = await this.localStorage.getUser();
         }
 
+        if (!this.episode.anime.episodios) {
+          await this.database.getAnimeDetail(this.episode.anime.id, this.user.token).then(async (res: any) => {
+            this.episode.anime.episodios = res.episodios;
+            this.buttonsClickable = true;
+          });
+        } else {
+          this.buttonsClickable = true;
+        }
+        // se obtiene el episodio siguiente
+        for (let ep of this.episode.anime.episodios) {
+          if (ep.numero == this.episode.numero + 1) {
+            this.episode['nextEpisode'] = ep;
+          }
+        }
+
+        console.log("Episodio actualizado en embeds popover: ", this.episode);
+
         this.deserveAd = await this.localStorage.getDeserveAd();
         this.settings = await this.localStorage.getSettings();
       });
+
     } else {
       this.webCompatible = this.embeds;
       this.optionValue = 'web';

diff --git a/src/app/components/videos-popover/videos-popover.component.html b/src/app/components/videos-popover/videos-popover.component.html
@@ -25,7 +25,9 @@ <h2>{{ title }}</h2>
   <ion-list style="padding: 0;">
     <div *ngFor="let video of videos">
       <ion-item *ngIf="video.kind == 'video'" detail="true" class="animate__animated animate__fadeIn animate__faster" lines="full" button (click)="playVideo(video)">
-        {{video.label}}
+        <ion-label>
+          <h2>{{video.label}}</h2>
+        </ion-label>
       </ion-item>
     </div>
   </ion-list>

diff --git a/src/app/pages/admin/see-users/user-detail/reports/reports.page.html b/src/app/pages/admin/see-users/user-detail/reports/reports.page.html
@@ -23,7 +23,7 @@
       </ion-avatar>
       <ion-label>
         <h2>{{ r.reporter_user.username }}</h2>
-        <p>{{ utils.formatDate(r.created_at) }}</p>
+        <p>{{ utils.formatFullDate(r.created_at) }}</p>
       </ion-label>
     </ion-item>
 

diff --git a/src/app/pages/admin/see-users/user-detail/user-detail.page.html b/src/app/pages/admin/see-users/user-detail/user-detail.page.html
@@ -155,29 +155,29 @@ <h2>Baneado por:</h2>
           <ion-item>
             <ion-label>
               <h2>Fecha del ban:</h2>
-              <p>{{ utils.formatDate(consultedUser.user_extra.ban_date) }}</p>
+              <p>{{ utils.formatFullDate(consultedUser.user_extra.ban_date) }}</p>
             </ion-label>
           </ion-item>
         </ion-item-group>
 
         <ion-item>
           <ion-label>
             <h2>Fecha de registro</h2>
-            <p>{{ utils.formatDate(consultedUser.date_joined) }}</p>
+            <p>{{ utils.formatFullDate(consultedUser.date_joined) }}</p>
           </ion-label>
         </ion-item>
 
         <ion-item>
           <ion-label>
             <h2>Último inicio de sesión</h2>
-            <p>{{ utils.formatDate(consultedUser.last_login) }}</p>
+            <p>{{ utils.formatFullDate(consultedUser.last_login) }}</p>
           </ion-label>
         </ion-item>
 
         <ion-item>
           <ion-label>
             <h2>Fecha de última modificación de perfil</h2>
-            <p>{{ utils.formatDate(consultedUser.user_extra.updated_at) }}</p>
+            <p>{{ utils.formatFullDate(consultedUser.user_extra.updated_at) }}</p>
           </ion-label>
         </ion-item>
       </ion-list>

diff --git a/src/app/pages/auth/signin/signin.page.ts b/src/app/pages/auth/signin/signin.page.ts
@@ -134,7 +134,7 @@ export class SigninPage implements OnInit {
           GoogleAuth.signOut();
           this.alertCtrl.create({
             header: "Baneado por " + res.user.user_extra.ban_admin.username,
-            subHeader: "Motivo: " + res.user.user_extra.ban_reason + " (" + this.utils.formatDate(res.user.user_extra.ban_date) + ")",
+            subHeader: "Motivo: " + res.user.user_extra.ban_reason + " (" + this.utils.formatFullDate(res.user.user_extra.ban_date) + ")",
             message: "Si crees que esto es un error, contacta con nosotros a través del correo electrónico [email protected]",
             mode: 'ios',
             translucent: true,
@@ -306,7 +306,7 @@ export class SigninPage implements OnInit {
           if (!res.user.is_active) {
             this.alertCtrl.create({
               header: "Baneado por " + res.user.user_extra.ban_admin.username,
-              subHeader: "Motivo: " + res.user.user_extra.ban_reason + " (" + this.utils.formatDate(res.user.user_extra.ban_date) + ")",
+              subHeader: "Motivo: " + res.user.user_extra.ban_reason + " (" + this.utils.formatFullDate(res.user.user_extra.ban_date) + ")",
               message: "Si crees que esto es un error, contacta con nosotros a través del correo electrónico [email protected]",
               mode: 'ios',
               translucent: true,
@@ -512,7 +512,7 @@ export class SigninPage implements OnInit {
           if (!res.user.is_active) {
             this.alertCtrl.create({
               header: "Baneado por " + res.user.user_extra.ban_admin.username,
-              subHeader: "Motivo: " + res.user.user_extra.ban_reason + " (" + this.utils.formatDate(res.user.user_extra.ban_date) + ")",
+              subHeader: "Motivo: " + res.user.user_extra.ban_reason + " (" + this.utils.formatFullDate(res.user.user_extra.ban_date) + ")",
               message: "Si crees que esto es un error, contacta con nosotros a través del correo electrónico [email protected]",
               mode: 'ios',
               translucent: true,

diff --git a/src/app/pages/directorio/directorio.page.ts b/src/app/pages/directorio/directorio.page.ts
@@ -301,8 +301,10 @@ export class DirectorioPage implements OnInit {
       });
     }
 
+    const subHeaderText = "Agregado el " + this.utils.formatDayPretty(anime.agregado) + " " + this.utils.formatDay(anime.agregado) + " de " + this.utils.formatMonthPretty(anime.agregado) + " del " + this.utils.formatYear(anime.agregado) + " a las " + this.utils.formatTimePretty(anime.agregado);
     const actionSheet = await this.actionSheetCtrl.create({
       header: anime.nombre,
+      subHeader: subHeaderText,
       buttons: buttons
     });
     await actionSheet.present();

diff --git a/src/app/pages/favorites/favorites.page.ts b/src/app/pages/favorites/favorites.page.ts
@@ -204,8 +204,10 @@ export class FavoritesPage implements OnInit {
       });
     }
 
+    const subHeaderText = "Agregado el " + this.utils.formatDayPretty(anime.agregado) + " " + this.utils.formatDay(anime.agregado) + " de " + this.utils.formatMonthPretty(anime.agregado) + " del " + this.utils.formatYear(anime.agregado) + " a las " + this.utils.formatTimePretty(anime.agregado);
     const actionSheet = await this.actionSheetCtrl.create({
       header: anime.nombre,
+      subHeader: subHeaderText,
       buttons: buttons
     });
     await actionSheet.present();

diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
@@ -61,8 +61,8 @@ <h4 *ngIf="!episode.color?.isDark" style="color: #000000">Episodio {{ episode.nu
             <p *ngIf="episode.color?.isDark" style="color: #ffffff">{{episode.anime.nombre}}</p>
             <p *ngIf="!episode.color?.isDark" style="color: #000000">{{episode.anime.nombre}}</p>
           </div>
-          <p style="padding-top: 4px; color: #ffffff" *ngIf="episode.color?.isDark && episode.seconds_seen != null && episode.seconds_seen.seconds != 0">Visto {{utils.formatSeconds(episode.seconds_seen.seconds)}} de {{utils.formatSeconds(episode.seconds_seen.total_seconds)}}</p>
-            <p style="padding-top: 4px; color: #000000" *ngIf="!episode.color?.isDark && episode.seconds_seen != null && episode.seconds_seen.seconds != 0">Visto {{utils.formatSeconds(episode.seconds_seen.seconds)}} de {{utils.formatSeconds(episode.seconds_seen.total_seconds)}}</p>
+          <p style="padding-top: 4px; color: #ffffff" *ngIf="episode.color?.isDark && episode.seconds_seen != null && episode.seconds_seen.seconds != 0">{{utils.formatSeconds(episode.seconds_seen.seconds)}} de {{utils.formatSeconds(episode.seconds_seen.total_seconds)}}</p>
+            <p style="padding-top: 4px; color: #000000" *ngIf="!episode.color?.isDark && episode.seconds_seen != null && episode.seconds_seen.seconds != 0">{{utils.formatSeconds(episode.seconds_seen.seconds)}} de {{utils.formatSeconds(episode.seconds_seen.total_seconds)}}</p>
         </div>
         <div class="playIcon">
           <ion-icon size="large" name="play-outline" *ngIf="episode.color?.isDark" style="color: #ffffff"></ion-icon>
@@ -195,7 +195,7 @@ <h4>{{ anime.nombre }}</h4>
         <h4>{{ episode.anime.nombre }}</h4>
         <h6>Episodio {{ episode.numero }}</h6>
         <p>{{ utils.dateAgo(episode.fecha) }}</p>
-        <p style="padding-top: 4px" *ngIf="episode.seconds_seen != null && episode.seconds_seen.seconds != 0">Visto {{utils.formatSeconds(episode.seconds_seen.seconds)}} de {{utils.formatSeconds(episode.seconds_seen.total_seconds)}}</p>
+        <p style="padding-top: 4px" *ngIf="episode.seconds_seen != null && episode.seconds_seen.seconds != 0">{{utils.formatSeconds(episode.seconds_seen.seconds)}} de {{utils.formatSeconds(episode.seconds_seen.total_seconds)}}</p>
       </ion-label>
 
       <ion-buttons slot="end">

diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
@@ -338,17 +338,26 @@ export class HomePage implements OnInit {
   async openProviders(event, episode) {
 
     if (!this.platform.is('capacitor')) {
-      const modal = await this.modalCtrl.create({
-        component: WebVideoPlayerPage,
-        cssClass: 'rounded-modal',
-        breakpoints: [0, 1],
-        initialBreakpoint: 1,
-        // canDismiss: false,
-        componentProps: {
-          episode: episode
-        }
-      })
-      modal.present();
+      const loader = await this.utils.createIonicLoader("Cargando reproductor...");
+      await loader.present();
+      this.database.getAnimeDetail(episode.anime.id, this.token).then(async anime => {
+        await loader.dismiss();
+        episode.anime = anime;
+        const modal = await this.modalCtrl.create({
+          component: WebVideoPlayerPage,
+          cssClass: 'rounded-modal',
+          breakpoints: [0, 1],
+          initialBreakpoint: 1,
+          // canDismiss: false,
+          componentProps: {
+            episode: episode
+          }
+        })
+        modal.present();
+      }).catch(async () => {
+        await loader.dismiss();
+        this.utils.showToast("Ha ocurrido un error, intenta más tarde", 2, false);
+      });
     } else {
       if (!episode.anime.imagen.includes(this.domain)) {
         episode.anime.imagen = this.domain + episode.anime.imagen;
@@ -568,8 +577,10 @@ export class HomePage implements OnInit {
       });
     }
 
+    const subHeaderText = "Agregado el " + this.utils.formatDayPretty(anime.agregado) + " " + this.utils.formatDay(anime.agregado) + " de " + this.utils.formatMonthPretty(anime.agregado) + " del " + this.utils.formatYear(anime.agregado) + " a las " + this.utils.formatTimePretty(anime.agregado);
     const actionSheet = await this.actionSheetCtrl.create({
       header: anime.nombre,
+      subHeader: subHeaderText,
       buttons: buttons
     });
     await actionSheet.present();

diff --git a/src/app/pages/home/see-more/see-more.page.html b/src/app/pages/home/see-more/see-more.page.html
@@ -116,7 +116,7 @@
         <h4>{{ episode.anime.nombre }}</h4>
         <h5>Episodio {{ episode.numero }}</h5>
         <p>{{ utils.dateAgo(episode.fecha) }}</p>
-        <p style="padding-top: 4px" *ngIf="episode.seconds_seen != null && episode.seconds_seen.seconds != 0">Visto {{utils.formatSeconds(episode.seconds_seen.seconds)}} de {{utils.formatSeconds(episode.seconds_seen.total_seconds)}}</p>
+        <p style="padding-top: 4px" *ngIf="episode.seconds_seen != null && episode.seconds_seen.seconds != 0">{{utils.formatSeconds(episode.seconds_seen.seconds)}} de {{utils.formatSeconds(episode.seconds_seen.total_seconds)}}</p>
       </ion-label>
 
       <ion-buttons slot="end">

diff --git a/src/app/pages/home/see-more/see-more.page.ts b/src/app/pages/home/see-more/see-more.page.ts
@@ -460,17 +460,26 @@ export class SeeMorePage implements OnInit {
   async openProviders(event, episode) {
 
     if (!this.platform.is('capacitor')) {
-      const modal = await this.modalCtrl.create({
-        component: WebVideoPlayerPage,
-        cssClass: 'rounded-modal',
-        breakpoints: [0, 1],
-        initialBreakpoint: 1,
-        // canDismiss: false,
-        componentProps: {
-          episode: episode
-        }
-      })
-      modal.present();
+      const loader = await this.utils.createIonicLoader("Cargando reproductor...");
+      await loader.present();
+      this.database.getAnimeDetail(episode.anime.id, this.token).then(async anime => {
+        await loader.dismiss();
+        episode.anime = anime;
+        const modal = await this.modalCtrl.create({
+          component: WebVideoPlayerPage,
+          cssClass: 'rounded-modal',
+          breakpoints: [0, 1],
+          initialBreakpoint: 1,
+          // canDismiss: false,
+          componentProps: {
+            episode: episode
+          }
+        })
+        modal.present();
+      }).catch(async () => {
+        await loader.dismiss();
+        this.utils.showToast("Ha ocurrido un error, intenta más tarde", 2, false);
+      });
     } else {
       const popover = await this.popoverCtrl.create({
         component: ProvidersPopoverComponent,
@@ -601,8 +610,10 @@ export class SeeMorePage implements OnInit {
       });
     }
 
+    const subHeaderText = "Agregado el " + this.utils.formatDayPretty(anime.agregado) + " " + this.utils.formatDay(anime.agregado) + " de " + this.utils.formatMonthPretty(anime.agregado) + " del " + this.utils.formatYear(anime.agregado) + " a las " + this.utils.formatTimePretty(anime.agregado);
     const actionSheet = await this.actionSheetCtrl.create({
       header: anime.nombre,
+      subHeader: subHeaderText,
       buttons: buttons
     });
     await actionSheet.present();

diff --git a/src/app/pages/profile/blocked-users/blocked-users.page.html b/src/app/pages/profile/blocked-users/blocked-users.page.html
@@ -40,7 +40,7 @@
       </ion-avatar>
       <ion-label>
         <h2>{{ d.blocked_user_detail.username }}</h2>
-        <p>{{ utils.formatDate(d.created_at) }}</p>
+        <p>{{ utils.formatFullDate(d.created_at) }}</p>
       </ion-label>
 
       <ion-button fill="outline" color="danger" slot="end" (click)="unblockUser(d)">

diff --git a/src/app/pages/seen-episodes-history/seen-episodes-history-routing.module.ts b/src/app/pages/seen-episodes-history/seen-episodes-history-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SeenEpisodesHistoryPage } from './seen-episodes-history.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SeenEpisodesHistoryPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SeenEpisodesHistoryPageRoutingModule {}