0

I have the following problem, I haven't been able to find a solution to this:

I have a list of videos(they are played on the listing page) when I load a listing page

<ion-col class="category-item travel-category" size="12" *ngFor="let item of videos"
 [routerLink]="['/app/video-admin/details', item.IdVideo]"> 
  <app-video-player [videoId]="item.IdVideo">
  </app-video-player >
</ion-col>

So what I need is to continue playing the video that is selected when it goes to the video detail page, Since the video is already playing I don't want to connect to the webrtc source again, it would take about 10 seconds to re-connect, how could I reuse the (app-video-player) component in the detail page "/app/video-admin/details" and keeping its state?

The easiest would be to reconnect and search where it was when clicked, but that means reconnection and searching where it was on the previous page(route) but that is exactly what I want to avoid, I think that's not a good solution.

The detail layout would have more controls, and basically only the selected video running

Any idea guys? thanks

Mjeduar
  • 67
  • 1
  • 11

1 Answers1

0

You would need to design the layout such that the video player component is not destroyed when navigating to the new route.

That means your route should not be navigating to a new component, but rather it should be navigating within a component that contains both a video player and a details component. Any component can have a router outlet in it, and you can use child routes to navigate.

It's not clear what you want the layout to be, but here's the simplest example, with the details component underneath the list of videos:

Component HTML

<ion-col class="category-item travel-category" size="12" *ngFor="let item of videos"
 [routerLink]="['details', item.IdVideo]"> 
  <app-video-player [videoId]="item.IdVideo">
  </app-video-player >
</ion-col>
<router-outlet></router-outlet>

Routing Module

const routes: Routes = [
  {
    path: 'app/video-admin',
    component: VideoAdminComponent,
    children: [
      {
        path: 'details/:id',
        component: VideoDetailsComponent,
      },
    ],
  },
];

Obviously this isn't the layout you want, but this should give you the general knowledge to follow through with what you actually want.

Docs: https://angular.io/guide/router#nesting-routes

Chris Hamilton
  • 9,252
  • 1
  • 9
  • 26
  • But how to present only one video, what I understand is it will add the details component(a list of events and some extra controls), would I have to hide the other videos from the list? – Mjeduar Aug 08 '22 at 09:34