What if WorkoutRunnerComponent and WorkoutAudioComponent were organized as sibling components? 

If WorkoutAudioComponent and WorkoutRunnerComponent become siblings, we can make good use of Angular's eventing and template reference variables. Confused? Well, to start with, this is how the components should be laid out:

    <workout-runner></workout-runner> 
    <workout-audio></workout-audio> 

Does it ring any bells? Starting from this template, can you guess how the final HTML template would look? Think about it before you proceed further.

Still struggling? As soon as we make them sibling components, the power of the Angular templating engine comes to the fore. The following template code is enough to integrate WorkoutRunnerComponent and WorkoutAudioComponent:

<abe-workout-runner (exercisePaused)="wa.stop()" 
    (exerciseResumed)="wa.resume()" 
    (exerciseProgress)= "wa.onExerciseProgress($event)" 
    (exerciseChanged)= "wa.onExerciseChanged($event)" 
    (workoutComplete)="wa.stop()" 
    (workoutStarted)="wa.resume()"> 
</abe-workout-runner> 
<abe-workout-audio #wa></abe-workout-audio> 

The WorkoutAudioComponent template variable, wa, is being manipulated by referencing the variable in the event handler expressions on WorkoutRunnerComponent. Quite elegant! We still need to solve the biggest puzzle in this approach: Where does the preceding code go? Remember, WorkoutRunnerComponent is loaded as part of route loading. Nowhere in the code have we had a statement like this:

    <workout-runner></workout-runner> 

We need to reorganize the component tree and bring in a container component that can host WorkoutRunnerComponent and WorkoutAudioComponent. The router then loads this container component instead of WorkoutRunnerComponent. Let's do it.

Generate a new component code from command line by navigating to trainer/src/app/workout-runner and executing:

ng generate component workout-container -is

Copy the HTML code with the events described to the template file. The workout container component is ready.

We just need to rewire the routing setup. Open app-routing.module.ts. Change the route for the workout runner and add the necessary import:

import {WorkoutContainerComponent} 
        from './workout-runner/workout-container/workout-container.component'; 
..
{ path: '/workout', component: WorkoutContainerComponent },

And we have a working audio integration that is clear, concise, and pleasing to the eye!

It's time now to wrap up the chapter, but not before addressing the video player dialog glitch introduced in the earlier sections. The workout does not stop/pause when the video player dialog is open.

We are not going to detail the fix here, and urge the readers to give it a try without consulting the checkpoint3.4 code.

Here is an obvious hint. Use the eventing infrastructure!

And another one: raise events from VideoPlayerComponent, one for each playback started and ended.

And one last hint: the open function on the dialog service (Modal) returns a promise, which is resolved when the dialog is closed.